@pikacss/vite-plugin-pikacss 0.0.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2023 DevilTea
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1 @@
+# @pikacss/vite-plugin-pikacss

package/dist/index.cjs

@@ -0,0 +1,186 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const vite = require('vite');
+const integration = require('@pikacss/integration');
+const pathe = require('pathe');
+const perfectDebounce = require('perfect-debounce');
+
+const VIRTUAL_PIKA_CSS_ID = "virtual:pika.css";
+const DEV_PLUGIN_NAME = "pikacss:dev";
+const BUILD_PLUGIN_NAME = "pikacss:build";
+
+function build(options) {
+  const cssPostPlugins = /* @__PURE__ */ new Map();
+  const cssPlugins = /* @__PURE__ */ new Map();
+  async function applyCssTransform(css, id, dir, rollupCtx) {
+    if (!cssPlugins.get(dir) || false)
+      return css;
+    const result = await cssPlugins.get(dir).transform.call(rollupCtx, css, id);
+    if (!result)
+      return css;
+    if (typeof result === "string")
+      css = result;
+    else if (result.code)
+      css = result.code;
+    css = css.replace(/[\n\r]/g, "");
+    return css;
+  }
+  let ctx = null;
+  return {
+    name: BUILD_PLUGIN_NAME,
+    enforce: "pre",
+    apply: "build",
+    async configResolved(config) {
+      ctx = await integration.createCtx({
+        cwd: config.root,
+        ...options
+      });
+      const distDirs = [
+        pathe.resolve(config.root, config.build.outDir)
+      ];
+      const cssPostPlugin = config.plugins.find((i) => i.name === "vite:css-post");
+      if (cssPostPlugin)
+        distDirs.forEach((dir) => cssPostPlugins.set(dir, cssPostPlugin));
+      const cssPlugin = config.plugins.find((i) => i.name === "vite:css");
+      if (cssPlugin)
+        distDirs.forEach((dir) => cssPlugins.set(dir, cssPlugin));
+    },
+    resolveId(id) {
+      if (id === VIRTUAL_PIKA_CSS_ID)
+        return id;
+      return null;
+    },
+    load(id) {
+      if (id === VIRTUAL_PIKA_CSS_ID)
+        return "";
+      return null;
+    },
+    transform: (code, id) => {
+      return ctx.transform(code, id);
+    },
+    async renderChunk(_, chunk, options2) {
+      if (!Object.keys(chunk.modules).some((i) => i.includes(VIRTUAL_PIKA_CSS_ID)))
+        return null;
+      const cssPost = cssPostPlugins.get(options2.dir);
+      if (!cssPost) {
+        this.warn("[pikacss] failed to find vite:css-post plugin. It might be an internal bug of PikaCSS");
+        return null;
+      }
+      await ctx.writeTsCodegenFile();
+      const fakeCssId = `${ctx.cwd}/${chunk.fileName}-pikacss-hash.css`;
+      const css = await applyCssTransform(
+        ctx.engine.renderStyles(),
+        fakeCssId,
+        options2.dir,
+        this
+      );
+      const transformHandler = "handler" in cssPost.transform ? cssPost.transform.handler : cssPost.transform;
+      await transformHandler.call({}, css, fakeCssId);
+      delete chunk.modules[VIRTUAL_PIKA_CSS_ID];
+      chunk.modules[fakeCssId] = {
+        code: null,
+        originalLength: 0,
+        removedExports: [],
+        renderedExports: [],
+        renderedLength: 0
+      };
+      return null;
+    }
+  };
+}
+
+function dev(options) {
+  let ctx = null;
+  const updateDevCssFile = perfectDebounce.debounce(async () => {
+    await ctx.writeDevCssFile();
+  }, 300);
+  const updateTsCodegenFile = perfectDebounce.debounce(async () => {
+    await ctx.writeTsCodegenFile();
+  }, 300);
+  const reloadCtx = perfectDebounce.debounce(async () => {
+    await ctx.init();
+  }, 300);
+  return {
+    name: DEV_PLUGIN_NAME,
+    enforce: "pre",
+    apply: "serve",
+    async configResolved(config) {
+      ctx = await integration.createCtx({
+        cwd: config.root,
+        ...options
+      });
+    },
+    configureServer(server) {
+      server.watcher.add(ctx.configSources);
+      server.watcher.on("add", handleFileChange);
+      server.watcher.on("unlink", handleFileChange);
+      server.watcher.on("change", handleFileChange);
+      async function handleFileChange(file) {
+        if (ctx.configSources.includes(file)) {
+          const moduleIds = Array.from(ctx.usages.keys());
+          await reloadCtx();
+          moduleIds.forEach((id) => {
+            const mod = server.moduleGraph.getModuleById(id);
+            if (mod) {
+              server.moduleGraph.invalidateModule(mod);
+              server.reloadModule(mod);
+            }
+          });
+        }
+      }
+    },
+    buildStart() {
+      ctx.hooks.styleUpdated.on(() => updateDevCssFile());
+      ctx.hooks.tsCodegenUpdated.on(() => updateTsCodegenFile());
+      updateDevCssFile();
+      updateTsCodegenFile();
+    },
+    resolveId(id) {
+      if (id === VIRTUAL_PIKA_CSS_ID)
+        return ctx.devCssFilepath;
+      return void 0;
+    },
+    transform: (code, id) => {
+      return ctx.transform(code, id);
+    }
+  };
+}
+
+function PikaCSSPlugin({
+  currentPackageName = "@pikacss/vite-plugin-pikacss",
+  config: configOrPath,
+  tsCodegen = false,
+  devCss = "pika.dev.css",
+  target = ["**/*.vue", "**/*.tsx", "**/*.jsx"],
+  fnName = "pika",
+  transformedFormat = "string"
+} = {}) {
+  const resolvedOptions = {
+    currentPackageName,
+    configOrPath,
+    tsCodegen: tsCodegen === true ? "pika.gen.ts" : tsCodegen,
+    devCss,
+    target,
+    fnName,
+    transformedFormat,
+    transformTsToJs: (code) => vite.transformWithEsbuild(code, "pikacss.ts").then((result) => result.code)
+  };
+  return [
+    dev(resolvedOptions),
+    build(resolvedOptions)
+  ];
+}
+
+exports.default = PikaCSSPlugin;
+Object.prototype.hasOwnProperty.call(integration, '__proto__') &&
+	!Object.prototype.hasOwnProperty.call(exports, '__proto__') &&
+	Object.defineProperty(exports, '__proto__', {
+		enumerable: true,
+		value: integration['__proto__']
+	});
+
+Object.keys(integration).forEach(function (k) {
+	if (k !== 'default' && !Object.prototype.hasOwnProperty.call(exports, k)) exports[k] = integration[k];
+});

