{
}} />
;
}
- stylex.inject(".x1e2nbdu{color:red}", 3000);
- stylex.inject(".x1t391ir{background-color:blue}", 3000);
+ _inject(".x1e2nbdu{color:red}", 3000);
+ _inject(".x1t391ir{background-color:blue}", 3000);
const styles = {
foo: {
color: "x1e2nbdu",
@@ -1097,9 +1131,10 @@ describe('@stylexjs/babel-plugin', () => {
});
`),
).toMatchInlineSnapshot(`
- "import stylex from 'stylex';
+ "import _inject from "@stylexjs/stylex/lib/stylex-inject";
+ import stylex from 'stylex';
stylex.props([styles.default, props]);
- stylex.inject(".x1e2nbdu{color:red}", 3000);
+ _inject(".x1e2nbdu{color:red}", 3000);
const styles = {
default: {
color: "x1e2nbdu",
@@ -1126,12 +1161,13 @@ describe('@stylexjs/babel-plugin', () => {
});
`),
).toMatchInlineSnapshot(`
- "import stylex from 'stylex';
+ "import _inject from "@stylexjs/stylex/lib/stylex-inject";
+ import stylex from 'stylex';
({
className: "x17z2mba xc445zv"
});
- stylex.inject(".x17z2mba:hover{color:blue}", 3130);
- stylex.inject("@media (min-width: 1000px){.xc445zv.xc445zv{background-color:blue}}", 3200);
+ _inject(".x17z2mba:hover{color:blue}", 3130);
+ _inject("@media (min-width: 1000px){.xc445zv.xc445zv{background-color:blue}}", 3200);
export const styles = {
default: {
":hover_color": "x17z2mba",
@@ -1159,8 +1195,9 @@ describe('@stylexjs/babel-plugin', () => {
{ importSources: ['custom-stylex-path'] },
),
).toMatchInlineSnapshot(`
- "import stylex from 'custom-stylex-path';
- stylex.inject(".x1e2nbdu{color:red}", 3000);
+ "import _inject from "@stylexjs/stylex/lib/stylex-inject";
+ import stylex from 'custom-stylex-path';
+ _inject(".x1e2nbdu{color:red}", 3000);
({
className: "x1e2nbdu"
});"
@@ -1208,19 +1245,20 @@ describe('@stylexjs/babel-plugin', () => {
{ dev: true, genConditionalClasses: true },
),
).toMatchInlineSnapshot(`
- "import stylex from '@stylexjs/stylex';
- stylex.inject(".x9f619{box-sizing:border-box}", 3000);
- stylex.inject(".x1yc5d2u{grid-area:sidebar}", 1000);
- stylex.inject(".x1fdo2jl{grid-area:content}", 1000);
- stylex.inject(".xrvj5dj{display:grid}", 3000);
- stylex.inject(".x7k18q3{grid-template-rows:100%}", 3000);
- stylex.inject(".x5gp9wm{grid-template-areas:\\"content\\"}", 2000);
- stylex.inject(".x1rkzygb{grid-template-columns:auto minmax(0,1fr)}", 3000);
- stylex.inject(".x17lh93j{grid-template-areas:\\"sidebar content\\"}", 2000);
- stylex.inject("@media (max-width: 640px){.xmr4b4k.xmr4b4k{grid-template-rows:minmax(0,1fr) auto}}", 3200);
- stylex.inject("@media (max-width: 640px){.xesbpuc.xesbpuc{grid-template-areas:\\"content\\" \\"sidebar\\"}}", 2200);
- stylex.inject("@media (max-width: 640px){.x15nfgh4.x15nfgh4{grid-template-columns:100%}}", 3200);
- stylex.inject(".x1mkdm3x{grid-template-columns:minmax(0,1fr)}", 3000);
+ "import _inject from "@stylexjs/stylex/lib/stylex-inject";
+ import stylex from '@stylexjs/stylex';
+ _inject(".x9f619{box-sizing:border-box}", 3000);
+ _inject(".x1yc5d2u{grid-area:sidebar}", 1000);
+ _inject(".x1fdo2jl{grid-area:content}", 1000);
+ _inject(".xrvj5dj{display:grid}", 3000);
+ _inject(".x7k18q3{grid-template-rows:100%}", 3000);
+ _inject(".x5gp9wm{grid-template-areas:\\"content\\"}", 2000);
+ _inject(".x1rkzygb{grid-template-columns:auto minmax(0,1fr)}", 3000);
+ _inject(".x17lh93j{grid-template-areas:\\"sidebar content\\"}", 2000);
+ _inject("@media (max-width: 640px){.xmr4b4k.xmr4b4k{grid-template-rows:minmax(0,1fr) auto}}", 3200);
+ _inject("@media (max-width: 640px){.xesbpuc.xesbpuc{grid-template-areas:\\"content\\" \\"sidebar\\"}}", 2200);
+ _inject("@media (max-width: 640px){.x15nfgh4.x15nfgh4{grid-template-columns:100%}}", 3200);
+ _inject(".x1mkdm3x{grid-template-columns:minmax(0,1fr)}", 3000);
export const styles = {
sidebar: {
"UnknownFile__styles.sidebar": "UnknownFile__styles.sidebar",
@@ -1321,19 +1359,20 @@ describe('@stylexjs/babel-plugin', () => {
{ dev: true, genConditionalClasses: true },
),
).toMatchInlineSnapshot(`
- "import stylex from '@stylexjs/stylex';
- stylex.inject(".x9f619{box-sizing:border-box}", 3000);
- stylex.inject(".x1yc5d2u{grid-area:sidebar}", 1000);
- stylex.inject(".x1fdo2jl{grid-area:content}", 1000);
- stylex.inject(".xrvj5dj{display:grid}", 3000);
- stylex.inject(".x7k18q3{grid-template-rows:100%}", 3000);
- stylex.inject(".x5gp9wm{grid-template-areas:\\"content\\"}", 2000);
- stylex.inject(".x1rkzygb{grid-template-columns:auto minmax(0,1fr)}", 3000);
- stylex.inject(".x17lh93j{grid-template-areas:\\"sidebar content\\"}", 2000);
- stylex.inject("@media (max-width: 640px){.xmr4b4k.xmr4b4k{grid-template-rows:minmax(0,1fr) auto}}", 3200);
- stylex.inject("@media (max-width: 640px){.xesbpuc.xesbpuc{grid-template-areas:\\"content\\" \\"sidebar\\"}}", 2200);
- stylex.inject("@media (max-width: 640px){.x15nfgh4.x15nfgh4{grid-template-columns:100%}}", 3200);
- stylex.inject(".x1mkdm3x{grid-template-columns:minmax(0,1fr)}", 3000);
+ "import _inject from "@stylexjs/stylex/lib/stylex-inject";
+ import stylex from '@stylexjs/stylex';
+ _inject(".x9f619{box-sizing:border-box}", 3000);
+ _inject(".x1yc5d2u{grid-area:sidebar}", 1000);
+ _inject(".x1fdo2jl{grid-area:content}", 1000);
+ _inject(".xrvj5dj{display:grid}", 3000);
+ _inject(".x7k18q3{grid-template-rows:100%}", 3000);
+ _inject(".x5gp9wm{grid-template-areas:\\"content\\"}", 2000);
+ _inject(".x1rkzygb{grid-template-columns:auto minmax(0,1fr)}", 3000);
+ _inject(".x17lh93j{grid-template-areas:\\"sidebar content\\"}", 2000);
+ _inject("@media (max-width: 640px){.xmr4b4k.xmr4b4k{grid-template-rows:minmax(0,1fr) auto}}", 3200);
+ _inject("@media (max-width: 640px){.xesbpuc.xesbpuc{grid-template-areas:\\"content\\" \\"sidebar\\"}}", 2200);
+ _inject("@media (max-width: 640px){.x15nfgh4.x15nfgh4{grid-template-columns:100%}}", 3200);
+ _inject(".x1mkdm3x{grid-template-columns:minmax(0,1fr)}", 3000);
const complex = {
0: {
className: "UnknownFile__styles.root xrvj5dj UnknownFile__styles.withSidebar x1rkzygb x7k18q3 x17lh93j xmr4b4k xesbpuc x15nfgh4"
diff --git a/packages/babel-plugin/__tests__/stylex-transform-value-normalize-test.js b/packages/babel-plugin/__tests__/stylex-transform-value-normalize-test.js
index 0c21178f..0317b0c6 100644
--- a/packages/babel-plugin/__tests__/stylex-transform-value-normalize-test.js
+++ b/packages/babel-plugin/__tests__/stylex-transform-value-normalize-test.js
@@ -50,8 +50,9 @@ describe('@stylexjs/babel-plugin', () => {
});
`),
).toMatchInlineSnapshot(`
- "import stylex from 'stylex';
- stylex.inject(".x18qx21s{transform:rotate(10deg) translate3d(0,0,0)}", 3000);"
+ "import _inject from "@stylexjs/stylex/lib/stylex-inject";
+ import stylex from 'stylex';
+ _inject(".x18qx21s{transform:rotate(10deg) translate3d(0,0,0)}", 3000);"
`);
expect(
transform(`
@@ -59,8 +60,9 @@ describe('@stylexjs/babel-plugin', () => {
const styles = stylex.create({ x: { color: 'rgba( 1, 222, 33 , 0.5)' } });
`),
).toMatchInlineSnapshot(`
- "import stylex from 'stylex';
- stylex.inject(".xe1l9yr{color:rgba(1,222,33,.5)}", 3000);"
+ "import _inject from "@stylexjs/stylex/lib/stylex-inject";
+ import stylex from 'stylex';
+ _inject(".xe1l9yr{color:rgba(1,222,33,.5)}", 3000);"
`);
});
@@ -74,9 +76,10 @@ describe('@stylexjs/babel-plugin', () => {
} });
`),
).toMatchInlineSnapshot(`
- "import stylex from 'stylex';
- stylex.inject(".x1ghz6dp{margin:0}", 1000);
- stylex.inject(".xgsvwom{margin-left:1px}", 4000);"
+ "import _inject from "@stylexjs/stylex/lib/stylex-inject";
+ import stylex from 'stylex';
+ _inject(".x1ghz6dp{margin:0}", 1000);
+ _inject(".xgsvwom{margin-left:1px}", 4000);"
`);
});
@@ -87,8 +90,9 @@ describe('@stylexjs/babel-plugin', () => {
const styles = stylex.create({ x: { transitionDuration: '500ms' } });
`),
).toMatchInlineSnapshot(`
- "import stylex from 'stylex';
- stylex.inject(".x1wsgiic{transition-duration:.5s}", 3000);"
+ "import _inject from "@stylexjs/stylex/lib/stylex-inject";
+ import stylex from 'stylex';
+ _inject(".x1wsgiic{transition-duration:.5s}", 3000);"
`);
});
@@ -103,8 +107,9 @@ describe('@stylexjs/babel-plugin', () => {
});
`),
).toMatchInlineSnapshot(`
- "import stylex from 'stylex';
- stylex.inject(".x1jpfit1{transform:0deg}", 3000);"
+ "import _inject from "@stylexjs/stylex/lib/stylex-inject";
+ import stylex from 'stylex';
+ _inject(".x1jpfit1{transform:0deg}", 3000);"
`);
});
@@ -115,8 +120,9 @@ describe('@stylexjs/babel-plugin', () => {
const styles = stylex.create({ x: { width: 'calc((100% + 3% - 100px) / 7)' } });
`),
).toMatchInlineSnapshot(`
- "import stylex from 'stylex';
- stylex.inject(".x1hauit9{width:calc((100% + 3% - 100px) / 7)}", 4000);"
+ "import _inject from "@stylexjs/stylex/lib/stylex-inject";
+ import stylex from 'stylex';
+ _inject(".x1hauit9{width:calc((100% + 3% - 100px) / 7)}", 4000);"
`);
});
@@ -130,9 +136,10 @@ describe('@stylexjs/babel-plugin', () => {
} });
`),
).toMatchInlineSnapshot(`
- "import stylex from 'stylex';
- stylex.inject(".xpvlhck{transition-duration:.01s}", 3000);
- stylex.inject(".xxziih7{transition-timing-function:cubic-bezier(.08,.52,.52,1)}", 3000);"
+ "import _inject from "@stylexjs/stylex/lib/stylex-inject";
+ import stylex from 'stylex';
+ _inject(".xpvlhck{transition-duration:.01s}", 3000);
+ _inject(".xxziih7{transition-timing-function:cubic-bezier(.08,.52,.52,1)}", 3000);"
`);
});
@@ -143,8 +150,9 @@ describe('@stylexjs/babel-plugin', () => {
const styles = stylex.create({ x: { quotes: "''" } });
`),
).toMatchInlineSnapshot(`
- "import stylex from 'stylex';
- stylex.inject(".x169joja{quotes:\\"\\"}", 3000);"
+ "import _inject from "@stylexjs/stylex/lib/stylex-inject";
+ import stylex from 'stylex';
+ _inject(".x169joja{quotes:\\"\\"}", 3000);"
`);
});
@@ -159,10 +167,11 @@ describe('@stylexjs/babel-plugin', () => {
});
`),
).toMatchInlineSnapshot(`
- "import stylex from 'stylex';
- stylex.inject(".xsa3hc2{transition-duration:1.234s}", 3000);
- stylex.inject(".xpvlhck{transition-duration:.01s}", 3000);
- stylex.inject(".xjd9b36{transition-duration:1ms}", 3000);"
+ "import _inject from "@stylexjs/stylex/lib/stylex-inject";
+ import stylex from 'stylex';
+ _inject(".xsa3hc2{transition-duration:1.234s}", 3000);
+ _inject(".xpvlhck{transition-duration:.01s}", 3000);
+ _inject(".xjd9b36{transition-duration:1ms}", 3000);"
`);
});
@@ -184,13 +193,14 @@ describe('@stylexjs/babel-plugin', () => {
});
`),
).toMatchInlineSnapshot(`
- "import stylex from 'stylex';
- stylex.inject(".x1egiwwb{height:500px}", 4000);
- stylex.inject(".x1oin6zd{margin:10px}", 1000);
- stylex.inject(".xvue9z{width:500px}", 4000);
- stylex.inject(".xk50ysn{font-weight:500}", 3000);
- stylex.inject(".x1evy7pa{line-height:1.5}", 3000);
- stylex.inject(".xbyyjgo{opacity:.5}", 3000);"
+ "import _inject from "@stylexjs/stylex/lib/stylex-inject";
+ import stylex from 'stylex';
+ _inject(".x1egiwwb{height:500px}", 4000);
+ _inject(".x1oin6zd{margin:10px}", 1000);
+ _inject(".xvue9z{width:500px}", 4000);
+ _inject(".xk50ysn{font-weight:500}", 3000);
+ _inject(".x1evy7pa{line-height:1.5}", 3000);
+ _inject(".xbyyjgo{opacity:.5}", 3000);"
`);
});
@@ -201,8 +211,9 @@ describe('@stylexjs/babel-plugin', () => {
const styles = stylex.create({ x: { height: 100 / 3 } });
`),
).toMatchInlineSnapshot(`
- "import stylex from 'stylex';
- stylex.inject(".x1vvwc6p{height:33.3333px}", 4000);"
+ "import _inject from "@stylexjs/stylex/lib/stylex-inject";
+ import stylex from 'stylex';
+ _inject(".x1vvwc6p{height:33.3333px}", 4000);"
`);
});
@@ -223,10 +234,11 @@ describe('@stylexjs/babel-plugin', () => {
});
`),
).toMatchInlineSnapshot(`
- "import stylex from 'stylex';
- stylex.inject(".x14axycx{content:\\"\\"}", 3000);
- stylex.inject(".xmmpjw1{content:\\"next\\"}", 3000);
- stylex.inject(".x12vzfr8{content:\\"prev\\"}", 3000);"
+ "import _inject from "@stylexjs/stylex/lib/stylex-inject";
+ import stylex from 'stylex';
+ _inject(".x14axycx{content:\\"\\"}", 3000);
+ _inject(".xmmpjw1{content:\\"next\\"}", 3000);
+ _inject(".x12vzfr8{content:\\"prev\\"}", 3000);"
`);
});
@@ -237,8 +249,9 @@ describe('@stylexjs/babel-plugin', () => {
const styles = stylex.create({ x: { color: 'red !important' } });
`),
).toMatchInlineSnapshot(`
- "import stylex from 'stylex';
- stylex.inject(".xzw3067{color:red!important}", 3000);"
+ "import _inject from "@stylexjs/stylex/lib/stylex-inject";
+ import stylex from 'stylex';
+ _inject(".xzw3067{color:red!important}", 3000);"
`);
});
});
@@ -265,11 +278,12 @@ describe('@stylexjs/babel-plugin', () => {
});
`),
).toMatchInlineSnapshot(`
- "import stylex from 'stylex';
- stylex.inject(".xngnso2{font-size:1.5rem}", 3000);
- stylex.inject(".x1c3i2sq{font-size:1.125rem}", 3000);
- stylex.inject(".x1603h9y{font-size:1.25rem}", 3000);
- stylex.inject(".x1qlqyl8{font-size:inherit}", 3000);"
+ "import _inject from "@stylexjs/stylex/lib/stylex-inject";
+ import stylex from 'stylex';
+ _inject(".xngnso2{font-size:1.5rem}", 3000);
+ _inject(".x1c3i2sq{font-size:1.125rem}", 3000);
+ _inject(".x1603h9y{font-size:1.25rem}", 3000);
+ _inject(".x1qlqyl8{font-size:inherit}", 3000);"
`);
});
@@ -284,8 +298,9 @@ describe('@stylexjs/babel-plugin', () => {
});
`),
).toMatchInlineSnapshot(`
- "import stylex from 'stylex';
- stylex.inject(".x37c5sx{font-size:calc(100% - 1.5rem)}", 3000);"
+ "import _inject from "@stylexjs/stylex/lib/stylex-inject";
+ import stylex from 'stylex';
+ _inject(".x37c5sx{font-size:calc(100% - 1.5rem)}", 3000);"
`);
});
});
@@ -313,11 +328,12 @@ describe('@stylexjs/babel-plugin', () => {
{ useRemForFontSize: false },
),
).toMatchInlineSnapshot(`
- "import stylex from 'stylex';
- stylex.inject(".x1pvqxga{font-size:24px}", 3000);
- stylex.inject(".xosj86m{font-size:18px}", 3000);
- stylex.inject(".x1603h9y{font-size:1.25rem}", 3000);
- stylex.inject(".x1qlqyl8{font-size:inherit}", 3000);"
+ "import _inject from "@stylexjs/stylex/lib/stylex-inject";
+ import stylex from 'stylex';
+ _inject(".x1pvqxga{font-size:24px}", 3000);
+ _inject(".xosj86m{font-size:18px}", 3000);
+ _inject(".x1603h9y{font-size:1.25rem}", 3000);
+ _inject(".x1qlqyl8{font-size:inherit}", 3000);"
`);
});
@@ -335,8 +351,9 @@ describe('@stylexjs/babel-plugin', () => {
{ useRemForFontSize: false },
),
).toMatchInlineSnapshot(`
- "import stylex from 'stylex';
- stylex.inject(".x1upkca{font-size:calc(100% - 24px)}", 3000);"
+ "import _inject from "@stylexjs/stylex/lib/stylex-inject";
+ import stylex from 'stylex';
+ _inject(".x1upkca{font-size:calc(100% - 24px)}", 3000);"
`);
});
});
diff --git a/packages/babel-plugin/__tests__/stylex-transform-variable-removal-test.js b/packages/babel-plugin/__tests__/stylex-transform-variable-removal-test.js
index c52f96d7..a03819e5 100644
--- a/packages/babel-plugin/__tests__/stylex-transform-variable-removal-test.js
+++ b/packages/babel-plugin/__tests__/stylex-transform-variable-removal-test.js
@@ -37,9 +37,10 @@ describe('[optimization] Removes `styles` variable when not needed', () => {
styles;
`);
expect(result.code).toMatchInlineSnapshot(`
- "import stylex from 'stylex';
- stylex.inject(".xrkmrrc{background-color:red}", 3000);
- stylex.inject(".xju2f9n{color:blue}", 3000);
+ "import _inject from "@stylexjs/stylex/lib/stylex-inject";
+ import stylex from 'stylex';
+ _inject(".xrkmrrc{background-color:red}", 3000);
+ _inject(".xju2f9n{color:blue}", 3000);
const styles = {
default: {
backgroundColor: "xrkmrrc",
@@ -85,9 +86,10 @@ describe('[optimization] Removes `styles` variable when not needed', () => {
});
`);
expect(result.code).toMatchInlineSnapshot(`
- "import stylex from 'stylex';
- stylex.inject(".xrkmrrc{background-color:red}", 3000);
- stylex.inject(".xju2f9n{color:blue}", 3000);"
+ "import _inject from "@stylexjs/stylex/lib/stylex-inject";
+ import stylex from 'stylex';
+ _inject(".xrkmrrc{background-color:red}", 3000);
+ _inject(".xju2f9n{color:blue}", 3000);"
`);
expect(result.metadata).toMatchInlineSnapshot(`
{
diff --git a/packages/babel-plugin/flow_modules/@babel/helper-module-imports/index.js.flow b/packages/babel-plugin/flow_modules/@babel/helper-module-imports/index.js.flow
new file mode 100644
index 00000000..a41359c0
--- /dev/null
+++ b/packages/babel-plugin/flow_modules/@babel/helper-module-imports/index.js.flow
@@ -0,0 +1,182 @@
+/**
+ * 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.
+ *
+ * @flow strict
+ */
+
+import * as t from '../types';
+import type { NodePath } from '@babel/traverse';
+
+export type ImportOptions = $ReadOnly<{
+ /**
+ * The module being referenced.
+ */
+ importedSource: string | null,
+ /**
+ * The type of module being imported:
+ *
+ * * 'es6' - An ES6 module.
+ * * 'commonjs' - A CommonJS module. (Default)
+ */
+ importedType: 'es6' | 'commonjs',
+ /**
+ * The type of interop behavior for namespace/default/named when loading
+ * CommonJS modules.
+ *
+ * ## 'babel' (Default)
+ *
+ * Load using Babel's interop.
+ *
+ * If '.__esModule' is true, treat as 'compiled', else:
+ *
+ * * Namespace: A copy of the module.exports with .default
+ * populated by the module.exports object.
+ * * Default: The module.exports value.
+ * * Named: The .named property of module.exports.
+ *
+ * The 'ensureLiveReference' has no effect on the liveness of these.
+ *
+ * ## 'compiled'
+ *
+ * Assume the module is ES6 compiled to CommonJS. Useful to avoid injecting
+ * interop logic if you are confident that the module is a certain format.
+ *
+ * * Namespace: The root module.exports object.
+ * * Default: The .default property of the namespace.
+ * * Named: The .named property of the namespace.
+ *
+ * Will return erroneous results if the imported module is _not_ compiled
+ * from ES6 with Babel.
+ *
+ * ## 'uncompiled'
+ *
+ * Assume the module is _not_ ES6 compiled to CommonJS. Used a simplified
+ * access pattern that doesn't require additional function calls.
+ *
+ * Will return erroneous results if the imported module _is_ compiled
+ * from ES6 with Babel.
+ *
+ * * Namespace: The module.exports object.
+ * * Default: The module.exports object.
+ * * Named: The .named property of module.exports.
+ */
+ importedInterop: 'babel' | 'node' | 'compiled' | 'uncompiled',
+ /**
+ * The type of CommonJS interop included in the environment that will be
+ * loading the output code.
+ *
+ * * 'babel' - CommonJS modules load with Babel's interop. (Default)
+ * * 'node' - CommonJS modules load with Node's interop.
+ *
+ * See descriptions in 'importedInterop' for more details.
+ */
+ importingInterop: 'babel' | 'node',
+ /**
+ * Define whether we explicitly care that the import be a live reference.
+ * Only applies when importing default and named imports, not the namespace.
+ *
+ * * true - Force imported values to be live references.
+ * * false - No particular requirements. Keeps the code simplest. (Default)
+ */
+ ensureLiveReference: boolean,
+ /**
+ * Define if we explicitly care that the result not be a property reference.
+ *
+ * * true - Force calls to exclude context. Useful if the value is going to
+ * be used as function callee.
+ * * false - No particular requirements for context of the access. (Default)
+ */
+ ensureNoContext: boolean,
+ /**
+ * Define whether the import should be loaded before or after the existing imports.
+ * "after" is only allowed inside ECMAScript modules, since it's not possible to
+ * reliably pick the location _after_ require() calls but _before_ other code in CJS.
+ */
+ importPosition: 'before' | 'after',
+
+ nameHint?: string,
+ blockHoist?: number,
+}>;
+
+declare export function addDefault(
+ path: NodePath<>,
+ importedSource: string,
+ opts?: Partial
,
+): t.Identifier;
+
+/**
+ * add a named import to the program path of given path
+ *
+ * @param path The starting path to find a program path
+ * @param name The name of the generated binding. Babel will prefix it with `_`
+ * @param importedSource The source of the import
+ * @param [opts]
+ * @returns If opts.ensureNoContext is true, returns a SequenceExpression,
+ * else if opts.ensureLiveReference is true, returns a MemberExpression, else returns an Identifier
+ */
+declare export const addNamed: (
+ path: NodePath<>,
+ name: string,
+ importedSource: string,
+ opts?: Omit<
+ Partial,
+ 'ensureLiveReference' | 'ensureNoContext',
+ >,
+) => t.Identifier;
+
+// declare export function addNamed(
+// path: NodePath<>,
+// name: string,
+// importedSource: string,
+// opts?: Omit, "ensureLiveReference"> & {
+// ensureLiveReference: true;
+// },
+// ): t.MemberExpression;
+// declare export function addNamed(
+// path: NodePath,
+// name: string,
+// importedSource: string,
+// opts?: Omit, "ensureNoContext"> & {
+// ensureNoContext: true;
+// },
+// ): t.SequenceExpression;
+
+declare export function addNamespace(
+ path: NodePath<>,
+ importedSource: string,
+ opts?: Partial,
+): t.Identifier;
+
+// declare export function addSideEffect(
+// path: NodePath<>,
+// importedSource: string,
+// opts?: Partial,
+// ): void;
+
+declare export function isModule(path: NodePath): boolean;
+
+// declare export class ImportInjector {
+// constructor(
+// path: NodePath<>,
+// importedSource?: string,
+// opts?: Partial,
+// ): ImportInjector;
+
+// addDefault(
+// importedSourceIn: string,
+// opts: Partial,
+// ): t.Identifier;
+// addNamed(
+// importName: string,
+// importedSourceIn: string,
+// opts: Partial,
+// ): t.Identifier;
+// addNamespace(
+// importedSourceIn: string,
+// opts: Partial,
+// ): t.Identifier;
+// addSideEffect(importedSourceIn: string, opts: Partial): void;
+// }
diff --git a/packages/babel-plugin/flow_modules/@babel/traverse/index.js.flow b/packages/babel-plugin/flow_modules/@babel/traverse/index.js.flow
index 0a6f8a87..c2a88e12 100644
--- a/packages/babel-plugin/flow_modules/@babel/traverse/index.js.flow
+++ b/packages/babel-plugin/flow_modules/@babel/traverse/index.js.flow
@@ -3,6 +3,7 @@
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
+ *
* @flow strict
*/
@@ -307,8 +308,8 @@ declare export class NodePath<+T: Node = Node> {
type: T extends null | void
? void
: T extends Node
- ? T['type']
- : string | void;
+ ? T['type']
+ : string | void;
typeAnnotation: { ... };
@@ -996,7 +997,7 @@ export type NodePathResult> =
T extends $ReadOnlyArray
? $ReadOnlyArray>
: T extends null | void
- ? void
- : T extends Node
- ? NodePath
- : T;
+ ? void
+ : T extends Node
+ ? NodePath
+ : T;
diff --git a/packages/babel-plugin/package.json b/packages/babel-plugin/package.json
index abdb2151..f36cdfdb 100644
--- a/packages/babel-plugin/package.json
+++ b/packages/babel-plugin/package.json
@@ -12,6 +12,7 @@
"test": "jest"
},
"dependencies": {
+ "@babel/helper-module-imports": "^7.22.15",
"@stylexjs/shared": "0.3.0"
},
"peerDependencies": {
diff --git a/packages/babel-plugin/src/utils/state-manager.js b/packages/babel-plugin/src/utils/state-manager.js
index 6323cd60..ccb1f086 100644
--- a/packages/babel-plugin/src/utils/state-manager.js
+++ b/packages/babel-plugin/src/utils/state-manager.js
@@ -7,6 +7,7 @@
* @flow strict
*/
+import * as t from '@babel/types';
import type { PluginPass } from '@babel/core';
import type { NodePath } from '@babel/traverse';
import type {
@@ -36,16 +37,25 @@ type ModuleResolution =
themeFileExtension?: string,
};
-export type StyleXOptions = {
+export type StyleXOptions = $ReadOnly<{
...RuntimeOptions,
importSources: $ReadOnlyArray<
string | $ReadOnly<{ from: string, as: string }>,
>,
+ runtimeInjection: boolean | ?string | $ReadOnly<{ from: string, as: string }>,
treeshakeCompensation?: boolean,
genConditionalClasses: boolean,
unstable_moduleResolution: void | ModuleResolution,
...
-};
+}>;
+
+type StyleXStateOptions = $ReadOnly<{
+ ...StyleXOptions,
+ runtimeInjection: ?string | $ReadOnly<{ from: string, as: string }>,
+ ...
+}>;
+
+const DEFAULT_INJECT_PATH = '@stylexjs/stylex/lib/stylex-inject';
export default class StateManager {
+_state: PluginPass;
@@ -62,6 +72,8 @@ export default class StateManager {
+stylexCreateThemeImport: Set = new Set();
+stylexTypesImport: Set = new Set();
+ injectImportInserted: ?t.Identifier = null;
+
// `stylex.create` calls
+styleMap: Map = new Map();
+styleVars: Map> = new Map();
@@ -76,15 +88,21 @@ export default class StateManager {
(state.file.metadata: $FlowFixMe).stylex = [];
}
- get options(): StyleXOptions {
+ get options(): StyleXStateOptions {
const options: Partial =
(this._state.opts: $FlowFixMe) || {};
- const opts: StyleXOptions = {
+ const opts: StyleXStateOptions = {
...options,
dev: !!(options: $FlowFixMe).dev,
test: !!(options: $FlowFixMe).test,
runtimeInjection:
- (options: $FlowFixMe).runtimeInjection ?? !!(options: $FlowFixMe).dev,
+ options.runtimeInjection === true
+ ? DEFAULT_INJECT_PATH
+ : options.runtimeInjection
+ ? options.runtimeInjection
+ : options.dev
+ ? DEFAULT_INJECT_PATH
+ : undefined,
classNamePrefix: (options: $FlowFixMe).classNamePrefix ?? 'x',
importSources: [
name,
@@ -140,8 +158,10 @@ export default class StateManager {
return this._state.file.metadata;
}
- get runtimeInjection(): boolean {
- return !!this.options.runtimeInjection;
+ get runtimeInjection(): ?$ReadOnly<{ from: string, as?: string }> {
+ return typeof this.options.runtimeInjection === 'string'
+ ? { from: this.options.runtimeInjection }
+ : this.options.runtimeInjection || null;
}
get isDev(): boolean {
diff --git a/packages/babel-plugin/src/visitors/stylex-create-theme.js b/packages/babel-plugin/src/visitors/stylex-create-theme.js
index c78b084a..5ec7a844 100644
--- a/packages/babel-plugin/src/visitors/stylex-create-theme.js
+++ b/packages/babel-plugin/src/visitors/stylex-create-theme.js
@@ -9,6 +9,7 @@
import * as t from '@babel/types';
import type { NodePath } from '@babel/traverse';
+import { addDefault, addNamed } from '@babel/helper-module-imports';
import StateManager from '../utils/state-manager';
import { createTheme as stylexCreateTheme, messages } from '@stylexjs/shared';
import { convertObjectToAST } from '../utils/js-to-ast';
@@ -107,36 +108,28 @@ export default function transformStyleXCreateTheme(
// This should be a transformed variables object
callExpressionPath.replaceWith(convertObjectToAST(overridesObj));
- if (state.runtimeInjection) {
- // We know that the top level parent path is an variable declarator
- const statementPath: ?NodePath<> = variableDeclaratorPath.parentPath;
-
- let stylexName: string;
- state.stylexImport.forEach((importName) => {
- stylexName = importName;
- });
- if (stylexName == null) {
- stylexName = '__stylex__';
- statementPath?.insertBefore(
- t.importDeclaration(
- [t.importDefaultSpecifier(t.identifier(stylexName))],
- t.stringLiteral(state.importPathString),
- ),
- );
+ const statementPath: ?NodePath<> = variableDeclaratorPath.parentPath;
+
+ if (state.runtimeInjection != null && statementPath != null) {
+ let injectName: t.Identifier;
+ if (state.injectImportInserted != null) {
+ injectName = state.injectImportInserted;
+ } else {
+ const { from, as } = state.runtimeInjection;
+ injectName =
+ as != null
+ ? addNamed(statementPath, as, from, { nameHint: 'inject' })
+ : addDefault(statementPath, from, { nameHint: 'inject' });
+
+ state.injectImportInserted = injectName;
}
statementPath?.insertBefore(
t.expressionStatement(
- t.callExpression(
- t.memberExpression(
- t.identifier(stylexName),
- t.identifier('inject'),
- ),
- [
- t.stringLiteral(css[styleKey].ltr),
- t.numericLiteral(css[styleKey].priority),
- ],
- ),
+ t.callExpression(injectName, [
+ t.stringLiteral(css[styleKey].ltr),
+ t.numericLiteral(css[styleKey].priority),
+ ]),
),
);
}
diff --git a/packages/babel-plugin/src/visitors/stylex-create/index.js b/packages/babel-plugin/src/visitors/stylex-create/index.js
index fca1728b..cd341c36 100644
--- a/packages/babel-plugin/src/visitors/stylex-create/index.js
+++ b/packages/babel-plugin/src/visitors/stylex-create/index.js
@@ -9,6 +9,7 @@
import * as t from '@babel/types';
import type { NodePath } from '@babel/traverse';
+import { addDefault, addNamed } from '@babel/helper-module-imports';
import type { FunctionConfig } from '../../utils/evaluate-path';
import StateManager from '../../utils/state-manager';
import {
@@ -190,26 +191,32 @@ export default function transformStyleXCreate(
if (Object.keys(injectedStyles).length === 0) {
return;
}
- if (state.runtimeInjection) {
- const statementPath = findNearestStatementAncestor(path);
- const stylexName = getStylexDefaultImport(path, state);
+
+ const statementPath = path.getStatementParent();
+ if (state.runtimeInjection != null && statementPath != null) {
+ let injectName: t.Identifier;
+ if (state.injectImportInserted != null) {
+ injectName = state.injectImportInserted;
+ } else {
+ const { from, as } = state.runtimeInjection;
+ injectName =
+ as != null
+ ? addNamed(statementPath, as, from, { nameHint: 'inject' })
+ : addDefault(statementPath, from, { nameHint: 'inject' });
+
+ state.injectImportInserted = injectName;
+ }
for (const [_key, { ltr, priority, rtl }] of Object.entries(
injectedStyles,
)) {
statementPath.insertBefore(
t.expressionStatement(
- t.callExpression(
- t.memberExpression(
- t.identifier(stylexName),
- t.identifier('inject'),
- ),
- [
- t.stringLiteral(ltr),
- t.numericLiteral(priority),
- ...(rtl != null ? [t.stringLiteral(rtl)] : []),
- ],
- ),
+ t.callExpression(injectName, [
+ t.stringLiteral(ltr),
+ t.numericLiteral(priority),
+ ...(rtl != null ? [t.stringLiteral(rtl)] : []),
+ ]),
),
);
}
@@ -255,83 +262,3 @@ function findNearestStatementAncestor(path: NodePath<>): NodePath {
}
return findNearestStatementAncestor(path.parentPath);
}
-
-// Converts typed spreads to `stylex.include` calls.
-// function preProcessStyleArg(
-// objPath: NodePath,
-// state: StateManager,
-// ): void {
-// objPath.traverse({
-// SpreadElement(path) {
-// const argument = path.get('argument');
-// if (!pathUtils.isTypeCastExpression(argument)) {
-// return;
-// }
-// const expression = argument.get('expression');
-// if (
-// !pathUtils.isIdentifier(expression) &&
-// !pathUtils.isMemberExpression(expression)
-// ) {
-// throw new Error(messages.ILLEGAL_NAMESPACE_VALUE);
-// }
-// if (
-// !(
-// (
-// pathUtils.isObjectExpression(path.parentPath) && // namespaceObject
-// pathUtils.isObjectProperty(path.parentPath.parentPath) && // namespaceProperty
-// pathUtils.isObjectExpression(
-// path.parentPath.parentPath.parentPath,
-// ) && // stylex.create argument
-// pathUtils.isCallExpression(
-// path.parentPath.parentPath.parentPath.parentPath,
-// )
-// ) // stylex.create
-// )
-// ) {
-// // Disallow spreads within pseudo or media query objects
-// throw new Error(messages.ILLEGAL_NESTED_PSEUDO);
-// }
-
-// const stylexName = getStylexDefaultImport(path, state);
-
-// argument.replaceWith(
-// t.callExpression(
-// t.memberExpression(t.identifier(stylexName), t.identifier('include')),
-// [expression.node],
-// ),
-// );
-// },
-// });
-// }
-
-// A function to deterministicly convert a spreadded expression to a string.
-// function toString(path: NodePath): string {
-// if (path.isIdentifier()) {
-// return path.node.name;
-// } else if (path.isStringLiteral() || path.isNumericLiteral()) {
-// return String(path.node.value);
-// } else if (path.isMemberExpression()) {
-// return `${toString(path.get('object'))}.${toString(path.get('property'))}`;
-// }
-// throw new Error(path.node.type);
-// }
-
-function getStylexDefaultImport(path: NodePath<>, state: StateManager): string {
- const statementPath = findNearestStatementAncestor(path);
-
- let stylexName: string;
- state.stylexImport.forEach((importName) => {
- stylexName = importName;
- });
- if (stylexName == null) {
- stylexName = '__stylex__';
- statementPath.insertBefore(
- t.importDeclaration(
- [t.importDefaultSpecifier(t.identifier(stylexName))],
- t.stringLiteral(state.importPathString),
- ),
- );
- state.stylexImport.add(stylexName);
- }
- return stylexName;
-}
diff --git a/packages/babel-plugin/src/visitors/stylex-define-vars.js b/packages/babel-plugin/src/visitors/stylex-define-vars.js
index 3e14bac6..316f6f0a 100644
--- a/packages/babel-plugin/src/visitors/stylex-define-vars.js
+++ b/packages/babel-plugin/src/visitors/stylex-define-vars.js
@@ -9,6 +9,7 @@
import * as t from '@babel/types';
import type { NodePath } from '@babel/traverse';
+import { addDefault, addNamed } from '@babel/helper-module-imports';
import StateManager from '../utils/state-manager';
import {
defineVars as stylexDefineVars,
@@ -98,42 +99,29 @@ export default function transformStyleXDefineVars(
// This should be a transformed variables object
callExpressionPath.replaceWith(convertObjectToAST(variablesObj));
-
- if (state.runtimeInjection) {
- // We know that the top level parent path is an export named declaration
- const maybeStatementPath: ?NodePath<> =
- variableDeclaratorPath.parentPath.parentPath;
- if (maybeStatementPath == null) {
- throw new Error('impossible');
- }
- const statementPath: NodePath<> = maybeStatementPath;
- if (!pathUtils.isExportNamedDeclaration(statementPath)) {
- throw new Error('impossible');
- }
-
- let stylexName: string;
- state.stylexImport.forEach((importName) => {
- stylexName = importName;
- });
- if (stylexName == null) {
- stylexName = '__stylex__';
- statementPath.insertBefore(
- t.importDeclaration(
- [t.importDefaultSpecifier(t.identifier(stylexName))],
- t.stringLiteral(state.importPathString),
- ),
- );
+ const statementPath: ?NodePath<> =
+ variableDeclaratorPath.parentPath.parentPath;
+
+ if (state.runtimeInjection != null && statementPath != null) {
+ let injectName: t.Identifier;
+ if (state.injectImportInserted != null) {
+ injectName = state.injectImportInserted;
+ } else {
+ const { from, as } = state.runtimeInjection;
+ injectName =
+ as != null
+ ? addNamed(statementPath, as, from, { nameHint: 'inject' })
+ : addDefault(statementPath, from, { nameHint: 'inject' });
+
+ state.injectImportInserted = injectName;
}
statementPath.insertBefore(
t.expressionStatement(
- t.callExpression(
- t.memberExpression(
- t.identifier(stylexName),
- t.identifier('inject'),
- ),
- [t.stringLiteral(css), t.numericLiteral(0)],
- ),
+ t.callExpression(injectName, [
+ t.stringLiteral(css),
+ t.numericLiteral(0),
+ ]),
),
);
}
diff --git a/packages/babel-plugin/src/visitors/stylex-keyframes.js b/packages/babel-plugin/src/visitors/stylex-keyframes.js
index 51e9c1b9..2cd80dec 100644
--- a/packages/babel-plugin/src/visitors/stylex-keyframes.js
+++ b/packages/babel-plugin/src/visitors/stylex-keyframes.js
@@ -9,6 +9,7 @@
import * as t from '@babel/types';
import type { NodePath } from '@babel/traverse';
+import { addDefault, addNamed } from '@babel/helper-module-imports';
import StateManager from '../utils/state-manager';
import { keyframes as stylexKeyframes, messages } from '@stylexjs/shared';
import * as pathUtils from '../babel-path-utils';
@@ -76,40 +77,29 @@ export default function transformStyleXKeyframes(
const { ltr, priority, rtl } = injectedStyle;
- if (
- state.runtimeInjection &&
- pathUtils.isVariableDeclaration(path.parentPath)
- ) {
- // We know that the parent path is a variable declaration
- const statementPath: NodePath = path.parentPath;
+ const statementPath: ?NodePath = path.getStatementParent();
- let stylexName: string;
- state.stylexImport.forEach((importName) => {
- stylexName = importName;
- });
- if (stylexName == null) {
- stylexName = '__stylex__';
- statementPath.insertBefore(
- t.importDeclaration(
- [t.importDefaultSpecifier(t.identifier(stylexName))],
- t.stringLiteral(state.importPathString),
- ),
- );
+ if (statementPath != null && state.runtimeInjection != null) {
+ let injectName: t.Identifier;
+ if (state.injectImportInserted != null) {
+ injectName = state.injectImportInserted;
+ } else {
+ const { from, as } = state.runtimeInjection;
+ injectName =
+ as != null
+ ? addNamed(statementPath, as, from, { nameHint: 'inject' })
+ : addDefault(statementPath, from, { nameHint: 'inject' });
+
+ state.injectImportInserted = injectName;
}
statementPath.insertBefore(
t.expressionStatement(
- t.callExpression(
- t.memberExpression(
- t.identifier(stylexName),
- t.identifier('inject'),
- ),
- [
- t.stringLiteral(ltr),
- t.numericLiteral(priority),
- ...(rtl != null ? [t.stringLiteral(rtl)] : []),
- ],
- ),
+ t.callExpression(injectName, [
+ t.stringLiteral(ltr),
+ t.numericLiteral(priority),
+ ...(rtl != null ? [t.stringLiteral(rtl)] : []),
+ ]),
),
);
}
diff --git a/packages/rollup-plugin/__tests__/index-test.js b/packages/rollup-plugin/__tests__/index-test.js
index 29de7ea4..f38f922a 100644
--- a/packages/rollup-plugin/__tests__/index-test.js
+++ b/packages/rollup-plugin/__tests__/index-test.js
@@ -21,7 +21,11 @@ describe('rollup-plugin-stylex', () => {
// Configure a rollup bundle
const bundle = await rollup.rollup({
// Remove stylex runtime from bundle
- external: ['stylex'],
+ external: [
+ 'stylex',
+ '@stylexjs/stylex',
+ '@stylexjs/stylex/lib/stylex-inject',
+ ],
input: path.resolve(__dirname, '__fixtures__/index.js'),
plugins: [
nodeResolve(),
@@ -169,7 +173,8 @@ describe('rollup-plugin-stylex', () => {
expect(css).toBeUndefined();
expect(js).toMatchInlineSnapshot(`
- "import stylex from 'stylex';
+ "import _inject from '@stylexjs/stylex/lib/stylex-inject';
+ import stylex from 'stylex';
/**
* Copyright (c) Meta Platforms, Inc. and affiliates.
@@ -180,8 +185,8 @@ describe('rollup-plugin-stylex', () => {
*
*/
- stylex.inject(".x1lliihq{display:block}", 3000);
- stylex.inject(".xh8yej3{width:100%}", 4000);
+ _inject(".x1lliihq{display:block}", 3000);
+ _inject(".xh8yej3{width:100%}", 4000);
var styles$2 = {
bar: {
"otherStyles__styles.bar": "otherStyles__styles.bar",
@@ -200,9 +205,9 @@ describe('rollup-plugin-stylex', () => {
*
*/
- stylex.inject(".xt0psk2{display:inline}", 3000);
- stylex.inject(".x1egiwwb{height:500px}", 4000);
- stylex.inject(".x3hqpx7{width:50%}", 4000);
+ _inject(".xt0psk2{display:inline}", 3000);
+ _inject(".x1egiwwb{height:500px}", 4000);
+ _inject(".x3hqpx7{width:50%}", 4000);
const styles$1 = {
baz: {
"npmStyles__styles.baz": "npmStyles__styles.baz",
@@ -222,13 +227,13 @@ describe('rollup-plugin-stylex', () => {
*
*/
- stylex.inject("@keyframes xgnty7z-B{0%{opacity:.25;}100%{opacity:1;}}", 1);
- stylex.inject(".xeuoslp{animation-name:xgnty7z-B}", 3000);
- stylex.inject(".x78zum5{display:flex}", 3000);
- stylex.inject(".x1hm9lzh{margin-inline-start:10px}", 3000);
- stylex.inject(".xlrshdv{margin-top:99px}", 4000);
- stylex.inject(".x1egiwwb{height:500px}", 4000);
- stylex.inject(".x1oz5o6v:hover{background:red}", 1130);
+ _inject("@keyframes xgnty7z-B{0%{opacity:.25;}100%{opacity:1;}}", 1);
+ _inject(".xeuoslp{animation-name:xgnty7z-B}", 3000);
+ _inject(".x78zum5{display:flex}", 3000);
+ _inject(".x1hm9lzh{margin-inline-start:10px}", 3000);
+ _inject(".xlrshdv{margin-top:99px}", 4000);
+ _inject(".x1egiwwb{height:500px}", 4000);
+ _inject(".x1oz5o6v:hover{background:red}", 1130);
var styles = {
foo: {
"index__styles.foo": "index__styles.foo",
diff --git a/packages/shared/src/common-types.js b/packages/shared/src/common-types.js
index c43c8231..59e5f0d1 100644
--- a/packages/shared/src/common-types.js
+++ b/packages/shared/src/common-types.js
@@ -41,11 +41,10 @@ export type FlatCompiledStyles = $ReadOnly<{
$$css: true,
}>;
-export type StyleXOptions = {
+export type StyleXOptions = $ReadOnly<{
dev: boolean,
test: boolean,
useRemForFontSize: boolean,
- runtimeInjection: boolean,
classNamePrefix: string,
definedStylexCSSVariables?: { [key: string]: mixed },
styleResolution:
@@ -56,7 +55,7 @@ export type StyleXOptions = {
// This is not recommended, and will be removed in a future version.
| 'legacy-expand-shorthands',
...
-};
+}>;
export type MutableCompiledNamespaces = {
[key: string]: FlatCompiledStyles,
diff --git a/packages/shared/src/utils/default-options.js b/packages/shared/src/utils/default-options.js
index d6d68c76..2422257c 100644
--- a/packages/shared/src/utils/default-options.js
+++ b/packages/shared/src/utils/default-options.js
@@ -24,7 +24,6 @@ import type { StyleXOptions } from '../common-types';
export const defaultOptions: StyleXOptions = {
dev: false,
- runtimeInjection: false,
useRemForFontSize: true,
test: false,
classNamePrefix: 'x',
diff --git a/packages/stylex/__tests__/stylex-test.js b/packages/stylex/__tests__/stylex-test.js
index fcebf4bd..54651752 100644
--- a/packages/stylex/__tests__/stylex-test.js
+++ b/packages/stylex/__tests__/stylex-test.js
@@ -15,7 +15,7 @@ import stylex from '../src/stylex';
// TODO: priorities need testing
test('stylex.inject', () => {
const prevCount = styleSheet.getRuleCount();
- stylex.inject('hey {}', 0);
+ styleSheet.inject('hey {}', 0);
expect(styleSheet.getRuleCount()).toBeGreaterThan(prevCount);
});
diff --git a/packages/stylex/src/stylex.js b/packages/stylex/src/stylex.js
index 9aab6b6c..d8bb51fe 100644
--- a/packages/stylex/src/stylex.js
+++ b/packages/stylex/src/stylex.js
@@ -32,7 +32,6 @@ export type {
StaticStylesWithout,
} from './StyleXTypes';
-import injectStyle from './stylex-inject';
import { styleq } from 'styleq';
type Cache = WeakMap<
@@ -235,8 +234,6 @@ export const firstThatWorks = (
throw new Error('stylex.firstThatWorks should never be called.');
};
-export const inject: typeof injectStyle = injectStyle;
-
function _stylex(
...styles: $ReadOnlyArray>
): string {
@@ -250,7 +247,6 @@ _stylex.createTheme = createTheme;
_stylex.include = include;
_stylex.keyframes = keyframes;
_stylex.firstThatWorks = firstThatWorks;
-_stylex.inject = inject;
_stylex.types = types;
type IStyleX = {
@@ -274,7 +270,6 @@ type IStyleX = {
firstThatWorks: (
...v: $ReadOnlyArray
) => $ReadOnlyArray,
- inject: (ltrRule: string, priority: number, rtlRule: ?string) => void,
keyframes: (keyframes: Keyframes) => string,
__customProperties?: { [string]: mixed },
...
diff --git a/packages/webpack-plugin/__tests__/index-test.js b/packages/webpack-plugin/__tests__/index-test.js
index 3c877f01..bc665178 100644
--- a/packages/webpack-plugin/__tests__/index-test.js
+++ b/packages/webpack-plugin/__tests__/index-test.js
@@ -38,10 +38,11 @@ function createCompiler(fixture, pluginOptions = {}, config = {}) {
},
plugins: [stylexPlugin],
devtool: false, //'cheap-source-map',
- externals: {
- // Remove stylex runtime from bundle
- stylex: 'stylex',
- },
+ externals: [
+ 'stylex',
+ '@stylexjs/stylex',
+ // '@stylexjs/stylex/lib/stylex-inject',
+ ],
mode: 'production',
output: {
path: path.resolve(__dirname, '__builds__'),
@@ -264,15 +265,215 @@ describe('webpack-plugin-stylex', () => {
exports.ids = [179];
exports.modules = {
+ /***/ "../../../stylex/lib/StyleXSheet.js":
+ /***/ ((__unused_webpack_module, exports, __webpack_require__) => {
+
+
+
+ Object.defineProperty(exports, "__esModule", ({
+ value: true
+ }));
+ exports.styleSheet = exports.StyleXSheet = void 0;
+ var _invariant = _interopRequireDefault(__webpack_require__("../../../../node_modules/invariant/invariant.js"));
+ function _interopRequireDefault(obj) {
+ return obj && obj.__esModule ? obj : {
+ default: obj
+ };
+ }
+ const LIGHT_MODE_CLASS_NAME = '__fb-light-mode';
+ const DARK_MODE_CLASS_NAME = '__fb-dark-mode';
+ function buildTheme(selector, theme) {
+ const lines = [];
+ lines.push(\`\${selector} {\`);
+ for (const key in theme) {
+ const value = theme[key];
+ lines.push(\` --\${key}: \${value};\`);
+ }
+ lines.push('}');
+ return lines.join('\\n');
+ }
+ function makeStyleTag() {
+ const tag = document.createElement('style');
+ tag.setAttribute('type', 'text/css');
+ tag.setAttribute('data-stylex', 'true');
+ const head = document.head || document.getElementsByTagName('head')[0];
+ (0, _invariant.default)(head, 'expected head');
+ head.appendChild(tag);
+ return tag;
+ }
+ function doesSupportCSSVariables() {
+ return globalThis.CSS != null && globalThis.CSS.supports != null && globalThis.CSS.supports('--fake-var:0');
+ }
+ const VARIABLE_MATCH = /var\\(--(.*?)\\)/g;
+ class StyleXSheet {
+ static LIGHT_MODE_CLASS_NAME = LIGHT_MODE_CLASS_NAME;
+ static DARK_MODE_CLASS_NAME = DARK_MODE_CLASS_NAME;
+ constructor(opts) {
+ this.tag = null;
+ this.injected = false;
+ this.ruleForPriority = new Map();
+ this.rules = [];
+ this.rootTheme = opts.rootTheme;
+ this.rootDarkTheme = opts.rootDarkTheme;
+ this.supportsVariables = opts.supportsVariables ?? doesSupportCSSVariables();
+ }
+ getVariableMatch() {
+ return VARIABLE_MATCH;
+ }
+ isHeadless() {
+ return this.tag == null || globalThis?.document?.body == null;
+ }
+ getTag() {
+ const {
+ tag
+ } = this;
+ (0, _invariant.default)(tag != null, 'expected tag');
+ return tag;
+ }
+ getCSS() {
+ return this.rules.join('\\n');
+ }
+ getRulePosition(rule) {
+ return this.rules.indexOf(rule);
+ }
+ getRuleCount() {
+ return this.rules.length;
+ }
+ inject() {
+ if (this.injected) {
+ return;
+ }
+ this.injected = true;
+ if (globalThis.document?.body == null) {
+ this.injectTheme();
+ return;
+ }
+ this.tag = makeStyleTag();
+ this.injectTheme();
+ }
+ injectTheme() {
+ if (this.rootTheme != null) {
+ this.insert(buildTheme(\`:root, .\${LIGHT_MODE_CLASS_NAME}\`, this.rootTheme), 0);
+ }
+ if (this.rootDarkTheme != null) {
+ this.insert(buildTheme(\`.\${DARK_MODE_CLASS_NAME}:root, .\${DARK_MODE_CLASS_NAME}\`, this.rootDarkTheme), 0);
+ }
+ }
+ __injectCustomThemeForTesting(selector, theme) {
+ if (theme != null) {
+ this.insert(buildTheme(selector, theme), 0);
+ }
+ }
+ delete(rule) {
+ const index = this.rules.indexOf(rule);
+ (0, _invariant.default)(index >= 0, "Couldn't find the index for rule %s", rule);
+ this.rules.splice(index, 1);
+ if (this.isHeadless()) {
+ return;
+ }
+ const tag = this.getTag();
+ const sheet = tag.sheet;
+ (0, _invariant.default)(sheet, 'expected sheet');
+ sheet.deleteRule(index);
+ }
+ normalizeRule(rule) {
+ const {
+ rootTheme
+ } = this;
+ if (this.supportsVariables || rootTheme == null) {
+ return rule;
+ }
+ return rule.replace(VARIABLE_MATCH, (_match, name) => {
+ return rootTheme[name];
+ });
+ }
+ getInsertPositionForPriority(priority) {
+ const priorityRule = this.ruleForPriority.get(priority);
+ if (priorityRule != null) {
+ return this.rules.indexOf(priorityRule) + 1;
+ }
+ const priorities = Array.from(this.ruleForPriority.keys()).sort((a, b) => b - a).filter(num => num > priority ? 1 : 0);
+ if (priorities.length === 0) {
+ return this.getRuleCount();
+ }
+ const lastPriority = priorities.pop();
+ return this.rules.indexOf(this.ruleForPriority.get(lastPriority));
+ }
+ insert(rawLTRRule, priority, rawRTLRule) {
+ if (this.injected === false) {
+ this.inject();
+ }
+ if (rawRTLRule != null) {
+ this.insert(addAncestorSelector(rawLTRRule, "html:not([dir='rtl'])"), priority);
+ this.insert(addAncestorSelector(rawRTLRule, "html[dir='rtl']"), priority);
+ return;
+ }
+ const rawRule = rawLTRRule;
+ if (this.rules.includes(rawRule)) {
+ return;
+ }
+ const rule = this.normalizeRule(rawRule);
+ const insertPos = this.getInsertPositionForPriority(priority);
+ this.rules.splice(insertPos, 0, rule);
+ this.ruleForPriority.set(priority, rule);
+ if (this.isHeadless()) {
+ return;
+ }
+ const tag = this.getTag();
+ const sheet = tag.sheet;
+ if (sheet != null) {
+ try {
+ sheet.insertRule(rule, insertPos);
+ } catch {}
+ }
+ }
+ }
+ exports.StyleXSheet = StyleXSheet;
+ function addAncestorSelector(selector, ancestorSelector) {
+ if (!selector.startsWith('@')) {
+ return \`\${ancestorSelector} \${selector}\`;
+ }
+ const firstBracketIndex = selector.indexOf('{');
+ const mediaQueryPart = selector.slice(0, firstBracketIndex + 1);
+ const rest = selector.slice(firstBracketIndex + 1);
+ return \`\${mediaQueryPart}\${ancestorSelector} \${rest}\`;
+ }
+ const styleSheet = exports.styleSheet = new StyleXSheet({
+ supportsVariables: true,
+ rootTheme: {},
+ rootDarkTheme: {}
+ });
+
+ /***/ }),
+
+ /***/ "../../../stylex/lib/stylex-inject.js":
+ /***/ ((__unused_webpack_module, exports, __webpack_require__) => {
+
+ var __webpack_unused_export__;
+
+
+ __webpack_unused_export__ = ({
+ value: true
+ });
+ exports.Z = inject;
+ var _StyleXSheet = __webpack_require__("../../../stylex/lib/StyleXSheet.js");
+ function inject(ltrRule, priority) {
+ let rtlRule = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : null;
+ _StyleXSheet.styleSheet.insert(ltrRule, priority, rtlRule);
+ }
+
+ /***/ }),
+
/***/ "./index.js":
/***/ ((__unused_webpack_module, __unused_webpack___webpack_exports__, __webpack_require__) => {
// UNUSED EXPORTS: default
+ // EXTERNAL MODULE: ../../../stylex/lib/stylex-inject.js
+ var stylex_inject = __webpack_require__("../../../stylex/lib/stylex-inject.js");
;// CONCATENATED MODULE: external "stylex"
const external_stylex_namespaceObject = stylex;
- var external_stylex_default = /*#__PURE__*/__webpack_require__.n(external_stylex_namespaceObject);
;// CONCATENATED MODULE: ./otherStyles.js
/**
* Copyright (c) Meta Platforms, Inc. and affiliates.
@@ -288,8 +489,9 @@ describe('webpack-plugin-stylex', () => {
- external_stylex_default().inject(".x1lliihq{display:block}", 3000);
- external_stylex_default().inject(".xh8yej3{width:100%}", 4000);
+
+ (0,stylex_inject/* default */.Z)(".x1lliihq{display:block}", 3000);
+ (0,stylex_inject/* default */.Z)(".xh8yej3{width:100%}", 4000);
var styles = {
bar: {
"otherStyles__styles.bar": "otherStyles__styles.bar",
@@ -314,9 +516,10 @@ describe('webpack-plugin-stylex', () => {
- external_stylex_default().inject(".xt0psk2{display:inline}", 3000);
- external_stylex_default().inject(".x1egiwwb{height:500px}", 4000);
- external_stylex_default().inject(".x3hqpx7{width:50%}", 4000);
+
+ (0,stylex_inject/* default */.Z)(".xt0psk2{display:inline}", 3000);
+ (0,stylex_inject/* default */.Z)(".x1egiwwb{height:500px}", 4000);
+ (0,stylex_inject/* default */.Z)(".x3hqpx7{width:50%}", 4000);
const npmStyles_styles = {
baz: {
"npmStyles__styles.baz": "npmStyles__styles.baz",
@@ -342,14 +545,15 @@ describe('webpack-plugin-stylex', () => {
- external_stylex_default().inject("@keyframes xgnty7z-B{0%{opacity:.25;}100%{opacity:1;}}", 1);
+
+ (0,stylex_inject/* default */.Z)("@keyframes xgnty7z-B{0%{opacity:.25;}100%{opacity:1;}}", 1);
var fadeAnimation = "xgnty7z-B";
- external_stylex_default().inject(".xeuoslp{animation-name:xgnty7z-B}", 3000);
- external_stylex_default().inject(".x78zum5{display:flex}", 3000);
- external_stylex_default().inject(".x1hm9lzh{margin-inline-start:10px}", 3000);
- external_stylex_default().inject(".xlrshdv{margin-top:99px}", 4000);
- external_stylex_default().inject(".x1egiwwb{height:500px}", 4000);
- external_stylex_default().inject(".x1oz5o6v:hover{background:red}", 1130);
+ (0,stylex_inject/* default */.Z)(".xeuoslp{animation-name:xgnty7z-B}", 3000);
+ (0,stylex_inject/* default */.Z)(".x78zum5{display:flex}", 3000);
+ (0,stylex_inject/* default */.Z)(".x1hm9lzh{margin-inline-start:10px}", 3000);
+ (0,stylex_inject/* default */.Z)(".xlrshdv{margin-top:99px}", 4000);
+ (0,stylex_inject/* default */.Z)(".x1egiwwb{height:500px}", 4000);
+ (0,stylex_inject/* default */.Z)(".x1oz5o6v:hover{background:red}", 1130);
var index_styles = {
foo: {
"index__styles.foo": "index__styles.foo",
@@ -378,6 +582,64 @@ describe('webpack-plugin-stylex', () => {
return stylex(otherStyles.bar, index_styles.foo, npmStyles.baz);
}
+ /***/ }),
+
+ /***/ "../../../../node_modules/invariant/invariant.js":
+ /***/ ((module) => {
+
+ /**
+ * Copyright (c) 2013-present, Facebook, Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+
+
+ /**
+ * Use invariant() to assert state which your program assumes to be true.
+ *
+ * Provide sprintf-style format (only %s is supported) and arguments
+ * to provide information about what broke and what you were
+ * expecting.
+ *
+ * The invariant message will be stripped in production, but the invariant
+ * will remain to ensure logic does not differ in production.
+ */
+
+ var NODE_ENV = "production";
+
+ var invariant = function(condition, format, a, b, c, d, e, f) {
+ if (NODE_ENV !== 'production') {
+ if (format === undefined) {
+ throw new Error('invariant requires an error message argument');
+ }
+ }
+
+ if (!condition) {
+ var error;
+ if (format === undefined) {
+ error = new Error(
+ 'Minified exception occurred; use the non-minified dev environment ' +
+ 'for the full error message and additional helpful warnings.'
+ );
+ } else {
+ var args = [a, b, c, d, e, f];
+ var argIndex = 0;
+ error = new Error(
+ format.replace(/%s/g, function() { return args[argIndex++]; })
+ );
+ error.name = 'Invariant Violation';
+ }
+
+ error.framesToPop = 1; // we don't care about invariant's own frame
+ throw error;
+ }
+ };
+
+ module.exports = invariant;
+
+
/***/ })
};