search

wix-incubator / stylable-integration

Integrating Stylable into your project
BSD 3-Clause "New" or "Revised" License
7 stars 3 forks source link

Access exported variables from JS #33

Closed Scott-MacD closed 6 years ago

Scott-MacD commented 6 years ago

It would be nice if this exported the same variables stylable already shares to other stylesheets to the JS interface as well.

Right now there are two work arounds for this, the first one being to maintain the variables in two separate places (once in the JS, and once in the CSS), which has issues which making sure you maintain both files, as well as these variables may be linked specifically to a theme, which the JS should not care about.

The other workaround is to have the css use the stylable vars to create css custom properties, which you could then read from JS using getComputedStyle, which is slower do to us having to read from the DOM and has potential for cascade issues.

Really looking for a way to directly access the exported vars from the stylesheet such as:

import style from "style.st.css";
const blockSize = style.vars.blockSize;
Scott-MacD commented 6 years ago

Was doing some more thorough investigating to possibly contribute a PR and realized this already works as style.blockSize, the actual example I was using had a hyphen in the variable name and didn't show up in dev tools.

tomrav commented 6 years ago

That's exactly the reason why we try to avoid hyphens and stick to camelCased vars and class names. You can find further details and capabilities about our runtime integration here.