Postcss Custom Properties - Cannot find module

sage
1

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

2

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

3

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,
    },
  };
};
4

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,
    },
  };
};
5

I’ve searched this forum, Google, and YouTube and I’m surprised no one is using PostCSS’ other plugins with Sage. I still haven’t been able to figure out how to integrate its custom properties plugin either. I tried installing Sage’s Tailwinds option just to see how it’s being implemented – that just made matters more confusing.

There is a mixin Serg Hospodarets wrote for Sass that allows you to write css variables in a quasi manner. However, it’s not as seamless as using the PostCSS custom properties plugin IMO

How to implement it: https://www.smashingmagazine.com/2017/04/start-using-css-custom-properties/#using-css-vars-mixin

1 Like
6

any updates on this? just found out autoprefixer isn’t working either