@unocss/svelte-scoped 0.52.0

package/dist/vite.mjs

@@ -0,0 +1,163 @@
+import { createGenerator } from '@unocss/core';
+import { loadConfig } from '@unocss/config';
+import UnocssSveltePreprocess from './preprocess.mjs';
+import { readFileSync, existsSync, statSync } from 'node:fs';
+import { dirname, resolve } from 'node:path';
+import { fileURLToPath } from 'node:url';
+import '@unocss/preset-uno';
+import 'magic-string';
+import 'css-tree';
+
+function PassPreprocessToSveltePlugin(options = {}, ctx) {
+  return {
+    name: "unocss:svelte-scoped:pass-preprocess",
+    enforce: "pre",
+    configResolved(viteConfig) {
+      options = { ...options, combine: viteConfig.command === "build" };
+    },
+    api: {
+      sveltePreprocess: UnocssSveltePreprocess(options, ctx)
+    }
+  };
+}
+
+const PLACEHOLDER_USER_SETS_IN_INDEX_HTML = "%unocss-svelte-scoped.global%";
+const GLOBAL_STYLES_PLACEHOLDER = "unocss_svelte_scoped_global_styles";
+const DEV_GLOBAL_STYLES_DATA_TITLE = "unocss-svelte-scoped global styles";
+
+const _dirname = typeof __dirname !== "undefined" ? __dirname : dirname(fileURLToPath(import.meta.url));
+function getReset(injectReset) {
+  if (injectReset.startsWith("@unocss/reset")) {
+    const resolvedPNPM = resolve(resolve(_dirname, `../node_modules/${injectReset}`));
+    if (isFile(resolvedPNPM))
+      return readFileSync(resolvedPNPM, "utf-8");
+    const resolvedNPM = resolve(process.cwd(), "node_modules", injectReset);
+    if (isFile(resolvedNPM))
+      return readFileSync(resolvedNPM, "utf-8");
+    throw new Error(`"${injectReset}" given as your injectReset value is not found. Please make sure it is one of the five supported @unocss/reset options. If it is, file a bug report detailing your environment and package manager`);
+  }
+  if (injectReset.startsWith(".")) {
+    const resolved = resolve(process.cwd(), injectReset);
+    if (!isFile(resolved))
+      throw new Error(`"${injectReset}" given as your injectReset value is not a valid file path relative to the root of your project, where your vite config file sits. To give an example, if you placed a reset.css in your src directory, "./src/reset.css" would work.`);
+    return readFileSync(resolved, "utf-8");
+  }
+  if (injectReset.startsWith("/"))
+    throw new Error(`Your injectReset value: "${injectReset}" is not a valid file path. To give an example, if you placed a reset.css in your src directory, "./src/reset.css" would work.`);
+  const resolvedFromNodeModules = resolve(process.cwd(), "node_modules", injectReset);
+  if (!isFile(resolvedFromNodeModules))
+    throw new Error(`"${injectReset}" given as your injectReset value is not a valid file path relative to your project's node_modules folder. Can you confirm that you've installed "${injectReset}"?`);
+  return readFileSync(resolvedFromNodeModules, "utf-8");
+}
+function isFile(path) {
+  return existsSync(path) && statSync(path).isFile();
+}
+
+function isServerHooksFile(path) {
+  return path.includes("hooks") && path.includes("server");
+}
+function replaceGlobalStylesPlaceholder(code, stylesTag) {
+  const captureQuoteMark = "([\"'`])";
+  const matchCapturedQuoteMark = "\\1";
+  const QUOTES_WITH_PLACEHOLDER_RE = new RegExp(captureQuoteMark + GLOBAL_STYLES_PLACEHOLDER + matchCapturedQuoteMark);
+  const escapedStylesTag = stylesTag.replaceAll(/`/g, "\\`");
+  return code.replace(QUOTES_WITH_PLACEHOLDER_RE, `\`${escapedStylesTag}\``);
+}
+async function generateGlobalCss(uno, injectReset) {
+  const { css } = await uno.generate("", { preflights: true, safelist: true, minify: true });
+  const reset = injectReset ? getReset(injectReset) : "";
+  return reset + css;
+}
+const SVELTE_ERROR = `[unocss] You have not setup the svelte-scoped global styles correctly. You must place '${PLACEHOLDER_USER_SETS_IN_INDEX_HTML}' in your index.html file.
+`;
+const SVELTE_KIT_ERROR = `[unocss] You have not setup the svelte-scoped global styles correctly. You must place '${PLACEHOLDER_USER_SETS_IN_INDEX_HTML}' in your app.html file. You also need to have a transformPageChunk hook in your server hooks file with: \`html.replace('${PLACEHOLDER_USER_SETS_IN_INDEX_HTML}', '${GLOBAL_STYLES_PLACEHOLDER}')\`. You can see an example of the usage at https://github.com/unocss/unocss/tree/main/examples/sveltekit-scoped.`;
+function checkTransformPageChunkHook(server, isSvelteKit) {
+  server.middlewares.use((req, res, next) => {
+    const originalWrite = res.write;
+    res.write = function(chunk, ...rest) {
+      const str = chunk instanceof Buffer ? chunk.toString() : Array.isArray(chunk) || "at" in chunk ? Buffer.from(chunk).toString() : `${chunk}`;
+      if (str.includes("<head>") && !str.includes(DEV_GLOBAL_STYLES_DATA_TITLE))
+        server.config.logger.error(isSvelteKit ? SVELTE_KIT_ERROR : SVELTE_ERROR, { timestamp: true });
+      return originalWrite.call(this, chunk, ...rest);
+    };
+    next();
+  });
+}
+
+function GlobalStylesPlugin({ ready, uno }, injectReset) {
+  let isSvelteKit;
+  let viteConfig;
+  let unoCssFileReferenceId;
+  let unoCssHashedLinkTag;
+  return {
+    name: "unocss:svelte-scoped:global-styles",
+    async configResolved(_viteConfig) {
+      viteConfig = _viteConfig;
+      await ready;
+      isSvelteKit = viteConfig.plugins.some((p) => p.name.includes("sveltekit"));
+    },
+    configureServer: (server) => checkTransformPageChunkHook(server, isSvelteKit),
+    async transform(code, id) {
+      if (isSvelteKit && viteConfig.command === "serve" && isServerHooksFile(id)) {
+        const css = await generateGlobalCss(uno, injectReset);
+        return {
+          code: replaceGlobalStylesPlaceholder(code, `<style type="text/css" data-title="${DEV_GLOBAL_STYLES_DATA_TITLE}">${css}</style>`)
+        };
+      }
+    },
+    async buildStart() {
+      if (viteConfig.command === "build") {
+        const css = await generateGlobalCss(uno, injectReset);
+        unoCssFileReferenceId = this.emitFile({
+          type: "asset",
+          name: "unocss-svelte-scoped-global.css",
+          source: css
+        });
+      }
+    },
+    renderStart() {
+      const unoCssFileName = this.getFileName(unoCssFileReferenceId);
+      const base = viteConfig.base ?? "/";
+      unoCssHashedLinkTag = `<link href="${base}${unoCssFileName}" rel="stylesheet" />`;
+    },
+    renderChunk(code, chunk) {
+      if (isSvelteKit && chunk.moduleIds.some((id) => isServerHooksFile(id)))
+        return replaceGlobalStylesPlaceholder(code, unoCssHashedLinkTag);
+    },
+    async transformIndexHtml(html) {
+      if (!isSvelteKit) {
+        if (viteConfig.command === "build")
+          return html.replace(PLACEHOLDER_USER_SETS_IN_INDEX_HTML, unoCssHashedLinkTag);
+        if (viteConfig.command === "serve") {
+          const css = await generateGlobalCss(uno, injectReset);
+          return html.replace(PLACEHOLDER_USER_SETS_IN_INDEX_HTML, `<style type="text/css" data-title="${DEV_GLOBAL_STYLES_DATA_TITLE}">${css}</style>`);
+        }
+      }
+    }
+  };
+}
+
+function UnocssSvelteScopedVite(options = {}) {
+  const context = createSvelteScopedContext(options.configOrPath);
+  const plugins = [
+    GlobalStylesPlugin(context, options.injectReset)
+  ];
+  if (!options.onlyGlobal)
+    plugins.push(PassPreprocessToSveltePlugin(options, context));
+  return plugins;
+}
+function createSvelteScopedContext(configOrPath) {
+  const uno = createGenerator();
+  const ready = reloadConfig();
+  async function reloadConfig() {
+    const { config } = await loadConfig(process.cwd(), configOrPath);
+    uno.setConfig(config);
+    return config;
+  }
+  return {
+    uno,
+    ready
+  };
+}
+
+export { UnocssSvelteScopedVite as default };

package/package.json

@@ -0,0 +1,69 @@
+{
+  "name": "@unocss/svelte-scoped",
+  "type": "module",
+  "version": "0.52.0",
+  "description": "Use UnoCSS in a modular fashion with styles being stored only in the Svelte component they are used in: Vite plugin for apps, preprocessor for component libraries",
+  "author": "Jacob Bowdoin",
+  "license": "MIT",
+  "homepage": "https://github.com/unocss/unocss/tree/main/packages/svelte-scoped#readme",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/unocss/unocss.git",
+    "directory": "packages/svelte-scoped"
+  },
+  "bugs": {
+    "url": "https://github.com/unocss/unocss/issues"
+  },
+  "keywords": [
+    "sveltekit",
+    "svelte",
+    "unocss",
+    "utility-styles",
+    "component-scoped",
+    "component-library"
+  ],
+  "sideEffects": false,
+  "exports": {
+    "./preprocess": {
+      "types": "./dist/preprocess.d.ts",
+      "require": "./dist/preprocess.cjs",
+      "import": "./dist/preprocess.mjs"
+    },
+    "./vite": {
+      "types": "./dist/vite.d.ts",
+      "require": "./dist/vite.cjs",
+      "import": "./dist/vite.mjs"
+    }
+  },
+  "main": "./dist/vite.cjs",
+  "module": "./dist/vite.mjs",
+  "types": "./dist/vite.d.ts",
+  "typesVersions": {
+    ">4.0": {
+      "preprocess": [
+        "./dist/preprocess.d.ts"
+      ],
+      "vite": [
+        "./dist/vite.d.ts"
+      ]
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "dependencies": {
+    "css-tree": "^2.3.1",
+    "magic-string": "^0.30.0",
+    "@unocss/config": "0.52.0",
+    "@unocss/reset": "0.52.0"
+  },
+  "devDependencies": {
+    "prettier-plugin-svelte": "^2.10.0",
+    "svelte": "^3.58.0"
+  },
+  "scripts": {
+    "build": "unbuild",
+    "stub": "unbuild --stub",
+    "bench": "vitest bench"
+  }
+}