postcss-css-variables icon indicating copy to clipboard operation
postcss-css-variables copied to clipboard

Comma separated rules are unnecessarily expanded (duplicate blocks)

Open amustill opened this issue 7 years ago • 4 comments

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;
}

amustill avatar Aug 15 '17 15:08 amustill

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 avatar Jun 06 '18 17:06 jfbrennan

@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 avatar Jun 06 '18 17:06 MadLittleMods

@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 avatar Jun 06 '18 18:06 jfbrennan

@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.

MadLittleMods avatar Jun 06 '18 18:06 MadLittleMods