package/dist/index.d.cts

@@ -0,0 +1,50 @@
+import { EngineConfig } from '@pikacss/integration';
+export * from '@pikacss/integration';
+import { Plugin } from 'vite';
+
+interface PluginOptions {
+    /**
+     * Patterns of files to be transformed if they are matched.
+     * @default ['**‎/*.vue', '**‎/*.tsx', '**‎/*.jsx']
+     */
+    target?: string[];
+    /**
+     * Configure the pika engine.
+     */
+    config?: EngineConfig | string;
+    /**
+     * Customize the name of the pika function.
+     * @default 'pika'
+     */
+    fnName?: string;
+    /**
+     * Decide the format of the transformed result.
+     *
+     * - `string`: The transformed result will be a js string (e.g. `'a b c'`).
+     * - `array`: The transformed result will be a js array (e.g. `['a', 'b', 'c']`).
+     * - `inline`: The transformed result will be directly used in the code (e.g. `a b c`).
+     *
+     * @default 'string'
+     */
+    transformedFormat?: 'string' | 'array' | 'inline';
+    /**
+     * Enable/disable the generation of d.ts files.
+     * If a string is provided, it will be used as the path to the d.ts file.
+     * Default path is `<path to vite config>/pika.d.ts`.
+     * @default false
+     */
+    tsCodegen?: boolean | string;
+    /**
+     * Path to the dev css file.
+     * @default 'pika.dev.css'
+     */
+    devCss?: string;
+    /** @internal */
+    currentPackageName?: string;
+}
+
+declare function PikaCSSPlugin({ currentPackageName, config: configOrPath, tsCodegen, devCss, target, fnName, transformedFormat, }?: PluginOptions): Plugin[];
+
+// @ts-ignore
+export = PikaCSSPlugin;
+export type { PluginOptions };

