diff --git a/.changeset/unlucky-baboons-juggle.md b/.changeset/unlucky-baboons-juggle.md new file mode 100644 index 000000000..0eeca59e4 --- /dev/null +++ b/.changeset/unlucky-baboons-juggle.md @@ -0,0 +1,5 @@ +--- +"tailwindcss-injector": patch +--- + +feat: add `insertAfterComments` for insertAfter tailwind atRule diff --git a/packages/tailwindcss-injector/src/config.ts b/packages/tailwindcss-injector/src/config.ts index 1f564c9ab..14130829b 100644 --- a/packages/tailwindcss-injector/src/config.ts +++ b/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'], } } diff --git a/packages/tailwindcss-injector/src/postcss.ts b/packages/tailwindcss-injector/src/postcss.ts index d62230440..00afa2ce4 100644 --- a/packages/tailwindcss-injector/src/postcss.ts +++ b/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> = (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> = (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) { diff --git a/packages/tailwindcss-injector/src/types.ts b/packages/tailwindcss-injector/src/types.ts index ae3fc72e5..4f7eea50b 100644 --- a/packages/tailwindcss-injector/src/types.ts +++ b/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)[] } diff --git a/packages/tailwindcss-injector/src/utils.ts b/packages/tailwindcss-injector/src/utils.ts index 59f87390d..2f7477791 100644 --- a/packages/tailwindcss-injector/src/utils.ts +++ b/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 !') +} diff --git a/packages/tailwindcss-injector/test/__snapshots__/postcss.test.ts.snap b/packages/tailwindcss-injector/test/__snapshots__/postcss.test.ts.snap index e65272ba9..968c42743 100644 --- a/packages/tailwindcss-injector/test/__snapshots__/postcss.test.ts.snap +++ b/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) +} +" +`; diff --git a/packages/tailwindcss-injector/test/postcss.test.ts b/packages/tailwindcss-injector/test/postcss.test.ts index ee8590515..fbe97ce1e 100644 --- a/packages/tailwindcss-injector/test/postcss.test.ts +++ b/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() + }) })