feat: insert loader for inline style

sonofmagic · sonofmagic · commit 707f7467ced4 · 2023-05-01T21:05:32.000+08:00
diff --git a/apps/webpack5-vue3/src/App.vue b/apps/webpack5-vue3/src/App.vue
@@ -38,7 +38,7 @@
       <a href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=default-template-tw&utm_campaign=create-next-app"
         class="group rounded-lg border border-transparent px-5 py-4 transition-colors hover:border-gray-300 hover:bg-gray-100 hover:dark:border-neutral-700 hover:dark:bg-neutral-800/30"
         target="_blank" rel="noopener noreferrer">
-        <h2 class="mb-3 text-2xl font-semibold">
+        <h2 class="mb-3 text-2xl font-semibold text-[red]">
           Learn <span
             class="inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none">-&gt;</span>
         </h2>
diff --git a/packages/unplugin-tailwindcss-mangle/rollup.config.mjs b/packages/unplugin-tailwindcss-mangle/rollup.config.mjs
@@ -7,7 +7,8 @@ export default createRollupConfig({
     nuxt: 'src/nuxt.ts',
     rollup: 'src/rollup.ts',
     vite: 'src/vite.ts',
-    webpack: 'src/webpack.ts'
+    webpack: 'src/webpack.ts',
+    loader: 'src/loader.ts'
   },
   // external: ['tailwindcss'],
   output: [
diff --git a/packages/unplugin-tailwindcss-mangle/src/css/index.ts b/packages/unplugin-tailwindcss-mangle/src/css/index.ts
@@ -1,11 +1,8 @@
 import postcss from 'postcss'
 import { postcssMangleTailwindcssPlugin } from './plugins'
-import { IHandlerOptions } from '@/types'
+import { ICssHandlerOptions } from '@/types'
 
-export function cssHandler(rawSource: string, options: IHandlerOptions) {
-  return postcss([
-    postcssMangleTailwindcssPlugin({
-      newClassMap: options.classGenerator.newClassMap
-    })
-  ]).process(rawSource).css
+export function cssHandler(rawSource: string, options: ICssHandlerOptions) {
+  const acceptedPlugins = [postcssMangleTailwindcssPlugin(options)]
+  return postcss(acceptedPlugins).process(rawSource).css
 }
diff --git a/packages/unplugin-tailwindcss-mangle/src/css/plugins.ts b/packages/unplugin-tailwindcss-mangle/src/css/plugins.ts
@@ -1,44 +1,82 @@
-import { IClassGeneratorContextItem } from '@/types'
+import { IClassGeneratorContextItem, ICssHandlerOptions } from '@/types'
 import type { PluginCreator } from 'postcss'
+
 import parser from 'postcss-selector-parser'
-export type PostcssMangleTailwindcssPlugin = PluginCreator<{
-  newClassMap: Record<string, IClassGeneratorContextItem>
-}>
+export type PostcssMangleTailwindcssPlugin = PluginCreator<ICssHandlerOptions>
 
 const postcssPlugin = 'postcss-mangle-tailwindcss-plugin'
 
 const postcssMangleTailwindcssPlugin: PostcssMangleTailwindcssPlugin = (options) => {
-  // must set newClassMap options
-  let newClassMap: Record<string, IClassGeneratorContextItem> = {}
-  if (options) {
-    if (options.newClassMap) {
-      newClassMap = options.newClassMap
+  if (options?.scene === 'loader') {
+    // must set newClassMap options
+    let set: Set<string> = new Set()
+
+    if (options) {
+      if (options.runtimeSet) {
+        set = options.runtimeSet
+      }
     }
-  }
+    return {
+      postcssPlugin,
+      Rule(rule, helper) {
+        rule.selector = parser((selectors) => {
+          selectors.walkClasses((s) => {
+            if (s.value) {
+              const existed = set.has(s.value)
+
+              if (existed) {
+                // vue scoped
+                if (s.parent) {
+                  const idx = s.parent.nodes.indexOf(s)
+                  if (idx > -1) {
+                    const nextNode = s.parent.nodes[idx + 1]
+                    if (nextNode && nextNode.type === 'attribute' && nextNode.attribute.indexOf('data-v-') > -1) {
+                      return
+                    }
+                  }
+                }
+                s.value = options.classGenerator.generateClassName(s.value).name
+              }
+            }
+          })
+        }).processSync(rule.selector)
+      }
+    }
+  } else {
+    let newClassMap: Record<string, IClassGeneratorContextItem> = {}
+
+    if (options) {
+      if (options.classGenerator) {
+        newClassMap = options.classGenerator.newClassMap
+      }
+    }
+
+    return {
+      postcssPlugin,
+      Rule(rule, helper) {
+        rule.selector = parser((selectors) => {
+          selectors.walkClasses((s) => {
+            if (s.value) {
+              const hit = newClassMap[s.value]
+              const existed = Boolean(hit)
 
-  return {
-    postcssPlugin,
-    Rule(rule, helper) {
-      rule.selector = parser((selectors) => {
-        selectors.walkClasses((s) => {
-          if (s.value) {
-            const hit = newClassMap[s.value]
-            if (hit) {
-              // vue scoped
-              if (s.parent) {
-                const idx = s.parent.nodes.indexOf(s)
-                if (idx > -1) {
-                  const nextNode = s.parent.nodes[idx + 1]
-                  if (nextNode && nextNode.type === 'attribute' && nextNode.attribute.indexOf('data-v-') > -1) {
-                    return
+              if (existed) {
+                // vue scoped
+                if (s.parent) {
+                  const idx = s.parent.nodes.indexOf(s)
+                  if (idx > -1) {
+                    const nextNode = s.parent.nodes[idx + 1]
+                    if (nextNode && nextNode.type === 'attribute' && nextNode.attribute.indexOf('data-v-') > -1) {
+                      return
+                    }
                   }
                 }
+                s.value = hit.name
               }
-              s.value = hit.name
             }
-          }
-        })
-      }).processSync(rule.selector)
+          })
+        }).processSync(rule.selector)
+      }
     }
   }
 }
diff --git a/packages/unplugin-tailwindcss-mangle/src/index.ts b/packages/unplugin-tailwindcss-mangle/src/index.ts
@@ -10,7 +10,6 @@ import type { sources } from 'webpack'
 import path from 'path'
 import fs from 'fs'
 import { getOptions } from './options'
-const { createLoader } = require('simple-functional-loader')
 
 // cache map
 const outputCachedMap = new Map<
@@ -23,7 +22,7 @@ const outputCachedMap = new Map<
 >()
 
 export const unplugin = createUnplugin((options: Options | undefined = {}, meta) => {
-  const { classGenerator, getCachedClassSet, isInclude, classMapOutputOptions } = getOptions(options)
+  const { classGenerator, getCachedClassSet, isInclude, classMapOutputOptions, twPatcher } = getOptions(options)
 
   return {
     name: pluginName,
@@ -96,29 +95,31 @@ export const unplugin = createUnplugin((options: Options | undefined = {}, meta)
           console.log(error)
         }
       }
-      const customLoader = {
-        ...createLoader(function (source: string) {
-          return source
-        }),
-        ident: null,
-        type: null
-      }
+
+      const loader = path.resolve(__dirname, 'loader.js')
+
       compiler.hooks.compilation.tap(pluginName, (compilation) => {
         NormalModule.getCompilationHooks(compilation).loader.tap(pluginName, (loaderContext, module) => {
           const idx = module.loaders.findIndex((x) => x.loader.includes('css-loader'))
           // vue-loader/dist/stylePostLoader.
           // vue-style-loader
           if (idx > -1) {
-            module.loaders.splice(idx, 0, customLoader)
+            module.loaders.splice(idx + 1, 0, {
+              loader,
+              options: {
+                classGenerator,
+                getCachedClassSet
+              },
+              ident: null,
+              type: null
+            })
+
             // console.log(module.resource, module.loaders.map(x => x.loader))
             // if(/css/.test(module.resource)){
             //   const idx = module.loaders.findIndex((x) => x.loader === 'style-loader')
             //   console.log(idx)
             // }
           }
-
-
-
         })
         compilation.hooks.processAssets.tap(
           {
diff --git a/packages/unplugin-tailwindcss-mangle/src/loader.ts b/packages/unplugin-tailwindcss-mangle/src/loader.ts
@@ -0,0 +1,24 @@
+import * as webpack from 'webpack'
+import ClassGenerator from './classGenerator'
+import { cssHandler } from './css'
+
+export default function loader(
+  this: webpack.LoaderContext<{
+    classGenerator: ClassGenerator
+    getCachedClassSet: (() => Set<string>) | undefined
+  }>,
+  content: string
+) {
+  this.cacheable && this.cacheable()
+  const opt = this.getOptions()
+  if (opt.getCachedClassSet) {
+    const runtimeSet = opt.getCachedClassSet()
+    return cssHandler(content, {
+      classGenerator: opt.classGenerator,
+      runtimeSet,
+      scene: 'loader'
+    })
+  }
+
+  return content
+}
diff --git a/packages/unplugin-tailwindcss-mangle/src/options.ts b/packages/unplugin-tailwindcss-mangle/src/options.ts
@@ -58,6 +58,7 @@ export function getOptions(options: Options | undefined = {}) {
     excludeMatcher,
     isInclude,
     classSetOutputOptions,
-    classMapOutputOptions
+    classMapOutputOptions,
+    twPatcher
   }
 }
diff --git a/packages/unplugin-tailwindcss-mangle/src/types.ts b/packages/unplugin-tailwindcss-mangle/src/types.ts
@@ -26,6 +26,10 @@ export interface IHandlerOptions {
   classGenerator: ClassGenerator
 }
 
+export interface ICssHandlerOptions extends IHandlerOptions {
+  scene?: 'loader' | 'process'
+}
+
 export interface ClassSetOutputOptions {
   filename: string
   dir?: string
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml

Original file line number	Diff line number	Diff line change
`@@ -58,6 +58,7 @@ export function getOptions(options: Options \| undefined = {}) {`
`58`	`58`	`excludeMatcher,`
`59`	`59`	`isInclude,`
`60`	`60`	`classSetOutputOptions,`
`61`		`- classMapOutputOptions`
	`61`	`+ classMapOutputOptions,`
	`62`	`+ twPatcher`
`62`	`63`	`}`
`63`	`64`	`}`