Merge pull request #111 from soxhub/better-cross-compiling

Setup d.ts emitting, and clearer cross-compliing of the node assets

.changeset/young-dryers-sort.md

@@ -0,0 +1,5 @@
+---
+'ember-scoped-css': minor
+---
+
+Utilize `external` dependencies for a more optimized runtime and install time / size

.github/workflows/ci.yml

@@ -18,6 +18,7 @@ jobs:
 
     steps:
       - uses: wyvox/action@v1
+      - run: pnpm build
       - name: Lint
         run: pnpm lint
       - name: Run Tests
@@ -31,6 +32,7 @@ jobs:
       - uses: wyvox/action@v1
         with:
           no-lockfile: true
+      - run: pnpm build
       - name: Run Tests
         run: pnpm test
 
@@ -45,11 +47,13 @@ jobs:
         try-scenario:
           - ember-lts-3.28
           - ember-lts-4.4
+          - ember-lts-4.12
           - ember-release
           - ember-beta
 
     steps:
       - uses: wyvox/action@v1
+      - run: pnpm build
       - name: Run Tests
         run: ./node_modules/.bin/ember try:one ${{ matrix.try-scenario }}
         working-directory: test-apps/embroider-app

ember-scoped-css/.eslintignore

@@ -3,6 +3,7 @@ blueprints/*/files/
 
 # compiled output
 dist/
+declarations/
 
 # misc
 coverage/

ember-scoped-css/.eslintrc.cjs

@@ -8,14 +8,30 @@ const nodeESM = configs.node();
 module.exports = {
   overrides: [
     ...nodeESM.overrides,
+    {
+      files: ['./**/*.{js,ts}'],
+      rules: {
+        // These lints don't support one or more of
+        // - TS 5
+        // - `node:` imports
+        'import/namespace': 'off',
+        'import/no-cycle': 'off',
+        'import/named': 'off',
+        'import/default': 'off',
+        'import/no-named-as-default': 'off',
+        'import/no-named-as-default-member': 'off',
 
+        // This doesn't support modern ESM
+        'n/no-missing-import': 'off',
+      },
+    },
     {
       files: ['./test/**/*.js'],
       env: {
         mocha: true,
       },
       rules: {
-        'node/no-unpublished-import': 0,
+        'node/no-unpublished-import': 'off',
       },
     },
   ],

ember-scoped-css/.gitignore

@@ -1,2 +1,5 @@
+dist/
+declarations/
+
 README.md
 LICENSE.md

ember-scoped-css/build.mjs

@@ -0,0 +1,65 @@
+import * as esbuild from 'esbuild';
+import { vitestCleaner } from 'esbuild-plugin-vitest-cleaner';
+import { createRequire as topLevelCreateRequire } from 'module';
+
+const require = topLevelCreateRequire(import.meta.url);
+
+const buildFiles = [
+  'src/build/index.js',
+  'src/build/app-css-loader.js',
+  'src/build/app-dependency-loader.js',
+  'src/lib/scoped-css-preprocessor.js',
+  'src/scoped-babel-plugin.js',
+];
+
+const external = [...Object.keys(require('./package.json').dependencies)];
+
+// Node, CJS
+await esbuild.build({
+  entryPoints: buildFiles,
+  bundle: true,
+  outdir: 'dist/cjs',
+  format: 'cjs',
+  platform: 'node',
+  sourcemap: true,
+  outExtension: { '.js': '.cjs' },
+  external,
+  plugins: [vitestCleaner()],
+});
+
+// Node, ESM
+await esbuild.build({
+  entryPoints: buildFiles,
+  bundle: true,
+  outdir: 'dist/esm',
+  format: 'esm',
+  target: 'esnext',
+  platform: 'node',
+  sourcemap: true,
+  external,
+  plugins: [vitestCleaner()],
+  outExtension: { '.js': '.mjs' },
+  /**
+   * Ooof, this makes it feel like ESBuild doesn't have sufficient funding...
+   */
+  banner: {
+    js: `
+        import * as __url__ from 'url';
+        import { createRequire as topLevelCreateRequire } from 'module';
+        const require = topLevelCreateRequire(import.meta.url);
+        const __filename = __url__.fileURLToPath(import.meta.url);
+        const __dirname = path.dirname(__filename);
+        `,
+  },
+});
+
+// Runtime
+await esbuild.build({
+  entryPoints: ['src/runtime/test-support.ts'],
+  sourcemap: true,
+  format: 'esm',
+  bundle: true,
+  external,
+  plugins: [vitestCleaner()],
+  outdir: 'dist/runtime',
+});

