ES6 Module support?

[kevinSuttle]

Wondering if it's possible for usage to be supported in ES6 modules. Consider the following.

// Colors.js
const Colors = {
  secondaryGrey: {
    name: 'Secondary Grey', // design language name: (e.g. https://www.ibm.com/design/language/resources/swatchbook)
    hex: '#2e3636',
    uses: ['Table headings', 'Input background :hover'],
  },
}
export default Colors;

import highlightGreen from `./Colors`;

button {
  background-color: highlightGreen.hex;
}

[pascalduez]

Hi,

well I guess it's off the scope of this module, although it looks quite appealing. We can't provide so many different APIs to do the same thing. Maybe in a future revamp. I'm wondering whether there're already such similar module/solution. Looks a bit like https://github.com/css-modules/postcss-modules-values.

Might be a something to find with webpack involved.

[kevinSuttle]

Thanks. I opened up an issue there a few months ago, but no response. https://github.com/css-modules/postcss-modules-values/issues/25

[andrecalvo]

Is it actually possible to map a .js file at all? I am trying to use it like this in a postcss config file

      require('postcss-map')({
        basePath: './src/styles',
        maps: ['variables.js'],
      }),

I get this error. Module build failed: YAMLException: end of the stream or a document separator is expected in...

[pascalduez]

Only JSON or YAML is currently supported for external files. As a workaround what about:

const variables = require('./src/styles/variables');

require('postcss-map')({
   maps: [variables],
 }),

Feel free to open a feature request issue if you value it.

[andrecalvo]

@pascalduez thanks for the workaround.

Will create a feature request too, cheers!