search

windicss / nuxt-windicss

🍃 Windi CSS for Nuxt ⚡
331 stars 24 forks source link

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

Open jorismak opened 2 years ago

jorismak commented 2 years ago

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.

AndrewBogdanovTSS commented 1 year ago

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