CSS vars as a result of TS/JS output ?

[lmormol]

Hi,

SASS plugin allows to create CSS vars as an output:

  "base.color.blue.50": (
    ".": (var(--base-color-blue-50)),
  ),

This is of course really helpful.

I'm trying to match Cobalt and Chakra UI and wondering if it would be possible to have CSS vars as a value of JS/TS output.

import { defineStyle, SystemStyleFunction, defineStyleConfig } from '@chakra-ui/react'
import { token } from '../tokens'
import { mode } from "@chakra-ui/theme-tools";

// 1
const brandPrimary = defineStyle({
    background: token('color.background.button'),
    color: token('color.text.button'),

    // _Dark mode
    _dark: {
      background: token('color.background.button', 'dark'),
      color: token('color.text.button', 'dark'),
    }
})

// 2
const brandSubtle: SystemStyleFunction = props => {
    return {
      // mode(light, dark)
      background: mode(token('color.background.subtle'), token("color.background.subtle", 'dark'))(props),
      color: mode(token('color.text.subtle'), token("color.text.subtle", 'dark'))(props),
    }
}

// 3 - This is the shorterst notation for supporting both Light and Dark modes
const brandSubtleCSS = defineStyle({
    background: 'var(--color-background-subtle)',
    color: 'var(--color-text-subtle)',
})

export const Button = defineStyleConfig({
    baseStyle: {
        borderRadius: token('border.radius.150'),
    },
    sizes: {
        md: token('typography.body.md'),
    },
    variants: {
        brandPrimary,
        brandSubtle,
        brandSubtleCSS
    },
    defaultProps: {
        size: "md",
        variant: 'brandPrimary',
    },
})
    

Third option is the shortest but without a chance for checking if 'var(--color-background-subtle)' exists at all ...

Would be nice to have a possibility to call token('color.background.subtle') with type checking and as a result CSS variable.

What do you think?

[drwpow]

That is very interesting! And I think there are many ways we could achieve this (with some ways being more preferable than others).

I could see adding this as an option on the JS plugin as a short-term fix, where you’d have to manually configure the var names (i.e. it wouldn’t pick up settings from the CSS plugin automatically; you’d have to manually keep the two in sync if you were using nonstandard var names).

But longer-term, this is the exact thing I want to plan for with the 2.0 API (#201)—expose one plugin’s outputs (CSS) to another (JS) so they can share information more easily. So this is the perfect time to suggest these things as I’m planning that work

[lmormol]

That's cool! Having such an option in JS plugin would be good even with mentioned inconveniences.

I keep my fingers crossed for the 2.0 API .. and for Terazzo of course!🤞

[drwpow]

Update on this: the Terrazzo beta is available on npm, and you’ll see a link to the new documentation on the Cobalt docs and on this repo. It may be a bit of a transition over the next few weeks, but this is now possible with the new API.

How it works is plugins now have 2 main hooks—transform() and build(), in that order. transform() basically populates values, and build() arranges them into a file. So even though the main JS plugin probably won’t have this feature, you could simply do something like:

// terrazzo.config.js

import css from "@terrazzo/plugin-css";
import myJSPlugin from "./my-plugin.js";

export default defineConfig({
  plugins: [
    css(),
    myJSPlugin(),
  ],
})

And as long as the CSS plugin is loaded, it’ll populate values to the "css" format. You could then make a plugin with only a build() hook (docs) as follows:

import { makeCSSVar } from "@terrazzo/token-tools/css";

export default function myPlugin() {
  name: "my-plugin",
  enforce: "post", // load at the end, _after_ CSS plugin
  build({ getTransforms, outputFile }) {
    for (const token of getTransforms({ format: "css" })) {
      console.log(makeCSSVar(token.localID)); // var(--token-id);
    }
    outputFile("my-js-file.js", contents);
  }
}

This is just a basic example, but the main idea is any plugin’s transform() step can be accessed by any other plugin for exactly your usecase. It should allow for more powerful mixing-and-matching and even allow people to create partial plugins and do more with writing less code (that’s the idea, at least, would love your feedback if it meets the goal or not!).

Also see the Migrating from Cobalt docs that have some basic upgrade guides, and will get filled out more over the coming weeks.