cssnext-loader icon indicating copy to clipboard operation
cssnext-loader copied to clipboard

Duplicated imported code

Open nickdima opened this issue 9 years ago • 6 comments

It seems that if you import the same file from multiple files it ends up beeing duplicated in the final bundle. Is this a known issue? It seems that the sass-loader also had this problem (https://github.com/jtangelder/sass-loader/issues/30) and resolved it here: https://github.com/jtangelder/sass-loader/issues/31

nickdima avatar Jun 11 '15 21:06 nickdima

cssnext "just" inline import statement, so it's a normal behavior. The problem is, if we handle the imports in a different way (via webpack instead of inlining), we might loose some variables definition for example. So that's kind of tricky to choose what to do.

(For my concern, I don't really use imports when using cssnext-loader. I have some global variables defined in cssnext configuration & that's enough for my needs.)

I am open to the discussion & pull requests but that is not easy to "fix".

MoOx avatar Jun 12 '15 03:06 MoOx

What do you exactly mean by:

global variables defined in cssnext configuration

How is this done?

nickdima avatar Jun 12 '15 08:06 nickdima

http://cssnext.io/usage/#features

in webpack config

module.exports = {
  entry: "path/to/entry",
  // ...
  cssnext: {
    features: {
      customProperties: {
        variables: {mainColor: "#f00"}
      }
    }
  }
}

MoOx avatar Jun 12 '15 09:06 MoOx

Gotcha, yeah, I was looking at the postcss-custom-properties plugin right now. Thanks!

nickdima avatar Jun 12 '15 09:06 nickdima

Is it possible to declare custom media query extensions this way as well? The customProperties object works perfectly, but defining the customMedia object to work the same way as the postcss test fixture doesn't work :(

// ...
    cssnext: {
        browsers: "last 2 versions",
        features: {
            customProperties: {
                variables: {
                    'main-color': "#f00"
                }
            },
            customMedia: {
                extensions: {
                    'viewport-testing': '(min-width: 500px)'
                },
                appendExtensions: true
            }
        }
    }
// ...

EDIT: I see the problem, if I set the key as --viewport-testing it works, whereas the postcss unit test shows it should be possible to set it without it. So it's a bug :)

girvo avatar Jun 14 '15 10:06 girvo

yes it seems this should works. I guess tests are wrong :/

I opened an issue for that https://github.com/postcss/postcss-custom-media/issues/11

MoOx avatar Jun 16 '15 17:06 MoOx