Quasar: [Request] Export Stylus Variables to Javascript

[daniel-shuy]

Stylus has the ability to import variables from JSON (https://github.com/stylus/stylus/pull/784), but not vice versa.

Many JavaScript component libraries (especially those that use canvas) can only be customized by passing parameters to the libraries, not via CSS/Stylus. There is currently no way to pass in Quasar's Stylus Variables to them, which leads to duplication of style configurations.

[kashiif]

I have the exact same usecase where I need to pass colours to NVD3

[spectrolite]

Having an easy way to get a (read-only) "styles" ES6 object from quasar, with colors and other stylus variables as properties, could also be a valid solution imho, and has the added advantage that we can keep manipulating our theme variables with the power of stylus (e.g. my tertiary color is a function of my secondary color).

[JCharante]

I think another use case would where if I'm trying to pass css values to QModal with content-css (as in <q-modal minimized ref="modal" :content-css="{border: 'solid', 'border-radius': '5px', 'border-color': '#26a69a'}">) then there's no way to access $lime (so I have to find out it's hex value and hard code it), but if there were a styles object then that would definitely help.

[daniel-shuy]

I'm guessing the main obstacle to implementing this is that you cannot declare "computed" variables in JSON, unlike in .styl files, eg.

$text-color = lighten(black, 17%)

Maybe a better would be to export the Stylus variables to JavaScript instead. There currently doesn't seem to be a built-in way or a library to do that, but I think I've managed to find a hackish way to do so (see stylus/stylus#2316):

// variables.styl
$text-color = lighten(black, 17%)

:export
    textColor $text-color

Then in JavaScript:

import variables from 'variables'

alert(variables.textColor)    // displays #2b2b2b

The only downside to this (that I'm aware of) is that stylint will complain about the :export syntax and the key names (because they are not valid CSS properties). I've raised an Issue to stylint to add support for the :export syntax (SimenB/stylint#417).

[spectrolite]

@rstoenescu could we add some comments to the custom stylus variables file to help people enable this?
or even better, automatically export all default and custom variables by default ?

This would fix many other issues, not only for color, eg. @BenoitRanque needs accessing breakpoint values for the QImg PR.

[rstoenescu]

I'd like to see a quick prototype first to see exactly how things are glued together.
Best approach I could think of is to write a webpack loader though.

To summarize a little what I have understood, these things need to be considered:

• Writing a json file and importing it both in JS and Styl is not an option, as in JSON you can't use Stylus mixins (like lighten() etc)
• In an app, variables can be overwritten and this forces the whole approach to be part of the build system -- leading me think that a webpack loader would fit best
• Build speed has to also be taken into consideration. For small apps it really doesn't matter, but imagine compiling a very complex app.
• The theme (mat, ios) with which the app is built must be taken into consideration. There are some Stylus variables specific to one theme only, and most of the common variables have values that differ for each theme.

Then there's this page: http://beta.quasar-framework.org/components/stylus-variables.html. As you can imagine, I don't update variable list manually and instead wrote a script to look for Stylus variables then fill a JSON object. It's a static file analyzer though, meaning variables' values are not compiled, eg: $link-color has value lighten($primary, 25%) instead of #f256c2.

[spectrolite]

I thought this was interesting : https://github.com/stylus/stylus/issues/297#issuecomment-7708499 -> https://github.com/stylus/stylus/pull/784

[daniel-shuy]

Update (just in case we ever do go down this path):
The :export syntax belongs to CSS Modules, which is why it is not recognized by stylint.

Apparently you can simply annotate the :export block with @css to denote it as literal CSS, so that it is ignored by stylint.

// .stylintrc
{
  ...
  "cssLiteral": false,
  ...
}

// variables.styl
$text-color = lighten(black, 17%)

@css
:export
    textColor $text-color

Then in JavaScript:

import variables from 'variables'

alert(variables.textColor)    // displays #2b2b2b

[rstoenescu]

Let's start from somewhere. Anyone interested in providing a working prototype with support for just a few Stylus variables (just to prove how things are supposed to work)? We'll work out details as we go along with it.

[BenoitRanque]

Check out foovar

[MartinMuzatko]

Would be nice to have this - is there no way to extract this from stylus?

[FL3NKEY]

try it
https://github.com/FL3NKEY/stylus-variable-loader

[rstoenescu]

Hi,

Stylus variables config has become unnecessary with v1.0. Only thing worth configuring are the colors and media breakpoints. Otherwise it's silly easy to customize the CSS. So closing this because it's obsolete.