From 5e8e9417cf2c4d1a0f2c6d3610208939c17e5197 Mon Sep 17 00:00:00 2001 From: Lukas Harbarth Date: Tue, 1 Oct 2024 15:44:08 +0200 Subject: [PATCH 1/2] fix: remove css `@layer` rule from static CSS bundle --- config/merge-css-modules.js | 2 +- config/postcss-config-factory.js | 8 -------- 2 files changed, 1 insertion(+), 9 deletions(-) diff --git a/config/merge-css-modules.js b/config/merge-css-modules.js index dd2987e1292..9034a385174 100644 --- a/config/merge-css-modules.js +++ b/config/merge-css-modules.js @@ -20,7 +20,7 @@ for (const cssModule of cssModules) { const componentName = basename(cssModule, '.module.css'); fileContent.push(`/* ${componentName} */`); - fileContent.push(cssContent); + fileContent.push(cssContent.replace('@layer ui5-webcomponents-react{', '').replace(/}$/, '')); fileContent.push(''); } diff --git a/config/postcss-config-factory.js b/config/postcss-config-factory.js index e60efcf2111..6989ace5b81 100644 --- a/config/postcss-config-factory.js +++ b/config/postcss-config-factory.js @@ -15,14 +15,6 @@ export function postcssConfigFactory(packageName) { cssLayersPlugin(), postcssModules({ // generateScopedName: '[name]__[local]___[hash:base64:5]', - generateScopedName: function (name, filename, css) { - const file = path.basename(filename, '.module.css'); - const i = css.indexOf(`.${name}`); - const lineNumber = css.substring(0, i).split(/[\r\n]/).length; - const hash = stringHash(css).toString(36).substring(0, 5); - - return `${file}_${name}_${hash}_${lineNumber}`; - }, getJSON: (cssFileName, json) => { return null; }, From cc9cd20489a9810f93ac4dbf6a5ed14fbf5c1ca2 Mon Sep 17 00:00:00 2001 From: Lukas Harbarth Date: Tue, 1 Oct 2024 16:37:04 +0200 Subject: [PATCH 2/2] Update Styling.mdx --- docs/knowledge-base/Styling.mdx | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/docs/knowledge-base/Styling.mdx b/docs/knowledge-base/Styling.mdx index 7df9e753ceb..9b8a1bad96b 100644 --- a/docs/knowledge-base/Styling.mdx +++ b/docs/knowledge-base/Styling.mdx @@ -105,7 +105,8 @@ This would then be the result: ## Applying styling via `className` or `style` -Almost all components allow setting `className` or `style` to style the component. For web components, this does **not** mean that styles are inherited by shadow root elements per default. +Almost all components allow setting `className` or `style` for custom styling. For standard elements like `div`, `span`, etc., you can easily override internal CSS properties and values, as our styles are encapsulated in a [CSS layer](https://developer.mozilla.org/en-US/docs/Web/CSS/@layer). +For web components, this does **not** mean that styles are inherited by shadow root elements per default. Only [inherited CSS properties](https://developer.mozilla.org/en-US/docs/Web/CSS/inheritance#inherited_properties) that are not set inside the shadow root or internally passed properties will change the styles of the internal elements. Another special case are abstract components like the `SuggestionItem`. The `ui5-suggestion-item` element is mainly there to pass props to the actual component inside the shadow root and is therefore not stylable. @@ -114,6 +115,8 @@ Another special case are abstract components like the `SuggestionItem`. The `ui5 By default, the `ThemeProvider` injects the CSS of the components during runtime. If you want to import the CSS bundles explicitly, you can set the `staticCssInjected` prop to `true`. This approach provides you with control over the order in which CSS files are injected, making it easier to override styles. +Please note that the static CSS is not wrapped inside a [CSS layer](https://developer.mozilla.org/en-US/docs/Web/CSS/@layer). You can use the [`@import` CSS at-rule](https://developer.mozilla.org/en-US/docs/Web/CSS/@import) to achieve that. + - **main** package import: `import '@ui5/webcomponents-react/styles.css'` - **charts** package import: `import '@ui5/webcomponents-react-charts/styles.css'`