fix: cjs build

Author: jonathantneal

.bin/build.js

@@ -2,45 +2,65 @@ import esbuild from 'esbuild'
 import fs from 'node:fs/promises'
 import zlib from 'node:zlib'
 
+/** @typedef {{ [name: string]: string }} Exports */
+/** @typedef {{ extension: string, transform(code: string, exports: Exports): string }} Variant */
+/** @type {{ [name: string]: Variant }} */
 const variants = {
 	esm: {
 		extension: 'mjs',
 		transform(code, exports) {
+			/** @type {string[]} */
 			const esmExports = []
 			for (const name in exports) esmExports.push(`${exports[name]} as ${name}`)
-			return `${code}export{${esmExports.join(',')}}`
+			return (
+				esmExports.length
+					? `${code}export{${esmExports.join(',')}}`
+				: code
+			)
 		},
 	},
 	cjs: {
 		extension: 'cjs',
 		transform(code, exports) {
-			const cjsExports = ['__esModule:!0']
+			/** @type {string[]} */
+			const cjsExports = []
 			for (const name in exports) cjsExports.push(`${name}:${exports[name]}`)
-			return `${code}module.exports={${cjsExports.join(',')}}`
+			return (
+				cjsExports.length
+					? 'default' in exports
+						? `${code}module.exports=Object.assign(${exports.default},{${cjsExports.join(',')}})`
+					: `${code}module.exports={${cjsExports.join(',')}}`
+				: code
+			)
 		},
 	},
 }
 
