diff --git a/example/react-sass/src/App.module.scss b/example/react-sass/src/App.module.scss index 175fcc1..2fa61f2 100644 --- a/example/react-sass/src/App.module.scss +++ b/example/react-sass/src/App.module.scss @@ -20,3 +20,9 @@ $green: #00c851; .test { @apply px-1.5; } + +@supports (--num: 1.5) { + .myclass { + display: block; + } +} diff --git a/example/react-sass/src/App.module.scss.d.ts b/example/react-sass/src/App.module.scss.d.ts index b6be49d..ceacf7a 100644 --- a/example/react-sass/src/App.module.scss.d.ts +++ b/example/react-sass/src/App.module.scss.d.ts @@ -5,5 +5,6 @@ declare const classNames: typeof globalClassNames & { readonly active: 'active' readonly input: 'input' readonly test: 'test' + readonly myclass: 'myclass' } export default classNames diff --git a/example/react-sass/src/App.tsx b/example/react-sass/src/App.tsx index 8e02aaf..51575ac 100644 --- a/example/react-sass/src/App.tsx +++ b/example/react-sass/src/App.tsx @@ -2,6 +2,7 @@ import { FC } from 'react' import styles from './App.module.scss' import { classNamesFunc } from 'classnames-generics' import { User } from './User/User' +import styles2 from './exclude/Exclude.module.scss' const classNames = classNamesFunc() type Props = { diff --git a/example/react-sass/src/exclude/Exclude.module.scss b/example/react-sass/src/exclude/Exclude.module.scss new file mode 100644 index 0000000..d0fdae2 --- /dev/null +++ b/example/react-sass/src/exclude/Exclude.module.scss @@ -0,0 +1,5 @@ +.exclude { + &.active { + background-color: red; + } +} diff --git a/example/react-sass/vite.config.ts b/example/react-sass/vite.config.ts index 0d8ec29..452d75f 100644 --- a/example/react-sass/vite.config.ts +++ b/example/react-sass/vite.config.ts @@ -42,6 +42,7 @@ export default defineConfig({ outputFilePath: path.resolve(__dirname, './src/@types/style.d.ts'), }, prettierFilePath: path.resolve('../../.prettierrc.cjs'), + excludePath: ['./src/exclude/*'], esmExport: true, // typeName: { // replacement: (fileName) => { diff --git a/package.json b/package.json index 3413d52..a267984 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "vite-plugin-sass-dts", - "version": "1.3.24", + "version": "1.3.25", "engines": { "node": ">=20" }, diff --git a/src/extract.ts b/src/extract.ts index 61cddda..0fd16bb 100644 --- a/src/extract.ts +++ b/src/extract.ts @@ -3,6 +3,7 @@ import type { CSSJSObj, GetParseCaseFunction } from './type' // [Note]: @apply for Tailwind const importRe = new RegExp(/^(@import|@apply)/) +const supportRe = new RegExp(/^(@support)/) const keySeparatorRe = new RegExp(/(?=[\s.:[\]><+,()])/g) export const extractClassNameKeys = ( @@ -12,14 +13,18 @@ export const extractClassNameKeys = ( ): Map => { return Object.entries(obj).reduce>( (curr, [key, value]) => { + console.log(key, value) if (importRe.test(key)) return curr const splitKeys = key.split(keySeparatorRe) - for (const splitKey of splitKeys) { - if (parentKey === ':export' || splitKey.startsWith('.')) { - if (toParseCase) { - curr.set(toParseCase(splitKey.replace('.', '').trim()), true) - } else { - curr.set(splitKey.replace('.', '').trim(), true) + + if (!supportRe.test(key)) { + for (const splitKey of splitKeys) { + if (parentKey === ':export' || splitKey.startsWith('.')) { + if (toParseCase) { + curr.set(toParseCase(splitKey.replace('.', '').trim()), true) + } else { + curr.set(splitKey.replace('.', '').trim(), true) + } } } } diff --git a/src/index.ts b/src/index.ts index aa70d88..538163b 100644 --- a/src/index.ts +++ b/src/index.ts @@ -1,17 +1,19 @@ import prettier from 'prettier' const { resolveConfig } = prettier -import type { Plugin as VitePlugin } from 'vite' +import { Plugin as VitePlugin, createFilter } from 'vite' import { main } from './main' import type { FinalConfig, PluginOptions } from './type' import { isCSSModuleRequest } from './util' export default function Plugin(option: PluginOptions = {}): VitePlugin { let cacheConfig: FinalConfig + let filter: ReturnType const enabledMode = option.enabledMode || ['development'] return { name: 'vite-plugin-sass-dts', async configResolved(config) { + filter = createFilter(undefined, option.excludePath) const prettierOptions = (await resolveConfig(option.prettierFilePath || config.root)) || {} cacheConfig = { @@ -20,7 +22,7 @@ export default function Plugin(option: PluginOptions = {}): VitePlugin { } }, handleHotUpdate(context) { - if (!isCSSModuleRequest(context.file)) return + if (!isCSSModuleRequest(context.file) || !filter(context.file)) return main(context.file, cacheConfig, option) return }, @@ -28,7 +30,8 @@ export default function Plugin(option: PluginOptions = {}): VitePlugin { const fileName = id.replace(/(?:\?|&)(used|direct|inline|vue).*/, '') if ( !enabledMode.includes(cacheConfig.env.MODE) || - !isCSSModuleRequest(fileName) + !isCSSModuleRequest(fileName) || + !filter(id) ) { // returning undefined will signal vite that the file has not been transformed // avoiding warnings about source maps not being generated @@ -40,7 +43,7 @@ export default function Plugin(option: PluginOptions = {}): VitePlugin { ) }, watchChange(id) { - if (isCSSModuleRequest(id)) { + if (isCSSModuleRequest(id) && filter(id)) { this.addWatchFile(id) } }, diff --git a/src/type.ts b/src/type.ts index bf4b0dc..71f816e 100644 --- a/src/type.ts +++ b/src/type.ts @@ -14,6 +14,7 @@ export type PluginOptions = { esmExport?: boolean outputDir?: string sourceDir?: string + excludePath?: string | RegExp | Array prettierFilePath?: string }