chore: bump version

sonofmagic · Dec 3, 2024 · 1ea1fdc · 1ea1fdc
1 parent 9342b47
commit 1ea1fdc
Show file tree

Hide file tree

Showing 18 changed files with 780 additions and 647 deletions.
diff --git a/.changeset/nasty-horses-learn.md b/.changeset/nasty-horses-learn.md
@@ -0,0 +1,5 @@
+---
+"tailwindcss-injector": patch
+---
+
+feat: change directiveParams default and allow override
diff --git a/apps/vite-native/postcss.config.js b/apps/vite-native/postcss.config.js
@@ -2,7 +2,6 @@ export default {
   plugins: {
     'tailwindcss-injector/postcss': {},
     'tailwindcss': {},
-    // 假如框架已经内置了 `autoprefixer`，可以去除下一行
     'autoprefixer': {},
   },
 }
diff --git a/benchmark/package.json b/benchmark/package.json
@@ -28,7 +28,7 @@
     "@tailwindcss/vite": "4.0.0-alpha.31",
     "@vitejs/plugin-vue": "^5.2.1",
     "tailwindcss": "4.0.0-alpha.31",
-    "vite": "^6.0.1",
+    "vite": "^6.0.2",
     "vue-tsc": "^2.1.10"
   }
 }
diff --git a/eslint.config.js b/eslint.config.js
@@ -13,6 +13,7 @@ export default icebreaker(
       'packages/tailwindcss-core-plugins-extractor/src',
       // tmp 添加
       'apps/weapp-library',
+      'packages/tailwindcss-injector/*.md',
     ],
   },
   {

diff --git a/package.json b/package.json
@@ -100,7 +100,7 @@
     "registry": "https://registry.npmjs.org"
   },
   "devDependencies": {
-    "@ast-grep/napi": "^0.30.1",
+    "@ast-grep/napi": "^0.31.0",
     "@babel/core": "^7.26.0",
     "@changesets/changelog-github": "^0.5.0",
     "@changesets/cli": "^2.27.10",
@@ -157,8 +157,8 @@
     "@types/webpack": "^5.28.5",
     "@types/webpack-sources": "^3.2.3",
     "@types/webpack4": "npm:@types/webpack@^4.41.39",
-    "@vitest/coverage-v8": "~2.1.6",
-    "@vitest/ui": "~2.1.6",
+    "@vitest/coverage-v8": "~2.1.8",
+    "@vitest/ui": "~2.1.8",
     "@weapp-tailwindcss/cli": "workspace:*",
     "anymatch": "^3.1.3",
     "autoprefixer": "^10.4.20",
@@ -211,8 +211,8 @@
     "rimraf": "^6.0.1",
     "rollup": "^4.28.0",
     "rollup-plugin-visualizer": "^5.12.0",
-    "sass": "^1.81.0",
-    "sass-embedded": "^1.81.0",
+    "sass": "^1.81.1",
+    "sass-embedded": "^1.81.1",
     "sass-true": "^8.1.0",
     "semver": "7.6.3",
     "set-value": "^4.1.0",
@@ -230,11 +230,11 @@
     "uuid": "^11.0.3",
     "vinyl": "^3.0.0",
     "vinyl-fs": "^4.0.0",
-    "vite": "^6.0.1",
-    "vite-plugin-inspect": "^0.10.2",
-    "vitest": "~2.1.6",
+    "vite": "^6.0.2",
+    "vite-plugin-inspect": "^0.10.3",
+    "vitest": "~2.1.8",
     "weapp-tailwindcss-children": "^0.1.0",
-    "webpack": "^5.96.1",
+    "webpack": "^5.97.0",
     "webpack-build-utils": "^0.0.7",
     "yaml": "^2.6.1"
   }

