'How to support inline comments in PostCSS?
Webpack/PostCSS is unable to process .pcss files which have inline comments:
Module build failed: Syntax Error
(77:5) Unknown word > 77 | // } | ^
PostCSS part of my Webpack's config:
let PostCSSConfig = {
sourceMap: true,
plugins: () => [
require('postcss-smart-import'),
require('precss')({}),
require('postcss-for')({}),
require('postcss-mixins')({}),
require('postcss-math')({}),
require('postcss-percentage')({}),
require('postcss-flexbugs-fixes')({}),
require('postcss-cssnext')({browsers: ['> 0.05%', 'IE 7'], cascade: false})
]
};
config.module.rules:
{
test: /\.pcss$/,
exclude: inlineCSS,
use: ExtractTextPlugin.extract({
use: [{
loader: 'css-loader',
options: {
sourceMap: true
}
},
{
loader: 'postcss-loader',
options: PostCSSConfig
}
]
})
}
I tried using following plugins:
- postcss-comment
- postcss-inline-comment
- postcss-scss
- postcss-strip-comments
but none helped, I had errors every time.
Solution 1:[1]
You mention postcss-comment
, apparently, postcss-comment
is not a PostCSS plugin, it is a parser.
In my own projects I was using a PostCSS config file like the following:
// postcss.config.js
module.exports = () => ({
plugins: {
'postcss-import': {},
'postcss-cssnext': {},
'cssnano': {},
}
});
Install your chosen parser:
npm i -D postcss-comment`
then adding the following line to your config:
parser: require('postcss-comment'),
that should work.
Your final config will look as follows:
module.exports = () => ({
parser: require('postcss-comment'),
plugins: {
'postcss-import': {},
'postcss-cssnext': {},
'cssnano': {},
}
});
The key for me was finding this Github issue: https://github.com/postcss/postcss-scss/issues/58#issuecomment-318464851
Solution 2:[2]
Inline comments (like this: // I'm a comment!
) are invalid CSS. But they are valid SCSS, so if you want to use them in .css
files, you'll need to transform those files using a SCSS parser with PostCSS. PostCSS SCSS can do this. To use it, set it as PostCSS's parser. Here's an example webpack config:
// webpack.config.js
const path = require("path");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
module.exports = {
entry: path.resolve(__dirname, "main.js"),
output: {
path: path.resolve(__dirname, "dist"),
filename: "main.js"
},
plugins: [
new MiniCssExtractPlugin({
filename: "[name].css",
chunkFilename: "[id].css"
})
],
module: {
rules: [
{
test: /\.css$/,
use: [
{
loader: MiniCssExtractPlugin.loader
},
{ loader: "css-loader" },
// Set postcss-scss as the parser, allowing valid SCSS syntax
{ loader: "postcss-loader", options: { parser: "postcss-scss" } }
]
}
]
}
};
This will transform the following CSS:
// I am an inline comment!
// I'm invalid CSS, but I'll be transformed into a valid block comment.
body {
background-color: gold;
}
into this:
/* I am an inline comment!*/
/* I'm invalid CSS, but I'll be transformed into a valid block comment.*/
body {
background-color: gold;
}
And here's a working CodeSandbox example: https://codesandbox.io/s/kxqv1xvlx5
Solution 3:[3]
I solved it with this small library I added to the PostCSS eco system: https://www.npmjs.com/package/postcss-strip-inline-comments
/* This comment will remain */
// This comment will be removed
body {
// This comment will also be removed
background-color: black;
}
// And so will this one
Solution 4:[4]
postcss-strip-inline-comments works with scss syntax configured (you also need to install postcss-scss):
// postcss.config.js
module.exports = {
syntax: 'postcss-scss',
plugins: [
require('postcss-strip-inline-comments'),
// ...
],
}
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
Solution | Source |
---|---|
Solution 1 | |
Solution 2 | zgreen |
Solution 3 | mummybot |
Solution 4 | borisdiakur |