Describe the issue
I'm not sure if this is a bug or just something that was never implemented, but trying to destructure stylex.env throws an error.
Even with intenseness, it is cumbersome to repeatedly type env.theme.colors.primary100. Being able to access colors directly would make the workflow of using env a lot more convenient.
Expected behavior
I'd expect this to work
import * as stylex from '@stylexjs/stylex';
const { colors } = stylex.env;
export const styles = stylex.create({
root: {
color: colors.brand,
},
});Steps to reproduce
version: 18.1
package: @stylexjs/stylex
With the following babel.config.js:
module.exports = {
plugins: [
['@stylexjs/babel-plugin', {
env: {
tokens: {
colors: {
brand: '#0066ff',
},
spacing: {
small: '4px',
medium: '8px',
large: '16px',
},
},
},
}],
],
};The code in "expected behavior", this error is thrown:
● @stylexjs/babel-plugin › [transform] stylex.create() › static styles › stylex.env resolves compile-time constants
SyntaxError: unknown file: Unsupported expression: VariableDeclarator
1 |
2 | import * as stylex from '@stylexjs/stylex';
> 3 | const { colors } = stylex.env;
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
4 | export const styles = stylex.create({
5 | root: {
6 | color: colors.brand,
218 |
219 | if (!confident) {
> 220 | throw (deopt ?? path).buildCodeFrameError(
| ^
221 | reason ?? messages.nonStaticValue('create'),
222 | SyntaxError,
223 | );
at File.buildCodeFrameError (../../../node_modules/@babel/core/src/transformation/file/file.ts:251:12)
at NodePath.buildError [as buildCodeFrameError] (../../../node_modules/@babel/traverse/src/path/index.ts:161:21)
at buildCodeFrameError (src/visitors/stylex-create.js:220:29)
at PluginPass.CallExpression (src/index.js:362:30)
at call (../../../node_modules/@babel/traverse/src/visitors.ts:299:14)
Test case
test('stylex.env resolves compile-time constants with destructuring', () => {
const { code, metadata } = transform(
`
import * as stylex from '@stylexjs/stylex';
const { brandPrimary } = stylex.env;
export const styles = stylex.create({
root: {
color: brandPrimary,
}
});
`,
{ env: { brandPrimary: '#123456' } },
);
expect(code).toMatchInlineSnapshot(`
"import * as stylex from '@stylexjs/stylex';
export const styles = {
root: {
kMwMTN: "x1tfn4g9",
$$css: true
}
};"
`);
expect(metadata).toMatchInlineSnapshot(`
{
"stylex": [
[
"x1tfn4g9",
{
"ltr": ".x1tfn4g9{color:#123456}",
"rtl": null,
},
3000,
],
],
}
`);
});Additional comments
No response
Describe the issue
I'm not sure if this is a bug or just something that was never implemented, but trying to destructure
stylex.envthrows an error.Even with intenseness, it is cumbersome to repeatedly type
env.theme.colors.primary100. Being able to access colors directly would make the workflow of usingenva lot more convenient.Expected behavior
I'd expect this to work
Steps to reproduce
version: 18.1
package: @stylexjs/stylex
With the following babel.config.js:
The code in "expected behavior", this error is thrown:
Test case
Additional comments
No response