[RFC] Mix usage with other CSS lib (like tailwind, styled-component, emotion)

[zombieJ]

📋 RFC

Summary

StyleProvider support @layer for ordering priority with other css lib.

Basic example

<StyleProvider layer>
  <MyApp />
</StyleProvider>

Will export the style as:

@layer antd {
  .css-bAmBoO.ant-btn {/** */}
  .css-bAmBoO.ant-checkbox {/** */}
}

@layer pro-components {
  .css-bAmBoO.ant-pro-layout {/** */}
}

// Control of layer priority with deps
useStyleRegister({
  layer: {
    name: 'pro-components',
    deps: ['antd'],
  },
})

// `@layer antd, pro-component`

Motivation

Ant Design use @ant-design/cssinjs lib to dynamic create the style on <header /> which will always move itself at beginning of <header />.

In most case, this helps the customize style as same css selector to override the antd style. But it some time it can help less on the patch update. e.g.

// Previews
:where(.css-lITtlE).ant-btn-primary {
  color: #000;
}

// After: with some reason to enhance the css priority
:where(.css-lITtlE).ant-btn.ant-btn-primary {
  color: #000;
}

This will break user style:

// Customize `src/global.css` to override antd style
.ant-btn { // Break since priority fail the battle
  color: red;
}

To keep the antd component style well work with customize style (or other css lib). It should support developer to make antd style order-able.

Detailed

A well ordered style. For example, user use tailwind.css & antd & emotion. The css order should be:

1. tailwind: base
2. antd
3. tailwind: components
4. tailwind: utilities
5. customize style(less, emotion, styled-component, etc.)

For the configuration of the basic steps (next.js example)

It just need take 2 steps:

1. Wrap antd StyleProvider

Make antd has the @layer of antd.

<StyleProvider layer>
  <MyApp />
</StyleProvider>

2. Config global.css

Wrap @tailwind base in layer to make it as low priority. And order antd after tailwind: base.

@layer tailwind-base {
  @tailwind base;
}
@tailwind components;
@tailwind utilities;

@layer tailwind-base, antd;

Drawbacks

Need developer to config the @layer order.

Adoption strategy

• Feature for @ant-design/cssinjs lib to support hashPriority="low".
• antd side to config the @layer for useStyleRegister to make all the component has @layer info.

[afc163]

Need developer to config the @layer order.

It is a bit complicated for developers. Make it default?

[yoyo837]

As an optional feature, it's not too complicated.

[zombieJ]

The css selector override order is deps on the style framework lib by user choice. antd can not (and must be not) modify user config file (like src/global.css).

[gregor-mueller]

This is really great news! No matter what CSS solution is used with antd, this will give more control to developers in a really easy and nice (native) way!

Thank you for adding @layer to antd!

I guess where() should not be necessary at all anymore, with these changes, right? This will make the styles also more readable. 👍

[arvinxx]

where is open by default, but layer not.