Merge branch 'master' into metrics-frequency-data

.changeset/chilly-cougars-shave.md

@@ -0,0 +1,32 @@
+---
+'@capsizecss/vanilla-extract': major
+'@capsizecss/metrics': major
+'@capsizecss/unpack': major
+'@capsizecss/core': major
+---
+
+Precompile Capsize packages with [Crackle]
+
+Migrating Capsize packages to be precompiled with [Crackle], with a key change being Crackle now handles entry points instead of [Preconstruct].
+
+Other benefits include:
+- Modern module entry point syntax using the ["exports" field] with better tooling compatibility.
+- Improved types and better ESM and CJS compatibility
+- Better alignment between compiled code and module entry points
+
+### BREAKING CHANGES:
+
+#### API changes
+
+While technically a breaking change, consumers of Capsize's public APIs are not affected by this change.
+If you are affected due to reaching into package internals, please get in touch and see if we can find a more maintainable approach.
+
+#### TypeScript
+
+TypeScript consumers should ensure they are using a compatible [`moduleResolution` strategy in TSConfig] — either `node16`, `nodenext` or `bundler`. This will ensure types are correctly resolved across the different module specifications.
+
+
+[Crackle]: https://github.com/seek-oss/crackle?tab=readme-ov-file#-crackle-
+[Preconstruct]: https://preconstruct.tools/
+["exports" field]: https://nodejs.org/api/packages.html#exports
+[`moduleResolution` strategy in tsconfig]: https://www.typescriptlang.org/tsconfig#moduleResolution

.changeset/sweet-weeks-play.md

@@ -0,0 +1,7 @@
+---
+'@capsizecss/vanilla-extract': patch
+---
+
+Fix ESM compatibility of generated CSS module
+
+When consumed via ESM, the generated CSS module had a bug which could result in missing Vanilla Extract file scopes.

.gitignore

@@ -2,7 +2,6 @@ node_modules
 *.log
 .cache/
 .DS_Store
-.vscode/
 coverage/
 storybook-static
 tsconfig.tsbuildinfo
@@ -13,4 +12,4 @@ packages/core/README.md
 
 # site
 .cache/
-public
+public

.npmrc

@@ -4,5 +4,5 @@ prefer-workspace-packages=true
 public-hoist-pattern[]="*eslint*"
 public-hoist-pattern[]="*prettier*"
 
-# Polyfills are only used in the site, but with `preconstruct dev` they are imported by our own code
+# Polyfills are only used in the site, but in dev mode they are imported by our own code
 public-hoist-pattern[]="vite-plugin-node-polyfills"

.prettierignore

@@ -7,8 +7,7 @@ storybook-static
 site/public
 output
 packages/metrics/scripts/googleFontsApi.json
