feat: @pandabox/unplugin (#36)

packages/unplugin-panda-macro/src/plugin/core.ts

@@ -15,10 +15,23 @@ const ids = {
 }
 
 export interface PluginOptions extends Partial<TransformOptions> {
+  /** @see https://panda-css.com/docs/references/config#cwd */
   cwd?: string
-  configPath?: string
+  /** @see https://panda-css.com/docs/references/cli#--config--c-1 */
+  configPath?: string | undefined
+  /**
+   * @see https://www.npmjs.com/package/@rollup/pluginutils#include-and-exclude
+   * @default `[/\.[cm]?[jt]sx?$/]`
+   */
   include?: string | RegExp | (string | RegExp)[]
+  /**
+   * @see https://www.npmjs.com/package/@rollup/pluginutils#include-and-exclude
+   * @default [/node_modules/]
+   */
   exclude?: string | RegExp | (string | RegExp)[]
+  /**
+   * Will remove unused CSS variables and keyframes from the generated CSS
+   */
   optimizeCss?: boolean
 }
 
@@ -31,7 +44,7 @@ export const unpluginFactory: UnpluginFactory<PluginOptions | undefined> = (rawO
 
   const getCtx = async () => {
     await init()
-    if (!_ctx) throw new Error('@pandabox/vite context not initialized')
+    if (!_ctx) throw new Error('@pandabox/unplugin-panda-macro context not initialized')
     return _ctx as MacroContext
   }
 
@@ -56,10 +69,8 @@ export const unpluginFactory: UnpluginFactory<PluginOptions | undefined> = (rawO
     async load(id) {
       if (id !== ids.resolvedVirtualModuleId) return
 
-      console.time('toCss')
       const ctx = await getCtx()
       const css = ctx.toCss(options)
-      console.timeEnd('toCss')
 
       return css
     },

packages/unplugin-panda-macro/src/plugin/create-context.ts

@@ -41,7 +41,7 @@ export const createMacroContext = (options: MacroContextOptions) => {
       })
     }
 
-    const css = sheet.toCss({ optimize: true })
+    const css = panda.getCss(sheet)
     if (!opts.optimizeCss) return css
 
     const optimized = postcss([removeUnusedCssVars, removeUnusedKeyframes]).process(css)

packages/unplugin/.gitignore

@@ -0,0 +1,85 @@
+# Created by .ignore support plugin (hsz.mobi)
+### Node template
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (https://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# TypeScript v1 declaration files
+typings/
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variables file
+.env
+
+# parcel-bundler cache (https://parceljs.org/)
+.cache
+
+# next.js build output
+.next
+
+# nuxt.js build output
+.nuxt
+
+# Nuxt generate
+dist
+
+# vuepress build output
+.vuepress/dist
+
+# Serverless directories
+.serverless
+
+# IDE
+.idea
+
+## Panda
+styled-system
+styled-system-studio

packages/unplugin/README.md

@@ -0,0 +1,25 @@
+# @pandabox/unplugin
+
+Alternative distribution entrypoint for Panda CSS (other than the [CLI](https://panda-css.com/docs/installation/cli) and
+[PostCSS plugin](https://panda-css.com/docs/installation/postcss)).
+
+## Installation
+
+```bash
+npm i @pandabox/unplugin
+```
+
+## Usage
+
+```ts
+import { defineConfig } from 'vite'
+import { unplugin } from '@pandabox/unplugin'
+
+export default defineConfig({
+  plugins: [
+    unplugin({
+      /* options */
+    }),
+  ],
+})
+```

packages/unplugin/package.json

@@ -0,0 +1,166 @@
+{
+  "name": "@pandabox/unplugin",
+  "type": "module",
+  "version": "0.0.0",
+  "packageManager": "[email protected]",
+  "description": "Panda CSS as a Vite/Rollup/Webpack/Esbuild plugin",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    },
+    "./astro": {
+      "types": "./dist/astro.d.ts",
+      "import": "./dist/astro.js",
+      "require": "./dist/astro.cjs"
+    },
+    "./rspack": {
+      "types": "./dist/rspack.d.ts",
+      "import": "./dist/rspack.js",
+      "require": "./dist/rspack.cjs"
+    },
+    "./vite": {
+      "types": "./dist/vite.d.ts",
+      "import": "./dist/vite.js",
+      "require": "./dist/vite.cjs"
+    },
+    "./webpack": {
+      "types": "./dist/webpack.d.ts",
+      "import": "./dist/webpack.js",
+      "require": "./dist/webpack.cjs"
+    },
+    "./rollup": {
+      "types": "./dist/rollup.d.ts",
+      "import": "./dist/rollup.js",
+      "require": "./dist/rollup.cjs"
+    },
+    "./esbuild": {
+      "types": "./dist/esbuild.d.ts",
+      "import": "./dist/esbuild.js",
+      "require": "./dist/esbuild.cjs"
+    },
+    "./nuxt": {
+      "types": "./dist/nuxt.d.ts",
+      "import": "./dist/nuxt.js",
+      "require": "./dist/nuxt.cjs"
+    },
+    "./types": {
+      "types": "./dist/types.d.ts",
+      "import": "./dist/types.js",
+      "require": "./dist/types.cjs"
+    },
+    "./*": "./*"
+  },
+  "main": "dist/index.cjs",
+  "module": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "typesVersions": {
+    "*": {
+      "*": [
+        "./dist/*",
+        "./*"
+      ]
+    }
+  },
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch src",
+    "build:fix": "esno scripts/postbuild.ts",
+    "lint": "eslint .",
+    "play": "npm -C playground run dev",
+    "prepublishOnly": "npm run build",
+    "start": "esno src/index.ts",
+    "test": "vitest"
+  },
+  "dependencies": {
+    "@pandabox/postcss-plugins": "workspace:^",
+    "@pandacss/config": "^0.33.0",
+    "@pandacss/core": "^0.33.0",
+    "@pandacss/extractor": "^0.33.0",
+    "@pandacss/node": "^0.33.0",
+    "@pandacss/shared": "^0.33.0",
+    "@rollup/pluginutils": "^5.1.0",
+    "magic-string": "^0.30.7",
+    "postcss": "^8.4.35",
+    "ts-morph": "21.0.1",
+    "unplugin": "^1.7.1"
+  },
+  "imports": {
+    "#pandabox/fixtures": "../fixtures/src/index.ts"
+  },
+  "devDependencies": {
+    "@nuxt/kit": "^3.10.3",
+    "@nuxt/schema": "^3.10.3",
+    "@pandacss/preset-base": "^0.33.0",
+    "@pandacss/preset-panda": "^0.33.0",
+    "@pandacss/types": "^0.33.0",
+    "@types/node": "^20.11.21",
+    "chalk": "^5.3.0",
+    "esno": "^4.0.0",
+    "fast-glob": "^3.3.2",
+    "nodemon": "^3.1.0",
+    "rollup": "^4.12.0",
+    "tsup": "^8.0.2",
+    "typescript": "^5.3.3",
+    "vite": "^5.1.4",
+    "vitest": "^1.3.1",
+    "webpack": "^5.90.3"
+  },
+  "peerDependencies": {
+    "@nuxt/kit": "^3",
+    "@nuxt/schema": "^3",
+    "esbuild": "*",
+    "rollup": "^3",
+    "vite": ">=3",
+    "webpack": "^4 || ^5"
+  },
+  "peerDependenciesMeta": {
+    "webpack": {
+      "optional": true
+    },
+    "rollup": {
+      "optional": true
+    },
+    "vite": {
+      "optional": true
+    },
+    "esbuild": {
+      "optional": true
+    },
+    "@nuxt/kit": {
+      "optional": true
+    },
+    "@nuxt/schema": {
+      "optional": true
+    }
+  },
+  "files": [
+    "src",
+    "dist"
+  ],
+  "homepage": "https://astahmer.dev",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/astahmer/pandabox.git",
+    "directory": "packages/unplugin"
+  },
+  "author": "Alexandre Stahmer",
+  "publishConfig": {
+    "access": "public"
+  },
+  "sideEffects": false,
+  "keywords": [
+    "pandacss",
+    "pandabox",
+    "panda",
+    "typesafety",
+    "typescript",
+    "unplugin",
+    "vite",
+    "webpack",
+    "rollup",
+    "esbuild",
+    "transform"
+  ]
+}

packages/unplugin/playground/App.tsx

@@ -0,0 +1,57 @@
+import { css, cva } from './styled-system/css'
+import { center } from './styled-system/patterns'
+import { button } from './styled-system/recipes'
+import { Stack, styled } from './styled-system/jsx'
+import 'virtual:panda.css'
+// import './panda.css'
+
+const overrides = css.raw({
+  bg: 'green.100',
+})
+
+const atomicRecipe = cva({
+  base: {
+    display: 'flex',
+  },
+  variants: {
+    visual: {
+      solid: { bg: 'red.200', color: 'white' },
+      outline: { borderWidth: '1px', borderColor: 'red.200' },
+    },
+    size: {
+      sm: { padding: '4', fontSize: '12px' },
+      lg: { padding: '8', fontSize: '24px' },
+    },
+  },
+})
+
+export const App = () => {
+  return (
+    <div className={center({ h: 'full' })}>
+      <div
+        className={css(
+          {
+            textStyle: '4xl',
+            display: 'flex',
+            flexDirection: 'column',
+            color: 'green.300',
+            textAlign: 'center',
+            fontWeight: 'semibold',
+          },
+          {
+            color: 'red.500',
+            bg: 'yellow.200',
+          },
+          overrides,
+        )}
+      >
+        <Stack fontSize="2xl">
+          <styled.div border="2px solid token(colors.red.300)">🐼</styled.div>
+          <span>Hello from Panda</span>
+        </Stack>
+      </div>
+      <div className={button({ size: 'lg', visual: 'funky' })}>Button</div>
+      <div className={atomicRecipe({ visual: 'solid', size: 'sm' })}>Atomic Button</div>
+    </div>
+  )
+}