Convert package to a ES module (#1528)

* Set package as being a ES module package

* Set `engines` key to node versions that support ES modules

* Rename postcss config to a CommonJS extension

* Use import and export statements

* Import the default globby export

* Set stylelint config files as CommonJS files

* Convert prettier config to a CommonJS module

* Set a root ESLint config folder

* silence non-error output for dist

* export esm for stats modules

* Convert bundle size report

* Create strong-lemons-ring.md

Co-authored-by: Jon Rohan <yes@jonrohan.codes>

.changeset/strong-lemons-ring.md

@@ -0,0 +1,5 @@
+---
+"@primer/css": patch
+---
+
+Convert package to a ES module

.eslintrc.json

@@ -0,0 +1,7 @@
+{
+  "root": true,
+  "parserOptions": {
+    "sourceType": "module",
+    "ecmaVersion": "latest"
+  }
+}

deprecations.js

@@ -1,3 +1,5 @@
+import fs from 'fs'
+
 /*
  * This object's keys are (semver) version numbers, and the
  * values are arrays of objects each with a "selectors"
@@ -702,8 +704,9 @@ const versionDeprecations = {
   ]
 }
 
-const {version: CURRENT_VERSION} = require('./package.json')
-const semver = require('semver')
+import semver from 'semver'
+const pkg = JSON.parse(fs.readFileSync('./package.json'))
+const {version: CURRENT_VERSION} = pkg
 
 // map selectors to the version and message of their deprecation
 const selectorDeprecations = new Map()
@@ -729,7 +732,7 @@ function isVariableDeprecated(variable, version = CURRENT_VERSION) {
   return deprecation ? semver.gte(deprecation.version, version) : false
 }
 
-module.exports = {
+export {
   versionDeprecations,
   selectorDeprecations,
   variableDeprecations,

package.json

@@ -4,9 +4,11 @@
   "description": "The CSS implementation of GitHub's Primer Design System",
   "homepage": "https://primer.style/css",
   "author": "GitHub, Inc.",
+  "engines": {"node": "^12.20.0 || ^14.13.1 || >=16.0.0"},
   "license": "MIT",
   "style": "dist/primer.css",
   "sass": "index.scss",
+  "type": "module",
   "main": "dist/primer.js",
   "repository": "https://github.com/primer/css",
   "bugs": {

script/analyze-variables.js

@@ -1,19 +1,25 @@
 #!/usr/bin/env node
-const postcss = require('postcss')
-const {join} = require('path')
-const fs = require('fs')
-const atImport = require('postcss-import')
-const syntax = require('postcss-scss')
-const calc = require('postcss-calc')
+import postcss from 'postcss'
+import {join} from 'path'
+import fs from 'fs'
+import atImport from 'postcss-import'
+import syntax from 'postcss-scss'
+import calc from 'postcss-calc'
+import simpleVars from 'postcss-simple-vars'
+
+import { dirname } from 'path';
+import { fileURLToPath } from 'url';
+
+const __dirname = dirname(fileURLToPath(import.meta.url));
 
 const processor = postcss([
   atImport({path: ['src']}),
   collectVariables(),
-  require('postcss-simple-vars')({includePaths: [join(__dirname, '../src/support/variables')]})
+  simpleVars({includePaths: [join(__dirname, '../src/support/variables')]})
 ])
 
 async function analyzeVariables(fileName) {
-  const contents = await fs.readFileSync(fileName, 'utf8')
+  const contents = fs.readFileSync(fileName, 'utf8')
 
   const result = await processor.process(contents, {from: fileName, map: false, syntax})
   for (const message of result.messages) {
@@ -81,13 +87,11 @@ function collectVariables() {
   }
 }
 
-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))
-  })()
-}
+export default analyzeVariables
+
+;(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))
+})()

script/bundle-size-report.js

@@ -1,24 +1,30 @@
 #!/usr/bin/env node
-const {join} = require('path')
-const filesize = require('filesize')
-const {table} = require('table')
+import { join } from 'path'
+import { table } from 'table'
+import { dirname } from 'path'
+import { fileURLToPath } from 'url'
+import filesize  from 'filesize'
+import fs from 'fs'
+
+const __dirname = dirname(fileURLToPath(import.meta.url))
 
 // ensure that K and B values line up vertically
 const filesizeConfig = {symbols: {KB: 'K'}}
 const prettySize = bytes => filesize(bytes, filesizeConfig)
 
 function getBundles(path) {
-  const meta = require(join(path, './dist/meta.json'))
+  const meta = JSON.parse(fs.readFileSync(join(path, './dist/meta.json')))
   let metaBundles = Object.values(meta.bundles)
 
   // fitler out support bundles, since they don't generate CSS
   metaBundles = metaBundles.filter(bundle => !isSupportBundleName(bundle.name))
   const bundles = {}
   for (const bundle of metaBundles) {
+    const stats = JSON.parse(fs.readFileSync(join(path, `./${bundle.stats}`)))
     const entry = {
       name: bundle.name,
       path: bundle.css,
-      stats: require(join(path, `./${bundle.stats}`))
+      stats: stats
     }
     bundles[bundle.name] = entry
   }

script/dist.js

@@ -1,10 +1,15 @@
 #!/usr/bin/env node
-const globby = require('globby')
-const cssstats = require('cssstats')
-const postcss = require('postcss')
-const loadConfig = require('postcss-load-config')
-const {remove, mkdirp, readFile, writeFile} = require('fs-extra')
-const {dirname, join} = require('path')
+import globby from 'globby'
+import cssstats from 'cssstats'
+import postcss from 'postcss'
+import loadConfig from 'postcss-load-config'
+import {dirname, join} from 'path'
+
+import {versionDeprecations, selectorDeprecations, variableDeprecations} from '../deprecations.js'
+import analyzeVariables from './analyze-variables.js'
+
+import fsExtra from 'fs-extra'
+const {remove, mkdirp, readFile, writeFile} = fsExtra
 
 const inDir = 'src'
 const outDir = 'dist'
@@ -53,7 +58,7 @@ async function dist() {
       await Promise.all([
         writeFile(to, result.css, encoding),
         writeFile(meta.stats, JSON.stringify(cssstats(result.css)), encoding),
-        writeFile(meta.js, `module.exports = {cssstats: require('./stats/${name}.json')}`, encoding),
+        writeFile(meta.js, `export {cssstats: require('./stats/${name}.json')}`, encoding),
         result.map ? writeFile(meta.map, result.map.toString(), encoding) : null
       ])
       bundles[name] = meta
@@ -87,7 +92,6 @@ function getPathName(path) {
 }
 
 function writeDeprecationData() {
-  const {versionDeprecations, selectorDeprecations, variableDeprecations} = require('../deprecations')
   const data = {
     versions: versionDeprecations,
     selectors: mapToObject(selectorDeprecations),
@@ -103,12 +107,9 @@ function writeDeprecationData() {
   }
 }
 
-if (require.main === module) {
-  dist()
-}
+dist()
 
 async function writeVariableData() {
-  const analyzeVariables = require('./analyze-variables')
   const support = await analyzeVariables('src/support/index.scss')
   const marketing = await analyzeVariables('src/marketing/support/index.scss')
   const data = Object.assign({}, support, marketing)

script/prepublish

@@ -2,7 +2,7 @@
 set -e
 
 # generate the build directory
-yarn dist
+yarn dist > /dev/null
 
 files=$(git ls-files src | sed -e 's#^src/##' | sed -e 's#/.*$##' | sort -u)
 echo $files > publish-files.log

stylelint.config.cjs

@@ -2,7 +2,7 @@ const currentVersion = process.env.PRIMER_VERSION || require('./package.json').v
 
 module.exports = {
   extends: ['stylelint-config-primer'],
-  plugins: ['stylelint-scss', './script/stylelint-todo'],
+  plugins: ['stylelint-scss', './script/stylelint-todo.cjs'],
   syntax: 'scss',
   ignoreFiles: ['src/fonts/**/*'],
   rules: {