feat(core)!: always apply default extractor (#2472)

unocss · Apr 9, 2023 · 3af1e6e · 3af1e6e
1 parent aae131b
commit 3af1e6e
Show file tree

Hide file tree

Showing 11 changed files with 63 additions and 26 deletions.
diff --git a/docs/config/extractors.md b/docs/config/extractors.md
@@ -2,8 +2,34 @@
 
 Extractors are used to extract the usage of utilities from your source code.
 
-By default [extractorSplit](https://github.com/unocss/unocss/blob/main/packages/core/src/extractors/split.ts) will be applied, which split the source code into tokens and directly feed to the engine.
+```ts
+// unocss.config.ts
+import { defineConfig } from '@unocss/core'
 
-You can also provide your own extractors to extract the usage of utilities from your source code.
+export default defineConfig({
+  extractors: [
+    // your extractors
+  ],
+})
+```
+
+By default [extractorSplit](https://github.com/unocss/unocss/blob/main/packages/core/src/extractors/split.ts) will always be applied, which split the source code into tokens and directly feed to the engine.
+
+To override the default extractors, you can use `extractorDefault` option.
+
+```ts
+// unocss.config.ts
+import { defineConfig } from '@unocss/core'
+
+export default defineConfig({
+  extractors: [
+    // your extractors
+  ],
+  // disable the default extractor
+  extractorDefault: false,
+  // override the default extractor with your own
+  extractorDefault: myExtractor,
+})
+```
 
 For example, you could check how we implement the [pug extractor](https://github.com/unocss/unocss/tree/main/packages/extractor-pug) or the [attributify extractor](https://github.com/unocss/unocss/blob/main/packages/preset-attributify/src/extractor.ts).
diff --git a/docs/extractors/pug.md b/docs/extractors/pug.md
@@ -25,13 +25,11 @@ Pug extractor for UnoCSS: `@unocss/extractor-pug`.
 
 ```ts
 import { defineConfig } from 'unocss'
-import { extractorSplit } from '@unocss/core'
 import extractorPug from '@unocss/extractor-pug'
 
 export default defineConfig({
   extractors: [
     extractorPug(),
-    extractorSplit,
   ],
 })
 ```
diff --git a/docs/integrations/vite.md b/docs/integrations/vite.md
@@ -215,6 +215,7 @@ You can use simple rules with `class:`, for example `class:bg-red-500={foo}` or
 import { sveltekit } from '@sveltejs/kit/vite'
 import UnoCSS from 'unocss/vite'
 import { extractorSvelte } from '@unocss/core'
+
 /** @type {import('vite').UserConfig} */
 const config = {
   plugins: [

diff --git a/examples/vite-pug/vite.config.ts b/examples/vite-pug/vite.config.ts
@@ -2,7 +2,6 @@ import { defineConfig } from 'vite'
 import Vue from '@vitejs/plugin-vue'
 import Inspect from 'vite-plugin-inspect'
 import UnoCSS from '@unocss/vite'
-import { extractorSplit } from '@unocss/core'
 import extractorPug from '@unocss/extractor-pug'
 import presetUno from '@unocss/preset-uno'
 
@@ -14,7 +13,6 @@ export default defineConfig({
         presetUno(),
       ],
       extractors: [
-        extractorSplit,
         extractorPug(),
       ],
     }),

diff --git a/packages/core/src/config.ts b/packages/core/src/config.ts
@@ -57,8 +57,12 @@ export function resolveConfig<Theme extends {} = {}>(
   }
 
   const extractors = mergePresets('extractors')
-  if (!extractors.length)
-    extractors.push(extractorSplit)
+  let extractorDefault = [...sortedPresets, config].reverse().find(i => i.extractorDefault !== undefined)?.extractorDefault
+  if (extractorDefault === undefined)
+    extractorDefault = extractorSplit
+  if (extractorDefault && !extractors.includes(extractorDefault))
+    extractors.unshift(extractorDefault)
+
   extractors.sort((a, b) => (a.order || 0) - (b.order || 0))
 
   const rules = mergePresets('rules')

diff --git a/packages/core/src/extractors/index.ts b/packages/core/src/extractors/index.ts
@@ -1,2 +1,9 @@
-export { extractorSplit, arbitraryPropertyRE, quotedArbitraryValuesRE, defaultSplitRE, splitWithVariantGroupRE } from './split'
+export {
+  extractorSplit,
+  extractorSplit as extractorDefault,
+  arbitraryPropertyRE,
+  quotedArbitraryValuesRE,
+  defaultSplitRE,
+  splitWithVariantGroupRE,
+} from './split'
 export { extractorSvelte } from './svelte'
diff --git a/packages/core/src/types.ts b/packages/core/src/types.ts
@@ -351,6 +351,21 @@ export interface ConfigBase<Theme extends {} = {}> {
    */
   extractors?: Extractor[]
 
+  /**
+   * Default extractor that are always applied.
+   * By default it split the source code by whitespace and quotes.
+   *
+   * It maybe be replaced by preset or user config,
+   * only one default extractor can be presented,
+   * later one will override the previous one.
+   *
+   * Pass `null` or `false` to disable the default extractor.
+   *
+   * @see https://github.com/antfu/unocss/blob/main/packages/core/src/extractors/split.ts
+   * @default import('@unocss/core').defaultExtractor
+   */
+  extractorDefault?: Extractor | null | false
+
   /**
    * Raw CSS injections.
    */

diff --git a/packages/extractor-pug/README.md b/packages/extractor-pug/README.md
@@ -10,12 +10,10 @@ npm i -D @unocss/extractor-pug
 
 ```ts
 import extractorPug from '@unocss/extractor-pug'
-import { extractorSplit } from '@unocss/core'
 
 UnoCSS({
   extractors: [
     extractorPug(),
-    extractorSplit,
   ],
 })
 ```

diff --git a/packages/preset-attributify/src/index.ts b/packages/preset-attributify/src/index.ts
@@ -1,5 +1,4 @@
 import type { Preset } from '@unocss/core'
-import { extractorSplit } from '@unocss/core'
 import { autocompleteExtractorAttributify } from './autocomplete'
 import { defaultIgnoreAttributes, extractorAttributify } from './extractor'
 import type { AttributifyOptions } from './types'
@@ -28,9 +27,6 @@ function preset(options: AttributifyOptions = {}): Preset {
     autocompleteExtractorAttributify,
   ]
 
-  if (!options.strict)
-    extractors.unshift(extractorSplit)
-
   return {
     name: '@unocss/preset-attributify',
     variants,
@@ -39,6 +35,7 @@ function preset(options: AttributifyOptions = {}): Preset {
     autocomplete: {
       extractors: autocompleteExtractors,
     },
+    extractorDefault: options.strict ? false : undefined,
   }
 }
 

diff --git a/packages/preset-tagify/src/index.ts b/packages/preset-tagify/src/index.ts
@@ -1,5 +1,4 @@
 import type { Preset } from '@unocss/core'
-import { extractorSplit } from '@unocss/core'
 import type { TagifyOptions } from './types'
 import { extractorTagify } from './extractor'
 import { variantTagify } from './variant'
@@ -20,13 +19,13 @@ function tagifyPreset(options: TagifyOptions = {}): Preset {
     extractorTagify(options),
   ]
 
-  if (defaultExtractor)
-    extractors.push(extractorSplit)
-
   return {
     name: '@unocss/preset-tagify',
     variants,
     extractors,
+    extractorDefault: defaultExtractor
+      ? undefined
+      : false,
   }
 }
 

diff --git a/test/pos.test.ts b/test/pos.test.ts
@@ -2,7 +2,7 @@ import { describe, expect, test } from 'vitest'
 import presetAttributify from '@unocss/preset-attributify'
 import presetUno from '@unocss/preset-uno'
 import type { UnoGenerator } from '@unocss/core'
-import { createGenerator, extractorSplit } from '@unocss/core'
+import { createGenerator } from '@unocss/core'
 import { getMatchedPositionsFromCode as match } from '@unocss/shared-common'
 import transformerVariantGroup from '@unocss/transformer-variant-group'
 import cssDirectives from '@unocss/transformer-directives'
@@ -265,7 +265,6 @@ describe('matched-positions-pug', async () => {
       presetAttributify({ strict: true }),
     ],
     extractors: [
-      extractorSplit,
       extractorPug(),
     ],
     transformers: [
@@ -304,11 +303,6 @@ describe('matched-positions-pug', async () => {
           30,
           "p4",
         ],
-        [
-          39,
-          40,
-          "b",
-        ],
         [
           39,
           40,