It is advisable to prioritize postcss-import as the first plugin when configuring postcss plugins in webpack. By doing so, postcss-import will inline the @import statements at the beginning of the file before any other postcss plugins are applied.
For instance:
(For this example, let's assume you are using a postcss.config.js file. The same principle applies if you use an array for the plugins in webpack 1 format)
// Header.css
@import 'button.css';
.foo {
font-size: 3rem;
transform: translateY(-10px);
}
// Button.css
.bar {
transform: translateX(20px);
}
If the import plugin follows autoprefixer in the list of plugins, autoprefixer will apply prefixes to the file first, and then the @import file will be imported. As a result:
// postcss.config.js
module.exports = {
plugins: {
'autoprefixer': {},
'postcss-import': {}
},
};
// output.css
.bar {
transform: translateX(20px); // Prefixes not applied to the imported file
}
.foo {
font-size: 3rem;
transform:translateY(-10px);
-webkit-transform: translateY(-10px); // Prefixes applied only to original file
}
However, if you place the import plugin first, it will include the imported file and then perform autoprefixing, resulting in both files being autoprefixed:
// postcss.config.js
module.exports = {
plugins: {
'postcss-import': {},
'autoprefixer': {}
},
};
// output.css
.bar {
transform: translateX(20px);
-webkit-transform: translateX(20px); // Both files now prefixed
}
.foo {
font-size: 3rem;
transform: translateY(-10px);
-webkit-transform: translateY(-10px);
}
This means there is no need to re-add plugins within the options of the postcss-import plugin.