From 003467f2469b010739708273a515712b9371b999 Mon Sep 17 00:00:00 2001 From: Jeroen Weelink Date: Mon, 4 Mar 2024 09:13:10 +0100 Subject: [PATCH 01/36] Fix link to function serialization API in the docs (#1340) --- site/docs/packages/recipes.md | 2 +- site/docs/packages/sprinkles.md | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/site/docs/packages/recipes.md b/site/docs/packages/recipes.md index c8760b89b..7fca0ddec 100644 --- a/site/docs/packages/recipes.md +++ b/site/docs/packages/recipes.md @@ -9,7 +9,7 @@ Create multi-variant styles with a type-safe runtime API, heavily inspired by [S As with the rest of vanilla-extract, all styles are generated at build time. -> πŸ’‘ Recipes is an optional package built on top of vanilla-extract using its [function serialization API.](../../api/add-function-serializer) It doesn't have privileged access to vanilla-extract internals so you're also free to build alternative implementations. +> πŸ’‘ Recipes is an optional package built on top of vanilla-extract using its [function serialization API.](../api/add-function-serializer) It doesn't have privileged access to vanilla-extract internals so you're also free to build alternative implementations. ## Setup diff --git a/site/docs/packages/sprinkles.md b/site/docs/packages/sprinkles.md index 201137bc0..e3eb4d606 100644 --- a/site/docs/packages/sprinkles.md +++ b/site/docs/packages/sprinkles.md @@ -11,7 +11,7 @@ Generate a static set of custom utility classes and compose them either statical Basically, it’s like building your own zero-runtime, type-safe version of [Tailwind], [Styled System], etc. -> πŸ’‘ Sprinkles is an optional package built on top of vanilla-extract using its [function serialization API.](../../api/add-function-serializer) It doesn't have privileged access to vanilla-extract internals so you're also free to build alternative implementations, e.g. [Rainbow Sprinkles.](https://github.com/wayfair/rainbow-sprinkles) +> πŸ’‘ Sprinkles is an optional package built on top of vanilla-extract using its [function serialization API.](../api/add-function-serializer) It doesn't have privileged access to vanilla-extract internals so you're also free to build alternative implementations, e.g. [Rainbow Sprinkles.](https://github.com/wayfair/rainbow-sprinkles) ## Setup From 3f8b65368b26100919debd4591245380322c2cd7 Mon Sep 17 00:00:00 2001 From: Levin Rickert Date: Mon, 4 Mar 2024 10:18:29 +0100 Subject: [PATCH 02/36] Improve type hint of recipe's runtime fn (#1341) Co-authored-by: Adam Skoufis --- .changeset/weak-cherries-beg.md | 5 +++++ packages/recipes/src/types.ts | 2 +- 2 files changed, 6 insertions(+), 1 deletion(-) create mode 100644 .changeset/weak-cherries-beg.md diff --git a/.changeset/weak-cherries-beg.md b/.changeset/weak-cherries-beg.md new file mode 100644 index 000000000..d78a846f8 --- /dev/null +++ b/.changeset/weak-cherries-beg.md @@ -0,0 +1,5 @@ +--- +"@vanilla-extract/recipes": patch +--- + +Resolve recipe function input type to simplify hover type diff --git a/packages/recipes/src/types.ts b/packages/recipes/src/types.ts index 6206778c8..c244356d0 100644 --- a/packages/recipes/src/types.ts +++ b/packages/recipes/src/types.ts @@ -46,7 +46,7 @@ export type RecipeClassNames = { }; export type RuntimeFn = (( - options?: VariantSelection, + options?: Resolve>, ) => string) & { variants: () => (keyof Variants)[]; classNames: RecipeClassNames; From cff97a7f44014a5da33e8c56b2980b991ec49dd3 Mon Sep 17 00:00:00 2001 From: vanilla-extract-ci <114379795+vanilla-extract-ci@users.noreply.github.com> Date: Mon, 4 Mar 2024 20:28:00 +1100 Subject: [PATCH 03/36] Version Packages (#1342) Co-authored-by: github-actions[bot] --- .changeset/weak-cherries-beg.md | 5 ----- fixtures/recipes/CHANGELOG.md | 7 +++++++ fixtures/recipes/package.json | 4 ++-- packages/recipes/CHANGELOG.md | 6 ++++++ packages/recipes/package.json | 2 +- pnpm-lock.yaml | 8 ++++---- 6 files changed, 20 insertions(+), 12 deletions(-) delete mode 100644 .changeset/weak-cherries-beg.md diff --git a/.changeset/weak-cherries-beg.md b/.changeset/weak-cherries-beg.md deleted file mode 100644 index d78a846f8..000000000 --- a/.changeset/weak-cherries-beg.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -"@vanilla-extract/recipes": patch ---- - -Resolve recipe function input type to simplify hover type diff --git a/fixtures/recipes/CHANGELOG.md b/fixtures/recipes/CHANGELOG.md index e8eb00e7a..29e0b30fa 100644 --- a/fixtures/recipes/CHANGELOG.md +++ b/fixtures/recipes/CHANGELOG.md @@ -1,5 +1,12 @@ # @fixtures/recipes +## 0.0.28 + +### Patch Changes + +- Updated dependencies [[`3f8b653`](https://github.com/vanilla-extract-css/vanilla-extract/commit/3f8b65368b26100919debd4591245380322c2cd7)]: + - @vanilla-extract/recipes@0.5.2 + ## 0.0.27 ### Patch Changes diff --git a/fixtures/recipes/package.json b/fixtures/recipes/package.json index dbf6fe410..be3ef9db4 100644 --- a/fixtures/recipes/package.json +++ b/fixtures/recipes/package.json @@ -1,12 +1,12 @@ { "name": "@fixtures/recipes", - "version": "0.0.27", + "version": "0.0.28", "main": "src/index.ts", "sideEffects": true, "author": "SEEK", "private": true, "dependencies": { "@vanilla-extract/css": "1.14.1", - "@vanilla-extract/recipes": "0.5.1" + "@vanilla-extract/recipes": "0.5.2" } } diff --git a/packages/recipes/CHANGELOG.md b/packages/recipes/CHANGELOG.md index ccffd6938..0d0d0ccfd 100644 --- a/packages/recipes/CHANGELOG.md +++ b/packages/recipes/CHANGELOG.md @@ -1,5 +1,11 @@ # @vanilla-extract/recipes +## 0.5.2 + +### Patch Changes + +- [#1341](https://github.com/vanilla-extract-css/vanilla-extract/pull/1341) [`3f8b653`](https://github.com/vanilla-extract-css/vanilla-extract/commit/3f8b65368b26100919debd4591245380322c2cd7) Thanks [@levrik](https://github.com/levrik)! - Resolve recipe function input type to simplify hover type + ## 0.5.1 ### Patch Changes diff --git a/packages/recipes/package.json b/packages/recipes/package.json index 4b584b0ad..3f85dcb7c 100644 --- a/packages/recipes/package.json +++ b/packages/recipes/package.json @@ -1,6 +1,6 @@ { "name": "@vanilla-extract/recipes", - "version": "0.5.1", + "version": "0.5.2", "description": "Create multi-variant styles with a type-safe runtime API, heavily inspired by https://stitches.dev", "sideEffects": false, "main": "dist/vanilla-extract-recipes.cjs.js", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 973e6cbed..70e319259 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -243,7 +243,7 @@ importers: specifier: 1.14.1 version: link:../../packages/css '@vanilla-extract/recipes': - specifier: 0.5.1 + specifier: 0.5.2 version: link:../../packages/recipes fixtures/sprinkles: @@ -6724,8 +6724,8 @@ packages: eslint-visitor-keys: 3.3.0 dev: true - /@vanilla-extract/babel-plugin-debug-ids@1.0.4: - resolution: {integrity: sha512-mevYcVMwsT6960xnXRw/Rr2K7SOEwzwVBApg/2SJ3eg2KGsHfj1rN0oQ12WdoTT3RzThq+0551bVQKPvQnjeaA==} + /@vanilla-extract/babel-plugin-debug-ids@1.0.5: + resolution: {integrity: sha512-Rc9A6ylsw7EBErmpgqCMvc/Z/eEZxI5k1xfLQHw7f5HHh3oc5YfzsAsYU/PdmSNjF1dp3sGEViBdDltvwnfVaA==} dependencies: '@babel/core': 7.23.9 transitivePeerDependencies: @@ -6753,7 +6753,7 @@ packages: dependencies: '@babel/core': 7.23.9 '@babel/plugin-syntax-typescript': 7.23.3(@babel/core@7.23.9) - '@vanilla-extract/babel-plugin-debug-ids': 1.0.4 + '@vanilla-extract/babel-plugin-debug-ids': 1.0.5 '@vanilla-extract/css': 1.14.1 esbuild: 0.19.12 eval: 0.1.8 From 94d5f0650fcc8ac736a0b6915bc495619c2a1880 Mon Sep 17 00:00:00 2001 From: Alex Yang Date: Thu, 7 Mar 2024 22:58:15 -0600 Subject: [PATCH 04/36] vite: Create compiler during `buildStart` instead of `configResolved` (#1353) Co-authored-by: Adam Skoufis --- .changeset/hungry-berries-deliver.md | 5 +++++ packages/vite-plugin/src/index.ts | 3 ++- 2 files changed, 7 insertions(+), 1 deletion(-) create mode 100644 .changeset/hungry-berries-deliver.md diff --git a/.changeset/hungry-berries-deliver.md b/.changeset/hungry-berries-deliver.md new file mode 100644 index 000000000..b9dd2a80e --- /dev/null +++ b/.changeset/hungry-berries-deliver.md @@ -0,0 +1,5 @@ +--- +"@vanilla-extract/vite-plugin": patch +--- + +Move `vite-node` compiler creation to a more appropriate plugin hook to ensure correct cleanup of resources diff --git a/packages/vite-plugin/src/index.ts b/packages/vite-plugin/src/index.ts index a67209f38..120d460a4 100644 --- a/packages/vite-plugin/src/index.ts +++ b/packages/vite-plugin/src/index.ts @@ -113,7 +113,8 @@ export function vanillaExtractPlugin({ async configResolved(_resolvedConfig) { config = _resolvedConfig; packageName = getPackageInfo(config.root).name; - + }, + async buildStart() { if (mode !== 'transform') { const { loadConfigFromFile } = await vitePromise; const configFile = await loadConfigFromFile( From d333453e8567568c06aa1c630e62cdb4bc98b97a Mon Sep 17 00:00:00 2001 From: vanilla-extract-ci <114379795+vanilla-extract-ci@users.noreply.github.com> Date: Fri, 8 Mar 2024 16:07:05 +1100 Subject: [PATCH 05/36] Version Packages (#1354) Co-authored-by: github-actions[bot] --- .changeset/hungry-berries-deliver.md | 5 ----- packages/vite-plugin/CHANGELOG.md | 6 ++++++ packages/vite-plugin/package.json | 2 +- 3 files changed, 7 insertions(+), 6 deletions(-) delete mode 100644 .changeset/hungry-berries-deliver.md diff --git a/.changeset/hungry-berries-deliver.md b/.changeset/hungry-berries-deliver.md deleted file mode 100644 index b9dd2a80e..000000000 --- a/.changeset/hungry-berries-deliver.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -"@vanilla-extract/vite-plugin": patch ---- - -Move `vite-node` compiler creation to a more appropriate plugin hook to ensure correct cleanup of resources diff --git a/packages/vite-plugin/CHANGELOG.md b/packages/vite-plugin/CHANGELOG.md index abfe54c55..ad79ae5e5 100644 --- a/packages/vite-plugin/CHANGELOG.md +++ b/packages/vite-plugin/CHANGELOG.md @@ -1,5 +1,11 @@ # @vanilla-extract/vite-plugin +## 4.0.5 + +### Patch Changes + +- [#1353](https://github.com/vanilla-extract-css/vanilla-extract/pull/1353) [`94d5f06`](https://github.com/vanilla-extract-css/vanilla-extract/commit/94d5f0650fcc8ac736a0b6915bc495619c2a1880) Thanks [@himself65](https://github.com/himself65)! - Move `vite-node` compiler creation to a more appropriate plugin hook to ensure correct cleanup of resources + ## 4.0.4 ### Patch Changes diff --git a/packages/vite-plugin/package.json b/packages/vite-plugin/package.json index 1f207f598..8bbc05246 100644 --- a/packages/vite-plugin/package.json +++ b/packages/vite-plugin/package.json @@ -1,6 +1,6 @@ { "name": "@vanilla-extract/vite-plugin", - "version": "4.0.4", + "version": "4.0.5", "description": "Zero-runtime Stylesheets-in-TypeScript", "main": "dist/vanilla-extract-vite-plugin.cjs.js", "module": "dist/vanilla-extract-vite-plugin.esm.js", From ebd698872bfe42c4f0e049419296a5bb597744e0 Mon Sep 17 00:00:00 2001 From: Adam Skoufis Date: Fri, 8 Mar 2024 21:41:08 +1100 Subject: [PATCH 06/36] docs: Fix broken links (#1352) Co-authored-by: Michael Taranto --- site/docs/api/add-function-serializer.md | 2 +- site/docs/packages/recipes.md | 2 +- site/docs/packages/sprinkles.md | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/site/docs/api/add-function-serializer.md b/site/docs/api/add-function-serializer.md index 5f5ebd546..1dd05f75c 100644 --- a/site/docs/api/add-function-serializer.md +++ b/site/docs/api/add-function-serializer.md @@ -9,7 +9,7 @@ parent: api Typically, if you try to export a function from one of your stylesheets, you'll get an error that you can only export plain objects, arrays, strings, numbers and `null`/`undefined`. -If you're wanting to create higher level abstractions like [Sprinkles](../../packages/sprinkles) or [Recipes](../../packages/recipes), this is a big problem! +If you're wanting to create higher level abstractions like [Sprinkles](/documentation/packages/sprinkles) or [Recipes](/documentation/packages/recipes), this is a big problem! To address this limitation, the `addFunctionSerializer` utility allows you to annotate your functions with instructions on how to serialize them. diff --git a/site/docs/packages/recipes.md b/site/docs/packages/recipes.md index 7fca0ddec..160afbe0d 100644 --- a/site/docs/packages/recipes.md +++ b/site/docs/packages/recipes.md @@ -9,7 +9,7 @@ Create multi-variant styles with a type-safe runtime API, heavily inspired by [S As with the rest of vanilla-extract, all styles are generated at build time. -> πŸ’‘ Recipes is an optional package built on top of vanilla-extract using its [function serialization API.](../api/add-function-serializer) It doesn't have privileged access to vanilla-extract internals so you're also free to build alternative implementations. +> πŸ’‘ Recipes is an optional package built on top of vanilla-extract using its [function serialization API.](/documentation/api/add-function-serializer) It doesn't have privileged access to vanilla-extract internals so you're also free to build alternative implementations. ## Setup diff --git a/site/docs/packages/sprinkles.md b/site/docs/packages/sprinkles.md index e3eb4d606..58480b100 100644 --- a/site/docs/packages/sprinkles.md +++ b/site/docs/packages/sprinkles.md @@ -11,7 +11,7 @@ Generate a static set of custom utility classes and compose them either statical Basically, it’s like building your own zero-runtime, type-safe version of [Tailwind], [Styled System], etc. -> πŸ’‘ Sprinkles is an optional package built on top of vanilla-extract using its [function serialization API.](../api/add-function-serializer) It doesn't have privileged access to vanilla-extract internals so you're also free to build alternative implementations, e.g. [Rainbow Sprinkles.](https://github.com/wayfair/rainbow-sprinkles) +> πŸ’‘ Sprinkles is an optional package built on top of vanilla-extract using its [function serialization API.](/documentation/api/add-function-serializer) It doesn't have privileged access to vanilla-extract internals so you're also free to build alternative implementations, e.g. [Rainbow Sprinkles.](https://github.com/wayfair/rainbow-sprinkles) ## Setup From 8c2ac42479b9646f54c6064b6848485560b15005 Mon Sep 17 00:00:00 2001 From: Adam Skoufis Date: Fri, 8 Mar 2024 21:49:22 +1100 Subject: [PATCH 07/36] vite: Fix `.css.ts` file resolution on Windows (#1346) --- .changeset/eight-peas-provide.md | 5 +++++ packages/vite-plugin/src/index.ts | 4 +++- 2 files changed, 8 insertions(+), 1 deletion(-) create mode 100644 .changeset/eight-peas-provide.md diff --git a/.changeset/eight-peas-provide.md b/.changeset/eight-peas-provide.md new file mode 100644 index 000000000..526bd416b --- /dev/null +++ b/.changeset/eight-peas-provide.md @@ -0,0 +1,5 @@ +--- +'@vanilla-extract/vite-plugin': patch +--- + +Fix `.css.ts` file resolution on Windows diff --git a/packages/vite-plugin/src/index.ts b/packages/vite-plugin/src/index.ts index 120d460a4..2ec779d58 100644 --- a/packages/vite-plugin/src/index.ts +++ b/packages/vite-plugin/src/index.ts @@ -47,8 +47,10 @@ export function vanillaExtractPlugin({ if ( filePath.startsWith(config.root) || // In monorepos the absolute path will be outside of config.root, so we check that they have the same root on the file system + // Paths from vite are always normalized, so we have to use the posix path separator (path.isAbsolute(filePath) && - filePath.split(path.sep)[1] === config.root.split(path.sep)[1]) + filePath.split(path.posix.sep)[1] === + config.root.split(path.posix.sep)[1]) ) { resolvedId = filePath; } else { From bffdabd444155249ed26103b5d053126882e99b4 Mon Sep 17 00:00:00 2001 From: Adam Skoufis Date: Sat, 9 Mar 2024 10:27:11 +1100 Subject: [PATCH 08/36] docs: Add note about defining properties inline inside `createSprinkles` (#1332) Co-authored-by: Michael Taranto --- site/docs/packages/sprinkles.md | 3 +++ 1 file changed, 3 insertions(+) diff --git a/site/docs/packages/sprinkles.md b/site/docs/packages/sprinkles.md index 58480b100..5b581280d 100644 --- a/site/docs/packages/sprinkles.md +++ b/site/docs/packages/sprinkles.md @@ -556,6 +556,9 @@ const properties = defineProperties({ Creates a type-safe function for accessing your [defined properties](#defineProperties). You can provide as many collections of properties as you like. +> 🚧  Ensure properties are defined as variables before passing them into `createSprinkles`. +> Calling `defineProperties` inside a `createSprinkles` call will cause types to be inferred incorrectly, resulting in a type-unsafe sprinkles function. + ```ts // sprinkles.css.ts import { From 6ac9f667cdfde0050e40cf5eaf8ae03078f5d26d Mon Sep 17 00:00:00 2001 From: Adam Skoufis Date: Sat, 9 Mar 2024 10:41:34 +1100 Subject: [PATCH 09/36] webpack/next: Fix webpack template strings by using a modified regex from the webpack source (#1333) --- .changeset/eleven-seals-invent.md | 11 +++++++++++ .../src/[blog-id]/index.css.ts | 3 +++ fixtures/template-string-paths/src/index.ts | 2 ++ packages/webpack-plugin/src/compiler.ts | 5 ++++- ...string-paths-Desktop---Chromium-darwin.png | Bin 14614 -> 16848 bytes ...-string-paths-Mobile---Chromium-darwin.png | Bin 10426 -> 12718 bytes ...ng-paths-mini-css-extract--development.css | 3 +++ ...ing-paths-mini-css-extract--production.css | 3 +++ 8 files changed, 26 insertions(+), 1 deletion(-) create mode 100644 .changeset/eleven-seals-invent.md create mode 100644 fixtures/template-string-paths/src/[blog-id]/index.css.ts diff --git a/.changeset/eleven-seals-invent.md b/.changeset/eleven-seals-invent.md new file mode 100644 index 000000000..f2498e641 --- /dev/null +++ b/.changeset/eleven-seals-invent.md @@ -0,0 +1,11 @@ +--- +'@vanilla-extract/webpack-plugin': patch +'@vanilla-extract/next-plugin': patch +--- + +Use a more accurate regex for detecting [webpack template strings] in paths + +We now use a modified version of the regex from the webpack source code to detect template strings in paths. +As long as the path isn't already escaped, we should detect it. + +[webpack template strings]: https://webpack.js.org/configuration/output/#template-strings diff --git a/fixtures/template-string-paths/src/[blog-id]/index.css.ts b/fixtures/template-string-paths/src/[blog-id]/index.css.ts new file mode 100644 index 000000000..c0a970f1e --- /dev/null +++ b/fixtures/template-string-paths/src/[blog-id]/index.css.ts @@ -0,0 +1,3 @@ +import { style } from '@vanilla-extract/css'; + +export const withHyphen = style({ color: 'indigo' }); diff --git a/fixtures/template-string-paths/src/index.ts b/fixtures/template-string-paths/src/index.ts index c70358ac9..9ec82b6a0 100644 --- a/fixtures/template-string-paths/src/index.ts +++ b/fixtures/template-string-paths/src/index.ts @@ -3,6 +3,7 @@ import { singleSquareBracketsId } from './[id]/index.css'; import { doubleSquareBracketId } from './[[id]]/index.css'; import { catchAllSegment } from './[...slug]/index.css'; import { optionalCatchAllSegment } from './[[...slug]]/index.css'; +import { withHyphen } from './[blog-id]/index.css'; // Fixture for testing escaping of webpack template strings and Next.js dyanmic routes // https://webpack.js.org/configuration/output/#template-strings @@ -14,6 +15,7 @@ function render() {
[[id]] path
[...slug] path
[[...slug]] path
+
[blog-id] path
`; } diff --git a/packages/webpack-plugin/src/compiler.ts b/packages/webpack-plugin/src/compiler.ts index 59be9c44c..8749e07f9 100644 --- a/packages/webpack-plugin/src/compiler.ts +++ b/packages/webpack-plugin/src/compiler.ts @@ -55,7 +55,10 @@ function getRootCompilation(loader: LoaderContext) { return compilation; } -const templateStringRegexp = /\[([^\[\]\.]+)\]/g; +// Modified version of webpack's regex for detecting template strings. +// We only want to match un-escaped strings so we can escape them ourselves. +// https://github.com/webpack/webpack/blob/87660921808566ef3b8796f8df61bd79fc026108/lib/TemplatedPathPlugin.js#L19 +const templateStringRegexp = /\[([\w:]+)\]/g; export const escapeWebpackTemplateString = (s: string) => s.replaceAll(templateStringRegexp, '[\\$1\\]'); diff --git a/tests/e2e/snapshots/template-string-paths-Desktop---Chromium-darwin.png b/tests/e2e/snapshots/template-string-paths-Desktop---Chromium-darwin.png index bb37654b7367d7b33bee7090227bb62f07bbb857..6def0bf2ebf4c2f74dac7c08684aa0314746556f 100644 GIT binary patch literal 16848 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 NS+6tHA20p(zW`6=&Taqz literal 14614 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 OLC?DUTJ=ltZ~qS!_7|i8 diff --git a/tests/e2e/snapshots/template-string-paths-Mobile---Chromium-darwin.png b/tests/e2e/snapshots/template-string-paths-Mobile---Chromium-darwin.png index d0dc710b6045c52d127663b72693c854c4c908ff..db213374cb99b9f0530cf223d3e229369e4935ad 100644 GIT binary patch literal 12718 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 diff --git a/tests/e2e/template-string-paths.playwright.ts-snapshots/template-string-paths-mini-css-extract--development.css b/tests/e2e/template-string-paths.playwright.ts-snapshots/template-string-paths-mini-css-extract--development.css index ea948545d..8b3a66cbb 100644 --- a/tests/e2e/template-string-paths.playwright.ts-snapshots/template-string-paths-mini-css-extract--development.css +++ b/tests/e2e/template-string-paths.playwright.ts-snapshots/template-string-paths-mini-css-extract--development.css @@ -13,3 +13,6 @@ .\[\[\.\.\.slug\]\]_optionalCatchAllSegment__1kvknas0 { color: orchid; } +.\[blog-id\]_withHyphen__1e83mlh0 { + color: indigo; +} diff --git a/tests/e2e/template-string-paths.playwright.ts-snapshots/template-string-paths-mini-css-extract--production.css b/tests/e2e/template-string-paths.playwright.ts-snapshots/template-string-paths-mini-css-extract--production.css index 8327813bf..250d7d8d1 100644 --- a/tests/e2e/template-string-paths.playwright.ts-snapshots/template-string-paths-mini-css-extract--production.css +++ b/tests/e2e/template-string-paths.playwright.ts-snapshots/template-string-paths-mini-css-extract--production.css @@ -13,3 +13,6 @@ ._1kvknas0 { color: orchid; } +._1e83mlh0 { + color: indigo; +} From 4a54c17f2b407fba02a238690a443447c67e5475 Mon Sep 17 00:00:00 2001 From: vanilla-extract-ci <114379795+vanilla-extract-ci@users.noreply.github.com> Date: Sat, 9 Mar 2024 17:11:02 +1100 Subject: [PATCH 10/36] Version Packages (#1356) Co-authored-by: github-actions[bot] --- .changeset/eight-peas-provide.md | 5 ----- .changeset/eleven-seals-invent.md | 11 ----------- packages/next-plugin/CHANGELOG.md | 14 ++++++++++++++ packages/next-plugin/package.json | 4 ++-- packages/vite-plugin/CHANGELOG.md | 6 ++++++ packages/vite-plugin/package.json | 2 +- packages/webpack-plugin/CHANGELOG.md | 11 +++++++++++ packages/webpack-plugin/package.json | 2 +- pnpm-lock.yaml | 2 +- 9 files changed, 36 insertions(+), 21 deletions(-) delete mode 100644 .changeset/eight-peas-provide.md delete mode 100644 .changeset/eleven-seals-invent.md diff --git a/.changeset/eight-peas-provide.md b/.changeset/eight-peas-provide.md deleted file mode 100644 index 526bd416b..000000000 --- a/.changeset/eight-peas-provide.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -'@vanilla-extract/vite-plugin': patch ---- - -Fix `.css.ts` file resolution on Windows diff --git a/.changeset/eleven-seals-invent.md b/.changeset/eleven-seals-invent.md deleted file mode 100644 index f2498e641..000000000 --- a/.changeset/eleven-seals-invent.md +++ /dev/null @@ -1,11 +0,0 @@ ---- -'@vanilla-extract/webpack-plugin': patch -'@vanilla-extract/next-plugin': patch ---- - -Use a more accurate regex for detecting [webpack template strings] in paths - -We now use a modified version of the regex from the webpack source code to detect template strings in paths. -As long as the path isn't already escaped, we should detect it. - -[webpack template strings]: https://webpack.js.org/configuration/output/#template-strings diff --git a/packages/next-plugin/CHANGELOG.md b/packages/next-plugin/CHANGELOG.md index e934ac08d..3985b5607 100644 --- a/packages/next-plugin/CHANGELOG.md +++ b/packages/next-plugin/CHANGELOG.md @@ -1,5 +1,19 @@ # @vanilla-extract/next-plugin +## 2.3.7 + +### Patch Changes + +- [#1333](https://github.com/vanilla-extract-css/vanilla-extract/pull/1333) [`6ac9f66`](https://github.com/vanilla-extract-css/vanilla-extract/commit/6ac9f667cdfde0050e40cf5eaf8ae03078f5d26d) Thanks [@askoufis](https://github.com/askoufis)! - Use a more accurate regex for detecting [webpack template strings] in paths + + We now use a modified version of the regex from the webpack source code to detect template strings in paths. + As long as the path isn't already escaped, we should detect it. + + [webpack template strings]: https://webpack.js.org/configuration/output/#template-strings + +- Updated dependencies [[`6ac9f66`](https://github.com/vanilla-extract-css/vanilla-extract/commit/6ac9f667cdfde0050e40cf5eaf8ae03078f5d26d)]: + - @vanilla-extract/webpack-plugin@2.3.7 + ## 2.3.6 ### Patch Changes diff --git a/packages/next-plugin/package.json b/packages/next-plugin/package.json index 3bd4865ad..e76b5350d 100644 --- a/packages/next-plugin/package.json +++ b/packages/next-plugin/package.json @@ -1,6 +1,6 @@ { "name": "@vanilla-extract/next-plugin", - "version": "2.3.6", + "version": "2.3.7", "description": "Zero-runtime Stylesheets-in-TypeScript", "main": "dist/vanilla-extract-next-plugin.cjs.js", "module": "dist/vanilla-extract-next-plugin.esm.js", @@ -20,7 +20,7 @@ "author": "SEEK", "license": "MIT", "dependencies": { - "@vanilla-extract/webpack-plugin": "^2.3.5" + "@vanilla-extract/webpack-plugin": "^2.3.7" }, "peerDependencies": { "next": ">=12.1.7" diff --git a/packages/vite-plugin/CHANGELOG.md b/packages/vite-plugin/CHANGELOG.md index ad79ae5e5..4f3c58a0a 100644 --- a/packages/vite-plugin/CHANGELOG.md +++ b/packages/vite-plugin/CHANGELOG.md @@ -1,5 +1,11 @@ # @vanilla-extract/vite-plugin +## 4.0.6 + +### Patch Changes + +- [#1346](https://github.com/vanilla-extract-css/vanilla-extract/pull/1346) [`8c2ac42`](https://github.com/vanilla-extract-css/vanilla-extract/commit/8c2ac42479b9646f54c6064b6848485560b15005) Thanks [@askoufis](https://github.com/askoufis)! - Fix `.css.ts` file resolution on Windows + ## 4.0.5 ### Patch Changes diff --git a/packages/vite-plugin/package.json b/packages/vite-plugin/package.json index 8bbc05246..5ae9aa194 100644 --- a/packages/vite-plugin/package.json +++ b/packages/vite-plugin/package.json @@ -1,6 +1,6 @@ { "name": "@vanilla-extract/vite-plugin", - "version": "4.0.5", + "version": "4.0.6", "description": "Zero-runtime Stylesheets-in-TypeScript", "main": "dist/vanilla-extract-vite-plugin.cjs.js", "module": "dist/vanilla-extract-vite-plugin.esm.js", diff --git a/packages/webpack-plugin/CHANGELOG.md b/packages/webpack-plugin/CHANGELOG.md index 5e4d96735..8bc850b07 100644 --- a/packages/webpack-plugin/CHANGELOG.md +++ b/packages/webpack-plugin/CHANGELOG.md @@ -1,5 +1,16 @@ # @vanilla-extract/webpack-plugin +## 2.3.7 + +### Patch Changes + +- [#1333](https://github.com/vanilla-extract-css/vanilla-extract/pull/1333) [`6ac9f66`](https://github.com/vanilla-extract-css/vanilla-extract/commit/6ac9f667cdfde0050e40cf5eaf8ae03078f5d26d) Thanks [@askoufis](https://github.com/askoufis)! - Use a more accurate regex for detecting [webpack template strings] in paths + + We now use a modified version of the regex from the webpack source code to detect template strings in paths. + As long as the path isn't already escaped, we should detect it. + + [webpack template strings]: https://webpack.js.org/configuration/output/#template-strings + ## 2.3.6 ### Patch Changes diff --git a/packages/webpack-plugin/package.json b/packages/webpack-plugin/package.json index d7a9c0262..ffdb9608d 100644 --- a/packages/webpack-plugin/package.json +++ b/packages/webpack-plugin/package.json @@ -1,6 +1,6 @@ { "name": "@vanilla-extract/webpack-plugin", - "version": "2.3.6", + "version": "2.3.7", "description": "Zero-runtime Stylesheets-in-TypeScript", "main": "dist/vanilla-extract-webpack-plugin.cjs.js", "module": "dist/vanilla-extract-webpack-plugin.esm.js", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 70e319259..abba9bb47 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -445,7 +445,7 @@ importers: packages/next-plugin: dependencies: '@vanilla-extract/webpack-plugin': - specifier: ^2.3.5 + specifier: ^2.3.7 version: link:../webpack-plugin devDependencies: next: From ccb4957b549107394cd6867da71b3e979c96a28d Mon Sep 17 00:00:00 2001 From: Ren Date: Thu, 14 Mar 2024 09:49:06 +1100 Subject: [PATCH 11/36] fix(e2e): next snapshot tests (#1349) Co-authored-by: Adam Skoufis --- fixtures/next-app-router/next-env.d.ts | 5 + fixtures/next-app-router/next.config.js | 24 ++ fixtures/next-app-router/package.json | 37 +++ fixtures/next-app-router/src/app/layout.tsx | 11 + fixtures/next-app-router/src/app/page.tsx | 13 + .../next-app-router/src/app/recipes/page.tsx | 10 + fixtures/next-app-router/tsconfig.json | 21 ++ fixtures/next-pages-router/next-env.d.ts | 5 + fixtures/next-pages-router/next.config.js | 21 ++ fixtures/next-pages-router/package.json | 37 +++ .../next-pages-router/src/pages/index.tsx | 13 + .../src/pages/recipes/index.tsx | 10 + fixtures/next-pages-router/tsconfig.json | 10 + fixtures/recipes/src/html.ts | 20 ++ fixtures/recipes/src/index.ts | 23 +- package.json | 3 +- pnpm-lock.yaml | 290 ++++++++++++++++-- scripts/copy-next-plugin.ts | 32 ++ test-helpers/package.json | 2 + test-helpers/src/index.ts | 1 + test-helpers/src/startFixture/index.ts | 12 +- test-helpers/src/startFixture/next.ts | 133 ++++++++ test-helpers/src/startFixture/types.ts | 4 +- test-helpers/src/startFixture/vite.ts | 2 +- .../fixtures-next-development.playwright.ts | 73 +++++ .../fixtures-next-production.playwright.ts | 46 +++ 26 files changed, 813 insertions(+), 45 deletions(-) create mode 100644 fixtures/next-app-router/next-env.d.ts create mode 100644 fixtures/next-app-router/next.config.js create mode 100644 fixtures/next-app-router/package.json create mode 100644 fixtures/next-app-router/src/app/layout.tsx create mode 100644 fixtures/next-app-router/src/app/page.tsx create mode 100644 fixtures/next-app-router/src/app/recipes/page.tsx create mode 100644 fixtures/next-app-router/tsconfig.json create mode 100644 fixtures/next-pages-router/next-env.d.ts create mode 100644 fixtures/next-pages-router/next.config.js create mode 100644 fixtures/next-pages-router/package.json create mode 100644 fixtures/next-pages-router/src/pages/index.tsx create mode 100644 fixtures/next-pages-router/src/pages/recipes/index.tsx create mode 100644 fixtures/next-pages-router/tsconfig.json create mode 100644 fixtures/recipes/src/html.ts create mode 100644 scripts/copy-next-plugin.ts create mode 100644 test-helpers/src/startFixture/next.ts create mode 100644 tests/e2e/fixtures-next-development.playwright.ts create mode 100644 tests/e2e/fixtures-next-production.playwright.ts diff --git a/fixtures/next-app-router/next-env.d.ts b/fixtures/next-app-router/next-env.d.ts new file mode 100644 index 000000000..4f11a03dc --- /dev/null +++ b/fixtures/next-app-router/next-env.d.ts @@ -0,0 +1,5 @@ +/// +/// + +// NOTE: This file should not be edited +// see https://nextjs.org/docs/basic-features/typescript for more information. diff --git a/fixtures/next-app-router/next.config.js b/fixtures/next-app-router/next.config.js new file mode 100644 index 000000000..fb626cabf --- /dev/null +++ b/fixtures/next-app-router/next.config.js @@ -0,0 +1,24 @@ +const { + createVanillaExtractPlugin, +} = require('./next-plugin/dist/vanilla-extract-next-plugin.cjs.js'); + +const withVanillaExtract = createVanillaExtractPlugin(); + +/** @type {import('next').NextConfig} */ +const config = withVanillaExtract({ + // exporting a static build for next 13 + // due to issues with distDir on next custom server + output: 'export', + // we need to differentiate build and dev folders + // so they don't overwrite eachother when running tests + distDir: process.env.NODE_ENV === 'production' ? 'dist' : '.next', + experimental: { + externalDir: true, + }, + onDemandEntries: { + // Make sure entries are not getting disposed. + maxInactiveAge: 1000 * 60 * 60, + }, +}); + +module.exports = config; diff --git a/fixtures/next-app-router/package.json b/fixtures/next-app-router/package.json new file mode 100644 index 000000000..ce8f5ae0b --- /dev/null +++ b/fixtures/next-app-router/package.json @@ -0,0 +1,37 @@ +{ + "name": "@fixtures/next-app-router", + "description": "Next app router fixtures", + "version": "0.0.0", + "private": true, + "scripts": { + "dev": "next dev", + "build": "next build", + "start": "next start", + "clean-build": "pnpm clean && pnpm build", + "clean": "pnpm clean:dev && pnpm clean:prod", + "clean:dev": "rm -rf .next", + "clean:prod": "rm -rf dist" + }, + "dependencies": { + "@fixtures/features": "*", + "@fixtures/recipes": "*", + "@fixtures/sprinkles": "*", + "@vanilla-extract/css": "*", + "@vanilla-extract/recipes": "*", + "@vanilla-extract/sprinkles": "*", + "next": "npm:next@13.5.4", + "react": "^18.2.0", + "react-dom": "^18.2.0" + }, + "devDependencies": { + "@types/react": "^18.2.55", + "@vanilla-extract/next-plugin": "*", + "@vanilla-extract/webpack-plugin": "*" + }, + "browserslist": [ + ">0.3%", + "ie 11", + "safari 4", + "not op_mini all" + ] +} diff --git a/fixtures/next-app-router/src/app/layout.tsx b/fixtures/next-app-router/src/app/layout.tsx new file mode 100644 index 000000000..225b6038d --- /dev/null +++ b/fixtures/next-app-router/src/app/layout.tsx @@ -0,0 +1,11 @@ +export default function RootLayout({ + children, +}: { + children: React.ReactNode; +}) { + return ( + + {children} + + ); +} diff --git a/fixtures/next-app-router/src/app/page.tsx b/fixtures/next-app-router/src/app/page.tsx new file mode 100644 index 000000000..171850fc9 --- /dev/null +++ b/fixtures/next-app-router/src/app/page.tsx @@ -0,0 +1,13 @@ +import Link from 'next/link'; + +export default function Home() { + return ( + <> + sprinkles +
+ recipes +
+ features + + ); +} diff --git a/fixtures/next-app-router/src/app/recipes/page.tsx b/fixtures/next-app-router/src/app/recipes/page.tsx new file mode 100644 index 000000000..fcde26b0d --- /dev/null +++ b/fixtures/next-app-router/src/app/recipes/page.tsx @@ -0,0 +1,10 @@ +import html from '@fixtures/recipes/src/html'; + +export default function Recipes() { + return ( + <> + +
+ + ); +} diff --git a/fixtures/next-app-router/tsconfig.json b/fixtures/next-app-router/tsconfig.json new file mode 100644 index 000000000..d751428c7 --- /dev/null +++ b/fixtures/next-app-router/tsconfig.json @@ -0,0 +1,21 @@ +{ + "extends": "../../tsconfig.json", + "compilerOptions": { + "forceConsistentCasingInFileNames": true, + "jsx": "preserve", + "plugins": [ + { + "name": "next" + } + ], + "strictNullChecks": true + }, + "include": [ + "next-env.d.ts", + "**/*.ts", + "**/*.tsx", + ".next/types/**/*.ts", + "dist/types/**/*.ts" + ], + "exclude": ["node_modules"] +} diff --git a/fixtures/next-pages-router/next-env.d.ts b/fixtures/next-pages-router/next-env.d.ts new file mode 100644 index 000000000..4f11a03dc --- /dev/null +++ b/fixtures/next-pages-router/next-env.d.ts @@ -0,0 +1,5 @@ +/// +/// + +// NOTE: This file should not be edited +// see https://nextjs.org/docs/basic-features/typescript for more information. diff --git a/fixtures/next-pages-router/next.config.js b/fixtures/next-pages-router/next.config.js new file mode 100644 index 000000000..ccf7e23ca --- /dev/null +++ b/fixtures/next-pages-router/next.config.js @@ -0,0 +1,21 @@ +const { + createVanillaExtractPlugin, +} = require('./next-plugin/dist/vanilla-extract-next-plugin.cjs.js'); + +const withVanillaExtract = createVanillaExtractPlugin(); + +/** @type {import('next').NextConfig} */ +const config = withVanillaExtract({ + // we need to differentiate build and dev folders + // so they don't overwrite eachother when running tests + distDir: process.env.NODE_ENV === 'production' ? 'dist' : '.next', + experimental: { + externalDir: true, + }, + onDemandEntries: { + // Make sure entries are not getting disposed. + maxInactiveAge: 1000 * 60 * 60, + }, +}); + +module.exports = config; diff --git a/fixtures/next-pages-router/package.json b/fixtures/next-pages-router/package.json new file mode 100644 index 000000000..c5a5bc06b --- /dev/null +++ b/fixtures/next-pages-router/package.json @@ -0,0 +1,37 @@ +{ + "name": "@fixtures/next-pages-router", + "description": "Next pages router fixtures", + "version": "0.0.0", + "private": true, + "scripts": { + "dev": "next dev", + "build": "next build", + "start": "next start", + "clean-build": "pnpm clean && next build", + "clean": "pnpm clean:dev && pnpm clean:prod", + "clean:dev": "rm -rf .next", + "clean:prod": "rm -rf dist" + }, + "dependencies": { + "@fixtures/features": "*", + "@fixtures/recipes": "*", + "@fixtures/sprinkles": "*", + "@vanilla-extract/css": "*", + "@vanilla-extract/recipes": "*", + "@vanilla-extract/sprinkles": "*", + "next": "12.3.4", + "react": "^18.2.0", + "react-dom": "^18.2.0" + }, + "devDependencies": { + "@types/react": "^18.2.55", + "@vanilla-extract/next-plugin": "*", + "@vanilla-extract/webpack-plugin": "*" + }, + "browserslist": [ + ">0.3%", + "ie 11", + "safari 4", + "not op_mini all" + ] +} diff --git a/fixtures/next-pages-router/src/pages/index.tsx b/fixtures/next-pages-router/src/pages/index.tsx new file mode 100644 index 000000000..171850fc9 --- /dev/null +++ b/fixtures/next-pages-router/src/pages/index.tsx @@ -0,0 +1,13 @@ +import Link from 'next/link'; + +export default function Home() { + return ( + <> + sprinkles +
+ recipes +
+ features + + ); +} diff --git a/fixtures/next-pages-router/src/pages/recipes/index.tsx b/fixtures/next-pages-router/src/pages/recipes/index.tsx new file mode 100644 index 000000000..fcde26b0d --- /dev/null +++ b/fixtures/next-pages-router/src/pages/recipes/index.tsx @@ -0,0 +1,10 @@ +import html from '@fixtures/recipes/src/html'; + +export default function Recipes() { + return ( + <> + +
+ + ); +} diff --git a/fixtures/next-pages-router/tsconfig.json b/fixtures/next-pages-router/tsconfig.json new file mode 100644 index 000000000..f295fe6d3 --- /dev/null +++ b/fixtures/next-pages-router/tsconfig.json @@ -0,0 +1,10 @@ +{ + "extends": "../../tsconfig.json", + "compilerOptions": { + "forceConsistentCasingInFileNames": true, + "jsx": "preserve", + "strictNullChecks": true + }, + "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"], + "exclude": ["node_modules"] +} diff --git a/fixtures/recipes/src/html.ts b/fixtures/recipes/src/html.ts new file mode 100644 index 000000000..774e5c401 --- /dev/null +++ b/fixtures/recipes/src/html.ts @@ -0,0 +1,20 @@ +import { button, stack } from './styles.css'; + +export default `
+ + + + +
`; diff --git a/fixtures/recipes/src/index.ts b/fixtures/recipes/src/index.ts index 045aec5ad..e647b5e2f 100644 --- a/fixtures/recipes/src/index.ts +++ b/fixtures/recipes/src/index.ts @@ -1,26 +1,7 @@ -import { button, stack } from './styles.css'; +import html from './html'; function render() { - document.body.innerHTML = ` -
- - - - -
-`; + document.body.innerHTML = html; } render(); diff --git a/package.json b/package.json index 2498b72d8..fe39d7f30 100644 --- a/package.json +++ b/package.json @@ -16,7 +16,8 @@ "test:unit": "pnpm test:jest && pnpm test:vitest", "test:jest": "cross-env NODE_OPTIONS=--experimental-vm-modules jest", "test:vitest": "vitest --watch=false", - "test:playwright": "NODE_OPTIONS=--no-experimental-fetch playwright test", + "test:playwright": "NODE_OPTIONS=--no-experimental-fetch pnpm test:build-next && playwright test", + "test:build-next": "ts-node scripts/copy-next-plugin && pnpm --filter=@fixtures/next-* clean-build", "format": "prettier --write .", "lint": "manypkg check && prettier --check . && tsc", "copy-readme-to-packages": "ts-node scripts/copy-readme-to-packages", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index abba9bb47..9aebc6e69 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -237,6 +237,86 @@ importers: specifier: 1.14.1 version: link:../../packages/css + fixtures/next-app-router: + dependencies: + '@fixtures/features': + specifier: '*' + version: link:../features + '@fixtures/recipes': + specifier: '*' + version: link:../recipes + '@fixtures/sprinkles': + specifier: '*' + version: link:../sprinkles + '@vanilla-extract/css': + specifier: '*' + version: link:../../packages/css + '@vanilla-extract/recipes': + specifier: '*' + version: link:../../packages/recipes + '@vanilla-extract/sprinkles': + specifier: '*' + version: link:../../packages/sprinkles + next: + specifier: npm:next@13.5.4 + version: 13.5.4(@babel/core@7.23.9)(react-dom@18.2.0)(react@18.2.0) + react: + specifier: ^18.2.0 + version: 18.2.0 + react-dom: + specifier: ^18.2.0 + version: 18.2.0(react@18.2.0) + devDependencies: + '@types/react': + specifier: ^18.2.55 + version: 18.2.55 + '@vanilla-extract/next-plugin': + specifier: '*' + version: link:../../packages/next-plugin + '@vanilla-extract/webpack-plugin': + specifier: '*' + version: link:../../packages/webpack-plugin + + fixtures/next-pages-router: + dependencies: + '@fixtures/features': + specifier: '*' + version: link:../features + '@fixtures/recipes': + specifier: '*' + version: link:../recipes + '@fixtures/sprinkles': + specifier: '*' + version: link:../sprinkles + '@vanilla-extract/css': + specifier: '*' + version: link:../../packages/css + '@vanilla-extract/recipes': + specifier: '*' + version: link:../../packages/recipes + '@vanilla-extract/sprinkles': + specifier: '*' + version: link:../../packages/sprinkles + next: + specifier: 12.3.4 + version: 12.3.4(@babel/core@7.23.9)(react-dom@18.2.0)(react@18.2.0) + react: + specifier: ^18.2.0 + version: 18.2.0 + react-dom: + specifier: ^18.2.0 + version: 18.2.0(react@18.2.0) + devDependencies: + '@types/react': + specifier: ^18.2.55 + version: 18.2.55 + '@vanilla-extract/next-plugin': + specifier: '*' + version: link:../../packages/next-plugin + '@vanilla-extract/webpack-plugin': + specifier: '*' + version: link:../../packages/webpack-plugin + fixtures/recipes: dependencies: '@vanilla-extract/css': @@ -708,6 +788,12 @@ importers: '@fixtures/low-level': specifier: '*' version: link:../fixtures/low-level + '@fixtures/next-app-router': + specifier: '*' + version: link:../fixtures/next-app-router + '@fixtures/next-pages-router': + specifier: '*' + version: link:../fixtures/next-pages-router '@fixtures/recipes': specifier: '*' version: link:../fixtures/recipes @@ -779,7 +865,7 @@ importers: version: 2.7.7(webpack@5.90.0) minimist: specifier: ^1.2.5 - version: 1.2.5 + version: 1.2.8 path-browserify: specifier: ^1.0.1 version: 1.0.1 @@ -4217,6 +4303,10 @@ packages: /@next/env@12.3.4: resolution: {integrity: sha512-H/69Lc5Q02dq3o+dxxy5O/oNxFsZpdL6WREtOOtOM1B/weonIwDXkekr1KV5DPVPr12IHFPrMrcJQ6bgPMfn7A==} + /@next/env@13.5.4: + resolution: {integrity: sha512-LGegJkMvRNw90WWphGJ3RMHMVplYcOfRWf2Be3td3sUa+1AaxmsYyANsA+znrGCBjXJNi4XAQlSoEfUxs/4kIQ==} + dev: false + /@next/swc-android-arm-eabi@12.3.4: resolution: {integrity: sha512-cM42Cw6V4Bz/2+j/xIzO8nK/Q3Ly+VSlZJTa1vHzsocJRYz8KT6MrreXaci2++SIZCF1rVRCDgAg5PpqRibdIA==} engines: {node: '>= 10'} @@ -4241,6 +4331,15 @@ packages: requiresBuild: true optional: true + /@next/swc-darwin-arm64@13.5.4: + resolution: {integrity: sha512-Df8SHuXgF1p+aonBMcDPEsaahNo2TCwuie7VXED4FVyECvdXfRT9unapm54NssV9tF3OQFKBFOdlje4T43VO0w==} + engines: {node: '>= 10'} + cpu: [arm64] + os: [darwin] + requiresBuild: true + dev: false + optional: true + /@next/swc-darwin-x64@12.3.4: resolution: {integrity: sha512-PPF7tbWD4k0dJ2EcUSnOsaOJ5rhT3rlEt/3LhZUGiYNL8KvoqczFrETlUx0cUYaXe11dRA3F80Hpt727QIwByQ==} engines: {node: '>= 10'} @@ -4249,6 +4348,15 @@ packages: requiresBuild: true optional: true + /@next/swc-darwin-x64@13.5.4: + resolution: {integrity: sha512-siPuUwO45PnNRMeZnSa8n/Lye5ZX93IJom9wQRB5DEOdFrw0JjOMu1GINB8jAEdwa7Vdyn1oJ2xGNaQpdQQ9Pw==} + engines: {node: '>= 10'} + cpu: [x64] + os: [darwin] + requiresBuild: true + dev: false + optional: true + /@next/swc-freebsd-x64@12.3.4: resolution: {integrity: sha512-KM9JXRXi/U2PUM928z7l4tnfQ9u8bTco/jb939pdFUHqc28V43Ohd31MmZD1QzEK4aFlMRaIBQOWQZh4D/E5lQ==} engines: {node: '>= 10'} @@ -4273,6 +4381,15 @@ packages: requiresBuild: true optional: true + /@next/swc-linux-arm64-gnu@13.5.4: + resolution: {integrity: sha512-l/k/fvRP/zmB2jkFMfefmFkyZbDkYW0mRM/LB+tH5u9pB98WsHXC0WvDHlGCYp3CH/jlkJPL7gN8nkTQVrQ/2w==} + engines: {node: '>= 10'} + cpu: [arm64] + os: [linux] + requiresBuild: true + dev: false + optional: true + /@next/swc-linux-arm64-musl@12.3.4: resolution: {integrity: sha512-EETZPa1juczrKLWk5okoW2hv7D7WvonU+Cf2CgsSoxgsYbUCZ1voOpL4JZTOb6IbKMDo6ja+SbY0vzXZBUMvkQ==} engines: {node: '>= 10'} @@ -4281,6 +4398,15 @@ packages: requiresBuild: true optional: true + /@next/swc-linux-arm64-musl@13.5.4: + resolution: {integrity: sha512-YYGb7SlLkI+XqfQa8VPErljb7k9nUnhhRrVaOdfJNCaQnHBcvbT7cx/UjDQLdleJcfyg1Hkn5YSSIeVfjgmkTg==} + engines: {node: '>= 10'} + cpu: [arm64] + os: [linux] + requiresBuild: true + dev: false + optional: true + /@next/swc-linux-x64-gnu@12.3.4: resolution: {integrity: sha512-4csPbRbfZbuWOk3ATyWcvVFdD9/Rsdq5YHKvRuEni68OCLkfy4f+4I9OBpyK1SKJ00Cih16NJbHE+k+ljPPpag==} engines: {node: '>= 10'} @@ -4289,6 +4415,15 @@ packages: requiresBuild: true optional: true + /@next/swc-linux-x64-gnu@13.5.4: + resolution: {integrity: sha512-uE61vyUSClnCH18YHjA8tE1prr/PBFlBFhxBZis4XBRJoR+txAky5d7gGNUIbQ8sZZ7LVkSVgm/5Fc7mwXmRAg==} + engines: {node: '>= 10'} + cpu: [x64] + os: [linux] + requiresBuild: true + dev: false + optional: true + /@next/swc-linux-x64-musl@12.3.4: resolution: {integrity: sha512-YeBmI+63Ro75SUiL/QXEVXQ19T++58aI/IINOyhpsRL1LKdyfK/35iilraZEFz9bLQrwy1LYAR5lK200A9Gjbg==} engines: {node: '>= 10'} @@ -4297,6 +4432,15 @@ packages: requiresBuild: true optional: true + /@next/swc-linux-x64-musl@13.5.4: + resolution: {integrity: sha512-qVEKFYML/GvJSy9CfYqAdUexA6M5AklYcQCW+8JECmkQHGoPxCf04iMh7CPR7wkHyWWK+XLt4Ja7hhsPJtSnhg==} + engines: {node: '>= 10'} + cpu: [x64] + os: [linux] + requiresBuild: true + dev: false + optional: true + /@next/swc-win32-arm64-msvc@12.3.4: resolution: {integrity: sha512-Sd0qFUJv8Tj0PukAYbCCDbmXcMkbIuhnTeHm9m4ZGjCf6kt7E/RMs55Pd3R5ePjOkN7dJEuxYBehawTR/aPDSQ==} engines: {node: '>= 10'} @@ -4305,6 +4449,15 @@ packages: requiresBuild: true optional: true + /@next/swc-win32-arm64-msvc@13.5.4: + resolution: {integrity: sha512-mDSQfqxAlfpeZOLPxLymZkX0hYF3juN57W6vFHTvwKlnHfmh12Pt7hPIRLYIShk8uYRsKPtMTth/EzpwRI+u8w==} + engines: {node: '>= 10'} + cpu: [arm64] + os: [win32] + requiresBuild: true + dev: false + optional: true + /@next/swc-win32-ia32-msvc@12.3.4: resolution: {integrity: sha512-rt/vv/vg/ZGGkrkKcuJ0LyliRdbskQU+91bje+PgoYmxTZf/tYs6IfbmgudBJk6gH3QnjHWbkphDdRQrseRefQ==} engines: {node: '>= 10'} @@ -4313,6 +4466,15 @@ packages: requiresBuild: true optional: true + /@next/swc-win32-ia32-msvc@13.5.4: + resolution: {integrity: sha512-aoqAT2XIekIWoriwzOmGFAvTtVY5O7JjV21giozBTP5c6uZhpvTWRbmHXbmsjZqY4HnEZQRXWkSAppsIBweKqw==} + engines: {node: '>= 10'} + cpu: [ia32] + os: [win32] + requiresBuild: true + dev: false + optional: true + /@next/swc-win32-x64-msvc@12.3.4: resolution: {integrity: sha512-DQ20JEfTBZAgF8QCjYfJhv2/279M6onxFjdG/+5B0Cyj00/EdBxiWb2eGGFgQhrBbNv/lsvzFbbi0Ptf8Vw/bg==} engines: {node: '>= 10'} @@ -4321,6 +4483,15 @@ packages: requiresBuild: true optional: true + /@next/swc-win32-x64-msvc@13.5.4: + resolution: {integrity: sha512-cyRvlAxwlddlqeB9xtPSfNSCRy8BOa4wtMo0IuI9P7Y0XT2qpDrpFKRyZ7kUngZis59mPVla5k8X1oOJ8RxDYg==} + engines: {node: '>= 10'} + cpu: [x64] + os: [win32] + requiresBuild: true + dev: false + optional: true + /@node-rs/helper@1.2.1: resolution: {integrity: sha512-R5wEmm8nbuQU0YGGmYVjEc0OHtYsuXdpRG+Ut/3wZ9XAvQWyThN08bTh2cBJgoZxHQUPtvRfeQuxcAgLuiBISg==} dependencies: @@ -6122,6 +6293,12 @@ packages: tslib: 2.5.0 dev: false + /@swc/helpers@0.5.2: + resolution: {integrity: sha512-E4KcWTpoLHqwPHLxidpOqQbcrZVgi0rsmmZXUle1jXmJfuIf/UWpczUJ7MZZ5tlxytgJXyp0w4PGkkeLiuIdZw==} + dependencies: + tslib: 2.5.0 + dev: false + /@swc/wasm@1.2.130: resolution: {integrity: sha512-rNcJsBxS70+pv8YUWwf5fRlWX6JoY/HJc25HD/F8m6Kv7XhJdqPPMhyX6TKkUBPAG7TWlZYoxa+rHAjPy4Cj3Q==} requiresBuild: true @@ -7927,6 +8104,13 @@ packages: run-applescript: 7.0.0 dev: false + /busboy@1.6.0: + resolution: {integrity: sha512-8SFQbg/0hQ9xy3UNTB0YEnsNBbWfhf7RtnzpL7TkBiTBRfrQ9Fxcnz7VJsleJpyp6rVLvXiuORqjlHi5q+PYuA==} + engines: {node: '>=10.16.0'} + dependencies: + streamsearch: 1.1.0 + dev: false + /byline@5.0.0: resolution: {integrity: sha512-s6webAy+R4SR8XVuJWt2V2rGvhnrhxN+9S15GNuTK3wKPOXFF6RNc+8ug2XhH+2s4f+uudG4kUVYmYOQWL2g0Q==} engines: {node: '>=0.10.0'} @@ -8357,6 +8541,10 @@ packages: resolution: {integrity: sha512-GRMWDxpOB6Dgk2E5Uo+3eEBvtOOlimMmpbFiKuLFnQzYDavtLFY3K5ona41jgN/WdRZtG7utuVSVTL4HbZHGkw==} dev: true + /client-only@0.0.1: + resolution: {integrity: sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA==} + dev: false + /cliui@6.0.0: resolution: {integrity: sha512-t6wbgtoCXvAzst7QgXxJYqPt0usEfbgQdftEPbLL/cvv6HPE5VgvqCuAIDR0NgU52ds6rFwqrgakNLrHEjCbrQ==} dependencies: @@ -9466,7 +9654,7 @@ packages: dependencies: acorn-node: 1.8.2 defined: 1.0.0 - minimist: 1.2.5 + minimist: 1.2.8 /didyoumean@1.2.2: resolution: {integrity: sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw==} @@ -11037,7 +11225,7 @@ packages: engines: {node: '>=0.6.0'} hasBin: true dependencies: - minimist: 1.2.5 + minimist: 1.2.8 dev: true /gopd@1.0.1: @@ -12826,7 +13014,7 @@ packages: jest-util: 29.7.0 jest-validate: 29.7.0 resolve: 1.22.8 - resolve.exports: 2.0.0 + resolve.exports: 2.0.2 slash: 3.0.0 dev: false @@ -13152,7 +13340,7 @@ packages: resolution: {integrity: sha512-g1MWMLBiz8FKi1e4w0UyVL3w+iJceWAFBAaBnnGKOpNa5f8TLktkbre1+s6oICydWAm+HRUGTmI+//xv2hvXYA==} hasBin: true dependencies: - minimist: 1.2.5 + minimist: 1.2.8 dev: true /json5@2.2.3: @@ -13413,6 +13601,7 @@ packages: /lilconfig@3.1.0: resolution: {integrity: sha512-p3cz0JV5vw/XeouBU3Ldnp+ZkBjE+n8ydJ4mcwBrOiXXPqNlrzGBqWs9X4MWF7f+iKUBu794Y8Hh8yawiJbCjw==} engines: {node: '>=14'} + deprecated: This version contains a security issue. Please upgrade to 3.1.1 or later. dev: true /lines-and-columns@1.2.4: @@ -14621,12 +14810,8 @@ packages: kind-of: 6.0.3 dev: false - /minimist@1.2.5: - resolution: {integrity: sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw==} - /minimist@1.2.8: resolution: {integrity: sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==} - dev: true /minipass-collect@1.0.2: resolution: {integrity: sha512-6T6lH0H8OG9kITm/Jm6tdooIbogG9e0tLgpY6mphXSm/A9u8Nq1ryBG+Qspiub9LjWlBPsPS3tWQ/Botq4FdxA==} @@ -14689,7 +14874,7 @@ packages: resolution: {integrity: sha512-NKmAlESf6jMGym1++R0Ra7wvhV+wFW63FaSOFPwRahvea0gMUcGUhVeAg/0BC0wiv9ih5NYPB1Wn1UEI1/L+xQ==} hasBin: true dependencies: - minimist: 1.2.5 + minimist: 1.2.8 /mkdirp@1.0.4: resolution: {integrity: sha512-vVqVZQyf3WLx2Shd0qJ9xuvqgAyKPLAiqITEtqW0oIUjzo3PePDd6fW9iFz30ef7Ysp/oiWqbhszeGWW2T6Gzw==} @@ -14924,7 +15109,7 @@ packages: log-symbols: 4.1.0 log-update: 5.0.1 memoize-one: 6.0.0 - minimist: 1.2.5 + minimist: 1.2.8 multiparty: 4.2.3 netlify: 12.0.1 netlify-headers-parser: 6.0.2 @@ -15068,6 +15253,45 @@ packages: - '@babel/core' - babel-plugin-macros + /next@13.5.4(@babel/core@7.23.9)(react-dom@18.2.0)(react@18.2.0): + resolution: {integrity: sha512-+93un5S779gho8y9ASQhb/bTkQF17FNQOtXLKAj3lsNgltEcF0C5PMLLncDmH+8X1EnJH1kbqAERa29nRXqhjA==} + engines: {node: '>=16.14.0'} + hasBin: true + peerDependencies: + '@opentelemetry/api': ^1.1.0 + react: ^18.2.0 + react-dom: ^18.2.0 + sass: ^1.3.0 + peerDependenciesMeta: + '@opentelemetry/api': + optional: true + sass: + optional: true + dependencies: + '@next/env': 13.5.4 + '@swc/helpers': 0.5.2 + busboy: 1.6.0 + caniuse-lite: 1.0.30001587 + postcss: 8.4.31 + react: 18.2.0 + react-dom: 18.2.0(react@18.2.0) + styled-jsx: 5.1.1(@babel/core@7.23.9)(react@18.2.0) + watchpack: 2.4.0 + optionalDependencies: + '@next/swc-darwin-arm64': 13.5.4 + '@next/swc-darwin-x64': 13.5.4 + '@next/swc-linux-arm64-gnu': 13.5.4 + '@next/swc-linux-arm64-musl': 13.5.4 + '@next/swc-linux-x64-gnu': 13.5.4 + '@next/swc-linux-x64-musl': 13.5.4 + '@next/swc-win32-arm64-msvc': 13.5.4 + '@next/swc-win32-ia32-msvc': 13.5.4 + '@next/swc-win32-x64-msvc': 13.5.4 + transitivePeerDependencies: + - '@babel/core' + - babel-plugin-macros + dev: false + /no-case@2.3.2: resolution: {integrity: sha512-rmTZ9kz+f3rCvK2TD1Ue/oZlns7OGoIWP4fc3llxxRXlOkHKoWPPWJOfFYpITabSow43QJbRIoHQXtt10VldyQ==} dependencies: @@ -16513,6 +16737,15 @@ packages: picocolors: 1.0.0 source-map-js: 1.0.2 + /postcss@8.4.31: + resolution: {integrity: sha512-PS08Iboia9mts/2ygV3eLpY5ghnUcfLV/EXTOW1E2qYxJKGGBUtNjN76FYHnMs36RmARn41bC0AZmn+rR0OVpQ==} + engines: {node: ^10 || ^12 || >=14} + dependencies: + nanoid: 3.3.7 + picocolors: 1.0.0 + source-map-js: 1.0.2 + dev: false + /postcss@8.4.35: resolution: {integrity: sha512-u5U8qYpBCpN13BsiEB0CbR1Hhh4Gc0zLFuedrHJKMctHCHAGrMdG0PRM/KErzAL3CU6/eckEtmHNB3x6e3c0vA==} engines: {node: ^10 || ^12 || >=14} @@ -16660,7 +16893,7 @@ packages: hasBin: true dependencies: colors: 1.4.0 - minimist: 1.2.5 + minimist: 1.2.8 dev: true /prismjs@1.25.0: @@ -16861,7 +17094,7 @@ packages: dependencies: deep-extend: 0.6.0 ini: 1.3.8 - minimist: 1.2.5 + minimist: 1.2.8 strip-json-comments: 2.0.1 /react-dom@18.2.0(react@18.2.0): @@ -17389,15 +17622,9 @@ packages: engines: {node: '>=10'} dev: false - /resolve.exports@2.0.0: - resolution: {integrity: sha512-6K/gDlqgQscOlg9fSRpWstA8sYe8rbELsSTNpx+3kTrsVCzvSl0zIvRErM7fdl9ERWDsKnrLnwB+Ne89918XOg==} - engines: {node: '>=10'} - dev: false - /resolve.exports@2.0.2: resolution: {integrity: sha512-X2UW6Nw3n/aMgDVy+0rSqgHlv39WZAlZrXCdnbyEiKm17DSqHX4MmQMaST3FbeWR5FTuRcUwYAziZajji0Y7mg==} engines: {node: '>=10'} - dev: true /resolve@1.22.8: resolution: {integrity: sha512-oKWePCxqpd6FlLvGV1VU0x7bkPmmCNolxzjMf4NczoDnQcIWrAF+cPtZn5i6n+RfD2d9i0tzpKnG6Yk168yIyw==} @@ -18228,6 +18455,11 @@ packages: mixme: 0.5.4 dev: false + /streamsearch@1.1.0: + resolution: {integrity: sha512-Mcc5wHehp9aXz1ax6bZUyY5afg9u2rv5cqQI3mRrYkGC8rW2hM02jWuwjtL++LS5qinSyhj2QfLyNsuc+VsExg==} + engines: {node: '>=10.0.0'} + dev: false + /strict-uri-encode@1.1.0: resolution: {integrity: sha512-R3f198pcvnB+5IpnBlRkphuE9n46WyVl8I39W/ZUTZLz4nqSP/oLYUrcnJrw462Ds8he4YKMov2efsTIw1BDGQ==} engines: {node: '>=0.10.0'} @@ -18468,6 +18700,24 @@ packages: '@babel/core': 7.23.9 react: 18.2.0 + /styled-jsx@5.1.1(@babel/core@7.23.9)(react@18.2.0): + resolution: {integrity: sha512-pW7uC1l4mBZ8ugbiZrcIsiIvVx1UmTfw7UkC3Um2tmfUq9Bhk8IiyEIPl6F8agHgjzku6j0xQEZbfA5uSgSaCw==} + engines: {node: '>= 12.0.0'} + peerDependencies: + '@babel/core': '*' + babel-plugin-macros: '*' + react: '>= 16.8.0 || 17.x.x || ^18.0.0-0' + peerDependenciesMeta: + '@babel/core': + optional: true + babel-plugin-macros: + optional: true + dependencies: + '@babel/core': 7.23.9 + client-only: 0.0.1 + react: 18.2.0 + dev: false + /stylehacks@5.1.1(postcss@8.4.35): resolution: {integrity: sha512-sBpcd5Hx7G6seo7b1LkpttvTz7ikD0LlH5RmdcBNb6fFR0Fl7LQwHDFr300q4cwUqi+IYrFGmsIHieMBfnN/Bw==} engines: {node: ^10 || ^12 || >=14.0} @@ -18560,7 +18810,7 @@ packages: debug: 4.3.4(supports-color@9.2.3) es6-promisify: 6.1.1 inquirer: 6.5.2 - minimist: 1.2.5 + minimist: 1.2.8 mkdirp: 0.5.5 untildify: 3.0.3 transitivePeerDependencies: diff --git a/scripts/copy-next-plugin.ts b/scripts/copy-next-plugin.ts new file mode 100644 index 000000000..80c12aebf --- /dev/null +++ b/scripts/copy-next-plugin.ts @@ -0,0 +1,32 @@ +import { glob } from 'fast-glob'; +import { existsSync } from 'fs'; +import fs from 'fs/promises'; +import path from 'path'; + +// We need to use distinct next plugins for each next fixutre +// due to different next versions / mini-css-extract-plugin serializer registration +(async () => { + const nextPluginDistDir = path.join( + __dirname, + '../packages/next-plugin/dist', + ); + + if (!existsSync(nextPluginDistDir)) { + throw new Error('packages/next-plugin/dist is missing.'); + } + + const nextFixtureDirs = await glob('fixtures/next-*', { + onlyDirectories: true, + absolute: true, + }); + + if (nextFixtureDirs.length === 0) { + throw new Error('No next fixtures found.'); + } + + for (const dir of nextFixtureDirs) { + await fs.cp(nextPluginDistDir, path.join(dir, 'next-plugin', 'dist'), { + recursive: true, + }); + } +})(); diff --git a/test-helpers/package.json b/test-helpers/package.json index 75b194b23..b79c4fbfc 100644 --- a/test-helpers/package.json +++ b/test-helpers/package.json @@ -10,6 +10,8 @@ "@fixtures/features": "*", "@fixtures/layers": "*", "@fixtures/low-level": "*", + "@fixtures/next-app-router": "*", + "@fixtures/next-pages-router": "*", "@fixtures/recipes": "*", "@fixtures/sprinkles": "*", "@fixtures/template-string-paths": "*", diff --git a/test-helpers/src/index.ts b/test-helpers/src/index.ts index e8783bd88..a1807c562 100644 --- a/test-helpers/src/index.ts +++ b/test-helpers/src/index.ts @@ -1,4 +1,5 @@ export * from './startFixture'; +export * from './startFixture/next'; export * from './getStylesheet'; export const getTestNodes = (fixture: string) => diff --git a/test-helpers/src/startFixture/index.ts b/test-helpers/src/startFixture/index.ts index 16cf15bac..62efe404c 100644 --- a/test-helpers/src/startFixture/index.ts +++ b/test-helpers/src/startFixture/index.ts @@ -4,6 +4,7 @@ import { startWebpackFixture, WebpackFixtureOptions } from './webpack'; import { startEsbuildFixture, EsbuildFixtureOptions } from './esbuild'; import { startViteFixture, ViteFixtureOptions } from './vite'; import { startParcelFixture, ParcelFixtureOptions } from './parcel'; +import { NextFixtureOptions, startNextFixture } from './next'; import { TestServer } from './types'; @@ -18,7 +19,8 @@ type FixtureOptions = SharedOptions & | EsbuildFixtureOptions | WebpackFixtureOptions | ViteFixtureOptions - | ParcelFixtureOptions, + | ParcelFixtureOptions + | NextFixtureOptions, 'port' >; export async function startFixture( @@ -67,5 +69,13 @@ export async function startFixture( }); } + if (type === 'next-pages-router' || type === 'next-app-router') { + return startNextFixture({ + type, + port, + mode: options.mode, + }); + } + return startWebpackFixture(fixtureName, { type, ...options, port }); } diff --git a/test-helpers/src/startFixture/next.ts b/test-helpers/src/startFixture/next.ts new file mode 100644 index 000000000..88c223ad2 --- /dev/null +++ b/test-helpers/src/startFixture/next.ts @@ -0,0 +1,133 @@ +import type { + NextServer, + NextServerOptions, +} from '@fixtures/next-pages-router/node_modules/next/dist/server/next'; +import { existsSync } from 'fs'; +import { Server as _Server, createServer } from 'http'; +import path from 'path'; + +import { TestServer } from './types'; +import { serveAssets } from './vite'; + +type Server = _Server & { + __app?: NextServer; +}; + +const DIST_DIR = 'dist'; + +// these are the fixtures that are currently +// configured as routes in the @fixtures/next-* apps +export const nextFixtures = ['recipes'] as const; + +export interface NextFixtureOptions { + type: 'next-app-router' | 'next-pages-router'; + mode?: 'development' | 'production'; + port: number; +} + +const startNextServer = async (app: NextServer) => { + await app.prepare(); + const handler = app.getRequestHandler(); + const server = createServer(handler) as Server; + server['__app'] = app; + + server.listen(app.port, () => { + console.log(`> Next ready on http://${app.hostname}:${app.port}`); + }); + + return server; +}; + +const stopNextApp = async (server: Server) => { + if (server['__app']) { + await server['__app'].close(); + } + + await new Promise((resolve) => { + server.close(() => { + resolve(); + }); + }); +}; + +const startNextApp = async ( + options: NextServerOptions, + type: NextFixtureOptions['type'], +) => { + const { dir, dev } = options; + + const nextServer = await import( + path.join(dir!, 'node_modules', 'next', 'dist', 'server', 'next') + ); + + if (!dev) { + const buildId = existsSync(path.join(dir!, DIST_DIR, 'BUILD_ID')); + + if (!buildId) { + throw new Error(`No production build found for ${type} in ${dir}/${DIST_DIR} + Please run pnpm test:build-next from the root.`); + } + } + + const app = nextServer.default(options) as NextServer; + + const server = await startNextServer(app); + return server; +}; + +const getNextDir = (type: NextFixtureOptions['type']) => + path.dirname(require.resolve(`@fixtures/${type}/package.json`)); + +export const startNextFixture = async ({ + type, + mode = 'development', + port = 3000, +}: NextFixtureOptions): Promise => { + const dev = mode !== 'production'; + const hostname = 'localhost'; + const url = `http://${hostname}:${port}`; + + const nextDir = getNextDir(type); + + // using export mode for production build in next 13 + // due to issues with the distDir config not being set + // properly. + if (!dev && type === 'next-app-router') { + // Use vite to server the static build. + const closeServer = await serveAssets({ + port, + dir: path.join(nextDir, DIST_DIR), + }); + return { + type, + url, + close: closeServer, + }; + } + + process.env.NODE_ENV = mode; + + const nextConfig = await import(path.join(nextDir, 'next.config.js')); + + const options: NextServerOptions = { + dir: nextDir, + dev, + port, + hostname, + quiet: true, + conf: { + // we need to differentiate prod and dev folders + // so they don't overwrite eachother when running tests + ...nextConfig.default, + distDir: dev ? '.next' : DIST_DIR, + }, + }; + + const server = await startNextApp(options, type); + + return { + type, + url, + close: async () => await stopNextApp(server), + }; +}; diff --git a/test-helpers/src/startFixture/types.ts b/test-helpers/src/startFixture/types.ts index 86a0b6916..04512aa74 100644 --- a/test-helpers/src/startFixture/types.ts +++ b/test-helpers/src/startFixture/types.ts @@ -1,4 +1,5 @@ import { EsbuildFixtureOptions } from './esbuild'; +import { NextFixtureOptions } from './next'; import { ParcelFixtureOptions } from './parcel'; import { ViteFixtureOptions } from './vite'; import { WebpackFixtureOptions } from './webpack'; @@ -7,7 +8,8 @@ type BuildType = | WebpackFixtureOptions['type'] | EsbuildFixtureOptions['type'] | ViteFixtureOptions['type'] - | ParcelFixtureOptions['type']; + | ParcelFixtureOptions['type'] + | NextFixtureOptions['type']; export interface TestServer { type: BuildType; diff --git a/test-helpers/src/startFixture/vite.ts b/test-helpers/src/startFixture/vite.ts index a65b0b129..2d3a5e518 100644 --- a/test-helpers/src/startFixture/vite.ts +++ b/test-helpers/src/startFixture/vite.ts @@ -8,7 +8,7 @@ import inspect from 'vite-plugin-inspect'; import { TestServer } from './types'; -const serveAssets = ({ port, dir }: { port: number; dir: string }) => +export const serveAssets = ({ port, dir }: { port: number; dir: string }) => new Promise<() => Promise>((resolve) => { const server = http.createServer((request, response) => { return handler(request, response, { diff --git a/tests/e2e/fixtures-next-development.playwright.ts b/tests/e2e/fixtures-next-development.playwright.ts new file mode 100644 index 000000000..4e9855639 --- /dev/null +++ b/tests/e2e/fixtures-next-development.playwright.ts @@ -0,0 +1,73 @@ +import { + nextFixtures, + startFixture, + TestServer, +} from '@vanilla-extract-private/test-helpers'; +import { expect } from '@playwright/test'; + +import test from './fixture'; + +const testCases = [ + { + type: 'next-pages-router', + mode: 'development', + // @TODO - enable after next plugin fix + clientSideRouting: false, + }, + { + type: 'next-app-router', + mode: 'development', + clientSideRouting: false, + }, +] as const; + +testCases.forEach(({ type, mode, clientSideRouting }) => { + test.describe.serial(`${type} (${mode})`, async () => { + let server: TestServer; + + test.beforeAll(async ({ port }) => { + server = await startFixture(type, { + type, + basePort: port, + mode, + }); + }); + + test(`screenshot`, async ({ page }) => { + for await (const fixture of nextFixtures) { + const fixtureUrl = `${server.url}/${fixture}`; + + await page.goto(fixtureUrl); + await page.waitForSelector(`#${fixture}`, { state: 'attached' }); + expect(await page.screenshot()).toMatchSnapshot(`${fixture}.png`); + } + }); + + if (clientSideRouting) { + test(`screenshot (csr)`, async ({ page }) => { + for await (const fixture of nextFixtures) { + await page.goto(server.url); + await page.waitForLoadState('networkidle'); + + const fixtureUrl = `${server.url}/${fixture}`; + // navigate to fixture page via link + const loc = page.locator('a', { hasText: fixture }); + await loc.click(); + // prevent triggering a css hover on the new page + await page.mouse.move(0, 0); + await page.waitForURL(fixtureUrl); + await page.waitForLoadState('networkidle'); + + await page.waitForSelector(`#${fixture}`, { + state: 'attached', + }); + expect(await page.screenshot()).toMatchSnapshot(`${fixture}.png`); + } + }); + } + + test.afterAll(async () => { + await server.close(); + }); + }); +}); diff --git a/tests/e2e/fixtures-next-production.playwright.ts b/tests/e2e/fixtures-next-production.playwright.ts new file mode 100644 index 000000000..775d9102e --- /dev/null +++ b/tests/e2e/fixtures-next-production.playwright.ts @@ -0,0 +1,46 @@ +import { + nextFixtures, + startFixture, + TestServer, +} from '@vanilla-extract-private/test-helpers'; +import { expect } from '@playwright/test'; + +import test from './fixture'; + +const testCases = [ + { + type: 'next-pages-router', + mode: 'production', + }, + { + type: 'next-app-router', + mode: 'production', + }, +] as const; + +testCases.forEach(({ type, mode }) => { + test.describe.serial(`${type} (${mode})`, async () => { + let server: TestServer; + + test.beforeAll(async ({ port }) => { + server = await startFixture('', { + type, + basePort: port, + mode, + }); + }); + + test(`screenshot`, async ({ page }) => { + for await (const fixture of nextFixtures) { + await page.goto(`${server.url}/${fixture}`); + // make sure the fixture is visible + await page.waitForSelector(`#${fixture}`, { state: 'attached' }); + expect(await page.screenshot()).toMatchSnapshot(`${fixture}.png`); + } + }); + + test.afterAll(async () => { + await server.close(); + }); + }); +}); From 03ba50d689396ac92f7c8100bf587e3fd0b85185 Mon Sep 17 00:00:00 2001 From: Simen Bekkhus Date: Mon, 25 Mar 2024 13:05:06 +0100 Subject: [PATCH 12/36] docs: clarify Webpack usage when using multiple CSS loaders (#1370) --- site/docs/integrations/webpack.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/site/docs/integrations/webpack.md b/site/docs/integrations/webpack.md index 39e0a00a6..33154f7dc 100644 --- a/site/docs/integrations/webpack.md +++ b/site/docs/integrations/webpack.md @@ -65,6 +65,8 @@ module.exports = { }; ``` +If you already have `css-loader` configured, make sure to add `exclude: /\.vanilla\.css$/i` to that rule's configuration. + ## Configuration ```js From ed67731efe19c319a4ed5015e00b8a19a4116dd1 Mon Sep 17 00:00:00 2001 From: Ren Date: Thu, 28 Mar 2024 14:00:44 +1100 Subject: [PATCH 13/36] fix: Next plugin - pages router style loading (#1365) --- .changeset/honest-pugs-tap.md | 5 ++ fixtures/features/src/html.ts | 12 ++++ fixtures/features/src/index.ts | 13 +--- .../next-app-router/src/app/features/page.tsx | 10 +++ .../src/app/sprinkles/page.tsx | 10 +++ .../src/pages/features/index.tsx | 10 +++ .../src/pages/sprinkles/index.tsx | 10 +++ fixtures/sprinkles/src/html.ts | 28 +++++++++ fixtures/sprinkles/src/index.ts | 29 +-------- packages/next-plugin/src/index.ts | 61 +++++++++++++------ test-helpers/src/startFixture/next.ts | 2 +- .../fixtures-next-development.playwright.ts | 3 +- 12 files changed, 135 insertions(+), 58 deletions(-) create mode 100644 .changeset/honest-pugs-tap.md create mode 100644 fixtures/features/src/html.ts create mode 100644 fixtures/next-app-router/src/app/features/page.tsx create mode 100644 fixtures/next-app-router/src/app/sprinkles/page.tsx create mode 100644 fixtures/next-pages-router/src/pages/features/index.tsx create mode 100644 fixtures/next-pages-router/src/pages/sprinkles/index.tsx create mode 100644 fixtures/sprinkles/src/html.ts diff --git a/.changeset/honest-pugs-tap.md b/.changeset/honest-pugs-tap.md new file mode 100644 index 000000000..6b37e5d70 --- /dev/null +++ b/.changeset/honest-pugs-tap.md @@ -0,0 +1,5 @@ +--- +'@vanilla-extract/next-plugin': minor +--- + +Pages router: use next-style-loader in dev, output css in ssr diff --git a/fixtures/features/src/html.ts b/fixtures/features/src/html.ts new file mode 100644 index 000000000..2d81f7bb4 --- /dev/null +++ b/fixtures/features/src/html.ts @@ -0,0 +1,12 @@ +import * as styles from './features.css'; +import testNodes from '../test-nodes.json'; + +export default ` +
Merged style
+
Style with composition
+
Style variants with composition
+
Style variants with mapped composition
+
Composition only
+
Style composition in selector
+
Style variants composition in selector
+ `; diff --git a/fixtures/features/src/index.ts b/fixtures/features/src/index.ts index c8df7beb8..bddb8b10e 100644 --- a/fixtures/features/src/index.ts +++ b/fixtures/features/src/index.ts @@ -1,16 +1,7 @@ -import * as styles from './features.css'; -import testNodes from '../test-nodes.json'; +import html from './html'; function render() { - document.body.innerHTML = ` -
Merged style
-
Style with composition
-
Style variants with composition
-
Style variants with mapped composition
-
Composition only
-
Style composition in selector
-
Style variants composition in selector
- `; + document.body.innerHTML = html; } render(); diff --git a/fixtures/next-app-router/src/app/features/page.tsx b/fixtures/next-app-router/src/app/features/page.tsx new file mode 100644 index 000000000..ffffe61a8 --- /dev/null +++ b/fixtures/next-app-router/src/app/features/page.tsx @@ -0,0 +1,10 @@ +import html from '@fixtures/features/src/html'; + +export default function Features() { + return ( + <> + +
+ + ); +} diff --git a/fixtures/next-app-router/src/app/sprinkles/page.tsx b/fixtures/next-app-router/src/app/sprinkles/page.tsx new file mode 100644 index 000000000..f70bcf5d4 --- /dev/null +++ b/fixtures/next-app-router/src/app/sprinkles/page.tsx @@ -0,0 +1,10 @@ +import html from '@fixtures/sprinkles/src/html'; + +export default function Sprinkles() { + return ( + <> + +
+ + ); +} diff --git a/fixtures/next-pages-router/src/pages/features/index.tsx b/fixtures/next-pages-router/src/pages/features/index.tsx new file mode 100644 index 000000000..ffffe61a8 --- /dev/null +++ b/fixtures/next-pages-router/src/pages/features/index.tsx @@ -0,0 +1,10 @@ +import html from '@fixtures/features/src/html'; + +export default function Features() { + return ( + <> + +
+ + ); +} diff --git a/fixtures/next-pages-router/src/pages/sprinkles/index.tsx b/fixtures/next-pages-router/src/pages/sprinkles/index.tsx new file mode 100644 index 000000000..f70bcf5d4 --- /dev/null +++ b/fixtures/next-pages-router/src/pages/sprinkles/index.tsx @@ -0,0 +1,10 @@ +import html from '@fixtures/sprinkles/src/html'; + +export default function Sprinkles() { + return ( + <> + +
+ + ); +} diff --git a/fixtures/sprinkles/src/html.ts b/fixtures/sprinkles/src/html.ts new file mode 100644 index 000000000..80ef86737 --- /dev/null +++ b/fixtures/sprinkles/src/html.ts @@ -0,0 +1,28 @@ +import { + sprinkles, + mapResponsiveValue, + normalizeResponsiveValue, + preComposedSprinkles, + preComposedSprinklesUsedInSelector, + container, +} from './styles.css'; +import testNodes from '../test-nodes.json'; + +export default ` +
+
+ Sprinkles +
+
Precomposed sprinkles
+
Precomposed Sprinkles Used In Selector
+
+`; diff --git a/fixtures/sprinkles/src/index.ts b/fixtures/sprinkles/src/index.ts index c5031d052..e647b5e2f 100644 --- a/fixtures/sprinkles/src/index.ts +++ b/fixtures/sprinkles/src/index.ts @@ -1,32 +1,7 @@ -import { - sprinkles, - mapResponsiveValue, - normalizeResponsiveValue, - preComposedSprinkles, - preComposedSprinklesUsedInSelector, - container, -} from './styles.css'; -import testNodes from '../test-nodes.json'; +import html from './html'; function render() { - document.body.innerHTML = ` -
-
- Sprinkles -
-
Precomposed sprinkles
-
Precomposed Sprinkles Used In Selector
-
-`; + document.body.innerHTML = html; } render(); diff --git a/packages/next-plugin/src/index.ts b/packages/next-plugin/src/index.ts index 313982d02..b58f8b91c 100644 --- a/packages/next-plugin/src/index.ts +++ b/packages/next-plugin/src/index.ts @@ -33,23 +33,53 @@ function getSupportedBrowsers(dir: string, isDevelopment: boolean) { const getVanillaExtractCssLoaders = ( options: WebpackConfigContext, assetPrefix: string, + hasAppDir: boolean, ) => { const loaders: webpack.RuleSetUseItem[] = []; // Adopt from Next.js' getClientStyleLoader // https://github.com/vercel/next.js/blob/6e5b935fd7a61497f6854a81aec7df3a5dbf61ac/packages/next/src/build/webpack/config/blocks/css/loaders/client.ts#L3 if (!options.isServer) { - // https://github.com/vercel/next.js/blob/6e5b935fd7a61497f6854a81aec7df3a5dbf61ac/packages/next/src/build/webpack/config/blocks/css/loaders/client.ts#L44 - // next-style-loader will mess up css order in development mode. - // Next.js appDir doesn't use next-style-loader either. - // So we always use css-loader here, to simplify things and get proper order of output CSS - loaders.push({ - loader: NextMiniCssExtractPlugin.loader, - options: { - publicPath: `${assetPrefix}/_next/`, - esModule: false, - }, - }); + // https://github.com/vercel/next.js/blob/6e5b935fd7a61497f6854a81aec7df3a5dbf61ac/packages/next/src/build/webpack/config/blocks/css/loaders/client.ts#L16 + // Keep next-style-loader for development mode in `pages/` + if (options.dev && !hasAppDir) { + loaders.push({ + loader: 'next-style-loader', + options: { + insert: function (element: Node) { + // By default, style-loader injects CSS into the bottom + // of . This causes ordering problems between dev + // and prod. To fix this, we render a