Add @primer/css/classnames export with a Set of all classnames (#3080)

* Add @primer/css/classnames export with a Set of all classnames

Generate dist/classnames.js during the dist build containing a Set of every unique bare class token across all bundles, and expose it via a new package.json exports map (with a wildcard fallback to preserve existing deep imports).

* Updating package-lock

* Make classnames export a dual ESM/CJS build with types

Emit dist/classnames.cjs (module.exports = new Set) and dist/classnames.d.ts alongside the ESM build, and make the ./classnames subpath a conditional export (types/import/require) so CommonJS consumers can require() it.

Author: jonrohan

.changeset/eleven-dots-push.md

@@ -0,0 +1,5 @@
+---
+'@primer/css': minor
+---
+
+Adding a classnames export that has a list of all unique CSS classes in the library

__tests__/css.test.js

@@ -6,6 +6,7 @@ import {
   currentVersionDeprecations
 } from './utils/css'
 import semver from 'semver'
+import {createRequire} from 'module'
 
 let selectorsDiff, variablesDiff, version
 
@@ -31,3 +32,35 @@ describe('deprecations', () => {
     })
   })
 })
+
+describe('classnames', () => {
+  let classNames
+
+  beforeAll(async () => {
+    classNames = (await import('../dist/classnames.js')).default
+  })
+
+  it('exports a non-empty Set', () => {
+    expect(classNames).toBeInstanceOf(Set)
+    expect(classNames.size).toBeGreaterThan(0)
+  })
+
+  it('contains known classnames', () => {
+    expect(classNames.has('btn')).toBe(true)
+    expect(classNames.has('Box-body')).toBe(true)
+    expect(classNames.has('d-flex')).toBe(true)
+  })
+
+  it('contains bare tokens without a leading dot', () => {
+    for (const className of classNames) {
+      expect(className.startsWith('.')).toBe(false)
+    }
+  })
+
+  it('exposes the same Set from the CommonJS build', () => {
+    const require = createRequire(import.meta.url)
+    const cjsClassNames = require('../dist/classnames.cjs')
+    expect(cjsClassNames).toBeInstanceOf(Set)
+    expect([...cjsClassNames].sort()).toEqual([...classNames].sort())
+  })
+})

package-lock.json

@@ -12,6 +12,15 @@
   "sass": "index.scss",
   "type": "module",
   "main": "dist/primer.js",
+  "exports": {
+    ".": "./dist/primer.js",
+    "./classnames": {
+      "types": "./dist/classnames.d.ts",
+      "import": "./dist/classnames.js",
+      "require": "./dist/classnames.cjs"
+    },
+    "./*": "./*"
+  },
   "repository": {
     "type": "git",
     "url": "git+https://github.com/primer/css.git"

package.json

@@ -26,6 +26,7 @@ const bundleNames = {
 async function dist() {
   try {
     const bundles = {}
+    const classNames = new Set()
 
     await remove(outDir)
     await mkdirp(statsDir)
@@ -61,9 +62,14 @@ async function dist() {
         throw new Error(`Warnings while compiling ${from}.  See output above.`)
       }
 
+      const stats = cssstats(result.css)
+      for (const className of getClassNames(stats.selectors.values)) {
+        classNames.add(className)
+      }
+
       await Promise.all([
         writeFile(to, result.css, encoding),
-        writeFile(meta.stats, JSON.stringify(cssstats(result.css)), encoding),
+        writeFile(meta.stats, JSON.stringify(stats), encoding),
         writeFile(meta.js, `export {cssstats: require('./stats/${name}.json')}`, encoding),
         result.map ? writeFile(meta.map, result.map.toString(), encoding) : null
       ])
@@ -74,6 +80,7 @@ async function dist() {
 
     const meta = {bundles}
     await writeFile(join(outDir, 'meta.json'), JSON.stringify(meta, null, 2), encoding)
+    await writeClassNames(classNames)
     await writeVariableData()
     await copy(join(inDir, 'deprecations.json'), join(outDir, 'deprecations.json'))
   } catch (error) {
@@ -97,6 +104,34 @@ function getPathName(path) {
   return path.replace(/\//g, '-')
 }
 
+// Extract the bare class tokens (without the leading dot) from a list of
+// selector strings, e.g. ".Box-row:hover .btn" -> ["Box-row", "btn"].
+function getClassNames(selectors) {
+  const names = new Set()
+  const pattern = /\.((?:\\.|[\w-])+)/g
+  for (const selector of selectors) {
+    let match
+    while ((match = pattern.exec(selector)) !== null) {
+      names.add(match[1].replace(/\\(.)/g, '$1'))
+    }
+  }
+  return names
+}
+
+async function writeClassNames(classNames) {
+  const sorted = [...classNames].sort()
+  const list = JSON.stringify(sorted, null, 2)
+  await Promise.all([
+    writeFile(join(outDir, 'classnames.js'), `export default new Set(${list})\n`, encoding),
+    writeFile(join(outDir, 'classnames.cjs'), `module.exports = new Set(${list})\n`, encoding),
+    writeFile(
+      join(outDir, 'classnames.d.ts'),
+      `declare const classNames: Set<string>\nexport default classNames\n`,
+      encoding
+    )
+  ])
+}
+
 dist()
 
 async function writeVariableData() {