refactor: tweak scripts and fix playground (#1592)

Author: segunadebayo

package.json

@@ -6,10 +6,8 @@
   "scripts": {
     "playground": "pnpm --filter=./playground",
     "build:playground": "pnpm --filter {./playground}... build",
-    "build:shared": "pnpm --filter {./packages/shared}... build-fast",
     "prepare": "husky install && pnpm build-fast",
-    "dev:extensions": "pnpm -r --parallel  --filter=./extension/** dev",
-    "dev": "pnpm --parallel --filter=./packages/shared --filter=./packages/is-valid-prop --filter=./packages/postcss dev",
+    "dev": "pnpm --parallel --filter=./packages/** dev",
     "build-fast": "pnpm -r --parallel --filter=./packages/** build-fast",
     "build": "pnpm -r --filter=./packages/** build",
     "check": "pnpm build && pnpm typecheck && pnpm lint && pnpm test run",
@@ -25,15 +23,12 @@
     "typecheck": "tsc --noEmit",
     "release": "changeset publish",
     "release-dev": "changeset version --snapshot dev && changeset publish --tag dev",
-    "prepare-studio": "PANDA_CLI=compiled pnpm --filter=./packages/studio codegen",
-    "build-studio": "PANDA_CLI=compiled pnpm --filter=./sandbox/vite-ts exec pnpm panda studio --build",
-    "deploy-studio": "PANDA_CLI=compiled pnpm prepare-studio && pnpm build-studio",
+    "prepare-studio": "pnpm --filter=./packages/studio codegen",
+    "build-studio": "pnpm --filter=./sandbox/vite-ts exec pnpm panda studio --build",
+    "deploy-studio": "pnpm prepare-studio && pnpm build-studio",
     "serve-studio": "npx serve ./sandbox/vite-ts/panda-static",
     "website": "pnpm --filter=./website",
-    "mdx-check": "mdx-local-link-checker docs && mdx-local-link-checker website/pages/docs",
-    "extension:build": "pnpm --filter=./extension/vscode build",
-    "extension:release": "pnpm --filter=./extension/vscode release",
-    "extension:prerelease": "pnpm --filter=./extension/vscode prerelease"
+    "mdx-check": "mdx-local-link-checker docs && mdx-local-link-checker website/pages/docs"
   },
   "keywords": [],
   "author": "Segun Adebayo <[email protected]>",
@@ -44,10 +39,14 @@
     "@types/node": "20.4.5",
     "@typescript-eslint/eslint-plugin": "6.2.1",
     "@typescript-eslint/parser": "6.2.1",
+    "chokidar": "^3.5.3",
     "concurrently": "^8.2.0",
+    "happy-dom": "^12.1.6",
     "husky": "8.0.3",
+    "mdx-local-link-checker": "^2.1.1",
     "lint-staged": "13.2.3",
     "prettier": "^2.8.8",
+    "rimraf": "^5.0.1",
     "ts-morph": "19.0.0",
     "tsup": "7.1.0",
     "tsx": "3.12.10",
@@ -63,10 +62,9 @@
     ]
   },
   "packageManager": "[email protected]",
-  "devDependencies": {
-    "chokidar": "^3.5.3",
-    "happy-dom": "^12.1.6",
-    "mdx-local-link-checker": "^2.1.1",
-    "rimraf": "^5.0.1"
+  "pnpm": {
+    "overrides": {
+      "@swc/helpers@~0.4": "0.4.36"
+    }
   }
 }

packages/cli/bin.js

@@ -1,27 +1,3 @@
 #!/usr/bin/env node
 
-// check if we're running in dev mode
-const fs = require('fs')
-const path = require('path')
-const srcPath = path.resolve(path.join(__dirname, './src'))
-const isDevMode = fs.existsSync(srcPath)
-// or want to "force" running the compiled version with PANDA_CLI_MODE=compiled
-const wantsCompiled = process.env.PANDA_CLI === 'compiled'
-
-if (wantsCompiled || !isDevMode) {
-  // this runs from the compiled javascript source
-  require(`./dist/cli-default.js`)
-} else {
-  const workspacePackagesDir = path.resolve(__dirname, '..')
-  const symlink = require('@pandacss/symlink')
-
-  const unregister = symlink({
-    workspacePackagesDir,
-    requireSource: () => {
-      const mod = require('./src/cli-main')
-      mod.main(true)
-    },
-  })
-
-  unregister()
-}
+require(`./dist/cli-default.js`)

packages/cli/package.json

@@ -65,7 +65,6 @@
     "@pandacss/preset-panda": "workspace:*",
     "@pandacss/shared": "workspace:*",
     "@pandacss/studio": "workspace:*",
-    "@pandacss/symlink": "workspace:*",
     "@pandacss/token-dictionary": "workspace:*",
     "@pandacss/types": "workspace:*",
     "cac": "6.7.14",

packages/generator/package.json

