From 95ef1afe67c5f028635267297f9b73f7f6af941d Mon Sep 17 00:00:00 2001 From: Tsubasa Sakai Date: Sun, 18 May 2025 17:22:35 +0900 Subject: [PATCH 1/6] [postcss-plugin] Add unit tests --- package-lock.json | 19 +++ .../__tests__/__fixtures__/.babelrc.json | 6 + .../__fixtures__/import-sources-object.js | 14 ++ .../__fixtures__/import-sources-string.js | 14 ++ .../__tests__/__fixtures__/styles-second.js | 14 ++ .../__tests__/__fixtures__/styles.js | 14 ++ .../postcss-plugin/__tests__/index-test.js | 155 ++++++++++++++++++ .../@stylexjs/postcss-plugin/package.json | 16 ++ .../@stylexjs/postcss-plugin/src/index.js | 95 +---------- .../@stylexjs/postcss-plugin/src/plugin.js | 102 ++++++++++++ 10 files changed, 356 insertions(+), 93 deletions(-) create mode 100644 packages/@stylexjs/postcss-plugin/__tests__/__fixtures__/.babelrc.json create mode 100644 packages/@stylexjs/postcss-plugin/__tests__/__fixtures__/import-sources-object.js create mode 100644 packages/@stylexjs/postcss-plugin/__tests__/__fixtures__/import-sources-string.js create mode 100644 packages/@stylexjs/postcss-plugin/__tests__/__fixtures__/styles-second.js create mode 100644 packages/@stylexjs/postcss-plugin/__tests__/__fixtures__/styles.js create mode 100644 packages/@stylexjs/postcss-plugin/__tests__/index-test.js create mode 100644 packages/@stylexjs/postcss-plugin/src/plugin.js diff --git a/package-lock.json b/package-lock.json index 4fa6e2804..6d2614aea 100644 --- a/package-lock.json +++ b/package-lock.json @@ -27070,6 +27070,12 @@ "glob-parent": "^6.0.2", "is-glob": "^4.0.3", "postcss": "^8.4.49" + }, + "devDependencies": { + "@babel/preset-env": "^7.26.0", + "@babel/preset-react": "^7.25.3", + "jest": "^30.0.0-alpha.7", + "react": "^18.2.0" } }, "packages/@stylexjs/postcss-plugin/node_modules/postcss": { @@ -27100,6 +27106,19 @@ "node": "^10 || ^12 || >=14" } }, + "packages/@stylexjs/postcss-plugin/node_modules/react": { + "version": "18.3.1", + "resolved": "https://registry.npmjs.org/react/-/react-18.3.1.tgz", + "integrity": "sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==", + "dev": true, + "license": "MIT", + "dependencies": { + "loose-envify": "^1.1.0" + }, + "engines": { + "node": ">=0.10.0" + } + }, "packages/@stylexjs/rollup-plugin": { "version": "0.12.0", "license": "MIT", diff --git a/packages/@stylexjs/postcss-plugin/__tests__/__fixtures__/.babelrc.json b/packages/@stylexjs/postcss-plugin/__tests__/__fixtures__/.babelrc.json new file mode 100644 index 000000000..e3d1f4a1f --- /dev/null +++ b/packages/@stylexjs/postcss-plugin/__tests__/__fixtures__/.babelrc.json @@ -0,0 +1,6 @@ +{ + "presets": [["@babel/preset-env", { "targets": { "node": "current" } }]], + "plugins": [ + ["@stylexjs/babel-plugin", { "dev": false, "runtimeInjection": false }] + ] +} diff --git a/packages/@stylexjs/postcss-plugin/__tests__/__fixtures__/import-sources-object.js b/packages/@stylexjs/postcss-plugin/__tests__/__fixtures__/import-sources-object.js new file mode 100644 index 000000000..96950afc9 --- /dev/null +++ b/packages/@stylexjs/postcss-plugin/__tests__/__fixtures__/import-sources-object.js @@ -0,0 +1,14 @@ +/** + * 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. + */ + +import { css } from 'react-strict-dom'; + +export const styles = css.create({ + object: { + backgroundColor: 'yellow', + }, +}); diff --git a/packages/@stylexjs/postcss-plugin/__tests__/__fixtures__/import-sources-string.js b/packages/@stylexjs/postcss-plugin/__tests__/__fixtures__/import-sources-string.js new file mode 100644 index 000000000..65f393cb7 --- /dev/null +++ b/packages/@stylexjs/postcss-plugin/__tests__/__fixtures__/import-sources-string.js @@ -0,0 +1,14 @@ +/** + * 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. + */ + +import * as custom from 'custom'; + +export const styles = custom.create({ + string: { + backgroundColor: 'blue', + }, +}); diff --git a/packages/@stylexjs/postcss-plugin/__tests__/__fixtures__/styles-second.js b/packages/@stylexjs/postcss-plugin/__tests__/__fixtures__/styles-second.js new file mode 100644 index 000000000..9239bc7ad --- /dev/null +++ b/packages/@stylexjs/postcss-plugin/__tests__/__fixtures__/styles-second.js @@ -0,0 +1,14 @@ +/** + * 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. + */ + +import * as stylex from '@stylexjs/stylex'; + +export const styles = stylex.create({ + second: { + backgroundColor: 'green', + }, +}); diff --git a/packages/@stylexjs/postcss-plugin/__tests__/__fixtures__/styles.js b/packages/@stylexjs/postcss-plugin/__tests__/__fixtures__/styles.js new file mode 100644 index 000000000..e88aefacd --- /dev/null +++ b/packages/@stylexjs/postcss-plugin/__tests__/__fixtures__/styles.js @@ -0,0 +1,14 @@ +/** + * 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. + */ + +import * as stylex from '@stylexjs/stylex'; + +export const styles = stylex.create({ + container: { + backgroundColor: 'red', + }, +}); diff --git a/packages/@stylexjs/postcss-plugin/__tests__/index-test.js b/packages/@stylexjs/postcss-plugin/__tests__/index-test.js new file mode 100644 index 000000000..ad5b4995c --- /dev/null +++ b/packages/@stylexjs/postcss-plugin/__tests__/index-test.js @@ -0,0 +1,155 @@ +/** + * 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. + */ + +'use strict'; + +const path = require('path'); +const postcss = require('postcss'); +const createPlugin = require('../src/plugin'); + +describe('@stylexjs/postcss-plugin', () => { + const fixturesDir = path.resolve(__dirname, '__fixtures__'); + + async function runStylexPostcss(options = {}, inputCSS = '@stylex;') { + // Create a new instance for each test as the plugin is stateful + const stylexPostcssPlugin = createPlugin(); + + const plugin = stylexPostcssPlugin({ + cwd: fixturesDir, + include: ['**/*.js'], + babelConfig: { + configFile: path.join(fixturesDir, '.babelrc.json'), + }, + ...options, + }); + + const processor = postcss([plugin]); + const result = await processor.process(inputCSS, { + from: path.join(fixturesDir, 'input.css'), + }); + + return result; + } + + it('extracts CSS from StyleX files', async () => { + const result = await runStylexPostcss(); + + expect(result.css).toMatchInlineSnapshot(` + ".x1u857p9{background-color:green} + .xrkmrrc{background-color:red}" + `); + + // Check that messages contain dependency information + expect(result.messages.length).toBeGreaterThan(0); + expect(result.messages.some((m) => m.type === 'dir-dependency')).toBe(true); + }); + + it('handles empty CSS input without @stylex rule', async () => { + const result = await runStylexPostcss({}, '/* No stylex rule here */'); + + expect(result.css).toMatchInlineSnapshot('"/* No stylex rule here */"'); + expect(result.messages.length).toBe(0); + }); + + it('supports CSS layers', async () => { + const result = await runStylexPostcss({ useCSSLayers: true }); + + expect(result.css).toContain('@layer'); + expect(result.css).toMatchInlineSnapshot(` + " + @layer priority1; + @layer priority1{ + .x1u857p9{background-color:green} + .xrkmrrc{background-color:red} + }" + `); + }); + + it('handles exclude patterns', async () => { + const result = await runStylexPostcss({ + exclude: ['**/styles-second.js'], + }); + + // Should not contain styles-second.js styles + expect(result.css).not.toContain('green'); + + expect(result.css).toMatchInlineSnapshot( + '".xrkmrrc{background-color:red}"', + ); + }); + + it('respects string syntax for importSources', async () => { + // Default importSources should not process any files + const defaultResult = await runStylexPostcss({ + include: ['**/import-sources-*.js'], + }); + + expect(defaultResult.css).toBe(''); + + // Custom importSources should process only import-sources-string.js + const customResult = await runStylexPostcss({ + include: ['**/import-sources-*.js'], + importSources: ['custom'], + babelConfig: { + babelrc: false, + presets: [['@babel/preset-env', { targets: { node: 'current' } }]], + plugins: [ + [ + '@stylexjs/babel-plugin', + { + dev: false, + runtimeInjection: false, + importSources: ['custom'], + }, + ], + ], + }, + }); + + expect(customResult.css).toMatchInlineSnapshot( + '".x1t391ir{background-color:blue}"', + ); + }); + + it('supports object syntax for importSources', async () => { + const result = await runStylexPostcss({ + include: ['**/import-sources-object.js'], + importSources: [{ as: 'css', from: 'react-strict-dom' }], + babelConfig: { + babelrc: false, + presets: [['@babel/preset-env', { targets: { node: 'current' } }]], + plugins: [ + [ + '@stylexjs/babel-plugin', + { + dev: false, + runtimeInjection: false, + importSources: [{ as: 'css', from: 'react-strict-dom' }], + }, + ], + ], + }, + }); + + expect(result.css).toMatchInlineSnapshot( + '".x1cu41gw{background-color:yellow}"', + ); + }); + + it('skips files that do not match include/exclude patterns', async () => { + const result = await runStylexPostcss({ + include: ['**/styles-second.js'], + }); + + // Should contain styles-second.js styles but not styles.js + expect(result.css).not.toContain('red'); + + expect(result.css).toMatchInlineSnapshot( + '".x1u857p9{background-color:green}"', + ); + }); +}); diff --git a/packages/@stylexjs/postcss-plugin/package.json b/packages/@stylexjs/postcss-plugin/package.json index a26b16312..5fbd8354b 100644 --- a/packages/@stylexjs/postcss-plugin/package.json +++ b/packages/@stylexjs/postcss-plugin/package.json @@ -8,6 +8,16 @@ "url": "git+https://github.com/facebook/stylex.git" }, "license": "MIT", + "scripts": { + "test": "jest" + }, + "jest": { + "testPathIgnorePatterns": [ + "/node_modules/", + "/__fixtures__/" + ], + "testEnvironment": "node" + }, "dependencies": { "@babel/core": "^7.26.8", "@stylexjs/babel-plugin": "0.12.0", @@ -15,5 +25,11 @@ "fast-glob": "^3.3.2", "glob-parent": "^6.0.2", "is-glob": "^4.0.3" + }, + "devDependencies": { + "@babel/preset-env": "^7.26.0", + "@babel/preset-react": "^7.25.3", + "jest": "^30.0.0-alpha.7", + "react": "^18.2.0" } } diff --git a/packages/@stylexjs/postcss-plugin/src/index.js b/packages/@stylexjs/postcss-plugin/src/index.js index 67c7f9315..c8edf91f1 100644 --- a/packages/@stylexjs/postcss-plugin/src/index.js +++ b/packages/@stylexjs/postcss-plugin/src/index.js @@ -5,97 +5,6 @@ * LICENSE file in the root directory of this source tree. */ -const postcss = require('postcss'); -const createBuilder = require('./builder'); +const createPlugin = require('./plugin'); -const PLUGIN_NAME = '@stylexjs/postcss-plugin'; - -const builder = createBuilder(); - -const isDev = process.env.NODE_ENV === 'development'; - -const plugin = ({ - cwd = process.cwd(), - // By default reuses the Babel configuration from the project root. - // Use `babelrc: false` to disable this behavior. - babelConfig = {}, - include, - exclude, - useCSSLayers = false, - importSources = ['@stylexjs/stylex', 'stylex'], -}) => { - exclude = [ - // Exclude type declaration files by default because it never contains any CSS rules. - '**/*.d.ts', - '**/*.flow', - ...(exclude ?? []), - ]; - - // Whether to skip the error when transforming StyleX rules. - // Useful in watch mode where Fast Refresh can recover from errors. - // Initial transform will still throw errors in watch mode to surface issues early. - let shouldSkipTransformError = false; - - return { - postcssPlugin: PLUGIN_NAME, - plugins: [ - // Processes the PostCSS root node to find and transform StyleX at-rules. - async function (root, result) { - const fileName = result.opts.from; - - // Configure the builder with the provided options - await builder.configure({ - include, - exclude, - cwd, - babelConfig, - useCSSLayers, - importSources, - isDev, - }); - - // Find the "@stylex" at-rule - const styleXAtRule = builder.findStyleXAtRule(root); - if (styleXAtRule == null) { - return; - } - - // Get dependencies to be watched for changes - const dependencies = builder.getDependencies(); - - // Add each dependency to the PostCSS result messages. - // This watches the entire "./src" directory for "./src/**/*.{ts,tsx}" - // to handle new files and deletions reliably in watch mode. - for (const dependency of dependencies) { - result.messages.push({ - plugin: PLUGIN_NAME, - parent: fileName, - ...dependency, - }); - } - - // Build and parse the CSS from collected StyleX rules - const css = await builder.build({ - shouldSkipTransformError, - }); - const parsed = await postcss.parse(css, { - from: fileName, - }); - - // Replace the "@stylex" rule with the generated CSS - styleXAtRule.replaceWith(parsed); - - result.root = root; - - if (!shouldSkipTransformError) { - // Build was successful, subsequent builds are for watch mode - shouldSkipTransformError = true; - } - }, - ], - }; -}; - -plugin.postcss = true; - -module.exports = plugin; +module.exports = createPlugin(); diff --git a/packages/@stylexjs/postcss-plugin/src/plugin.js b/packages/@stylexjs/postcss-plugin/src/plugin.js new file mode 100644 index 000000000..b6a5aac1d --- /dev/null +++ b/packages/@stylexjs/postcss-plugin/src/plugin.js @@ -0,0 +1,102 @@ +/** + * 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 postcss = require('postcss'); +const createBuilder = require('./builder'); + +module.exports = function createPlugin() { + const PLUGIN_NAME = '@stylexjs/postcss-plugin'; + + const builder = createBuilder(); + + const isDev = process.env.NODE_ENV === 'development'; + + const plugin = ({ + cwd = process.cwd(), + // By default reuses the Babel configuration from the project root. + // Use `babelrc: false` to disable this behavior. + babelConfig = {}, + include, + exclude, + useCSSLayers = false, + importSources = ['@stylexjs/stylex', 'stylex'], + }) => { + exclude = [ + // Exclude type declaration files by default because it never contains any CSS rules. + '**/*.d.ts', + '**/*.flow', + ...(exclude ?? []), + ]; + + // Whether to skip the error when transforming StyleX rules. + // Useful in watch mode where Fast Refresh can recover from errors. + // Initial transform will still throw errors in watch mode to surface issues early. + let shouldSkipTransformError = false; + + return { + postcssPlugin: PLUGIN_NAME, + plugins: [ + // Processes the PostCSS root node to find and transform StyleX at-rules. + async function (root, result) { + const fileName = result.opts.from; + + // Configure the builder with the provided options + await builder.configure({ + include, + exclude, + cwd, + babelConfig, + useCSSLayers, + importSources, + isDev, + }); + + // Find the "@stylex" at-rule + const styleXAtRule = builder.findStyleXAtRule(root); + if (styleXAtRule == null) { + return; + } + + // Get dependencies to be watched for changes + const dependencies = builder.getDependencies(); + + // Add each dependency to the PostCSS result messages. + // This watches the entire "./src" directory for "./src/**/*.{ts,tsx}" + // to handle new files and deletions reliably in watch mode. + for (const dependency of dependencies) { + result.messages.push({ + plugin: PLUGIN_NAME, + parent: fileName, + ...dependency, + }); + } + + // Build and parse the CSS from collected StyleX rules + const css = await builder.build({ + shouldSkipTransformError, + }); + const parsed = await postcss.parse(css, { + from: fileName, + }); + + // Replace the "@stylex" rule with the generated CSS + styleXAtRule.replaceWith(parsed); + + result.root = root; + + if (!shouldSkipTransformError) { + // Build was successful, subsequent builds are for watch mode + shouldSkipTransformError = true; + } + }, + ], + }; + }; + + plugin.postcss = true; + + return plugin; +}; From a73a2c9dd0d87b44a7a8a38f75d2cef2d237063b Mon Sep 17 00:00:00 2001 From: Tsubasa Sakai Date: Mon, 19 May 2025 17:13:02 +0900 Subject: [PATCH 2/6] [postcss-plugin] rename it() to test() for consistency in tests --- .../postcss-plugin/__tests__/index-test.js | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/packages/@stylexjs/postcss-plugin/__tests__/index-test.js b/packages/@stylexjs/postcss-plugin/__tests__/index-test.js index ad5b4995c..afc10a083 100644 --- a/packages/@stylexjs/postcss-plugin/__tests__/index-test.js +++ b/packages/@stylexjs/postcss-plugin/__tests__/index-test.js @@ -35,7 +35,7 @@ describe('@stylexjs/postcss-plugin', () => { return result; } - it('extracts CSS from StyleX files', async () => { + test('extracts CSS from StyleX files', async () => { const result = await runStylexPostcss(); expect(result.css).toMatchInlineSnapshot(` @@ -48,14 +48,14 @@ describe('@stylexjs/postcss-plugin', () => { expect(result.messages.some((m) => m.type === 'dir-dependency')).toBe(true); }); - it('handles empty CSS input without @stylex rule', async () => { + test('handles empty CSS input without @stylex rule', async () => { const result = await runStylexPostcss({}, '/* No stylex rule here */'); expect(result.css).toMatchInlineSnapshot('"/* No stylex rule here */"'); expect(result.messages.length).toBe(0); }); - it('supports CSS layers', async () => { + test('supports CSS layers', async () => { const result = await runStylexPostcss({ useCSSLayers: true }); expect(result.css).toContain('@layer'); @@ -69,7 +69,7 @@ describe('@stylexjs/postcss-plugin', () => { `); }); - it('handles exclude patterns', async () => { + test('handles exclude patterns', async () => { const result = await runStylexPostcss({ exclude: ['**/styles-second.js'], }); @@ -82,7 +82,7 @@ describe('@stylexjs/postcss-plugin', () => { ); }); - it('respects string syntax for importSources', async () => { + test('respects string syntax for importSources', async () => { // Default importSources should not process any files const defaultResult = await runStylexPostcss({ include: ['**/import-sources-*.js'], @@ -115,7 +115,7 @@ describe('@stylexjs/postcss-plugin', () => { ); }); - it('supports object syntax for importSources', async () => { + test('supports object syntax for importSources', async () => { const result = await runStylexPostcss({ include: ['**/import-sources-object.js'], importSources: [{ as: 'css', from: 'react-strict-dom' }], @@ -140,7 +140,7 @@ describe('@stylexjs/postcss-plugin', () => { ); }); - it('skips files that do not match include/exclude patterns', async () => { + test('skips files that do not match include/exclude patterns', async () => { const result = await runStylexPostcss({ include: ['**/styles-second.js'], }); From 20592c797ff2d1ac9f191ab505336d4b74707d91 Mon Sep 17 00:00:00 2001 From: Tsubasa Sakai Date: Mon, 19 May 2025 17:14:12 +0900 Subject: [PATCH 3/6] [postcss-plugin] move jest config from package.json to jest.config.js in tests --- packages/@stylexjs/postcss-plugin/jest.config.js | 13 +++++++++++++ packages/@stylexjs/postcss-plugin/package.json | 7 ------- 2 files changed, 13 insertions(+), 7 deletions(-) create mode 100644 packages/@stylexjs/postcss-plugin/jest.config.js diff --git a/packages/@stylexjs/postcss-plugin/jest.config.js b/packages/@stylexjs/postcss-plugin/jest.config.js new file mode 100644 index 000000000..6de6c2485 --- /dev/null +++ b/packages/@stylexjs/postcss-plugin/jest.config.js @@ -0,0 +1,13 @@ +/** + * 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. + */ + +'use strict'; + +module.exports = { + testPathIgnorePatterns: ['/__fixtures__/'], + testEnvironment: 'node', +}; diff --git a/packages/@stylexjs/postcss-plugin/package.json b/packages/@stylexjs/postcss-plugin/package.json index 5fbd8354b..2e4a8c167 100644 --- a/packages/@stylexjs/postcss-plugin/package.json +++ b/packages/@stylexjs/postcss-plugin/package.json @@ -11,13 +11,6 @@ "scripts": { "test": "jest" }, - "jest": { - "testPathIgnorePatterns": [ - "/node_modules/", - "/__fixtures__/" - ], - "testEnvironment": "node" - }, "dependencies": { "@babel/core": "^7.26.8", "@stylexjs/babel-plugin": "0.12.0", From 4d7ec46aaab685fbdc7193f4bf352bb8d0347230 Mon Sep 17 00:00:00 2001 From: Tsubasa Sakai Date: Mon, 19 May 2025 17:16:46 +0900 Subject: [PATCH 4/6] [postcss-plugin] rename .babelrc.json to .babelrc.js in tests --- .../postcss-plugin/__tests__/__fixtures__/.babelrc.js | 6 ++++++ .../postcss-plugin/__tests__/__fixtures__/.babelrc.json | 6 ------ packages/@stylexjs/postcss-plugin/__tests__/index-test.js | 2 +- 3 files changed, 7 insertions(+), 7 deletions(-) create mode 100644 packages/@stylexjs/postcss-plugin/__tests__/__fixtures__/.babelrc.js delete mode 100644 packages/@stylexjs/postcss-plugin/__tests__/__fixtures__/.babelrc.json diff --git a/packages/@stylexjs/postcss-plugin/__tests__/__fixtures__/.babelrc.js b/packages/@stylexjs/postcss-plugin/__tests__/__fixtures__/.babelrc.js new file mode 100644 index 000000000..0d4409363 --- /dev/null +++ b/packages/@stylexjs/postcss-plugin/__tests__/__fixtures__/.babelrc.js @@ -0,0 +1,6 @@ +module.exports = { + presets: [['@babel/preset-env', { targets: { node: 'current' } }]], + plugins: [ + ['@stylexjs/babel-plugin', { dev: false, runtimeInjection: false }], + ], +}; diff --git a/packages/@stylexjs/postcss-plugin/__tests__/__fixtures__/.babelrc.json b/packages/@stylexjs/postcss-plugin/__tests__/__fixtures__/.babelrc.json deleted file mode 100644 index e3d1f4a1f..000000000 --- a/packages/@stylexjs/postcss-plugin/__tests__/__fixtures__/.babelrc.json +++ /dev/null @@ -1,6 +0,0 @@ -{ - "presets": [["@babel/preset-env", { "targets": { "node": "current" } }]], - "plugins": [ - ["@stylexjs/babel-plugin", { "dev": false, "runtimeInjection": false }] - ] -} diff --git a/packages/@stylexjs/postcss-plugin/__tests__/index-test.js b/packages/@stylexjs/postcss-plugin/__tests__/index-test.js index afc10a083..503c2ce41 100644 --- a/packages/@stylexjs/postcss-plugin/__tests__/index-test.js +++ b/packages/@stylexjs/postcss-plugin/__tests__/index-test.js @@ -22,7 +22,7 @@ describe('@stylexjs/postcss-plugin', () => { cwd: fixturesDir, include: ['**/*.js'], babelConfig: { - configFile: path.join(fixturesDir, '.babelrc.json'), + configFile: path.join(fixturesDir, '.babelrc.js'), }, ...options, }); From ce048a61aca0764a5f77b827e8517005d307e2a2 Mon Sep 17 00:00:00 2001 From: Tsubasa Sakai Date: Mon, 19 May 2025 17:20:11 +0900 Subject: [PATCH 5/6] [postcss-plugin] remove devDependencies already installed at root in postcss-plugin and remove @babel/preset-env from both babel config and devDependencies --- package-lock.json | 19 ------------------- .../__tests__/__fixtures__/.babelrc.js | 1 - .../@stylexjs/postcss-plugin/package.json | 6 ------ 3 files changed, 26 deletions(-) diff --git a/package-lock.json b/package-lock.json index 6d2614aea..4fa6e2804 100644 --- a/package-lock.json +++ b/package-lock.json @@ -27070,12 +27070,6 @@ "glob-parent": "^6.0.2", "is-glob": "^4.0.3", "postcss": "^8.4.49" - }, - "devDependencies": { - "@babel/preset-env": "^7.26.0", - "@babel/preset-react": "^7.25.3", - "jest": "^30.0.0-alpha.7", - "react": "^18.2.0" } }, "packages/@stylexjs/postcss-plugin/node_modules/postcss": { @@ -27106,19 +27100,6 @@ "node": "^10 || ^12 || >=14" } }, - "packages/@stylexjs/postcss-plugin/node_modules/react": { - "version": "18.3.1", - "resolved": "https://registry.npmjs.org/react/-/react-18.3.1.tgz", - "integrity": "sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==", - "dev": true, - "license": "MIT", - "dependencies": { - "loose-envify": "^1.1.0" - }, - "engines": { - "node": ">=0.10.0" - } - }, "packages/@stylexjs/rollup-plugin": { "version": "0.12.0", "license": "MIT", diff --git a/packages/@stylexjs/postcss-plugin/__tests__/__fixtures__/.babelrc.js b/packages/@stylexjs/postcss-plugin/__tests__/__fixtures__/.babelrc.js index 0d4409363..54b77c397 100644 --- a/packages/@stylexjs/postcss-plugin/__tests__/__fixtures__/.babelrc.js +++ b/packages/@stylexjs/postcss-plugin/__tests__/__fixtures__/.babelrc.js @@ -1,5 +1,4 @@ module.exports = { - presets: [['@babel/preset-env', { targets: { node: 'current' } }]], plugins: [ ['@stylexjs/babel-plugin', { dev: false, runtimeInjection: false }], ], diff --git a/packages/@stylexjs/postcss-plugin/package.json b/packages/@stylexjs/postcss-plugin/package.json index 2e4a8c167..868177c5e 100644 --- a/packages/@stylexjs/postcss-plugin/package.json +++ b/packages/@stylexjs/postcss-plugin/package.json @@ -18,11 +18,5 @@ "fast-glob": "^3.3.2", "glob-parent": "^6.0.2", "is-glob": "^4.0.3" - }, - "devDependencies": { - "@babel/preset-env": "^7.26.0", - "@babel/preset-react": "^7.25.3", - "jest": "^30.0.0-alpha.7", - "react": "^18.2.0" } } From 448f3a6f6d20f77101e3cdf01e38141f925139db Mon Sep 17 00:00:00 2001 From: Tsubasa Sakai Date: Mon, 19 May 2025 17:27:29 +0900 Subject: [PATCH 6/6] [postcss-plugin] remove @babel/preset-env config from tests file --- packages/@stylexjs/postcss-plugin/__tests__/index-test.js | 2 -- 1 file changed, 2 deletions(-) diff --git a/packages/@stylexjs/postcss-plugin/__tests__/index-test.js b/packages/@stylexjs/postcss-plugin/__tests__/index-test.js index 503c2ce41..081201b26 100644 --- a/packages/@stylexjs/postcss-plugin/__tests__/index-test.js +++ b/packages/@stylexjs/postcss-plugin/__tests__/index-test.js @@ -96,7 +96,6 @@ describe('@stylexjs/postcss-plugin', () => { importSources: ['custom'], babelConfig: { babelrc: false, - presets: [['@babel/preset-env', { targets: { node: 'current' } }]], plugins: [ [ '@stylexjs/babel-plugin', @@ -121,7 +120,6 @@ describe('@stylexjs/postcss-plugin', () => { importSources: [{ as: 'css', from: 'react-strict-dom' }], babelConfig: { babelrc: false, - presets: [['@babel/preset-env', { targets: { node: 'current' } }]], plugins: [ [ '@stylexjs/babel-plugin',