Skip to content

Commit

Permalink
BREAKING CHANGE: Themes set *all* variables in a VarGroup. always. (#631
Browse files Browse the repository at this point in the history 
)

* feat: add theme override behaviour configuration
* feat: missing vars in themes are set to their default values
* fix: resolve the correct __themeName__ for VarGroups
  • Loading branch information
@nmn
nmn authored Nov 1, 2024
1 parent 02996d6 commit 5f14ff5
Show file tree
Hide file tree
Showing 17 changed files with 884 additions and 135 deletions.
21 changes: 21 additions & 0 deletions apps/cli-example/source/app/CardThemes.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
/**
* Copyright (c) Meta Platforms, Inc. and affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*
* @format
*/

import * as stylex from '@stylexjs/stylex';
import { tokens } from './CardTokens.stylex';

export const minorOffset = stylex.createTheme(tokens, {
arrowTransform: 'translateX(5px)',
});

export const majorOffset = stylex.createTheme(tokens, {
arrowTransform: 'translateX(10px)',
});

export const reset = stylex.createTheme(tokens, {});
49 changes: 44 additions & 5 deletions packages/babel-plugin/__tests__/evaluation/stylex-import-evaluation-test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,18 +34,19 @@ function transform(source, opts = options) {
jsx,
[
stylexPlugin,
{ treeshakeCompensation: true, runtimeInjection: true, ...opts },
{
treeshakeCompensation: true,
runtimeInjection: true,
unstable_moduleResolution: { type: 'haste' },
...opts,
},
],
],
});
}

