Можно ли переменную Stylus «скормить» JS'у (Vue, webpack)?

Question

[wufapexef]

Возник вопрос, существует ли возможность сделать доступными переменные Stylus Джаваскрипту? Мне нужно заинлайнить стиль, а вручную делать это неудобно, теряется вся суть компонентов.

Пример.

Есть файл стайлус hello.styl

$super-color = #777

Есть однофайловый компонент Vue, вроде

<template>
  <h1 :style="'color': superColor">Hello</h1>
</template

require ('hello.styl')
export default {
  data () {
    return {
      superColor: ''
    }
  }
}

Как вьюхе скормить эти данные для superColor?

ПС: если нельзя Стайлусом, то может ПостЦСС? Как?

Comments

[sim3x]

А зачем инлайнить стиль?

[wufapexef]

sim3x, не имеет отношения к вопрос совершенно.

Answer 1

[fl3nkey]

можно описывать переменные в JSON, а потом этот JSON подключать в JS файле.

Comments

[wufapexef]

Это конечно вариант, но речь, например, о палитре цветов, 200+ переменных. СИдеть это ручками JSON писать себя не уважать.

[fl3nkey]

wufapexef, чем вам JSON не устроил? Stylus вам обработает JSON с переменными, функциями, миксинами и всем остальным, чем вы пользуетесь.

[Константин Китманов]

wufapexef, если не считать CSS-переменных (которые не везде работают) это самый здравый способ. Проблема исключительно в том, что задача встала поздно и вы пытаетесь сэкономить себе время, делая наоборот.
В конце концов скопипастить все переменные в один файлик и с помощью find/replace сконвертить этот список в JSON — задача на 15 минут.
Другой вариант — как-то вытащить из компилятора stylus AST, пройтись по нему и выцепить оттуда переменные с цветом, но это будет еще дольше, наверное:)

[wufapexef]

Константин Китманов, все же надеялся есть варианты

[wufapexef]

Я так полагаю, раз использовать JSON, то можно пощупать Tailwind CSS?

[Константин Китманов]

wufapexef, вам нужно сделать переменные доступными в стилях и в скриптах. это решается выносом их в json, чтобы скормить его css-препроцессору и загрузить аяксом из js.
Этой задачи касается только вебпак и stylus-loader, про всё остальное забудьте. Точка.

[fl3nkey]

wufapexef, Константин Китманов, JSON не со всеми задачами справлялся, в итоге пришлось все таки поковырять компилятор) работает с некоторыми ограничениями, но это лучше чем ничего.

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