Skip to content

Commit

Permalink
better dev theme names
Browse files Browse the repository at this point in the history
  • Loading branch information
@mellyeliu
mellyeliu committed Dec 6, 2024
1 parent 676cd2d commit 2b19f4b
Show file tree
Hide file tree
Showing 2 changed files with 195 additions and 17 deletions.
150 changes: 150 additions & 0 deletions packages/shared/__tests__/define-vars/stylex-define-vars-test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -186,6 +186,156 @@ describe('stylex-define-vars test', () => {
`);
});

test('converts set of vars with nested at rules to CSS and includes variable name as prefix in ltr only', () => {
const themeName = 'TestTheme.stylex.js//buttonTheme';
const classNamePrefix = 'x';
const defaultVars = {
bgColor: {
default: 'blue',
'@media (prefers-color-scheme: dark)': {
default: 'lightblue',
'@supports (color: oklab(0 0 0))': 'oklab(0.7 -0.3 -0.4)',
},
'@media print': 'white',
},
bgColorDisabled: {
default: {
default: 'grey',
'@supports (color: oklab(0 0 0))': 'oklab(0.7 -0.3 -0.4)',
},
'@media (prefers-color-scheme: dark)': {
default: 'rgba(0, 0, 0, 0.8)',
'@supports (color: oklab(0 0 0))': 'oklab(0.7 -0.3 -0.4)',
},
},
cornerRadius: '10px',
fgColor: {
default: 'pink',
},
};
const [jsOutput, cssOutput] = styleXDefineVars(defaultVars, {
themeName,
debug: true,
});

expect(jsOutput).toEqual({
__themeName__: classNamePrefix + createHash(themeName),
bgColor: `var(--${classNamePrefix + createHash(`${themeName}.bgColor`)})`,
bgColorDisabled: `var(--${
classNamePrefix + createHash(`${themeName}.bgColorDisabled`)
})`,
cornerRadius: `var(--${
classNamePrefix + createHash(`${themeName}.cornerRadius`)
})`,
fgColor: `var(--${classNamePrefix + createHash(`${themeName}.fgColor`)})`,
});

expect(cssOutput).toMatchInlineSnapshot(`
{
"bgColor-x568ih9": {
"ltr": ":root, .bgColor-x568ih9{--xgck17p:blue;--xpegid5:grey;--xrqfjmn:10px;--x4y59db:pink;}",
"priority": 0,
"rtl": null,
},
"bgColor-x568ih9-1e6ryz3": {
"ltr": "@supports (color: oklab(0 0 0)){@media (prefers-color-scheme: dark){:root, .bgColor-x568ih9{--xgck17p:oklab(0.7 -0.3 -0.4);--xpegid5:oklab(0.7 -0.3 -0.4);}}}",
"priority": 0.2,
"rtl": null,
},
"bgColor-x568ih9-1lveb7": {
"ltr": "@media (prefers-color-scheme: dark){:root, .bgColor-x568ih9{--xgck17p:lightblue;--xpegid5:rgba(0, 0, 0, 0.8);}}",
"priority": 0.1,
"rtl": null,
},
"bgColor-x568ih9-bdddrq": {
"ltr": "@media print{:root, .bgColor-x568ih9{--xgck17p:white;}}",
"priority": 0.1,
"rtl": null,
},
"bgColor-x568ih9-kpd015": {
"ltr": "@supports (color: oklab(0 0 0)){:root, .bgColor-x568ih9{--xpegid5:oklab(0.7 -0.3 -0.4);}}",
"priority": 0.1,
"rtl": null,
},
"bgColorDisabled-x568ih9": {
"ltr": ":root, .bgColorDisabled-x568ih9{--xgck17p:blue;--xpegid5:grey;--xrqfjmn:10px;--x4y59db:pink;}",
"priority": 0,
"rtl": null,
},
"bgColorDisabled-x568ih9-1e6ryz3": {
"ltr": "@supports (color: oklab(0 0 0)){@media (prefers-color-scheme: dark){:root, .bgColorDisabled-x568ih9{--xgck17p:oklab(0.7 -0.3 -0.4);--xpegid5:oklab(0.7 -0.3 -0.4);}}}",
"priority": 0.2,
"rtl": null,
},
"bgColorDisabled-x568ih9-1lveb7": {
"ltr": "@media (prefers-color-scheme: dark){:root, .bgColorDisabled-x568ih9{--xgck17p:lightblue;--xpegid5:rgba(0, 0, 0, 0.8);}}",
"priority": 0.1,
"rtl": null,
},
"bgColorDisabled-x568ih9-bdddrq": {
"ltr": "@media print{:root, .bgColorDisabled-x568ih9{--xgck17p:white;}}",
"priority": 0.1,
"rtl": null,
},
"bgColorDisabled-x568ih9-kpd015": {
"ltr": "@supports (color: oklab(0 0 0)){:root, .bgColorDisabled-x568ih9{--xpegid5:oklab(0.7 -0.3 -0.4);}}",
"priority": 0.1,
"rtl": null,
},
"cornerRadius-x568ih9": {
"ltr": ":root, .cornerRadius-x568ih9{--xgck17p:blue;--xpegid5:grey;--xrqfjmn:10px;--x4y59db:pink;}",
"priority": 0,
"rtl": null,
},
"cornerRadius-x568ih9-1e6ryz3": {
"ltr": "@supports (color: oklab(0 0 0)){@media (prefers-color-scheme: dark){:root, .cornerRadius-x568ih9{--xgck17p:oklab(0.7 -0.3 -0.4);--xpegid5:oklab(0.7 -0.3 -0.4);}}}",
"priority": 0.2,
"rtl": null,
},
"cornerRadius-x568ih9-1lveb7": {
"ltr": "@media (prefers-color-scheme: dark){:root, .cornerRadius-x568ih9{--xgck17p:lightblue;--xpegid5:rgba(0, 0, 0, 0.8);}}",
"priority": 0.1,
"rtl": null,
},
"cornerRadius-x568ih9-bdddrq": {
"ltr": "@media print{:root, .cornerRadius-x568ih9{--xgck17p:white;}}",
"priority": 0.1,
"rtl": null,
},
"cornerRadius-x568ih9-kpd015": {
"ltr": "@supports (color: oklab(0 0 0)){:root, .cornerRadius-x568ih9{--xpegid5:oklab(0.7 -0.3 -0.4);}}",
"priority": 0.1,
"rtl": null,
},
"fgColor-x568ih9": {
"ltr": ":root, .fgColor-x568ih9{--xgck17p:blue;--xpegid5:grey;--xrqfjmn:10px;--x4y59db:pink;}",
"priority": 0,
"rtl": null,
},
"fgColor-x568ih9-1e6ryz3": {
"ltr": "@supports (color: oklab(0 0 0)){@media (prefers-color-scheme: dark){:root, .fgColor-x568ih9{--xgck17p:oklab(0.7 -0.3 -0.4);--xpegid5:oklab(0.7 -0.3 -0.4);}}}",
"priority": 0.2,
"rtl": null,
},
"fgColor-x568ih9-1lveb7": {
"ltr": "@media (prefers-color-scheme: dark){:root, .fgColor-x568ih9{--xgck17p:lightblue;--xpegid5:rgba(0, 0, 0, 0.8);}}",
"priority": 0.1,
"rtl": null,
},
"fgColor-x568ih9-bdddrq": {
"ltr": "@media print{:root, .fgColor-x568ih9{--xgck17p:white;}}",
"priority": 0.1,
"rtl": null,
},
"fgColor-x568ih9-kpd015": {
"ltr": "@supports (color: oklab(0 0 0)){:root, .fgColor-x568ih9{--xpegid5:oklab(0.7 -0.3 -0.4);}}",
"priority": 0.1,
"rtl": null,
},
}
`);
});

test('converts set of typed vars with nested at rules to CSS', () => {
const themeName = 'TestTheme.stylex.js//buttonTheme';
const classNamePrefix = 'x';
Expand Down
62 changes: 45 additions & 17 deletions packages/shared/src/stylex-define-vars.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,11 +36,16 @@ export default function styleXDefineVars<Vars: VarsConfig>(
variables: Vars,
options: $ReadOnly<{ ...Partial<StyleXOptions>, themeName: string, ... }>,
): [VarsObject<Vars>, { [string]: InjectableStyle }] {
const { classNamePrefix, themeName } = {
const { classNamePrefix, themeName, debug } = {
...defaultOptions,
...options,
};

console.log(defaultOptions);
console.log(options);

console.log('debug', debug);

const themeNameHash = classNamePrefix + createHash(themeName);

const typedVariables: {
Expand All @@ -51,9 +56,21 @@ export default function styleXDefineVars<Vars: VarsConfig>(
} = {};

const variablesMap: {
+[string]: { +nameHash: string, +value: VarsConfigValue },
+[string]: {
+nameHash: string,
+value: VarsConfigValue,
+themeNamePrefix: string,
},
} = objMap(variables, (value, key) => {
// Created hashed variable names with fileName//themeName//key

const processedKey = key.startsWith('--') ? key.slice(2) : key;
console.log('debug', debug);

const themeNamePrefix = debug ? `${processedKey}` : '';

console.log('themeNamePrefix', themeNamePrefix);

const nameHash = key.startsWith('--')
? key.slice(2)
: classNamePrefix + createHash(`${themeName}.${key}`);
Expand All @@ -63,9 +80,9 @@ export default function styleXDefineVars<Vars: VarsConfig>(
initialValue: getDefaultValue(v.value),
syntax: v.syntax,
};
return { nameHash, value: v.value };
return { nameHash, value: v.value, themeNamePrefix };
}
return { nameHash, value: value as $FlowFixMe };
return { nameHash, value: value as $FlowFixMe, themeNamePrefix };
});

const themeVariablesObject = objMap(
Expand Down Expand Up @@ -95,9 +112,14 @@ export default function styleXDefineVars<Vars: VarsConfig>(
{ ...injectableTypes, ...injectableStyles },
];
}

function constructCssVariablesString(
variables: { +[string]: { +nameHash: string, +value: VarsConfigValue } },
variables: {
+[string]: {
+nameHash: string,
+value: VarsConfigValue,
+themeNamePrefix: string,
},
},
themeNameHash: string,
): { [string]: InjectableStyle } {
const rulesByAtRule: { [string]: Array<string> } = {};
Expand All @@ -110,18 +132,24 @@ function constructCssVariablesString(
for (const [atRule, value] of Object.entries(rulesByAtRule)) {
const suffix = atRule === 'default' ? '' : `-${createHash(atRule)}`;

const selector = `:root, .${themeNameHash}`;

let ltr = `${selector}{${value.join('')}}`;
if (atRule !== 'default') {
ltr = wrapWithAtRules(ltr, atRule);
for (const [_, { themeNamePrefix }] of Object.entries(variables)) {
console.log('themeNamePrefix', themeNamePrefix);
const themeNameHashWithPrefix = themeNamePrefix
? `${themeNamePrefix}-${themeNameHash}`
: themeNameHash;
const selector = `:root, .${themeNameHashWithPrefix}`;

let ltr = `${selector}{${value.join('')}}`;
if (atRule !== 'default') {
ltr = wrapWithAtRules(ltr, atRule);
}

result[themeNameHashWithPrefix + suffix] = {
ltr,
rtl: null,
priority: priorityForAtRule(atRule) * 0.1,
};
}

result[themeNameHash + suffix] = {
ltr,
rtl: null,
priority: priorityForAtRule(atRule) * 0.1,
};
}

return result;
Expand Down

0 comments on commit 2b19f4b

Please sign in to comment.