diff --git a/apps/website/docs/react/ahead-of-time-compilation/with-webpack.md b/apps/website/docs/react/ahead-of-time-compilation/with-webpack.md index 2c1096553..262f182c9 100644 --- a/apps/website/docs/react/ahead-of-time-compilation/with-webpack.md +++ b/apps/website/docs/react/ahead-of-time-compilation/with-webpack.md @@ -13,14 +13,14 @@ import TabItem from '@theme/TabItem'; ```shell -yarn add --dev @griffel/webpack-loader +yarn add --dev @griffel/webpack-plugin ``` ```shell -npm install --save-dev @griffel/webpack-loader +npm install --save-dev @griffel/webpack-plugin ``` @@ -30,7 +30,7 @@ npm install --save-dev @griffel/webpack-loader Webpack documentation: [Loaders](https://webpack.js.org/loaders/) -Within your webpack configuration object, you'll need to add the `@griffel/webpack-loader` to the list of modules, like so: +Within your webpack configuration object, you'll need to add the `@griffel/webpack-plugin` loader to the list of modules, like so: ```js module.exports = { @@ -40,7 +40,7 @@ module.exports = { test: /\.(js|jsx)$/, exclude: /node_modules/, use: { - loader: '@griffel/webpack-loader', + loader: '@griffel/webpack-plugin/loader', }, }, @@ -49,7 +49,7 @@ module.exports = { test: /\.(ts|tsx)$/, exclude: /node_modules/, use: { - loader: '@griffel/webpack-loader', + loader: '@griffel/webpack-plugin/loader', options: { babelOptions: { presets: ['@babel/preset-typescript'], @@ -72,7 +72,7 @@ module.exports = { test: /\.styles.ts$/, exclude: /node_modules/, use: { - loader: '@griffel/webpack-loader', + loader: '@griffel/webpack-plugin/loader', options: { babelOptions: { presets: ['@babel/preset-typescript'], @@ -99,7 +99,7 @@ module.exports = { exclude: /node_modules/, use: [ { - loader: '@griffel/webpack-loader', + loader: '@griffel/webpack-plugin/loader', }, ], }); @@ -110,7 +110,7 @@ module.exports = { exclude: /node_modules/, use: [ { - loader: '@griffel/webpack-loader', + loader: '@griffel/webpack-plugin/loader', options: { babelOptions: { presets: ['next/babel'], @@ -127,4 +127,4 @@ module.exports = { ## Configuration -Please check [the README](https://github.com/microsoft/griffel/tree/main/packages/webpack-loader) of `@griffel/webpack-loader` to check how to configure module evaluation and imports. +Please check [the README](https://github.com/microsoft/griffel/tree/main/packages/webpack-plugin) of `@griffel/webpack-plugin` to check how to configure module evaluation and imports. diff --git a/apps/website/docs/react/css-extraction/with-nextjs.md b/apps/website/docs/react/css-extraction/with-nextjs.md index d44bbca22..af8b3e1ee 100644 --- a/apps/website/docs/react/css-extraction/with-nextjs.md +++ b/apps/website/docs/react/css-extraction/with-nextjs.md @@ -30,11 +30,11 @@ npm install --save-dev @griffel/next-extraction-plugin :::info -Please configure [`@griffel/webpack-loader`](/react/ahead-of-time-compilation/with-webpack) first. +Please configure [`@griffel/webpack-plugin`](/react/ahead-of-time-compilation/with-webpack) first. ::: -In `next.config.js` file you'll need to add the next-plugin from `@griffel/webpack-extraction-plugin` like so: +In `next.config.js` file you'll need to add the next-plugin from `@griffel/next-extraction-plugin` like so: ```js // next.config.js @@ -47,7 +47,7 @@ module.exports = withGriffelCSSExtraction()({ exclude: /node_modules/, use: [ { - loader: '@griffel/webpack-loader', + loader: '@griffel/webpack-plugin/loader', }, ], }); @@ -58,7 +58,7 @@ module.exports = withGriffelCSSExtraction()({ exclude: /node_modules/, use: [ { - loader: '@griffel/webpack-loader', + loader: '@griffel/webpack-plugin/loader', options: { babelOptions: { presets: ['next/babel'], diff --git a/apps/website/docs/react/css-extraction/with-webpack.md b/apps/website/docs/react/css-extraction/with-webpack.md index 9e78b96fb..df8aa1d61 100644 --- a/apps/website/docs/react/css-extraction/with-webpack.md +++ b/apps/website/docs/react/css-extraction/with-webpack.md @@ -13,14 +13,14 @@ import TabItem from '@theme/TabItem'; ```shell -yarn add --dev @griffel/webpack-extraction-plugin +yarn add --dev @griffel/webpack-plugin ``` ```shell -npm install --save-dev @griffel/webpack-extraction-plugin +npm install --save-dev @griffel/webpack-plugin ``` @@ -28,16 +28,10 @@ npm install --save-dev @griffel/webpack-extraction-plugin ## Usage -:::info - -Please configure [`@griffel/webpack-loader`](/react/ahead-of-time-compilation/with-webpack) first. - -::: - -Within your Webpack configuration object, you'll need to add the loader and the plugin from `@griffel/webpack-extraction-plugin` like so: +Within your Webpack configuration object, you'll need to add the loader and the plugin from `@griffel/webpack-plugin` like so: ```js -const { GriffelCSSExtractionPlugin } = require('@griffel/webpack-extraction-plugin'); +const { GriffelPlugin } = require('@griffel/webpack-plugin'); const MiniCssExtractPlugin = require('mini-css-extract-plugin'); module.exports = { @@ -48,20 +42,7 @@ module.exports = { // Apply "exclude" only if your dependencies **do not use** Griffel // exclude: /node_modules/, use: { - loader: GriffelCSSExtractionPlugin.loader, - }, - }, - // Add "@griffel/webpack-loader" if you use Griffel directly in your project - { - test: /\.(ts|tsx)$/, - exclude: /node_modules/, - use: { - loader: '@griffel/webpack-loader', - options: { - babelOptions: { - presets: ['@babel/preset-typescript'], - }, - }, + loader: '@griffel/webpack-plugin/loader', }, }, // "css-loader" is required to handle produced CSS assets by Griffel @@ -72,7 +53,7 @@ module.exports = { }, ], }, - plugins: [new MiniCssExtractPlugin(), new GriffelCSSExtractionPlugin()], + plugins: [new MiniCssExtractPlugin(), new GriffelPlugin()], }; ``` @@ -84,10 +65,10 @@ module.exports = { ::: -For better performance (to process less files) consider using `include` for `GriffelCSSExtractionPlugin.loader`: +For better performance (to process less files) consider using `include` for `@griffel/webpack-plugin/loader`: ```js -const { GriffelCSSExtractionPlugin } = require('@griffel/webpack-extraction-plugin'); +const { GriffelPlugin } = require('@griffel/webpack-plugin'); const MiniCssExtractPlugin = require('mini-css-extract-plugin'); module.exports = { @@ -101,7 +82,7 @@ module.exports = { // see https://webpack.js.org/configuration/module/#condition ], use: { - loader: GriffelCSSExtractionPlugin.loader, + loader: '@griffel/webpack-plugin/loader', }, }, ], @@ -116,9 +97,6 @@ If you use `mini-css-extract-plugin`, you may need to set it to `false` to remov ``` WARNING in chunk griffel [mini-css-extract-plugin] Conflicting order. Following module has been added: -* css ./node_modules/css-loader/dist/cjs.js!./node_modules/@griffel/webpack-extraction-plugin/virtual-loader/index.js?style=%2F**%20%40griffel%3Acss-start%20%5Bd%5D%20**%2F%0A.fm40iov%7Bcolor%3A%23ccc%3B%7D%0A%2F**%20%40griffel%3Acss-end%20**%2F%0A!./src/foo-module/baz.js - despite it was not able to fulfill desired ordering with these modules: -* css ./node_modules/css-loader/dist/cjs.js!./node_modules/@griffel/webpack-extraction-plugin/virtual-loader/index.js?style=%2F**%20%40griffel%3Acss-start%20%5Bd%5D%20**%2F%0A.f1e30ogq%7Bcolor%3Ablueviolet%3B%7D%0A%2F**%20%40griffel%3Acss-end%20**%2F%0A!./src/foo-module/qux.js - couldn't fulfill desired order of chunk group(s) ``` diff --git a/e2e/rspack/project.json b/e2e/rspack/project.json index a5ce4e01e..d8296cdfa 100644 --- a/e2e/rspack/project.json +++ b/e2e/rspack/project.json @@ -3,7 +3,7 @@ "$schema": "../../node_modules/nx/schemas/project-schema.json", "sourceRoot": "e2e/rspack/src", "projectType": "library", - "implicitDependencies": ["@griffel/webpack-loader"], + "implicitDependencies": ["@griffel/webpack-plugin"], "targets": { "test": { "executor": "nx:run-commands", diff --git a/e2e/rspack/src/assets/rspack.config.js b/e2e/rspack/src/assets/rspack.config.js index e2b46f448..75309635f 100644 --- a/e2e/rspack/src/assets/rspack.config.js +++ b/e2e/rspack/src/assets/rspack.config.js @@ -1,7 +1,6 @@ // @ts-check -const { GriffelCSSExtractionPlugin } = require('@griffel/webpack-extraction-plugin'); -const path = require('path'); +const { GriffelPlugin } = require('@griffel/webpack-plugin'); /** * @type {import('@rspack/core').Configuration} @@ -22,17 +21,11 @@ const config = { { test: /\.js$/, exclude: /node_modules/, - use: [{ loader: GriffelCSSExtractionPlugin.loader }, { loader: '@griffel/webpack-loader' }], + use: [{ loader: '@griffel/webpack-plugin/loader' }], }, ], }, - plugins: [/** @type {any} */ (new GriffelCSSExtractionPlugin())], - resolve: { - alias: { - 'fake-module': path.resolve(__dirname, 'src', 'Component.js'), - 'fake-colors': path.resolve(__dirname, 'src', 'colors.js'), - }, - }, + plugins: [/** @type {any} */ (new GriffelPlugin())], }; module.exports = config; diff --git a/e2e/rspack/src/assets/src/Component.js b/e2e/rspack/src/assets/src/Component.js index 3fa3da096..bcda77aea 100644 --- a/e2e/rspack/src/assets/src/Component.js +++ b/e2e/rspack/src/assets/src/Component.js @@ -1,6 +1,5 @@ import { makeResetStyles, makeStyles } from '@griffel/react'; -// @ts-expect-error It's a fake module resolved via aliases -import { colors } from 'fake-colors'; +import { colors } from './colors.js'; const useClasses = makeStyles({ root: { diff --git a/e2e/rspack/src/assets/src/index.js b/e2e/rspack/src/assets/src/index.js index 63b7c27e0..fe97f0f0e 100644 --- a/e2e/rspack/src/assets/src/index.js +++ b/e2e/rspack/src/assets/src/index.js @@ -1,4 +1,3 @@ -// @ts-expect-error It's a fake module resolved via aliases -import { Component } from 'fake-module'; +import { Component } from './Component.js'; console.log(Component); diff --git a/e2e/rspack/src/test.ts b/e2e/rspack/src/test.ts index b532efc4f..1cda86713 100644 --- a/e2e/rspack/src/test.ts +++ b/e2e/rspack/src/test.ts @@ -26,9 +26,9 @@ async function performTest() { packLocalPackage(rootDir, tempDir, '@griffel/style-types'), packLocalPackage(rootDir, tempDir, '@griffel/core'), packLocalPackage(rootDir, tempDir, '@griffel/react'), - packLocalPackage(rootDir, tempDir, '@griffel/babel-preset'), - packLocalPackage(rootDir, tempDir, '@griffel/webpack-extraction-plugin'), - packLocalPackage(rootDir, tempDir, '@griffel/webpack-loader'), + packLocalPackage(rootDir, tempDir, '@griffel/transform-shaker'), + packLocalPackage(rootDir, tempDir, '@griffel/transform'), + packLocalPackage(rootDir, tempDir, '@griffel/webpack-plugin'), ]); const rspackVersion = (await sh(`yarn rspack --version`, rootDir, true)).trim(); diff --git a/packages/transform-shaker/package.json b/packages/transform-shaker/package.json index 3431d5fdd..0eb52168d 100644 --- a/packages/transform-shaker/package.json +++ b/packages/transform-shaker/package.json @@ -8,10 +8,12 @@ "url": "https://github.com/microsoft/griffel" }, "type": "module", + "main": "./src/index.js", + "types": "./src/index.d.ts", "exports": { ".": { - "node": "./transform-shaker.js", - "types": "./index.d.mts" + "types": "./src/index.d.ts", + "default": "./src/index.js" }, "./package.json": "./package.json" }, diff --git a/packages/transform-shaker/project.json b/packages/transform-shaker/project.json index 7e017c20f..9c49f36e3 100644 --- a/packages/transform-shaker/project.json +++ b/packages/transform-shaker/project.json @@ -17,12 +17,22 @@ } }, "build": { - "executor": "@nx/vite:build", + "executor": "@nx/js:tsc", "outputs": ["{options.outputPath}"], "options": { "outputPath": "dist/packages/transform-shaker", - "compiler": "swc", - "format": ["esm"] + "tsConfig": "packages/transform-shaker/tsconfig.lib.json", + "skipTypeField": true, + "packageJson": "packages/transform-shaker/package.json", + "main": "packages/transform-shaker/src/index.ts", + "assets": [ + "packages/transform-shaker/README.md", + { + "glob": "LICENSE.md", + "input": ".", + "output": "." + } + ] } }, "type-check": { diff --git a/packages/transform-shaker/tsconfig.lib.json b/packages/transform-shaker/tsconfig.lib.json index 4ed42b2e1..e52065737 100644 --- a/packages/transform-shaker/tsconfig.lib.json +++ b/packages/transform-shaker/tsconfig.lib.json @@ -1,6 +1,8 @@ { "extends": "./tsconfig.json", "compilerOptions": { + "module": "ESNext", + "moduleResolution": "bundler", "outDir": "../../dist/out-tsc", "declaration": true, "types": ["node"] diff --git a/packages/transform-shaker/vite.config.ts b/packages/transform-shaker/vite.config.ts deleted file mode 100644 index 7f0cdef7b..000000000 --- a/packages/transform-shaker/vite.config.ts +++ /dev/null @@ -1,46 +0,0 @@ -/// -import { nxViteTsPaths } from '@nx/vite/plugins/nx-tsconfig-paths.plugin'; -import { nxCopyAssetsPlugin } from '@nx/vite/plugins/nx-copy-assets.plugin'; -import { defineConfig } from 'vite'; -import dts from 'vite-plugin-dts'; -import { readFileSync } from 'node:fs'; -import { join, resolve } from 'node:path'; - -const packageJson = JSON.parse(readFileSync(join(__dirname, 'package.json'), 'utf-8')); - -const dependencies: string[] = Object.keys(packageJson.dependencies || {}); -const external = ([/node:/] as (string | RegExp)[]).concat(dependencies); - -export default defineConfig(() => ({ - root: __dirname, - cacheDir: '../../node_modules/.vite/packages/transform-shaker', - plugins: [ - nxViteTsPaths(), - nxCopyAssetsPlugin(['*.md']), - dts({ entryRoot: 'src', tsconfigPath: join(__dirname, 'tsconfig.lib.json'), pathsToAliases: false }), - ], - build: { - emptyOutDir: true, - lib: { - entry: resolve(__dirname, 'src/index.ts'), - formats: ['es' as const], - target: 'node20' as const, - }, - rollupOptions: { - external, - }, - minify: false, - }, - test: { - watch: false, - globals: true, - passWithNoTests: true, - environment: 'node', - include: ['{src,tests}/**/*.{test,spec}.{js,mjs,cjs,ts,mts,cts,jsx,tsx}'], - reporters: ['default'], - coverage: { - reportsDirectory: '../../coverage/packages/transform-shaker', - provider: 'v8' as const, - }, - }, -})); diff --git a/packages/transform-shaker/vitest.config.mts b/packages/transform-shaker/vitest.config.mts new file mode 100644 index 000000000..05078158b --- /dev/null +++ b/packages/transform-shaker/vitest.config.mts @@ -0,0 +1,20 @@ +import { defineConfig } from 'vitest/config'; +import { nxViteTsPaths } from '@nx/vite/plugins/nx-tsconfig-paths.plugin'; + +export default defineConfig({ + root: __dirname, + cacheDir: '../../node_modules/.vite/packages/transform-shaker', + plugins: [nxViteTsPaths()], + test: { + watch: false, + globals: true, + passWithNoTests: true, + environment: 'node', + include: ['{src,tests}/**/*.{test,spec}.{js,mjs,cjs,ts,mts,cts,jsx,tsx}'], + reporters: ['default'], + coverage: { + reportsDirectory: '../../coverage/packages/transform-shaker', + provider: 'v8', + }, + }, +}); diff --git a/packages/transform/package.json b/packages/transform/package.json index a5bfba035..7825c5c7a 100644 --- a/packages/transform/package.json +++ b/packages/transform/package.json @@ -8,10 +8,12 @@ "url": "https://github.com/microsoft/griffel" }, "type": "module", + "main": "./src/index.mjs", + "types": "./src/index.d.mts", "exports": { ".": { - "node": "./transform.js", - "types": "./index.d.mts" + "types": "./src/index.d.mts", + "default": "./src/index.mjs" }, "./package.json": "./package.json" }, diff --git a/packages/transform/project.json b/packages/transform/project.json index b945f9777..8ed24e6f5 100644 --- a/packages/transform/project.json +++ b/packages/transform/project.json @@ -17,12 +17,22 @@ } }, "build": { - "executor": "@nx/vite:build", + "executor": "@nx/js:tsc", "outputs": ["{options.outputPath}"], "options": { "outputPath": "dist/packages/transform", - "compiler": "swc", - "format": ["esm"] + "tsConfig": "packages/transform/tsconfig.lib.json", + "skipTypeField": true, + "packageJson": "packages/transform/package.json", + "main": "packages/transform/src/index.mts", + "assets": [ + "packages/transform/README.md", + { + "glob": "LICENSE.md", + "input": ".", + "output": "." + } + ] } }, "type-check": { diff --git a/packages/transform/tsconfig.lib.json b/packages/transform/tsconfig.lib.json index a99a4ea5c..6d2b82de4 100644 --- a/packages/transform/tsconfig.lib.json +++ b/packages/transform/tsconfig.lib.json @@ -1,6 +1,8 @@ { "extends": "./tsconfig.json", "compilerOptions": { + "module": "ESNext", + "moduleResolution": "bundler", "outDir": "../../dist/out-tsc", "declaration": true, "types": ["node", "environment"] diff --git a/packages/transform/vite.config.ts b/packages/transform/vite.config.ts deleted file mode 100644 index b965b0f6c..000000000 --- a/packages/transform/vite.config.ts +++ /dev/null @@ -1,49 +0,0 @@ -/// -import { nxViteTsPaths } from '@nx/vite/plugins/nx-tsconfig-paths.plugin'; -import { nxCopyAssetsPlugin } from '@nx/vite/plugins/nx-copy-assets.plugin'; -import { defineConfig } from 'vite'; -import dts from 'vite-plugin-dts'; -import { readFileSync } from 'node:fs'; -import { join, resolve } from 'node:path'; - -const packageJson = JSON.parse(readFileSync(join(__dirname, 'package.json'), 'utf-8')); - -const dependencies: string[] = Object.keys(packageJson.dependencies || {}); -const external = ([/node:/] as (string | RegExp)[]).concat(dependencies); - -export default defineConfig(() => ({ - root: __dirname, - cacheDir: '../../node_modules/.vite/packages/transform', - plugins: [ - nxViteTsPaths(), - nxCopyAssetsPlugin(['*.md']), - dts({ entryRoot: 'src', tsconfigPath: join(__dirname, 'tsconfig.lib.json'), pathsToAliases: false }), - ], - // Uncomment this if you are using workers. - // worker: { - // plugins: [ nxViteTsPaths() ], - // }, - build: { - emptyOutDir: true, - lib: { - entry: resolve(__dirname, 'src/index.mts'), - formats: ['es' as const], - target: 'node20' as const, - }, - rollupOptions: { - external, - }, - minify: false, - }, - test: { - watch: false, - globals: true, - environment: 'node', - include: ['{src,tests}/**/*.{test,spec}.{js,mjs,cjs,ts,mts,cts,jsx,tsx}'], - reporters: ['default'], - coverage: { - reportsDirectory: '../../coverage/packages/transform', - provider: 'v8' as const, - }, - }, -})); diff --git a/packages/transform/vitest.config.mts b/packages/transform/vitest.config.mts new file mode 100644 index 000000000..b0432da6c --- /dev/null +++ b/packages/transform/vitest.config.mts @@ -0,0 +1,19 @@ +import { defineConfig } from 'vitest/config'; +import { nxViteTsPaths } from '@nx/vite/plugins/nx-tsconfig-paths.plugin'; + +export default defineConfig({ + root: __dirname, + cacheDir: '../../node_modules/.vite/packages/transform', + plugins: [nxViteTsPaths()], + test: { + watch: false, + globals: true, + environment: 'node', + include: ['{src,tests}/**/*.{test,spec}.{js,mjs,cjs,ts,mts,cts,jsx,tsx}'], + reporters: ['default'], + coverage: { + reportsDirectory: '../../coverage/packages/transform', + provider: 'v8', + }, + }, +}); diff --git a/packages/webpack-plugin/package.json b/packages/webpack-plugin/package.json index 530daa8ca..fd9f32599 100644 --- a/packages/webpack-plugin/package.json +++ b/packages/webpack-plugin/package.json @@ -8,14 +8,16 @@ "url": "https://github.com/microsoft/griffel" }, "type": "module", + "main": "./src/index.mjs", + "types": "./src/index.d.mts", "exports": { ".": { - "node": "./webpack-plugin.js", - "types": "./index.d.mts" + "types": "./src/index.d.mts", + "default": "./src/index.mjs" }, "./loader": { - "node": "./webpack-loader.js", - "types": "./webpackLoader.d.mts" + "types": "./src/webpackLoader.d.mts", + "default": "./src/webpackLoader.mjs" }, "./package.json": "./package.json" }, diff --git a/packages/webpack-plugin/project.json b/packages/webpack-plugin/project.json index 74428db48..ecfdf61c3 100644 --- a/packages/webpack-plugin/project.json +++ b/packages/webpack-plugin/project.json @@ -10,12 +10,27 @@ "outputs": ["{options.outputFile}"] }, "build": { - "executor": "@nx/vite:build", + "executor": "@nx/js:tsc", "outputs": ["{options.outputPath}"], "options": { "outputPath": "dist/packages/webpack-plugin", - "compiler": "swc", - "format": ["esm"] + "tsConfig": "packages/webpack-plugin/tsconfig.lib.json", + "skipTypeField": true, + "packageJson": "packages/webpack-plugin/package.json", + "main": "packages/webpack-plugin/src/index.mts", + "assets": [ + "packages/webpack-plugin/README.md", + { + "glob": "LICENSE.md", + "input": ".", + "output": "." + }, + { + "glob": "*", + "input": "packages/webpack-plugin/src/virtual-loader", + "output": "src/virtual-loader" + } + ] } }, "type-check": { diff --git a/packages/webpack-plugin/src/GriffelPlugin.mts b/packages/webpack-plugin/src/GriffelPlugin.mts index 2066e7fbe..920f54ed8 100644 --- a/packages/webpack-plugin/src/GriffelPlugin.mts +++ b/packages/webpack-plugin/src/GriffelPlugin.mts @@ -121,7 +121,10 @@ export class GriffelPlugin { evaluationMode: 'ast' | 'vm'; } > = {}; - readonly #perfIssues: Map }> = new Map(); + readonly #perfIssues: Map< + string, + { type: 'cjs-module' | 'barrel-export-star'; dependencyFilename: string; sourceFilenames: Set } + > = new Map(); constructor(options: GriffelCSSExtractionPluginOptions = {}) { this.#attachToEntryPoint = options.unstable_attachToEntryPoint; @@ -144,8 +147,7 @@ export class GriffelPlugin { // Webpack to shake out generated CSS. // @ Rspack compat: - // "createModule" in "normalModuleFactory" is not supported by Rspack - // https://github.com/web-infra-dev/rspack/blob/e52601e059fff1f0cdc4e9328746fb3ae6c3ecb2/packages/rspack/src/NormalModuleFactory.ts#L53 + // "createModule" in "normalModuleFactory" is supported by Rspack, but updates of `settings` are ignored if (!IS_RSPACK) { compiler.hooks.normalModuleFactory.tap(PLUGIN_NAME, nmf => { nmf.hooks.createModule.tap( @@ -181,70 +183,65 @@ export class GriffelPlugin { compiler.hooks.compilation.tap(PLUGIN_NAME, compilation => { const resolveModule = this.#resolverFactory(compilation); - // @ Rspack compat - // As Rspack does not support functions in "splitChunks.cacheGroups" we have to emit modules differently - // and can't rely on this approach due - if (!IS_RSPACK) { - // WHAT? - // Adds a callback to the loader context - // WHY? - // Allows us to register the CSS extracted from Griffel calls to then process in a CSS module - const cssByModuleMap = new Map(); - - NormalModule.getCompilationHooks(compilation).loader.tap(PLUGIN_NAME, (loaderContext, module) => { - const resourcePath = module.resource; - - (loaderContext as SupplementedLoaderContext)[GriffelCssLoaderContextKey] = { - collectPerfIssues: this.#collectPerfIssues, - resolveModule, - registerExtractedCss(css: string) { - cssByModuleMap.set(resourcePath, css); - }, - getExtractedCss() { - const css = cssByModuleMap.get(resourcePath) ?? ''; - cssByModuleMap.delete(resourcePath); - - return css; - }, - runWithTimer: cb => { - if (!this.#collectStats && !this.#collectPerfIssues) { - return cb().result; - } + // WHAT? + // Adds a callback to the loader context + // WHY? + // Allows us to register the CSS extracted from Griffel calls to then process in a CSS module + const cssByModuleMap = new Map(); - const start = this.#collectStats ? process.hrtime.bigint() : 0n; - const { meta, result } = cb(); + NormalModule.getCompilationHooks(compilation).loader.tap(PLUGIN_NAME, (loaderContext, module) => { + const resourcePath = module.resource; - if (this.#collectStats) { - const end = process.hrtime.bigint(); + (loaderContext as SupplementedLoaderContext)[GriffelCssLoaderContextKey] = { + collectPerfIssues: this.#collectPerfIssues, + resolveModule, + registerExtractedCss(css: string) { + cssByModuleMap.set(resourcePath, css); + }, + getExtractedCss() { + const css = cssByModuleMap.get(resourcePath) ?? ''; + cssByModuleMap.delete(resourcePath); - this.#stats[meta.filename] = { - time: end - start, - evaluationMode: meta.evaluationMode, - }; - } + return css; + }, + runWithTimer: cb => { + if (!this.#collectStats && !this.#collectPerfIssues) { + return cb().result; + } + + const start = this.#collectStats ? process.hrtime.bigint() : 0n; + const { meta, result } = cb(); + + if (this.#collectStats) { + const end = process.hrtime.bigint(); + + this.#stats[meta.filename] = { + time: end - start, + evaluationMode: meta.evaluationMode, + }; + } - if (this.#collectPerfIssues && meta.perfIssues) { - for (const issue of meta.perfIssues) { - const key = `${issue.type}:${issue.dependencyFilename}`; - const existing = this.#perfIssues.get(key); - - if (existing) { - existing.sourceFilenames.add(meta.filename); - } else { - this.#perfIssues.set(key, { - type: issue.type, - dependencyFilename: issue.dependencyFilename, - sourceFilenames: new Set([meta.filename]), - }); - } + if (this.#collectPerfIssues && meta.perfIssues) { + for (const issue of meta.perfIssues) { + const key = `${issue.type}:${issue.dependencyFilename}`; + const existing = this.#perfIssues.get(key); + + if (existing) { + existing.sourceFilenames.add(meta.filename); + } else { + this.#perfIssues.set(key, { + type: issue.type, + dependencyFilename: issue.dependencyFilename, + sourceFilenames: new Set([meta.filename]), + }); } } + } - return result; - }, - }; - }); - } + return result; + }, + }; + }); // WHAT? // Performs module movements between chunks if SplitChunksPlugin is not enabled. @@ -297,24 +294,14 @@ export class GriffelPlugin { stage: Compilation.PROCESS_ASSETS_STAGE_PRE_PROCESS, }, assets => { - let cssAssetDetails; - - // @ Rspack compat - // "compilation.namedChunks.get()" explodes with Rspack - if (IS_RSPACK) { - cssAssetDetails = Object.entries(assets).find( - ([assetName]) => assetName.endsWith('.css') && assetName.includes('griffel'), - ); - } else { - const griffelChunk = compilation.namedChunks.get('griffel'); - - if (typeof griffelChunk === 'undefined') { - return; - } + const griffelChunk = compilation.namedChunks.get('griffel'); - cssAssetDetails = Object.entries(assets).find(([assetName]) => griffelChunk.files.has(assetName)); + if (typeof griffelChunk === 'undefined') { + return; } + const cssAssetDetails = Object.entries(assets).find(([assetName]) => griffelChunk.files.has(assetName)); + if (typeof cssAssetDetails === 'undefined') { return; } diff --git a/packages/webpack-plugin/src/webpackLoader.mts b/packages/webpack-plugin/src/webpackLoader.mts index 8061c1983..510a1cb9b 100644 --- a/packages/webpack-plugin/src/webpackLoader.mts +++ b/packages/webpack-plugin/src/webpackLoader.mts @@ -30,19 +30,17 @@ function webpackLoader( this.cacheable(); // Early return to handle cases when there is no Griffel usage in the file - if (sourceCode.indexOf('makeStyles') === -1 && sourceCode.indexOf('makeResetStyles') === -1 && sourceCode.indexOf('makeStaticStyles') === -1) { + if ( + sourceCode.indexOf('makeStyles') === -1 && + sourceCode.indexOf('makeResetStyles') === -1 && + sourceCode.indexOf('makeStaticStyles') === -1 + ) { this.callback(null, sourceCode, inputSourceMap); return; } - const IS_RSPACK = !this.webpack; - - // @ Rspack compat: - // We don't use the trick with loader context as assets are generated differently - if (!IS_RSPACK) { - if (!this[GriffelCssLoaderContextKey]) { - throw new Error('GriffelCSSExtractionPlugin is not configured, please check your webpack config'); - } + if (!this[GriffelCssLoaderContextKey]) { + throw new Error('GriffelCSSExtractionPlugin is not configured, please check your webpack config'); } const { classNameHashSalt, modules, evaluationRules } = this.getOptions(); @@ -92,7 +90,9 @@ function webpackLoader( return { result: undefined, meta }; } - if (IS_RSPACK) { + // Rspack compat: + // Support of CSS extraction is weird in Rspack, revisit later. + if (!this.webpack) { const request = `griffel.css!=!${virtualLoaderPath}!${virtualCSSFilePath}?style=${toURIComponent(css)}`; const stringifiedRequest = JSON.stringify(this.utils.contextify(this.context || this.rootContext, request)); diff --git a/packages/webpack-plugin/tsconfig.lib.json b/packages/webpack-plugin/tsconfig.lib.json index a99a4ea5c..6d2b82de4 100644 --- a/packages/webpack-plugin/tsconfig.lib.json +++ b/packages/webpack-plugin/tsconfig.lib.json @@ -1,6 +1,8 @@ { "extends": "./tsconfig.json", "compilerOptions": { + "module": "ESNext", + "moduleResolution": "bundler", "outDir": "../../dist/out-tsc", "declaration": true, "types": ["node", "environment"] diff --git a/packages/webpack-plugin/vite.config.ts b/packages/webpack-plugin/vite.config.ts deleted file mode 100644 index b13732a7b..000000000 --- a/packages/webpack-plugin/vite.config.ts +++ /dev/null @@ -1,64 +0,0 @@ -/// -import { nxViteTsPaths } from '@nx/vite/plugins/nx-tsconfig-paths.plugin'; -import { nxCopyAssetsPlugin } from '@nx/vite/plugins/nx-copy-assets.plugin'; -import { defineConfig } from 'vite'; -import dts from 'vite-plugin-dts'; -import { readFileSync } from 'node:fs'; -import { join, resolve } from 'node:path'; - -const packageJson = JSON.parse(readFileSync(join(__dirname, 'package.json'), 'utf-8')); - -const dependencies: string[] = Object.keys({ - ...(packageJson.dependencies || {}), - ...(packageJson.peerDependencies || {}), -}); -const external = ([/node:/] as (string | RegExp)[]).concat(dependencies); - -export default defineConfig(() => ({ - root: __dirname, - cacheDir: '../../node_modules/.vite/packages/webpack-plugin', - plugins: [ - nxViteTsPaths(), - nxCopyAssetsPlugin([ - '*.md', - { - glob: '*', - input: 'src/virtual-loader', - output: 'virtual-loader', - }, - ]), - dts({ entryRoot: 'src', tsconfigPath: join(__dirname, 'tsconfig.lib.json'), pathsToAliases: false }), - ], - - // Uncomment this if you are using workers. - // worker: { - // plugins: [ nxViteTsPaths() ], - // }, - - build: { - emptyOutDir: true, - lib: { - entry: { - 'webpack-plugin': resolve(__dirname, 'src/index.mts'), - 'webpack-loader': resolve(__dirname, 'src/webpackLoader.mts'), - }, - formats: ['es' as const], - target: 'node20' as const, - }, - rollupOptions: { - external, - }, - minify: false, - }, - test: { - watch: false, - globals: true, - environment: 'node', - include: ['{src,tests}/**/*.{test,spec}.{js,mjs,cjs,ts,mts,cts,jsx,tsx}'], - reporters: ['default'], - coverage: { - reportsDirectory: '../../coverage/packages/webpack-plugin', - provider: 'v8' as const, - }, - }, -})); diff --git a/packages/webpack-plugin/vitest.config.mts b/packages/webpack-plugin/vitest.config.mts new file mode 100644 index 000000000..787a10138 --- /dev/null +++ b/packages/webpack-plugin/vitest.config.mts @@ -0,0 +1,19 @@ +import { defineConfig } from 'vitest/config'; +import { nxViteTsPaths } from '@nx/vite/plugins/nx-tsconfig-paths.plugin'; + +export default defineConfig({ + root: __dirname, + cacheDir: '../../node_modules/.vite/packages/webpack-plugin', + plugins: [nxViteTsPaths()], + test: { + watch: false, + globals: true, + environment: 'node', + include: ['{src,tests}/**/*.{test,spec}.{js,mjs,cjs,ts,mts,cts,jsx,tsx}'], + reporters: ['default'], + coverage: { + reportsDirectory: '../../coverage/packages/webpack-plugin', + provider: 'v8', + }, + }, +});