Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[Emotion] Reduce CSS browser prefixing to supported browsers only #7272

Merged
merged 23 commits into from
Oct 10, 2023
Merged

[Emotion] Reduce CSS browser prefixing to supported browsers only #7272

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
23 commits
Select commit Hold shift + click to select a range
bf9a394
Copy Emotion's existing `prefixer` logic
cee-chen Oct 9, 2023
e63d421
Add typing + minor syntax changes
cee-chen Oct 9, 2023
a05e278
Remove unnecessary `:`/`::` selector prefixes
cee-chen Oct 9, 2023
5ce5159
Remove unnecessary animation/keyframes prefixes
cee-chen Oct 9, 2023
60b45e5
[organization] move js docblock/export up above
cee-chen Oct 9, 2023
b180c40
Remove flex CSS prefixes
cee-chen Oct 9, 2023
843c05b
Remove unnecessary transform/transition CSS prefixes
cee-chen Oct 9, 2023
ef59862
Remove unnecessary position sticky prefixes
cee-chen Oct 9, 2023
29f7a4f
Remove unnecessary writing-mode prefixes
cee-chen Oct 9, 2023
b9c076d
Remove unnecessary columns prefixes
cee-chen Oct 9, 2023
012e6d9
Remove unnecessary text-related prefixes
cee-chen Oct 9, 2023
20a55d4
Remove unnecessary filter/image related prefixes
cee-chen Oct 9, 2023
2840969
Remove unnecessary `inline` logical property prefixes
cee-chen Oct 9, 2023
35b399c
Tweak prefixes for sizing values to only `stretch` values
cee-chen Oct 9, 2023
fb1f2bf
Remove unnecessary extra `-moz`/`-ms` prefixes
cee-chen Oct 9, 2023
4d37898
Add more tests + comments for more prefixed CSS
cee-chen Oct 9, 2023
8c31cb0
Add mask tests
cee-chen Oct 9, 2023
e0f7dfa
More granular `background-clip` prefixing
cee-chen Oct 9, 2023
d596e52
[docs] Update docs site to use prefix plugin + add documentation
cee-chen Oct 9, 2023
7e1ed3e
Update default EUI provider cache and theme provider to use new prefi…
cee-chen Oct 9, 2023
4366d18
[misc] Fix missing color mode label/name
cee-chen Oct 9, 2023
3bfaaf0
Update downstream `EuiThemeProvider` snapshots
cee-chen Oct 9, 2023
9d4bb78
changelog
cee-chen Oct 9, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -150,6 +150,7 @@
"@types/react-dom": "^18.2.6",
"@types/react-is": "^17.0.3",
"@types/react-router-dom": "^5.3.3",
"@types/stylis": "^4.2.1",
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@tkajtoch I'd appreciate your advice on this one - the stylis package that we're using to write a custom prefixer plugin for Emotion is a dependency of @emotion/css and thus should always be present in consumer applications (since @emotion/css is listed in peerDependencies). I'm hesitating as to whether or not that means we need to explicitly list the stylis dependency in our own package.json, and if we do, whether it should be under either dependencies or peerDependencies.

What's also a little odd is that Emotion appears to pin its dependency on stylis specifically at 4.2.0 without a caret (latest is 4.3.0), so I worry that including our own stylis version would potentially cause weird issues or conflicts with Emotion. 🤔

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Chatted with Tomasz on this in our sync today - he's good with moving forward with this. If any issues do come up with consumer dependencies, we can absolutely revisit/fix this in the future.

