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
540 stars 62 forks source link

Comma separated rules are unnecessarily expanded (duplicate blocks) #58

Open amustill opened 7 years ago

amustill commented 7 years ago

It appears that comma-separated rules are expanded even if the variable value is the same, creating additional unnecessary rules.

Input:

:root {
    --font-family: sans-serif;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-family);
}

Expected output:

h1, h2, h3, h4, h5, h6 {
    font-family: sans-serif;
}

Actual output:

h1 {
    font-family: sans-serif;
}

h2 {
    font-family: sans-serif;
}

h3 {
    font-family: sans-serif;
}

h4 {
    font-family: sans-serif;
}

h5 {
    font-family: sans-serif;
}

h6 {
    font-family: sans-serif;
}
jfbrennan commented 6 years ago

enhancement? that output should be consider a bug and fixed. is this being worked on any time soon? would like to use this plugin but that extra bloat isn't worth refactoring from Less vars...

MadLittleMods commented 6 years ago

@jfbrennan The effective output is the same whether expanded or comma-separated so it isn't a bug. I have no plans to work on this issue but happy to review a PR

jfbrennan commented 6 years ago

@MadLittleMods thanks for the quick reply.

FYI anyone concerned about the unexpected output (this significantly increases the size of your stylesheet) the cousin plugin https://github.com/postcss/postcss-custom-properties does not have this issue.

MadLittleMods commented 6 years ago

@jfbrennan As a note, https://github.com/ben-eb/cssnano works great for minifying CSS and the mergeRules optimization handles rules with the same declarations.