importing creates hundreds of duplicates

I have a situation where I ‘have’ to import a file in EVERY single css file in my entire app. This is because you get thousands of errors if you try to use css variables and haven’t imported the file that defines the variables in that specific css file in question.

@import "styles/theme";

The problem is that every single time I do that it creates another :root. Chrome doesn’t seem to slow down much but safari is taking about 10-15 mintues just to load a list of available styles because it appears to be bogged down by this? There are some situations that I get to hundreds of :root with all the same variables declared over and over and over.

[RyanZim]

Closing for lack of action.

[michael-ciniawsky]

Pass the variables to the plugin instead 😃 https://github.com/postcss/postcss-custom-properties#variables (used by cssnext)

In general && if avoidable I recommend to not use @import at all in conjunction with webpack, bc this can bloat your CSS significantly in some cases. E.g for frameworks like bootstrap it is better to add an additional <link>. Most of the time keeping the CSS strictly scoped to the component is the less painful solution, it’s a shift in mind compared to the ‘traditional’ approach of writing CSS, but in the common way you will have a hard time getting it ‘right’ 😛.

.component {
    display: flex;

    &__x {
      flex: 1 1 50%;
    }

    &--y {
      color: red;
    }
}

Finally if you really need to rely on @import use css-loader’s importLoaders instead of postcss-import , which will make a separate request webpack can dedupe to some point

@import 'path/to/file.css' => importLoaders => require('css-loader!postcss-loader!./path/to/file.css')