-async function buildPackage(src) {
-	const packageUrl = src
-	const initPackageUrl = new URL('src/', packageUrl)
-	const distPackageUrl = new URL('dist/', packageUrl)
+/** @type {(pkgUrl: URL, name: string) => Promise<void>} */
+async function buildPackage(pkgUrl, base) {
+	const srcDirUrl = new URL(`src/`, pkgUrl)
+	const outDirUrl = new URL(`${base}/`, pkgUrl)
 
-	const packageJsonUrl = new URL(`package.json`, packageUrl)
-	const packageName = JSON.parse(await fs.readFile(packageJsonUrl, 'utf8')).name
+	/** @type {{ name: string }} */
+	const { name } = JSON.parse(
+		await fs.readFile(
+			new URL('package.json', pkgUrl),
+			'utf8'
+		)
+	)
 
-	console.log(packageName)
+	console.log(base)
 	console.log()
 
-	const targetPathname = new URL('index.js', initPackageUrl).pathname
-	const outputPathname = new URL('index.js', distPackageUrl).pathname
+	const srcPath = new URL(`${base}.js`, srcDirUrl).pathname
+	const outPath = new URL(`${base}.js`, outDirUrl).pathname
 
 	// Build ESM version
 	const {
 		outputFiles: [cmapResult, codeResult],
 	} = await esbuild.build({
-		entryPoints: [targetPathname],
-		outfile: outputPathname,
+		entryPoints: [srcPath],
+		outfile: outPath,
 		bundle: true,
 		format: 'esm',
 		sourcemap: 'external',
@@ -52,28 +72,53 @@ async function buildPackage(src) {
 	const map = cmapResult.text
 
 	// ensure empty dist directory
-	await fs.mkdir(distPackageUrl, { recursive: true })
+	await fs.mkdir(outDirUrl, { recursive: true })
 
 	// write map
-	fs.writeFile(new URL(`index.map`, distPackageUrl), map)
+	await fs.writeFile(new URL(`${name}.map`, outDirUrl), map)
 
 	// prepare variations
+	/** @type {(code: string, index?: number) => [string, string]} */
 	const splitByExport = (code, index = code.indexOf('export')) => [code.slice(0, index), code.slice(index)]
 	const [lead, tail] = splitByExport(code)
 
+	/** @type {{ [name: string]: string }} */
 	const exports = Array.from(tail.matchAll(/([$\w]+) as (\w+)/g)).reduce((exports, each) => Object.assign(exports, { [each[2]]: each[1] }), Object.create(null))
 
 	// write variation builds
 	for (const variant in variants) {
+		/** @type {Variant} */
 		const variantInfo = variants[variant]
-		const variantPath = new URL(`dist/index.${variantInfo.extension}`, packageUrl).pathname
+		const variantPath = new URL(`${base}/${name}.${variantInfo.extension}`, pkgUrl).pathname
 		const variantCode = variantInfo.transform(lead, exports)
 		const variantSize = (Buffer.byteLength(variantCode, 'utf8') / 1000).toFixed()
 		const variantGzip = Number((zlib.gzipSync(variantCode, { level: 9 }).length / 1000).toFixed(2))
 
 		console.log(' ', `\x1b[33m${variantSize} kB\x1b[0m \x1b[2m/\x1b[0m \x1b[33m${variantGzip} kB\x1b[0m`, `\x1b[2m(${variant})\x1b[0m`)
 
 		await fs.writeFile(variantPath, variantCode + `\n//# sourceMappingUrl=index.map`)
+
+		const packageJSON = JSON.stringify({
+			private: true,
+			type: 'module',
+			main: `${name}.cjs`,
+			module: `${name}.mjs`,
+			jsdelivr: `${name}.mjs`,
+			unpkg: `${name}.mjs`,
+			files: [
+				`${name}.cjs`,
+				`${name}.mjs`
+			],
+			exports: {
+				'.': {
+					import: `./${name}.mjs`,
+					require: `./${name}.cjs`,
+					default: `./${name}.mjs`
+				}
+			}
+		}, null, '  ')
+
+		await fs.writeFile(new URL('package.json', outDirUrl), packageJSON)
 	}
 }
 
@@ -84,9 +129,11 @@ const argvUrl = new URL(process.argv[1], 'file:')
 
 if (metaUrl.href === argvUrl.href) {
 	/** Root directory. */
-	const rootUrl = new URL('../', metaUrl)
+	const pkgUrl = new URL('../', metaUrl)
 
 	console.log()
+	await buildPackage(pkgUrl, 'postcss-8-nesting')
 
-	await buildPackage(rootUrl)
+	console.log()
+	await buildPackage(pkgUrl, 'postcss-7-nesting')
 }

.bin/test-tape.js

@@ -3,7 +3,7 @@ import { promises as fs } from 'node:fs'
 import postcss from 'postcss'
 import process from 'node:process'
 
-import plugin from '../src/index.js'
+import plugin from '../src/postcss-8-nesting.js'
 
 let workingUrl = new URL(`${process.cwd()}/`, `file:`)
 

.gitignore

@@ -1,6 +1,6 @@
-dist
 node_modules
-index.*.*
+postcss-7-nesting
+postcss-8-nesting
 package-lock.json
 yarn.lock
 *.log*

.rollup.js

@@ -4,19 +4,37 @@
   "license": "CC0-1.0",
   "version": "8.0.0",
   "type": "module",
-  "main": "dist/index.cjs",
-  "module": "dist/index.mjs",
-  "typings": "dist/index.d.ts",
+  "main": "postcss-8-nesting/postcss-nesting.cjs",
+  "module": "postcss-8-nesting/postcss-nesting.mjs",
+  "jsdelivr": "postcss-8-nesting/postcss-nesting.mjs",
+  "unpkg": "postcss-8-nesting/postcss-nesting.mjs",
   "publishConfig": {
     "access": "public"
   },
   "author": "Jonathan Neal <[email protected]>",
   "bugs": "https://github.com/csstools/postcss-nesting/issues",
   "homepage": "https://github.com/csstools/postcss-nesting#readme",
   "repository": "csstools/postcss-nesting",
+  "exports": {
+    ".": {
+      "import": "./postcss-8-nesting/postcss-nesting.mjs",
+      "require": "./postcss-8-nesting/postcss-nesting.cjs",
+      "default": "./postcss-8-nesting/postcss-nesting.mjs"
+    },
+    "./postcss-7-nesting": {
+      "import": "./postcss-7-nesting/postcss-nesting.mjs",
+      "require": "./postcss-7-nesting/postcss-nesting.cjs",
+      "default": "./postcss-7-nesting/postcss-nesting.mjs"
+    },
+    "./postcss-8-nesting": {
+      "import": "./postcss-8-nesting/postcss-nesting.mjs",
+      "require": "./postcss-8-nesting/postcss-nesting.cjs",
+      "default": "./postcss-8-nesting/postcss-nesting.mjs"
+    }
+  },
   "files": [
-    "dist",
-    "postcss-7"
+    "postcss-7-nesting",
+    "postcss-8-nesting"
   ],
   "scripts": {
     "prepublishOnly": "npm test",
@@ -26,9 +44,10 @@
     "test:tape": "node .bin/test-tape.js"
   },
   "devDependencies": {
-    "esbuild": "0.11.15",
+    "esbuild": "0.11.17",
     "eslint": "7.25.0",
     "eslint-config-dev": "2.0.0",
+    "nodemon": "2.0.7",
     "postcss": "8.2.6",
     "pre-commit": "1.2.2"
   },

package.json

@@ -1,6 +1,6 @@
-const postcssNesting = require('../dist/index.cjs').default
+import postcssNesting from './postcss-8-nesting.js'
 
-module.exports = Object.defineProperties(postcssNesting, Object.getOwnPropertyDescriptors({
+export default Object.defineProperties(postcssNesting, Object.getOwnPropertyDescriptors({
 	get postcss() {
 		function postcssPlugin(cssRoot) {
 			const visitors = postcssNesting()