package/dist/index.d.mts

@@ -0,0 +1,48 @@
+import { EngineConfig } from '@pikacss/integration';
+export * from '@pikacss/integration';
+import { Plugin } from 'vite';
+
+interface PluginOptions {
+    /**
+     * Patterns of files to be transformed if they are matched.
+     * @default ['**‎/*.vue', '**‎/*.tsx', '**‎/*.jsx']
+     */
+    target?: string[];
+    /**
+     * Configure the pika engine.
+     */
+    config?: EngineConfig | string;
+    /**
+     * Customize the name of the pika function.
+     * @default 'pika'
+     */
+    fnName?: string;
+    /**
+     * Decide the format of the transformed result.
+     *
+     * - `string`: The transformed result will be a js string (e.g. `'a b c'`).
+     * - `array`: The transformed result will be a js array (e.g. `['a', 'b', 'c']`).
+     * - `inline`: The transformed result will be directly used in the code (e.g. `a b c`).
+     *
+     * @default 'string'
+     */
+    transformedFormat?: 'string' | 'array' | 'inline';
+    /**
+     * Enable/disable the generation of d.ts files.
+     * If a string is provided, it will be used as the path to the d.ts file.
+     * Default path is `<path to vite config>/pika.d.ts`.
+     * @default false
+     */
+    tsCodegen?: boolean | string;
+    /**
+     * Path to the dev css file.
+     * @default 'pika.dev.css'
+     */
+    devCss?: string;
+    /** @internal */
+    currentPackageName?: string;
+}
+
+declare function PikaCSSPlugin({ currentPackageName, config: configOrPath, tsCodegen, devCss, target, fnName, transformedFormat, }?: PluginOptions): Plugin[];
+
+export { type PluginOptions, PikaCSSPlugin as default };

package/dist/index.d.ts

@@ -0,0 +1,50 @@
+import { EngineConfig } from '@pikacss/integration';
+export * from '@pikacss/integration';
+import { Plugin } from 'vite';
+
+interface PluginOptions {
+    /**
+     * Patterns of files to be transformed if they are matched.
+     * @default ['**‎/*.vue', '**‎/*.tsx', '**‎/*.jsx']
+     */
+    target?: string[];
+    /**
+     * Configure the pika engine.
+     */
+    config?: EngineConfig | string;
+    /**
+     * Customize the name of the pika function.
+     * @default 'pika'
+     */
+    fnName?: string;
+    /**
+     * Decide the format of the transformed result.
+     *
+     * - `string`: The transformed result will be a js string (e.g. `'a b c'`).
+     * - `array`: The transformed result will be a js array (e.g. `['a', 'b', 'c']`).
+     * - `inline`: The transformed result will be directly used in the code (e.g. `a b c`).
+     *
+     * @default 'string'
+     */
+    transformedFormat?: 'string' | 'array' | 'inline';
+    /**
+     * Enable/disable the generation of d.ts files.
+     * If a string is provided, it will be used as the path to the d.ts file.
+     * Default path is `<path to vite config>/pika.d.ts`.
+     * @default false
+     */
+    tsCodegen?: boolean | string;
+    /**
+     * Path to the dev css file.
+     * @default 'pika.dev.css'
+     */
+    devCss?: string;
+    /** @internal */
+    currentPackageName?: string;
+}
+
+declare function PikaCSSPlugin({ currentPackageName, config: configOrPath, tsCodegen, devCss, target, fnName, transformedFormat, }?: PluginOptions): Plugin[];
+
+// @ts-ignore
+export = PikaCSSPlugin;
+export type { PluginOptions };

