Output layers as CSS Cascade Layers

[RebeccaStevens]

Clear and concise description of the problem

I want to be able to output the UnoCSS layers as CSS Cascade Layers (@layer).

Suggested solution

An option added to the unocss config to do this rather than just sorting the rules by their layer.

Alternative

A new preset that would do this via a variant.

Additional context

No response

Validations

• [X] Read the Contributing Guidelines.
• [X] Read the README.md of using the package.
• [X] Already used the Interactive Docs.
• [X] Check that there isn't already an issue that request the same feature to avoid creating a duplicate.

[sibbng]

If you are using the PostCSS plugin you can do something like this:

@layer base, utilities, components;

@layer base {
  @unocss preflights, default;
}

@layer utilities {
  @unocss;
}


@layer components {
  /* ... */
}

[RebeccaStevens]

Hmm, I might be able to do something like that. I am using postcss with in my nuxt project (I'm using @unocss/nuxt).

I'm not exactly sure how to do it as all the @unocss stuff atm is happening under the hood. Hopefully it's not too hard to figure out.

[RebeccaStevens]

I haven't been able to get this to work. The @unocss directive doesn't get transformed using @unocss/nuxt. I tried switching to @unocss/postcss and it does now get transformed, but it generates invalid css.

Snippet of the invalid css:

.grid-col-start-\(\${grid-column-start:($;}
.grid-col-end-\(\${grid-column-end:($;}

Is this a bug? or am I doing something wrong?

[sibbng]

Do you use any UnoCSS transformer? Transformers are not supported in PostCSS plugin. At the moment you can't use @unocss/nuxt and @unocss/postcss together. After installing the @unocss/postcss package all you need is a postcss.config.js file like this one: https://github.com/unocss/unocss/blob/main/examples/vite-vue3-postcss/postcss.config.cjs

[RebeccaStevens]

I've got it working now. It seems like one of my custom autocomplete templates was casing the error I was getting. No idea why that was happening. I simply removed it, and now things are working.

[sibbng]

Nuxt plugin extract class candidates from files processed through bundler, but PostCSS plugin scan files in the filesystem. So I assume previously not processed files are scanned by the PostCSS plugin. You can customize which files will be scanned with content.filesystem option: https://unocss.dev/guide/extracting#extracting-from-filesystem

You can see default value for this option here: https://github.com/unocss/unocss/blob/859cae6e3735c15b8738065d94c3550d9177490f/packages/shared-integration/src/defaults.ts#L7-L10

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[sambedingfield]

When using the above PostCSS solution, you'll need to remove import 'virtual:uno.css' which causes the overlay warning: [unocss] entry module not found, have you add import 'uno.css' in your main entry?

The shadow-dom mode has a magic placeholder similar to what we're after; doesn't need the PostCSS plugin, doesn't include the warning - but it doesn't include atomic classes.

@layer uno {
  @unocss-placeholder
}