describe('Evaluation of imported values works based on configuration', () => {
describe('Theme name hashing based on fileName alone works', () => {
beforeEach(() => {
options.unstable_moduleResolution = { type: 'haste' };
});

test('Importing file with ".stylex" suffix works', () => {
const transformation = transform(`
import stylex from 'stylex';
Expand Down Expand Up @@ -87,6 +88,44 @@ describe('Evaluation of imported values works based on configuration', () => {
`);
});

test('Importing file with ".stylex" and reading __themeName__ returns a className', () => {
const transformation = transform(`
import stylex from 'stylex';
import { MyTheme } from 'otherFile.stylex';
const styles = stylex.create({
red: {
color: MyTheme.__themeName__,
}
});
stylex(styles.red);
`);
const expectedVarName =
options.classNamePrefix + hash('otherFile.stylex.js//MyTheme');
expect(expectedVarName).toMatchInlineSnapshot(`"__hashed_var__jvfbhb"`);
expect(transformation.code).toContain(expectedVarName);
expect(transformation.code).toMatchInlineSnapshot(`
"import _inject from "@stylexjs/stylex/lib/stylex-inject";
var _inject2 = _inject;
import stylex from 'stylex';
import 'otherFile.stylex';
import { MyTheme } from 'otherFile.stylex';
_inject2(".__hashed_var__1yh36a2{color:__hashed_var__jvfbhb}", 3000);
"__hashed_var__1yh36a2";"
`);
expect(transformation.metadata.stylex).toMatchInlineSnapshot(`
[
[
"__hashed_var__1yh36a2",
{
"ltr": ".__hashed_var__1yh36a2{color:__hashed_var__jvfbhb}",
"rtl": null,
},
3000,
],
]
`);
});

test('Maintains variable names that start with -- from "*.stylex" files', () => {
const transformation = transform(`
import stylex from 'stylex';
Expand Down
60 changes: 44 additions & 16 deletions packages/babel-plugin/__tests__/stylex-transform-create-theme-test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -84,6 +84,34 @@ describe('@stylexjs/babel-plugin stylex.createTheme', () => {
});
`);
});

test('test one output of stylex.defineVars()', () => {
expect(
transform(
`
import * as stylex from 'stylex';
export const buttonTheme = stylex.defineVars({
bgColor: 'green',
bgColorDisabled: 'antiquewhite',
cornerRadius: '6px',
fgColor: 'coral',
});
`,
{ filename: 'TestTheme.stylex.js' },
),
).toMatchInlineSnapshot(`
"import * as stylex from 'stylex';
export const buttonTheme = {
bgColor: "var(--xgck17p)",
bgColorDisabled: "var(--xpegid5)",
cornerRadius: "var(--xrqfjmn)",
fgColor: "var(--x4y59db)",
__themeName__: "x568ih9"
};"
`);
});

test('output of stylex.defineVars()', () => {
expect(defineVarsOutput).toMatchInlineSnapshot(`
"import stylex from 'stylex';
Expand Down Expand Up @@ -129,7 +157,7 @@ describe('@stylexjs/babel-plugin stylex.createTheme', () => {
const buttonThemePositive = {
TestTheme__buttonThemePositive: "TestTheme__buttonThemePositive",
$$css: true,
x568ih9: "xtrlmmh"
x568ih9: "xtrlmmh x568ih9"
};"
`);
expect(output1).toEqual(output2);
Expand All @@ -152,7 +180,7 @@ describe('@stylexjs/babel-plugin stylex.createTheme', () => {
};
const buttonThemePositive = {
$$css: true,
x568ih9: "xtrlmmh"
x568ih9: "xtrlmmh x568ih9"
};"
`);
});
Expand Down Expand Up @@ -183,7 +211,7 @@ describe('@stylexjs/babel-plugin stylex.createTheme', () => {
const buttonThemePositive = {
TestTheme__buttonThemePositive: "TestTheme__buttonThemePositive",
$$css: true,
x568ih9: "xtrlmmh"
x568ih9: "xtrlmmh x568ih9"
};"
`);
});
Expand Down Expand Up @@ -211,7 +239,7 @@ describe('@stylexjs/babel-plugin stylex.createTheme', () => {
};
const buttonThemePositive = {
$$css: true,
x568ih9: "xtrlmmh"
x568ih9: "xtrlmmh x568ih9"
};"
`);
});
Expand Down Expand Up @@ -246,7 +274,7 @@ describe('@stylexjs/babel-plugin stylex.createTheme', () => {
const buttonThemePositive = {
TestTheme__buttonThemePositive: "TestTheme__buttonThemePositive",
$$css: true,
x568ih9: "xtrlmmh"
x568ih9: "xtrlmmh x568ih9"
};"
`);
});
Expand Down Expand Up @@ -274,11 +302,11 @@ describe('@stylexjs/babel-plugin stylex.createTheme', () => {
};
const buttonThemePositive = {
$$css: true,
x568ih9: "xtrlmmh"
x568ih9: "xtrlmmh x568ih9"
};
const buttonThemeNew = {
$$css: true,
x568ih9: "x1qnwd2l"
x568ih9: "x1qnwd2l x568ih9"
};"
`);
});
Expand Down Expand Up @@ -318,13 +346,13 @@ describe('@stylexjs/babel-plugin stylex.createTheme', () => {
const buttonThemePositive = {
TestTheme__buttonThemePositive: "TestTheme__buttonThemePositive",
$$css: true,
x568ih9: "xtrlmmh"
x568ih9: "xtrlmmh x568ih9"
};
_inject2(".x1awrdae, .x1awrdae:root{--xgck17p:white;--xpegid5:black;--xrqfjmn:0px;}", 0.5);
const buttonThemeMonochromatic = {
TestTheme__buttonThemeMonochromatic: "TestTheme__buttonThemeMonochromatic",
$$css: true,
x568ih9: "x1awrdae"
x568ih9: "x1awrdae x568ih9"
};"
`);
});
Expand Down Expand Up @@ -369,7 +397,7 @@ describe('@stylexjs/babel-plugin stylex.createTheme', () => {
const buttonThemePositive = {
TestTheme__buttonThemePositive: "TestTheme__buttonThemePositive",
$$css: true,
x568ih9: "xi7kglk"
x568ih9: "xi7kglk x568ih9"
};"
`);
});
Expand Down Expand Up @@ -414,7 +442,7 @@ describe('@stylexjs/babel-plugin stylex.createTheme', () => {
const buttonThemePositive = {
TestTheme__buttonThemePositive: "TestTheme__buttonThemePositive",
$$css: true,
x568ih9: "xtrlmmh"
x568ih9: "xtrlmmh x568ih9"
};"
`);
});
Expand Down Expand Up @@ -459,7 +487,7 @@ describe('@stylexjs/babel-plugin stylex.createTheme', () => {
const buttonThemePositive = {
TestTheme__buttonThemePositive: "TestTheme__buttonThemePositive",
$$css: true,
x568ih9: "x143z4bu"
x568ih9: "x143z4bu x568ih9"
};"
`);
});
Expand Down Expand Up @@ -504,7 +532,7 @@ describe('@stylexjs/babel-plugin stylex.createTheme', () => {
const buttonThemePositive = {
TestTheme__buttonThemePositive: "TestTheme__buttonThemePositive",
$$css: true,
x568ih9: "x64jqcx"
x568ih9: "x64jqcx x568ih9"
};"
`);
});
Expand Down Expand Up @@ -542,7 +570,7 @@ describe('@stylexjs/babel-plugin stylex.createTheme', () => {
const buttonThemePositive = {
NestedTheme__buttonThemePositive: "NestedTheme__buttonThemePositive",
$$css: true,
x568ih9: "xtrlmmh"
x568ih9: "xtrlmmh x568ih9"
};"
`);
});
Expand Down Expand Up @@ -587,7 +615,7 @@ describe('@stylexjs/babel-plugin stylex.createTheme', () => {
const buttonThemePositive = {
TestTheme__buttonThemePositive: "TestTheme__buttonThemePositive",
$$css: true,
x568ih9: "x41sqjo"
x568ih9: "x41sqjo x568ih9"
};"
`);
});
Expand Down Expand Up @@ -657,7 +685,7 @@ describe('@stylexjs/babel-plugin stylex.createTheme with literals', () => {
};
const buttonThemePositive = {
$$css: true,
x568ih9: "x4znj40"
x568ih9: "x4znj40 x568ih9"
};"
`);
});
Expand Down
Loading

0 comments on commit 5f14ff5

Please sign in to comment.