diff --git a/README.ZH-CN.md b/README.ZH-CN.md index dd10a78..2916e69 100644 --- a/README.ZH-CN.md +++ b/README.ZH-CN.md @@ -7,7 +7,7 @@ * 🧩 它是一个 vue 的功能扩展，让你能够在 css 文件中使用 v-bind * 🌈 支持全平台打包工具构建 -* ⛰ 支持 css, sass, scss, less, stylus (目前暂时支持 css、scss、less) +* ⛰ 支持 css, sass, scss, less, stylus (目前暂不支持 sass) * ⚡ 轻量且快速 ## Core Process diff --git a/README.md b/README.md index 18d1aac..deaa072 100644 --- a/README.md +++ b/README.md @@ -7,7 +7,7 @@ English | [中文](https://github.com/baiwusanyu-c/unplugin-vue-cssvars/blob/mas * 🧩 It is a function extension of vue * 🌈 Compatible with multiple bundled platforms（vite、rollup、esbuild、webpack） -* ⛰ Support css, sass, scss, less, stylus (temporarily support css、scss、less) +* ⛰ Support css, sass, scss, less, stylus (temporarily not support sass) * ⚡ light and fast ## Core Process diff --git a/package.json b/package.json index d604e6f..6101246 100644 --- a/package.json +++ b/package.json @@ -93,6 +93,7 @@ "@types/gulp": "^4.0.10", "@types/less": "^3.0.3", "@types/node": "^18.0.0", + "@types/stylus": "^0.48.38", "@unplugin-vue-cssvars/build": "workspace:*", "@unplugin-vue-cssvars/core": "workspace:*", "@unplugin-vue-cssvars/entry": "workspace:*", @@ -119,6 +120,7 @@ "rollup": "^3.19.1", "sass": "^1.59.3", "simple-git-hooks": "^2.8.1", + "stylus": "^0.59.0", "tsup": "^6.6.3", "typescript": "4.9.4", "vite": "^4.0.1", diff --git a/packages/core/css/__test__/__snapshots__/pre-process-css.spec.ts.snap b/packages/core/css/__test__/__snapshots__/pre-process-css.spec.ts.snap index ac0a76c..d572319 100644 --- a/packages/core/css/__test__/__snapshots__/pre-process-css.spec.ts.snap +++ b/packages/core/css/__test__/__snapshots__/pre-process-css.spec.ts.snap @@ -6,6 +6,8 @@ exports[`pre process css > generateCSSCode: get less code 1`] = `"@import ./test exports[`pre process css > generateCSSCode: get scss code 1`] = `"@import ./test;#app div { color: v-bind(fooColor);}"`; +exports[`pre process css > generateCSSCode: get styl code 1`] = `"@import ./test;#app div { color: v-bind(stylColor);}"`; + exports[`pre process css > getCSSVarsCode: generate code 1`] = ` { "vBindCode": { @@ -76,6 +78,7 @@ div{color:v-bind(color)} exports[`pre process css > getCurFileContent: basic 1`] = ` " + #app { div { color: v-bind(fooColor); @@ -88,7 +91,8 @@ exports[`pre process css > getCurFileContent: basic 1`] = ` exports[`pre process css > getCurFileContent: no ; 1`] = ` " - #app { + +#app { div { color: v-bind(fooColor); } @@ -101,6 +105,7 @@ exports[`pre process css > getCurFileContent: no ; 1`] = ` exports[`pre process css > getCurFileContent: no start and end 1`] = ` "@import \\"./test\\" @use './test-use' +@require './test-require' #app { div { color: v-bind(fooColor); @@ -149,6 +154,18 @@ exports[`pre process css > setImportToCompileRes: @import 1`] = ` }" `; +exports[`pre process css > setImportToCompileRes: @require 1`] = ` +"@import \\"./test\\"; +#app { + div { + color: v-bind(fooColor); + } + .foo { + color: red + } +}" +`; + exports[`pre process css > setImportToCompileRes: @use 1`] = ` "@import \\"./test\\"; #app { @@ -174,7 +191,7 @@ exports[`pre process css > setImportToCompileRes: basic 1`] = ` }" `; -exports[`pre process css > setImportToCompileRes: no @use and @import 1`] = ` +exports[`pre process css > setImportToCompileRes: no @use and @import and @require 1`] = ` "#app { div { color: v-bind(fooColor); diff --git a/packages/core/css/__test__/foo.styl b/packages/core/css/__test__/foo.styl new file mode 100644 index 0000000..b73e986 --- /dev/null +++ b/packages/core/css/__test__/foo.styl @@ -0,0 +1,4 @@ +@import "./test"; +#app + div + color: v-bind(stylColor); diff --git a/packages/core/css/__test__/foo2.styl b/packages/core/css/__test__/foo2.styl new file mode 100644 index 0000000..ae60be3 --- /dev/null +++ b/packages/core/css/__test__/foo2.styl @@ -0,0 +1,4 @@ +@import "./test2"; +#app + div + color: v-bind(fooColor); \ No newline at end of file diff --git a/packages/core/css/__test__/pre-process-css.spec.ts b/packages/core/css/__test__/pre-process-css.spec.ts index 88e0eab..24d07f2 100644 --- a/packages/core/css/__test__/pre-process-css.spec.ts +++ b/packages/core/css/__test__/pre-process-css.spec.ts @@ -367,9 +367,32 @@ describe('pre process css', () => { expect([...importerTest2CSS!.importer][0]).toBe(mockPathTestCSS) }) + test('preProcessCSS: map path styl -> css or styl', () => { + const res = preProcessCSS({ rootDir: resolve('packages') }) + const mockPathFooSTYL = transformSymbol(`${resolve()}/core/css/__test__/foo.styl`) + const mockPathTestSTYL = transformSymbol(`${resolve()}/core/css/__test__/test.styl`) + const mockPathTest2CSS = transformSymbol(`${resolve()}/core/css/__test__/test2.css`) + // foo.styl -> test.css or test.styl ? -> test.styl + const importerFooSTYL = res.get(mockPathFooSTYL) + expect([...importerFooSTYL!.importer][0]).toBe(mockPathTestSTYL) + // foo.styl -> test.css or test.styl ? -> test.styl -> test2.css + const importerTestSTYL = res.get(mockPathTestSTYL) + expect([...importerTestSTYL!.importer][0]).toBe(mockPathTest2CSS) + + // foo2.styl -> test2.css + const mockPathFoo2STYL = transformSymbol(`${resolve()}/core/css/__test__/foo2.styl`) + const mockPathTestCSS = transformSymbol(`${resolve()}/core/css/__test__/test.css`) + const importerFoo2STYL = res.get(mockPathFoo2STYL) + expect([...importerFoo2STYL!.importer][0]).toBe(mockPathTest2CSS) + // test2.css -> test.css or test.styl ? -> test.css + const importerTest2CSS = res.get(mockPathTest2CSS) + expect([...importerTest2CSS!.importer][0]).toBe(mockPathTestCSS) + }) + test('getCurFileContent: basic', () => { const mockSassContent = '@import "./test";\n' + '@use \'./test-use\';\n' + + '@require \'./test-require\';\n' + '#app {\n' + ' div {\n' + ' color: v-bind(fooColor);\n' @@ -382,16 +405,19 @@ describe('pre process css', () => { const mockStatement = [ { type: 'import', path: '"./test"', start: 8, end: 16 }, { type: 'use', path: '\'./test-use\'', start: 23, end: 35 }, + { type: 'require', path: '\'./test-require\'', start: 46, end: 62 }, ] const res = getCurFileContent(mockSassContent, mockStatement as ImportStatement[]) expect(res.includes('import')).not.toBeTruthy() expect(res.includes('use')).not.toBeTruthy() + expect(res.includes('require')).not.toBeTruthy() expect(res).toMatchSnapshot() }) test('getCurFileContent: no ; ', () => { const mockSassContent = '@import "./test"\n' + '@use \'./test-use\'\n' + + '@require \'./test-require\'\n' + '#app {\n' + ' div {\n' + ' color: v-bind(fooColor);\n' @@ -404,16 +430,19 @@ describe('pre process css', () => { const mockStatement = [ { type: 'import', path: '"./test"', start: 8, end: 16 }, { type: 'use', path: '\'./test-use\'', start: 22, end: 35 }, + { type: 'require', path: '\'./test-require\'', start: 44, end: 60 }, ] const res = getCurFileContent(mockSassContent, mockStatement as ImportStatement[]) expect(res.includes('@import')).not.toBeTruthy() expect(res.includes('@use')).not.toBeTruthy() + expect(res.includes('@require')).not.toBeTruthy() expect(res).toMatchSnapshot() }) test('getCurFileContent: no start and end ', () => { const mockSassContent = '@import "./test"\n' + '@use \'./test-use\'\n' + + '@require \'./test-require\'\n' + '#app {\n' + ' div {\n' + ' color: v-bind(fooColor);\n' @@ -426,6 +455,7 @@ describe('pre process css', () => { const mockStatement = [ { type: 'import', path: '"./test"' }, { type: 'use', path: '\'./test-use\'' }, + { type: 'require', path: '\'./test-require\'' }, ] const res = getCurFileContent(mockSassContent, mockStatement as ImportStatement[]) expect(res).toMatchObject(mockSassContent) @@ -468,6 +498,7 @@ describe('pre process css', () => { const res = setImportToCompileRes(mockSassContent, mockStatement as ImportStatement[]) expect(res.includes('@import')).toBeTruthy() expect(res.includes('@use')).not.toBeTruthy() + expect(res.includes('@require')).not.toBeTruthy() expect(res).toMatchSnapshot() }) @@ -487,10 +518,11 @@ describe('pre process css', () => { const res = setImportToCompileRes(mockSassContent, mockStatement as ImportStatement[]) expect(res.includes('@import')).toBeTruthy() expect(res.includes('@use')).not.toBeTruthy() + expect(res.includes('@require')).not.toBeTruthy() expect(res).toMatchSnapshot() }) - test('setImportToCompileRes: no @use and @import', () => { + test('setImportToCompileRes: @require', () => { const mockSassContent = '#app {\n' + ' div {\n' + ' color: v-bind(fooColor);\n' @@ -501,12 +533,34 @@ describe('pre process css', () => { + '}' const mockStatement = [ + { type: 'require', path: '"./test"' }, + ] + const res = setImportToCompileRes(mockSassContent, mockStatement as ImportStatement[]) + expect(res.includes('@import')).toBeTruthy() + expect(res.includes('@use')).not.toBeTruthy() + expect(res.includes('@require')).not.toBeTruthy() + expect(res).toMatchSnapshot() + }) + + test('setImportToCompileRes: no @use and @import and @require', () => { + const mockSassContent = '#app {\n' + + ' div {\n' + + ' color: v-bind(fooColor);\n' + + ' }\n' + + ' .foo {\n' + + ' color: red\n' + + ' }\n' + + '}' + + const mockStatement = [ + { type: 'foo', path: '"./test"' }, { type: 'foo', path: '"./test"' }, { type: 'foo', path: '"./test"' }, ] const res = setImportToCompileRes(mockSassContent, mockStatement as ImportStatement[]) expect(res.includes('@import')).not.toBeTruthy() expect(res.includes('@use')).not.toBeTruthy() + expect(res.includes('@require')).not.toBeTruthy() expect(res).toMatchObject(mockSassContent) expect(res).toMatchSnapshot() }) @@ -535,14 +589,26 @@ describe('pre process css', () => { }) test('generateCSSCode: get less code', () => { - const mockSassContent = '@import "./test";\n' + const mockLessContent = '@import "./test";\n' + '#app div {\n' + ' color: v-bind(fooColor);\n' + '}' + '\n' const mockPath = `${resolve('packages')}/core/css/__test__/foo.less` const res = generateCSSCode(mockPath, '.less') - expect(delTransformSymbol(res)).toBe(delTransformSymbol(mockSassContent)) + expect(delTransformSymbol(res)).toBe(delTransformSymbol(mockLessContent)) + expect(delTransformSymbol(res)).toMatchSnapshot() + }) + + test('generateCSSCode: get styl code', () => { + const mockStylContent = '@import "./test";\n' + + '#app div {\n' + + ' color: v-bind(stylColor);\n' + + '}' + + '\n' + const mockPath = `${resolve('packages')}/core/css/__test__/foo.styl` + const res = generateCSSCode(mockPath, '.styl') + expect(delTransformSymbol(res)).toBe(delTransformSymbol(mockStylContent)) expect(delTransformSymbol(res)).toMatchSnapshot() }) }) diff --git a/packages/core/css/__test__/test.styl b/packages/core/css/__test__/test.styl new file mode 100644 index 0000000..7bf92e3 --- /dev/null +++ b/packages/core/css/__test__/test.styl @@ -0,0 +1,3 @@ +@import "./test2"; +.styl + color: v-bind(color); diff --git a/packages/core/css/pre-process-css.ts b/packages/core/css/pre-process-css.ts index f7c4dc6..21ca23c 100644 --- a/packages/core/css/pre-process-css.ts +++ b/packages/core/css/pre-process-css.ts @@ -15,6 +15,7 @@ import { import MagicString from 'magic-string' import sass from 'sass' import less from 'less' +import stylus from 'stylus' import { parseImports } from '../parser/parser-import' import type { ImportStatement } from '../parser/parser-import' import type { ICSSFileMap, SearchGlobOptions } from '../types' @@ -228,9 +229,18 @@ export function generateCSSCode(path: string, suffix: string) { res = output ? setImportToCompileRes(output.css, parseLessImporter.imports) : '' }) break - case `.${SUPPORT_FILE.STYLUS}`: // stylus - // ⭐TODO: 支持 stylus - res = '' + case `.${SUPPORT_FILE.STYL}`: // stylus + // TODO unit test + // eslint-disable-next-line no-case-declarations + const parseStylusImporter = parseImports(code) + // eslint-disable-next-line no-case-declarations + const codeStylusNoImporter = getCurFileContent(code, parseStylusImporter.imports) + stylus.render(codeStylusNoImporter, {}, (error: Error, css: string) => { + if (error) + throw error + + res = css ? setImportToCompileRes(css, parseStylusImporter.imports) : '' + }) break default: res = code @@ -249,6 +259,7 @@ export function getCurFileContent(content: string, parseRes: ImportStatement[]) mgcStr.remove(value.start, value.end) mgcStr.replaceAll('@import', '') mgcStr.replaceAll('@use', '') + mgcStr.replaceAll('@require', '') } }) return mgcStr.toString() @@ -257,7 +268,7 @@ export function getCurFileContent(content: string, parseRes: ImportStatement[]) export function setImportToCompileRes(content: string, parseRes: ImportStatement[]) { const mgcStr = new MagicString(content) parseRes.forEach((value) => { - if (value.type === 'import' || value.type === 'use') + if (value.type === 'import' || value.type === 'use' || value.type === 'require') mgcStr.prepend(`@import ${value.path};\n`) }) return mgcStr.toString() diff --git a/packages/core/css/process-css.ts b/packages/core/css/process-css.ts index 9dc9f99..d604886 100644 --- a/packages/core/css/process-css.ts +++ b/packages/core/css/process-css.ts @@ -1,6 +1,6 @@ import path from 'path' import * as csstree from 'css-tree' -import { completeSuffix, transformSymbol } from '@unplugin-vue-cssvars/utils' +import { SUPPORT_FILE, completeSuffix, transformSymbol } from '@unplugin-vue-cssvars/utils' import { walkCSSTree } from './pre-process-css' import type { ICSSFile, ICSSFileMap } from '../types' import type { SFCDescriptor } from '@vue/compiler-sfc' @@ -35,9 +35,10 @@ export const createCSSModule = (descriptor: SFCDescriptor, id: string, cssFiles: const cssAst = csstree.parse(content) // 根据其 ast，获取 @import 信息 walkCSSTree(cssAst, (importer) => { + const lang = descriptor.styles[i].lang === SUPPORT_FILE.STYLUS ? SUPPORT_FILE.STYL : descriptor.styles[i].lang // 添加后缀 // sfc中规则：如果@import 指定了后缀，则根据后缀，否则根据当前 script 标签的 lang 属性（默认css） - let key = completeSuffix(transformSymbol(path.resolve(path.parse(id).dir, importer)), descriptor.styles[i].lang) + let key = completeSuffix(transformSymbol(path.resolve(path.parse(id).dir, importer)), lang) // 如果 .scss 的 import 不存在，则用 css 的 if (!cssFiles.get(key)) key = completeSuffix(transformSymbol(path.resolve(path.parse(id).dir, importer))) diff --git a/packages/core/parser/__test__/parser-import.spec.ts b/packages/core/parser/__test__/parser-import.spec.ts index 612266c..6500350 100644 --- a/packages/core/parser/__test__/parser-import.spec.ts +++ b/packages/core/parser/__test__/parser-import.spec.ts @@ -17,6 +17,11 @@ describe('parse import', () => { expect(getCurState()).toBe(ParserState.AtUse) }) + test('parseImports: At -> AtRequire', () => { + const { getCurState } = parseImports('@r') + expect(getCurState()).toBe(ParserState.AtRequire) + }) + test('parseImports: At -> Initial', () => { const { getCurState } = parseImports('@a') expect(getCurState()).toBe(ParserState.Initial) @@ -32,6 +37,11 @@ describe('parse import', () => { expect(getCurState()).toBe(ParserState.Initial) }) + test('parseImports: AtRequire -> Initial', () => { + const { getCurState } = parseImports('@require;') + expect(getCurState()).toBe(ParserState.Initial) + }) + test('parseImports: AtUse -> StringLiteral', () => { const { getCurState, getCurImport } = parseImports('@use "') expect(getCurState()).toBe(ParserState.StringLiteral) @@ -40,6 +50,10 @@ describe('parse import', () => { const { getCurState: getCurState1, getCurImport: getCurImport1 } = parseImports('@use \'') expect(getCurState1()).toBe(ParserState.StringLiteral) expect(getCurImport1()).toMatchObject({ type: 'use', path: '\'', start: 5 }) + + const { getCurState: getCurState2, getCurImport: getCurRequire1 } = parseImports('@require \'') + expect(getCurState2()).toBe(ParserState.StringLiteral) + expect(getCurRequire1()).toMatchObject({ type: 'require', path: '\'', start: 9 }) }) test('parseImports: StringLiteral -> concat string', () => { @@ -50,6 +64,10 @@ describe('parse import', () => { const { getCurState: getCurState1, getCurImport: getCurImport1 } = parseImports('@use "test') expect(getCurState1()).toBe(ParserState.StringLiteral) expect(getCurImport1()).toMatchObject({ type: 'use', path: '"test', start: 5 }) + + const { getCurState: getCurState2, getCurImport: getCurRequire1 } = parseImports('@require "test') + expect(getCurState2()).toBe(ParserState.StringLiteral) + expect(getCurRequire1()).toMatchObject({ type: 'require', path: '"test', start: 9 }) }) test('parseImports: AtImport -> end', () => { @@ -88,6 +106,24 @@ describe('parse import', () => { expect(getCurState3()).toBe(ParserState.AtImport) expect(getCurImport3()).toMatchObject({ type: 'import', path: '"test"', start: 8 }) expect(imports3.length).toBe(0) + + const { + imports: imports5, + getCurState: getCurState5, + getCurImport: getCurImport5, + } = parseImports('@require "test";') + expect(getCurState5()).toBe(ParserState.Initial) + expect(getCurImport5()).toBe(undefined) + expect(imports5).toMatchObject([{ type: 'require', path: '"test"', start: 9, end: 15 }]) + + const { + imports: imports6, + getCurState: getCurState6, + getCurImport: getCurImport6, + } = parseImports('@require "test"') + expect(getCurState6()).toBe(ParserState.AtRequire) + expect(getCurImport6()).toMatchObject({ type: 'require', path: '"test"', start: 9 }) + expect(imports6.length).toBe(0) }) test('parseImports: basic', () => { @@ -97,6 +133,7 @@ describe('parse import', () => { getCurImport, } = parseImports('@import "./test";\n' + '@use \'./test-use\';\n' + + '@require \'./test-require\';\n' + '#app {\n' + ' div {\n' + ' color: v-bind(fooColor);\n' @@ -110,6 +147,7 @@ describe('parse import', () => { expect(imports).toMatchObject([ { type: 'import', path: '"./test"', start: 8, end: 16 }, { type: 'use', path: '\'./test-use\'', start: 23, end: 35 }, + { type: 'require', path: '\'./test-require\'', start: 46, end: 62 }, ]) }) }) diff --git a/packages/core/parser/parser-import.ts b/packages/core/parser/parser-import.ts index a64fda2..e182e1e 100644 --- a/packages/core/parser/parser-import.ts +++ b/packages/core/parser/parser-import.ts @@ -3,11 +3,12 @@ export enum ParserState { At, AtImport, AtUse, + AtRequire, StringLiteral, } export interface ImportStatement { - type: 'import' | 'use' + type: 'import' | 'use' | 'require' path: string start?: number end?: number @@ -40,12 +41,17 @@ export function parseImports(source: string): { state = ParserState.AtUse currentImport = { type: 'use', path: '' } i++ // skip over "u" to next character + } else if (char === 'r') { + state = ParserState.AtRequire + currentImport = { type: 'require', path: '' } + i++ // skip over "u" to next character } else { state = ParserState.Initial } break case ParserState.AtImport: case ParserState.AtUse: + case ParserState.AtRequire: if (char === "'" || char === '"') { state = ParserState.StringLiteral currentImport!.start = i @@ -61,10 +67,16 @@ export function parseImports(source: string): { break case ParserState.StringLiteral: if (char === "'" || char === '"') { - if (currentImport!.type === 'import' || currentImport!.type === 'use') { - state = currentImport!.type === 'import' ? ParserState.AtImport : ParserState.AtUse - currentImport!.path += char - } + if (currentImport!.type === 'import') + state = ParserState.AtImport + + if (currentImport!.type === 'use') + state = ParserState.AtUse + + if (currentImport!.type === 'require') + state = ParserState.AtRequire + + currentImport!.path += char } else { currentImport!.path += char } break diff --git a/play/src/App.vue b/play/src/App.vue index c197798..3da8ab2 100644 --- a/play/src/App.vue +++ b/play/src/App.vue @@ -6,6 +6,7 @@ const appAsd = () => 'red' const fooColor = appAsd() const appTheme2 = 'blue' const lessColor = 'greenyellow' +const stylColor = '#fd1d7c' const appTheme3 = ref('red') const appTheme4 = reactive({ color: 'red' }) const appTheme5 = { color: 'red' } @@ -62,18 +63,20 @@ export default { --> - diff --git a/play/src/assets/styuls/foo.styl b/play/src/assets/styuls/foo.styl new file mode 100644 index 0000000..fc8f82b --- /dev/null +++ b/play/src/assets/styuls/foo.styl @@ -0,0 +1,4 @@ +@import "./test.styl"; +#app + div + color: v-bind(stylColor); diff --git a/play/src/assets/styuls/test.styl b/play/src/assets/styuls/test.styl new file mode 100644 index 0000000..eaf6608 --- /dev/null +++ b/play/src/assets/styuls/test.styl @@ -0,0 +1,3 @@ +.styl { + color: v-bind(color); +} diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index fde3c5a..f39d027 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -15,6 +15,7 @@ importers: '@types/gulp': ^4.0.10 '@types/less': ^3.0.3 '@types/node': ^18.0.0 + '@types/stylus': ^0.48.38 '@unplugin-vue-cssvars/build': workspace:* '@unplugin-vue-cssvars/core': workspace:* '@unplugin-vue-cssvars/entry': workspace:* @@ -46,6 +47,7 @@ importers: rollup: ^3.19.1 sass: ^1.59.3 simple-git-hooks: ^2.8.1 + stylus: ^0.59.0 tsup: ^6.6.3 typescript: 4.9.4 unplugin: ^0.9.6 @@ -73,6 +75,7 @@ importers: '@types/gulp': 4.0.10 '@types/less': 3.0.3 '@types/node': 18.7.15 + '@types/stylus': 0.48.38 '@unplugin-vue-cssvars/build': link:build '@unplugin-vue-cssvars/core': link:packages/core '@unplugin-vue-cssvars/entry': link:packages/entry @@ -98,10 +101,11 @@ importers: rollup: 3.19.1 sass: 1.59.3 simple-git-hooks: 2.8.1 + stylus: 0.59.0 tsup: 6.6.3_typescript@4.9.4 typescript: 4.9.4 - vite: 4.1.4_jp4l2y3pfqzqdofvyz6xrri774 - vitest: 0.29.2_anwntic3nwwwdryezy23khopjq + vite: 4.1.4_vyll2tt6lalhormvvgqifwtxnm + vitest: 0.29.2_aefw73767vu5gm4vb3lzov2ebu build: specifiers: @@ -148,6 +152,10 @@ importers: packages: + /@adobe/css-tools/4.2.0: + resolution: {integrity: sha512-E09FiIft46CmH5Qnjb0wsW54/YQd69LsxeKUOWawmws1XWvyFGURnAChH0mlr7YPFR1ofwvUQfcL0J3lMxXqPA==} + dev: true + /@babel/code-frame/7.18.6: resolution: {integrity: sha512-TDCmlK5eOvH+eH7cdAFlNXeVJqWIQ7gW9tY1GJIpUtFb6CmjVyq2VM3u71bOyR8CRihcCgMUYoDNyLXao3+70Q==} engines: {node: '>=6.9.0'} @@ -949,6 +957,12 @@ packages: resolution: {integrity: sha512-21cFJr9z3g5dW8B0CVI9g2O9beqaThGQ6ZFBqHfwhzLDKUxaqTIy3vnfah/UPkfOiF2pLq+tGz+W8RyCskuslw==} dev: true + /@types/stylus/0.48.38: + resolution: {integrity: sha512-B5otJekvD6XM8iTrnO6e2twoTY2tKL9VkL/57/2Lo4tv3EatbCaufdi68VVtn/h4yjO+HVvYEyrNQd0Lzj6riw==} + dependencies: + '@types/node': 18.7.15 + dev: true + /@types/undertaker-registry/1.0.1: resolution: {integrity: sha512-Z4TYuEKn9+RbNVk1Ll2SS4x1JeLHecolIbM/a8gveaHsW0Hr+RQMraZACwTO2VD7JvepgA6UO1A1VrbktQrIbQ==} dev: true @@ -1118,7 +1132,7 @@ packages: vite: ^4.0.0 vue: ^3.2.25 dependencies: - vite: 4.1.4_jp4l2y3pfqzqdofvyz6xrri774 + vite: 4.1.4_vyll2tt6lalhormvvgqifwtxnm vue: 3.2.47 dev: true @@ -1130,7 +1144,7 @@ packages: c8: 7.13.0 picocolors: 1.0.0 std-env: 3.3.2 - vitest: 0.29.2_anwntic3nwwwdryezy23khopjq + vitest: 0.29.2_aefw73767vu5gm4vb3lzov2ebu dev: true /@vitest/expect/0.29.2: @@ -6687,7 +6701,6 @@ packages: /sax/1.2.4: resolution: {integrity: sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw==} dev: true - optional: true /saxes/6.0.0: resolution: {integrity: sha512-xAg7SOnEhrm5zI3puOOKyy1OMcMlIJZYNJY7xLBwSze0UjhPLnWfj2GF2EpT0jmzaJKIWKHLsaSSajf35bcYnA==} @@ -6920,6 +6933,11 @@ packages: resolution: {integrity: sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==} engines: {node: '>=0.10.0'} + /source-map/0.7.4: + resolution: {integrity: sha512-l3BikUxvPOcn5E74dZiq5BGsTb5yEwhaTSzccU6t4sDOH8NWJCstKO5QT2CvtFoK6F0saL7p9xHAqHOlCPJygA==} + engines: {node: '>= 8'} + dev: true + /source-map/0.8.0-beta.0: resolution: {integrity: sha512-2ymg6oRBpebeZi9UUNsgQ89bhx01TcTkmNTGnNO88imTmbSgy4nfujrgVEFKWpMTEGA11EDkTt7mqObTPdigIA==} engines: {node: '>= 8'} @@ -7155,6 +7173,19 @@ packages: acorn: 8.8.2 dev: true + /stylus/0.59.0: + resolution: {integrity: sha512-lQ9w/XIOH5ZHVNuNbWW8D822r+/wBSO/d6XvtyHLF7LW4KaCIDeVbvn5DF8fGCJAUCwVhVi/h6J0NUcnylUEjg==} + hasBin: true + dependencies: + '@adobe/css-tools': 4.2.0 + debug: 4.3.4 + glob: 7.2.3 + sax: 1.2.4 + source-map: 0.7.4 + transitivePeerDependencies: + - supports-color + dev: true + /sucrase/3.25.0: resolution: {integrity: sha512-WxTtwEYXSmZArPGStGBicyRsg5TBEFhT5b7N+tF+zauImP0Acy+CoUK0/byJ8JNPK/5lbpWIVuFagI4+0l85QQ==} engines: {node: '>=8'} @@ -7786,7 +7817,7 @@ packages: replace-ext: 1.0.1 dev: true - /vite-node/0.29.2_jp4l2y3pfqzqdofvyz6xrri774: + /vite-node/0.29.2_vyll2tt6lalhormvvgqifwtxnm: resolution: {integrity: sha512-5oe1z6wzI3gkvc4yOBbDBbgpiWiApvuN4P55E8OI131JGrSuo4X3SOZrNmZYo4R8Zkze/dhi572blX0zc+6SdA==} engines: {node: '>=v14.16.0'} hasBin: true @@ -7796,7 +7827,7 @@ packages: mlly: 1.1.1 pathe: 1.1.0 picocolors: 1.0.0 - vite: 4.1.4_jp4l2y3pfqzqdofvyz6xrri774 + vite: 4.1.4_vyll2tt6lalhormvvgqifwtxnm transitivePeerDependencies: - '@types/node' - less @@ -7807,7 +7838,7 @@ packages: - terser dev: true - /vite/4.1.4_jp4l2y3pfqzqdofvyz6xrri774: + /vite/4.1.4_vyll2tt6lalhormvvgqifwtxnm: resolution: {integrity: sha512-3knk/HsbSTKEin43zHu7jTwYWv81f8kgAL99G5NWBcA1LKvtvcVAC4JjBH1arBunO9kQka+1oGbrMKOjk4ZrBg==} engines: {node: ^14.18.0 || >=16.0.0} hasBin: true @@ -7839,11 +7870,12 @@ packages: resolve: 1.22.1 rollup: 3.19.1 sass: 1.59.3 + stylus: 0.59.0 optionalDependencies: fsevents: 2.3.2 dev: true - /vitest/0.29.2_anwntic3nwwwdryezy23khopjq: + /vitest/0.29.2_aefw73767vu5gm4vb3lzov2ebu: resolution: {integrity: sha512-ydK9IGbAvoY8wkg29DQ4ivcVviCaUi3ivuPKfZEVddMTenFHUfB8EEDXQV8+RasEk1ACFLgMUqAaDuQ/Nk+mQA==} engines: {node: '>=v14.16.0'} hasBin: true @@ -7888,8 +7920,8 @@ packages: tinybench: 2.4.0 tinypool: 0.3.1 tinyspy: 1.1.1 - vite: 4.1.4_jp4l2y3pfqzqdofvyz6xrri774 - vite-node: 0.29.2_jp4l2y3pfqzqdofvyz6xrri774 + vite: 4.1.4_vyll2tt6lalhormvvgqifwtxnm + vite-node: 0.29.2_vyll2tt6lalhormvvgqifwtxnm why-is-node-running: 2.2.2 transitivePeerDependencies: - less diff --git a/utils/constant.ts b/utils/constant.ts index f27a1e6..2b3edef 100644 --- a/utils/constant.ts +++ b/utils/constant.ts @@ -1,5 +1,5 @@ export const NAME = 'unplugin-vue-cssvars' -export const SUPPORT_FILE_LIST = ['**/**.css', '**/**.less', '**/**.scss', '**/**.sass', '**/**.stylus'] +export const SUPPORT_FILE_LIST = ['**/**.css', '**/**.less', '**/**.scss', '**/**.sass', '**/**.styl'] export const FG_IGNORE_LIST = ['**/node_modules/**', '**/dist/**', '**/.git/**'] export const SUPPORT_FILE = { CSS: 'css', @@ -7,6 +7,7 @@ export const SUPPORT_FILE = { SASS: 'sass', SCSS: 'scss', STYLUS: 'stylus', + STYL: 'styl', } export const DEFAULT_INCLUDE_REG = [/\.vue$/] export const DEFAULT_EXCLUDE_REG = [/[\\/]node_modules[\\/]/, /[\\/]\.git[\\/]/, /[\\/]\.dist[\\/]/]