postcss-map
postcss-map copied to clipboard
ES6 Module support?
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;
}
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.
Thanks. I opened up an issue there a few months ago, but no response. https://github.com/css-modules/postcss-modules-values/issues/25
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...
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.
@pascalduez thanks for the workaround.
Will create a feature request too, cheers!