@pikacss/plugin-icons 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/dist/index.cjs

@@ -0,0 +1,158 @@
+'use strict';
+
+const utils = require('@iconify/utils');
+const core = require('@pikacss/core');
+const presetIcons = require('@unocss/preset-icons');
+const ofetch = require('ofetch');
+
+function createCDNLoader(cdnBase) {
+  return presetIcons.createCDNFetchLoader(ofetch.$fetch, cdnBase);
+}
+async function createIconsLoader(config) {
+  const {
+    cdn
+  } = config;
+  const loaders = [];
+  const {
+    isNode,
+    isVSCode,
+    isESLint
+  } = presetIcons.getEnvFlags();
+  if (isNode && !isVSCode && !isESLint) {
+    const nodeLoader = await presetIcons.createNodeLoader();
+    if (nodeLoader !== void 0)
+      loaders.push(nodeLoader);
+  }
+  if (cdn)
+    loaders.push(createCDNLoader(cdn));
+  loaders.push(utils.loadIcon);
+  return presetIcons.combineLoaders(loaders);
+}
+const globalColonRE = /:/g;
+function createIconsPlugin(lookupIconLoader) {
+  let engine;
+  let enginePrefix = "";
+  const registeredIconVariables = /* @__PURE__ */ new Map();
+  return core.defineEnginePlugin({
+    name: "icons",
+    config: async (config) => {
+      const iconsConfig = config.icons || {};
+      const {
+        scale = 1,
+        mode = "auto",
+        prefix = "i-",
+        iconifyCollectionsNames,
+        collections: customCollections,
+        customizations = {},
+        autoInstall = false,
+        collectionsNodeResolvePath,
+        unit,
+        extraProperties = {},
+        processor,
+        autocomplete: _autocomplete
+      } = iconsConfig;
+      const loaderOptions = {
+        addXmlNs: true,
+        scale,
+        customCollections,
+        autoInstall,
+        cwd: collectionsNodeResolvePath,
+        // avoid warn from @iconify/loader: we'll warn below if not found
+        warn: void 0,
+        customizations: {
+          ...customizations,
+          additionalProps: { ...extraProperties },
+          trimCustomSvg: true,
+          async iconCustomizer(collection, icon, props) {
+            await customizations.iconCustomizer?.(collection, icon, props);
+            if (unit) {
+              if (!props.width)
+                props.width = `${scale}${unit}`;
+              if (!props.height)
+                props.height = `${scale}${unit}`;
+            }
+          }
+        }
+      };
+      const prefixRE = new RegExp(`^(${[prefix].flat().join("|")})`);
+      const autocompletePrefix = [prefix].flat();
+      const autocomplete = [
+        ...autocompletePrefix,
+        ...autocompletePrefix.flatMap((p) => _autocomplete?.map((a) => `${p}${a.replace(prefixRE, "")}`) || [])
+      ];
+      let iconLoader;
+      config.preflights ||= [];
+      config.preflights.push(() => {
+        const iconVariables = [...registeredIconVariables.entries()].map(([name, value]) => `${name}: ${value};`).join("\n");
+        return `:root { ${iconVariables} }`;
+      });
+      config.shortcuts ||= [];
+      config.shortcuts.push({
+        shortcut: new RegExp(`^(?:${[prefix].flat().join("|")})([\\w:-]+)(?:\\?(mask|bg|auto))?$`),
+        value: async (match) => {
+          let [full, body, _mode = mode] = match;
+          iconLoader = iconLoader || await lookupIconLoader(iconsConfig);
+          const usedProps = {};
+          const parsed = await presetIcons.parseIconWithLoader(
+            body,
+            iconLoader,
+            { ...loaderOptions, usedProps },
+            iconifyCollectionsNames
+          );
+          if (parsed == null) {
+            console.warn(`failed to load icon "${full}"`);
+            return {};
+          }
+          const url = `url("data:image/svg+xml;utf8,${utils.encodeSvgForCss(parsed.svg)}")`;
+          const varName = `--${enginePrefix}svg-icon-${body.replace(globalColonRE, "-")}`;
+          if (registeredIconVariables.has(varName) === false) {
+            registeredIconVariables.set(varName, url);
+            engine.notifyPreflightUpdated();
+          }
+          if (_mode === "auto")
+            _mode = parsed.svg.includes("currentColor") ? "mask" : "bg";
+          let styleItem;
+          if (_mode === "mask") {
+            styleItem = {
+              "--svg-icon": `var(${varName})`,
+              "-webkit-mask": "var(--svg-icon) no-repeat",
+              "mask": "var(--svg-icon) no-repeat",
+              "-webkit-mask-size": "100% 100%",
+              "mask-size": "100% 100%",
+              "background-color": "currentColor",
+              // for Safari https://github.com/elk-zone/elk/pull/264
+              "color": "inherit",
+              ...usedProps
+            };
+          } else {
+            styleItem = {
+              "--svg-icon": `var(${varName})`,
+              "background": "var(--svg-icon) no-repeat",
+              "background-size": "100% 100%",
+              "background-color": "transparent",
+              ...usedProps
+            };
+          }
+          processor?.(
+            styleItem,
+            {
+              ...parsed,
+              mode: _mode
+            }
+          );
+          return styleItem;
+        },
+        autocomplete
+      });
+    },
+    engineInitialized: (_engine) => {
+      engine = _engine;
+      enginePrefix = _engine.config.prefix;
+    }
+  });
+}
+function icons() {
+  return createIconsPlugin(createIconsLoader);
+}
+
+exports.icons = icons;

