postcss-assign-layer usage in Vite

[rekhaagarwal09]

Hello This is in with reference to issue: https://github.com/vitejs/vite/issues/3924 As mentioned, we can use this plugin to avoid the css module order issue.

So to solve this, how to give preference order with same component layer Lets say there are 2 module.css in same component layer and there orders seems to be incorrect sue to vite issue. how we can define the preference order using this plugin?

Thanks for the help!

[IanVS]

Can you give an example of when this situation might occur? I would suggest that normally if you're mixing CSS into a component, it should be at a separate layer, with either a higher or lower priority in the stack.

[rekhaagarwal09]

Hey @IanVS , thanks for the reply. For example, I have 2 components: Text.tsx and ErrorText.tsx

Text component has some styling like text color. ErrorText uses text component and also override the text color property to other color via classname prop: ErrorMessage Both are in same components folder.

Now ideally ErrorText property should take the precedence as we have mentioned the error text style class in the end. But in Vite the order gets changed. ( same issue which other people facing) So here , I should assign Text and ErrorText different layer?

There are many other such cases in our app.

Also there is one more query: Any idea if I just define the import order of styles in ErrorText component like this, this may solve the css order issue without postcss layer?

import textStyles from '../Text/Text.module.css'; import styles from './ErrorText.module.css';

[IanVS]

import textStyles from '../Text/Text.module.css';
import styles from './ErrorText.module.css';

This works fine as long as you're not using code splitting / lazy loading in your app. If you are, then you'll likely hit the Vite issue.

Another way you could solve this would be to ensure that ErrorText is not actually overriding any of the properties of Text, but rather adding additional ones. So maybe Text gets its color from a base/default style with a low-priority level, and ErrorText sets the color in the component.

Another thing we have done, if we have common patterns that we want to re-use across different components, is to create a layer for patterns, which we import into our base css file. So, for example, we have a border-focusable class that we can then use on any form elements that need to have a particular border color when they are focused. In this way, you could identify the parts of <Text> that should be shared with <ErrorText>, and extract those into a separate CSS file with a lower-priority layer. Then you wouldn't need to import multiple component styles, you could instead use those shared styles.

I haven't tried it myself, but you could also try setting a higher-priority layer like overrides, and then in your <ErrorText> css, whatever properties are intended to override the base Text properties, you could assign them that layer.

FWIW, here's our base-css file, to give an idea of how it could be structured:

/* establish a layer order up-front, from lowest to highest priority */
@layer defaults, theme, libraries, patterns, components, utilities, overrides;

/** Defaults */
@import url('defaults.css');

/** Theme */
@import url('theme/colors.css');
@import url('theme/typography.css');

/** Patterns */
@import url('../../components/atoms/forms/border-focusable.css');
@import url('../../components/patterns/menus/menu.css');

/** Components are assigned by a PostCSS plugin for all `*.module.css` files */

/** Utilities */
@import url('utilities/layout.css');
@import url('utilities/color.css');
@import url('utilities/borders.css');
@import url('utilities/typography.css');

[rekhaagarwal09]

Thanks @IanVS for the detailed explanation. Yeah we want to use css code split. After that only we face this issue. We will try to structure our styles in different layer so that we can set the priority accordingly.