From 2b3be692ec79138222ab75c7b92d7061d83c0b28 Mon Sep 17 00:00:00 2001
From: gabriel <gabrielqwes123@gmail.com>
Date: Tue, 9 Apr 2024 18:09:37 -0400
Subject: [PATCH] fix: update postcss

---
 lib/stylePlugins/scoped.ts | 177 +++++++++++++++++++------------------
 lib/stylePlugins/trim.ts   |  21 +++--
 package.json               |   4 +-
 yarn.lock                  |  31 ++++---
 4 files changed, 128 insertions(+), 105 deletions(-)

diff --git a/lib/stylePlugins/scoped.ts b/lib/stylePlugins/scoped.ts
index 14e1a2d..65789b0 100644
--- a/lib/stylePlugins/scoped.ts
+++ b/lib/stylePlugins/scoped.ts
@@ -1,101 +1,108 @@
 import { Root } from 'postcss'
-import * as postcss from 'postcss'
 // postcss-selector-parser does have typings but it's problematic to work with.
 const selectorParser = require('postcss-selector-parser')
 
-export default postcss.plugin('add-id', (options: any) => (root: Root) => {
-  const id: string = options
-  const keyframes = Object.create(null)
+const addIdPlugin = (options: any) => {
+  return {
+    postcssPlugin: 'add-id',
+    Once(root: Root, {}) {
+      const id: string = options
+      const keyframes = Object.create(null)
 
-  root.each(function rewriteSelector(node: any) {
-    if (!node.selector) {
-      // handle media queries
-      if (node.type === 'atrule') {
-        if (node.name === 'media' || node.name === 'supports') {
-          node.each(rewriteSelector)
-        } else if (/-?keyframes$/.test(node.name)) {
-          // register keyframes
-          keyframes[node.params] = node.params = node.params + '-' + id
+      root.each(function rewriteSelector(node: any) {
+        if (!node.selector) {
+          // handle media queries
+          if (node.type === 'atrule') {
+            if (node.name === 'media' || node.name === 'supports') {
+              node.each(rewriteSelector)
+            } else if (/-?keyframes$/.test(node.name)) {
+              // register keyframes
+              keyframes[node.params] = node.params = node.params + '-' + id
+            }
+          }
+          return
         }
-      }
-      return
-    }
-    node.selector = selectorParser((selectors: any) => {
-      selectors.each((selector: any) => {
-        let node: any = null
+        node.selector = selectorParser((selectors: any) => {
+          selectors.each((selector: any) => {
+            let node: any = null
 
-        // find the last child node to insert attribute selector
-        selector.each((n: any) => {
-          // ">>>" combinator
-          // and /deep/ alias for >>>, since >>> doesn't work in SASS
-          if (
-            n.type === 'combinator' &&
-            (n.value === '>>>' || n.value === '/deep/')
-          ) {
-            n.value = ' '
-            n.spaces.before = n.spaces.after = ''
-            return false
-          }
+            // find the last child node to insert attribute selector
+            selector.each((n: any) => {
+              // ">>>" combinator
+              // and /deep/ alias for >>>, since >>> doesn't work in SASS
+              if (
+                n.type === 'combinator' &&
+                (n.value === '>>>' || n.value === '/deep/')
+              ) {
+                n.value = ' '
+                n.spaces.before = n.spaces.after = ''
+                return false
+              }
 
-          // in newer versions of sass, /deep/ support is also dropped, so add a ::v-deep alias
-          if (n.type === 'pseudo' && n.value === '::v-deep') {
-            n.value = n.spaces.before = n.spaces.after = ''
-            return false
-          }
+              // in newer versions of sass, /deep/ support is also dropped, so add a ::v-deep alias
+              if (n.type === 'pseudo' && n.value === '::v-deep') {
+                n.value = n.spaces.before = n.spaces.after = ''
+                return false
+              }
 
-          if (n.type !== 'pseudo' && n.type !== 'combinator') {
-            node = n
-          }
-        })
+              if (n.type !== 'pseudo' && n.type !== 'combinator') {
+                node = n
+              }
+            })
 
-        if (node) {
-          node.spaces.after = ''
-        } else {
-          // For deep selectors & standalone pseudo selectors,
-          // the attribute selectors are prepended rather than appended.
-          // So all leading spaces must be eliminated to avoid problems.
-          selector.first.spaces.before = ''
-        }
+            if (node) {
+              node.spaces.after = ''
+            } else {
+              // For deep selectors & standalone pseudo selectors,
+              // the attribute selectors are prepended rather than appended.
+              // So all leading spaces must be eliminated to avoid problems.
+              selector.first.spaces.before = ''
+            }
 
-        selector.insertAfter(
-          node,
-          selectorParser.attribute({
-            attribute: id
+            selector.insertAfter(
+              node,
+              selectorParser.attribute({
+                attribute: id,
+              })
+            )
           })
-        )
+        }).processSync(node.selector)
       })
-    }).processSync(node.selector)
-  })
 
-  // If keyframes are found in this <style>, find and rewrite animation names
-  // in declarations.
-  // Caveat: this only works for keyframes and animation rules in the same
-  // <style> element.
-  if (Object.keys(keyframes).length) {
-    root.walkDecls(decl => {
-      // individual animation-name declaration
-      if (/^(-\w+-)?animation-name$/.test(decl.prop)) {
-        decl.value = decl.value
-          .split(',')
-          .map(v => keyframes[v.trim()] || v.trim())
-          .join(',')
-      }
-      // shorthand
-      if (/^(-\w+-)?animation$/.test(decl.prop)) {
-        decl.value = decl.value
-          .split(',')
-          .map(v => {
-            const vals = v.trim().split(/\s+/)
-            const i = vals.findIndex(val => keyframes[val])
-            if (i !== -1) {
-              vals.splice(i, 1, keyframes[vals[i]])
-              return vals.join(' ')
-            } else {
-              return v
-            }
-          })
-          .join(',')
+      // If keyframes are found in this <style>, find and rewrite animation names
+      // in declarations.
+      // Caveat: this only works for keyframes and animation rules in the same
+      // <style> element.
+      if (Object.keys(keyframes).length) {
+        root.walkDecls((decl) => {
+          // individual animation-name declaration
+          if (/^(-\w+-)?animation-name$/.test(decl.prop)) {
+            decl.value = decl.value
+              .split(',')
+              .map((v) => keyframes[v.trim()] || v.trim())
+              .join(',')
+          }
+          // shorthand
+          if (/^(-\w+-)?animation$/.test(decl.prop)) {
+            decl.value = decl.value
+              .split(',')
+              .map((v) => {
+                const vals = v.trim().split(/\s+/)
+                const i = vals.findIndex((val) => keyframes[val])
+                if (i !== -1) {
+                  vals.splice(i, 1, keyframes[vals[i]])
+                  return vals.join(' ')
+                } else {
+                  return v
+                }
+              })
+              .join(',')
+          }
+        })
       }
-    })
+    },
   }
-})
+}
+
+addIdPlugin.postcss = true
+export default addIdPlugin
diff --git a/lib/stylePlugins/trim.ts b/lib/stylePlugins/trim.ts
index e4aed6a..3dd6a5b 100644
--- a/lib/stylePlugins/trim.ts
+++ b/lib/stylePlugins/trim.ts
@@ -1,11 +1,16 @@
 import { Root } from 'postcss'
-import * as postcss from 'postcss'
 
-export default postcss.plugin('trim', () => (css: Root) => {
-  css.walk(({ type, raws }) => {
-    if (type === 'rule' || type === 'atrule') {
-      if (raws.before) raws.before = '\n'
-      if (raws.after) raws.after = '\n'
-    }
-  })
+const trimPlugin = () => ({
+  postcssPlugin: 'trim',
+  Once(root: Root, {}) {
+    root.walk(({ type, raws }) => {
+      if (type === 'rule' || type === 'atrule') {
+        if (raws.before) raws.before = '\n'
+        if (raws.after) raws.after = '\n'
+      }
+    })
+  },
 })
+
+trimPlugin.postcss = true
+export default trimPlugin
diff --git a/package.json b/package.json
index 69e4faa..1f933c5 100644
--- a/package.json
+++ b/package.json
@@ -60,7 +60,7 @@
     "hash-sum": "^1.0.2",
     "lru-cache": "^4.1.2",
     "merge-source-map": "^1.1.0",
-    "postcss": "^7.0.36",
+    "postcss": "^8.4.38",
     "postcss-selector-parser": "^6.0.2",
     "source-map": "~0.6.1",
     "vue-template-es2015-compiler": "^1.9.0"
@@ -68,4 +68,4 @@
   "optionalDependencies": {
     "prettier": "^1.18.2 || ^2.0.0"
   }
-}
+}
\ No newline at end of file
diff --git a/yarn.lock b/yarn.lock
index 919f2b3..6be9250 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3579,6 +3579,11 @@ nan@^2.12.1:
   resolved "https://registry.yarnpkg.com/nan/-/nan-2.14.1.tgz#d7be34dfa3105b91494c3147089315eff8874b01"
   integrity sha512-isWHgVjnFjh2x2yuJ/tj3JbwoHu3UC2dX5G/88Cm24yB6YopVgxvBObDY7n5xW6ExmFhJpSEQqFPvq9zaXc8Jw==
 
+nanoid@^3.3.7:
+  version "3.3.7"
+  resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.3.7.tgz#d0c301a691bc8d54efa0a2226ccf3fe2fd656bd8"
+  integrity sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g==
+
 nanomatch@^1.2.9:
   version "1.2.13"
   resolved "https://registry.yarnpkg.com/nanomatch/-/nanomatch-1.2.13.tgz#b87a8aa4fc0de8fe6be88895b38983ff265bd119"
@@ -3954,10 +3959,10 @@ performance-now@^2.1.0:
   resolved "https://registry.yarnpkg.com/performance-now/-/performance-now-2.1.0.tgz#6309f4e0e5fa913ec1c69307ae364b4b377c9e7b"
   integrity sha1-Ywn04OX6kT7BxpMHrjZLSzd8nns=
 
-picocolors@^0.2.1:
-  version "0.2.1"
-  resolved "https://registry.yarnpkg.com/picocolors/-/picocolors-0.2.1.tgz#570670f793646851d1ba135996962abad587859f"
-  integrity sha512-cMlDqaLEqfSaW8Z7N5Jw+lyIW869EzT73/F5lhtY9cLGoVxSXznfgfXMO0Z5K0o0Q2TkTXq+0KFsdnSe3jDViA==
+picocolors@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/picocolors/-/picocolors-1.0.0.tgz#cb5bdc74ff3f51892236eaf79d68bc44564ab81c"
+  integrity sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==
 
 picomatch@^2.0.4, picomatch@^2.2.1:
   version "2.2.2"
@@ -4031,13 +4036,14 @@ postcss-selector-parser@^6.0.2:
     indexes-of "^1.0.1"
     uniq "^1.0.1"
 
-postcss@^7.0.36:
-  version "7.0.39"
-  resolved "https://registry.yarnpkg.com/postcss/-/postcss-7.0.39.tgz#9624375d965630e2e1f2c02a935c82a59cb48309"
-  integrity sha512-yioayjNbHn6z1/Bywyb2Y4s3yvDAeXGOyxqD+LnVOinq6Mdmd++SW2wUNVzavyyHxd6+DxzWGIuosg6P1Rj8uA==
+postcss@^8.4.38:
+  version "8.4.38"
+  resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.38.tgz#b387d533baf2054288e337066d81c6bee9db9e0e"
+  integrity sha512-Wglpdk03BSfXkHoQa3b/oulrotAkwrlLDRSOb9D0bN86FdRyE9lppSp33aHNPgBa0JKCoB+drFLZkQoRRYae5A==
   dependencies:
-    picocolors "^0.2.1"
-    source-map "^0.6.1"
+    nanoid "^3.3.7"
+    picocolors "^1.0.0"
+    source-map-js "^1.2.0"
 
 prelude-ls@~1.1.2:
   version "1.1.2"
@@ -4692,6 +4698,11 @@ snapdragon@^0.8.1:
     source-map-resolve "^0.5.0"
     use "^3.1.0"
 
+source-map-js@^1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/source-map-js/-/source-map-js-1.2.0.tgz#16b809c162517b5b8c3e7dcd315a2a5c2612b2af"
+  integrity sha512-itJW8lvSA0TXEphiRoawsCksnlf8SyvmFzIhltqAHluXd88pkCd+cXJVHTDwdCr0IzwptSm035IHQktUu1QUMg==
+
 source-map-resolve@^0.5.0, source-map-resolve@^0.5.2:
   version "0.5.3"
   resolved "https://registry.yarnpkg.com/source-map-resolve/-/source-map-resolve-0.5.3.tgz#190866bece7553e1f8f267a2ee82c606b5509a1a"