cssnext-loader
cssnext-loader copied to clipboard
Duplicated imported code
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
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".
What do you exactly mean by:
global variables defined in cssnext configuration
How is this done?
http://cssnext.io/usage/#features
in webpack config
module.exports = {
entry: "path/to/entry",
// ...
cssnext: {
features: {
customProperties: {
variables: {mainColor: "#f00"}
}
}
}
}
Gotcha, yeah, I was looking at the postcss-custom-properties
plugin right now. Thanks!
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 :)
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