fix: vite parallel build

minko-fe · Jun 19, 2023 · 91ca888 · 91ca888
1 parent 0972fa1
commit 91ca888
Show file tree

Hide file tree

Showing 4 changed files with 82 additions and 130 deletions.
diff --git a/playground/vite-project/src/App.tsx b/playground/vite-project/src/App.tsx
@@ -1,7 +1,6 @@
 import { Header } from './components/Header'
 import styles from './index.module.css'
 import SwiperDemo from './SwiperDemo'
-import CalendarDemo from './CalendarDemo'
 
 function App() {
   return (
@@ -11,7 +10,6 @@ function App() {
       <div className='other'>px-other</div>
 
       <SwiperDemo />
-      <CalendarDemo />
     </div>
   )
 }

diff --git a/playground/vite-project/src/CalendarDemo/index.tsx b/playground/vite-project/src/CalendarDemo/index.tsx
diff --git a/src/index.ts b/src/index.ts
@@ -1,10 +1,12 @@
 import type { Input, Plugin as PostcssPlugin, Rule } from 'postcss'
+import type { H } from './utils'
 import {
   blacklistedSelector,
-  checkoutDisable,
+  checkIfDisable,
   convertUnit,
   createPropListMatcher,
   createPxReplace,
+  currentOptions,
   declarationExists,
   getOptionsFromComment,
   initOptions,
@@ -14,6 +16,7 @@ import {
   isOptionComment,
   isPxtoremReg,
   judgeIsExclude,
+  setupCurrentOptions,
 } from './utils'
 import { getUnitRegexp } from './utils/pixel-unit-regex'
 import { DISABLE_NEXT_COMMENT } from './utils/constant'
@@ -59,66 +62,35 @@ export const defaultOptions: Required<PxtoremOptions> = {
 const postcssPlugin = 'postcss-pxtorem'
 
 function pxtorem(options?: PxtoremOptions) {
-  let opts = initOptions(options)
-  let isExcludeFile = false
-
-  let pxReplace: ReturnType<typeof createPxReplace> | undefined
-
-  let rootValue: number | undefined
+  const ORIGINAL_OPTIONS = initOptions(options)
 
   const plugin: PostcssPlugin = {
     postcssPlugin,
-    Once(r, { Warning }) {
+    Once(r, h) {
       const node = r.root()
       const firstNode = node.nodes[0]
-      const filePath = node.source?.input.file
-
-      if (isOptionComment(firstNode)) {
-        opts = {
-          ...opts,
-          ...getOptionsFromComment(firstNode, Warning, opts.parseOptions),
-        }
-      }
 
-      const exclude = opts.exclude
-      const include = opts.include
-      isExcludeFile = judgeIsExclude(exclude, include, filePath)
-
-      if (checkoutDisable({ disable: opts.disable, isExcludeFile })) {
-        return
+      h[currentOptions] = {
+        isExcludeFile: false,
+        pxReplace: undefined,
+        rootValue: undefined,
+        originOpts: ORIGINAL_OPTIONS,
       }
 
-      rootValue = isFunction(opts.rootValue) ? opts.rootValue(node.source!.input) : opts.rootValue
-      pxReplace = createPxReplace(rootValue, opts.unitPrecision, opts.minPixelValue)
+      setupCurrentOptions(h as any, firstNode)
     },
-    Comment(node, { Warning }) {
-      const filePath = node.source?.input.file
-
-      opts = {
-        ...opts,
-        ...getOptionsFromComment(node, Warning, opts.parseOptions),
-      }
-
-      const exclude = opts.exclude
-      const include = opts.include
-
-      isExcludeFile = judgeIsExclude(exclude, include, filePath)
-
-      if (checkoutDisable({ disable: opts.disable, isExcludeFile })) {
-        return
-      }
-
-      rootValue = isFunction(opts.rootValue) ? opts.rootValue(node.source!.input) : opts.rootValue
-
-      pxReplace = createPxReplace(rootValue, opts.unitPrecision, opts.minPixelValue)
+    Comment(node, h) {
+      setupCurrentOptions(h as any, node)
     },
     CommentExit(comment) {
       if (comment.text.match(isPxtoremReg)?.length) {
         comment.remove()
       }
     },
-    Declaration(decl) {
-      if (checkoutDisable({ disable: opts.disable, isExcludeFile, r: decl })) {
+    Declaration(decl, h) {
+      const opts = h[currentOptions].originOpts
+
+      if (checkIfDisable({ disable: opts.disable, isExcludeFile: h[currentOptions].isExcludeFile, r: decl })) {
         return
       }
 
@@ -140,7 +112,7 @@ function pxtorem(options?: PxtoremOptions) {
       }
 
       const pxRegex = getUnitRegexp(opts.unitToConvert)
-      const value = pxReplace ? decl.value.replace(pxRegex, pxReplace) : decl.value
+      const value = h[currentOptions].pxReplace ? decl.value.replace(pxRegex, h[currentOptions].pxReplace) : decl.value
 
       if (declarationExists(decl.parent!, decl.prop, value)) return
 
@@ -150,7 +122,8 @@ function pxtorem(options?: PxtoremOptions) {
         decl.cloneAfter({ value })
       }
     },
-    DeclarationExit(decl) {
+    DeclarationExit(decl, h) {
+      const opts = h[currentOptions].originOpts
       const { convertUnitOnEnd } = opts
       if (convertUnitOnEnd) {
         if (Array.isArray(convertUnitOnEnd)) {
@@ -162,15 +135,19 @@ function pxtorem(options?: PxtoremOptions) {
         }
       }
     },
-    AtRule(atRule) {
-      if (checkoutDisable({ disable: opts.disable, isExcludeFile, r: atRule })) {
+    AtRule(atRule, h) {
+      const opts = h[currentOptions].originOpts
+
+      if (checkIfDisable({ disable: opts.disable, isExcludeFile: h[currentOptions].isExcludeFile, r: atRule })) {
         return
       }
 
       function replacePxInRules() {
         if (!atRule.params.includes(opts.unitToConvert)) return
         const pxRegex = getUnitRegexp(opts.unitToConvert)
-        atRule.params = pxReplace ? atRule.params.replace(pxRegex, pxReplace) : atRule.params
+        atRule.params = h[currentOptions].pxReplace
+          ? atRule.params.replace(pxRegex, h[currentOptions].pxReplace)
+          : atRule.params
       }
 
       if (isBoolean(opts.atRules) && opts.atRules) {
@@ -183,13 +160,6 @@ function pxtorem(options?: PxtoremOptions) {
         }
       }
     },
-
-    OnceExit() {
-      isExcludeFile = false
-      pxReplace = undefined
-      rootValue = undefined
-      opts = initOptions(options)
-    },
   }
 
   if (options?.disable) {

diff --git a/src/utils/index.ts b/src/utils/index.ts
@@ -1,4 +1,4 @@
-import type { AtRule, ChildNode, Comment, Container, Declaration, Rule, Warning as postcssWarning } from 'postcss'
+import type { AtRule, ChildNode, Comment, Container, Declaration, Rule } from 'postcss'
 import type { ConvertUnit, PxtoremOptions } from '..'
 import { defaultOptions } from '..'
 import { MAYBE_REGEXP } from './constant'
@@ -39,11 +39,7 @@ function parseRegExp(maybeRegExpArg: unknown) {
 
 export const isPxtoremReg = /(?<=^pxtorem\?).+/g
 
-export function getOptionsFromComment(
-  comment: Comment,
-  Warning: typeof postcssWarning,
-  parseOptions: ParseOptions,
-): PxtoremOptions | undefined {
+export function getOptionsFromComment(comment: Comment, parseOptions: ParseOptions): PxtoremOptions | undefined {
   try {
     const index = comment.text.search(isPxtoremReg)
 
@@ -82,8 +78,7 @@ export function getOptionsFromComment(
     }
     return ret
   } catch {
-    // eslint-disable-next-line no-new
-    new Warning('Unexpected comment', { start: comment.source?.start, end: comment.source?.end })
+    console.warn('Unexpected comment', { start: comment.source?.start, end: comment.source?.end })
   }
 }
 
@@ -139,9 +134,9 @@ export function createPxReplace(
 }
 
 export function blacklistedSelector(blacklist: NonNullable<PxtoremOptions['selectorBlackList']>, selector: string) {
-  if (typeof selector !== 'string') return
+  if (!isString(selector)) return
   return blacklist.some((t) => {
-    if (typeof t === 'string') {
+    if (isString(t)) {
       return selector.includes(t)
     }
     return selector.match(t)
@@ -185,33 +180,62 @@ export function judgeIsExclude<T extends PxtoremOptions['include']>(
 export function convertUnit(value: string, convert: ConvertUnit) {
   if (typeof convert.sourceUnit === 'string') {
     return value.replace(new RegExp(`${convert.sourceUnit}$`), convert.targetUnit)
-  } else if (convert.sourceUnit instanceof RegExp) {
+  } else if (isRegExp(convert.sourceUnit)) {
     return value.replace(new RegExp(convert.sourceUnit), convert.targetUnit)
   }
   return value
 }
 
-export function checkoutDisable(p: {
-  disable: boolean
-  isExcludeFile: boolean
-  r?: Parameters<typeof isRepeatRun>[0]
-}) {
+export function checkIfDisable(p: { disable: boolean; isExcludeFile: boolean; r?: Parameters<typeof isRepeatRun>[0] }) {
   const { disable, isExcludeFile, r } = p
-  if (disable || isExcludeFile || isRepeatRun(r)) {
-    return true
+  return disable || isExcludeFile || isRepeatRun(r)
+}
+
+export const currentOptions = Symbol('currentOptions')
+
+export type H = {
+  [currentOptions]: {
+    isExcludeFile: boolean
+    pxReplace: ReturnType<typeof createPxReplace> | undefined
+    rootValue: number | undefined
+    originOpts: ReturnType<typeof initOptions>
   }
-  return false
 }
 
-enum EnumDataType {
+export function setupCurrentOptions(h: H, node: Comment | ChildNode) {
+  const opts = h[currentOptions].originOpts
+
+  const filePath = node?.source?.input.file
+
+  if ((node as Comment)?.text) {
+    h[currentOptions].originOpts = {
+      ...opts,
+      ...getOptionsFromComment(node as Comment, opts.parseOptions),
+    }
+  }
+
+  const exclude = opts.exclude
+  const include = opts.include
+
+  h[currentOptions].isExcludeFile = judgeIsExclude(exclude, include, filePath)
+
+  if (checkIfDisable({ disable: opts.disable, isExcludeFile: h[currentOptions].isExcludeFile })) {
+    return
+  }
+
+  h[currentOptions].rootValue = isFunction(opts.rootValue) ? opts.rootValue(node.source!.input) : opts.rootValue
+
+  h[currentOptions].pxReplace = createPxReplace(h[currentOptions].rootValue, opts.unitPrecision, opts.minPixelValue)
+}
+
+enum DataType {
   number = 'Number',
   string = 'String',
   boolean = 'Boolean',
   null = 'Null',
   undefined = 'Undefined',
   object = 'Object',
   array = 'Array',
-  date = 'Date',
   regexp = 'RegExp',
   function = 'Function',
 }
@@ -221,37 +245,37 @@ function is(val: unknown, type: string) {
 }
 
 export function isNumber(data: unknown): data is number {
-  return is(data, EnumDataType.number)
+  return is(data, DataType.number)
 }
 
 export function isString(data: unknown): data is string {
-  return is(data, EnumDataType.string)
+  return is(data, DataType.string)
 }
 
 export function isBoolean(data: unknown): data is boolean {
-  return is(data, EnumDataType.boolean)
+  return is(data, DataType.boolean)
 }
 
 export function isNull(data: unknown): data is null {
-  return is(data, EnumDataType.null)
+  return is(data, DataType.null)
 }
 
 export function isUndefined(data: unknown): data is undefined {
-  return is(data, EnumDataType.undefined)
+  return is(data, DataType.undefined)
 }
 
 export function isObject(data: unknown): data is Object {
-  return is(data, EnumDataType.object)
+  return is(data, DataType.object)
 }
 
 export function isArray(data: unknown): data is Array<any> {
-  return is(data, EnumDataType.array)
+  return is(data, DataType.array)
 }
 
 export function isRegExp(data: unknown): data is RegExp {
-  return is(data, EnumDataType.regexp)
+  return is(data, DataType.regexp)
 }
 
 export function isFunction(data: unknown): data is Function {
-  return is(data, EnumDataType.function)
+  return is(data, DataType.function)
 }