diff --git a/apps/docs/package.json b/apps/docs/package.json index a49cea174..60ec4b4ca 100644 --- a/apps/docs/package.json +++ b/apps/docs/package.json @@ -23,7 +23,7 @@ "@docusaurus/preset-classic": "2.4.1", "@mdx-js/react": "^1.6.22", "@orama/plugin-docusaurus": "^1.2.4", - "@stylexjs/stylex": "0.2.0-beta.25", + "@stylexjs/stylex": "0.2.0-beta.26", "clsx": "^1.2.1", "react": "^17.0.2", "react-dom": "^17.0.2", @@ -31,7 +31,7 @@ }, "devDependencies": { "@babel/eslint-parser": "^7.22.15", - "@stylexjs/babel-plugin": "0.2.0-beta.25", + "@stylexjs/babel-plugin": "0.2.0-beta.26", "clean-css": "^5.3.2", "eslint": "^8.19.0", "eslint-config-airbnb": "^19.0.4", diff --git a/apps/nextjs-example/package.json b/apps/nextjs-example/package.json index 99f557ab8..3e50ea666 100644 --- a/apps/nextjs-example/package.json +++ b/apps/nextjs-example/package.json @@ -10,17 +10,17 @@ "lint": "next lint" }, "dependencies": { - "@stylexjs/stylex": "^0.2.0-beta.25", - "@stylexjs/open-props": "^0.2.0-beta.25", + "@stylexjs/stylex": "^0.2.0-beta.26", + "@stylexjs/open-props": "^0.2.0-beta.26", "bright": "^0.8.4", "react": "^18", "react-dom": "^18", "next": "14.0.1" }, "devDependencies": { - "@stylexjs/babel-plugin": "^0.2.0-beta.25", - "@stylexjs/eslint-plugin": "^0.2.0-beta.25", - "@stylexjs/nextjs-plugin": "^0.2.0-beta.25", + "@stylexjs/babel-plugin": "^0.2.0-beta.26", + "@stylexjs/eslint-plugin": "^0.2.0-beta.26", + "@stylexjs/nextjs-plugin": "^0.2.0-beta.26", "typescript": "^5", "@types/node": "^20", "@types/react": "^18", diff --git a/apps/rollup-example/package.json b/apps/rollup-example/package.json index 2d568a757..2bbcb09ef 100644 --- a/apps/rollup-example/package.json +++ b/apps/rollup-example/package.json @@ -1,6 +1,6 @@ { "name": "rollup-example", - "version": "0.2.0-beta.25", + "version": "0.2.0-beta.26", "description": "A simple rollup example to test stylexjs/rollup-plugin", "main": "index.js", "scripts": { @@ -9,10 +9,10 @@ }, "license": "MIT", "dependencies": { - "@stylexjs/stylex": "0.2.0-beta.25" + "@stylexjs/stylex": "0.2.0-beta.26" }, "devDependencies": { "rollup": "^4.0.2", - "@stylexjs/rollup-plugin": "0.2.0-beta.25" + "@stylexjs/rollup-plugin": "0.2.0-beta.26" } } diff --git a/apps/webpack-example/package.json b/apps/webpack-example/package.json index 617118bd7..167a5e229 100644 --- a/apps/webpack-example/package.json +++ b/apps/webpack-example/package.json @@ -1,6 +1,6 @@ { "name": "webpack-example", - "version": "0.2.0-beta.25", + "version": "0.2.0-beta.26", "description": "A simple rollup example to test stylexjs/rollup-plugin", "main": "index.js", "scripts": { @@ -9,10 +9,10 @@ }, "license": "MIT", "dependencies": { - "@stylexjs/stylex": "0.2.0-beta.25" + "@stylexjs/stylex": "0.2.0-beta.26" }, "devDependencies": { - "@stylexjs/webpack-plugin": "0.2.0-beta.25", + "@stylexjs/webpack-plugin": "0.2.0-beta.26", "html-webpack-plugin": "^5.5.3", "webpack": "^5.75.0", "webpack-cli": "^5.0.0" diff --git a/package-lock.json b/package-lock.json index a0e60a3ec..ed70bfedb 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "stylex-monorepo", - "version": "0.2.0-beta.25", + "version": "0.2.0-beta.26", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "stylex-monorepo", - "version": "0.2.0-beta.25", + "version": "0.2.0-beta.26", "license": "MIT", "workspaces": [ "packages/shared", @@ -57,7 +57,7 @@ "@docusaurus/preset-classic": "2.4.1", "@mdx-js/react": "^1.6.22", "@orama/plugin-docusaurus": "^1.2.4", - "@stylexjs/stylex": "0.2.0-beta.25", + "@stylexjs/stylex": "0.2.0-beta.26", "clsx": "^1.2.1", "react": "^17.0.2", "react-dom": "^17.0.2", @@ -65,7 +65,7 @@ }, "devDependencies": { "@babel/eslint-parser": "^7.22.15", - "@stylexjs/babel-plugin": "0.2.0-beta.25", + "@stylexjs/babel-plugin": "0.2.0-beta.26", "clean-css": "^5.3.2", "eslint": "^8.19.0", "eslint-config-airbnb": "^19.0.4", @@ -146,17 +146,17 @@ "name": "next-example", "version": "0.1.0", "dependencies": { - "@stylexjs/open-props": "^0.2.0-beta.25", - "@stylexjs/stylex": "^0.2.0-beta.25", + "@stylexjs/open-props": "^0.2.0-beta.26", + "@stylexjs/stylex": "^0.2.0-beta.26", "bright": "^0.8.4", "next": "14.0.1", "react": "^18", "react-dom": "^18" }, "devDependencies": { - "@stylexjs/babel-plugin": "^0.2.0-beta.25", - "@stylexjs/eslint-plugin": "^0.2.0-beta.25", - "@stylexjs/nextjs-plugin": "^0.2.0-beta.25", + "@stylexjs/babel-plugin": "^0.2.0-beta.26", + "@stylexjs/eslint-plugin": "^0.2.0-beta.26", + "@stylexjs/nextjs-plugin": "^0.2.0-beta.26", "@types/node": "^20", "@types/react": "^18", "@types/react-dom": "^18", @@ -1090,24 +1090,24 @@ } }, "apps/rollup-example": { - "version": "0.2.0-beta.25", + "version": "0.2.0-beta.26", "license": "MIT", "dependencies": { - "@stylexjs/stylex": "0.2.0-beta.25" + "@stylexjs/stylex": "0.2.0-beta.26" }, "devDependencies": { - "@stylexjs/rollup-plugin": "0.2.0-beta.25", + "@stylexjs/rollup-plugin": "0.2.0-beta.26", "rollup": "^4.0.2" } }, "apps/webpack-example": { - "version": "0.2.0-beta.25", + "version": "0.2.0-beta.26", "license": "MIT", "dependencies": { - "@stylexjs/stylex": "0.2.0-beta.25" + "@stylexjs/stylex": "0.2.0-beta.26" }, "devDependencies": { - "@stylexjs/webpack-plugin": "0.2.0-beta.25", + "@stylexjs/webpack-plugin": "0.2.0-beta.26", "html-webpack-plugin": "^5.5.3", "webpack": "^5.75.0", "webpack-cli": "^5.0.0" @@ -27936,10 +27936,10 @@ }, "packages/babel-plugin": { "name": "@stylexjs/babel-plugin", - "version": "0.2.0-beta.25", + "version": "0.2.0-beta.26", "license": "MIT", "dependencies": { - "@stylexjs/shared": "0.2.0-beta.25" + "@stylexjs/shared": "0.2.0-beta.26" }, "devDependencies": { "ts-node": "^10.8.1" @@ -27952,18 +27952,18 @@ }, "packages/dev-runtime": { "name": "@stylexjs/dev-runtime", - "version": "0.2.0-beta.25", + "version": "0.2.0-beta.26", "license": "MIT", "workspaces": [ "packages/*" ], "dependencies": { - "@stylexjs/shared": "0.2.0-beta.25" + "@stylexjs/shared": "0.2.0-beta.26" } }, "packages/eslint-plugin": { "name": "@stylexjs/eslint-plugin", - "version": "0.2.0-beta.25", + "version": "0.2.0-beta.26", "license": "MIT", "devDependencies": { "hermes-eslint": "^0.16.0", @@ -27972,14 +27972,14 @@ }, "packages/nextjs-plugin": { "name": "@stylexjs/nextjs-plugin", - "version": "0.2.0-beta.25", + "version": "0.2.0-beta.26", "license": "MIT", "dependencies": { "@babel/core": "^7.23.2", "@babel/plugin-syntax-flow": "^7.22.5", "@babel/plugin-syntax-jsx": "^7.22.5", "@babel/plugin-syntax-typescript": "^7.22.5", - "@stylexjs/babel-plugin": "^0.2.0-beta.25" + "@stylexjs/babel-plugin": "^0.2.0-beta.26" }, "peerDependencies": { "next": ">=12.0.7" @@ -28054,7 +28054,7 @@ }, "packages/open-props": { "name": "@stylexjs/open-props", - "version": "0.2.0-beta.25", + "version": "0.2.0-beta.26", "license": "MIT", "dependencies": { "css-mediaquery": "^0.1.2", @@ -28063,29 +28063,29 @@ "utility-types": "^3.10.0" }, "devDependencies": { - "@stylexjs/scripts": "0.2.0-beta.25" + "@stylexjs/scripts": "0.2.0-beta.26" } }, "packages/rollup-plugin": { "name": "@stylexjs/rollup-plugin", - "version": "0.2.0-beta.25", + "version": "0.2.0-beta.26", "license": "MIT", "dependencies": { "@babel/core": "^7.16.0", - "@stylexjs/babel-plugin": "0.2.0-beta.25" + "@stylexjs/babel-plugin": "0.2.0-beta.26" }, "devDependencies": { "@babel/preset-env": "^7.16.8", "@rollup/plugin-babel": "^6.0.0", "@rollup/plugin-commonjs": "^25.0.3", "@rollup/plugin-node-resolve": "^15.0.0", - "@stylexjs/stylex": "0.2.0-beta.25", + "@stylexjs/stylex": "0.2.0-beta.26", "rollup": "^3.26.3 || ^4.0.2" } }, "packages/scripts": { "name": "@stylexjs/scripts", - "version": "0.2.0-beta.25", + "version": "0.2.0-beta.26", "license": "MIT", "dependencies": { "flow-api-translator": "0.16.0", @@ -28128,18 +28128,18 @@ }, "packages/shared": { "name": "@stylexjs/shared", - "version": "0.2.0-beta.25", + "version": "0.2.0-beta.26", "license": "MIT", "dependencies": { "postcss-value-parser": "^4.1.0" }, "devDependencies": { - "@stylexjs/scripts": "0.2.0-beta.25" + "@stylexjs/scripts": "0.2.0-beta.26" } }, "packages/stylex": { "name": "@stylexjs/stylex", - "version": "0.2.0-beta.25", + "version": "0.2.0-beta.26", "license": "MIT", "dependencies": { "css-mediaquery": "^0.1.2", @@ -28148,24 +28148,24 @@ "utility-types": "^3.10.0" }, "devDependencies": { - "@stylexjs/scripts": "0.2.0-beta.25" + "@stylexjs/scripts": "0.2.0-beta.26" } }, "packages/webpack-plugin": { "name": "@stylexjs/webpack-plugin", - "version": "0.2.0-beta.25", + "version": "0.2.0-beta.26", "license": "MIT", "dependencies": { "@babel/core": "^7.15.5", "@babel/plugin-syntax-flow": "^7.18.6", "@babel/plugin-syntax-jsx": "^7.14.5", "@babel/plugin-syntax-typescript": "^7.14.5", - "@stylexjs/babel-plugin": "0.2.0-beta.25", + "@stylexjs/babel-plugin": "0.2.0-beta.26", "webpack": "^5.88.2" }, "devDependencies": { "@babel/preset-env": "^7.16.8", - "@stylexjs/stylex": "0.2.0-beta.25", + "@stylexjs/stylex": "0.2.0-beta.26", "babel-loader": "^8.2.2", "memfs": "4.2.0", "webpack-cli": "^5.1.4" @@ -31777,14 +31777,14 @@ "@stylexjs/babel-plugin": { "version": "file:packages/babel-plugin", "requires": { - "@stylexjs/shared": "0.2.0-beta.25", + "@stylexjs/shared": "0.2.0-beta.26", "ts-node": "^10.8.1" } }, "@stylexjs/dev-runtime": { "version": "file:packages/dev-runtime", "requires": { - "@stylexjs/shared": "0.2.0-beta.25" + "@stylexjs/shared": "0.2.0-beta.26" } }, "@stylexjs/eslint-plugin": { @@ -31801,7 +31801,7 @@ "@babel/plugin-syntax-flow": "^7.22.5", "@babel/plugin-syntax-jsx": "^7.22.5", "@babel/plugin-syntax-typescript": "^7.22.5", - "@stylexjs/babel-plugin": "^0.2.0-beta.25" + "@stylexjs/babel-plugin": "^0.2.0-beta.26" }, "dependencies": { "@babel/core": { @@ -31863,7 +31863,7 @@ "@stylexjs/open-props": { "version": "file:packages/open-props", "requires": { - "@stylexjs/scripts": "0.2.0-beta.25", + "@stylexjs/scripts": "0.2.0-beta.26", "css-mediaquery": "^0.1.2", "invariant": "^2.2.4", "styleq": "0.1.3", @@ -31878,8 +31878,8 @@ "@rollup/plugin-babel": "^6.0.0", "@rollup/plugin-commonjs": "^25.0.3", "@rollup/plugin-node-resolve": "^15.0.0", - "@stylexjs/babel-plugin": "0.2.0-beta.25", - "@stylexjs/stylex": "0.2.0-beta.25", + "@stylexjs/babel-plugin": "0.2.0-beta.26", + "@stylexjs/stylex": "0.2.0-beta.26", "rollup": "^3.26.3 || ^4.0.2" } }, @@ -31922,14 +31922,14 @@ "@stylexjs/shared": { "version": "file:packages/shared", "requires": { - "@stylexjs/scripts": "0.2.0-beta.25", + "@stylexjs/scripts": "0.2.0-beta.26", "postcss-value-parser": "^4.1.0" } }, "@stylexjs/stylex": { "version": "file:packages/stylex", "requires": { - "@stylexjs/scripts": "0.2.0-beta.25", + "@stylexjs/scripts": "0.2.0-beta.26", "css-mediaquery": "^0.1.2", "invariant": "^2.2.4", "styleq": "0.1.3", @@ -31944,8 +31944,8 @@ "@babel/plugin-syntax-jsx": "^7.14.5", "@babel/plugin-syntax-typescript": "^7.14.5", "@babel/preset-env": "^7.16.8", - "@stylexjs/babel-plugin": "0.2.0-beta.25", - "@stylexjs/stylex": "0.2.0-beta.25", + "@stylexjs/babel-plugin": "0.2.0-beta.26", + "@stylexjs/stylex": "0.2.0-beta.26", "babel-loader": "^8.2.2", "memfs": "4.2.0", "webpack": "^5.88.2", @@ -39678,11 +39678,11 @@ "next-example": { "version": "file:apps/nextjs-example", "requires": { - "@stylexjs/babel-plugin": "^0.2.0-beta.25", - "@stylexjs/eslint-plugin": "^0.2.0-beta.25", - "@stylexjs/nextjs-plugin": "^0.2.0-beta.25", - "@stylexjs/open-props": "^0.2.0-beta.25", - "@stylexjs/stylex": "^0.2.0-beta.25", + "@stylexjs/babel-plugin": "^0.2.0-beta.26", + "@stylexjs/eslint-plugin": "^0.2.0-beta.26", + "@stylexjs/nextjs-plugin": "^0.2.0-beta.26", + "@stylexjs/open-props": "^0.2.0-beta.26", + "@stylexjs/stylex": "^0.2.0-beta.26", "@types/node": "^20", "@types/react": "^18", "@types/react-dom": "^18", @@ -44970,8 +44970,8 @@ "rollup-example": { "version": "file:apps/rollup-example", "requires": { - "@stylexjs/rollup-plugin": "0.2.0-beta.25", - "@stylexjs/stylex": "0.2.0-beta.25", + "@stylexjs/rollup-plugin": "0.2.0-beta.26", + "@stylexjs/stylex": "0.2.0-beta.26", "rollup": "^4.0.2" } }, @@ -47117,8 +47117,8 @@ "webpack-example": { "version": "file:apps/webpack-example", "requires": { - "@stylexjs/stylex": "0.2.0-beta.25", - "@stylexjs/webpack-plugin": "0.2.0-beta.25", + "@stylexjs/stylex": "0.2.0-beta.26", + "@stylexjs/webpack-plugin": "0.2.0-beta.26", "html-webpack-plugin": "^5.5.3", "webpack": "^5.75.0", "webpack-cli": "^5.0.0" @@ -47213,8 +47213,8 @@ "@docusaurus/preset-classic": "2.4.1", "@mdx-js/react": "^1.6.22", "@orama/plugin-docusaurus": "^1.2.4", - "@stylexjs/babel-plugin": "0.2.0-beta.25", - "@stylexjs/stylex": "0.2.0-beta.25", + "@stylexjs/babel-plugin": "0.2.0-beta.26", + "@stylexjs/stylex": "0.2.0-beta.26", "clean-css": "^5.3.2", "clsx": "^1.2.1", "eslint": "^8.19.0", diff --git a/package.json b/package.json index bf2d0ca60..d4e3134e5 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "stylex-monorepo", - "version": "0.2.0-beta.25", + "version": "0.2.0-beta.26", "license": "MIT", "private": true, "scripts": { diff --git a/packages/babel-plugin/package.json b/packages/babel-plugin/package.json index ad4a03f20..6df7c3037 100644 --- a/packages/babel-plugin/package.json +++ b/packages/babel-plugin/package.json @@ -1,6 +1,6 @@ { "name": "@stylexjs/babel-plugin", - "version": "0.2.0-beta.25", + "version": "0.2.0-beta.26", "description": "StyleX babel plugin.", "main": "lib/index.js", "repository": "https://github.com/facebook/stylex", @@ -12,7 +12,7 @@ "test": "jest" }, "dependencies": { - "@stylexjs/shared": "0.2.0-beta.25" + "@stylexjs/shared": "0.2.0-beta.26" }, "peerDependencies": { "@babel/core": "^7.19.6", diff --git a/packages/dev-runtime/package.json b/packages/dev-runtime/package.json index 53417833c..cf19e1d67 100644 --- a/packages/dev-runtime/package.json +++ b/packages/dev-runtime/package.json @@ -1,6 +1,6 @@ { "name": "@stylexjs/dev-runtime", - "version": "0.2.0-beta.25", + "version": "0.2.0-beta.26", "description": "A development-only package that makes StyleX work entirely at runtime", "main": "lib/index.js", "repository": "https://www.github.com/facebook/stylex", @@ -14,7 +14,7 @@ "packages/*" ], "dependencies": { - "@stylexjs/shared": "0.2.0-beta.25" + "@stylexjs/shared": "0.2.0-beta.26" }, "jest": { "verbose": true, diff --git a/packages/eslint-plugin/package.json b/packages/eslint-plugin/package.json index 87f693143..df9d38498 100644 --- a/packages/eslint-plugin/package.json +++ b/packages/eslint-plugin/package.json @@ -1,6 +1,6 @@ { "name": "@stylexjs/eslint-plugin", - "version": "0.2.0-beta.25", + "version": "0.2.0-beta.26", "description": "StyleX eslint plugin.", "main": "lib/index.js", "repository": "https://github.com/facebook/stylex", diff --git a/packages/nextjs-plugin/package.json b/packages/nextjs-plugin/package.json index bebacc8e8..cbdcc0259 100644 --- a/packages/nextjs-plugin/package.json +++ b/packages/nextjs-plugin/package.json @@ -1,6 +1,6 @@ { "name": "@stylexjs/nextjs-plugin", - "version": "0.2.0-beta.25", + "version": "0.2.0-beta.26", "description": "Next.js plugin for StyleX", "main": "src/index.js", "repository": "https://www.github.com/facebook/stylex", @@ -10,7 +10,7 @@ "@babel/plugin-syntax-flow": "^7.22.5", "@babel/plugin-syntax-jsx": "^7.22.5", "@babel/plugin-syntax-typescript": "^7.22.5", - "@stylexjs/babel-plugin": "^0.2.0-beta.25" + "@stylexjs/babel-plugin": "^0.2.0-beta.26" }, "peerDependencies": { "next": ">=12.0.7" diff --git a/packages/open-props/package.json b/packages/open-props/package.json index f37018024..2300213ab 100644 --- a/packages/open-props/package.json +++ b/packages/open-props/package.json @@ -1,6 +1,6 @@ { "name": "@stylexjs/open-props", - "version": "0.2.0-beta.25", + "version": "0.2.0-beta.26", "description": "A library common values as variables to be used with Stylex.", "exports": { "./lib/animationNames.stylex": "./lib/animationNames.stylex.js", @@ -38,7 +38,7 @@ "utility-types": "^3.10.0" }, "devDependencies": { - "@stylexjs/scripts": "0.2.0-beta.25" + "@stylexjs/scripts": "0.2.0-beta.26" }, "jest": {}, "files": [ diff --git a/packages/rollup-plugin/__tests__/index-test.js b/packages/rollup-plugin/__tests__/index-test.js index 4da35a2c7..879090130 100644 --- a/packages/rollup-plugin/__tests__/index-test.js +++ b/packages/rollup-plugin/__tests__/index-test.js @@ -80,61 +80,76 @@ describe('rollup-plugin-stylex', () => { `); expect(js).toMatchInlineSnapshot(` - "import stylex from 'stylex'; - - // otherStyles.js - - var styles$2 = { - bar: { - display: "xntgbld", - width: "x6mlivy", - $$css: true - } - }; - - // npmStyles.js - - const styles$1 = { - baz: { - display: "x1wdx05y", - height: "x1je5kxa", - width: "x1u78jha", - $$css: true - } - }; - - // index.js - - var styles = { - foo: { - animationName: "x1nrqb13", - display: "x1c4r43l", - marginInlineStart: "xo3gju4", - marginLeft: null, - marginRight: null, - marginTop: "x1h9ru99", - height: "x1je5kxa", - ":hover_background": "x1kflwvg", - ":hover_backgroundAttachment": null, - ":hover_backgroundClip": null, - ":hover_backgroundColor": null, - ":hover_backgroundImage": null, - ":hover_backgroundOrigin": null, - ":hover_backgroundPosition": null, - ":hover_backgroundPositionX": null, - ":hover_backgroundPositionY": null, - ":hover_backgroundRepeat": null, - ":hover_backgroundSize": null, - $$css: true - } - }; - function App() { - return stylex(styles$2.bar, styles.foo, styles$1.baz); - } +"import stylex from 'stylex'; - export { App as default }; - " - `); +/** + * 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. + */ + +var styles$2 = { + bar: { + display: "xntgbld", + width: "x6mlivy", + $$css: true + } +}; + +/** + * 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. + */ + +const styles$1 = { + baz: { + display: "x1wdx05y", + height: "x1je5kxa", + width: "x1u78jha", + $$css: true + } +}; + +/** + * 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. + */ + +var styles = { + foo: { + animationName: "x1nrqb13", + display: "x1c4r43l", + marginInlineStart: "xo3gju4", + marginLeft: null, + marginRight: null, + marginTop: "x1h9ru99", + height: "x1je5kxa", + ":hover_background": "x1kflwvg", + ":hover_backgroundAttachment": null, + ":hover_backgroundClip": null, + ":hover_backgroundColor": null, + ":hover_backgroundImage": null, + ":hover_backgroundOrigin": null, + ":hover_backgroundPosition": null, + ":hover_backgroundPositionX": null, + ":hover_backgroundPositionY": null, + ":hover_backgroundRepeat": null, + ":hover_backgroundSize": null, + $$css: true + } +}; +function App() { + return stylex(styles$2.bar, styles.foo, styles$1.baz); +} + +export { App as default }; +" +`); }); describe('when in dev mode', () => { @@ -147,76 +162,91 @@ describe('rollup-plugin-stylex', () => { expect(css).toBeUndefined(); expect(js).toMatchInlineSnapshot(` - "import stylex from 'stylex'; - - // otherStyles.js - - stylex.inject(".xntgbld{display:block}", 3000); - stylex.inject(".x6mlivy{width:100%}", 4000); - var styles$2 = { - bar: { - "otherStyles__styles.bar": "otherStyles__styles.bar", - display: "xntgbld", - width: "x6mlivy", - $$css: true - } - }; - - // npmStyles.js - - stylex.inject(".x1wdx05y{display:inline}", 3000); - stylex.inject(".x1je5kxa{height:500px}", 4000); - stylex.inject(".x1u78jha{width:50%}", 4000); - const styles$1 = { - baz: { - "npmStyles__styles.baz": "npmStyles__styles.baz", - display: "x1wdx05y", - height: "x1je5kxa", - width: "x1u78jha", - $$css: true - } - }; - - // index.js - - 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); - var styles = { - foo: { - "index__styles.foo": "index__styles.foo", - animationName: "x1nrqb13", - display: "x1c4r43l", - marginInlineStart: "xo3gju4", - marginLeft: null, - marginRight: null, - marginTop: "x1h9ru99", - height: "x1je5kxa", - ":hover_background": "x1kflwvg", - ":hover_backgroundAttachment": null, - ":hover_backgroundClip": null, - ":hover_backgroundColor": null, - ":hover_backgroundImage": null, - ":hover_backgroundOrigin": null, - ":hover_backgroundPosition": null, - ":hover_backgroundPositionX": null, - ":hover_backgroundPositionY": null, - ":hover_backgroundRepeat": null, - ":hover_backgroundSize": null, - $$css: true - } - }; - function App() { - return stylex(styles$2.bar, styles.foo, styles$1.baz); - } - - export { App as default }; - " - `); +"import stylex from 'stylex'; + +/** + * 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. + */ + +stylex.inject(".xntgbld{display:block}", 3000); +stylex.inject(".x6mlivy{width:100%}", 4000); +var styles$2 = { + bar: { + "otherStyles__styles.bar": "otherStyles__styles.bar", + display: "xntgbld", + width: "x6mlivy", + $$css: true + } +}; + +/** + * 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. + */ + +stylex.inject(".x1wdx05y{display:inline}", 3000); +stylex.inject(".x1je5kxa{height:500px}", 4000); +stylex.inject(".x1u78jha{width:50%}", 4000); +const styles$1 = { + baz: { + "npmStyles__styles.baz": "npmStyles__styles.baz", + display: "x1wdx05y", + height: "x1je5kxa", + width: "x1u78jha", + $$css: true + } +}; + +/** + * 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. + */ + +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); +var styles = { + foo: { + "index__styles.foo": "index__styles.foo", + animationName: "x1nrqb13", + display: "x1c4r43l", + marginInlineStart: "xo3gju4", + marginLeft: null, + marginRight: null, + marginTop: "x1h9ru99", + height: "x1je5kxa", + ":hover_background": "x1kflwvg", + ":hover_backgroundAttachment": null, + ":hover_backgroundClip": null, + ":hover_backgroundColor": null, + ":hover_backgroundImage": null, + ":hover_backgroundOrigin": null, + ":hover_backgroundPosition": null, + ":hover_backgroundPositionX": null, + ":hover_backgroundPositionY": null, + ":hover_backgroundRepeat": null, + ":hover_backgroundSize": null, + $$css: true + } +}; +function App() { + return stylex(styles$2.bar, styles.foo, styles$1.baz); +} + +export { App as default }; +" +`); }); }); }); diff --git a/packages/rollup-plugin/package.json b/packages/rollup-plugin/package.json index 3c9b46e67..19a4e1654 100644 --- a/packages/rollup-plugin/package.json +++ b/packages/rollup-plugin/package.json @@ -1,6 +1,6 @@ { "name": "@stylexjs/rollup-plugin", - "version": "0.2.0-beta.25", + "version": "0.2.0-beta.26", "description": "Rollup plugin for StyleX", "main": "src/index.js", "repository": "https://www.github.com/facebook/stylex", @@ -19,7 +19,7 @@ }, "dependencies": { "@babel/core": "^7.16.0", - "@stylexjs/babel-plugin": "0.2.0-beta.25" + "@stylexjs/babel-plugin": "0.2.0-beta.26" }, "devDependencies": { "@babel/preset-env": "^7.16.8", @@ -27,6 +27,6 @@ "@rollup/plugin-commonjs": "^25.0.3", "@rollup/plugin-node-resolve": "^15.0.0", "rollup": "^3.26.3 || ^4.0.2", - "@stylexjs/stylex": "0.2.0-beta.25" + "@stylexjs/stylex": "0.2.0-beta.26" } } diff --git a/packages/scripts/package.json b/packages/scripts/package.json index 745fc2295..cf33c813a 100644 --- a/packages/scripts/package.json +++ b/packages/scripts/package.json @@ -1,6 +1,6 @@ { "name": "@stylexjs/scripts", - "version": "0.2.0-beta.25", + "version": "0.2.0-beta.26", "description": "Helper scripts for stylex monorepo.", "license": "MIT", "bin": { diff --git a/packages/shared/package.json b/packages/shared/package.json index 281e452f3..53fc8f3c9 100644 --- a/packages/shared/package.json +++ b/packages/shared/package.json @@ -1,6 +1,6 @@ { "name": "@stylexjs/shared", - "version": "0.2.0-beta.25", + "version": "0.2.0-beta.26", "main": "lib/index.js", "repository": "https://www.github.com/facebook/stylex", "license": "MIT", @@ -13,7 +13,7 @@ "postcss-value-parser": "^4.1.0" }, "devDependencies": { - "@stylexjs/scripts": "0.2.0-beta.25" + "@stylexjs/scripts": "0.2.0-beta.26" }, "jest": { "snapshotFormat": { diff --git a/packages/stylex/package.json b/packages/stylex/package.json index 1bf1857e0..3a7e8cfb6 100644 --- a/packages/stylex/package.json +++ b/packages/stylex/package.json @@ -1,6 +1,6 @@ { "name": "@stylexjs/stylex", - "version": "0.2.0-beta.25", + "version": "0.2.0-beta.26", "description": "A library for defining styles for optimized user interfaces.", "main": "lib/stylex.js", "types": "lib/stylex.d.ts", @@ -19,7 +19,7 @@ "utility-types": "^3.10.0" }, "devDependencies": { - "@stylexjs/scripts": "0.2.0-beta.25" + "@stylexjs/scripts": "0.2.0-beta.26" }, "jest": {}, "files": [ diff --git a/packages/webpack-plugin/__tests__/index-test.js b/packages/webpack-plugin/__tests__/index-test.js index c4eb47a9a..bb8031288 100644 --- a/packages/webpack-plugin/__tests__/index-test.js +++ b/packages/webpack-plugin/__tests__/index-test.js @@ -121,99 +121,120 @@ describe('webpack-plugin-stylex', () => { `); expect(js).toMatchInlineSnapshot(` - ""use strict"; - (() => { - var exports = {}; - exports.id = 179; - exports.ids = [179]; - exports.modules = { - - /***/ "./index.js": - /***/ (() => { - - - // UNUSED EXPORTS: default - - ;// CONCATENATED MODULE: external "stylex" - const external_stylex_namespaceObject = stylex; - ;// CONCATENATED MODULE: ./otherStyles.js - // otherStyles.js - - - - - var styles = { - bar: { - display: "x1lliihq", - width: "xh8yej3", - $$css: true - } - }; - /* harmony default export */ const otherStyles_0 = ((/* unused pure expression or super */ null && (styles))); - ;// CONCATENATED MODULE: ./npmStyles.js - // npmStyles.js - - - - - const npmStyles_styles = { - baz: { - display: "xt0psk2", - height: "x1egiwwb", - width: "x3hqpx7", - $$css: true - } - }; - /* harmony default export */ const npmStyles_0 = ((/* unused pure expression or super */ null && (npmStyles_styles))); - ;// CONCATENATED MODULE: ./index.js - // index.js - - - - - - - var fadeAnimation = "xgnty7z-B"; - var index_styles = { - foo: { - animationName: "xeuoslp", - display: "x78zum5", - marginInlineStart: "x1hm9lzh", - marginLeft: null, - marginRight: null, - marginTop: "xlrshdv", - height: "x1egiwwb", - ":hover_background": "x1oz5o6v", - ":hover_backgroundAttachment": null, - ":hover_backgroundClip": null, - ":hover_backgroundColor": null, - ":hover_backgroundImage": null, - ":hover_backgroundOrigin": null, - ":hover_backgroundPosition": null, - ":hover_backgroundPositionX": null, - ":hover_backgroundPositionY": null, - ":hover_backgroundRepeat": null, - ":hover_backgroundSize": null, - $$css: true - } - }; - function App() { - return stylex(otherStyles.bar, index_styles.foo, npmStyles.baz); - } - - /***/ }) - - }; - ; - - // load runtime - var __webpack_require__ = require("./runtime.js"); - __webpack_require__.C(exports); - var __webpack_exec__ = (moduleId) => (__webpack_require__(__webpack_require__.s = moduleId)) - var __webpack_exports__ = (__webpack_exec__("./index.js")); - - })();" - `); +""use strict"; +(() => { +var exports = {}; +exports.id = 179; +exports.ids = [179]; +exports.modules = { + +/***/ "./index.js": +/***/ (() => { + + +// UNUSED EXPORTS: default + +;// CONCATENATED MODULE: external "stylex" +const external_stylex_namespaceObject = stylex; +;// CONCATENATED MODULE: ./otherStyles.js +/** + * 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. + */ + +// otherStyles.js + + + + +var styles = { + bar: { + display: "x1lliihq", + width: "xh8yej3", + $$css: true + } +}; +/* harmony default export */ const otherStyles_0 = ((/* unused pure expression or super */ null && (styles))); +;// CONCATENATED MODULE: ./npmStyles.js +/** + * 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. + */ + +// npmStyles.js + + + + +const npmStyles_styles = { + baz: { + display: "xt0psk2", + height: "x1egiwwb", + width: "x3hqpx7", + $$css: true + } +}; +/* harmony default export */ const npmStyles_0 = ((/* unused pure expression or super */ null && (npmStyles_styles))); +;// CONCATENATED MODULE: ./index.js +/** + * 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. + */ + +// index.js + + + + + + +var fadeAnimation = "xgnty7z-B"; +var index_styles = { + foo: { + animationName: "xeuoslp", + display: "x78zum5", + marginInlineStart: "x1hm9lzh", + marginLeft: null, + marginRight: null, + marginTop: "xlrshdv", + height: "x1egiwwb", + ":hover_background": "x1oz5o6v", + ":hover_backgroundAttachment": null, + ":hover_backgroundClip": null, + ":hover_backgroundColor": null, + ":hover_backgroundImage": null, + ":hover_backgroundOrigin": null, + ":hover_backgroundPosition": null, + ":hover_backgroundPositionX": null, + ":hover_backgroundPositionY": null, + ":hover_backgroundRepeat": null, + ":hover_backgroundSize": null, + $$css: true + } +}; +function App() { + return stylex(otherStyles.bar, index_styles.foo, npmStyles.baz); +} + +/***/ }) + +}; +; + +// load runtime +var __webpack_require__ = require("./runtime.js"); +__webpack_require__.C(exports); +var __webpack_exec__ = (moduleId) => (__webpack_require__(__webpack_require__.s = moduleId)) +var __webpack_exports__ = (__webpack_exec__("./index.js")); + +})();" +`); done(); }); }); @@ -230,115 +251,136 @@ describe('webpack-plugin-stylex', () => { expect(cssExists).toEqual(true); expect(js).toMatchInlineSnapshot(` - ""use strict"; - (() => { - var exports = {}; - exports.id = 179; - exports.ids = [179]; - exports.modules = { - - /***/ "./index.js": - /***/ ((__unused_webpack_module, __unused_webpack___webpack_exports__, __webpack_require__) => { - - - // UNUSED EXPORTS: default - - ;// CONCATENATED MODULE: external "stylex" - const external_stylex_namespaceObject = stylex; - var external_stylex_default = /*#__PURE__*/__webpack_require__.n(external_stylex_namespaceObject); - ;// CONCATENATED MODULE: ./otherStyles.js - // otherStyles.js - - - - - external_stylex_default().inject(".x1lliihq{display:block}", 3000); - external_stylex_default().inject(".xh8yej3{width:100%}", 4000); - var styles = { - bar: { - "otherStyles__styles.bar": "otherStyles__styles.bar", - display: "x1lliihq", - width: "xh8yej3", - $$css: true - } - }; - /* harmony default export */ const otherStyles_0 = ((/* unused pure expression or super */ null && (styles))); - ;// CONCATENATED MODULE: ./npmStyles.js - // npmStyles.js - - - - - external_stylex_default().inject(".xt0psk2{display:inline}", 3000); - external_stylex_default().inject(".x1egiwwb{height:500px}", 4000); - external_stylex_default().inject(".x3hqpx7{width:50%}", 4000); - const npmStyles_styles = { - baz: { - "npmStyles__styles.baz": "npmStyles__styles.baz", - display: "xt0psk2", - height: "x1egiwwb", - width: "x3hqpx7", - $$css: true - } - }; - /* harmony default export */ const npmStyles_0 = ((/* unused pure expression or super */ null && (npmStyles_styles))); - ;// CONCATENATED MODULE: ./index.js - // index.js - - - - - - - external_stylex_default().inject("@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); - var index_styles = { - foo: { - "index__styles.foo": "index__styles.foo", - animationName: "xeuoslp", - display: "x78zum5", - marginInlineStart: "x1hm9lzh", - marginLeft: null, - marginRight: null, - marginTop: "xlrshdv", - height: "x1egiwwb", - ":hover_background": "x1oz5o6v", - ":hover_backgroundAttachment": null, - ":hover_backgroundClip": null, - ":hover_backgroundColor": null, - ":hover_backgroundImage": null, - ":hover_backgroundOrigin": null, - ":hover_backgroundPosition": null, - ":hover_backgroundPositionX": null, - ":hover_backgroundPositionY": null, - ":hover_backgroundRepeat": null, - ":hover_backgroundSize": null, - $$css: true - } - }; - function App() { - return stylex(otherStyles.bar, index_styles.foo, npmStyles.baz); - } - - /***/ }) - - }; - ; - - // load runtime - var __webpack_require__ = require("./runtime.js"); - __webpack_require__.C(exports); - var __webpack_exec__ = (moduleId) => (__webpack_require__(__webpack_require__.s = moduleId)) - var __webpack_exports__ = (__webpack_exec__("./index.js")); - - })();" - `); +""use strict"; +(() => { +var exports = {}; +exports.id = 179; +exports.ids = [179]; +exports.modules = { + +/***/ "./index.js": +/***/ ((__unused_webpack_module, __unused_webpack___webpack_exports__, __webpack_require__) => { + + +// UNUSED EXPORTS: default + +;// 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. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ + +// otherStyles.js + + + + +external_stylex_default().inject(".x1lliihq{display:block}", 3000); +external_stylex_default().inject(".xh8yej3{width:100%}", 4000); +var styles = { + bar: { + "otherStyles__styles.bar": "otherStyles__styles.bar", + display: "x1lliihq", + width: "xh8yej3", + $$css: true + } +}; +/* harmony default export */ const otherStyles_0 = ((/* unused pure expression or super */ null && (styles))); +;// CONCATENATED MODULE: ./npmStyles.js +/** + * 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. + */ + +// npmStyles.js + + + + +external_stylex_default().inject(".xt0psk2{display:inline}", 3000); +external_stylex_default().inject(".x1egiwwb{height:500px}", 4000); +external_stylex_default().inject(".x3hqpx7{width:50%}", 4000); +const npmStyles_styles = { + baz: { + "npmStyles__styles.baz": "npmStyles__styles.baz", + display: "xt0psk2", + height: "x1egiwwb", + width: "x3hqpx7", + $$css: true + } +}; +/* harmony default export */ const npmStyles_0 = ((/* unused pure expression or super */ null && (npmStyles_styles))); +;// CONCATENATED MODULE: ./index.js +/** + * 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. + */ + +// index.js + + + + + + +external_stylex_default().inject("@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); +var index_styles = { + foo: { + "index__styles.foo": "index__styles.foo", + animationName: "xeuoslp", + display: "x78zum5", + marginInlineStart: "x1hm9lzh", + marginLeft: null, + marginRight: null, + marginTop: "xlrshdv", + height: "x1egiwwb", + ":hover_background": "x1oz5o6v", + ":hover_backgroundAttachment": null, + ":hover_backgroundClip": null, + ":hover_backgroundColor": null, + ":hover_backgroundImage": null, + ":hover_backgroundOrigin": null, + ":hover_backgroundPosition": null, + ":hover_backgroundPositionX": null, + ":hover_backgroundPositionY": null, + ":hover_backgroundRepeat": null, + ":hover_backgroundSize": null, + $$css: true + } +}; +function App() { + return stylex(otherStyles.bar, index_styles.foo, npmStyles.baz); +} + +/***/ }) + +}; +; + +// load runtime +var __webpack_require__ = require("./runtime.js"); +__webpack_require__.C(exports); +var __webpack_exec__ = (moduleId) => (__webpack_require__(__webpack_require__.s = moduleId)) +var __webpack_exports__ = (__webpack_exec__("./index.js")); + +})();" +`); done(); }); }); diff --git a/packages/webpack-plugin/package.json b/packages/webpack-plugin/package.json index e2ac465b1..574bb83c1 100644 --- a/packages/webpack-plugin/package.json +++ b/packages/webpack-plugin/package.json @@ -1,6 +1,6 @@ { "name": "@stylexjs/webpack-plugin", - "version": "0.2.0-beta.25", + "version": "0.2.0-beta.26", "description": "Webpack plugin for StyleX", "main": "src/index.js", "repository": "https://www.github.com/facebook/stylex", @@ -25,14 +25,14 @@ "@babel/plugin-syntax-flow": "^7.18.6", "@babel/plugin-syntax-jsx": "^7.14.5", "@babel/plugin-syntax-typescript": "^7.14.5", - "@stylexjs/babel-plugin": "0.2.0-beta.25", + "@stylexjs/babel-plugin": "0.2.0-beta.26", "webpack": "^5.88.2" }, "devDependencies": { "@babel/preset-env": "^7.16.8", "babel-loader": "^8.2.2", "memfs": "4.2.0", - "@stylexjs/stylex": "0.2.0-beta.25", + "@stylexjs/stylex": "0.2.0-beta.26", "webpack-cli": "^5.1.4" } }