ember-scoped-css/build.sh

@@ -1,13 +1,11 @@
 #!/bin/bash
 
+rm -rf dist/ declarations/
+
 cp ../README.md ./README.md
 cp ../LICENSE.md ./LICENSE.md
 
-pnpm esbuild \
-  src/scoped-babel-plugin.js \
-  src/build/app-css-loader.js \
-  src/build/app-dependency-loader.js \
-  src/lib/scoped-css-preprocessor.js \
-  src/runtime/test-support.js \
-  --bundle --outdir=dist --platform=node --sourcemap \
-  --out-extension:.js=.cjs
+node ./build.mjs
+
+# Types
+pnpm tsc

ember-scoped-css/package.json

@@ -14,23 +14,29 @@
     "addon-main.cjs"
   ],
   "exports": {
-    "./test-support": "./src/runtime/test-support.js",
-    "./build": "./src/build/index.js",
+    "./test-support": {
+      "types": "./declarations/runtime/test-support.d.ts",
+      "default": "./dist/runtime/test-support.js"
+    },
+    "./build": {
+      "import": "./dist/esm/build/index.mjs",
+      "require": "./dist/cjs/build/index.cjs"
+    },
     "./build/app-css-loader": {
-      "import": "./src/build/app-css-loader.js",
-      "require": "./dist/build/app-css-loader.cjs"
+      "import": "./dist/esm/build/app-css-loader.mjs",
+      "require": "./dist/cjs/build/app-css-loader.cjs"
     },
     "./build/app-dependency-loader": {
-      "import": "./src/build/app-dependency-loader.js",
-      "require": "./dist/build/app-dependency-loader.cjs"
+      "import": "./dist/esm/build/app-dependency-loader.mjs",
+      "require": "./dist/cjs/build/app-dependency-loader.cjs"
     },
     "./build/ember-classic-support": {
-      "require": "./dist/lib/scoped-css-preprocessor.cjs"
+      "require": "./dist/cjs/lib/scoped-css-preprocessor.cjs"
     },
     "./addon-main.cjs": "./addon-main.cjs",
     "./babel-plugin": {
-      "import": "./src/scoped-babel-plugin.js",
-      "require": "./dist/scoped-babel-plugin.cjs"
+      "import": "./src/esm/scoped-babel-plugin.mjs",
+      "require": "./dist/cjs/scoped-babel-plugin.cjs"
     }
   },
   "scripts": {
@@ -41,7 +47,7 @@
     "lint:js:fix": "eslint . --fix",
     "lint:prettier:fix": "prettier . -w",
     "lint:prettier": "prettier . -c",
-    "test": "mocha"
+    "test": "vitest"
   },
   "dependencies": {
     "@babel/parser": "^7.23.0",
@@ -57,7 +63,7 @@
     "ember-source": "^4.10.0",
     "ember-template-recast": "^6.1.3",
     "ember-template-tag": "^2.3.14",
-    "find-up": "^6.3.0",
+    "find-up": "^5.0.0",
     "glob": "^8.1.0",
     "postcss": "^8.4.21",
     "postcss-selector-parser": "^6.0.11",
@@ -68,14 +74,17 @@
   "devDependencies": {
     "@babel/eslint-parser": "^7.22.15",
     "@nullvoxpopuli/eslint-configs": "^3.2.2",
-    "chai": "^4.3.7",
+    "@tsconfig/ember": "^3.0.1",
+    "@tsconfig/strictest": "^2.0.2",
+    "@types/blueimp-md5": "^2.18.0",
     "concurrently": "^8.2.1",
     "ember-template-lint": "^5.11.2",
     "esbuild": "^0.19.0",
+    "esbuild-plugin-vitest-cleaner": "^0.5.1",
     "eslint": "^8.50.0",
-    "mocha": "^10.2.0",
     "prettier": "^3.0.3",
-    "sinon": "^16.0.0",
+    "typescript": "^5.2.2",
+    "vitest": "^0.34.6",
     "webpack": "^5.75.0"
   },
   "ember-addon": {

ember-scoped-css/src/build/app-css-livereload-loader.js

@@ -1,5 +1,6 @@
-import { readFile } from 'fs/promises';
-import path from 'path';
+import { readFile } from 'node:fs/promises';
+import path from 'node:path';
+
 import { createUnplugin } from 'unplugin';
 import { Compilation } from 'webpack';
 

ember-scoped-css/src/build/app-js-unplugin.js

@@ -1,4 +1,5 @@
-import path from 'path';
+import path from 'node:path';
+
 import { createUnplugin } from 'unplugin';
 
 import generateHash from '../lib/generateAbsolutePathHash.js';

ember-scoped-css/src/build/app-scopedcss-webpack.js

@@ -1,6 +1,6 @@
 // import { RawSource }  from 'webpack-sources';
-import { readFile, writeFile } from 'fs/promises';
-import path from 'path';
+import { readFile, writeFile } from 'node:fs/promises';
+import path from 'node:path';
 
 import fsExists from '../lib/fsExists.js';
 import generateHash from '../lib/generateAbsolutePathHash.js';

ember-scoped-css/src/build/scoped-css-unplugin.js

@@ -1,5 +1,6 @@
-import { readFile } from 'fs/promises';
-import path from 'path';
+import { readFile } from 'node:fs/promises';
+import path from 'node:path';
+
 import { createUnplugin } from 'unplugin';
 
 import fsExists from '../lib/fsExists.js';

ember-scoped-css/src/lib/fsExists.js

@@ -1,4 +1,4 @@
-import { stat } from 'fs/promises';
+import { stat } from 'node:fs/promises';
 
 export default async function (path) {
   try {

ember-scoped-css/src/lib/generateAbsolutePathHash.js

@@ -1,9 +1,9 @@
 import fsSync from 'node:fs';
 import path from 'node:path';
 
-import { findUpSync } from 'find-up';
+import findUp from 'find-up';
 
-import generateHash from './generateRelativePathHash.js';
+import generateHash from './generateRelativePathHash.ts';
 
 export default function generateHashFromAbsolutePath(absolutePath) {
   /**
@@ -102,7 +102,7 @@ function findWorkspacePath(sourcePath) {
     return seen;
   }
 
-  const packageJsonPath = findUpSync('package.json', {
+  const packageJsonPath = findUp.sync('package.json', {
     cwd: path.dirname(sourcePath),
   });
 
@@ -135,3 +135,25 @@ function workspacePackageName(sourcePath) {
 
   return json.name;
 }
+
+if (import.meta.vitest) {
+  const { it, expect } = import.meta.vitest;
+
+  it('should return a string', function () {
+    const postfix = generateHash('foo.css');
+
+    expect(postfix).to.be.a('string');
+  });
+
+  it('should return a string starting with "e"', function () {
+    const postfix = generateHash('foo.css');
+
+    expect(postfix).to.match(/^e/);
+  });
+
+  it('should return a string of length 9', function () {
+    const postfix = generateHash('foo.css');
+
+    expect(postfix).to.have.lengthOf(9);
+  });
+}

ember-scoped-css/src/lib/generateRelativePathHash.js → ember-scoped-css/src/lib/generateRelativePathHash.ts

@@ -1,5 +1,5 @@
 import md5 from 'blueimp-md5';
 
-export default function generateRelativePathHash(relativePath) {
+export default function generateRelativePathHash(relativePath: string) {
   return 'e' + md5(relativePath).substring(0, 8);
 }

ember-scoped-css/src/lib/getClassesTagsFromCss.js

@@ -31,3 +31,18 @@ export default function getClassesTagsFromCss(css) {
 
   return { classes, tags };
 }
+
+if (import.meta.vitest) {
+  const { it, expect } = import.meta.vitest;
+
+  it('should return classes and tags that are not in :global', function () {
+    const css = '.baz :global(.foo) .bar div :global(p)  { color: red; }';
+    const { classes, tags } = getClassesTagsFromCss(css);
+
+    // classes should be baz and bar
+    expect(classes.size).to.equal(2);
+    expect([...classes]).to.have.members(['baz', 'bar']);
+    expect(tags.size).to.equal(1);
+    expect([...tags]).to.have.members(['div']);
+  });
+}

ember-scoped-css/src/lib/renameClass.js → ember-scoped-css/src/lib/renameClass.ts

@@ -1,4 +1,8 @@
-export default function renameClass(className, postfix, classesInCss) {
+export default function renameClass(
+  className: string,
+  postfix: string,
+  classesInCss?: Set<string>,
+) {
   const classes = className.split(/\s+/);
   const renamedClasses = classes
     .filter((c) => c)

ember-scoped-css/src/lib/replaceGlimmerAst.js

@@ -1,6 +1,7 @@
+import { readFile } from 'node:fs/promises';
+import path from 'node:path';
+
 import babelParser from '@babel/parser';
-import { readFile } from 'fs/promises';
-import path from 'path';
 import recast from 'recast';
 
 import fsExists from './fsExists.js';