Update PostCSS to v8.4.49 and improve code readability

lib/compileTemplate.ts

@@ -87,12 +87,16 @@ function preprocess(
     source,
     finalPreprocessOptions,
     (_err: Error | null, _res: string) => {
-      if (_err) err = _err
+      if (_err) {
+        err = _err
+      }
       res = _res
     }
   )
 
-  if (err) throw err
+  if (err) {
+    throw err
+  }
   return res
 }
 

lib/parse.ts

@@ -56,7 +56,9 @@ export function parse(options: ParseOptions): SFCDescriptor {
     filename + source + JSON.stringify(compilerParseOptions)
   )
   let output: SFCDescriptor = cache.get(cacheKey)
-  if (output) return output
+  if (output) {
+    return output
+  }
   output = compiler.parseComponent(source, compilerParseOptions)
   if (needMap) {
     if (output.script && !output.script.src) {

lib/stylePlugins/scoped.ts

@@ -1,101 +1,107 @@
 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)
+export default (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(',')
+          }
+        })
       }
-    })
+    }
   }
-})
+}
+
+export const postcss = true

lib/stylePlugins/trim.ts

@@ -1,11 +1,21 @@
 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'
+export default () => {
+  return {
+    postcssPlugin: 'trim',
+    Once(css: Root) {
+      css.walk(({ type, raws }) => {
+        if (type === 'rule' || type === 'atrule') {
+          if (raws.before) {
+            raws.before = '\n'
+          }
+          if (raws.after) {
+            raws.after = '\n'
+          }
+        }
+      })
     }
-  })
-})
+  }
+}
+
+export const postcss = true

lib/styleProcessors/index.ts

@@ -81,7 +81,9 @@ const less = {
       }
     )
 
-    if (error) return { code: '', errors: [error] }
+    if (error) {
+      return { code: '', errors: [error] }
+    }
 
     if (map) {
       return {
@@ -106,7 +108,9 @@ const styl = {
     try {
       const ref = nodeStylus(source)
       Object.keys(options).forEach(key => ref.set(key, options[key]))
-      if (map) ref.set('sourcemap', { inline: false, comment: false })
+      if (map) {
+        ref.set('sourcemap', { inline: false, comment: false })
+      }
 
       const result = ref.render()
       if (map) {

lib/templateCompilerModules/assetUrl.ts

@@ -65,7 +65,7 @@ function rewrite(
   transformAssetUrlsOption?: TransformAssetUrlsOptions
 ) {
   if (attr.name === name) {
-    const value = attr.value
+    const { value } = attr
     // only transform static URLs
     if (value.charAt(0) === '"' && value.charAt(value.length - 1) === '"') {
       attr.value = urlToRequire(value.slice(1, -1), transformAssetUrlsOption)

lib/templateCompilerModules/srcset.ts

@@ -27,7 +27,7 @@ function transform(
     node.attrs.forEach(attr => {
       if (attr.name === 'srcset') {
         // same logic as in transform-require.js
-        const value = attr.value
+        const { value } = attr
         const isStatic =
           value.charAt(0) === '"' && value.charAt(value.length - 1) === '"'
         if (!isStatic) {

lib/templateCompilerModules/utils.ts

@@ -62,13 +62,10 @@ export function urlToRequire(
 function parseUriParts(urlString: string): UrlWithStringQuery {
   // initialize return value
   const returnValue: UrlWithStringQuery = uriParse('')
-  if (urlString) {
-    // A TypeError is thrown if urlString is not a string
-    // @see https://nodejs.org/api/url.html#url_url_parse_urlstring_parsequerystring_slashesdenotehost
-    if ('string' === typeof urlString) {
-      // check is an uri
-      return uriParse(urlString) // take apart the uri
-    }
+  // A TypeError is thrown if urlString is not a string
+  // @see https://nodejs.org/api/url.html#url_url_parse_urlstring_parsequerystring_slashesdenotehost
+  if (urlString && 'string' === typeof urlString) {
+    return uriParse(urlString) // take apart the uri
   }
   return returnValue
 }