unplugin-inline-css-modules 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2022 Mia Korennykh
+
+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,408 @@
+# unplugin-inline-css-modules
+
+[![npm](https://img.shields.io/npm/v/unplugin-inline-css-modules.svg)](https://www.npmjs.com/package/unplugin-inline-css-modules)
+[![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](https://opensource.org/licenses/MIT)
+
+> Zero-runtime scoped CSS, targeting any framework on any bundler.
+
+A simple example:
+
+```tsx
+import { css } from 'unplugin-inline-css-modules'
+
+const classes = css`
+  .button {
+    background-color: #1f1e33;
+    color: white;
+    padding: 1rem 2rem;
+    border-radius: 4px;
+  }
+`
+
+export const Button = () => <button className={classes.button}>Click me</button>
+```
+
+At build time, the CSS is extracted into a real CSS module. Existing PostCSS syntax, Tailwind `@apply` directives, and CSS tooling all work out of the box however they were configured in the bundler.
+
+## Why
+
+Frameworks like Vue have `<style scoped>`. The rest of us have been stuck choosing between separate `.module.css` files (context-switching) and CSS-in-JS libraries (runtime overhead, incompatible with PostCSS tooling).
+
+This plugin gives you the best of both worlds: **co-located styles with zero runtime cost**. Under the hood it just generates CSS modules, so your entire CSS toolchain works without any changes.
+
+## Install
+
+```bash
+npm install unplugin-inline-css-modules
+```
+
+## Setup
+
+Add the plugin for your bundler:
+
+<details>
+<summary><b>Vite</b></summary>
+
+```ts
+// vite.config.ts
+import { defineConfig } from 'vite'
+import inlineCSSModules from 'unplugin-inline-css-modules/vite'
+
+export default defineConfig({
+  plugins: [inlineCSSModules()],
+})
+```
+
+</details>
+
+<details>
+<summary><b>Rollup</b></summary>
+
+```ts
+// rollup.config.js
+import inlineCSSModules from 'unplugin-inline-css-modules/rollup'
+
+export default {
+  plugins: [inlineCSSModules()],
+}
+```
+
+</details>
+
+<details>
+<summary><b>Rolldown</b></summary>
+
+```ts
+// rolldown.config.js
+import inlineCSSModules from 'unplugin-inline-css-modules/rolldown'
+
+export default {
+  plugins: [inlineCSSModules()],
+}
+```
+
+</details>
+
+<details>
+<summary><b>Webpack</b></summary>
+
+```ts
+// webpack.config.js
+import inlineCSSModules from 'unplugin-inline-css-modules/webpack'
+
+export default {
+  plugins: [inlineCSSModules()],
+}
+```
+
+</details>
+
+<details>
+<summary><b>Rspack / Rsbuild</b></summary>
+
+```ts
+// rsbuild.config.ts
+import { defineConfig } from '@rsbuild/core'
+import inlineCSSModules from 'unplugin-inline-css-modules/rspack'
+
+export default defineConfig({
+  tools: {
+    rspack: {
+      plugins: [inlineCSSModules()],
+    },
+  },
+})
+```
+
+</details>
+
+<details>
+<summary><b>esbuild</b></summary>
+
+```ts
+import { build } from 'esbuild'
+import inlineCSSModules from 'unplugin-inline-css-modules/esbuild'
+
+build({
+  plugins: [inlineCSSModules()],
+})
+```
+
+</details>
+
+<details>
+<summary><b>Farm</b></summary>
+
+Farm is an experimental target. There has not been thorough testing for functionality.
+
+```ts
+// farm.config.ts
+import inlineCSSModules from 'unplugin-inline-css-modules/farm'
+
+export default {
+  vitePlugins: [inlineCSSModules()],
+}
+```
+
+</details>
+
+<details>
+<summary><b>Bun</b></summary>
+
+```ts
+import inlineCSSModules from 'unplugin-inline-css-modules/bun'
+
+Bun.build({
+  plugins: [inlineCSSModules()],
+})
+```
+
+</details>
+
+### Framework Integrations
+
+<details>
+<summary><b>Next.js</b></summary>
+
+```ts
+// next.config.ts
+import type { NextConfig } from 'next'
+import inlineCSSModules from 'unplugin-inline-css-modules/next'
+
+const nextConfig: NextConfig = {
+  webpack: config => {
+    config.plugins = config.plugins || []
+    config.plugins.push(inlineCSSModules())
+    return config
+  },
+}
+
+export default nextConfig
+```
+
+> **Note:** SWC breaks some assumptions for virtual module resolution. As a workaround, CSS modules are cached in `node_modules/.cache/inline-css-modules/`. If you reinstall `node_modules`, remove the `.next` folder to clear stale references.
+
+</details>
+
+<details>
+<summary><b>Nuxt</b></summary>
+
+```ts
+// nuxt.config.ts
+import inlineCSSModules from 'unplugin-inline-css-modules/vite'
+
+export default defineNuxtConfig({
+  vite: {
+    plugins: [inlineCSSModules()],
+  },
+})
+```
+
+</details>
+
+<details>
+<summary><b>Astro</b></summary>
+
+```js
+// astro.config.mjs
+import { defineConfig } from 'astro/config'
+import inlineCSSModules from 'unplugin-inline-css-modules/astro'
+
+export default defineConfig({
+  integrations: [inlineCSSModules()],
+})
+```
+
+</details>
+
+<details>
+<summary><b>SvelteKit</b></summary>
+
+```ts
+// vite.config.ts
+import { sveltekit } from '@sveltejs/kit/vite'
+import { defineConfig } from 'vite'
+import inlineCSSModules from 'unplugin-inline-css-modules/vite'
+
+export default defineConfig({
+  plugins: [inlineCSSModules(), sveltekit()],
+})
+```
+
+</details>
+
+## Usage Examples
+
+### React
+
+```tsx
+import { css } from 'unplugin-inline-css-modules'
+
+const classes = css`
+  .root {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    min-height: 100vh;
+  }
+
+  .button {
+    background-color: #1f1e33;
+    color: white;
+    padding: 1rem 2rem;
+    border: none;
+    border-radius: 4px;
+    cursor: pointer;
+  }
+`
+
+export const Root = () => (
+  <div className={classes.root}>
+    <button className={classes.button}>Click me</button>
+  </div>
+)
+```
+
+### Vue
+
+```vue
+<script setup lang="ts">
+import { css } from 'unplugin-inline-css-modules'
+
+const classes = css`
+  .container {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    min-height: 100vh;
+  }
+
+  .button {
+    background-color: #1f1e33;
+    color: white;
+    padding: 1rem 2rem;
+    border: none;
+    border-radius: 4px;
+    cursor: pointer;
+  }
+`
+</script>
+
+<template>
+  <div :class="classes.container">
+    <button :class="classes.button">Click me</button>
+  </div>
+</template>
+```
+
+### Solid
+
+```tsx
+import type { Component } from 'solid-js'
+import { css } from 'unplugin-inline-css-modules'
+
+const styles = css`
+  .container {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    min-height: 100vh;
+  }
+
+  .button {
+    background-color: #1f1e33;
+    color: white;
+    padding: 1rem 2rem;
+    border: none;
+    border-radius: 4px;
+    cursor: pointer;
+  }
+`
+
+const App: Component = () => (
+  <div class={styles.container}>
+    <button class={styles.button}>Click me</button>
+  </div>
+)
+
+export default App
+```
+
+### Svelte
+
+```svelte
+<script lang="ts">
+  import { css } from 'unplugin-inline-css-modules'
+
+  const classes = css`
+    .button {
+      background-color: #1f1e33;
+      color: white;
+      padding: 1rem 2rem;
+      border-radius: 4px;
+    }
+  `
+</script>
+
+<button class={classes.button}>Click me</button>
+```
+
+### Astro
+
+```astro
+---
+import { css } from 'unplugin-inline-css-modules'
+
+const classes = css`
+  .button {
+    background-color: #1f1e33;
+    color: white;
+    padding: 1rem 2rem;
+    border-radius: 4px;
+  }
+`
+---
+
+<button class={classes.button}>Click me</button>
+```
+
+## How It Works
+
+At build time, the plugin transforms your `css` tagged template literals into real CSS module imports:
+
+```ts
+// What you write:
+const classes = css`
+  .root {
+    color: red;
+  }
+`
+
+// What gets compiled:
+import classes from 'virtual:inline-css-modules/App-0.module.css'
+```
+
+The CSS gets extracted into a virtual module and then processed through your bundler's normal CSS pipeline. This means PostCSS plugins, Tailwind `@apply`, preprocessors, and any other CSS tooling work exactly as they would with a regular `.module.css` file.
+
+## Options
+
+| Option         | Type                                                                                        | Default                            | Description                                                                                                     |
+| -------------- | ------------------------------------------------------------------------------------------ | ---------------------------------- | --------------------------------------------------------------------------------------------------------------- |
+| `tagName`      | `string`                                                                                    | `'css'`                            | Template tag name to match. Useful for avoiding conflicts with other CSS-in-JS libraries.                       |
+| `fileMatch`    | `RegExp`                                                                                    | `/\.(tsx\|jsx\|js\|vue\|svelte)$/` | Pattern for files to transform.                                                                                 |
+| `extension`    | `'css' \| 'scss' \| 'sass' \| 'styl' \| 'less' \| (filename: string) => SupportedExtension` | `'css'`                            | CSS preprocessor to use. Can be a string or a function that returns the extension based on the filename.        |
+| `inlineImport` | `boolean`                                                                                   | `true`                             | When `false`, generated imports are hoisted to the top of the file instead of replacing the declaration inline. |
+
+## Caveats
+
+**No string interpolation.** The `css` tag looks like a template literal, but it's a compile-time transform. The contents are moved into a real CSS module, so dynamic values can't work.
+
+**Class variables are replaced at compile time.** The `const classes = css\`...\`` declaration is replaced with an import statement, so you can't reassign or manipulate the variable at runtime.
+
+## Troubleshooting
+
+**`css is not defined` or similar errors** -- Make sure the `tagName` option matches the tag you're using in your code. The plugin removes the import from `unplugin-inline-css-modules` and replaces the tagged template with a CSS module import. If the tag names don't match, the import gets removed but the template isn't transformed.
+
+## License
+
+[MIT](./LICENSE)

package/dist/astro.d.mts

@@ -0,0 +1,8 @@
+import { PluginConfig } from './index.mjs';
+export { css } from './index.mjs';
+import { AstroIntegration } from 'astro';
+import 'unplugin';
+
+declare function export_default(options?: PluginConfig): AstroIntegration;
+
+export { PluginConfig, export_default as default };

package/dist/astro.d.ts

@@ -0,0 +1,8 @@
+import { PluginConfig } from './index.js';
+export { css } from './index.js';
+import { AstroIntegration } from 'astro';
+import 'unplugin';
+
+declare function export_default(options?: PluginConfig): AstroIntegration;
+
+export { PluginConfig, export_default as default };

package/dist/astro.js

@@ -0,0 +1,185 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+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 __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/astro.ts
+var astro_exports = {};
+__export(astro_exports, {
+  css: () => css,
+  default: () => astro_default
+});
+module.exports = __toCommonJS(astro_exports);
+
+// src/index.ts
+var import_unplugin = require("unplugin");
+var import_crypto = require("crypto");
+var import_fs = require("fs");
+var import_path = require("path");
+var matchInlineCssModules = /(?:const|var|let)\s*(\w+)(?:\s*:.*)?\s*=\s*(\w+)\s*`([\s\S]*?)`/gm;
+var css = (_) => ({});
+var virtualModuleId = "virtual:inline-css-modules";
+var webpackModuleId = "inline-css-modules/virtual";
+var resolvedVirtualModuleId = "\0" + virtualModuleId;
+var resolvedWebpackModuleId = "\0inline-css-modules/virtual";
+var cssModules = {};
+var getCacheDir = () => (0, import_path.join)(process.cwd(), "node_modules", ".cache", "inline-css-modules");
+var getCachePath = (hash) => (0, import_path.join)(getCacheDir(), `${hash}.css`);
+function ensureCacheDir() {
+  const dir = getCacheDir();
+  if (!(0, import_fs.existsSync)(dir)) {
+    (0, import_fs.mkdirSync)(dir, { recursive: true });
+  }
+}
+function hashCss(css2) {
+  return (0, import_crypto.createHash)("md5").update(css2).digest("hex");
+}
+function readFromCache(hash) {
+  const path = getCachePath(hash);
+  if ((0, import_fs.existsSync)(path)) {
+    return (0, import_fs.readFileSync)(path, "utf-8");
+  }
+  return null;
+}
+function writeToCache(hash, css2) {
+  ensureCacheDir();
+  (0, import_fs.writeFileSync)(getCachePath(hash), css2);
+}
+var unpluginFactory = (config = {}, meta) => {
+  const fileMatch = config.fileMatch ?? /\.(tsx|jsx|js|vue|svelte)$/;
+  const tagName = config.tagName ?? "css";
+  const preprocessor = config.extension ?? "css";
+  const isWebpack = meta?.framework === "webpack" || meta?.framework === "rspack";
+  const moduleId = isWebpack ? webpackModuleId : virtualModuleId;
+  const resolvedId = isWebpack ? resolvedWebpackModuleId : resolvedVirtualModuleId;
+  return {
+    name: "inline-css-modules",
+    enforce: "pre",
+    resolveId(id) {
+      if (id === moduleId || id.startsWith(moduleId + "/")) {
+        return resolvedId + id.slice(moduleId.length);
+      }
+      if (id === virtualModuleId || id.startsWith(virtualModuleId + "/")) {
+        return resolvedVirtualModuleId + id.slice(virtualModuleId.length);
+      }
+      if (id === webpackModuleId || id.startsWith(webpackModuleId + "/")) {
+        return resolvedWebpackModuleId + id.slice(webpackModuleId.length);
+      }
+      return void 0;
+    },
+    loadInclude(id) {
+      return id.startsWith(resolvedVirtualModuleId) || id.startsWith(resolvedWebpackModuleId);
+    },
+    load(id) {
+      if (!id.startsWith(resolvedVirtualModuleId + "/") && !id.startsWith(resolvedWebpackModuleId + "/"))
+        return void 0;
+      const prefix = id.startsWith(resolvedVirtualModuleId + "/") ? resolvedVirtualModuleId + "/" : resolvedWebpackModuleId + "/";
+      const file = id.slice(prefix.length).replace(/\?used$/, "");
+      const css2 = cssModules[file];
+      if (!css2) {
+        if (isWebpack) {
+          const hash = file.replace(/\.module\.\w+$/, "");
+          const cached = readFromCache(hash);
+          if (cached) {
+            return {
+              code: cached,
+              map: null
+            };
+          }
+        }
+        return void 0;
+      }
+      return {
+        code: css2,
+        map: null
+      };
+    },
+    transform: {
+      filter: {
+        id: fileMatch
+      },
+      handler(src, id) {
+        let imports = [];
+        src = src.replace(
+          /import\s*{\s*(?:css|inlineCss)\s*(?:as\s*\w+\s*)?}\s*from\s*('|"|`)unplugin-inline-css-modules\1;?/gm,
+          ""
+        );
+        src = src.replaceAll(matchInlineCssModules, (substring, ...args) => {
+          const [variableName, tag, css2] = args;
+          if (tag !== tagName) return substring;
+          let baseFilename = id.slice(id.lastIndexOf("/") + 1);
+          baseFilename = baseFilename.slice(0, baseFilename.lastIndexOf("."));
+          let cnt = 0;
+          const ext = typeof preprocessor == "function" ? preprocessor(baseFilename) : preprocessor;
+          let filename = `${baseFilename}-${cnt}.module.${ext}`;
+          while (cssModules[filename]) {
+            cnt++;
+            filename = `${baseFilename}-${cnt}.module.${ext}`;
+          }
+          cssModules[filename] = css2;
+          let importStatement;
+          if (isWebpack) {
+            const hash = hashCss(css2);
+            writeToCache(hash, css2);
+            importStatement = `import ${variableName} from "${moduleId}/${hash}.module.${ext}"`;
+          }
+          importStatement = `import ${variableName} from "${moduleId}/${filename}"`;
+          if (config.inlineImport === false) {
+            imports.push(importStatement);
+            return "";
+          }
+          return importStatement;
+        });
+        if (imports.length) {
+          return imports.join("\n") + "\n" + src;
+        }
+        return {
+          code: src,
+          map: null
+        };
+      }
+    }
+  };
+};
+var unplugin = (0, import_unplugin.createUnplugin)(unpluginFactory);
+var src_default = unplugin;
+
+// src/astro.ts
+function astro_default(options = {}) {
+  return {
+    name: "unplugin-inline-css-modules",
+    hooks: {
+      "astro:config:setup": async (astro) => {
+        astro.updateConfig({
+          vite: {
+            plugins: [
+              src_default.vite({
+                ...options,
+                fileMatch: options.fileMatch ?? /\.(tsx|jsx|js|vue|svelte|astro)$/
+              })
+            ]
+          }
+        });
+      }
+    }
+  };
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  css
+});
+//# sourceMappingURL=astro.js.map

package/dist/astro.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/astro.ts","../src/index.ts"],"sourcesContent":["import type { PluginConfig } from './index'\nimport unplugin from './index'\nimport type { AstroIntegration } from 'astro'\n\nexport default function (options: PluginConfig = {}) {\n  return <AstroIntegration>{\n    name: 'unplugin-inline-css-modules',\n    hooks: {\n      'astro:config:setup': async astro => {\n        astro.updateConfig({\n          vite: {\n            plugins: [\n              unplugin.vite({\n                ...options,\n                fileMatch:\n                  options.fileMatch ?? /\\.(tsx|jsx|js|vue|svelte|astro)$/,\n              }) as Plugin,\n            ],\n          },\n        })\n      },\n    },\n  }\n}\n\nexport { css } from './index'\nexport type { PluginConfig } from './index'\n","import type { UnpluginFactory } from 'unplugin'\nimport { createUnplugin } from 'unplugin'\nimport { createHash } from 'crypto'\nimport { mkdirSync, readFileSync, writeFileSync, existsSync } from 'fs'\nimport { join } from 'path'\n\ntype SupportedExtension = 'css' | 'scss' | 'sass' | 'styl' | 'less'\n\nexport type PluginConfig = {\n  fileMatch?: RegExp\n  tagName?: string\n  extension?: SupportedExtension | ((filename: string) => SupportedExtension)\n  inlineImport?: boolean\n}\n\nconst matchInlineCssModules =\n  /(?:const|var|let)\\s*(\\w+)(?:\\s*:.*)?\\s*=\\s*(\\w+)\\s*`([\\s\\S]*?)`/gm\n\nexport const css = (_: TemplateStringsArray): Record<string, string> => ({})\n\nconst virtualModuleId = 'virtual:inline-css-modules'\nconst webpackModuleId = 'inline-css-modules/virtual'\nconst resolvedVirtualModuleId = '\\0' + virtualModuleId\nconst resolvedWebpackModuleId = '\\0inline-css-modules/virtual'\n\nlet cssModules: Record<string, string> = {}\n\nconst getCacheDir = () =>\n  join(process.cwd(), 'node_modules', '.cache', 'inline-css-modules')\nconst getCachePath = (hash: string) => join(getCacheDir(), `${hash}.css`)\n\nfunction ensureCacheDir() {\n  const dir = getCacheDir()\n  if (!existsSync(dir)) {\n    mkdirSync(dir, { recursive: true })\n  }\n}\n\nfunction hashCss(css: string): string {\n  return createHash('md5').update(css).digest('hex')\n}\n\nfunction readFromCache(hash: string): string | null {\n  const path = getCachePath(hash)\n  if (existsSync(path)) {\n    return readFileSync(path, 'utf-8')\n  }\n  return null\n}\n\nfunction writeToCache(hash: string, css: string): void {\n  ensureCacheDir()\n  writeFileSync(getCachePath(hash), css)\n}\n\nexport const unpluginFactory: UnpluginFactory<PluginConfig | undefined> = (\n  config = {},\n  meta\n) => {\n  const fileMatch = config.fileMatch ?? /\\.(tsx|jsx|js|vue|svelte)$/\n  const tagName = config.tagName ?? 'css'\n  const preprocessor = config.extension ?? 'css'\n  const isWebpack =\n    meta?.framework === 'webpack' || meta?.framework === 'rspack'\n  const moduleId = isWebpack ? webpackModuleId : virtualModuleId\n  const resolvedId = isWebpack\n    ? resolvedWebpackModuleId\n    : resolvedVirtualModuleId\n\n  return {\n    name: 'inline-css-modules',\n    enforce: 'pre',\n    resolveId(id) {\n      if (id === moduleId || id.startsWith(moduleId + '/')) {\n        return resolvedId + id.slice(moduleId.length)\n      }\n      if (id === virtualModuleId || id.startsWith(virtualModuleId + '/')) {\n        return resolvedVirtualModuleId + id.slice(virtualModuleId.length)\n      }\n      if (id === webpackModuleId || id.startsWith(webpackModuleId + '/')) {\n        return resolvedWebpackModuleId + id.slice(webpackModuleId.length)\n      }\n      return undefined\n    },\n    loadInclude(id) {\n      return (\n        id.startsWith(resolvedVirtualModuleId) ||\n        id.startsWith(resolvedWebpackModuleId)\n      )\n    },\n    load(id) {\n      if (\n        !id.startsWith(resolvedVirtualModuleId + '/') &&\n        !id.startsWith(resolvedWebpackModuleId + '/')\n      )\n        return undefined\n\n      const prefix = id.startsWith(resolvedVirtualModuleId + '/')\n        ? resolvedVirtualModuleId + '/'\n        : resolvedWebpackModuleId + '/'\n      const file = id.slice(prefix.length).replace(/\\?used$/, '')\n      const css = cssModules[file]\n\n      if (!css) {\n        if (isWebpack) {\n          const hash = file.replace(/\\.module\\.\\w+$/, '')\n          const cached = readFromCache(hash)\n          if (cached) {\n            return {\n              code: cached,\n              map: null,\n            }\n          }\n        }\n        return undefined\n      }\n      return {\n        code: css,\n        map: null,\n      }\n    },\n    transform: {\n      filter: {\n        id: fileMatch,\n      },\n      handler(src, id) {\n        // Build up a list of import statements to inject to the top of the file\n        let imports: string[] = []\n\n        src = src.replace(\n          /import\\s*{\\s*(?:css|inlineCss)\\s*(?:as\\s*\\w+\\s*)?}\\s*from\\s*('|\"|`)unplugin-inline-css-modules\\1;?/gm,\n          ''\n        )\n\n        src = src.replaceAll(matchInlineCssModules, (substring, ...args) => {\n          const [variableName, tag, css] = args\n\n          if (tag !== tagName) return substring\n\n          let baseFilename = id.slice(id.lastIndexOf('/') + 1)\n          baseFilename = baseFilename.slice(0, baseFilename.lastIndexOf('.'))\n          let cnt = 0\n          const ext =\n            typeof preprocessor == 'function'\n              ? preprocessor(baseFilename)\n              : preprocessor\n          let filename = `${baseFilename}-${cnt}.module.${ext}`\n          while (cssModules[filename]) {\n            cnt++\n            filename = `${baseFilename}-${cnt}.module.${ext}`\n          }\n          cssModules[filename] = css\n\n          let importStatement\n\n          if (isWebpack) {\n            const hash = hashCss(css)\n            writeToCache(hash, css)\n            importStatement = `import ${variableName} from \"${moduleId}/${hash}.module.${ext}\"`\n          }\n          importStatement = `import ${variableName} from \"${moduleId}/${filename}\"`\n\n          if (config.inlineImport === false) {\n            imports.push(importStatement)\n            return ''\n          }\n          return importStatement\n        })\n        if (imports.length) {\n          return imports.join('\\n') + '\\n' + src\n        }\n        return {\n          code: src,\n          map: null,\n        }\n      },\n    },\n  }\n}\n\nexport const unplugin = createUnplugin(unpluginFactory)\n\nexport default unplugin\n"],"mappings":"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","names":["css"]}