tailwindcss-injector 0.0.1 → 0.0.2

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

@@ -218,7 +218,21 @@ 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);
+
+// src/config.ts
+init_cjs_shims();
+var _path = require('path'); var _path2 = _interopRequireDefault(_path);
+
+var _jiti = require('jiti');
+var _lilconfig = require('lilconfig');
+
+// src/utils.ts
+init_cjs_shims();
+
 
 // ../../node_modules/.pnpm/defu@6.1.4/node_modules/defu/dist/defu.mjs
 init_cjs_shims();
@@ -289,21 +303,27 @@ 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/utils.ts
+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));
+  }
+  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/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, {
+  const { config, cwd } = defuOverrideArray(options, {
     cwd: _process2.default.cwd()
   });
   const searcher = _lilconfig.lilconfig.call(void 0, "tailwindcss", {
@@ -334,24 +354,12 @@ async function loadConfig(options) {
   }
 }
 
-// src/utils.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));
-  }
-  const dir = _path2.default.dirname(filePath);
-  return _path2.default.join(dir, baseName);
-}
-
 // 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"]
   });

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,21 @@ var require_set_value = __commonJS({
 
 // src/postcss.ts
 init_esm_shims();
+var import_set_value = __toESM(require_set_value(), 1);
 import process2 from "node:process";
+import postcss from "postcss";
+import tailwindcss from "tailwindcss";
+
+// src/config.ts
+init_esm_shims();
+import path2 from "node:path";
+import process from "node:process";
+import { createJiti } from "jiti";
+import { lilconfig } from "lilconfig";
+
+// 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,21 +300,27 @@ 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/utils.ts
+function removeFileExtension(filePath) {
+  let baseName = path.basename(filePath, path.extname(filePath));
+  while (baseName.includes(".")) {
+    baseName = path.basename(baseName, 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/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, {
+  const { config, cwd } = defuOverrideArray(options, {
     cwd: process.cwd()
   });
   const searcher = lilconfig("tailwindcss", {
@@ -322,7 +342,7 @@ async function loadConfig(options) {
     }
   });
   if (typeof config === "string" && config) {
-    const configPath = path.isAbsolute(config) ? config : path.resolve(cwd, config);
+    const configPath = path2.isAbsolute(config) ? config : path2.resolve(cwd, config);
     const result = await searcher.load(configPath);
     return result?.config;
   } else {
@@ -331,24 +351,12 @@ async function loadConfig(options) {
   }
 }
 
-// src/utils.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));
-  }
-  const dir = path2.dirname(filePath);
-  return path2.join(dir, baseName);
-}
-
 // 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.cwd(),
     extensions: ["wxml", "js", "ts"]
   });

package/package.json

@@ -1,17 +1,17 @@
 {
   "name": "tailwindcss-injector",
   "type": "module",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "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,
@@ -32,7 +32,7 @@
   ],
   "dependencies": {
     "jiti": "^2.4.1",
-    "lilconfig": "^3.1.2",
+    "lilconfig": "^3.1.3",
     "postcss": "^8.4.49",
     "tailwindcss": "^3.4.15"
   },