How to Support Inline Comments in Postcss

single line comments on external css file

Single line comments in CSS are single line comments:

/* single line comments */

There's no other way.

But you still can use a pseudo vendor prefix to comment properties:

.sample {
    -commented-color: red;
}

How to change comment type in PhpStorm

// is not valid as comment symbols in plain *.css files -- IDE uses correct /* */ style here.

If IDE actually uses that for comments in *.css files then check what CSS Dialect is set in Settings/Preferences | Languages & Frameworks | Stylesheets | Dialects -- sounds like it's set to PostCSS (where // is valid).

Another possibility -- *.css files are associated with some another File Type (e.g. already mentioned earlier PostCSS or perhaps Less/Sass).

---

In any case: You may force /* */ for comments even for PostCSS -- use Block Comment shortcut instead of just Comment. You will have to make a selection first though...

Code | Comment with Block Comment -- Ctrl + Shift + / using most keymaps.

Using autoprefixer with postcss in webpack 2.x

Webpack 2.x.x is a killer and a build breaker

webpack 2.x.x introduced webpack.LoaderOptionsPlugin() plugin where you need to define all the loader option plugins. Like, autoprefixer is a plugin for postcss-loader. So, it has to go here.

And

• module.rules replaces module.loaders
• All the loaders should have explicitly say that they are a loader. Ex.
  loader: 'style!css' should be loader: 'style-loader!css-loader'

The new config will look something like this...

...

module: {
  rules: [
     {
       test: /\.scss$/,
       loaders: ['style-loader', 'css-loader', 'sass-loader', 'postcss-loader']
     }
   ]
},

plugins: [
  new webpack.LoaderOptionsPlugin({
    options: {
      postcss: [
        autoprefixer(),
      ]
     }
  })
],

...

Hope this helps everyone.

---

Related Topics