package/dist/index.d.cts

@@ -0,0 +1,26 @@
+import { Simplify, StyleItem, EnginePlugin } from '@pikacss/core';
+import { IconsOptions } from '@unocss/preset-icons';
+
+interface IconMeta {
+    collection: string;
+    name: string;
+    svg: string;
+    mode?: IconsConfig['mode'];
+}
+type IconsConfig = Simplify<Omit<IconsOptions, 'warn' | 'layer' | 'processor' | 'customFetcher'> & {
+    /**
+     * Processor for the CSS object before stringify
+     */
+    processor?: (styleItem: StyleItem, meta: Required<IconMeta>) => void;
+    /**
+     * Specify the icons for auto-completion.
+     */
+    autocomplete?: string[];
+}>;
+interface IconsPluginConfig {
+    icons?: IconsConfig;
+}
+type IconsPlugin = EnginePlugin<IconsPluginConfig>;
+declare function icons(): IconsPlugin;
+
+export { type IconsConfig, type IconsPlugin, icons };

package/dist/index.d.mts

@@ -0,0 +1,26 @@
+import { Simplify, StyleItem, EnginePlugin } from '@pikacss/core';
+import { IconsOptions } from '@unocss/preset-icons';
+
+interface IconMeta {
+    collection: string;
+    name: string;
+    svg: string;
+    mode?: IconsConfig['mode'];
+}
+type IconsConfig = Simplify<Omit<IconsOptions, 'warn' | 'layer' | 'processor' | 'customFetcher'> & {
+    /**
+     * Processor for the CSS object before stringify
+     */
+    processor?: (styleItem: StyleItem, meta: Required<IconMeta>) => void;
+    /**
+     * Specify the icons for auto-completion.
+     */
+    autocomplete?: string[];
+}>;
+interface IconsPluginConfig {
+    icons?: IconsConfig;
+}
+type IconsPlugin = EnginePlugin<IconsPluginConfig>;
+declare function icons(): IconsPlugin;
+
+export { type IconsConfig, type IconsPlugin, icons };

package/dist/index.d.ts

@@ -0,0 +1,26 @@
+import { Simplify, StyleItem, EnginePlugin } from '@pikacss/core';
+import { IconsOptions } from '@unocss/preset-icons';
+
+interface IconMeta {
+    collection: string;
+    name: string;
+    svg: string;
+    mode?: IconsConfig['mode'];
+}
+type IconsConfig = Simplify<Omit<IconsOptions, 'warn' | 'layer' | 'processor' | 'customFetcher'> & {
+    /**
+     * Processor for the CSS object before stringify
+     */
+    processor?: (styleItem: StyleItem, meta: Required<IconMeta>) => void;
+    /**
+     * Specify the icons for auto-completion.
+     */
+    autocomplete?: string[];
+}>;
+interface IconsPluginConfig {
+    icons?: IconsConfig;
+}
+type IconsPlugin = EnginePlugin<IconsPluginConfig>;
+declare function icons(): IconsPlugin;
+
+export { type IconsConfig, type IconsPlugin, icons };

package/dist/index.mjs