@@ -24,7 +24,8 @@
   },
   "scripts": {
     "build": "tsup src/index.ts --format=esm,cjs --dts",
-    "build-fast": "tsup src/index.ts --format=esm,cjs --no-dts"
+    "build-fast": "tsup src/index.ts --format=esm,cjs --no-dts",
+    "dev": "pnpm build-fast --watch"
   },
   "files": [
     "dist"

packages/parser/__tests__/output.test.ts

@@ -792,10 +792,13 @@ describe('extract to css output pipeline', () => {
           .\\\\[\\\\@media_\\\\(min-width\\\\:_768px\\\\)\\\\]\\\\:\\\\[\\\\&\\\\:disabled\\\\]\\\\:filter_brightness\\\\(1\\\\):disabled {
             filter: brightness(1)
               }
+                  }
+
+        @media (min-width: 768px) {
           .\\\\[\\\\@media_\\\\(min-width\\\\:_768px\\\\)\\\\]\\\\:p_1rem_0 {
             padding: 1rem 0
           }
-                  }
+              }
       }"
     `)
   })
@@ -1960,7 +1963,11 @@ describe('extract to css output pipeline', () => {
           margin-block-start: 1em
                   }
 
-        .\\\\[\\\\&_h1\\\\]\\\\:\\\\[\\\\&\\\\:not\\\\(\\\\:first-child\\\\)\\\\]\\\\:mb_1em h1:not(:first-child),.\\\\[\\\\&_h2\\\\]\\\\:\\\\[\\\\&\\\\:not\\\\(\\\\:first-child\\\\)\\\\]\\\\:mb_1em h2:not(:first-child) {
+        .\\\\[\\\\&_h1\\\\]\\\\:\\\\[\\\\&\\\\:not\\\\(\\\\:first-child\\\\)\\\\]\\\\:mb_1em h1:not(:first-child) {
+          margin-block-end: 1em
+                  }
+
+        .\\\\[\\\\&_h2\\\\]\\\\:\\\\[\\\\&\\\\:not\\\\(\\\\:first-child\\\\)\\\\]\\\\:mb_1em h2:not(:first-child) {
           margin-block-end: 1em
                   }
       }"

packages/postcss/entry.js

@@ -2,17 +2,18 @@
   "name": "@pandacss/postcss",
   "version": "0.17.4",
   "description": "PostCSS integration for Panda CSS",
-  "main": "entry.js",
+  "main": "dist/index.js",
+  "module": "dist/index.mjs",
   "types": "dist/index.d.ts",
   "author": "Segun Adebayo <[email protected]>",
   "exports": {
     ".": {
       "source": "./src/index.ts",
       "types": "./dist/index.d.ts",
-      "require": "./entry.js",
+      "require": "./dist/index.js",
       "import": {
         "types": "./dist/index.d.mts",
-        "default": "./entry.js"
+        "default": "./dist/index.mjs"
       }
     },
     "./package.json": "./package.json"
@@ -27,12 +28,10 @@
     "access": "public"
   },
   "files": [
-    "dist",
-    "entry.js"
+    "dist"
   ],
   "dependencies": {
     "@pandacss/node": "workspace:*",
-    "@pandacss/symlink": "workspace:*",
     "postcss": "^8.4.31"
   }
 }

packages/postcss/package.json

@@ -16,12 +16,6 @@ const nextConfig = {
     return config
   },
   reactStrictMode: true,
-  experimental: {
-    appDir: true,
-    outputFileTracingExcludes: {
-      '*': ['**@swc**'],
-    },
-  },
 }
 
 module.exports = nextConfig

packages/symlink/CHANGELOG.md

@@ -33,7 +33,7 @@
     "monaco-editor": "0.40.0",
     "monaco-jsx-highlighter": "^2.0.4",
     "nanoid": "4.0.2",
-    "next": "13.5.6",
+    "next": "14.0.0",
     "next-themes": "^0.2.1",
     "os-browserify": "0.3.0",
     "outdent": " ^0.8.0",
@@ -60,4 +60,4 @@
     "eslint": "8.46.0",
     "eslint-config-next": "13.4.12"
   }
-}
+}

packages/symlink/package.json

@@ -5,11 +5,9 @@ const defineMetadata = <T extends Metadata>(metadata: T) => metadata
 const seoConfig = defineMetadata({
   title: {
     template: '%s - Panda Playground',
-    default:
-      'Panda Playground - Explore and experiment with Panda CSS, the build time and type-safe CSS-in-JS styling engine',
+    default: 'Panda Playground',
   },
-  description:
-    'Explore and experiment with Panda CSS, the build time and type-safe CSS-in-JS styling engine with our interactive playground. Discover the power of Panda CSS in this user-friendly visual environment for hassle-free prototyping and rapid development.',
+  description: 'Explore Panda CSS with an interactive playground. Create and share your own Panda CSS snippets.',
   themeColor: '#F6E458',
   openGraph: {
     images: '/og-image.png',