Allow postcss to access app.js locals

[dbox]

Per conversation in https://gitter.im/static-dev/spike:

It would be pretty handy if postcss could access the app.js locals.

Real world example: a portfolio site with an array of "projects". Each one of the projects has a specific color (css). In order to keep things DRY, it'd be nice to only have to update that array in one place, which would be accessible by the js, jade, and css.

Reference url: (no idea if this is helpful.)

https://benfrain.com/creating-and-referencing-javascript-mixins-and-variables-with-postcss/

[kylemac]

@dbox mind giving an example of what that locals object would look like, so i can have the full picture in my mind

[jescalan]

ping @dbox

[dbox]

[jescalan]

So I don't see this feature being a part of spike core. You can set this up yourself using a postcss plugin, like this one, then passing in this.locals so it has access.

for example:

const simpleVars = require('postcss-simple-vars')

module.exports = {
  locals: { foo: 'bar' },
  postcss: { plugins: [simpleVars({ variables: this.locals })] }
}

I don't want it to be in core because people may have any number of different preferences for how variables are introduced and handled in their postcss, and putting it in core would make us force users' hands on what variable system they use.

[dbox]

Cool. As long as locals can access the same set I'm 👌