fix(postcss): correct windows paths for webpack (#1999)

* fix(postcss): correct windows paths for webpack * chore: add changeset * chore(postcss): improve tests for normalization * refactor: normalize paths --------- Co-authored-by: Segun Adebayo <[email protected]>
chakra-ui · Jan 15, 2024 · ee9341d · ee9341d · vercel · Jan 15, 2024
1 parent fee015f
commit ee9341d
Show file tree

Hide file tree

Showing 8 changed files with 275 additions and 32 deletions.
diff --git a/.changeset/tender-bottles-warn.md b/.changeset/tender-bottles-warn.md
@@ -0,0 +1,7 @@
+---
+'@pandacss/postcss': patch
+'@pandacss/node': patch
+'@pandacss/types': patch
+---
+
+Fix issue in windows environments where HMR doesn't work in webpack projects.
diff --git a/package.json b/package.json
@@ -38,6 +38,7 @@
     "@changesets/cli": "2.26.2",
     "chokidar": "^3.5.3",
     "concurrently": "^8.2.0",
+    "cross-env": "^7.0.3",
     "happy-dom": "^12.1.6",
     "husky": "8.0.3",
     "lint-staged": "13.2.3",

diff --git a/packages/node/src/builder.ts b/packages/node/src/builder.ts
@@ -3,7 +3,7 @@ import { optimizeCss } from '@pandacss/core'
 import { ConfigNotFoundError } from '@pandacss/error'
 import { logger } from '@pandacss/logger'
 import { existsSync, statSync } from 'fs'
-import { resolve } from 'pathe'
+import { normalize, resolve } from 'pathe'
 import type { Message, Root } from 'postcss'
 import { codegen } from './codegen'
 import { loadConfigAndCreateContext } from './config'
@@ -175,7 +175,6 @@ export class Builder {
   write = (root: Root) => {
     const ctx = this.getContextOrThrow()
     const sheet = ctx.createSheet()
-    ctx.appendLayerParams(sheet)
     ctx.appendBaselineCss(sheet)
     const css = ctx.getCss(sheet)
 
@@ -193,13 +192,11 @@ export class Builder {
 
     for (const fileOrGlob of ctx.config.include) {
       const dependency = parseDependency(fileOrGlob)
-      if (dependency) {
-        fn(dependency)
-      }
+      if (dependency) fn(dependency)
     }
 
     for (const file of this.configDependencies) {
-      fn({ type: 'dependency', file: ctx.runtime.path.resolve(file) })
+      fn({ type: 'dependency', file: normalize(resolve(file)) })
     }
   }
 }

diff --git a/packages/node/src/parse-dependency.ts b/packages/node/src/parse-dependency.ts
@@ -1,5 +1,5 @@
 import isGlob from 'is-glob'
-import { resolve } from 'pathe'
+import { resolve, normalize } from 'pathe'
 import type { Message } from 'postcss'
 import { parseGlob } from './parse-glob'
 
@@ -12,13 +12,13 @@ export function parseDependency(fileOrGlob: string) {
 
   if (isGlob(fileOrGlob)) {
     const { base, glob } = parseGlob(fileOrGlob)
-    message = { type: 'dir-dependency', dir: resolve(base), glob }
+    message = { type: 'dir-dependency', dir: normalize(resolve(base)), glob }
   } else {
-    message = { type: 'dependency', file: resolve(fileOrGlob) }
+    message = { type: 'dependency', file: normalize(resolve(fileOrGlob)) }
   }
 
   if (message.type === 'dir-dependency' && process.env.ROLLUP_WATCH === 'true') {
-    message = { type: 'dependency', file: resolve(message.dir) }
+    message = { type: 'dependency', file: normalize(resolve(message.dir)) }
   }
 
   return message

diff --git a/packages/studio/styled-system/jsx/is-valid-prop.mjs b/packages/studio/styled-system/jsx/is-valid-prop.mjs
diff --git a/packages/types/package.json b/packages/types/package.json
@@ -15,7 +15,7 @@
   "scripts": {
     "prepare": "ncp node_modules/csstype/index.d.ts src/csstype.d.ts",
     "dev": "tsx scripts/watch.ts",
-    "build": "PANDA_BUILD=1 tsx scripts/postbuild.ts && tsx scripts/build.ts"
+    "build": "cross-env PANDA_BUILD=1 tsx scripts/postbuild.ts && tsx scripts/build.ts"
   },
   "sideEffects": false,
   "homepage": "https://panda-css.com",