search

MadLittleMods / postcss-css-variables

PostCSS plugin to transform CSS Custom Properties(CSS variables) syntax into a static representation
https://madlittlemods.github.io/postcss-css-variables/playground/
Other
536 stars 62 forks source link

Fallbacks seem to break other var() in same decl #23

Open russelporosky opened 8 years ago

russelporosky commented 8 years ago

For example, on line 133 of sanitize.css (currently), the following line appears:

font: var(--html-font-size, 100%)/var(--html-line-height, 1.5) var(--font-family, sans-serif);

The postcss-custom-properties plugin correctly resolves this to read:

font: 100% / 1.5 'Helvetica Neue', 'Helvetica', 'Arial', 'sans-serif';

This plugin simply outputs:

font: 100%;
MadLittleMods commented 8 years ago

Thank you for bug report @metaloha

It seems to have to do with providing the fallbacks. You can try out the following snippet on the playground which works just fine

.foo {
    --font-size: 14px;
    --line-height: 16px;

    font: var(--font-size)/var(--line-height) sans-serif;
}
russelporosky commented 8 years ago

Your description makes much more sense, thanks :)

I haven't had to worry about this bug in my own code thus far, but it does break that line in sanitize.css.