chore: bump version

.changeset/unlucky-baboons-juggle.md

@@ -0,0 +1,5 @@
+---
+"tailwindcss-injector": patch
+---
+
+feat: add `insertAfterComments` for insertAfter tailwind atRule

packages/tailwindcss-injector/src/config.ts

@@ -12,6 +12,7 @@ function getDefaultConfig(): Options {
     extensions: ['wxml', 'js', 'ts'],
     // @import and @use (scss)
     insertAfterAtRulesNames: ['import', 'use'],
+    insertAfterComments: ['@import'],
   }
 }
 

packages/tailwindcss-injector/src/postcss.ts

@@ -7,8 +7,9 @@ import tailwindcss from 'tailwindcss'
 import { loadConfig } from 'tailwindcss-config'
 import { getConfig } from './config'
 import { postcssPlugin } from './constants'
-import { removeFileExtension } from './utils'
+import { regExpTest, removeFileExtension } from './utils'
 import { getDepFiles } from './wxml'
+
 // function isObject(obj: any): obj is object {
 //   return typeof obj === 'object' && obj !== null
 // }
@@ -17,7 +18,7 @@ export type {
 }
 
 const creator: PluginCreator<Partial<Options>> = (options) => {
-  const { config, filter, directiveParams, cwd, extensions, insertAfterAtRulesNames } = getConfig(options)
+  const { config, filter, directiveParams, cwd, extensions, insertAfterAtRulesNames, insertAfterComments } = getConfig(options)
 
   const extensionsGlob = `{${extensions.join(',')}}`
 
@@ -28,7 +29,9 @@ const creator: PluginCreator<Partial<Options>> = (options) => {
         postcssPlugin: `${postcssPlugin}:post`,
         async Once(root, helpers) {
           if (filter(root.source?.input)) {
-            const lastIndex = root.nodes.findLastIndex(x => x.type === 'atrule' && insertAfterAtRulesNames.includes(x.name))
+            const atruleLastIndex = root.nodes.findLastIndex(x => x.type === 'atrule' && insertAfterAtRulesNames.includes(x.name))
+            const commentLastIndex = root.nodes.findLastIndex(x => x.type === 'comment' && regExpTest(insertAfterComments, x.text))
+            const lastIndex = Math.max(atruleLastIndex, commentLastIndex)
             for (const params of directiveParams) {
               const node = root.nodes.find(x => x.type === 'atrule' && x.params === params)
               if (!node) {

packages/tailwindcss-injector/src/types.ts

@@ -10,4 +10,5 @@ export interface Options {
   directiveParams: ('base' | 'components' | 'utilities' | 'variants')[]
   extensions: string[]
   insertAfterAtRulesNames: string[]
+  insertAfterComments: (string | RegExp)[]
 }

packages/tailwindcss-injector/src/utils.ts

@@ -42,3 +42,27 @@ export function md5(input: crypto.BinaryLike) {
   hash.update(input) // 更新哈希内容
   return hash.digest('hex') // 返回哈希值
 }
+
+export function isRegexp(value: unknown) {
+  return Object.prototype.toString.call(value) === '[object RegExp]'
+}
+
+export function regExpTest(arr: (string | RegExp)[] = [], str: string) {
+  if (Array.isArray(arr)) {
+    for (const item of arr) {
+      if (typeof item === 'string') {
+        if (str.includes(item)) {
+          return true
+        }
+      }
+      else if (isRegexp(item)) {
+        item.lastIndex = 0
+        if (item.test(str)) {
+          return true
+        }
+      }
+    }
+    return false
+  }
+  throw new TypeError('paramater \'arr\' should be a Array of Regexp | String !')
+}

packages/tailwindcss-injector/test/__snapshots__/postcss.test.ts.snap

@@ -1112,3 +1112,34 @@ exports[`postcss > process case 8 1`] = `
 @use 'yyy';
 "
 `;
+
+exports[`postcss > process case 9 1`] = `
+"/*  @import  xxx.less  */
+.bg-\\[url\\(empty\\)\\] {
+    background-image: url(empty)
+}"
+`;
+
+exports[`postcss > process case 10 1`] = `
+"/*  @import  'xxx.less'  */
+.bg-\\[url\\(empty\\)\\] {
+    background-image: url(empty)
+}"
+`;
+
+exports[`postcss > process case 11 1`] = `
+"/*  @import  'xxx.less'  */
+@import 'xxx';
+.bg-\\[url\\(empty\\)\\]{
+    background-image: url(empty)
+}"
+`;
+
+exports[`postcss > process case 12 1`] = `
+"@import 'xxx';
+/*  @import  'xxx.less'  */
+.bg-\\[url\\(empty\\)\\]{
+    background-image: url(empty)
+}
+"
+`;

packages/tailwindcss-injector/test/postcss.test.ts

@@ -111,4 +111,32 @@ describe('postcss', () => {
     })
     expect(css).toMatchSnapshot()
   })
+
+  it('process case 9', async () => {
+    const { css } = await postcss([creator()]).process(`/*  @import  xxx.less  */`, {
+      from: path.resolve(__dirname, './fixtures/empty/index.wxss'),
+    })
+    expect(css).toMatchSnapshot()
+  })
+
+  it('process case 10', async () => {
+    const { css } = await postcss([creator()]).process(`/*  @import  'xxx.less'  */`, {
+      from: path.resolve(__dirname, './fixtures/empty/index.wxss'),
+    })
+    expect(css).toMatchSnapshot()
+  })
+
+  it('process case 11', async () => {
+    const { css } = await postcss([creator()]).process(`/*  @import  'xxx.less'  */\n@import 'xxx';`, {
+      from: path.resolve(__dirname, './fixtures/empty/index.wxss'),
+    })
+    expect(css).toMatchSnapshot()
+  })
+
+  it('process case 12', async () => {
+    const { css } = await postcss([creator()]).process(`@import 'xxx';\n/*  @import  'xxx.less'  */\n`, {
+      from: path.resolve(__dirname, './fixtures/empty/index.wxss'),
+    })
+    expect(css).toMatchSnapshot()
+  })
 })