fix: disable option not working

hemengke1997 · Dec 5, 2022 · 9452de6 · 9452de6
1 parent 9e2bca5
commit 9452de6
Show file tree

Hide file tree

Showing 4 changed files with 61 additions and 15 deletions.
diff --git a/example/main-rem.css b/example/main-rem.css
@@ -1,7 +1,7 @@
 .class {
   margin: -0.625rem 1.25rem;
   padding: 5rem 0.03125rem;
-  border: 3px solid black;
+  border: 0.1875rem solid black;
   font-size: 0.875rem;
   line-height: 20px;
 }
@@ -24,7 +24,7 @@
 .class2 {
   margin: -0.625rem 1.25rem;
   padding: 5rem 0.03125rem;
-  border: 3px solid black;
+  border: 0.1875rem solid black;
   font-size: 0.875rem;
   line-height: 1.25rem;
 }

diff --git a/src/index.ts b/src/index.ts
@@ -1,6 +1,7 @@
 import type { Input, Plugin as PostcssPlugin, Rule } from 'postcss'
 import {
   blacklistedSelector,
+  checkoutDisable,
   convertUnit,
   createPropListMatcher,
   createPxReplace,
@@ -11,7 +12,6 @@ import {
   isBoolean,
   isOptionComment,
   isPxtoremReg,
-  isRepeatRun,
   judgeIsExclude,
 } from './utils/utils'
 import { getUnitRegexp } from './utils/pixel-unit-regex'
@@ -52,6 +52,8 @@ export const defaultOptions: Required<PxtoremOptions> = {
   convertUnitOnEnd: null,
 }
 
+const postcssPlugin = 'postcss-pxtorem'
+
 function pxtorem(options?: PxtoremOptions) {
   let opts = initOptions(options)
   let isExcludeFile = false
@@ -61,10 +63,12 @@ function pxtorem(options?: PxtoremOptions) {
   let rootValue: number
 
   const plugin: PostcssPlugin = {
-    postcssPlugin: 'postcss-pxtorem',
+    postcssPlugin,
 
     Root(r, { Warning }) {
-      if (opts.disable) return
+      if (checkoutDisable({ disable: opts.disable, isExcludeFile })) {
+        return
+      }
 
       const root = r.root()
 
@@ -87,9 +91,10 @@ function pxtorem(options?: PxtoremOptions) {
       pxReplace = createPxReplace(rootValue, opts.unitPrecision, opts.minPixelValue)
     },
     Declaration(decl) {
-      if (opts.disable) return
-      if (isRepeatRun(decl)) return
-      if (isExcludeFile) return
+      if (checkoutDisable({ disable: opts.disable, isExcludeFile, r: decl })) {
+        return
+      }
+
       const satisfyPropList = createPropListMatcher(opts.propList)
 
       if (
@@ -119,6 +124,10 @@ function pxtorem(options?: PxtoremOptions) {
       }
     },
     DeclarationExit(decl) {
+      if (checkoutDisable({ disable: opts.disable, isExcludeFile })) {
+        return
+      }
+
       const { convertUnitOnEnd } = opts
       if (convertUnitOnEnd) {
         if (Array.isArray(convertUnitOnEnd)) {
@@ -131,9 +140,9 @@ function pxtorem(options?: PxtoremOptions) {
       }
     },
     AtRule(atRule) {
-      if (opts.disable) return
-      if (isRepeatRun(atRule)) return
-      if (isExcludeFile) return
+      if (checkoutDisable({ disable: opts.disable, isExcludeFile, r: atRule })) {
+        return
+      }
 
       function replacePxInRules() {
         if (!atRule.params.includes(opts.unitToConvert)) return
@@ -151,17 +160,23 @@ function pxtorem(options?: PxtoremOptions) {
       }
     },
     Comment(comment, { Warning }) {
+      // ignore disable
       opts = {
         ...opts,
         ...getOptionsFromComment(comment, Warning),
       }
     },
     CommentExit(comment) {
+      // ignore disable
       if (comment.text.match(isPxtoremReg)?.length) {
         comment.remove()
       }
     },
     RootExit(r) {
+      if (checkoutDisable({ disable: opts.disable, isExcludeFile })) {
+        return
+      }
+
       const root = r.root()
 
       opts = initOptions(options)
@@ -171,7 +186,13 @@ function pxtorem(options?: PxtoremOptions) {
     },
   }
 
-  return plugin
+  if (opts.disable) {
+    return {
+      postcssPlugin,
+    }
+  } else {
+    return plugin
+  }
 }
 
 pxtorem.postcss = true

diff --git a/src/utils/utils.ts b/src/utils/utils.ts
@@ -19,7 +19,8 @@ export function isOptionComment(node: ChildNode | undefined): node is Comment {
 
 const processd = Symbol('processed')
 
-export function isRepeatRun(r: Rule | Declaration | AtRule) {
+export function isRepeatRun(r?: Rule | Declaration | AtRule) {
+  if (!r) return false
   if ((r as unknown as Record<symbol, boolean>)[processd]) {
     return true
   }
@@ -37,7 +38,7 @@ function parseRegExp(maybeRegExpArg: unknown) {
 
 export const isPxtoremReg = /(?<=^pxtorem\?).+/g
 
-export function getOptionsFromComment(comment: Comment, Warning: typeof postcssWarning) {
+export function getOptionsFromComment(comment: Comment, Warning: typeof postcssWarning): PxtoremOptions | undefined {
   try {
     let query = isPxtoremReg.exec(comment.text)?.[0]
     const ret: Record<string, any> = {}
@@ -71,7 +72,7 @@ export function getOptionsFromComment(comment: Comment, Warning: typeof postcssW
         ret[k] = cur
       }
     }
-    return ret as PxtoremOptions
+    return ret
   } catch {
     // eslint-disable-next-line no-new
     new Warning('Unexpected comment', { start: comment.source?.start, end: comment.source?.end })
@@ -182,6 +183,18 @@ export function convertUnit(value: string, convert: ConvertUnit) {
   return value
 }
 
+export function checkoutDisable(p: {
+  disable: boolean
+  isExcludeFile: boolean
+  r?: Parameters<typeof isRepeatRun>[0]
+}) {
+  const { disable, isExcludeFile, r } = p
+  if (disable || isExcludeFile || isRepeatRun(r)) {
+    return true
+  }
+  return false
+}
+
 enum EnumDataType {
   number = 'Number',
   string = 'String',

diff --git a/test/pxtorem.test.ts b/test/pxtorem.test.ts
@@ -99,6 +99,18 @@ describe('pxtorem', () => {
     }).css
     expect(processed).toBe(basicExpected)
   })
+
+  test('should disable all', () => {
+    const options = {
+      disable: true,
+    }
+
+    const expected = basicCSS
+
+    const processd = postcss(pxtorem(options)).process(expected).css
+
+    expect(expected).toBe(processd)
+  })
 })
 
 describe('value parsing', () => {