feat: ✨ support multiple pxtorem comments in single css file

minko-fe · Nov 28, 2022 · b91f039 · b91f039
1 parent c223ede
commit b91f039
Show file tree

Hide file tree

Showing 8 changed files with 186 additions and 34 deletions.
diff --git a/example/index.cjs → example/index.ts b/example/index.cjs → example/index.ts
@@ -1,11 +1,13 @@
-const fs = require('node:fs')
-const postcss = require('postcss')
-const pxtorem = require('../dist/index.cjs')
+import fs from 'node:fs'
+import postcss from 'postcss'
+import nested from 'postcss-nested'
+import pxtorem from '../src'
+
 const css = fs.readFileSync('main.css', 'utf8')
 const options = {
   replace: true,
 }
-const processedCss = postcss(pxtorem(options)).process(css).css
+const processedCss = postcss(pxtorem(options), nested).process(css).css
 
 fs.writeFile('main-rem.css', processedCss, (err) => {
   if (err) {

diff --git a/example/main-rem.css b/example/main-rem.css
@@ -1,25 +1,36 @@
-
 .class {
-  margin: -10px 20px;
-  padding: 5rem .5px;
-  border: 3px solid black;
-  font-size: 14px;
-  line-height: 20px;
+  margin: -0.625rem 1.25rem;
+  padding: 5rem 0.03125rem;
+  border: 0.1875rem solid black;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
 }
 .mmm {
   font-size: 32px;
-  font-size: 0.16rem;
   line-height: 1em;
 }
+.mmm .nested {
+    font-size: 1rem;
+  }
 @media (min-width: 750px) {
   .class3 {
-      font-size: 16px;
-      font-size: 1rem;
-      line-height: 22px;
-      line-height: 1.375rem;
+    font-size: 16px;
+    line-height: 22px;
   }
+    .class3 .nested {
+      font-size: 16px;
+    }
 }
-
+.class2 {
+  margin: -0.625rem 1.25rem;
+  padding: 5rem 0.03125rem;
+  border: 0.1875rem solid black;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+}
+.class2 .nested {
+    font-size: 1rem;
+  }
 /*
 .class {
   font-size: 16px;

diff --git a/example/main.css b/example/main.css
@@ -1,25 +1,42 @@
-
-/* postcss-pxtorem?disable=false&rootValue=200&propList[]=*&replace=false&selectorBlackList[]=/class/i */
+/* pxtorem?disable=false */
 .class {
   margin: -10px 20px;
-  padding: 5rem .5px;
+  padding: 5rem 0.5px;
   border: 3px solid black;
   font-size: 14px;
   line-height: 20px;
 }
 .mmm {
+  /* pxtorem-disable-next-line */
   font-size: 32px;
   line-height: 1em;
+  .nested {
+    font-size: 16px;
+  }
 }
+
+/* pxtorem?disable=true */
 @media (min-width: 750px) {
   .class3 {
+    font-size: 16px;
+    line-height: 22px;
+    .nested {
       font-size: 16px;
-      font-size: 1rem;
-      line-height: 22px;
-      line-height: 1.375rem;
+    }
   }
 }
 
+/* pxtorem?disable=false */
+.class2 {
+  margin: -10px 20px;
+  padding: 5rem 0.5px;
+  border: 3px solid black;
+  font-size: 14px;
+  line-height: 20px;
+  .nested {
+    font-size: 16px;
+  }
+}
 /*
 .class {
   font-size: 16px;

diff --git a/package.json b/package.json
@@ -56,6 +56,7 @@
     "conventional-changelog-cli": "^2.2.2",
     "eslint": "^8.23.1",
     "postcss": "^8.4.16",
+    "postcss-nested": "^6.0.0",
     "tsup": "^6.2.3",
     "typescript": "^4.8.3",
     "vitest": "^0.23.2"

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/index.ts b/src/index.ts
@@ -1,4 +1,5 @@
 import type { Input, Plugin as PostcssPlugin, Rule } from 'postcss'
+import { Warning } from 'postcss'
 import {
   blacklistedSelector,
   createPropListMatcher,
@@ -9,6 +10,7 @@ import {
   isArray,
   isBoolean,
   isOptionComment,
+  isPxtoremReg,
   isRepeatRun,
   judgeIsExclude,
 } from './utils/utils'
@@ -129,7 +131,17 @@ function pxtorem(options?: PxtoremOptions) {
         }
       }
     },
-
+    Comment(comment) {
+      opts = {
+        ...opts,
+        ...getOptionsFromComment(comment, Warning),
+      }
+    },
+    CommentExit(comment) {
+      if (comment.text.match(isPxtoremReg)?.length) {
+        comment.remove()
+      }
+    },
     RootExit(r) {
       const root = r.root()
 
@@ -138,14 +150,6 @@ function pxtorem(options?: PxtoremOptions) {
       rootValue = typeof opts.rootValue === 'function' ? opts.rootValue(root.source!.input) : opts.rootValue
       pxReplace = createPxReplace(rootValue, opts.unitPrecision, opts.minPixelValue)
     },
-    OnceExit(r) {
-      const root = r.root()
-
-      const firstNode = root.nodes[0]
-      if (isOptionComment(firstNode) && firstNode.text.includes('pxtorem')) {
-        firstNode.remove()
-      }
-    },
   }
 
   return plugin

diff --git a/src/utils/utils.ts b/src/utils/utils.ts
@@ -35,9 +35,11 @@ function parseRegExp(maybeRegExpArg: unknown) {
   return maybeRegExpArg
 }
 
+export const isPxtoremReg = /(?<=^pxtorem\?).+/g
+
 export function getOptionsFromComment(comment: Comment, Warning: typeof postcssWarning) {
   try {
-    let query = /(?<=^pxtorem\?).+/g.exec(comment.text)?.[0]
+    let query = isPxtoremReg.exec(comment.text)?.[0]
     const ret: Record<string, any> = {}
 
     if (!query) return ret

diff --git a/test/pxtorem.test.ts b/test/pxtorem.test.ts
@@ -1,6 +1,7 @@
 import postcss from 'postcss'
 import { describe, expect, test } from 'vitest'
 import type { Input } from 'postcss'
+import nested from 'postcss-nested'
 import pxtorem from '../src'
 import { filterPropList } from '../src/utils/filter-prop-list'
 
@@ -374,9 +375,9 @@ describe('include', () => {
   })
 })
 
-describe('top comment', () => {
+describe('comment', () => {
   test('regexp', () => {
-    const css = '/* postcss-pxtorem?disable=false */\n.rule { font-size: 16px }'
+    const css = '/* pxtorem?disable=false */\n.rule { font-size: 16px }'
     const expected = '.rule { font-size: 1rem }'
     const processed = postcss(pxtorem()).process(css).css
 
@@ -501,6 +502,94 @@ describe('top comment', () => {
     const expected = '.rule { border: 1px solid #000; font-size: 1rem; margin: 1px 0.625rem; }'
     expect(processed).toBe(expected)
   })
+
+  test('multipleComments', () => {
+    const css =
+      '/* pxtorem?disable=false */\n.enable { font-size: 15px; }\n/* pxtorem?disable=true */\n.disable { font-size: 15px; }'
+    const expected = '.enable { font-size: 0.9375rem; }\n.disable { font-size: 15px; }'
+    const processed = postcss(pxtorem({ propList: ['*'] })).process(css).css
+
+    expect(processed).toBe(expected)
+  })
+
+  test('integrate postcss-nested', () => {
+    const css = `/* pxtorem?disable=false */
+    .class {
+      margin: -10px 20px;
+      padding: 5rem 0.5px;
+      border: 3px solid black;
+      font-size: 14px;
+      line-height: 20px;
+    }
+    .mmm {
+      /* pxtorem-disable-next-line */
+      font-size: 32px;
+      line-height: 1em;
+      .nested {
+        font-size: 16px;
+      }
+    }
+    
+    /* pxtorem?disable=true */
+    @media (min-width: 750px) {
+      .class3 {
+        font-size: 16px;
+        line-height: 22px;
+        .nested {
+          font-size: 16px;
+        }
+      }
+    }
+    
+    /* pxtorem?disable=false */
+    .class2 {
+      margin: -10px 20px;
+      padding: 5rem 0.5px;
+      border: 3px solid black;
+      font-size: 14px;
+      line-height: 20px;
+      .nested {
+        font-size: 16px;
+      }
+    }`
+
+    const expected = `.class {
+      margin: -0.625rem 1.25rem;
+      padding: 5rem 0.03125rem;
+      border: 0.1875rem solid black;
+      font-size: 0.875rem;
+      line-height: 1.25rem;
+    }
+    .mmm {
+      font-size: 32px;
+      line-height: 1em;
+    }
+    .mmm .nested {
+        font-size: 1rem;
+      }
+    @media (min-width: 750px) {
+      .class3 {
+        font-size: 16px;
+        line-height: 22px;
+      }
+        .class3 .nested {
+          font-size: 16px;
+        }
+    }
+    .class2 {
+      margin: -0.625rem 1.25rem;
+      padding: 5rem 0.03125rem;
+      border: 0.1875rem solid black;
+      font-size: 0.875rem;
+      line-height: 1.25rem;
+    }
+    .class2 .nested {
+        font-size: 1rem;
+      }`
+    const processed = postcss(pxtorem(), nested).process(css).css
+
+    expect(processed).toBe(expected)
+  })
 })
 
 describe('inline comment', () => {