[babel-plugin] optimize and inline variables in processStylexRules #1352
Conversation
mellyeliu
requested review from
Jta26,
ezzak,
necolas,
nmn and
vincentriemer
as code owners
meta-cla
bot
added
the
CLA Signed
| @supports (color: oklab(0 0 0)){@media (prefers-color-scheme: dark){:root, .xsg933n{--colorTokens-xkxfyv:oklab(0.7 -0.3 -0.4);}}}" | ||
| `); | ||
| ).toMatchInlineSnapshot( | ||
| '"@supports (color: oklab(0 0 0)){@media (prefers-color-scheme: dark){:root, .xsg933n{--colorTokens-xkxfyv:oklab(0.7 -0.3 -0.4);}}}"', |
There was a problem hiding this comment.
This is likely not valid. This transform ONLY transforms the main file and NO styles are used. So the expected result is an empty string.
| .x1s2izit{padding:8px} | ||
| .x1bg2uv5{border-color:green} | ||
| @media (max-width: 1000px){.xio2edn.xio2edn{border-color:var(--xpqh4lw)}} | ||
| @media (max-width: 1000px){.xio2edn.xio2edn{border-color:blue}} |
There was a problem hiding this comment.
This is also invalid because it is inlining values of variables. We don't want to do this in most cases.
There was a problem hiding this comment.
Let's put this behind a separate config
This needs to be a separate option and not enabled as the same thing. Also, we need to special-case variable names that start with |
| const defineVarsVariables: Map<string, string> = new Map(); | ||
| const varUsageCount: Map<string, number> = new Map(); |
There was a problem hiding this comment.
Prefer using objects for this. They are faster when the key is a string.
|
|
||
| for (const [, ruleObj] of rules) { | ||
| const { ltr, rtl } = ruleObj; | ||
| const isDefineVarsRule = /^(?:@[^{]*\{)?:root,\s*\.[\w-]+\{/.test(ltr); |
There was a problem hiding this comment.
We probably want to change the metadata generated by defineVars before this PR and avoid regex-based fragile implementations.
|
Should've marked this as a draft. Just put it up as a placeholder |
Currently, we output all
defineVarsandcreateThemevariables in the compiled sheet even if such variables are never used. This is costly for design systems that define large token objects viadefineVars, because the browser ends up allocating memory for thousands of unused variables.This PR optimizes two cases:
defineVarsgenerated variables if they are never referenceddefineVarsCSS variables with their values if CSS variables are used onceImportant: This is behind a param
optimizeDefineVarsbecause this cannot yet be used internally. We don't have global variable knowledge and would need to modify our build step to bundle all defineVars files with each sheet.optimizeDefineVarsmust be set to false where we pipe out toprocessStylexRuleson next syncTodo: