[zero] Fix wrong CSS order by moving import to last

[siriwatknp]

Issue

Wrong CSS order injection when nested components are used.

Consider Material UI Button > ButtonBase > TouchRipple

Before the change, the compiled CSS is imported at the top of the file like this:

// compiled Button.js
import 'output.css'
import ButtonBase from '../ButtonBase';

// compiled ButtonBase.js
import 'output.css';
import TouchRipple from './TouchRipple;

This produces CSS is this order:

// page.css
.hashed-button { … }

.hashed-button-base { … }

.hashed-touch-ripple { … }

Which causes the button styles to be overridden by button base and touch ripple

Change

Just move CSS import to the last.

• I have followed (at least) the PR section of the contributing guide.

[brijeshb42]

Do we need to change this for vite as well?

[siriwatknp]

This line does not affect Vite at the moment because zero-vite-plugin is not using zero-unplugin but I can confirm that by importing CSS first, the order is wrong even with Vite.

- result.code += `\nimport ${JSON.stringify(cssFilename)};\n`; ✅ CSS order is correct.
+ result.code = `import ${JSON.stringify(cssFilename)};\n${result.code}`; ❌ CSS order is wrong.

material-ui/packages/zero-vite-plugin/src/zero-vite-plugin.ts

Line 254 in 2d43ad1

result.code += `\nimport ${JSON.stringify(cssFilename)};\n`;

So I think CSS should always be imported last.

[oliviertassinari]

Is there ways to create unit tests for this?

[brijeshb42]

@siriwatknp vite plugin and unplugin both kind of duplicate the same code. So ideally, any changes done in unplugin should also be done in vite plugin.

[brijeshb42]

@oliviertassinari We could have a snapshot test for it that verifies the built css file changes. I'll have to look into how we can have a proper unit test for the build tool itself.

[mui-bot]

Netlify deploy preview

https://deploy-preview-41002--material-ui.netlify.app/

Bundle size report

No bundle size changes (Toolpad)
No bundle size changes

Generated by 🚫 dangerJS against 2c1ccca

[siriwatknp]

@oliviertassinari Why would you add package: system label? it's not related to system.

[oliviertassinari]

Is zero different from system? They could be the same projet, where the CSS engine is more important and where Grid, theme, are more secondary/opinionated.

But fair, it's a strategic product decision, it depends on how we want to play it. In Material UI v4, it was decouple. Tailwind CSS couple them (and people seem to like this about it). Styled components/emotion decouple them.