How to support inline comments in PostCSS?

Question

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.

Answer 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

Answer 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

Answer 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