variables and importFrom difference

[ok2ju]

Hi, importFrom behaviour differs from deprecated variables. importFrom does not take effect when using with postcss-import. My usecase:

colors.css

:root {
  --button-label-color: green;
}

theme.css

@import '../colors.css';

.button {
  color: var(--button-label-color);
}

And for example depending on env variable I want to pass another css variables (theme).

postcss.config.js

module.exports = (theme) => ([
  require('postcss-import')({
    root: path.join(__dirname, '../'),
    path: path.join(__dirname, '../src/components'),
  }),
require('postcss-preset-env')({
    stage: 0,
    browsers: [
      'last 2 Chrome versions',
      'last 2 Firefox versions',
      'last 2 Safari versions',
      'last 2 Opera versions',
      'last 2 Edge versions',
      'last 2 iOS versions',
      'last 2 ChromeAndroid versions',
      'IE 11',
    ],
    features: {
      'custom-properties': {
        preserve: false,
        importFrom: [{
          customProperties: theme,
        }],
      },
    },
  }),
]);

webpack.config.js

const theme = process.env.THEME || 'default';
// const currentTheme = require(`../components/themes/${theme}`);
const currentTheme = require('../components/themes/red');

...
{
      loader: 'postcss-loader',
      options: {
        ident: 'postcss',
        plugins: require('./postcss.config')(currentTheme),
      }
}

themes/red.js

module.exports = {
  '--button-label-color': 'red',
};

In this example theme passed through importFrom does not take effect. Is this correct behaviour or I missing something? And if it correct how can I make it work properly?

[thollander]

The format that you use for the themes/red.js is not compatible with ^8 version. You should have :

module.exports = {
  customProperties: {
    '--button-label-color': 'red'
 } 
};

[ok2ju]

The format that you use for the themes/red.js is not compatible with ^8 version. You should have :

module.exports = {
  customProperties: {
    '--button-label-color': 'red'
 } 
};

Please, check postcss.config.js example above. I passed theme as:

...
features: {
      'custom-properties': {
        preserve: false,
        importFrom: [{
          customProperties: theme,
        }],
      },
    },

So, it is the same approach as you propose.