rollup-plugin-postcss Multiple imports creates duplicates.

This issue is specifically tied to the postcss-modules plugin but I am not sure if the issue is located here. Let me know if otherwise.

Given the following js file:

import './style1.css'
import './style2.css'

With the following css files:

style1.css

.style1 {
  composes: style2 from "./style2.css";
  color: gold;
}

style2.css

.style2 {
  background: green;
}

style2.css gets duplicated since it is composed and imported (seems to be treated separately).

Can you think of a way around this?

Jun 08 '17 16:06 DylanPiercey

It is located here too, as you said is tied to postcss-modules. Investigating to see if we can do anything about it on our side.

Jun 09 '17 08:06 lmihaidaniel

This also happens when a style is composed in multiple places:

utils.css

.someUtil {
  color: blue;
}

a.css

.styleA {
  composes: someUtil from './utils.css';
  color: green;
}

b.css

.styleB {
  composes: someUtil from './utils.css';
  padding: 0;
}

index.js:

import './a.css';
import './b.css';

The extracted CSS will look like:

.utils_someUtil {
  color: blue;
}
.a_styleA {
  color: green;
}
.utils_someUtil {
  color: blue;
}
.b_styleB {
  padding: 0;
}

This can lead to problems when a rule tries to override a declaration from a composed style (e.g. color in styleA above). I would have expected a topological order based on the import dependencies (i.e. composed rules always come before rules composing them). Like this the second instance of someUtil wins against the overridden color in styleA. (see also discussion in https://github.com/css-modules/css-modules/issues/195)

The duplication itself can be worked around by setting minimize to true which removes duplicates. Since it appears to always keep the last instance of each duplicated rule it does not change anything about the specificity problem.

Aug 18 '20 12:08 tf

@tf I have exactly the issue you describe. For me, the specificity issue doesn't bite me, it's more of an inconvenience when developing as I have tons of duplicates of every rule defined in my utility.css file, and this clutters up DevTools. Does anyone have any ideas on what's causing this or if it is at all related to https://github.com/css-modules/postcss-modules/issues/70?

Nov 14 '20 00:11 danny-andrews

This is also an issue if you have numerous SCSS files each of which need things from Bootstrap (variables, mixins, etc.). When bundling everything, you will end up with multiple copies of Bootstrap being injected into the document. This is the case using Rollup and/or Create React App (Webpack)...

// _styles-a.scss
@import "bootstrap/scss/bootstrap";

// ... some classes here which use Bootstrap variables, mixins, etc.

// _styles-b.scss
@import "bootstrap/scss/bootstrap";

// ... some classes here which use Bootstrap variables, mixins, etc.

Resulting HTML:

<head>
    <style>
        // ...all of Bootstrap
        // ... all of "some classes" from _styles-a.scss
    </style>
    <style>
        // ...all of Bootstrap
        // ... all of "some classes" from _styles-b.scss
    </style>
</head>

Is there a proper solution to this? Does Bootstrap 5 help with this?

Dec 08 '23 18:12 JoshMcCullough

rollup-plugin-postcss rollup-plugin-postcss copied to clipboard

Multiple imports creates duplicates.

rollup-plugin-postcss
rollup-plugin-postcss copied to clipboard