theming/css-compatibility

24 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.

CSS Logical Properties in antd

Starting from antd version 5.0.0, CSS Logical Properties are used by default to unify LTR and RTL styles. For example, margin-left is replaced by margin-inline-start. Minimum Chrome version supported is 89. This feature is enabled by default.

:where selector CSS feature in antd

Starting from antd version 5.0.0, the CSS-in-JS feature uses the :where selector by default to lower CSS selector specificity. This reduces the cost of adjusting custom styles. Minimum Chrome version supported is 88. The :where selector is enabled by default.

Disable :where selector with hashPriority

To disable the :where selector for older browser compatibility, use StyleProvider from @ant-design/cssinjs with hashPriority set to 'high'. This removes the :where wrapper and converts it to a class selector, turning ':where(.css-bAMboO).ant-btn' into '.css-bAMboO.ant-btn'.

StyleProvider with hashPriority high example

Example code to disable :where selector: ```tsx import { StyleProvider } from '@ant-design/cssinjs'; export default () => ( <StyleProvider hashPriority="high"> <MyApp /> </StyleProvider> ); ```

Disable CSS Logical Properties with legacyLogicalPropertiesTransformer

To support older browsers that do not support CSS Logical Properties, use StyleProvider from @ant-design/cssinjs with the legacyLogicalPropertiesTransformer. This transforms CSS logical properties back to their traditional counterparts, for example converting 'inset: 0' to 'top: 0; right: 0; bottom: 0; left: 0'.

StyleProvider with legacyLogicalPropertiesTransformer example

Example code to disable CSS Logical Properties: ```tsx import { legacyLogicalPropertiesTransformer, StyleProvider } from '@ant-design/cssinjs'; export default () => ( <StyleProvider transformers={[legacyLogicalPropertiesTransformer]}> <MyApp /> </StyleProvider> ); ```

@layer CSS feature in antd

Starting from antd version 5.17.0, @layer can be configured for unified CSS priority downgrade. Minimum Chrome version supported is 99. This feature is disabled by default. When enabled, Ant Design styles will always be lower than the default CSS selector priority, allowing users to override styles easily. When enabling @layer, child elements must wrap ConfigProvider to update icon-related styles.

StyleProvider with @layer example

Example code to enable @layer: ```tsx import { StyleProvider } from '@ant-design/cssinjs'; import { ConfigProvider } from 'antd'; export default () => ( <StyleProvider layer> <ConfigProvider> <MyApp /> </ConfigProvider> </StyleProvider> ); ```

zeroRuntime with @layer configuration

When zeroRuntime is enabled (as of antd 6.0.0), Ant Design's styles are precompiled into a standalone antd.css file. If @layer specificity-lowering is also enabled, the antd.css must be placed inside the same layer (e.g., 'layer(antd)'). Use '@import url(antd.css) layer(antd)' to ensure proper layer placement. Alternatively, wrap the content during the build process with @layer antd directive.

autoPrefixer transformer in antd

Starting from antd version 6.0.0, the autoPrefixTransformer can automatically add browser prefixes to styles for wider browser support. This is disabled by default. It transforms styles by adding vendor prefixes like -webkit-, -moz-, and -ms- to ensure cross-browser compatibility.

StyleProvider with autoPrefixTransformer example

Example code to enable autoPrefixer: ```tsx import { autoPrefixTransformer, StyleProvider } from '@ant-design/cssinjs'; export default () => ( <StyleProvider transformers={[autoPrefixTransformer]}> <MyApp /> </StyleProvider> ); ```

px2remTransformer for responsive design

The px2remTransformer converts pixel units in style sheets to rem units relative to the root element (HTML tag), enabling adaptive and responsive layouts. It has three options: rootValue (default 16, the font size of root element), precision (default 5, decimal places for converted value), and mediaQuery (default false, whether to convert px in media queries).

px2remTransformer with custom rootValue example

Example code to use px2remTransformer: ```tsx import { px2remTransformer, StyleProvider } from '@ant-design/cssinjs'; const px2rem = px2remTransformer({ rootValue: 32, // 32px = 1rem; @default 16 }); export default () => ( <StyleProvider transformers={[px2rem]}> <MyApp /> </StyleProvider> ); ```

Shadow DOM usage with StyleProvider

When using Ant Design in Shadow DOM, the StyleProvider from @ant-design/cssinjs must be configured with the container property to set the insertion position for style tags, since style tag insertion differs from normal DOM in Shadow DOM scenarios.

StyleProvider with Shadow DOM container example

Example code for Shadow DOM usage: ```tsx import { StyleProvider } from '@ant-design/cssinjs'; import { createRoot } from 'react-dom/client'; const shadowRoot = someEle.attachShadow({ mode: 'open' }); const container = document.createElement('div'); shadowRoot.appendChild(container); const root = createRoot(container); root.render( <StyleProvider container={shadowRoot}> <MyApp /> </StyleProvider>, ); ```

Integrating Ant Design with TailwindCSS v3

When using Ant Design with TailwindCSS v3, configure @layer in global.css to control style override order. Place tailwind-base before antd to ensure proper specificity: @layer tailwind-base, antd; followed by the tailwind directives @tailwind base, @tailwind components, and @tailwind utilities.

Integrating Ant Design with TailwindCSS v4

When using Ant Design with TailwindCSS v4, configure @layer in global.css to place antd in the correct position in the layer order: @layer theme, base, antd, components, utilities; followed by @import 'tailwindcss';

Using reset.css and antd.css with @layer

When using Ant Design's reset.css, assign it to a specific @layer to prevent it from overriding lowered-specificity antd styles. In zeroRuntime scenarios where antd.css is imported separately, place it inside layer(antd) to maintain layer hierarchy consistency. Use: @layer reset, antd; @import url(reset.css) layer(reset); @import url(antd.css) layer(antd);

CSS-in-JS libraries with @layer configuration

After configuring @layer for antd, no additional configuration is needed for other CSS-in-JS libraries like Emotion or styled-components. These libraries can completely override antd styles without further setup.

SSR scenario with @layer correct ordering

In Server-Side Rendering (SSR), when styles are rendered inline in HTML through <style /> tags, CSS files containing @layer declarations must be loaded before @layer is used in SSR-injected styles. Load @layer declarations first via <link> or <style> tag, then inject SSR styles with @layer antd directives to ensure correct layer hierarchy.

Content Security Policy nonce configuration

When Content Security Policy (CSP) is enabled and dynamic styles are needed, configure the nonce attribute through ConfigProvider.

CSS-in-JS priority conflict with tailwindcss

When CSS-in-JS and tailwindcss have priority conflicts, adjust antd's style priority to override. See issue #38794 for details.

CSS-in-JS with Shadow DOM usage

To use CSS-in-JS with Shadow DOM, refer to the compatible styles documentation section on Shadow DOM scenarios.

v6 CSS variables support

v6 enables CSS variables by default and only supports modern browsers. IE browser is no longer supported. Some older domestic browsers may have compatibility issues; test target browsers before application release.

Give your agent this brain