Stop cssnano v4 from adding quotes to named grid-areas

Question

cssnano v4 turns named grid-areas into quoted strings instead of custom-identifiers, eg:

/* input */
header {
  grid-area: header;  
}

/* output */
header {
  grid-area: "a";  
}

Making the values strings breaks css grid functionality.

Answer 1

Set reduceIdents's gridTemplate to false:

// postcss.config.js

module.exports = {
  plugins: [
    require('postcss-import')(),
    require('postcss-url')(),
    require('cssnano')({
      preset: [
        'advanced',
        {
          discardComments: {
            removeAllButFirst: true,
          },
          reduceIdents: {
            gridTemplate: false,
          },
          autoprefixer: {},
        },
      ],
    }),
  ],
};