tailwindcss-injector 0.0.1 → 0.1.0

package/README.md

@@ -0,0 +1,112 @@
+# TailwindCSS Injector
+
+**English | [中文](./README-cn.md)**
+
+- [TailwindCSS Injector](#tailwindcss-injector)
+  - [Overview](#overview)
+  - [Features](#features)
+  - [Installation](#installation)
+  - [Usage](#usage)
+    - [Basic Example](#basic-example)
+  - [Options](#options)
+    - [Example Configuration](#example-configuration)
+  - [How It Works](#how-it-works)
+  - [License](#license)
+
+---
+
+## Overview
+
+`tailwindcss-injector` is a library designed to dynamically inject TailwindCSS directives and configurations into your CSS workflow. It includes a PostCSS plugin that supports multiple file extensions, dynamic configuration, and flexible filtering, enabling seamless integration into modern build pipelines.
+
+---
+
+## Features
+
+- **Dynamic Directive Injection**: Automatically inserts TailwindCSS directives like `@tailwind base`, `@tailwind components`, and `@tailwind utilities`.
+- **Multi-extension Support**: Processes files with customizable extensions (e.g., `.html`, `.js`, `.ts`).
+- **Inline or External Configuration**: Accepts inline configuration objects or paths to configuration files.
+- **Customizable Filters**: Use a filter function to process specific files.
+- **TailwindCSS Integration**: Dynamically adjusts TailwindCSS configurations per file.
+
+---
+
+## Installation
+
+Install the package and its dependencies:
+
+```bash
+npm install tailwindcss-injector tailwindcss postcss --save-dev
+```
+
+---
+
+## Usage
+
+To use the PostCSS plugin, import it from `tailwindcss-injector/postcss`:
+
+### Basic Example
+
+```javascript
+const tailwindInjector = require('tailwindcss-injector/postcss')
+
+module.exports = {
+  plugins: [
+    tailwindInjector({
+      cwd: process.cwd(),
+      config: './tailwind.config.js',
+      directiveParams: ['base', 'components', 'utilities'],
+      extensions: ['html', 'js', 'ts'],
+      filter: input => !!input?.file && input.file.endsWith('.css'),
+    }),
+  ],
+}
+```
+
+---
+
+## Options
+
+The plugin accepts the following options:
+
+| Option            | Type                                                               | Description                                                         |
+| ----------------- | ------------------------------------------------------------------ | ------------------------------------------------------------------- |
+| `cwd`             | `string`                                                           | Current working directory.                                          |
+| `config`          | `string \| Partial<Config> \| (input) => InlineTailwindcssOptions` | TailwindCSS configuration file path or inline configuration object. |
+| `directiveParams` | `('base' \| 'components' \| 'utilities' \| 'variants')[]`          | Array of TailwindCSS directives to inject.                          |
+| `extensions`      | `string[]`                                                         | Array of supported file extensions.                                 |
+| `filter`          | `(input?: postcss.Input) => boolean`                               | Custom function to filter files to process.                         |
+
+### Example Configuration
+
+```javascript
+{
+  cwd: process.cwd(), // Set current working directory
+  config: './tailwind.config.js', // Use an external TailwindCSS configuration file
+  directiveParams: ['base', 'components', 'utilities'], // Inject directives dynamically
+  extensions: ['html', 'js', 'ts'], // Process specific file extensions
+  filter: (input) => !!input?.file && input.file.endsWith('.css'), // Filter for CSS files only
+}
+```
+
+---
+
+## How It Works
+
+1. **Directive Injection**:
+   The plugin ensures that the specified TailwindCSS directives (`@tailwind base`, `@tailwind components`, etc.) are injected into the CSS files.
+
+2. **Dynamic Configuration**:
+   TailwindCSS configurations are dynamically adjusted based on the processed files, including custom extensions.
+
+3. **File Filtering**:
+   Files to process can be filtered using the `filter` option.
+
+4. **PostCSS Processing**:
+   The plugin integrates with PostCSS to apply TailwindCSS transformations seamlessly.
+
+---
+
+## License
+
+This project is licensed under the **MIT License**. See the `LICENSE` file for details.

package/dist/postcss.cjs

@@ -28,12 +28,9 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 ));
 
 // ../../node_modules/.pnpm/tsup@8.3.5_jiti@2.4.1_postcss@8.4.49_tsx@4.19.2_typescript@5.7.2_yaml@2.6.1/node_modules/tsup/assets/cjs_shims.js
-var getImportMetaUrl, importMetaUrl;
 var init_cjs_shims = __esm({
   "../../node_modules/.pnpm/tsup@8.3.5_jiti@2.4.1_postcss@8.4.49_tsx@4.19.2_typescript@5.7.2_yaml@2.6.1/node_modules/tsup/assets/cjs_shims.js"() {
     "use strict";
-    getImportMetaUrl = () => typeof document === "undefined" ? new URL(`file:${__filename}`).href : document.currentScript && document.currentScript.src || new URL("main.js", document.baseURI).href;
-    importMetaUrl = /* @__PURE__ */ getImportMetaUrl();
   }
 });
 
@@ -218,7 +215,15 @@ var require_set_value = __commonJS({
 
 // src/postcss.ts
 init_cjs_shims();
+var import_set_value = __toESM(require_set_value(), 1);
 var _process = require('process'); var _process2 = _interopRequireDefault(_process);
+var _postcss = require('postcss'); var _postcss2 = _interopRequireDefault(_postcss);
+var _tailwindcss = require('tailwindcss'); var _tailwindcss2 = _interopRequireDefault(_tailwindcss);
+var _tailwindcssconfig = require('tailwindcss-config');
+
+// src/utils.ts
+init_cjs_shims();
+var _path = require('path'); var _path2 = _interopRequireDefault(_path);
 
 // ../../node_modules/.pnpm/defu@6.1.4/node_modules/defu/dist/defu.mjs
 init_cjs_shims();
@@ -289,69 +294,116 @@ var defuArrayFn = createDefu((object, key, currentValue) => {
   }
 });
 
-// src/postcss.ts
-var import_set_value = __toESM(require_set_value(), 1);
-var _postcss = require('postcss'); var _postcss2 = _interopRequireDefault(_postcss);
-var _tailwindcss = require('tailwindcss'); var _tailwindcss2 = _interopRequireDefault(_tailwindcss);
-
-// src/config.ts
-init_cjs_shims();
-var _path = require('path'); var _path2 = _interopRequireDefault(_path);
-
-var _jiti = require('jiti');
-var _lilconfig = require('lilconfig');
-var jiti = _jiti.createJiti.call(void 0, importMetaUrl);
-var moduleName = "tailwind";
-async function loadConfig(options) {
-  const { config, cwd } = defu(options, {
-    cwd: _process2.default.cwd()
-  });
-  const searcher = _lilconfig.lilconfig.call(void 0, "tailwindcss", {
-    searchPlaces: [
-      `${moduleName}.config.js`,
-      `${moduleName}.config.cjs`,
-      `${moduleName}.config.mjs`,
-      `${moduleName}.config.ts`,
-      `${moduleName}.config.cts`,
-      `${moduleName}.config.mts`
-    ],
-    loaders: {
-      ".js": jiti,
-      ".cjs": jiti,
-      ".mjs": jiti,
-      ".ts": jiti,
-      ".cts": jiti,
-      ".mts": jiti
-    }
-  });
-  if (typeof config === "string" && config) {
-    const configPath = _path2.default.isAbsolute(config) ? config : _path2.default.resolve(cwd, config);
-    const result = await searcher.load(configPath);
-    return _optionalChain([result, 'optionalAccess', _ => _.config]);
-  } else {
-    const result = await searcher.search(cwd);
-    return _optionalChain([result, 'optionalAccess', _2 => _2.config]);
+// src/utils.ts
+function removeFileExtension(filePath) {
+  if (!filePath) {
+    return "";
   }
+  let baseName = _path2.default.basename(filePath);
+  let ext = _path2.default.extname(baseName);
+  while (ext) {
+    baseName = baseName.slice(0, -ext.length);
+    ext = _path2.default.extname(baseName);
+  }
+  const dir = _path2.default.dirname(filePath);
+  return _path2.default.join(dir, baseName);
 }
+var defuOverrideArray = createDefu((obj, key, value) => {
+  if (Array.isArray(obj[key]) && Array.isArray(value)) {
+    obj[key] = value;
+    return true;
+  }
+});
 
-// src/utils.ts
+// src/wxml.ts
 init_cjs_shims();
 
-function removeFileExtension(filePath) {
-  let baseName = _path2.default.basename(filePath, _path2.default.extname(filePath));
-  while (baseName.includes(".")) {
-    baseName = _path2.default.basename(baseName, _path2.default.extname(baseName));
+var _fsextra = require('fs-extra'); var _fsextra2 = _interopRequireDefault(_fsextra);
+var _htmlparser2 = require('htmlparser2');
+var _magicstring = require('magic-string'); var _magicstring2 = _interopRequireDefault(_magicstring);
+var srcImportTagsMap = {
+  // audio: ['src', 'poster'],
+  // video: ['src', 'poster'],
+  // image: ['src'],
+  // https://developers.weixin.qq.com/miniprogram/dev/reference/wxs/01wxs-module.html
+  // wxs: ['src'],
+  // https://developers.weixin.qq.com/miniprogram/dev/reference/wxml/import.html
+  import: ["src"],
+  include: ["src"]
+};
+function processWxml(wxml) {
+  const ms = new (0, _magicstring2.default)(wxml.toString());
+  const deps = [];
+  let currentTagName = "";
+  let importAttrs;
+  let attrs = {};
+  const parser = new (0, _htmlparser2.Parser)(
+    {
+      onopentagname(name) {
+        currentTagName = name;
+        importAttrs = srcImportTagsMap[currentTagName];
+      },
+      onattribute(name, value, quote) {
+        attrs[name] = value;
+        if (importAttrs) {
+          for (const attrName of importAttrs) {
+            if (attrName === name) {
+              deps.push({
+                name,
+                value,
+                quote,
+                tagName: currentTagName,
+                start: parser.startIndex,
+                end: parser.endIndex,
+                attrs
+              });
+            }
+          }
+        }
+      },
+      onclosetag() {
+        currentTagName = "";
+        attrs = {};
+        importAttrs = void 0;
+      }
+    },
+    {
+      lowerCaseTags: false,
+      xmlMode: true
+    }
+  );
+  parser.write(
+    ms.original
+  );
+  parser.end();
+  return deps;
+}
+async function getDepFiles(file) {
+  const set2 = /* @__PURE__ */ new Set();
+  async function getDep(filepath) {
+    if (await _fsextra2.default.exists(filepath)) {
+      const dirname = _path2.default.dirname(filepath);
+      set2.add(filepath);
+      const wxml = await _fsextra2.default.readFile(filepath, "utf8");
+      const deps = await processWxml(wxml);
+      for (const { value } of deps) {
+        const p = _path2.default.resolve(dirname, value);
+        if (!set2.has(p)) {
+          await getDep(p);
+        }
+      }
+    }
   }
-  const dir = _path2.default.dirname(filePath);
-  return _path2.default.join(dir, baseName);
+  await getDep(file);
+  return set2;
 }
 
 // src/postcss.ts
 var creator = (options) => {
-  const { config, filter, directiveParams, cwd, extensions } = defu(options, {
+  const { config, filter, directiveParams, cwd, extensions } = defuOverrideArray(options, {
     filter: () => true,
     config: void 0,
-    directiveParams: ["utilities"],
+    directiveParams: ["utilities", "components"],
     cwd: _process2.default.cwd(),
     extensions: ["wxml", "js", "ts"]
   });
@@ -362,7 +414,7 @@ var creator = (options) => {
       {
         postcssPlugin: "post",
         async Once(root, helpers) {
-          if (filter(_optionalChain([root, 'access', _3 => _3.source, 'optionalAccess', _4 => _4.input]))) {
+          if (filter(_optionalChain([root, 'access', _ => _.source, 'optionalAccess', _2 => _2.input]))) {
             let _root = root;
             for (const params of directiveParams) {
               const node = root.nodes.find((x) => x.type === "atrule" && x.params === params);
@@ -370,10 +422,10 @@ var creator = (options) => {
                 _root = _root.prepend(helpers.atRule({ name: "tailwind", params }));
               }
             }
-            const cfg = typeof config === "function" ? config(_optionalChain([root, 'access', _5 => _5.source, 'optionalAccess', _6 => _6.input])) : config;
+            const cfg = typeof config === "function" ? config(_optionalChain([root, 'access', _3 => _3.source, 'optionalAccess', _4 => _4.input])) : config;
             let tailwindcssConfig;
             if (typeof cfg === "string") {
-              tailwindcssConfig = await loadConfig({
+              tailwindcssConfig = await _tailwindcssconfig.loadConfig.call(void 0, {
                 cwd,
                 config: cfg
               });
@@ -382,10 +434,17 @@ var creator = (options) => {
                 content: []
               }));
             }
-            if (tailwindcssConfig && _optionalChain([root, 'access', _7 => _7.source, 'optionalAccess', _8 => _8.input]) && root.source.input.file) {
+            if (tailwindcssConfig && _optionalChain([root, 'access', _5 => _5.source, 'optionalAccess', _6 => _6.input]) && root.source.input.file) {
+              const basename = removeFileExtension(root.source.input.file);
               (0, import_set_value.default)(tailwindcssConfig, "content", [
-                `${removeFileExtension(root.source.input.file)}.${extensionsGlob}`
+                `${basename}.${extensionsGlob}`
               ]);
+              const deps = await getDepFiles(`${basename}.wxml`);
+              for (const dep of deps) {
+                if (Array.isArray(tailwindcssConfig.content)) {
+                  tailwindcssConfig.content.push(`${removeFileExtension(dep)}.${extensionsGlob}`);
+                }
+              }
             }
             const { root: newRoot } = await _postcss2.default.call(void 0, [
               _tailwindcss2.default.call(void 0, tailwindcssConfig)

package/dist/postcss.d.cts

@@ -1,7 +1,7 @@
 import postcss, { PluginCreator } from 'postcss';
 import { Config } from 'tailwindcss';
 
-type InlineTailwindcssOptions = string | Config | undefined;
+type InlineTailwindcssOptions = string | Partial<Config> | undefined;
 interface Options {
     cwd: string;
     filter: (input?: postcss.Input) => boolean;

package/dist/postcss.d.ts

@@ -1,7 +1,7 @@
 import postcss, { PluginCreator } from 'postcss';
 import { Config } from 'tailwindcss';
 
-type InlineTailwindcssOptions = string | Config | undefined;
+type InlineTailwindcssOptions = string | Partial<Config> | undefined;
 interface Options {
     cwd: string;
     filter: (input?: postcss.Input) => boolean;

package/dist/postcss.js

@@ -215,7 +215,15 @@ var require_set_value = __commonJS({
 
 // src/postcss.ts
 init_esm_shims();
-import process2 from "node:process";
+var import_set_value = __toESM(require_set_value(), 1);
+import process from "node:process";
+import postcss from "postcss";
+import tailwindcss from "tailwindcss";
+import { loadConfig } from "tailwindcss-config";
+
+// src/utils.ts
+init_esm_shims();
+import path from "node:path";
 
 // ../../node_modules/.pnpm/defu@6.1.4/node_modules/defu/dist/defu.mjs
 init_esm_shims();
@@ -286,70 +294,117 @@ var defuArrayFn = createDefu((object, key, currentValue) => {
   }
 });
 
-// src/postcss.ts
-var import_set_value = __toESM(require_set_value(), 1);
-import postcss from "postcss";
-import tailwindcss from "tailwindcss";
-
-// src/config.ts
-init_esm_shims();
-import path from "node:path";
-import process from "node:process";
-import { createJiti } from "jiti";
-import { lilconfig } from "lilconfig";
-var jiti = createJiti(import.meta.url);
-var moduleName = "tailwind";
-async function loadConfig(options) {
-  const { config, cwd } = defu(options, {
-    cwd: process.cwd()
-  });
-  const searcher = lilconfig("tailwindcss", {
-    searchPlaces: [
-      `${moduleName}.config.js`,
-      `${moduleName}.config.cjs`,
-      `${moduleName}.config.mjs`,
-      `${moduleName}.config.ts`,
-      `${moduleName}.config.cts`,
-      `${moduleName}.config.mts`
-    ],
-    loaders: {
-      ".js": jiti,
-      ".cjs": jiti,
-      ".mjs": jiti,
-      ".ts": jiti,
-      ".cts": jiti,
-      ".mts": jiti
-    }
-  });
-  if (typeof config === "string" && config) {
-    const configPath = path.isAbsolute(config) ? config : path.resolve(cwd, config);
-    const result = await searcher.load(configPath);
-    return result?.config;
-  } else {
-    const result = await searcher.search(cwd);
-    return result?.config;
+// src/utils.ts
+function removeFileExtension(filePath) {
+  if (!filePath) {
+    return "";
   }
+  let baseName = path.basename(filePath);
+  let ext = path.extname(baseName);
+  while (ext) {
+    baseName = baseName.slice(0, -ext.length);
+    ext = path.extname(baseName);
+  }
+  const dir = path.dirname(filePath);
+  return path.join(dir, baseName);
 }
+var defuOverrideArray = createDefu((obj, key, value) => {
+  if (Array.isArray(obj[key]) && Array.isArray(value)) {
+    obj[key] = value;
+    return true;
+  }
+});
 
-// src/utils.ts
+// src/wxml.ts
 init_esm_shims();
 import path2 from "node:path";
-function removeFileExtension(filePath) {
-  let baseName = path2.basename(filePath, path2.extname(filePath));
-  while (baseName.includes(".")) {
-    baseName = path2.basename(baseName, path2.extname(baseName));
+import fs from "fs-extra";
+import { Parser } from "htmlparser2";
+import MagicString from "magic-string";
+var srcImportTagsMap = {
+  // audio: ['src', 'poster'],
+  // video: ['src', 'poster'],
+  // image: ['src'],
+  // https://developers.weixin.qq.com/miniprogram/dev/reference/wxs/01wxs-module.html
+  // wxs: ['src'],
+  // https://developers.weixin.qq.com/miniprogram/dev/reference/wxml/import.html
+  import: ["src"],
+  include: ["src"]
+};
+function processWxml(wxml) {
+  const ms = new MagicString(wxml.toString());
+  const deps = [];
+  let currentTagName = "";
+  let importAttrs;
+  let attrs = {};
+  const parser = new Parser(
+    {
+      onopentagname(name) {
+        currentTagName = name;
+        importAttrs = srcImportTagsMap[currentTagName];
+      },
+      onattribute(name, value, quote) {
+        attrs[name] = value;
+        if (importAttrs) {
+          for (const attrName of importAttrs) {
+            if (attrName === name) {
+              deps.push({
+                name,
+                value,
+                quote,
+                tagName: currentTagName,
+                start: parser.startIndex,
+                end: parser.endIndex,
+                attrs
+              });
+            }
+          }
+        }
+      },
+      onclosetag() {
+        currentTagName = "";
+        attrs = {};
+        importAttrs = void 0;
+      }
+    },
+    {
+      lowerCaseTags: false,
+      xmlMode: true
+    }
+  );
+  parser.write(
+    ms.original
+  );
+  parser.end();
+  return deps;
+}
+async function getDepFiles(file) {
+  const set2 = /* @__PURE__ */ new Set();
+  async function getDep(filepath) {
+    if (await fs.exists(filepath)) {
+      const dirname = path2.dirname(filepath);
+      set2.add(filepath);
+      const wxml = await fs.readFile(filepath, "utf8");
+      const deps = await processWxml(wxml);
+      for (const { value } of deps) {
+        const p = path2.resolve(dirname, value);
+        if (!set2.has(p)) {
+          await getDep(p);
+        }
+      }
+    }
   }
-  const dir = path2.dirname(filePath);
-  return path2.join(dir, baseName);
+  await getDep(file);
+  return set2;
 }
 
 // src/postcss.ts
 var creator = (options) => {
-  const { config, filter, directiveParams, cwd, extensions } = defu(options, {
+  const { config, filter, directiveParams, cwd, extensions } = defuOverrideArray(options, {
     filter: () => true,
     config: void 0,
-    directiveParams: ["utilities"],
-    cwd: process2.cwd(),
+    directiveParams: ["utilities", "components"],
+    cwd: process.cwd(),
     extensions: ["wxml", "js", "ts"]
   });
   const extensionsGlob = `{${extensions.join(",")}}`;
@@ -380,9 +435,16 @@ var creator = (options) => {
               };
             }
             if (tailwindcssConfig && root.source?.input && root.source.input.file) {
+              const basename = removeFileExtension(root.source.input.file);
               (0, import_set_value.default)(tailwindcssConfig, "content", [
-                `${removeFileExtension(root.source.input.file)}.${extensionsGlob}`
+                `${basename}.${extensionsGlob}`
               ]);
+              const deps = await getDepFiles(`${basename}.wxml`);
+              for (const dep of deps) {
+                if (Array.isArray(tailwindcssConfig.content)) {
+                  tailwindcssConfig.content.push(`${removeFileExtension(dep)}.${extensionsGlob}`);
+                }
+              }
             }
             const { root: newRoot } = await postcss([
               tailwindcss(tailwindcssConfig)

package/package.json

@@ -1,17 +1,17 @@
 {
   "name": "tailwindcss-injector",
   "type": "module",
-  "version": "0.0.1",
+  "version": "0.1.0",
   "description": "tsup(esbuild) build package template",
   "author": "ice breaker <1324318532@qq.com>",
   "license": "MIT",
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/sonofmagic/monorepo-template.git",
-    "directory": "packages/bar"
+    "url": "git+https://github.com/sonofmagic/weapp-tailwindcss.git",
+    "directory": "packages/tailwindcss-injector"
   },
   "bugs": {
-    "url": "https://github.com/sonofmagic/monorepo-template/issues"
+    "url": "https://github.com/sonofmagic/weapp-tailwindcss/issues"
   },
   "keywords": [],
   "sideEffects": false,
@@ -31,10 +31,12 @@
     "dist"
   ],
   "dependencies": {
-    "jiti": "^2.4.1",
-    "lilconfig": "^3.1.2",
+    "fs-extra": "^11.2.0",
+    "htmlparser2": "^9.1.0",
+    "magic-string": "^0.30.14",
     "postcss": "^8.4.49",
-    "tailwindcss": "^3.4.15"
+    "tailwindcss": "^3.4.16",
+    "tailwindcss-config": "0.0.0"
   },
   "scripts": {
     "dev": "tsup --watch --sourcemap",