Named CSS variables usage, defineVars performance

[BMCwebdev]

Editing this post. I found some documentation about named CSS var in the blog (forgot to look there).

First off, thanks for all the feedback in these discussions. I have some questions about using named variables, as well as patterns on how to import them and performance (tree shaking).

By switching to named CSS variables (using -- strings in defineVars) is having safely hashed names (no repeats) the only major feature I would be loosing?

Does StyleX do tree shaking for defineVars ? If I were to import everything from a file import * as $ from '@acme/tokens/colors.stylex'; would the unused tokens get shaken out?

Because some tokens pull from other defined tokens, I have to make separate defineVars functions. For example

export const colors = defineVars({
  '--s-color-peri-50': "#63f10a",
});

export const colorsSymantic = defineVars({
  '--primary': colors2['--s-color-peri-50'],
});

Because I have many functions in one stylex.js file, it would be nice if we could import everything from a stylex.js file in a namespace. This is how I am going about it:

// defined in colors.stylex.js
export const colors2 = defineVars({
  '--s-color-peri-50': "#63f10a",
});

export const colorsSymantic2 = defineVars({
  '--primary': colors2['--s-color-peri-50'],
});

export const allColors = {
  ...colors2,
  ...colorsSymantic2,
};


// defined in colors.stylex.d.ts
type TColors = Readonly<{
  peri_50: string;
}>;

type TSemanticColors = Readonly<{
  primary: string;
}>;

type TAllColors = TColors2 & TColorsSymantic2;

export declare const colors: VarGroup<TColors>;
export declare const symanticColors: VarGroup<TSymanticColors>;
export declare const allColors: VarGroup<TAllColors>;


// Usage
import { allColors as $ } from '@acme/tokens/colors.stylex';

const styles = stylex.create({
  base: {
    backgroundColor: $["--s-color-peri-50"],
    color: $["--primary"],
  }
});

Do you see any drawbacks from using this pattern? Is using the $ namespace too expensive (is nothing getting shaken out?).

Thanks again!

[BMCwebdev]

updated the original post, finding the blog post cleared up a lot of questions.

[BMCwebdev]

It looks like what happens is that all the variables are attached to :root weather they are used or not. Which actually is good for my use case because it would be nice to have those named variables available to static css files outside of the StyleX build. However I can see the use case for shaking out the unused ones.

[nmn]

By switching to named CSS variables (using -- strings in defineVars) is having safely hashed names (no repeats) the only major feature I would be loosing?

Yes.

Does StyleX do tree shaking for defineVars ?

Not yet. But you probably run the output CSS file through a postcss plugin to strip out unused variables.

Do you see any drawbacks from using this pattern?

You're breaking the rules of variables. Don't do that. Put all the variables within a single defineVars if you want that convenience. Don't try to "re-export" variables. That's not supported.
Even with the -- variable names, things may work right now, but it's not a supported pattern and could break with a future update.

Something like this should work though:

// defined in colors.stylex.js
export const colors2 = {
  '--s-color-peri-50': "#63f10a",
};

export const colorsSymantic2 = {
  '--primary': colors2['--s-color-peri-50'],
};

export const allColors = defineVars({
  ...colors2,
  ...colorsSymantic2,
});

[BMCwebdev]

Thank you for the update. Yes, it does work re-exporting, but I will follow your example. Originally, I structured it that way to give the option of importing individual items or the whole set, but I’ll move forward with the whole set version.

The reason for this change is that we’re trying to simplify things for our developers. By using allColors, they won’t need to worry about the specific objects like colors2 or colorsSemantic2. This way, they can easily match what they see in Figma (just the variable names --s-color-peri-50) without having to learn the additional object names.