search

postcss / postcss-import

PostCSS plugin to inline at-import rules content
MIT License
1.38k stars 116 forks source link

`@import` with `layer` gets reordered before `@layer` and changes the behavior #567

Open sapphi-red opened 1 week ago

sapphi-red commented 1 week ago 
@layer reset, bootstrap;
@import url('https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.css') layer(bootstrap);

@layer reset {
  h1 {
    margin-top: 100px;
  }
}

This input is transformed into:

@import url('https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.css') layer(bootstrap);
@layer reset, bootstrap;
@layer reset {
  h1 {
    margin-top: 100px;
  }
}

But the output CSS has a different meaning from the input CSS (bootstrap layer is now overridden with reset layer).

Reproduction: https://stackblitz.com/edit/template-sapphi-red-postcss-sass-kasrpt?file=src%2Finput.css,postcss.js

romainmenke commented 1 week ago

Thank you for reporting this @sapphi-red

This is a rather complex issue and will require a substantial rewrite. Is this an effort that Vite could support financially?

fyi: this issue doesn't exist in @csstools/postcss-bundler

But there I didn't implement a lot of non-standard behavior nor did I provide any of the customization options that exist in postcss-import.

@csstools/postcss-bundler isn't suitable for Vite but it does show that this issue is solvable :)