"@types/testing-library__jest-dom": "^5.14.3",
"@types/url-parse": "^1.4.8",
"@types/uuid": "^8.3.0",
Expand Down
3 changes: 2 additions & 1 deletion src-docs/src/components/codesandbox/link.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -169,12 +169,13 @@ import '@elastic/charts/dist/theme_only_${colorMode}.css';`
import React from 'react';
import { createRoot } from 'react-dom/client';
import createCache from '@emotion/cache';
import { EuiProvider } from '@elastic/eui';
import { EuiProvider, euiStylisPrefixer } from '@elastic/eui';

import { Demo } from './demo';

const cache = createCache({
key: 'codesandbox',
stylisPlugins: [euiStylisPrefixer],
container: document.querySelector('meta[name="emotion-styles"]'),
});
cache.compat = true;
Expand Down
3 changes: 3 additions & 0 deletions src-docs/src/views/app_context.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ import { translateUsingPseudoLocale } from '../services';
import { getLocale } from '../store';

import { EuiContext, EuiProvider } from '../../../src/components';
import { euiStylisPrefixer } from '../../../src/services';
import { EUI_THEMES } from '../../../src/themes';

import favicon16Prod from '../images/favicon/prod/favicon-16x16.png';
Expand All @@ -19,11 +20,13 @@ import favicon96Dev from '../images/favicon/dev/favicon-96x96.png';

const generalEmotionCache = createCache({
key: 'css',
stylisPlugins: [euiStylisPrefixer],
container: document.querySelector('meta[name="emotion-styles"]'),
});
generalEmotionCache.compat = true;
const utilityCache = createCache({
key: 'util',
stylisPlugins: [euiStylisPrefixer],
container: document.querySelector('meta[name="emotion-styles-utility"]'),
});

Expand Down
44 changes: 32 additions & 12 deletions src-docs/src/views/provider/provider_example.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -96,21 +96,41 @@ export const ProviderExample = {
{'<EuiProvider globalStyles={false} utilityClasses={false} />'}
</EuiCodeBlock>

<h3 id="cache-location">
@emotion/cache and style injection location
</h3>
<h3 id="cache-customization">@emotion/cache customization</h3>
<p>
In the case that your app has its own static stylesheet,{' '}
<EuiCode>@emotion</EuiCode> styles may not be injected into the
correct location in the <EuiCode>{'<head>'}</EuiCode>, causing
unintentional overrides or unapplied styles.{' '}
<EuiLink href="https://emotion.sh/docs/@emotion/cache" external>
The <strong>@emotion/cache</strong> library
The{' '}
<EuiLink
href="https://emotion.sh/docs/@emotion/cache"
target="_blank"
>
<strong>@emotion/cache</strong> library
</EuiLink>{' '}
provides configuration options that help with specifying the
injection location. We recommend using <EuiCode>{'<meta>'}</EuiCode>{' '}
tags to achieve this.
provides extra configuration options for EUI's CSS-in-JS behavior:
</p>
<ul>
<li>
<strong>Browser prefixing</strong>: By default, EUI uses CSS
browser prefixes based on our{' '}
<EuiLink
href="https://www.elastic.co/support/matrix#matrix_browsers"
target="_blank"
>
supported browsers matrix
</EuiLink>{' '}
(latest evergreen only). Should you need to customize this, you
can pass in your own prefix plugin via the{' '}
<EuiCode>stylisPlugins</EuiCode> option.
<EuiSpacer size="s" />
</li>
<li>
<strong>Injection location</strong>: In the case that your app has
its own static stylesheet, Emotion's styles may not be injected
into the correct location in the <EuiCode>{'<head>'}</EuiCode>,
causing unintentional overrides or unapplied styles. You can use
the <EuiCode>container</EuiCode> option and{' '}
<EuiCode>{'<meta>'}</EuiCode> tags to achieve this.
</li>
</ul>

<GlobalStyles />

Expand Down
9 changes: 4 additions & 5 deletions src-docs/src/views/provider/provider_styles.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import React from 'react';

import { EuiCodeBlock, EuiSpacer, useEuiTheme } from '../../../../src';
import { EuiCodeBlock, useEuiTheme } from '../../../../src';

export default () => {
const { colorMode } = useEuiTheme();
Expand All @@ -22,18 +22,17 @@ export default () => {
</html>`}
</EuiCodeBlock>

<EuiSpacer size="s" />

