postcss-css-variables
postcss-css-variables copied to clipboard
Comma separated rules are unnecessarily expanded (duplicate blocks)
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;
}
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...
@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
@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.
@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.