Issue with `@layer`s

given

@layer foo {
  :root {
    color: red;
  }
}
@import "icons.css" layer(base);

output is missing the contents of icons.css:

@layer foo {
  :root {
    color: red;
  }
}

if i remove the layer foo, the output is:

@layer base {
.filled-icon {
  color: green;
}
}

Seems like there’s a bug when there are inline layers already present in the file?

[romainmenke]

@argyleink I think this is now mostly resolved.

const importUrl = require('postcss-import-url');
const options = {
  dataUrls: true // this is new 🎉 
};

postcss([
  importUrl(options)
]).process(...);

1. postcss-import-url will inline as base64 encoded data urls.
2. postcss-import can decode these and inline the “embedded” css.

That should give you the ability to order the @imports purely for your CSS, not for details in PostCSS plugins.

[romainmenke]

unless you’re inlining remote imports as well, which is a whole additional level of complexity

That is what postcss-import-url does.

---

In theory this would work :

• a plugin for remote urls like postcss-import-url doesn’t inline but rewrites to a data blob @import url(data:text/css...)
• this plugin reads data blobs as they are local
• this plugin is the only plugin that inlines @import

This would be in the spirit of the PostCSS ecosystem by splitting up parts into multiple plugins while using standard syntax as the intermediary.

It would also mean that this plugin doesn’t need fundamental changes. Even separate from this issue I don’t know why this plugin shouldn’t support blobs.