Roots Discourse

Postcss Custom Properties - Cannot find module

Hi, I’m trying to use the postcss-custom-properties plugin but it says Cannot find module. I’m not sure how I’m supposed to include it in the postcss.config because most documentation for these plugins show that you do something like:

const postcssCustomProperties = require('postcss-custom-properties');

and then you use the constname in the config

Have you installed the module, i.e. yarn add postcss-custom-properties?

Yes, but I’m not sure how I’m, supposed to reference it in the postcss.config… I thought I just had to camelcase the name or something… here is my postcss.config:

/* eslint-disable */

const cssnanoConfig = {
  preset: ['default', { discardComments: { removeAll: true } }]
};

module.exports = ({ file, options }) => {
  return {
    parser: options.enabled.optimize ? 'postcss-safe-parser' : undefined,
    plugins: {
      autoprefixer: { grid: true },
      cssnano: options.enabled.optimize ? cssnanoConfig : false,
      postcssCustomProperties: true,
    },
  };
};

I have tried now to reference it as a string, it doesn’t break on the build anymore but it doesn’t appear to be having any effect either. The custom properties have not been converted to static values.

Here is my postcss.config now:

/* eslint-disable */

const cssnanoConfig = {
  preset: ['default', { discardComments: { removeAll: true } }]
};

module.exports = ({ file, options }) => {
  return {
    parser: options.enabled.optimize ? 'postcss-safe-parser' : undefined,
    plugins: {
      autoprefixer: { grid: true },
      cssnano: options.enabled.optimize ? cssnanoConfig : false,
      'postcss-custom-properties': true,
    },
  };
};