@pandacss/postcss 1.11.2 → 2.0.0-beta.0

package/LICENSE.md

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2023 Segun Adebayo
+Copyright (c) 2023 Chakra Systems Inc.
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

package/README.md

@@ -0,0 +1,31 @@
+# @pandacss/postcss
+
+The PostCSS plugin for [Panda CSS](https://panda-css.com).
+
+## Installation
+
+```bash
+npm install -D @pandacss/postcss
+```
+
+> If you use `@pandacss/dev`, you can reference the plugin as `@pandacss/dev/postcss` without installing this package
+> separately.
+
+## Usage
+
+```js
+// postcss.config.cjs
+module.exports = {
+  plugins: {
+    '@pandacss/postcss': {},
+  },
+}
+```
+
+## Documentation
+
+Visit the [Panda CSS documentation](https://panda-css.com) to learn more.
+
+## License
+
+MIT © [Chakra Systems Inc.](https://github.com/chakra-ui)

package/dist/index.cjs

@@ -0,0 +1,134 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _nullishCoalesce(lhs, rhsFn) { if (lhs != null) { return lhs; } else { return rhsFn(); } } function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; }// src/index.ts
+var _compiler = require('@pandacss/compiler');
+var _path = require('path');
+var PLUGIN_NAME = "pandacss";
+var driverStates = /* @__PURE__ */ new Map();
+var driverGuard;
+var pandacss = (options = {}) => {
+  const postcssProcess = async (root, result) => {
+    const fileName = result.opts.from;
+    if (shouldSkip(fileName, options.allow)) return;
+    const inputCss = getInputCss(root, result);
+    if (!inputCss.includes("@layer")) return;
+    const cwd = _path.resolve.call(void 0, _nullishCoalesce(options.cwd, () => ( process.cwd())));
+    const key = getDriverKey(cwd, options.configPath);
+    let state = driverStates.get(key);
+    if (!state) {
+      const driver2 = await _compiler.createNodeDriver.call(void 0, { cwd, configPath: options.configPath });
+      state = { driver: driver2, generatedOutdirs: /* @__PURE__ */ new Set() };
+      driverStates.set(key, state);
+    } else {
+      const diff = await state.driver.reload();
+      if (diff.hasChanged) {
+        state.generatedOutdirs.clear();
+      }
+    }
+    const { driver } = state;
+    if (!driver.compiler.hasLayerDeclaration(inputCss)) return;
+    ensureCodegen(state, { cwd, outdir: options.outdir });
+    driver.parseFiles();
+    registerDependencies(driver, result, cwd, fileName);
+    const output = driver.cssgen({ emitLayerDeclaration: false });
+    emitDiagnostics(root, result, output.diagnostics);
+    root.append(output.css);
+    root.walk((node) => {
+      if (!node.source) {
+        node.source = root.source;
+      }
+    });
+  };
+  return {
+    postcssPlugin: PLUGIN_NAME,
+    Once(root, helpers) {
+      driverGuard = Promise.resolve(driverGuard).catch(() => {
+      }).then(() => postcssProcess(root, helpers.result));
+      return driverGuard;
+    }
+  };
+};
+pandacss.postcss = true;
+var index_default = pandacss;
+var nodeModulesRegex = /node_modules/;
+function isValidCss(file) {
+  const [filePath] = file.split("?");
+  return _path.extname.call(void 0, filePath) === ".css";
+}
+var shouldSkip = (fileName, allow) => {
+  if (!fileName) return true;
+  if (!isValidCss(fileName)) return true;
+  if (_optionalChain([allow, 'optionalAccess', _ => _.some, 'call', _2 => _2((pattern) => pattern.test(fileName))])) return false;
+  return nodeModulesRegex.test(fileName);
+};
+function getDriverKey(cwd, configPath) {
+  return `${cwd}:${_nullishCoalesce(configPath, () => ( ""))}`;
+}
+function getInputCss(root, result) {
+  const opts = result.opts;
+  return _nullishCoalesce(opts.css, () => ( root.toString()));
+}
+function ensureCodegen(state, options) {
+  const outdirKey = state.driver.getOutdir(options.outdir);
+  if (state.generatedOutdirs.has(outdirKey)) return;
+  state.driver.codegen({ cwd: options.cwd, outdir: options.outdir });
+  state.generatedOutdirs.add(outdirKey);
+}
+function registerDependencies(driver, result, cwd, parent) {
+  for (const source of driver.compiler.sources()) {
+    result.messages.push(
+      withPluginMetadata(
+        createSourceDependency({
+          dir: _path.normalize.call(void 0, _path.resolve.call(void 0, cwd, source.base)),
+          glob: source.pattern
+        }),
+        parent
+      )
+    );
+  }
+  const configDeps = new Set(driver.configDependencies.map((file) => _path.normalize.call(void 0, _path.resolve.call(void 0, cwd, file))));
+  if (driver.configPath) {
+    configDeps.add(_path.normalize.call(void 0, _path.resolve.call(void 0, cwd, driver.configPath)));
+  }
+  for (const file of configDeps) {
+    result.messages.push(
+      withPluginMetadata(
+        {
+          type: "dependency",
+          file
+        },
+        parent
+      )
+    );
+  }
+}
+function createSourceDependency(source) {
+  if (process.env.ROLLUP_WATCH === "true") {
+    return { type: "dependency", file: source.dir };
+  }
+  return { type: "dir-dependency", dir: source.dir, glob: source.glob };
+}
+function withPluginMetadata(message, parent) {
+  return {
+    ...message,
+    plugin: PLUGIN_NAME,
+    parent
+  };
+}
+function formatDiagnostic(diagnostic) {
+  const file = diagnostic.file ? `${diagnostic.file}` : "";
+  const location = diagnostic.location ? `:${diagnostic.location.start.line}:${diagnostic.location.start.column}` : diagnostic.span ? `:${diagnostic.span.start}` : "";
+  return `${diagnostic.severity} ${diagnostic.code} ${file}${location} ${diagnostic.message}`.replace(/\s+/g, " ");
+}
+function emitDiagnostics(root, result, diagnostics) {
+  const error = diagnostics.find((diagnostic) => diagnostic.severity === "error");
+  if (error) {
+    throw root.error(formatDiagnostic(error), { plugin: PLUGIN_NAME });
+  }
+  for (const diagnostic of diagnostics) {
+    result.warn(formatDiagnostic(diagnostic), { plugin: PLUGIN_NAME });
+  }
+}
+
+
+exports.default = index_default;
+
+module.exports = exports.default;

package/dist/index.d.cts

@@ -0,0 +1,17 @@
+import { PluginCreator } from 'postcss';
+
+interface PluginOptions {
+    /** Explicit config file (relative to `cwd`); otherwise discovered upward. */
+    configPath?: string;
+    /** Project root. Defaults to the current working directory. */
+    cwd?: string;
+    /** Where codegen artifacts are written. Defaults to the config `outdir`. */
+    outdir?: string;
+    /** Allow selected `node_modules` CSS files through the processing guard. */
+    allow?: RegExp[];
+}
+declare const pandacss: PluginCreator<PluginOptions>;
+
+// @ts-ignore
+export = pandacss;
+export type { PluginOptions };

package/dist/index.d.ts

@@ -1,14 +1,15 @@
-import { Builder } from '@pandacss/node';
 import { PluginCreator } from 'postcss';
 
 interface PluginOptions {
+    /** Explicit config file (relative to `cwd`); otherwise discovered upward. */
     configPath?: string;
+    /** Project root. Defaults to the current working directory. */
     cwd?: string;
-    logfile?: string;
+    /** Where codegen artifacts are written. Defaults to the config `outdir`. */
+    outdir?: string;
+    /** Allow selected `node_modules` CSS files through the processing guard. */
     allow?: RegExp[];
 }
-declare const loadConfig: () => any;
-declare const builder: Builder;
 declare const pandacss: PluginCreator<PluginOptions>;
 
-export { type PluginOptions, builder, pandacss as default, loadConfig, pandacss };
+export { type PluginOptions, pandacss as default };

package/dist/index.js

@@ -1,72 +1,36 @@
-"use strict";
-var __create = Object.create;
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-  // If the importer is in node compatibility mode or this is not an ESM
-  // file that has been converted to a CommonJS file using a Babel-
-  // compatible transform (i.e. "__esModule" has not been set), then set
-  // "default" to the CommonJS "module.exports" for node compatibility.
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
-  mod
-));
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-
 // src/index.ts
