variable not set

[sephi-dev]

Hi, I was using cssnext in my previous project but since the package is deprecated, I'm trying to update to postcss-preset-env with postcss.config.js file ton config postcss.

Issue

When I add custom-properties to my features config, I have no error but the variable isn't recognized anymore even if I add variable in the config or load it from external file.

This is what I tried :

postcss.config.js - test 1

module.exports = {
  ident: 'postcss',
  plugins: () => [
    postcssPresetEnv({
      stage: 3,
    }),
    postCSSCustomProperties({
      appendVariables: true,
      variables: {
        hnfBlue: '#000',
        contrastBlue: '#000',
        textColor: '#000',
      },
    }),
  ],
};

postcss.config.js - test 2 and 3

module.exports = {
  ident: 'postcss',
  plugins: () => [
    postcssPresetEnv({
      stage: 3,
      features: {
        'custom-properties': {
           variables: require('./src/styles/variables.js') // or json
         }
      }
    }),
  ],
};

and here is my webpack config file :

{
  test: /\.css$/,
    use: [
      'style-loader',
        { loader: 'css-loader', options: { importLoaders: 1 } },
        { loader: 'postcss-loader' }
    ]
},

my old conf with cssnext :

module.exports = {
  ident: 'postcss',
  plugins: [
    require("postcss-easy-import")({ prefix: "_" }),
    require("postcss-url")({ url: "inline" }),
    require('postcss-flexbugs-fixes'),
    require('postcss-import'),
    require('postcss-cssnext')({
      features: {
        customProperties: {
          variables: {
            "stone": "#D8D8D8",
            "lightStone": "#4A4A4A",
            "cender": "#1E1A1B",
            "ice": "#FAFAFA",
          },
        },
        customMedia: {
          extensions: {
            '--phone': '(min-width: 544px)',
            '--tablet': '(min-width: 768px)',
            '--desktop': '(min-width: 992px)',
            '--large-desktop': '(min-width: 1200px)',
          },
        },
      },
    }),
  ],
};

Did Somebody have the same issue ?

[jorngeorg]

I'm having the same issue when using the plugin as part of cssnext. None of the variables are transformed, only removed from the :root element. No luck in trying the figure out why it's not working.

[sephi-dev]

No way to figure it out for now, it really is a pain as the previous cssnext was working so well.