-packages/metrics/*.js
-packages/metrics/*.d.ts
+packages/metrics/entireMetricsCollection/*
 packages/unpack/src/weightings.ts
 CHANGELOG.md
 pnpm-lock.yaml

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+  "typescript.tsdk": "node_modules/typescript/lib"
+}

babel.config.js

@@ -1,7 +1,6 @@
 module.exports = {
   presets: [
     '@babel/preset-typescript',
-    ['@babel/preset-env', { targets: { node: 16, browsers: 'since 2017-06' } }],
+    ['@babel/preset-env', { bugfixes: true, targets: { node: 'current' } }],
   ],
-  plugins: ['@vanilla-extract/babel-plugin'],
 };

package.json

@@ -3,38 +3,34 @@
   "version": "0.0.0",
   "private": true,
   "scripts": {
+    "%metrics": "pnpm --filter=@capsizecss/metrics",
+    "%packages": "pnpm --filter='@capsizecss/*' --aggregate-output",
+    "%site": "pnpm --filter=./site",
     "start": "pnpm site:start",
     "test": "jest",
     "format": "prettier --write .",
     "lint": "manypkg check && prettier --check . && tsc",
-    "build:prepare": "pnpm unpack:build && preconstruct build",
-    "build": "pnpm build:prepare && pnpm metrics:build",
+    "dev": "pnpm generate && pnpm %packages dev",
+    "build": "pnpm generate && pnpm %packages build && pnpm metrics:generate",
+    "generate": "pnpm unpack:generate && pnpm metrics:generate",
     "copy-readme": "node scripts/copy-readme",
     "version": "changeset version && pnpm install --lockfile-only",
     "prepare-release": "pnpm copy-readme && pnpm build",
     "release": "pnpm prepare-release && pnpm site:build && pnpm site:deploy && changeset publish",
     "chromatic": "chromatic",
     "storybook": "start-storybook --quiet --port 6006",
     "storybook:build": "build-storybook",
-    "site:start": "pnpm --filter=./site start",
-    "site:build": "pnpm --filter=./site build",
-    "site:serve": "pnpm --filter=./site serve",
-    "site:deploy": "pnpm --filter=./site run deploy",
-    "site:deploy-preview": "pnpm build && pnpm --filter=./site deploy-preview",
-    "metrics:build-system": "pnpm build:prepare && pnpm --filter=@capsizecss/metrics extract-system-metrics",
-    "metrics:build": "pnpm --filter=@capsizecss/metrics build",
-    "metrics:clean": "pnpm --filter=@capsizecss/metrics clean",
-    "metrics:download": "pnpm --filter=@capsizecss/metrics download",
-    "unpack:build": "pnpm --filter=@capsizecss/unpack build",
-    "prepare": "preconstruct dev && (is-ci || husky install)"
-  },
-  "preconstruct": {
-    "packages": [
-      "packages/core",
-      "packages/metrics",
-      "packages/unpack",
-      "packages/vanilla-extract"
-    ]
+    "site:start": "pnpm %site start",
+    "site:build": "pnpm %site build",
+    "site:serve": "pnpm %site serve",
+    "site:deploy": "pnpm %site run deploy",
+    "site:deploy-preview": "pnpm generate && pnpm %site deploy-preview",
+    "metrics:extract-system": "pnpm %metrics extract-system-metrics",
+    "metrics:generate": "pnpm %metrics generate",
+    "metrics:clean": "pnpm %metrics clean",
+    "metrics:download": "pnpm %metrics download",
+    "unpack:generate": "pnpm --filter=@capsizecss/unpack generate",
+    "prepare": "pnpm dev && (is-ci || husky install)"
   },
   "author": {
     "name": "Michael Taranto",
@@ -52,8 +48,8 @@
     "@babel/preset-typescript": "^7.23.3",
     "@changesets/changelog-github": "^0.5.0",
     "@changesets/cli": "^2.27.1",
+    "@crackle/cli": "^0.15.0",
     "@manypkg/cli": "^0.21.2",
-    "@preconstruct/cli": "^2.8.3",
     "@storybook/addon-viewport": "^6.5.16",
     "@storybook/builder-webpack5": "^6.5.16",
     "@storybook/cli": "^6.5.16",

packages/core/.gitignore

@@ -0,0 +1,3 @@
+# managed by crackle
+/dist
+# end managed by crackle

packages/core/package.json

@@ -2,29 +2,6 @@
   "name": "@capsizecss/core",
   "version": "3.1.1",
   "description": "Flipping how we define typography",
-  "main": "dist/capsizecss-core.cjs.js",
-  "module": "dist/capsizecss-core.esm.js",
-  "browser": {
-    "./dist/capsizecss-core.cjs.js": "./dist/capsizecss-core.browser.cjs.js",
-    "./dist/capsizecss-core.esm.js": "./dist/capsizecss-core.browser.esm.js"
-  },
-  "preconstruct": {
-    "entrypoints": [
-      "index.ts"
-    ]
-  },
-  "files": [
-    "/dist"
-  ],
-  "author": {
-    "name": "Michael Taranto",
-    "homepage": "https://github.com/michaeltaranto"
-  },
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/seek-oss/capsize.git",
-    "directory": "packages/core"
-  },
   "keywords": [
     "capsize",
     "leading trim",
@@ -44,12 +21,41 @@
     "content layout shift",
     "cls"
   ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/seek-oss/capsize.git",
+    "directory": "packages/core"
+  },
   "license": "MIT",
+  "author": {
+    "name": "Michael Taranto",
+    "homepage": "https://github.com/michaeltaranto"
+  },
+  "exports": {
+    ".": {
+      "types": {
+        "import": "./dist/index.d.mts",
+        "require": "./dist/index.d.ts"
+      },
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.cjs"
+    },
+    "./package.json": "./package.json"
+  },
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "crackle package",
+    "dev": "crackle dev --shim=none"
+  },
   "dependencies": {
     "csstype": "^3.1.1"
   },
   "devDependencies": {
-    "@babel/core": "^7.23.9",
     "@emotion/css": "^11.11.2"
   }
 }

packages/metrics/.gitignore

@@ -1,3 +1,7 @@
+# managed by crackle
+/dist
+/entireMetricsCollection
+# end managed by crackle
+
+# the analyse script dumps outputs in here
 output
-/*.d.ts
-/*.js

packages/metrics/package.json

@@ -2,35 +2,6 @@
   "name": "@capsizecss/metrics",
   "version": "1.3.0",
   "description": "Font metrics library for system and Google fonts",
-  "main": "dist/capsizecss-metrics.cjs.js",
-  "module": "dist/capsizecss-metrics.esm.js",
-  "browser": {
-    "./dist/capsizecss-metrics.cjs.js": "./dist/capsizecss-metrics.browser.cjs.js",
-    "./dist/capsizecss-metrics.esm.js": "./dist/capsizecss-metrics.browser.esm.js"
-  },
-  "preconstruct": {
-    "entrypoints": [
-      "index.ts",
-      "entireMetricsCollection.ts"
-    ]
-  },
-  "scripts": {
-    "clean": "tsx scripts/clean",
-    "prebuild": "pnpm clean",
-    "build": "tsx scripts/build",
-    "extract-system-metrics": "tsx scripts/extractSystemFontMetrics",
-    "analyse": "tsx scripts/analyse",
-    "download": "tsx scripts/download"
-  },
-  "author": {
-    "name": "Michael Taranto",
-    "homepage": "https://github.com/michaeltaranto"
-  },
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/seek-oss/capsize.git",
-    "directory": "packages/metrics"
-  },
   "keywords": [
     "capsize",
     "leading trim",
@@ -42,8 +13,52 @@
     "line gap",
     "leading"
   ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/seek-oss/capsize.git",
+    "directory": "packages/metrics"
+  },
   "license": "MIT",
-  "dependencies": {},
+  "author": {
+    "name": "Michael Taranto",
+    "homepage": "https://github.com/michaeltaranto"
+  },
+  "exports": {
+    ".": {
+      "types": {
+        "import": "./dist/index.d.mts",
+        "require": "./dist/index.d.ts"
+      },
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.cjs"
+    },
+    "./entireMetricsCollection": {
+      "types": {
+        "import": "./dist/entireMetricsCollection.d.mts",
+        "require": "./dist/entireMetricsCollection.d.ts"
+      },
+      "import": "./dist/entireMetricsCollection.mjs",
+      "require": "./dist/entireMetricsCollection.cjs"
+    },
+    "./package.json": "./package.json",
+    "./*": "./entireMetricsCollection/*.js"
+  },
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist",
+    "entireMetricsCollection"
+  ],
+  "scripts": {
+    "analyse": "tsx ./scripts/analyse.ts",
+    "build": "pnpm clean && crackle package",
+    "clean": "tsx ./scripts/clean.ts",
+    "dev": "crackle dev --shim=none",
+    "download": "tsx ./scripts/download.ts",
+    "extract-system-metrics": "tsx ./scripts/extractSystemFontMetrics.ts",
+    "generate": "tsx ./scripts/generate.ts"
+  },
   "devDependencies": {
     "@capsizecss/unpack": "^1.0.0",
     "@types/cli-progress": "^3.9.2",

packages/metrics/scripts/buildMetrics.ts

@@ -6,7 +6,7 @@ type FontCategory =
   | 'monospace'
   | 'display'
   | 'handwriting';
-interface MetricsFont extends Font {
+export interface MetricsFont extends Font {
   category: FontCategory;
 }
 

packages/metrics/scripts/clean.ts

@@ -1,7 +1,7 @@
 import del from 'del';
-import path from 'path';
+
+import { metricsDir } from './paths';
 
 (async () => {
-  const folderPath = path.join(__dirname, '..');
-  await del([`${folderPath}/*.d.ts`, `${folderPath}/*.js`]);
+  await del([`${metricsDir}/*.d.ts`, `${metricsDir}/*.js`]);
 })();

packages/metrics/scripts/build.ts → packages/metrics/scripts/generate.ts

@@ -8,12 +8,18 @@ import sortKeys from 'sort-keys';
 import googleFonts from './googleFontsApi.json';
 import systemMetrics from './systemFonts.json';
 import { fontFamilyToCamelCase } from './../src';
-import { buildMetrics } from './buildMetrics';
+import { metricsDir } from './paths';
+import { buildMetrics, type MetricsFont } from './buildMetrics';
 
 const writeFile = async (fileName: string, content: string) =>
-  await fs.writeFile(path.join(__dirname, fileName), content, 'utf-8');
+  await fs.writeFile(
+    path.isAbsolute(fileName) ? fileName : path.join(__dirname, fileName),
+    content,
+    'utf-8',
+  );
 
-type MetricsFont = Awaited<ReturnType<typeof buildMetrics>>;
+const writeMetricsFile = async (fileName: string, content: string) =>
+  await writeFile(path.join(metricsDir, fileName), content);
 
 const allMetrics: Record<string, MetricsFont> = {};
 
@@ -96,8 +102,8 @@ const buildFiles = async ({
       export default fontMetrics;
     `;
 
-  await writeFile(path.join('..', `${fileName}.js`), jsOutput);
-  await writeFile(path.join('..', `${fileName}.d.ts`), `${typesOutput}}\n`);
+  await writeMetricsFile(`${fileName}.js`, jsOutput);
+  await writeMetricsFile(`${fileName}.d.ts`, `${typesOutput}}\n`);
 };
 
 (async () => {

packages/metrics/scripts/paths.ts

@@ -0,0 +1,3 @@
+import path from 'path';
+
+export const metricsDir = path.join(__dirname, '..', 'entireMetricsCollection');