Fixing analyze-variables script

__tests__/css.test.js

@@ -9,6 +9,9 @@ const semver = require('semver')
 
 let selectorsDiff, variablesDiff, version
 
+// Because of a change in analyzer this was incorrectly in the list
+const variableAllowList = ['$marketing-all-spacers']
+
 beforeAll(async () => {
   selectorsDiff = getSelectorDiff()
   variablesDiff = getVariableDiff()
@@ -46,7 +49,7 @@ describe('deprecations', () => {
   })
 
   it('A variable was removed from the codebase and added to upcoming major release deprecations file.', () => {
-    const removed = variablesDiff.removed
+    const removed = variablesDiff.removed.filter(v => !variableAllowList.includes(v))
     const nextMajor = semver.inc(version, 'major')
     const deprecations = getDeprecatedVariables(nextMajor)
     // Some variables were removed from the codebase, but not found

package.json

@@ -53,12 +53,12 @@
     "minimist": "^1.2.3",
     "node-fetch": "^2.6.1",
     "postcss": "^8.2.9",
-    "postcss-import": "^12.0.1",
+    "postcss-import": "14.0.1",
     "postcss-load-config": "^3.0.1",
     "postcss-loader": "^3.0.0",
     "postcss-node-sass": "3.1.0",
     "postcss-scss": "^3.0.5",
-    "postcss-value-parser": "^4.1.0",
+    "postcss-simple-vars": "6.0.3",
     "prettier": "2.2.1",
     "semver": "^5.7.1",
     "stylelint": "^13.12.0",

script/analyze-variables.js

@@ -1,129 +1,85 @@
 #!/usr/bin/env node
-/* eslint eslint-comments/no-use: off */
-/* eslint-disable github/no-then */
 const postcss = require('postcss')
+const {join} = require('path')
+const fs = require('fs')
 const atImport = require('postcss-import')
 const syntax = require('postcss-scss')
-const valueParser = require('postcss-value-parser')
-const {readFile} = require('fs-extra')
 
-if (module.parent) {
+const processor = postcss([
-  module.exports = analyzeVariables
+  atImport({path: ['src']}),
-} else {
+  collectVariables(),
-  const args = process.argv.slice(2)
+  require('postcss-simple-vars')({includePaths: [join(__dirname, '../src/support/variables')]})
-  const file = args.length ? args.shift() : 'src/support/index.scss'
+])
-  analyzeVariables(file).then(data => console.log(JSON.stringify(data, null, 2)))
-}
 
-function analyzeVariables(file) {
+async function analyzeVariables(fileName) {
-  const variables = {}
+  const contents = await fs.readFileSync(fileName, 'utf8')
 
-  const processor = postcss([
+  const result = await processor.process(contents, {from: fileName, map: false, syntax})
-    atImport({path: 'src'}),
+  for (const message of result.messages) {
-    variablePlugin(variables),
+    if (message.plugin === 'postcss-simple-vars' && message.type === 'variable') {
-    require('postcss-node-sass')({includePaths: ['src/support/variables']})
+      if (!result.variables[`$${message.name}`].values.includes(message.value)) {
-  ])
+        result.variables[`$${message.name}`].values.push(message.value)
-
-  return readFile(file, 'utf8')
-    .then(css => processor.process(css, {from: file, map: false, syntax}))
-    .then(({root}) => {
-      root.walkRules(':root', container => {
-        container.walkDecls(decl => {
-          const {prop, value} = decl
-          const actualProp = `$${prop.replace(/^--/, '')}`
-          const entry = variables[actualProp]
-          if (last(entry.values) !== value) {
-            entry.values.push(value)
-          }
-          if (value.match(/^var\(--.*\)/)) {
-            delete variables[actualProp]
-          } else {
-            variables[actualProp] = Object.assign(
-              {
-                computed: value
-              },
-              entry,
-              {refs: []}
-            )
-          }
-        })
-      })
-
-      for (const [prop, entry] of Object.entries(variables)) {
-        for (const value of entry.values) {
-          if (variables[value]) {
-            variables[value].refs.push(prop)
-          }
-        }
       }
-
+      const computed = message.value
-      // sort it alphabetically by key
+      result.variables[`$${message.name}`].computed = computed
-      return sortObject(variables, ([ak], [bk]) => ak.localeCompare(bk))
+    }
-    })
+  }
+  return result.variables
 }
 
-function variablePlugin(variables) {
+function checkNode(node) {
-  return (options = {}) => {
+  const allowedFuncts = ['var', 'round', 'cubic-bezier']
-    const {cwd = process.cwd()} = options
+  const functMatch = node.value.match(/([^\s]*)\(/)
-    return {
+  let approvedMatch = true
-      postcssPlugin: 'analyze-variables',
+  if (functMatch && !allowedFuncts.includes(functMatch[1])) {
-      Once(root) {
+    approvedMatch = false
-        const decls = new Map()
+  }
+  return node.variable && approvedMatch
+}
 
-        root.walkDecls(/^\$/, decl => {
+function collectVariables() {
-          const {prop, value} = decl
+  return {
-          if (decl.parent === root && !value.startsWith('(')) {
+    postcssPlugin: 'prepare-contents',
-            decl.value = value.replace(/ *!default$/, '')
+    prepare(result) {
-            decls.set(prop, decl)
+      const variables = {}
-          }
+      return {
-        })
+        AtRule(atRule) {
-
+          atRule.remove()
-        for (const [prop, decl] of decls.entries()) {
+        },
-          const {nodes} = valueParser(decl.value)
+        Comment(comment) {
-          const values = [valueParser.stringify(nodes)]
+          comment.remove()
-          while (nodes.some(node => decls.has(node.value))) {
+        },
-            for (const node of nodes) {
+        Declaration(node) {
-              const {value} = node
+          if (checkNode(node)) {
-              if (decls.has(value)) {
+            node.value = node.value.replace(' !default', '')
-                node.value = decls.get(value).value
+            const fileName = node.source.input.file.replace(`${process.cwd()}/`, '')
+            variables[node.prop] = {
+              // computed: value,
+              values: [node.value],
+              source: {
+                path: fileName,
+                line: node.source.start.line
               }
             }
-            values.push(valueParser.stringify(nodes))
+          } else {
-          }
+            node.remove()
-
-          const {source} = decl
-          variables[prop] = {
-            values,
-            source: {
-              path: source.input.file.replace(`${cwd}/`, ''),
-              line: source.start.line
-            }
           }
+        },
+        OnceExit() {
+          result.variables = variables
         }
-
-        const container = postcss.rule({selector: ':root'})
-        for (const [prop, decl] of decls.entries()) {
-          container.append(
-            postcss.decl({
-              prop: `--${prop.substr(1)}`,
-              value: `#{${decl.value}}`
-            })
-          )
-        }
-        root.append(container)
       }
     }
   }
 }
 
-function sortObject(obj, cmp) {
+if (module.parent) {
-  const out = {}
+  module.exports = analyzeVariables
-  for (const [key, value] of Object.entries(obj).sort(cmp)) {
+} else {
-    out[key] = value
+  ;(async () => {
-  }
+    const args = process.argv.slice(2)
-  return out
+    const file = args.length ? args.shift() : 'src/support/index.scss'
-}
+    const variables = await analyzeVariables(file)
-
+    console.log(JSON.stringify(variables, null, 2))
-function last(list) {
+  })()
-  return list[list.length - 1]
 }

script/dist.js

@@ -107,14 +107,10 @@ if (require.main === module) {
   dist()
 }
 
-function writeVariableData() {
+async function writeVariableData() {
   const analyzeVariables = require('./analyze-variables')
-  return Promise.all([
+  const support = await analyzeVariables('src/support/index.scss')
-    analyzeVariables('src/support/index.scss'),
+  const marketing = await analyzeVariables('src/marketing/support/index.scss')
-    analyzeVariables('src/marketing/support/index.scss')
+  const data = Object.assign({}, support, marketing)
-    /* eslint-disable-next-line github/no-then */
+  writeFile(join(outDir, 'variables.json'), JSON.stringify(data, null, 2))
-  ]).then(([support, marketing]) => {
-    const data = Object.assign({}, support, marketing)
-    writeFile(join(outDir, 'variables.json'), JSON.stringify(data, null, 2))
-  })
 }

yarn.lock

@@ -5456,13 +5456,12 @@ postcss-html@^0.36.0:
   dependencies:
     htmlparser2 "^3.10.0"
 
-postcss-import@^12.0.1:
+postcss-import@14.0.1:
-  version "12.0.1"
+  version "14.0.1"
-  resolved "https://registry.yarnpkg.com/postcss-import/-/postcss-import-12.0.1.tgz#cf8c7ab0b5ccab5649024536e565f841928b7153"
+  resolved "https://registry.yarnpkg.com/postcss-import/-/postcss-import-14.0.1.tgz#6a3f8f2ce74a95fc7c72ecfe3eddfa0e9124e677"
-  integrity sha512-3Gti33dmCjyKBgimqGxL3vcV8w9+bsHwO5UrBawp796+jdardbcFl4RP5w/76BwNL7aGzpKstIfF9I+kdE8pTw==
+  integrity sha512-Xn2+z++vWObbEPhiiKO1a78JiyhqipyrXHBb3AHpv0ks7Cdg+GxQQJ24ODNMTanldf7197gSP3axppO9yaG0lA==
   dependencies:
-    postcss "^7.0.1"
+    postcss-value-parser "^4.0.0"
-    postcss-value-parser "^3.2.3"
     read-cache "^1.0.0"
     resolve "^1.1.7"
 
@@ -5563,6 +5562,11 @@ postcss-selector-parser@^6.0.2, postcss-selector-parser@^6.0.4:
     uniq "^1.0.1"
     util-deprecate "^1.0.2"
 
+postcss-simple-vars@6.0.3:
+  version "6.0.3"
+  resolved "https://registry.yarnpkg.com/postcss-simple-vars/-/postcss-simple-vars-6.0.3.tgz#e66516c7fe980da3498f4a8ad400b9c53861806c"
+  integrity sha512-fkNn4Zio8vN4vIig9IFdb8lVlxWnYR769RgvxCM6YWlFKie/nQaOcaMMMFz/s4gsfHW4/5bJW+i57zD67mQU7g==
+
 postcss-sorting@^5.0.1:
   version "5.0.1"
   resolved "https://registry.yarnpkg.com/postcss-sorting/-/postcss-sorting-5.0.1.tgz#10d5d0059eea8334dacc820c0121864035bc3f11"
@@ -5576,12 +5580,7 @@ postcss-syntax@^0.36.2:
   resolved "https://registry.yarnpkg.com/postcss-syntax/-/postcss-syntax-0.36.2.tgz#f08578c7d95834574e5593a82dfbfa8afae3b51c"
   integrity sha512-nBRg/i7E3SOHWxF3PpF5WnJM/jQ1YpY9000OaVXlAQj6Zp/kIqJxEDWIZ67tAd7NLuk7zqN4yqe9nc0oNAOs1w==
 
-postcss-value-parser@^3.2.3:
+postcss-value-parser@^4.0.0, postcss-value-parser@^4.0.2, postcss-value-parser@^4.1.0:
-  version "3.3.1"
-  resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-3.3.1.tgz#9ff822547e2893213cf1c30efa51ac5fd1ba8281"
-  integrity sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ==
-
-postcss-value-parser@^4.0.2, postcss-value-parser@^4.1.0:
   version "4.1.0"
   resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-4.1.0.tgz#443f6a20ced6481a2bda4fa8532a6e55d789a2cb"
   integrity sha512-97DXOFbQJhk71ne5/Mt6cOu6yxsSfM0QGQyl0L25Gca4yGWEGJaig7l7gbCX623VqTBNGLRLaVUCnNkcedlRSQ==
@@ -5595,7 +5594,7 @@ postcss-values-parser@^4.0.0:
     is-url-superb "^4.0.0"
     postcss "^7.0.5"
 
-postcss@^7.0.0, postcss@^7.0.1, postcss@^7.0.14, postcss@^7.0.17, postcss@^7.0.2, postcss@^7.0.21, postcss@^7.0.26, postcss@^7.0.31, postcss@^7.0.32, postcss@^7.0.35, postcss@^7.0.5, postcss@^7.0.6:
+postcss@^7.0.0, postcss@^7.0.14, postcss@^7.0.17, postcss@^7.0.2, postcss@^7.0.21, postcss@^7.0.26, postcss@^7.0.31, postcss@^7.0.32, postcss@^7.0.35, postcss@^7.0.5, postcss@^7.0.6:
   version "7.0.35"
   resolved "https://registry.yarnpkg.com/postcss/-/postcss-7.0.35.tgz#d2be00b998f7f211d8a276974079f2e92b970e24"
   integrity sha512-3QT8bBJeX/S5zKTTjTCIjRF3If4avAT6kqxcASlTWEtAFCb9NH0OUxNDfgZSWdP5fJnBYCMEWkIFfWeugjzYMg==