-var index_exports = {};
-__export(index_exports, {
-  builder: () => builder,
-  default: () => index_default,
-  loadConfig: () => loadConfig,
-  pandacss: () => pandacss
-});
-module.exports = __toCommonJS(index_exports);
-var import_node = require("@pandacss/node");
-var import_module = require("module");
-var import_path = __toESM(require("path"));
-var customRequire = (0, import_module.createRequire)(__dirname);
+import { createNodeDriver } from "@pandacss/compiler";
+import { extname, normalize, resolve } from "path";
 var PLUGIN_NAME = "pandacss";
-var interopDefault = (obj) => obj && obj.__esModule ? obj.default : obj;
-var loadConfig = () => interopDefault(customRequire("@pandacss/postcss"));
-var stream;
-var builder = new import_node.Builder();
-var builderGuard;
+var driverStates = /* @__PURE__ */ new Map();
+var driverGuard;
 var pandacss = (options = {}) => {
-  const { configPath, cwd, logfile, allow } = options;
-  if (!stream && logfile) {
-    stream = (0, import_node.setLogStream)({ cwd, logfile });
-  }
-  const postcssProcess = async function(root, result) {
+  const postcssProcess = async (root, result) => {
     const fileName = result.opts.from;
-    const skip = shouldSkip(fileName, allow);
-    if (skip) return;
-    await builder.setup({ configPath, cwd });
-    if (!builder.isValidRoot(root)) return;
-    await builder.emit();
-    builder.extract();
-    builder.registerDependency((dep) => {
-      result.messages.push({
-        ...dep,
-        plugin: PLUGIN_NAME,
-        parent: result.opts.from
-      });
-    });
-    builder.write(root);
+    if (shouldSkip(fileName, options.allow)) return;
+    const inputCss = getInputCss(root, result);
+    if (!inputCss.includes("@layer")) return;
+    const cwd = resolve(options.cwd ?? process.cwd());
+    const key = getDriverKey(cwd, options.configPath);
+    let state = driverStates.get(key);
+    if (!state) {
+      const driver2 = await createNodeDriver({ cwd, configPath: options.configPath });
+      state = { driver: driver2, generatedOutdirs: /* @__PURE__ */ new Set() };
+      driverStates.set(key, state);
+    } else {
+      const diff = await state.driver.reload();
+      if (diff.hasChanged) {
+        state.generatedOutdirs.clear();
+      }
+    }
+    const { driver } = state;
+    if (!driver.compiler.hasLayerDeclaration(inputCss)) return;
+    ensureCodegen(state, { cwd, outdir: options.outdir });
+    driver.parseFiles();
+    registerDependencies(driver, result, cwd, fileName);
+    const output = driver.cssgen({ emitLayerDeclaration: false });
+    emitDiagnostics(root, result, output.diagnostics);
+    root.append(output.css);
     root.walk((node) => {
       if (!node.source) {
         node.source = root.source;
@@ -75,13 +39,11 @@ var pandacss = (options = {}) => {
   };
   return {
     postcssPlugin: PLUGIN_NAME,
-    plugins: [
-      function(...args) {
-        builderGuard = Promise.resolve(builderGuard).catch(() => {
-        }).then(() => postcssProcess(...args));
-        return builderGuard;
-      }
-    ]
+    Once(root, helpers) {
+      driverGuard = Promise.resolve(driverGuard).catch(() => {
+      }).then(() => postcssProcess(root, helpers.result));
+      return driverGuard;
+    }
   };
 };
 pandacss.postcss = true;
@@ -89,17 +51,82 @@ var index_default = pandacss;
 var nodeModulesRegex = /node_modules/;
 function isValidCss(file) {
   const [filePath] = file.split("?");
-  return import_path.default.extname(filePath) === ".css";
+  return extname(filePath) === ".css";
 }
 var shouldSkip = (fileName, allow) => {
   if (!fileName) return true;
   if (!isValidCss(fileName)) return true;
-  if (allow?.some((p) => p.test(fileName))) return false;
+  if (allow?.some((pattern) => pattern.test(fileName))) return false;
   return nodeModulesRegex.test(fileName);
 };
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
-  builder,
-  loadConfig,
-  pandacss
-});
+function getDriverKey(cwd, configPath) {
+  return `${cwd}:${configPath ?? ""}`;
+}
+function getInputCss(root, result) {
+  const opts = result.opts;
+  return opts.css ?? root.toString();
+}
+function ensureCodegen(state, options) {
+  const outdirKey = state.driver.getOutdir(options.outdir);
+  if (state.generatedOutdirs.has(outdirKey)) return;
+  state.driver.codegen({ cwd: options.cwd, outdir: options.outdir });
+  state.generatedOutdirs.add(outdirKey);
+}
+function registerDependencies(driver, result, cwd, parent) {
+  for (const source of driver.compiler.sources()) {
+    result.messages.push(
+      withPluginMetadata(
+        createSourceDependency({
+          dir: normalize(resolve(cwd, source.base)),
+          glob: source.pattern
+        }),
+        parent
+      )
+    );
+  }
+  const configDeps = new Set(driver.configDependencies.map((file) => normalize(resolve(cwd, file))));
+  if (driver.configPath) {
+    configDeps.add(normalize(resolve(cwd, driver.configPath)));
+  }
+  for (const file of configDeps) {
+    result.messages.push(
+      withPluginMetadata(
+        {
+          type: "dependency",
+          file
+        },
+        parent
+      )
+    );
+  }
+}
+function createSourceDependency(source) {
+  if (process.env.ROLLUP_WATCH === "true") {
+    return { type: "dependency", file: source.dir };
+  }
+  return { type: "dir-dependency", dir: source.dir, glob: source.glob };
+}
+function withPluginMetadata(message, parent) {
+  return {
+    ...message,
+    plugin: PLUGIN_NAME,
+    parent
+  };
+}
+function formatDiagnostic(diagnostic) {
+  const file = diagnostic.file ? `${diagnostic.file}` : "";
+  const location = diagnostic.location ? `:${diagnostic.location.start.line}:${diagnostic.location.start.column}` : diagnostic.span ? `:${diagnostic.span.start}` : "";
+  return `${diagnostic.severity} ${diagnostic.code} ${file}${location} ${diagnostic.message}`.replace(/\s+/g, " ");
+}
+function emitDiagnostics(root, result, diagnostics) {
+  const error = diagnostics.find((diagnostic) => diagnostic.severity === "error");
+  if (error) {
+    throw root.error(formatDiagnostic(error), { plugin: PLUGIN_NAME });
+  }
+  for (const diagnostic of diagnostics) {
+    result.warn(formatDiagnostic(diagnostic), { plugin: PLUGIN_NAME });
+  }
+}
+export {
+  index_default as default
+};

package/package.json

@@ -1,21 +1,18 @@
 {
   "name": "@pandacss/postcss",
-  "version": "1.11.2",
-  "description": "PostCSS integration for Panda CSS",
-  "main": "dist/index.js",
-  "module": "dist/index.mjs",
-  "types": "dist/index.d.ts",
+  "version": "2.0.0-beta.0",
+  "description": "PostCSS plugin for Panda CSS",
+  "type": "module",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
   "author": "Segun Adebayo <joseshegs@gmail.com>",
   "license": "MIT",
   "exports": {
     ".": {
       "source": "./src/index.ts",
       "types": "./dist/index.d.ts",
-      "require": "./dist/index.js",
-      "import": {
-        "types": "./dist/index.d.mts",
-        "default": "./dist/index.mjs"
-      }
+      "require": "./dist/index.cjs",
+      "import": "./dist/index.js"
     },
     "./package.json": "./package.json"
   },
@@ -33,15 +30,19 @@
     "dist"
   ],
   "dependencies": {
-    "postcss": "8.5.14",
-    "@pandacss/node": "1.11.2"
+    "@pandacss/compiler": "2.0.0-beta.0",
+    "@pandacss/compiler-shared": "2.0.0-beta.0"
+  },
+  "peerDependencies": {
+    "postcss": ">=8"
   },
   "devDependencies": {
-    "@pandacss/logger": "1.11.2"
+    "postcss": "8.5.14"
   },
   "scripts": {
-    "build": "tsup src/index.ts --format=cjs,esm --shims --dts",
-    "build-fast": "tsup src/index.ts --format=cjs,esm --shims --no-dts",
-    "dev": "pnpm build-fast --watch"
+    "build": "tsup",
+    "build:fast": "tsup --no-dts",
+    "dev": "pnpm build:fast --watch src",
+    "test": "vitest run"
   }
 }

package/dist/index.d.mts

@@ -1,14 +0,0 @@
-import { Builder } from '@pandacss/node';
-import { PluginCreator } from 'postcss';
-
-interface PluginOptions {
-    configPath?: string;
-    cwd?: string;
-    logfile?: string;
-    allow?: RegExp[];
-}
-declare const loadConfig: () => any;
-declare const builder: Builder;
-declare const pandacss: PluginCreator<PluginOptions>;
-
-export { type PluginOptions, builder, pandacss as default, loadConfig, pandacss };

package/dist/index.mjs

@@ -1,75 +0,0 @@
-// ../../node_modules/.pnpm/tsup@8.5.1_@swc+core@1.15.3_@swc+helpers@0.5.17__jiti@2.6.1_postcss@8.5.14_tsx@4.20.6_typescript@6.0.2_yaml@2.8.1/node_modules/tsup/assets/esm_shims.js
-import path from "path";
-import { fileURLToPath } from "url";
-var getFilename = () => fileURLToPath(import.meta.url);
-var getDirname = () => path.dirname(getFilename());
-var __dirname = /* @__PURE__ */ getDirname();
-
-// src/index.ts
-import { Builder, setLogStream } from "@pandacss/node";
-import { createRequire } from "module";
-import path2 from "path";
-var customRequire = createRequire(__dirname);
-var PLUGIN_NAME = "pandacss";
-var interopDefault = (obj) => obj && obj.__esModule ? obj.default : obj;
-var loadConfig = () => interopDefault(customRequire("@pandacss/postcss"));
-var stream;
-var builder = new Builder();
-var builderGuard;
-var pandacss = (options = {}) => {
-  const { configPath, cwd, logfile, allow } = options;
-  if (!stream && logfile) {
-    stream = setLogStream({ cwd, logfile });
-  }
-  const postcssProcess = async function(root, result) {
-    const fileName = result.opts.from;
-    const skip = shouldSkip(fileName, allow);
-    if (skip) return;
-    await builder.setup({ configPath, cwd });
-    if (!builder.isValidRoot(root)) return;
-    await builder.emit();
-    builder.extract();
-    builder.registerDependency((dep) => {
-      result.messages.push({
-        ...dep,
-        plugin: PLUGIN_NAME,
-        parent: result.opts.from
-      });
-    });
-    builder.write(root);
-    root.walk((node) => {
-      if (!node.source) {
-        node.source = root.source;
-      }
-    });
-  };
-  return {
-    postcssPlugin: PLUGIN_NAME,
-    plugins: [
-      function(...args) {
-        builderGuard = Promise.resolve(builderGuard).catch(() => {
-        }).then(() => postcssProcess(...args));
-        return builderGuard;
-      }
-    ]
-  };
-};
-pandacss.postcss = true;
-var index_default = pandacss;
-var nodeModulesRegex = /node_modules/;
-function isValidCss(file) {
-  const [filePath] = file.split("?");
-  return path2.extname(filePath) === ".css";
-}
-var shouldSkip = (fileName, allow) => {
-  if (!fileName) return true;
-  if (!isValidCss(fileName)) return true;
-  if (allow?.some((p) => p.test(fileName))) return false;
-  return nodeModulesRegex.test(fileName);
-};
-export {
-  builder,
-  index_default as default,
-  loadConfig,
-  pandacss
-};