diff --git a/packages/tailwindcss-injector/README-cn.md b/packages/tailwindcss-injector/README-cn.md
@@ -0,0 +1,112 @@
+# TailwindCSS Injector
+
+**[English](/README.md) | 中文**
+
+- [TailwindCSS Injector](#tailwindcss-injector)
+  - [概述](#概述)
+  - [功能](#功能)
+  - [安装](#安装)
+  - [使用方法](#使用方法)
+    - [基本示例](#基本示例)
+  - [配置选项](#配置选项)
+    - [示例配置](#示例配置)
+  - [工作原理](#工作原理)
+  - [许可证](#许可证)
+
+---
+
+## 概述
+
+`tailwindcss-injector` 是一个用于动态注入 TailwindCSS 指令和配置的库。它包含一个 PostCSS 插件，支持多种文件扩展名、动态配置和灵活的文件过滤，可以无缝集成到现代构建管道中。
+
+---
+
+## 功能
+
+- **动态指令注入**：自动插入 TailwindCSS 指令，例如 `@tailwind base`、`@tailwind components` 和 `@tailwind utilities`。
+- **支持多种扩展名**：处理具有自定义扩展名的文件（例如 `.html`、`.js`、`.ts`）。
+- **内联或外部配置**：支持内联配置对象或配置文件路径。
+- **可定制文件过滤**：通过过滤函数选择需要处理的文件。
+- **与 TailwindCSS 集成**：根据文件动态调整 TailwindCSS 配置。
+
+---
+
+## 安装
+
+安装此库及其依赖项：
+
+```bash
+npm install tailwindcss-injector tailwindcss postcss --save-dev
+```
+
+---
+
+## 使用方法
+
+要使用 PostCSS 插件，请从 `tailwindcss-injector/postcss` 引入：
+
+### 基本示例
+
+```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'),
+    }),
+  ],
+}
+```
+
+---
+
+## 配置选项
+
+该插件支持以下配置项：
+
+| 配置项            | 类型                                                               | 描述                                     |
+| ----------------- | ------------------------------------------------------------------ | ---------------------------------------- |
+| `cwd`             | `string`                                                           | 当前工作目录。                           |
+| `config`          | `string \| Partial<Config> \| (input) => InlineTailwindcssOptions` | TailwindCSS 配置文件路径或内联配置对象。 |
+| `directiveParams` | `('base' \| 'components' \| 'utilities' \| 'variants')[]`          | 要注入的 TailwindCSS 指令数组。          |
+| `extensions`      | `string[]`                                                         | 支持的文件扩展名数组。                   |
+| `filter`          | `(input?: postcss.Input) => boolean`                               | 自定义文件过滤函数。                     |
+
+### 示例配置
+
+```javascript
+{
+  cwd: process.cwd(), // 设置当前工作目录
+  config: './tailwind.config.js', // 使用外部 TailwindCSS 配置文件
+  directiveParams: ['base', 'components', 'utilities'], // 动态注入的指令
+  extensions: ['html', 'js', 'ts'], // 处理特定文件扩展名
+  filter: (input) => !!input?.file && input.file.endsWith('.css'), // 仅处理 CSS 文件
+}
+```
+
+---
+
+## 工作原理
+
+1. **指令注入**：
+   插件确保在 CSS 文件中注入指定的 TailwindCSS 指令（例如 `@tailwind base`、`@tailwind components`）。
+
+2. **动态配置**：
+   根据处理的文件动态调整 TailwindCSS 配置，包括自定义扩展名支持。
+
+3. **文件过滤**：
+   可以通过 `filter` 选项指定需要处理的文件。
+
+4. **PostCSS 处理**：
+   插件与 PostCSS 集成，应用 TailwindCSS 转换。
+
+---
+
+## 许可证
+
+此项目采用 **MIT 许可证**。有关详细信息，请参阅 `LICENSE` 文件。
diff --git a/packages/tailwindcss-injector/README.md b/packages/tailwindcss-injector/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.
diff --git a/packages/tailwindcss-injector/package.json b/packages/tailwindcss-injector/package.json
@@ -54,7 +54,7 @@
   },
   "dependencies": {
     "jiti": "^2.4.1",
-    "lilconfig": "^3.1.2",
+    "lilconfig": "^3.1.3",
     "postcss": "^8.4.49",
     "tailwindcss": "^3.4.15"
   }

diff --git a/packages/tailwindcss-injector/src/config.ts b/packages/tailwindcss-injector/src/config.ts
@@ -1,9 +1,9 @@
 import type { Config } from 'tailwindcss'
 import path from 'node:path'
 import process from 'node:process'
-import { defu } from 'defu'
 import { createJiti } from 'jiti'
 import { lilconfig } from 'lilconfig'
+import { defuOverrideArray } from './utils'
 
 const jiti = createJiti(import.meta.url)
 
@@ -15,7 +15,7 @@ export interface LoadTailwindcssConfigOptions {
 const moduleName = 'tailwind'
 
 export async function loadConfig(options?: Partial<LoadTailwindcssConfigOptions>) {
-  const { config, cwd } = defu<LoadTailwindcssConfigOptions, Partial<LoadTailwindcssConfigOptions>[]>(options, {
+  const { config, cwd } = defuOverrideArray<LoadTailwindcssConfigOptions, Partial<LoadTailwindcssConfigOptions>[]>(options as LoadTailwindcssConfigOptions, {
     cwd: process.cwd(),
   })
 

diff --git a/packages/tailwindcss-injector/src/postcss.ts b/packages/tailwindcss-injector/src/postcss.ts
@@ -2,12 +2,11 @@ import type { PluginCreator } from 'postcss'
 import type { Config } from 'tailwindcss'
 import type { Options } from './types'
 import process from 'node:process'
-import { defu } from 'defu'
 import postcss from 'postcss'
 import set from 'set-value'
 import tailwindcss from 'tailwindcss'
 import { loadConfig } from './config'
-import { removeFileExtension } from './utils'
+import { defuOverrideArray, removeFileExtension } from './utils'
 // function isObject(obj: any): obj is object {
 //   return typeof obj === 'object' && obj !== null
 // }
@@ -16,10 +15,10 @@ export type {
 }
 
 const creator: PluginCreator<Partial<Options>> = (options) => {
-  const { config, filter, directiveParams, cwd, extensions } = defu<Options, Options[]>(options, {
+  const { config, filter, directiveParams, cwd, extensions } = defuOverrideArray<Options, Options[]>(options as Options, {
     filter: () => true,
     config: undefined,
-    directiveParams: ['utilities'],
+    directiveParams: ['utilities', 'components'],
     cwd: process.cwd(),
     extensions: ['wxml', 'js', 'ts'],
   })
@@ -50,9 +49,9 @@ const creator: PluginCreator<Partial<Options>> = (options) => {
               })
             }
             else {
-              tailwindcssConfig = cfg ?? {
+              tailwindcssConfig = (cfg ?? {
                 content: [],
-              }
+              }) as Config
             }
 
             if (tailwindcssConfig && root.source?.input && root.source.input.file) {
@@ -70,7 +69,6 @@ const creator: PluginCreator<Partial<Options>> = (options) => {
         },
       },
     ],
-
   }
 }
 creator.postcss = true

diff --git a/packages/tailwindcss-injector/src/types.ts b/packages/tailwindcss-injector/src/types.ts
@@ -1,12 +1,13 @@
 import type postcss from 'postcss'
 import type { Config } from 'tailwindcss'
 
-export type InlineTailwindcssOptions = string | Config | undefined
+export type InlineTailwindcssOptions = string | Partial<Config> | undefined
 
 export interface Options {
   cwd: string
   filter: (input?: postcss.Input) => boolean
   config: InlineTailwindcssOptions | ((input?: postcss.Input) => InlineTailwindcssOptions)
   directiveParams: ('base' | 'components' | 'utilities' | 'variants')[]
   extensions: string[]
+
 }