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

[sapphi-red]

@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]

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 :)

[sapphi-red]

Hi, we had sponsored the PostCSS organization through VoidZero via OpenCollective last month to collectively support the PostCSS ecosystem, which I think includes this repo too. We avoid providing financial support for specific issues or pull requests. We do this to avoid the possibility that financial support might cause merging to become a goal in itself, which would remove the long-term perspective and put pressure on library maintainers. Therefore, we prefer to provide financial support to library organizations. I hope you're able to claim your refactoring efforts from OpenCollective. Thanks for your work here!

[stevegreco]

It seems like this makes layers almost completely useless when using postcss-import. I have adopters of our internal Design System trying to integrate our CSS into their apps and there is no way to do it.

This seems to end up breaking everything.

@layer base, components, designsystem, utilities;

@import "tailwindcss/base" layer(base);
@import "tailwindcss/components" layer(components);
@import "./custom-components.css" layer(designsystem);
@import "tailwindcss/utilities" layer(utilities);

[romainmenke]

@stevegreco Can you create a minimal repro?
I am unsure if this is the same issue.

This works fine:

@layer foo;

@import "some.css" layer(foo);

See the test coverage here:

postcss-import/test/fixtures/layer.css

Lines 1 to 3 in d43ca15

	@layer layer-alpha, layer-beta.one;
	@import "foo.css" layer(foo);

It is only when postcss-import encounters something it can't import that there is an issue.

---

This however doesn't look like standard CSS:

@import "tailwindcss/base" layer(base);

Maybe this is something that tailwind can improve?

[henriksonnergard]

We just ran into this issue as well, using Webpack Encore with PostCSS. As a workaround, we declare our layer order in a separate stylesheet that is set as the very first @import for all our products. But would be nice to write like the example in OP.

[romainmenke]

@henriksonnergard do you have the same issue as originally reported, or the one @stevegreco mentioned?

Do you have a snippet or repro?

[stevegreco]

I have the same issue as the OP.

@layer base, components;

import "./foo.css";

is transformed into

@import "./foo.css";

@layer base, components;

I can try to publish a repo, but it is pretty simple that it just moves the imports ahead of the layer definitions.

[romainmenke]

That is another case still 😓
I can understand how these seem similar but these are distinct:

• @layer followed by something that can not be inlined (OP)
• @layer followed by non-standard CSS (as reported by @henriksonnergard)
• @layer followed by something that can be inlined

Your case is the last in the list, right?
We have test coverage for this case and it shouldn't have any issues.

So a repro would still be really helpful.

[romainmenke]

Hi all,

This was fixed in #574 and released as 16.1.1

@henriksonnergard, @stevegreco please try this latest version. If you still have a problem please open a new issue as it likely is unrelated in cause to this one, even if it appears to be similar :)