primer/css
1
1
Fork 0
mirror of https://github.com/primer/css.git synced 2024-12-23 06:01:54 +03:00
Code Issues Projects Releases Wiki Activity

Fixing analyze-variables script

Browse Source
This commit is contained in:
Jon Rohan 2021-04-08 19:34:17 -07:00
parent 63764f7edd
commit 07c8d5aebc
No known key found for this signature in database
GPG Key ID: B0BBE304A9A0AECB
5 changed files with 87 additions and 133 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
__tests__/css.test.js
View File

@ -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

4
package.json
View File

@ -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",

172
script/analyze-variables.js
View File

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

14
script/dist.js
View File

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

25
yarn.lock
View File

@ -5456,13 +5456,12 @@ postcss-html@^0.36.0:
dependencies:
htmlparser2 "^3.10.0"
postcss-import@^12.0.1:
version "12.0.1"
resolved "https://registry.yarnpkg.com/postcss-import/-/postcss-import-12.0.1.tgz#cf8c7ab0b5ccab5649024536e565f841928b7153"
integrity sha512-3Gti33dmCjyKBgimqGxL3vcV8w9+bsHwO5UrBawp796+jdardbcFl4RP5w/76BwNL7aGzpKstIfF9I+kdE8pTw==
postcss-import@14.0.1:
version "14.0.1"
resolved "https://registry.yarnpkg.com/postcss-import/-/postcss-import-14.0.1.tgz#6a3f8f2ce74a95fc7c72ecfe3eddfa0e9124e677"
integrity sha512-Xn2+z++vWObbEPhiiKO1a78JiyhqipyrXHBb3AHpv0ks7Cdg+GxQQJ24ODNMTanldf7197gSP3axppO9yaG0lA==
dependencies:
postcss "^7.0.1"
postcss-value-parser "^3.2.3"
postcss-value-parser "^4.0.0"
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:
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:
postcss-value-parser@^4.0.0, 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==