From 303cacae77244a9e0de02b4caee2a8c01097aced Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Kristj=C3=A1n=20Oddsson?= Date: Wed, 11 Aug 2021 22:10:47 +0100 Subject: [PATCH] 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 --- .changeset/strong-lemons-ring.md | 5 +++ .eslintrc.json | 7 ++++ deprecations.js | 9 +++-- package.json | 2 + postcss.config.js => postcss.config.cjs | 0 prettier.config.js => prettier.config.cjs | 0 script/analyze-variables.js | 40 ++++++++++--------- script/bundle-size-report.js | 16 +++++--- script/dist.js | 25 ++++++------ script/prepublish | 2 +- .../{stylelint-todo.js => stylelint-todo.cjs} | 0 stylelint.config.js => stylelint.config.cjs | 2 +- 12 files changed, 68 insertions(+), 40 deletions(-) create mode 100644 .changeset/strong-lemons-ring.md create mode 100644 .eslintrc.json rename postcss.config.js => postcss.config.cjs (100%) rename prettier.config.js => prettier.config.cjs (100%) rename script/{stylelint-todo.js => stylelint-todo.cjs} (100%) rename stylelint.config.js => stylelint.config.cjs (91%) diff --git a/.changeset/strong-lemons-ring.md b/.changeset/strong-lemons-ring.md new file mode 100644 index 00000000..012099b8 --- /dev/null +++ b/.changeset/strong-lemons-ring.md @@ -0,0 +1,5 @@ +--- +"@primer/css": patch +--- + +Convert package to a ES module diff --git a/.eslintrc.json b/.eslintrc.json new file mode 100644 index 00000000..f1afcf34 --- /dev/null +++ b/.eslintrc.json @@ -0,0 +1,7 @@ +{ + "root": true, + "parserOptions": { + "sourceType": "module", + "ecmaVersion": "latest" + } +} diff --git a/deprecations.js b/deprecations.js index 652bfc8e..49f7dd7e 100644 --- a/deprecations.js +++ b/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, diff --git a/package.json b/package.json index c4d45fbc..417c6b13 100644 --- a/package.json +++ b/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": { diff --git a/postcss.config.js b/postcss.config.cjs similarity index 100% rename from postcss.config.js rename to postcss.config.cjs diff --git a/prettier.config.js b/prettier.config.cjs similarity index 100% rename from prettier.config.js rename to prettier.config.cjs diff --git a/script/analyze-variables.js b/script/analyze-variables.js index 3bfd3ac0..a2eb811e 100755 --- a/script/analyze-variables.js +++ b/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)) +})() diff --git a/script/bundle-size-report.js b/script/bundle-size-report.js index e642def2..052d1229 100755 --- a/script/bundle-size-report.js +++ b/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 } diff --git a/script/dist.js b/script/dist.js index b78849df..4bc769ed 100755 --- a/script/dist.js +++ b/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) diff --git a/script/prepublish b/script/prepublish index 8c4ed534..e15fa9d9 100755 --- a/script/prepublish +++ b/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 diff --git a/script/stylelint-todo.js b/script/stylelint-todo.cjs similarity index 100% rename from script/stylelint-todo.js rename to script/stylelint-todo.cjs diff --git a/stylelint.config.js b/stylelint.config.cjs similarity index 91% rename from stylelint.config.js rename to stylelint.config.cjs index 4c340460..3301ecff 100644 --- a/stylelint.config.js +++ b/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: {