Runtime support

[ebryn]

Have you thought at all about how we might be able to support custom properties being modified at runtime? That would get us closer to a higher fidelity transpilation/polyfill.

[MoOx]

I think transpilation is not directly related to a polyfill.

Doing a polyfill can be done by two ways:

• use postcss on the front with this plugin and some specific added code to compute thing on runtime
• make a lighter polyfill that still need to parse stylesheets.

In all situations, this doesn't seems to be directly related to the code of this plugin.

[ebryn]

I know it's not totally on topic, but I wanted to start a discussion about possible runtime support because I've personally heard it used as an argument for not using custom properties yet. It appears the Polymer team is exploring a runtime based solution themselves: https://github.com/Polymer/polymer/blob/0.8-preview/PRIMER.md#custom-css-properties

[MoOx]

it used as an argument for not using custom properties yet

We are using custom properties syntax only. That what people should understand.

That said if they have a nice polyfill that would be cool.

[kevinSuttle]

Updated link: https://github.com/Polymer/polymer/blob/master/PRIMER.md#cross-scope-styling

[kevinSuttle]

Check out this thread @MoOx

segmentio/myth#10 (comment)

[MoOx]

So what? This plugin is a fork for rework-vars, so I am aware of the entire discussion around this. I am leaving this issue open for people looking for option, but as said before, we can't handle this in postcss.

[kevinSuttle]

Is it at least possible to read the var values inside of something like React?

[MoOx]

For that you should do the opposite: use the "variables" option to define your variables via javascript (so easily accessible in any js context).

[kevinSuttle]

So, in that case do you need to import your webpack config to a JS context, or can you make a file with a default export that = the object that contains the values and just require() it in both the JS context and webpack config?

[MoOx]

I think you just answered yourself with your last option ;)

[kevinSuttle]

Haha. Indeed.

// Colors.js
const colorConstants = {
  PrimaryThemeColor: '#3acfb6',
  SecondaryThemeColor: '#16a78f',
}

module.exports = colorConstants;

// webpack.config.js
// ...
const colorConstants = require('./src/Themes/Colors');
// ...
    customProperties({
          preserve: true,
          variables: colorConstants,
          appendVariables: true,
     }),

[kevinSuttle]

That said if they have a nice polyfill that would be cool.

@ebryn https://github.com/webcomponents/shadycss

[luwes]

I got a basic solution for this issue.
https://github.com/luwes/postcss-custom-properties-map

It's a PostCSS plugin to generate a JS lookup map with rules that have declarations with custom CSS props. The idea is to only include this map if native custom CSS props are not supported. Then we loop through those rules, find the matching ones in sheet.cssRules and change the props with the actual values. Looping through the sheets cssRules is probably the most expensive and could be optimized I think. Maybe by having a separate stylesheet for only custom css properties or putting the props at the top or bottom of your sheet and having a break rule...

[luwes]

New and improved CSS var shim with example, https://github.com/luwes/postcss-var-shim

[MoOx]

Some people like to play with fire.