@@ -0,0 +1,156 @@
+import { encodeSvgForCss, loadIcon } from '@iconify/utils';
+import { defineEnginePlugin } from '@pikacss/core';
+import { parseIconWithLoader, getEnvFlags, createNodeLoader, combineLoaders, createCDNFetchLoader } from '@unocss/preset-icons';
+import { $fetch } from 'ofetch';
+
+function createCDNLoader(cdnBase) {
+  return createCDNFetchLoader($fetch, cdnBase);
+}
+async function createIconsLoader(config) {
+  const {
+    cdn
+  } = config;
+  const loaders = [];
+  const {
+    isNode,
+    isVSCode,
+    isESLint
+  } = getEnvFlags();
+  if (isNode && !isVSCode && !isESLint) {
+    const nodeLoader = await createNodeLoader();
+    if (nodeLoader !== void 0)
+      loaders.push(nodeLoader);
+  }
+  if (cdn)
+    loaders.push(createCDNLoader(cdn));
+  loaders.push(loadIcon);
+  return combineLoaders(loaders);
+}
+const globalColonRE = /:/g;
+function createIconsPlugin(lookupIconLoader) {
+  let engine;
+  let enginePrefix = "";
+  const registeredIconVariables = /* @__PURE__ */ new Map();
+  return defineEnginePlugin({
+    name: "icons",
+    config: async (config) => {
+      const iconsConfig = config.icons || {};
+      const {
+        scale = 1,
+        mode = "auto",
+        prefix = "i-",
+        iconifyCollectionsNames,
+        collections: customCollections,
+        customizations = {},
+        autoInstall = false,
+        collectionsNodeResolvePath,
+        unit,
+        extraProperties = {},
+        processor,
+        autocomplete: _autocomplete
+      } = iconsConfig;
+      const loaderOptions = {
+        addXmlNs: true,
+        scale,
+        customCollections,
+        autoInstall,
+        cwd: collectionsNodeResolvePath,
+        // avoid warn from @iconify/loader: we'll warn below if not found
+        warn: void 0,
+        customizations: {
+          ...customizations,
+          additionalProps: { ...extraProperties },
+          trimCustomSvg: true,
+          async iconCustomizer(collection, icon, props) {
+            await customizations.iconCustomizer?.(collection, icon, props);
+            if (unit) {
+              if (!props.width)
+                props.width = `${scale}${unit}`;
+              if (!props.height)
+                props.height = `${scale}${unit}`;
+            }
+          }
+        }
+      };
+      const prefixRE = new RegExp(`^(${[prefix].flat().join("|")})`);
+      const autocompletePrefix = [prefix].flat();
+      const autocomplete = [
+        ...autocompletePrefix,
+        ...autocompletePrefix.flatMap((p) => _autocomplete?.map((a) => `${p}${a.replace(prefixRE, "")}`) || [])
+      ];
+      let iconLoader;
+      config.preflights ||= [];
+      config.preflights.push(() => {
+        const iconVariables = [...registeredIconVariables.entries()].map(([name, value]) => `${name}: ${value};`).join("\n");
+        return `:root { ${iconVariables} }`;
+      });
+      config.shortcuts ||= [];
+      config.shortcuts.push({
+        shortcut: new RegExp(`^(?:${[prefix].flat().join("|")})([\\w:-]+)(?:\\?(mask|bg|auto))?$`),
+        value: async (match) => {
+          let [full, body, _mode = mode] = match;
+          iconLoader = iconLoader || await lookupIconLoader(iconsConfig);
+          const usedProps = {};
+          const parsed = await parseIconWithLoader(
+            body,
+            iconLoader,
+            { ...loaderOptions, usedProps },
+            iconifyCollectionsNames
+          );
+          if (parsed == null) {
+            console.warn(`failed to load icon "${full}"`);
+            return {};
+          }
+          const url = `url("data:image/svg+xml;utf8,${encodeSvgForCss(parsed.svg)}")`;
+          const varName = `--${enginePrefix}svg-icon-${body.replace(globalColonRE, "-")}`;
+          if (registeredIconVariables.has(varName) === false) {
+            registeredIconVariables.set(varName, url);
+            engine.notifyPreflightUpdated();
+          }
+          if (_mode === "auto")
+            _mode = parsed.svg.includes("currentColor") ? "mask" : "bg";
+          let styleItem;
+          if (_mode === "mask") {
+            styleItem = {
+              "--svg-icon": `var(${varName})`,
+              "-webkit-mask": "var(--svg-icon) no-repeat",
+              "mask": "var(--svg-icon) no-repeat",
+              "-webkit-mask-size": "100% 100%",
+              "mask-size": "100% 100%",
+              "background-color": "currentColor",
+              // for Safari https://github.com/elk-zone/elk/pull/264
+              "color": "inherit",
+              ...usedProps
+            };
+          } else {
+            styleItem = {
+              "--svg-icon": `var(${varName})`,
+              "background": "var(--svg-icon) no-repeat",
+              "background-size": "100% 100%",
+              "background-color": "transparent",
+              ...usedProps
+            };
+          }
+          processor?.(
+            styleItem,
+            {
+              ...parsed,
+              mode: _mode
+            }
+          );
+          return styleItem;
+        },
+        autocomplete
+      });
+    },
+    engineInitialized: (_engine) => {
+      engine = _engine;
+      enginePrefix = _engine.config.prefix;
+    }
+  });
+}
+function icons() {
+  return createIconsPlugin(createIconsLoader);
+}
+
+export { icons };

package/package.json

@@ -0,0 +1,53 @@
+{
+  "name": "@pikacss/plugin-icons",
+  "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/plugin-icons"
+  },
+  "bugs": {
+    "url": "https://github.com/DevilTea/pikacss/issues"
+  },
+  "keywords": [],
+  "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"
+  ],
+  "dependencies": {
+    "@iconify/utils": "^2.3.0",
+    "@unocss/preset-icons": "^65.4.3",
+    "ofetch": "^1.4.1",
+    "@pikacss/core": "0.0.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"
+  }
+}