From dc3cca7a9ef1aacf1b3f409da62ceec4a2014a70 Mon Sep 17 00:00:00 2001 From: Naman Goel Date: Thu, 30 Nov 2023 00:53:55 -0800 Subject: [PATCH] Chore: More sane config options --- .../stylex-import-evaluation-test.js | 5 +- .../__tests__/stylex-transform-call-test.js | 2 +- .../__tests__/stylex-transform-create-test.js | 6 +- .../__tests__/stylex-transform-import-test.js | 2 +- .../stylex-transform-keyframes-test.js | 2 +- ...stylex-transform-legacy-shorthands-test.js | 9 +- ...tylex-transform-logical-properties-test.js | 2 +- .../stylex-transform-logical-values-test.js | 2 +- .../stylex-transform-stylex-props-test.js | 2 +- .../stylex-transform-value-normalize-test.js | 2 +- .../stylex-transform-variable-removal-test.js | 2 +- .../babel-plugin/src/utils/state-manager.js | 7 +- .../src/visitors/stylex-create-theme.js | 2 +- .../src/visitors/stylex-create/index.js | 2 +- .../src/visitors/stylex-define-vars.js | 2 +- .../src/visitors/stylex-keyframes.js | 2 +- .../open-props-compile-test.js.snap | 430 +++++++++--------- .../__tests__/open-props-compile-test.js | 1 - .../rollup-plugin/__tests__/index-test.js | 91 ++-- packages/rollup-plugin/src/index.js | 3 +- .../legacy-shorthand-expansion-test.js | 1 + packages/shared/__tests__/gen-css-test.js | 1 + packages/shared/src/common-types.js | 4 +- packages/shared/src/convert-to-className.js | 10 +- packages/shared/src/stylex-keyframes.js | 8 +- packages/shared/src/utils/default-options.js | 1 + packages/webpack-plugin/src/index.js | 3 +- 27 files changed, 304 insertions(+), 300 deletions(-) diff --git a/packages/babel-plugin/__tests__/evaluation/stylex-import-evaluation-test.js b/packages/babel-plugin/__tests__/evaluation/stylex-import-evaluation-test.js index 053ca0e5..bb147922 100644 --- a/packages/babel-plugin/__tests__/evaluation/stylex-import-evaluation-test.js +++ b/packages/babel-plugin/__tests__/evaluation/stylex-import-evaluation-test.js @@ -34,10 +34,7 @@ function transform(source, opts = options) { jsx, [ stylexPlugin, - { - treeshakeCompensation: true, - ...opts, - }, + { treeshakeCompensation: true, runtimeInjection: true, ...opts }, ], ], }); diff --git a/packages/babel-plugin/__tests__/stylex-transform-call-test.js b/packages/babel-plugin/__tests__/stylex-transform-call-test.js index a6bc385b..c6fdfe32 100644 --- a/packages/babel-plugin/__tests__/stylex-transform-call-test.js +++ b/packages/babel-plugin/__tests__/stylex-transform-call-test.js @@ -21,7 +21,7 @@ function transform(source, opts = {}) { parserOpts: { flow: 'all', }, - plugins: [jsx, [stylexPlugin, opts]], + plugins: [jsx, [stylexPlugin, { runtimeInjection: true, ...opts }]], }).code; } diff --git a/packages/babel-plugin/__tests__/stylex-transform-create-test.js b/packages/babel-plugin/__tests__/stylex-transform-create-test.js index 1e186910..f286a627 100644 --- a/packages/babel-plugin/__tests__/stylex-transform-create-test.js +++ b/packages/babel-plugin/__tests__/stylex-transform-create-test.js @@ -21,7 +21,7 @@ function transform(source, opts = {}) { parserOpts: { flow: 'all', }, - plugins: [flowPlugin, [stylexPlugin, opts]], + plugins: [flowPlugin, [stylexPlugin, { runtimeInjection: true, ...opts }]], }).code; } @@ -805,7 +805,7 @@ describe('@stylexjs/babel-plugin', () => { } }); `, - { stylexSheetName: '<>' }, + { runtimeInjection: false }, ), ).toMatchInlineSnapshot(` "import stylex from 'stylex'; @@ -984,7 +984,7 @@ describe('@stylexjs/babel-plugin', () => { } }); `, - { stylexSheetName: '<>', styleResolution: 'property-specificity' }, + { runtimeInjection: false, styleResolution: 'property-specificity' }, ), ).toMatchInlineSnapshot(` "import stylex from 'stylex'; diff --git a/packages/babel-plugin/__tests__/stylex-transform-import-test.js b/packages/babel-plugin/__tests__/stylex-transform-import-test.js index d84ed268..0658559a 100644 --- a/packages/babel-plugin/__tests__/stylex-transform-import-test.js +++ b/packages/babel-plugin/__tests__/stylex-transform-import-test.js @@ -20,7 +20,7 @@ function transform(source, opts = {}) { parserOpts: { flow: 'all', }, - plugins: [[stylexPlugin, opts]], + plugins: [[stylexPlugin, { runtimeInjection: true, ...opts }]], }).code; } diff --git a/packages/babel-plugin/__tests__/stylex-transform-keyframes-test.js b/packages/babel-plugin/__tests__/stylex-transform-keyframes-test.js index 99baf051..e4a7adf5 100644 --- a/packages/babel-plugin/__tests__/stylex-transform-keyframes-test.js +++ b/packages/babel-plugin/__tests__/stylex-transform-keyframes-test.js @@ -20,7 +20,7 @@ function transform(source, opts = {}) { parserOpts: { flow: 'all', }, - plugins: [[stylexPlugin, opts]], + plugins: [[stylexPlugin, { runtimeInjection: true, ...opts }]], }).code; } diff --git a/packages/babel-plugin/__tests__/stylex-transform-legacy-shorthands-test.js b/packages/babel-plugin/__tests__/stylex-transform-legacy-shorthands-test.js index a50d1bfd..94e6d2f4 100644 --- a/packages/babel-plugin/__tests__/stylex-transform-legacy-shorthands-test.js +++ b/packages/babel-plugin/__tests__/stylex-transform-legacy-shorthands-test.js @@ -25,7 +25,14 @@ function transform(source, opts = {}) { }, plugins: [ jsx, - [stylexPlugin, { styleResolution: 'legacy-expand-shorthands', ...opts }], + [ + stylexPlugin, + { + runtimeInjection: true, + styleResolution: 'legacy-expand-shorthands', + ...opts, + }, + ], ], }).code; } diff --git a/packages/babel-plugin/__tests__/stylex-transform-logical-properties-test.js b/packages/babel-plugin/__tests__/stylex-transform-logical-properties-test.js index 8af286ef..3feeb4f7 100644 --- a/packages/babel-plugin/__tests__/stylex-transform-logical-properties-test.js +++ b/packages/babel-plugin/__tests__/stylex-transform-logical-properties-test.js @@ -20,7 +20,7 @@ function transform(source, opts = {}) { parserOpts: { flow: 'all', }, - plugins: [[stylexPlugin, opts]], + plugins: [[stylexPlugin, { ...opts, runtimeInjection: true }]], }).code; } diff --git a/packages/babel-plugin/__tests__/stylex-transform-logical-values-test.js b/packages/babel-plugin/__tests__/stylex-transform-logical-values-test.js index c1090ffd..9763422b 100644 --- a/packages/babel-plugin/__tests__/stylex-transform-logical-values-test.js +++ b/packages/babel-plugin/__tests__/stylex-transform-logical-values-test.js @@ -20,7 +20,7 @@ function transform(source, opts = {}) { parserOpts: { flow: 'all', }, - plugins: [[stylexPlugin, opts]], + plugins: [[stylexPlugin, { runtimeInjection: true, ...opts }]], }).code; } diff --git a/packages/babel-plugin/__tests__/stylex-transform-stylex-props-test.js b/packages/babel-plugin/__tests__/stylex-transform-stylex-props-test.js index 8519e767..71cfba8c 100644 --- a/packages/babel-plugin/__tests__/stylex-transform-stylex-props-test.js +++ b/packages/babel-plugin/__tests__/stylex-transform-stylex-props-test.js @@ -21,7 +21,7 @@ function transform(source, opts = {}) { parserOpts: { flow: 'all', }, - plugins: [jsx, [stylexPlugin, opts]], + plugins: [jsx, [stylexPlugin, { ...opts, runtimeInjection: true }]], }).code; } 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 c521756b..f41e79db 100644 --- a/packages/babel-plugin/__tests__/stylex-transform-value-normalize-test.js +++ b/packages/babel-plugin/__tests__/stylex-transform-value-normalize-test.js @@ -20,7 +20,7 @@ function transform(source, opts = {}) { parserOpts: { flow: 'all', }, - plugins: [[stylexPlugin, opts]], + plugins: [[stylexPlugin, { runtimeInjection: true, ...opts }]], }).code; } 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 f40732a0..c52f96d7 100644 --- a/packages/babel-plugin/__tests__/stylex-transform-variable-removal-test.js +++ b/packages/babel-plugin/__tests__/stylex-transform-variable-removal-test.js @@ -17,7 +17,7 @@ const stylexPlugin = require('../src/index'); function transform(source, opts = {}) { const options = { filename: opts.filename, - plugins: [[stylexPlugin, opts]], + plugins: [[stylexPlugin, { ...opts, runtimeInjection: true }]], }; const result = transformSync(source, options); return result; diff --git a/packages/babel-plugin/src/utils/state-manager.js b/packages/babel-plugin/src/utils/state-manager.js index 4dd241ee..4818f990 100644 --- a/packages/babel-plugin/src/utils/state-manager.js +++ b/packages/babel-plugin/src/utils/state-manager.js @@ -81,7 +81,8 @@ export default class StateManager { ...options, dev: !!(options: $FlowFixMe).dev, test: !!(options: $FlowFixMe).test, - stylexSheetName: (options: $FlowFixMe).stylexSheetName ?? undefined, + runtimeInjection: + (options: $FlowFixMe).runtimeInjection ?? !!(options: $FlowFixMe).dev, classNamePrefix: (options: $FlowFixMe).classNamePrefix ?? 'x', importSources: (options: $FlowFixMe).importSources ?? [name, 'stylex'], definedStylexCSSVariables: @@ -117,8 +118,8 @@ export default class StateManager { return this._state.file.metadata; } - get stylexSheetName(): string | void { - return this.options.stylexSheetName ?? undefined; + get runtimeInjection(): boolean { + return !!this.options.runtimeInjection; } 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 0766e637..c78b084a 100644 --- a/packages/babel-plugin/src/visitors/stylex-create-theme.js +++ b/packages/babel-plugin/src/visitors/stylex-create-theme.js @@ -107,7 +107,7 @@ export default function transformStyleXCreateTheme( // This should be a transformed variables object callExpressionPath.replaceWith(convertObjectToAST(overridesObj)); - if (state.isDev || state.stylexSheetName == null) { + if (state.runtimeInjection) { // We know that the top level parent path is an variable declarator const statementPath: ?NodePath<> = variableDeclaratorPath.parentPath; diff --git a/packages/babel-plugin/src/visitors/stylex-create/index.js b/packages/babel-plugin/src/visitors/stylex-create/index.js index c097fb1a..7f477a90 100644 --- a/packages/babel-plugin/src/visitors/stylex-create/index.js +++ b/packages/babel-plugin/src/visitors/stylex-create/index.js @@ -194,7 +194,7 @@ export default function transformStyleXCreate( if (Object.keys(injectedStyles).length === 0) { return; } - if (state.isDev || state.stylexSheetName == null) { + if (state.runtimeInjection) { const statementPath = findNearestStatementAncestor(path); const stylexName = getStylexDefaultImport(path, state); diff --git a/packages/babel-plugin/src/visitors/stylex-define-vars.js b/packages/babel-plugin/src/visitors/stylex-define-vars.js index f43bc25f..3e14bac6 100644 --- a/packages/babel-plugin/src/visitors/stylex-define-vars.js +++ b/packages/babel-plugin/src/visitors/stylex-define-vars.js @@ -99,7 +99,7 @@ export default function transformStyleXDefineVars( // This should be a transformed variables object callExpressionPath.replaceWith(convertObjectToAST(variablesObj)); - if (state.isDev || state.stylexSheetName == null) { + if (state.runtimeInjection) { // We know that the top level parent path is an export named declaration const maybeStatementPath: ?NodePath<> = variableDeclaratorPath.parentPath.parentPath; diff --git a/packages/babel-plugin/src/visitors/stylex-keyframes.js b/packages/babel-plugin/src/visitors/stylex-keyframes.js index aebfd78e..51e9c1b9 100644 --- a/packages/babel-plugin/src/visitors/stylex-keyframes.js +++ b/packages/babel-plugin/src/visitors/stylex-keyframes.js @@ -77,7 +77,7 @@ export default function transformStyleXKeyframes( const { ltr, priority, rtl } = injectedStyle; if ( - (state.isDev || state.stylexSheetName == null) && + state.runtimeInjection && pathUtils.isVariableDeclaration(path.parentPath) ) { // We know that the parent path is a variable declaration diff --git a/packages/open-props/__tests__/__snapshots__/open-props-compile-test.js.snap b/packages/open-props/__tests__/__snapshots__/open-props-compile-test.js.snap index a5a42d12..7c7189ec 100644 --- a/packages/open-props/__tests__/__snapshots__/open-props-compile-test.js.snap +++ b/packages/open-props/__tests__/__snapshots__/open-props-compile-test.js.snap @@ -11,30 +11,30 @@ exports[`commonJS results of exported styles and variables animationNames.stylex */ import { keyframes, defineVars } from '@stylexjs/stylex'; -const fadeIn = "x1k9onmz-B"; -const fadeInBloom = "x1kxsuvo-B"; -const fadeInBloomDark = "x1xxzh6k-B"; -const fadeOut = "xyy64rv-B"; -const fadeOutBloom = "x1arqdfb-B"; -const fadeOutBloomDark = "x1mpipw3-B"; -const scaleUp = "xyzp8ol-B"; -const scaleDown = "xn063h7-B"; -const slideOutUp = "xxlu59e-B"; -const slideOutDown = "xxlu59e-B"; -const slideOutRight = "x1x4ycoi-B"; -const slideOutLeft = "x11eigc3-B"; -const slideInUp = "x1257kvv-B"; -const slideInDown = "x1vfyroa-B"; -const slideInRight = "xcz5fu3-B"; -const slideInLeft = "x1q1bizk-B"; -const shakeX = "x1otimfv-B"; -const shakeY = "x1ktabv6-B"; -const spin = "xg05aa4-B"; -const ping = "x181cfca-B"; -const blink = "xxrebcq-B"; -const float = "x115uvry-B"; -const bounce = "x6uoklk-B"; -const pulse = "x1im4pvq-B"; +const fadeIn = "x1wv65fh-B"; +const fadeInBloom = "x3cospo-B"; +const fadeInBloomDark = "x1xhkb8m-B"; +const fadeOut = "x1mi9bte-B"; +const fadeOutBloom = "xd93vs1-B"; +const fadeOutBloomDark = "x18q36hy-B"; +const scaleUp = "x1gdf4cp-B"; +const scaleDown = "x1uvjygu-B"; +const slideOutUp = "xyz4r9t-B"; +const slideOutDown = "xyz4r9t-B"; +const slideOutRight = "x1qkfcoh-B"; +const slideOutLeft = "x1c1el34-B"; +const slideInUp = "x5q0om7-B"; +const slideInDown = "xiaildr-B"; +const slideInRight = "x1pzz5b5-B"; +const slideInLeft = "x2i3tye-B"; +const shakeX = "x1f21ubi-B"; +const shakeY = "xyj5ijk-B"; +const spin = "x1uh2x5g-B"; +const ping = "xk6fz2t-B"; +const blink = "x13kz0yu-B"; +const float = "xtacmzc-B"; +const bounce = "xmu8adp-B"; +const pulse = "x1wtl5zh-B"; export const animationNames = { fadeIn: "var(--xwgfw4z)", fadeInBloom: "var(--xwpxwog)", @@ -65,193 +65,193 @@ export const animationNames = { exports[`commonJS results of exported styles and variables animationNames.stylex.js 2`] = ` [ [ - "x1k9onmz-B", + "x1wv65fh-B", { - "ltr": "@keyframes x1k9onmz-B{to{opacity:1;}}", + "ltr": "@keyframes x1wv65fh-B{to{opacity:1;}}", "rtl": null, }, 1, ], [ - "x1kxsuvo-B", + "x3cospo-B", { - "ltr": "@keyframes x1kxsuvo-B{0%{opacity:0;filter:brightness(1) blur(20px);}10%{opacity:1;filter:brightness(2) blur(10px);}100%{opacity:1;filter:brightness(1) blur(0);}}", + "ltr": "@keyframes x3cospo-B{0%{opacity:0;filter:brightness(1) blur(20px);}10%{opacity:1;filter:brightness(2) blur(10px);}100%{opacity:1;filter:brightness(1) blur(0);}}", "rtl": null, }, 1, ], [ - "x1xxzh6k-B", + "x1xhkb8m-B", { - "ltr": "@keyframes x1xxzh6k-B{0%{opacity:0;filter:brightness(1) blur(20px);}10%{opacity:1;filter:brightness(.5) blur(10px);}100%{opacity:1;filter:brightness(1) blur(0);}}", + "ltr": "@keyframes x1xhkb8m-B{0%{opacity:0;filter:brightness(1) blur(20px);}10%{opacity:1;filter:brightness(.5) blur(10px);}100%{opacity:1;filter:brightness(1) blur(0);}}", "rtl": null, }, 1, ], [ - "xyy64rv-B", + "x1mi9bte-B", { - "ltr": "@keyframes xyy64rv-B{to{opacity:0;}}", + "ltr": "@keyframes x1mi9bte-B{to{opacity:0;}}", "rtl": null, }, 1, ], [ - "x1arqdfb-B", + "xd93vs1-B", { - "ltr": "@keyframes x1arqdfb-B{100%{opacity:0;filter:brightness(1) blur(20px);}10%{opacity:1;filter:brightness(2) blur(10px);}0%{opacity:1;filter:brightness(1) blur(0);}}", + "ltr": "@keyframes xd93vs1-B{100%{opacity:0;filter:brightness(1) blur(20px);}10%{opacity:1;filter:brightness(2) blur(10px);}0%{opacity:1;filter:brightness(1) blur(0);}}", "rtl": null, }, 1, ], [ - "x1mpipw3-B", + "x18q36hy-B", { - "ltr": "@keyframes x1mpipw3-B{100%{opacity:0;filter:brightness(1) blur(20px);}10%{opacity:1;filter:brightness(.5) blur(10px);}0%{opacity:1;filter:brightness(1) blur(0);}}", + "ltr": "@keyframes x18q36hy-B{100%{opacity:0;filter:brightness(1) blur(20px);}10%{opacity:1;filter:brightness(.5) blur(10px);}0%{opacity:1;filter:brightness(1) blur(0);}}", "rtl": null, }, 1, ], [ - "xyzp8ol-B", + "x1gdf4cp-B", { - "ltr": "@keyframes xyzp8ol-B{to{transform:scale(1.25);}}", + "ltr": "@keyframes x1gdf4cp-B{to{transform:scale(1.25);}}", "rtl": null, }, 1, ], [ - "xn063h7-B", + "x1uvjygu-B", { - "ltr": "@keyframes xn063h7-B{to{transform:scale(.75);}}", + "ltr": "@keyframes x1uvjygu-B{to{transform:scale(.75);}}", "rtl": null, }, 1, ], [ - "xxlu59e-B", + "xyz4r9t-B", { - "ltr": "@keyframes xxlu59e-B{to{transform:translateY(-100%);}}", + "ltr": "@keyframes xyz4r9t-B{to{transform:translateY(-100%);}}", "rtl": null, }, 1, ], [ - "xxlu59e-B", + "xyz4r9t-B", { - "ltr": "@keyframes xxlu59e-B{to{transform:translateY(-100%);}}", + "ltr": "@keyframes xyz4r9t-B{to{transform:translateY(-100%);}}", "rtl": null, }, 1, ], [ - "x1x4ycoi-B", + "x1qkfcoh-B", { - "ltr": "@keyframes x1x4ycoi-B{to{transform:translateX(100%);}}", + "ltr": "@keyframes x1qkfcoh-B{to{transform:translateX(100%);}}", "rtl": null, }, 1, ], [ - "x11eigc3-B", + "x1c1el34-B", { - "ltr": "@keyframes x11eigc3-B{to{transform:translateX(-100%);}}", + "ltr": "@keyframes x1c1el34-B{to{transform:translateX(-100%);}}", "rtl": null, }, 1, ], [ - "x1257kvv-B", + "x5q0om7-B", { - "ltr": "@keyframes x1257kvv-B{from{transform:translateY(100%);}}", + "ltr": "@keyframes x5q0om7-B{from{transform:translateY(100%);}}", "rtl": null, }, 1, ], [ - "x1vfyroa-B", + "xiaildr-B", { - "ltr": "@keyframes x1vfyroa-B{from{transform:translateY(-100%);}}", + "ltr": "@keyframes xiaildr-B{from{transform:translateY(-100%);}}", "rtl": null, }, 1, ], [ - "xcz5fu3-B", + "x1pzz5b5-B", { - "ltr": "@keyframes xcz5fu3-B{from{transform:translateX(-100%);}}", + "ltr": "@keyframes x1pzz5b5-B{from{transform:translateX(-100%);}}", "rtl": null, }, 1, ], [ - "x1q1bizk-B", + "x2i3tye-B", { - "ltr": "@keyframes x1q1bizk-B{from{transform:translateX(100%);}}", + "ltr": "@keyframes x2i3tye-B{from{transform:translateX(100%);}}", "rtl": null, }, 1, ], [ - "x1otimfv-B", + "x1f21ubi-B", { - "ltr": "@keyframes x1otimfv-B{0%, 100%{transform:translateX(0);}20%{transform:translateX(-5%);}40%{transform:translateX(5%);}60%{transform:translateX(-5%);}80%{transform:translateX(5%);}}", + "ltr": "@keyframes x1f21ubi-B{0%, 100%{transform:translateX(0);}20%{transform:translateX(-5%);}40%{transform:translateX(5%);}60%{transform:translateX(-5%);}80%{transform:translateX(5%);}}", "rtl": null, }, 1, ], [ - "x1ktabv6-B", + "xyj5ijk-B", { - "ltr": "@keyframes x1ktabv6-B{0%, 100%{transform:translateY(0);}20%{transform:translateY(-5%);}40%{transform:translateY(5%);}60%{transform:translateY(-5%);}80%{transform:translateY(5%);}}", + "ltr": "@keyframes xyj5ijk-B{0%, 100%{transform:translateY(0);}20%{transform:translateY(-5%);}40%{transform:translateY(5%);}60%{transform:translateY(-5%);}80%{transform:translateY(5%);}}", "rtl": null, }, 1, ], [ - "xg05aa4-B", + "x1uh2x5g-B", { - "ltr": "@keyframes xg05aa4-B{to{transform:rotate(1turn);}}", + "ltr": "@keyframes x1uh2x5g-B{to{transform:rotate(1turn);}}", "rtl": null, }, 1, ], [ - "x181cfca-B", + "xk6fz2t-B", { - "ltr": "@keyframes x181cfca-B{90%, 100%{transform:scale(2);opacity:0;}}", + "ltr": "@keyframes xk6fz2t-B{90%, 100%{transform:scale(2);opacity:0;}}", "rtl": null, }, 1, ], [ - "xxrebcq-B", + "x13kz0yu-B", { - "ltr": "@keyframes xxrebcq-B{0%, 100%{opacity:1;}50%{opacity:.5;}}", + "ltr": "@keyframes x13kz0yu-B{0%, 100%{opacity:1;}50%{opacity:.5;}}", "rtl": null, }, 1, ], [ - "x115uvry-B", + "xtacmzc-B", { - "ltr": "@keyframes x115uvry-B{50%{transform:translateY(-25%);}}", + "ltr": "@keyframes xtacmzc-B{50%{transform:translateY(-25%);}}", "rtl": null, }, 1, ], [ - "x6uoklk-B", + "xmu8adp-B", { - "ltr": "@keyframes x6uoklk-B{25%{transform:translateY(-20%);}40%{transform:translateY(-3%);}0%, 60%, 100%{transform:translateY(0);}}", + "ltr": "@keyframes xmu8adp-B{25%{transform:translateY(-20%);}40%{transform:translateY(-3%);}0%, 60%, 100%{transform:translateY(0);}}", "rtl": null, }, 1, ], [ - "x1im4pvq-B", + "x1wtl5zh-B", { - "ltr": "@keyframes x1im4pvq-B{50%{transform:scale(.9,.9);}}", + "ltr": "@keyframes x1wtl5zh-B{50%{transform:scale(.9,.9);}}", "rtl": null, }, 1, @@ -259,7 +259,7 @@ exports[`commonJS results of exported styles and variables animationNames.stylex [ "x1p4jv38", { - "ltr": ":root{--xwgfw4z:x1k9onmz-B;--xwpxwog:x1kxsuvo-B;--x1mrv0ld:xyy64rv-B;--x1f9mpsk:x1arqdfb-B;--x1dlahej:xyzp8ol-B;--xchc88h:xn063h7-B;--x1wwe1u9:xxlu59e-B;--xojb453:xxlu59e-B;--x1erxhtw:x1x4ycoi-B;--x2p2omt:x11eigc3-B;--x1lyv700:x1257kvv-B;--x1dhg8ry:x1vfyroa-B;--x14d2ijb:xcz5fu3-B;--x1r6uxce:x1q1bizk-B;--x1o3zfci:x1otimfv-B;--xhf4ud:x1ktabv6-B;--x7jv0fk:xg05aa4-B;--x1x4v7e3:x181cfca-B;--xg5no4m:xxrebcq-B;--x7mxyyy:x115uvry-B;--xs1cbdk:x6uoklk-B;--x1gf7j19:x1im4pvq-B;}@media (prefers-color-scheme: dark){:root{--xwpxwog:x1xxzh6k-B;--x1f9mpsk:x1mpipw3-B;}}", + "ltr": ":root{--xwgfw4z:x1wv65fh-B;--xwpxwog:x3cospo-B;--x1mrv0ld:x1mi9bte-B;--x1f9mpsk:xd93vs1-B;--x1dlahej:x1gdf4cp-B;--xchc88h:x1uvjygu-B;--x1wwe1u9:xyz4r9t-B;--xojb453:xyz4r9t-B;--x1erxhtw:x1qkfcoh-B;--x2p2omt:x1c1el34-B;--x1lyv700:x5q0om7-B;--x1dhg8ry:xiaildr-B;--x14d2ijb:x1pzz5b5-B;--x1r6uxce:x2i3tye-B;--x1o3zfci:x1f21ubi-B;--xhf4ud:xyj5ijk-B;--x7jv0fk:x1uh2x5g-B;--x1x4v7e3:xk6fz2t-B;--xg5no4m:x13kz0yu-B;--x7mxyyy:xtacmzc-B;--xs1cbdk:xmu8adp-B;--x1gf7j19:x1wtl5zh-B;}@media (prefers-color-scheme: dark){:root{--xwpxwog:x1xhkb8m-B;--x1f9mpsk:x18q36hy-B;}}", }, 0, ], @@ -283,141 +283,141 @@ import './easings.stylex'; import { easings } from './easings.stylex'; export const animations = { fadeIn: { - animationName: "x1e7uzqj", - animationDuration: "xjn2r78", - animationTimingFunction: "x1jaj3xw", + animationName: "x3p9t1x", + animationDuration: "xxkxylk", + animationTimingFunction: "x2rebkn", $$css: true }, fadeInBloom: { - animationName: "xouregx", - animationDuration: "xr1sqbx", - animationTimingFunction: "x1jaj3xw", + animationName: "x1jluy61", + animationDuration: "x1c74tu6", + animationTimingFunction: "x2rebkn", $$css: true }, fadeOut: { - animationName: "x17ib22e", - animationDuration: "xjn2r78", - animationTimingFunction: "x1jaj3xw", + animationName: "xtul1er", + animationDuration: "xxkxylk", + animationTimingFunction: "x2rebkn", $$css: true }, fadeOutBloom: { - animationName: "xs1wh3q", - animationDuration: "xr1sqbx", - animationTimingFunction: "x1jaj3xw", + animationName: "xs9yh5e", + animationDuration: "x1c74tu6", + animationTimingFunction: "x2rebkn", $$css: true }, scaleUp: { - animationName: "xr5vxic", - animationDuration: "xjn2r78", - animationTimingFunction: "x1jaj3xw", + animationName: "x6fat4", + animationDuration: "xxkxylk", + animationTimingFunction: "x2rebkn", $$css: true }, scaleDown: { - animationName: "xfzsy10", - animationDuration: "xjn2r78", - animationTimingFunction: "x1jaj3xw", + animationName: "xik3923", + animationDuration: "xxkxylk", + animationTimingFunction: "x2rebkn", $$css: true }, slideOutUp: { - animationName: "x1nekqei", - animationDuration: "xjn2r78", - animationTimingFunction: "x1jaj3xw", + animationName: "xkk4jzx", + animationDuration: "xxkxylk", + animationTimingFunction: "x2rebkn", $$css: true }, slideOutDown: { - animationName: "x186wq5o", - animationDuration: "xjn2r78", - animationTimingFunction: "x1jaj3xw", + animationName: "xkqocqf", + animationDuration: "xxkxylk", + animationTimingFunction: "x2rebkn", $$css: true }, slideOutRight: { - animationName: "x1dkl1nl", - animationDuration: "xjn2r78", - animationTimingFunction: "x1jaj3xw", + animationName: "x1jpkbm0", + animationDuration: "xxkxylk", + animationTimingFunction: "x2rebkn", $$css: true }, slideOutLeft: { - animationName: "x1063579", - animationDuration: "xjn2r78", - animationTimingFunction: "x1jaj3xw", + animationName: "xic7rct", + animationDuration: "xxkxylk", + animationTimingFunction: "x2rebkn", $$css: true }, slideInUp: { - animationName: "x1uwpmkr", - animationDuration: "xjn2r78", - animationTimingFunction: "x1jaj3xw", + animationName: "x1enzhaa", + animationDuration: "xxkxylk", + animationTimingFunction: "x2rebkn", $$css: true }, slideInDown: { - animationName: "x1nkiqzr", - animationDuration: "xjn2r78", - animationTimingFunction: "x1jaj3xw", + animationName: "xcc5dou", + animationDuration: "xxkxylk", + animationTimingFunction: "x2rebkn", $$css: true }, slideInRight: { - animationName: "xyfzfnz", - animationDuration: "xjn2r78", - animationTimingFunction: "x1jaj3xw", + animationName: "xchojtd", + animationDuration: "xxkxylk", + animationTimingFunction: "x2rebkn", $$css: true }, slideInLeft: { - animationName: "x9q7634", - animationDuration: "xjn2r78", - animationTimingFunction: "x1jaj3xw", + animationName: "x4jw8wk", + animationDuration: "xxkxylk", + animationTimingFunction: "x2rebkn", $$css: true }, shakeX: { - animationName: "xg7j38f", - animationDuration: "xsutpfk", - animationTimingFunction: "x13zr6nu", + animationName: "x11muyh7", + animationDuration: "x7v9bd0", + animationTimingFunction: "xdd0vbd", $$css: true }, shakeY: { - animationName: "xdv72og", - animationDuration: "xsutpfk", - animationTimingFunction: "x13zr6nu", + animationName: "x8incjk", + animationDuration: "x7v9bd0", + animationTimingFunction: "xdd0vbd", $$css: true }, spin: { - animationName: "x1xgyr5k", - animationDuration: "xr1sqbx", - animationTimingFunction: "x1dpy7hk", - animationIterationCount: "x199a7fm", + animationName: "x1agzdf0", + animationDuration: "x1c74tu6", + animationTimingFunction: "x1esw782", + animationIterationCount: "xa4qsjk", $$css: true }, ping: { - animationName: "x1hm180o", - animationDuration: "x1h91mcd", - animationTimingFunction: "xlmp80q", - animationIterationCount: "x199a7fm", + animationName: "xrsn023", + animationDuration: "xz5h9r3", + animationTimingFunction: "x1yce85n", + animationIterationCount: "xa4qsjk", $$css: true }, blink: { - animationName: "x10a18u5", - animationDuration: "x1syrmet", - animationTimingFunction: "xlmp80q", - animationIterationCount: "x199a7fm", + animationName: "x14z51v8", + animationDuration: "x1q3qbx4", + animationTimingFunction: "x1yce85n", + animationIterationCount: "xa4qsjk", $$css: true }, float: { - animationName: "x8uxa90", - animationDuration: "xkwh45y", - animationTimingFunction: "x1n52m4t", - animationIterationCount: "x199a7fm", + animationName: "x16hxodu", + animationDuration: "x7t6ubo", + animationTimingFunction: "x1hfssnz", + animationIterationCount: "xa4qsjk", $$css: true }, bounce: { - animationName: "x1kuetrw", - animationDuration: "xr1sqbx", - animationTimingFunction: "x1v5afbn", - animationIterationCount: "x199a7fm", + animationName: "x1dnw425", + animationDuration: "x1c74tu6", + animationTimingFunction: "x10326v5", + animationIterationCount: "xa4qsjk", $$css: true }, pulse: { - animationName: "x350haf", - animationDuration: "xr1sqbx", - animationTimingFunction: "xlmp80q", - animationIterationCount: "x199a7fm", + animationName: "x1gfcmw4", + animationDuration: "x1c74tu6", + animationTimingFunction: "x1yce85n", + animationIterationCount: "xa4qsjk", $$css: true } };" @@ -426,281 +426,281 @@ export const animations = { exports[`commonJS results of exported styles and variables animations.stylex.js 2`] = ` [ [ - "x1e7uzqj", + "x3p9t1x", { - "ltr": ".x1e7uzqj{animation-name:var(--xwgfw4z)}", + "ltr": ".x3p9t1x{animation-name:var(--xwgfw4z)}", "rtl": null, }, 3000, ], [ - "xjn2r78", + "xxkxylk", { - "ltr": ".xjn2r78{animation-duration:.5s}", + "ltr": ".xxkxylk{animation-duration:.5s}", "rtl": null, }, 3000, ], [ - "x1jaj3xw", + "x2rebkn", { - "ltr": ".x1jaj3xw{animation-timing-function:var(--x1fbo7zi)}", + "ltr": ".x2rebkn{animation-timing-function:var(--x1fbo7zi)}", "rtl": null, }, 3000, ], [ - "xouregx", + "x1jluy61", { - "ltr": ".xouregx{animation-name:var(--xwpxwog)}", + "ltr": ".x1jluy61{animation-name:var(--xwpxwog)}", "rtl": null, }, 3000, ], [ - "xr1sqbx", + "x1c74tu6", { - "ltr": ".xr1sqbx{animation-duration:2s}", + "ltr": ".x1c74tu6{animation-duration:2s}", "rtl": null, }, 3000, ], [ - "x17ib22e", + "xtul1er", { - "ltr": ".x17ib22e{animation-name:var(--x1mrv0ld)}", + "ltr": ".xtul1er{animation-name:var(--x1mrv0ld)}", "rtl": null, }, 3000, ], [ - "xs1wh3q", + "xs9yh5e", { - "ltr": ".xs1wh3q{animation-name:var(--x1f9mpsk)}", + "ltr": ".xs9yh5e{animation-name:var(--x1f9mpsk)}", "rtl": null, }, 3000, ], [ - "xr5vxic", + "x6fat4", { - "ltr": ".xr5vxic{animation-name:var(--x1dlahej)}", + "ltr": ".x6fat4{animation-name:var(--x1dlahej)}", "rtl": null, }, 3000, ], [ - "xfzsy10", + "xik3923", { - "ltr": ".xfzsy10{animation-name:var(--xchc88h)}", + "ltr": ".xik3923{animation-name:var(--xchc88h)}", "rtl": null, }, 3000, ], [ - "x1nekqei", + "xkk4jzx", { - "ltr": ".x1nekqei{animation-name:var(--x1wwe1u9)}", + "ltr": ".xkk4jzx{animation-name:var(--x1wwe1u9)}", "rtl": null, }, 3000, ], [ - "x186wq5o", + "xkqocqf", { - "ltr": ".x186wq5o{animation-name:var(--xojb453)}", + "ltr": ".xkqocqf{animation-name:var(--xojb453)}", "rtl": null, }, 3000, ], [ - "x1dkl1nl", + "x1jpkbm0", { - "ltr": ".x1dkl1nl{animation-name:var(--x1erxhtw)}", + "ltr": ".x1jpkbm0{animation-name:var(--x1erxhtw)}", "rtl": null, }, 3000, ], [ - "x1063579", + "xic7rct", { - "ltr": ".x1063579{animation-name:var(--x2p2omt)}", + "ltr": ".xic7rct{animation-name:var(--x2p2omt)}", "rtl": null, }, 3000, ], [ - "x1uwpmkr", + "x1enzhaa", { - "ltr": ".x1uwpmkr{animation-name:var(--x1lyv700)}", + "ltr": ".x1enzhaa{animation-name:var(--x1lyv700)}", "rtl": null, }, 3000, ], [ - "x1nkiqzr", + "xcc5dou", { - "ltr": ".x1nkiqzr{animation-name:var(--x1dhg8ry)}", + "ltr": ".xcc5dou{animation-name:var(--x1dhg8ry)}", "rtl": null, }, 3000, ], [ - "xyfzfnz", + "xchojtd", { - "ltr": ".xyfzfnz{animation-name:var(--x14d2ijb)}", + "ltr": ".xchojtd{animation-name:var(--x14d2ijb)}", "rtl": null, }, 3000, ], [ - "x9q7634", + "x4jw8wk", { - "ltr": ".x9q7634{animation-name:var(--x1r6uxce)}", + "ltr": ".x4jw8wk{animation-name:var(--x1r6uxce)}", "rtl": null, }, 3000, ], [ - "xg7j38f", + "x11muyh7", { - "ltr": ".xg7j38f{animation-name:var(--x1o3zfci)}", + "ltr": ".x11muyh7{animation-name:var(--x1o3zfci)}", "rtl": null, }, 3000, ], [ - "xsutpfk", + "x7v9bd0", { - "ltr": ".xsutpfk{animation-duration:.75s}", + "ltr": ".x7v9bd0{animation-duration:.75s}", "rtl": null, }, 3000, ], [ - "x13zr6nu", + "xdd0vbd", { - "ltr": ".x13zr6nu{animation-timing-function:var(--x1l5m9gu)}", + "ltr": ".xdd0vbd{animation-timing-function:var(--x1l5m9gu)}", "rtl": null, }, 3000, ], [ - "xdv72og", + "x8incjk", { - "ltr": ".xdv72og{animation-name:var(--xhf4ud)}", + "ltr": ".x8incjk{animation-name:var(--xhf4ud)}", "rtl": null, }, 3000, ], [ - "x1xgyr5k", + "x1agzdf0", { - "ltr": ".x1xgyr5k{animation-name:var(--x7jv0fk)}", + "ltr": ".x1agzdf0{animation-name:var(--x7jv0fk)}", "rtl": null, }, 3000, ], [ - "x1dpy7hk", + "x1esw782", { - "ltr": ".x1dpy7hk{animation-timing-function:linear}", + "ltr": ".x1esw782{animation-timing-function:linear}", "rtl": null, }, 3000, ], [ - "x199a7fm", + "xa4qsjk", { - "ltr": ".x199a7fm{animation-iteration-count:infinite}", + "ltr": ".xa4qsjk{animation-iteration-count:infinite}", "rtl": null, }, 3000, ], [ - "x1hm180o", + "xrsn023", { - "ltr": ".x1hm180o{animation-name:var(--x1x4v7e3)}", + "ltr": ".xrsn023{animation-name:var(--x1x4v7e3)}", "rtl": null, }, 3000, ], [ - "x1h91mcd", + "xz5h9r3", { - "ltr": ".x1h91mcd{animation-duration:5s}", + "ltr": ".xz5h9r3{animation-duration:5s}", "rtl": null, }, 3000, ], [ - "xlmp80q", + "x1yce85n", { - "ltr": ".xlmp80q{animation-timing-function:var(--xlr3pze)}", + "ltr": ".x1yce85n{animation-timing-function:var(--xlr3pze)}", "rtl": null, }, 3000, ], [ - "x10a18u5", + "x14z51v8", { - "ltr": ".x10a18u5{animation-name:var(--xg5no4m)}", + "ltr": ".x14z51v8{animation-name:var(--xg5no4m)}", "rtl": null, }, 3000, ], [ - "x1syrmet", + "x1q3qbx4", { - "ltr": ".x1syrmet{animation-duration:1s}", + "ltr": ".x1q3qbx4{animation-duration:1s}", "rtl": null, }, 3000, ], [ - "x8uxa90", + "x16hxodu", { - "ltr": ".x8uxa90{animation-name:var(--x7mxyyy)}", + "ltr": ".x16hxodu{animation-name:var(--x7mxyyy)}", "rtl": null, }, 3000, ], [ - "xkwh45y", + "x7t6ubo", { - "ltr": ".xkwh45y{animation-duration:3s}", + "ltr": ".x7t6ubo{animation-duration:3s}", "rtl": null, }, 3000, ], [ - "x1n52m4t", + "x1hfssnz", { - "ltr": ".x1n52m4t{animation-timing-function:var(--xgqmozd)}", + "ltr": ".x1hfssnz{animation-timing-function:var(--xgqmozd)}", "rtl": null, }, 3000, ], [ - "x1kuetrw", + "x1dnw425", { - "ltr": ".x1kuetrw{animation-name:var(--xs1cbdk)}", + "ltr": ".x1dnw425{animation-name:var(--xs1cbdk)}", "rtl": null, }, 3000, ], [ - "x1v5afbn", + "x10326v5", { - "ltr": ".x1v5afbn{animation-timing-function:var(--xo3wfrc)}", + "ltr": ".x10326v5{animation-timing-function:var(--xo3wfrc)}", "rtl": null, }, 3000, ], [ - "x350haf", + "x1gfcmw4", { - "ltr": ".x350haf{animation-name:var(--x1gf7j19)}", + "ltr": ".x1gfcmw4{animation-name:var(--x1gf7j19)}", "rtl": null, }, 3000, diff --git a/packages/open-props/__tests__/open-props-compile-test.js b/packages/open-props/__tests__/open-props-compile-test.js index ff3457e1..b3c1c0b0 100644 --- a/packages/open-props/__tests__/open-props-compile-test.js +++ b/packages/open-props/__tests__/open-props-compile-test.js @@ -45,7 +45,6 @@ describe('commonJS results of exported styles and variables', () => { const source = fs.readFileSync(filename, 'utf8'); const { code, metadata } = transform(source, { dev: false, - stylexSheetName: 'stylex.css', filename: filename, }); diff --git a/packages/rollup-plugin/__tests__/index-test.js b/packages/rollup-plugin/__tests__/index-test.js index 09f37ec0..0af49ac4 100644 --- a/packages/rollup-plugin/__tests__/index-test.js +++ b/packages/rollup-plugin/__tests__/index-test.js @@ -61,23 +61,23 @@ describe('rollup-plugin-stylex', () => { " @layer priority1, priority2, priority3, priority4; @layer priority1{ - @keyframes x11gtny7-B{0%{opacity:.25;}100%{opacity:1;}} + @keyframes xgnty7z-B{0%{opacity:.25;}100%{opacity:1;}} } @layer priority2{ - .x1kflwvg:hover{background:red} + .x1oz5o6v:hover{background:red} } @layer priority3{ - .x1nrqb13{animation-name:x11gtny7-B} - .xntgbld{display:block} - .x1c4r43l{display:flex} - .x1wdx05y{display:inline} - .xo3gju4{margin-inline-start:10px} + .xeuoslp{animation-name:xgnty7z-B} + .x1lliihq{display:block} + .x78zum5{display:flex} + .xt0psk2{display:inline} + .x1hm9lzh{margin-inline-start:10px} } @layer priority4{ - .x1je5kxa{height:500px} - .x1h9ru99{margin-top:99px} - .x6mlivy{width:100%} - .x1u78jha{width:50%} + .x1egiwwb{height:500px} + .xlrshdv{margin-top:99px} + .xh8yej3{width:100%} + .x3hqpx7{width:50%} }" `); @@ -95,8 +95,8 @@ describe('rollup-plugin-stylex', () => { var styles$2 = { bar: { - display: "xntgbld", - width: "x6mlivy", + display: "x1lliihq", + width: "xh8yej3", $$css: true } }; @@ -112,9 +112,9 @@ var styles$2 = { const styles$1 = { baz: { - display: "x1wdx05y", - height: "x1je5kxa", - width: "x1u78jha", + display: "xt0psk2", + height: "x1egiwwb", + width: "x3hqpx7", $$css: true } }; @@ -130,14 +130,14 @@ const styles$1 = { var styles = { foo: { - animationName: "x1nrqb13", - display: "x1c4r43l", - marginInlineStart: "xo3gju4", + animationName: "xeuoslp", + display: "x78zum5", + marginInlineStart: "x1hm9lzh", marginLeft: null, marginRight: null, - marginTop: "x1h9ru99", - height: "x1je5kxa", - ":hover_background": "x1kflwvg", + marginTop: "xlrshdv", + height: "x1egiwwb", + ":hover_background": "x1oz5o6v", ":hover_backgroundAttachment": null, ":hover_backgroundClip": null, ":hover_backgroundColor": null, @@ -164,7 +164,6 @@ export { App as default }; it('preserves stylex.inject calls and does not extract CSS', async () => { const { css, js } = await runStylex({ dev: true, - fileName: 'stylex.css', }); expect(css).toBeUndefined(); @@ -181,13 +180,13 @@ export { App as default }; * */ -stylex.inject(".xntgbld{display:block}", 3000); -stylex.inject(".x6mlivy{width:100%}", 4000); +stylex.inject(".x1lliihq{display:block}", 3000); +stylex.inject(".xh8yej3{width:100%}", 4000); var styles$2 = { bar: { "otherStyles__styles.bar": "otherStyles__styles.bar", - display: "xntgbld", - width: "x6mlivy", + display: "x1lliihq", + width: "xh8yej3", $$css: true } }; @@ -201,15 +200,15 @@ var styles$2 = { * */ -stylex.inject(".x1wdx05y{display:inline}", 3000); -stylex.inject(".x1je5kxa{height:500px}", 4000); -stylex.inject(".x1u78jha{width:50%}", 4000); +stylex.inject(".xt0psk2{display:inline}", 3000); +stylex.inject(".x1egiwwb{height:500px}", 4000); +stylex.inject(".x3hqpx7{width:50%}", 4000); const styles$1 = { baz: { "npmStyles__styles.baz": "npmStyles__styles.baz", - display: "x1wdx05y", - height: "x1je5kxa", - width: "x1u78jha", + display: "xt0psk2", + height: "x1egiwwb", + width: "x3hqpx7", $$css: true } }; @@ -223,24 +222,24 @@ const styles$1 = { * */ -stylex.inject("@keyframes x11gtny7-B{0%{opacity:.25;}100%{opacity:1;}}", 1); -stylex.inject(".x1nrqb13{animation-name:x11gtny7-B}", 3000); -stylex.inject(".x1c4r43l{display:flex}", 3000); -stylex.inject(".xo3gju4{margin-inline-start:10px}", 3000); -stylex.inject(".x1h9ru99{margin-top:99px}", 4000); -stylex.inject(".x1je5kxa{height:500px}", 4000); -stylex.inject(".x1kflwvg:hover{background:red}", 1130); +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); var styles = { foo: { "index__styles.foo": "index__styles.foo", - animationName: "x1nrqb13", - display: "x1c4r43l", - marginInlineStart: "xo3gju4", + animationName: "xeuoslp", + display: "x78zum5", + marginInlineStart: "x1hm9lzh", marginLeft: null, marginRight: null, - marginTop: "x1h9ru99", - height: "x1je5kxa", - ":hover_background": "x1kflwvg", + marginTop: "xlrshdv", + height: "x1egiwwb", + ":hover_background": "x1oz5o6v", ":hover_backgroundAttachment": null, ":hover_backgroundClip": null, ":hover_backgroundColor": null, diff --git a/packages/rollup-plugin/src/index.js b/packages/rollup-plugin/src/index.js index efbef0cd..a3277027 100644 --- a/packages/rollup-plugin/src/index.js +++ b/packages/rollup-plugin/src/index.js @@ -20,6 +20,7 @@ const IS_DEV_ENV = module.exports = function stylexPlugin({ dev = IS_DEV_ENV, + runtimeInjection, fileName = 'stylex.css', babelConfig: { plugins = [], presets = [] } = {}, ...options @@ -58,7 +59,7 @@ module.exports = function stylexPlugin({ ? flowSyntaxPlugin : typescriptSyntaxPlugin, jsxSyntaxPlugin, - [stylexBabelPlugin, { dev, stylexSheetName: fileName, ...options }], + [stylexBabelPlugin, { dev, runtimeInjection, ...options }], ], }); diff --git a/packages/shared/__tests__/flatten-raw-style-objects/legacy-shorthand-expansion-test.js b/packages/shared/__tests__/flatten-raw-style-objects/legacy-shorthand-expansion-test.js index 2f8b85b7..b3ab168d 100644 --- a/packages/shared/__tests__/flatten-raw-style-objects/legacy-shorthand-expansion-test.js +++ b/packages/shared/__tests__/flatten-raw-style-objects/legacy-shorthand-expansion-test.js @@ -17,6 +17,7 @@ import { flattenRawStyleObject } from '../../src/preprocess-rules/flatten-raw-st const options = { classNamePrefix: 'x', styleResolution: 'legacy-expand-shorthands', + runtimeInjection: false, dev: false, test: false, }; diff --git a/packages/shared/__tests__/gen-css-test.js b/packages/shared/__tests__/gen-css-test.js index e615cb1b..c8e0fb7c 100644 --- a/packages/shared/__tests__/gen-css-test.js +++ b/packages/shared/__tests__/gen-css-test.js @@ -13,6 +13,7 @@ const options = { classNamePrefix: 'x', styleResolution: 'legacy-expand-shorthands', dev: false, + runtimeInjection: false, test: false, }; diff --git a/packages/shared/src/common-types.js b/packages/shared/src/common-types.js index 93df3337..d52734d0 100644 --- a/packages/shared/src/common-types.js +++ b/packages/shared/src/common-types.js @@ -44,9 +44,7 @@ export type FlatCompiledStyles = $ReadOnly<{ export type StyleXOptions = { dev: boolean, test: boolean, - moduleSystem?: 'haste' | 'commonjs', - rootDir?: string | void, - stylexSheetName?: string | void, + runtimeInjection: boolean, classNamePrefix: string, definedStylexCSSVariables?: { [key: string]: mixed }, styleResolution: diff --git a/packages/shared/src/convert-to-className.js b/packages/shared/src/convert-to-className.js index fc379197..f8dd0cc5 100644 --- a/packages/shared/src/convert-to-className.js +++ b/packages/shared/src/convert-to-className.js @@ -26,10 +26,7 @@ export function convertStyleToClassName( objEntry: [string, TRawValue], pseudos: $ReadOnlyArray, atRules: $ReadOnlyArray, - { - stylexSheetName = '<>', - classNamePrefix = 'x', - }: StyleXOptions = defaultOptions, + { classNamePrefix = 'x' }: StyleXOptions = defaultOptions, ): StyleRule { const [key, rawValue] = objEntry; const dashedKey = dashify(key); @@ -50,8 +47,9 @@ export function convertStyleToClassName( ? dashedKey + value.join(', ') + modifierHashString : dashedKey + value + modifierHashString; - const className = - classNamePrefix + createHash(stylexSheetName + stringToHash); + // NOTE: '<>' is used to keep existing hashes stable. + // This should be removed in a future version. + const className = classNamePrefix + createHash('<>' + stringToHash); const cssRules = generateRule(className, dashedKey, value, pseudos, atRules); diff --git a/packages/shared/src/stylex-keyframes.js b/packages/shared/src/stylex-keyframes.js index 24d03826..357eb3f2 100644 --- a/packages/shared/src/stylex-keyframes.js +++ b/packages/shared/src/stylex-keyframes.js @@ -34,7 +34,7 @@ export default function styleXKeyframes( frames: { +[string]: { +[string]: string | number } }, options: StyleXOptions = defaultOptions, ): [string, InjectableStyle] { - const { stylexSheetName = '<>', classNamePrefix = 'x' } = options; + const { classNamePrefix = 'x' } = options; const expandedObject = objMap(frames, (frame) => Pipe.create(frame) .pipe((frame) => expandFrameShorthands(frame, options)) @@ -53,9 +53,9 @@ export default function styleXKeyframes( const ltrString = constructKeyframesObj(ltrStyles); const rtlString = constructKeyframesObj(rtlStyles); - // This extra `-B` is kept for some idiosyncratic legacy compatibility for now. - const animationName = - classNamePrefix + createHash(stylexSheetName + ltrString) + '-B'; + // NOTE: '<>' and '-B' is used to keep existing hashes stable. + // They should be removed in a future version. + const animationName = classNamePrefix + createHash('<>' + ltrString) + '-B'; const ltr = `@keyframes ${animationName}{${ltrString}}`; const rtl = diff --git a/packages/shared/src/utils/default-options.js b/packages/shared/src/utils/default-options.js index f144308c..bfb2abb6 100644 --- a/packages/shared/src/utils/default-options.js +++ b/packages/shared/src/utils/default-options.js @@ -24,6 +24,7 @@ import type { StyleXOptions } from '../common-types'; export const defaultOptions: StyleXOptions = { dev: false, + runtimeInjection: false, test: false, classNamePrefix: 'x', styleResolution: 'application-order', diff --git a/packages/webpack-plugin/src/index.js b/packages/webpack-plugin/src/index.js index cb9527dc..e683e8b2 100644 --- a/packages/webpack-plugin/src/index.js +++ b/packages/webpack-plugin/src/index.js @@ -46,6 +46,7 @@ class StylexPlugin { constructor({ dev = IS_DEV_ENV, + runtimeInjection, appendTo, filename = appendTo == null ? 'stylex.css' : undefined, stylexImports = ['stylex', '@stylexjs/stylex'], @@ -59,7 +60,7 @@ class StylexPlugin { this.stylexImports = stylexImports; this.babelPlugin = [ stylexBabelPlugin, - { dev, stylexSheetName: '<>', ...options }, + { dev, runtimeInjection, ...options }, ]; }