Skip to content

Commit 88f1e2b

Browse files
committed
Skip orphaned CSS without a matching .pcss
The prune step removes orphaned .css before a build, but export-css-selectors itself still mapped any stray .css it globbed into static/classes.json -- so a leftover file, or running the script directly, could re-introduce dead component selectors. Filters the glob to .css that still have a sibling .pcss for folders generated from .pcss (app/components/primer). Hand-authored stylesheets under app/lib/primer/css have no .pcss and are left untouched via a requireSource flag, so their per-file json keeps generating.
1 parent 94294c3 commit 88f1e2b

1 file changed

Lines changed: 9 additions & 3 deletions

File tree

script/export-css-selectors

Lines changed: 9 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22

33
const postcss = require('postcss')
44
const { readFile, writeFile } = require('node:fs/promises')
5+
const { existsSync } = require('node:fs')
56
const {glob} = require('glob')
67
const CSSwhat = require('css-what')
78

@@ -12,13 +13,18 @@ const snakeToCamelCase = (s) => s.split('_').map(capitalize).join('')
1213
const componentNameToRubyClass = (componentName) =>
1314
'Primer::' + componentName.split('/').map(snakeToCamelCase).join('::')
1415

15-
const exportSelectors = (folder) => {
16+
const exportSelectors = (folder, {requireSource = false} = {}) => {
1617
const folderGlob = `${folder}/**/*.css`
1718
const componentNameRegex = new RegExp(`${folder.replace('/','\\/')}\\/(.*).css`)
1819

1920
return glob(folderGlob).then(files =>
2021
Promise.all(
21-
files.map(async (file) => {
22+
files
23+
// When the .css is generated from a .pcss, skip any orphaned .css left
24+
// behind by a renamed or removed component so its dead selectors don't
25+
// leak into static/classes.json.
26+
.filter(file => !requireSource || existsSync(file.replace(/\.css$/, '.pcss')))
27+
.map(async (file) => {
2228
console.log(`Processing ${file}`)
2329
const css = await readFile(file, 'utf8')
2430
const root = postcss.parse(css)
@@ -66,7 +72,7 @@ const exportSelectors = (folder) => {
6672
const classShouldBeReserved = className =>
6773
(className[0].toUpperCase() === className[0])
6874

69-
exportSelectors('app/components/primer')
75+
exportSelectors('app/components/primer', {requireSource: true})
7076
.then(classLists => {
7177
const htmlClassToRubyClasses = {}
7278

0 commit comments

Comments
 (0)