<EuiCodeBlock language="jsx" fontSize="m" isCopyable>
{`// App.js
import { EuiProvider } from '@elastic/eui'
import { EuiProvider, euiStylisPrefixer } from '@elastic/eui'
import createCache from '@emotion/cache';

const euiCache = createCache({
key: 'eui',
stylisPlugins: [euiStylisPrefixer],
container: document.querySelector('meta[name="eui-style-insert"]'),
});
cache.compat = true;
euiCache.compat = true;

<EuiProvider${colorMode === 'DARK' ? ' colorMode="dark"' : ''} cache={euiCache}>
{/* Content */}
Expand Down
50 changes: 25 additions & 25 deletions src/components/bottom_bar/__snapshots__/bottom_bar.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,12 +6,12 @@ exports[`EuiBottomBar is rendered 1`] = `
>
<div />
<div
class="emotion-euiColorMode-dark-colorClassName"
class="emotion-euiColorMode-dark"
data-euiportal="true"
>
<section
aria-label="aria-label"
class="euiBottomBar euiBottomBar--fixed euiBottomBar--paddingMedium testClass1 testClass2 emotion-euiBottomBar-fixed-m-euiTestCss-euiColorMode-dark-colorClassName"
class="euiBottomBar euiBottomBar--fixed euiBottomBar--paddingMedium testClass1 testClass2 emotion-euiBottomBar-fixed-m-euiTestCss-euiColorMode-dark"
data-test-subj="test subject string"
style="left: 0px; right: 0px; bottom: 0px;"
>
Expand All @@ -38,12 +38,12 @@ exports[`EuiBottomBar props affordForDisplacement can be false 1`] = `
>
<div />
<div
class="emotion-euiColorMode-dark-colorClassName"
class="emotion-euiColorMode-dark"
data-euiportal="true"
>
<section
aria-label="Page level controls"
class="euiBottomBar euiBottomBar--fixed euiBottomBar--paddingMedium emotion-euiBottomBar-fixed-m-euiColorMode-dark-colorClassName"
class="euiBottomBar euiBottomBar--fixed euiBottomBar--paddingMedium emotion-euiBottomBar-fixed-m-euiColorMode-dark"
style="left: 0px; right: 0px; bottom: 0px;"
>
<h2
Expand All @@ -69,12 +69,12 @@ exports[`EuiBottomBar props bodyClassName is rendered 1`] = `
>
<div />
<div
class="emotion-euiColorMode-dark-colorClassName"
class="emotion-euiColorMode-dark"
data-euiportal="true"
>
<section
aria-label="Page level controls"
class="euiBottomBar euiBottomBar--fixed euiBottomBar--paddingMedium emotion-euiBottomBar-fixed-m-euiColorMode-dark-colorClassName"
class="euiBottomBar euiBottomBar--fixed euiBottomBar--paddingMedium emotion-euiBottomBar-fixed-m-euiColorMode-dark"
style="left: 0px; right: 0px; bottom: 0px;"
>
<h2
Expand All @@ -99,12 +99,12 @@ exports[`EuiBottomBar props landmarkHeading 1`] = `
>
<div />
<div
class="emotion-euiColorMode-dark-colorClassName"
class="emotion-euiColorMode-dark"
data-euiportal="true"
>
<section
aria-label="This should have been label"
class="euiBottomBar euiBottomBar--fixed euiBottomBar--paddingMedium emotion-euiBottomBar-fixed-m-euiColorMode-dark-colorClassName"
class="euiBottomBar euiBottomBar--fixed euiBottomBar--paddingMedium emotion-euiBottomBar-fixed-m-euiColorMode-dark"
style="left: 0px; right: 0px; bottom: 0px;"
>
<h2
Expand All @@ -129,12 +129,12 @@ exports[`EuiBottomBar props paddingSize l is rendered 1`] = `
>
<div />
<div
class="emotion-euiColorMode-dark-colorClassName"
class="emotion-euiColorMode-dark"
data-euiportal="true"
>
<section
aria-label="Page level controls"
class="euiBottomBar euiBottomBar--fixed euiBottomBar--paddingLarge emotion-euiBottomBar-fixed-l-euiColorMode-dark-colorClassName"
class="euiBottomBar euiBottomBar--fixed euiBottomBar--paddingLarge emotion-euiBottomBar-fixed-l-euiColorMode-dark"
style="left: 0px; right: 0px; bottom: 0px;"
>
<h2
Expand All @@ -159,12 +159,12 @@ exports[`EuiBottomBar props paddingSize m is rendered 1`] = `
>
<div />
<div
class="emotion-euiColorMode-dark-colorClassName"
class="emotion-euiColorMode-dark"
data-euiportal="true"
>
<section
aria-label="Page level controls"
class="euiBottomBar euiBottomBar--fixed euiBottomBar--paddingMedium emotion-euiBottomBar-fixed-m-euiColorMode-dark-colorClassName"
class="euiBottomBar euiBottomBar--fixed euiBottomBar--paddingMedium emotion-euiBottomBar-fixed-m-euiColorMode-dark"
style="left: 0px; right: 0px; bottom: 0px;"
>
<h2
Expand All @@ -189,12 +189,12 @@ exports[`EuiBottomBar props paddingSize none is rendered 1`] = `
>
<div />
<div
class="emotion-euiColorMode-dark-colorClassName"
class="emotion-euiColorMode-dark"
data-euiportal="true"
>
<section
aria-label="Page level controls"
class="euiBottomBar euiBottomBar--fixed emotion-euiBottomBar-fixed-euiColorMode-dark-colorClassName"
class="euiBottomBar euiBottomBar--fixed emotion-euiBottomBar-fixed-euiColorMode-dark"
style="left: 0px; right: 0px; bottom: 0px;"
>
<h2
Expand All @@ -219,12 +219,12 @@ exports[`EuiBottomBar props paddingSize s is rendered 1`] = `
>
<div />
<div
class="emotion-euiColorMode-dark-colorClassName"
class="emotion-euiColorMode-dark"
data-euiportal="true"
>
<section
aria-label="Page level controls"
class="euiBottomBar euiBottomBar--fixed euiBottomBar--paddingSmall emotion-euiBottomBar-fixed-s-euiColorMode-dark-colorClassName"
class="euiBottomBar euiBottomBar--fixed euiBottomBar--paddingSmall emotion-euiBottomBar-fixed-s-euiColorMode-dark"
style="left: 0px; right: 0px; bottom: 0px;"
>
<h2
Expand All @@ -249,12 +249,12 @@ exports[`EuiBottomBar props position fixed is rendered 1`] = `
>
<div />
<div
class="emotion-euiColorMode-dark-colorClassName"
class="emotion-euiColorMode-dark"
data-euiportal="true"
>
<section
aria-label="Page level controls"
class="euiBottomBar euiBottomBar--fixed euiBottomBar--paddingMedium emotion-euiBottomBar-fixed-m-euiColorMode-dark-colorClassName"
class="euiBottomBar euiBottomBar--fixed euiBottomBar--paddingMedium emotion-euiBottomBar-fixed-m-euiColorMode-dark"
style="left: 0px; right: 0px; bottom: 0px;"
>
<h2
Expand All @@ -280,12 +280,12 @@ exports[`EuiBottomBar props position props are altered 1`] = `
>
<div />
<div
class="emotion-euiColorMode-dark-colorClassName"
class="emotion-euiColorMode-dark"
data-euiportal="true"
>
<section
aria-label="Page level controls"
class="euiBottomBar euiBottomBar--fixed euiBottomBar--paddingMedium emotion-euiBottomBar-fixed-m-euiColorMode-dark-colorClassName"
class="euiBottomBar euiBottomBar--fixed euiBottomBar--paddingMedium emotion-euiBottomBar-fixed-m-euiColorMode-dark"
style="left: 30px; right: 30px; bottom: 30px; top: 30px;"
>
<h2
Expand All @@ -311,7 +311,7 @@ exports[`EuiBottomBar props position static is rendered 1`] = `
<div>
<section
aria-label="Page level controls"
class="euiBottomBar euiBottomBar--static euiBottomBar--paddingMedium emotion-euiBottomBar-static-m-euiColorMode-dark-colorClassName"
class="euiBottomBar euiBottomBar--static euiBottomBar--paddingMedium emotion-euiBottomBar-static-m-euiColorMode-dark"
style="left: 0px; right: 0px; bottom: 0px;"
>
<h2
Expand All @@ -337,7 +337,7 @@ exports[`EuiBottomBar props position sticky is rendered 1`] = `
<div>
<section
aria-label="Page level controls"
class="euiBottomBar euiBottomBar--sticky euiBottomBar--paddingMedium emotion-euiBottomBar-sticky-m-euiColorMode-dark-colorClassName"
class="euiBottomBar euiBottomBar--sticky euiBottomBar--paddingMedium emotion-euiBottomBar-sticky-m-euiColorMode-dark"
style="left: 0px; right: 0px; bottom: 0px;"
>
<h2
Expand All @@ -363,12 +363,12 @@ exports[`EuiBottomBar props style is customized 1`] = `
>
<div />
<div
class="emotion-euiColorMode-dark-colorClassName"
class="emotion-euiColorMode-dark"
data-euiportal="true"
>
<section
aria-label="Page level controls"
class="euiBottomBar euiBottomBar--fixed euiBottomBar--paddingMedium emotion-euiBottomBar-fixed-m-euiColorMode-dark-colorClassName"
class="euiBottomBar euiBottomBar--fixed euiBottomBar--paddingMedium emotion-euiBottomBar-fixed-m-euiColorMode-dark"
style="left: 12px; right: 0px; bottom: 0px;"
>
<h2
Expand All @@ -394,7 +394,7 @@ exports[`EuiBottomBar props usePortal can be false 1`] = `
<div>
<section
aria-label="Page level controls"
class="euiBottomBar euiBottomBar--fixed euiBottomBar--paddingMedium emotion-euiBottomBar-fixed-m-euiColorMode-dark-colorClassName"
class="euiBottomBar euiBottomBar--fixed euiBottomBar--paddingMedium emotion-euiBottomBar-fixed-m-euiColorMode-dark"
style="left: 0px; right: 0px; bottom: 0px;"
>
<h2
Expand Down
2 changes: 1 addition & 1 deletion src/components/button/__snapshots__/button.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,7 @@ exports[`EuiButton props color danger is rendered 1`] = `

exports[`EuiButton props color ghost is rendered 1`] = `
<button
class="euiButton emotion-euiButtonDisplay-m-defaultMinWidth-base-text-euiColorMode-dark-colorClassName"
class="euiButton emotion-euiButtonDisplay-m-defaultMinWidth-base-text-euiColorMode-dark"
type="button"
>
<span
Expand Down
2 changes: 1 addition & 1 deletion src/components/button/button_empty/__snapshots__/button_empty.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -51,7 +51,7 @@ exports[`EuiButtonEmpty props color danger is rendered 1`] = `

exports[`EuiButtonEmpty props color ghost is rendered 1`] = `
<button
class="euiButtonEmpty emotion-euiButtonDisplay-euiButtonEmpty-m-empty-text-euiColorMode-dark-colorClassName"
class="euiButtonEmpty emotion-euiButtonDisplay-euiButtonEmpty-m-empty-text-euiColorMode-dark"
type="button"
>
<span
Expand Down
2 changes: 1 addition & 1 deletion src/components/button/button_icon/__snapshots__/button_icon.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -49,7 +49,7 @@ exports[`EuiButtonIcon props color danger is rendered 1`] = `
exports[`EuiButtonIcon props color ghost is rendered 1`] = `
<button
aria-label="button"
class="euiButtonIcon emotion-euiButtonIcon-xs-empty-text-euiColorMode-dark-colorClassName"
class="euiButtonIcon emotion-euiButtonIcon-xs-empty-text-euiColorMode-dark"
type="button"
>
<span
Expand Down
2 changes: 1 addition & 1 deletion ...s/collapsible_nav/collapsible_nav_group/__snapshots__/collapsible_nav_group.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ exports[`EuiCollapsibleNavGroup is rendered 1`] = `

exports[`EuiCollapsibleNavGroup props background dark is rendered 1`] = `
<div
class="euiCollapsibleNavGroup emotion-euiCollapsibleNavGroup-notCollapsible-dark-euiColorMode-dark-colorClassName"
class="euiCollapsibleNavGroup emotion-euiCollapsibleNavGroup-notCollapsible-dark-euiColorMode-dark"
id="id"
/>
`;
Expand Down
2 changes: 1 addition & 1 deletion src/components/control_bar/__snapshots__/control_bar.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -49,7 +49,7 @@ exports[`EuiControlBar is rendered 1`] = `
</ol>
</nav>
<button
class="euiButton euiControlBar__button emotion-euiButtonDisplay-s-defaultMinWidth-base-text-euiColorMode-dark-colorClassName"
class="euiButton euiControlBar__button emotion-euiButtonDisplay-s-defaultMinWidth-base-text-euiColorMode-dark"
data-test-subj="dts"
type="button"
>
Expand Down
2 changes: 1 addition & 1 deletion src/components/overlay_mask/overlay_mask.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@ describe('EuiOverlayMask', () => {
);

expect(baseElement.querySelector('.euiOverlayMask')!.className).toContain(
'euiColorMode-inverse-colorClassName'
'euiColorMode-inverse'
);
});

Expand Down
2 changes: 1 addition & 1 deletion src/components/page/__snapshots__/page_template.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1179,7 +1179,7 @@ exports[`EuiPageTemplate_Deprecated with bottomBar is rendered 1`] = `
</div>
<section
aria-label="Page level controls"
class="euiBottomBar euiBottomBar--sticky emotion-euiBottomBar-sticky-euiColorMode-dark-colorClassName"
class="euiBottomBar euiBottomBar--sticky emotion-euiBottomBar-sticky-euiColorMode-dark"
style="left: 0px; right: 0px; bottom: 0px;"
>
<h2
Expand Down
Loading
Loading