Runtime support #32

Open
ebryn opened this Issue Apr 29, 2015 · 12 comments

Projects

None yet

3 participants

@ebryn
ebryn commented Apr 29, 2015

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
Member
MoOx commented Apr 30, 2015

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
ebryn commented May 1, 2015

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
Member
MoOx commented May 1, 2015

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

Check out this thread @MoOx

segmentio/myth#10 (comment)

@MoOx
Member
MoOx commented Aug 3, 2016

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
Member
MoOx commented Aug 3, 2016

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
Member
MoOx commented Aug 3, 2016

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

@kevinSuttle
kevinSuttle commented Aug 3, 2016 edited

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 kevinSuttle referenced this issue in pascalduez/postcss-apply Aug 23, 2016
Closed

How to use with webpack? #9

@kevinSuttle

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

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

@kevinSuttle kevinSuttle referenced this issue in postcss/postcss-plugin-suggestion-box Sep 16, 2016
Open

Dynamic custom properties polyfill #6

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment