nuxt-windicss icon indicating copy to clipboard operation
nuxt-windicss copied to clipboard

Using `@layer base` in custom CSS causes it to be _prepended_ instead of _appended_ to layer.

Open jorismak opened this issue 3 years ago • 1 comments

Describe the bug Using @layer base in custom CSS causes it to be prepended instead of appended to layer.

If I add code in @layer base for setting defaults for typography, like font-size for H1 tags, it's put at the start of the base layer, so all of Windi's preflight/reset/normalize css follows it, and overrides it.

To Reproduce

@layer base {
    h1 {
       font-size: 24px;
    }
}

This won't work, because a font-size: inherit is put after in the 'virtual' windi.css file.

Expected behavior Custom css to be put after the base layers, so you can work from it, instead of having to put !important everywhere. Or another way to import a .css / .scss file to set the typography rules for a project.

jorismak avatar Mar 23 '22 10:03 jorismak

Could you provide a repo with reproduction? I tried layer base just recently and it works fine for me

AndrewBogdanovTSS avatar Nov 06 '22 11:11 AndrewBogdanovTSS