package/dist/index.mjs

@@ -0,0 +1,173 @@
+import { transformWithEsbuild } from 'vite';
+import { createCtx } from '@pikacss/integration';
+export * from '@pikacss/integration';
+import { resolve } from 'pathe';
+import { debounce } from 'perfect-debounce';
+
+const VIRTUAL_PIKA_CSS_ID = "virtual:pika.css";
+const DEV_PLUGIN_NAME = "pikacss:dev";
+const BUILD_PLUGIN_NAME = "pikacss:build";
+
+function build(options) {
+  const cssPostPlugins = /* @__PURE__ */ new Map();
+  const cssPlugins = /* @__PURE__ */ new Map();
+  async function applyCssTransform(css, id, dir, rollupCtx) {
+    if (!cssPlugins.get(dir) || false)
+      return css;
+    const result = await cssPlugins.get(dir).transform.call(rollupCtx, css, id);
+    if (!result)
+      return css;
+    if (typeof result === "string")
+      css = result;
+    else if (result.code)
+      css = result.code;
+    css = css.replace(/[\n\r]/g, "");
+    return css;
+  }
+  let ctx = null;
+  return {
+    name: BUILD_PLUGIN_NAME,
+    enforce: "pre",
+    apply: "build",
+    async configResolved(config) {
+      ctx = await createCtx({
+        cwd: config.root,
+        ...options
+      });
+      const distDirs = [
+        resolve(config.root, config.build.outDir)
+      ];
+      const cssPostPlugin = config.plugins.find((i) => i.name === "vite:css-post");
+      if (cssPostPlugin)
+        distDirs.forEach((dir) => cssPostPlugins.set(dir, cssPostPlugin));
+      const cssPlugin = config.plugins.find((i) => i.name === "vite:css");
+      if (cssPlugin)
+        distDirs.forEach((dir) => cssPlugins.set(dir, cssPlugin));
+    },
+    resolveId(id) {
+      if (id === VIRTUAL_PIKA_CSS_ID)
+        return id;
+      return null;
+    },
+    load(id) {
+      if (id === VIRTUAL_PIKA_CSS_ID)
+        return "";
+      return null;
+    },
+    transform: (code, id) => {
+      return ctx.transform(code, id);
+    },
+    async renderChunk(_, chunk, options2) {
+      if (!Object.keys(chunk.modules).some((i) => i.includes(VIRTUAL_PIKA_CSS_ID)))
+        return null;
+      const cssPost = cssPostPlugins.get(options2.dir);
+      if (!cssPost) {
+        this.warn("[pikacss] failed to find vite:css-post plugin. It might be an internal bug of PikaCSS");
+        return null;
+      }
+      await ctx.writeTsCodegenFile();
+      const fakeCssId = `${ctx.cwd}/${chunk.fileName}-pikacss-hash.css`;
+      const css = await applyCssTransform(
+        ctx.engine.renderStyles(),
+        fakeCssId,
+        options2.dir,
+        this
+      );
+      const transformHandler = "handler" in cssPost.transform ? cssPost.transform.handler : cssPost.transform;
+      await transformHandler.call({}, css, fakeCssId);
+      delete chunk.modules[VIRTUAL_PIKA_CSS_ID];
+      chunk.modules[fakeCssId] = {
+        code: null,
+        originalLength: 0,
+        removedExports: [],
+        renderedExports: [],
+        renderedLength: 0
+      };
+      return null;
+    }
+  };
+}
+
+function dev(options) {
+  let ctx = null;
+  const updateDevCssFile = debounce(async () => {
+    await ctx.writeDevCssFile();
+  }, 300);
+  const updateTsCodegenFile = debounce(async () => {
+    await ctx.writeTsCodegenFile();
+  }, 300);
+  const reloadCtx = debounce(async () => {
+    await ctx.init();
+  }, 300);
+  return {
+    name: DEV_PLUGIN_NAME,
+    enforce: "pre",
+    apply: "serve",
+    async configResolved(config) {
+      ctx = await createCtx({
+        cwd: config.root,
+        ...options
+      });
+    },
+    configureServer(server) {
+      server.watcher.add(ctx.configSources);
+      server.watcher.on("add", handleFileChange);
+      server.watcher.on("unlink", handleFileChange);
+      server.watcher.on("change", handleFileChange);
+      async function handleFileChange(file) {
+        if (ctx.configSources.includes(file)) {
+          const moduleIds = Array.from(ctx.usages.keys());
+          await reloadCtx();
+          moduleIds.forEach((id) => {
+            const mod = server.moduleGraph.getModuleById(id);
+            if (mod) {
+              server.moduleGraph.invalidateModule(mod);
+              server.reloadModule(mod);
+            }
+          });
+        }
+      }
+    },
+    buildStart() {
+      ctx.hooks.styleUpdated.on(() => updateDevCssFile());
+      ctx.hooks.tsCodegenUpdated.on(() => updateTsCodegenFile());
+      updateDevCssFile();
+      updateTsCodegenFile();
+    },
+    resolveId(id) {
+      if (id === VIRTUAL_PIKA_CSS_ID)
+        return ctx.devCssFilepath;
+      return void 0;
+    },
+    transform: (code, id) => {
+      return ctx.transform(code, id);
+    }
+  };
+}
+
+function PikaCSSPlugin({
+  currentPackageName = "@pikacss/vite-plugin-pikacss",
+  config: configOrPath,
+  tsCodegen = false,
+  devCss = "pika.dev.css",
+  target = ["**/*.vue", "**/*.tsx", "**/*.jsx"],
+  fnName = "pika",
+  transformedFormat = "string"
+} = {}) {
+  const resolvedOptions = {
+    currentPackageName,
+    configOrPath,
+    tsCodegen: tsCodegen === true ? "pika.gen.ts" : tsCodegen,
+    devCss,
+    target,
+    fnName,
+    transformedFormat,
+    transformTsToJs: (code) => transformWithEsbuild(code, "pikacss.ts").then((result) => result.code)
+  };
+  return [
+    dev(resolvedOptions),
+    build(resolvedOptions)
+  ];
+}
+
+export { PikaCSSPlugin as default };

package/package.json

@@ -0,0 +1,57 @@
+{
+  "name": "@pikacss/vite-plugin-pikacss",
+  "type": "module",
+  "publishConfig": {
+    "access": "public"
+  },
+  "version": "0.0.1",
+  "author": "DevilTea <ch19980814@gmail.com>",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/DevilTea/pikacss.git",
+    "directory": "packages/vite"
+  },
+  "bugs": {
+    "url": "https://github.com/DevilTea/pikacss/issues"
+  },
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./dist/index.d.mts",
+        "default": "./dist/index.mjs"
+      },
+      "require": {
+        "types": "./dist/index.d.cts",
+        "default": "./dist/index.cjs"
+      }
+    }
+  },
+  "main": "dist/index.cjs",
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "peerDependencies": {
+    "vite": "^5.0.0 || ^6.0.0"
+  },
+  "dependencies": {
+    "pathe": "^2.0.3",
+    "perfect-debounce": "^1.0.0",
+    "@pikacss/integration": "0.0.1"
+  },
+  "devDependencies": {
+    "vite": "^6.1.1"
+  },
+  "scripts": {
+    "build": "unbuild",
+    "build:pack": "pnpm build && pnpm pack",
+    "stub": "unbuild --stub",
+    "typecheck": "pnpm typecheck:package && pnpm typecheck:test",
+    "typecheck:package": "tsc --project ./tsconfig.package.json --noEmit",
+    "typecheck:test": "tsc --project ./tsconfig.tests.json --noEmit",
+    "test": "vitest run",
+    "test:watch": "vitest"
+  }
+}