fix(typescript-transform): errors and unbundled build (#52)

* fix(typescript-transform): add peerdeps

* fix: build for typescript transform

* fix(typescript-transform): handle more export cases

* docs: changeset

* docs: changeset

* chore: lock

* test: reactivate ts tests

* test: fix fixtures

* docs: am yisrael chai

* test: command

.changeset/ts-peer.md

@@ -0,0 +1,4 @@
+---
+"typescript-transform-lit-css": patch
+---
+Add peer dependencies

.changeset/typescript-transform-lit-css-23-11-15.md

@@ -0,0 +1,4 @@
+---
+"typescript-transform-lit-css": patch
+---
+Fix error on unspecified exports, and unbundle the transformer module

README.md

@@ -1,3 +1,5 @@
+![Am Yisrael Chai - עם ישראל חי](https://bennypowers.dev/assets/flag.am.yisrael.chai.png)
+
 # lit-CSS Plugins
 
 Build plugins to import css files as JavaScript tagged-template literal objects.

build.js

@@ -44,13 +44,26 @@ const nativeNodeModulesPlugin = {
 
 export async function main() {
   for (const pkgPath of await globby('packages/*/package.json')) {
+    if (pkgPath.match(/typescript-transform-lit-css/))
+      continue;
     const outdir = dirname(pkgPath);
     const pkg = JSON.parse(await readFile(pkgPath, 'utf8'));
     for (const [type, filename] of Object.entries(pkg.exports)) {
       try {
         await esbuild.build({
           bundle: type === 'require',
-          external: type === 'require' ? ['fs', 'path', 'util', 'uglify-js', 'fsevents'] : [],
+          external: type === 'require' ? [
+            'fs',
+            'path',
+            'util',
+            'uglify-js',
+            'fsevents',
+            'clean-css',
+            'postcss',
+            'postcss-*',
+            'node:*',
+            '@pwrs/lit-css',
+          ] : [],
           entryPoints: [resolve(outdir, pkg.main).replace('.js', '.ts')],
           format: type === 'import' ? 'esm' : 'cjs',
           outfile: resolve(outdir, filename),

package.json

@@ -16,10 +16,11 @@
   },
   "scripts": {
     "build": "npm run clean && run-p build:*",
+    "build:typescript": "npm run build -ws --if-present",
     "build:runtime": "node build.js",
     "build:types": "tsc",
     "lint": "eslint .",
-    "test": "npm run build:runtime && tape 'packages/*/test/*.test.js' | tap-spec",
+    "test": "npm run build && tape 'packages/*/test/*.test.js' | tap-spec",
     "release": "npm run build && npm run test && npx changeset publish",
     "clean": "rimraf 'packages/*/*.{cjs,js,d.ts,js.map,cjs.map}'"
   },

packages/typescript-transform-lit-css/package.json

@@ -11,6 +11,11 @@
   },
   "author": "Benny Powers <web@bennypowers.com>",
   "license": "ISC",
+  "scripts": {
+    "build": "run-s build:*",
+    "build:esm": "tsc",
+    "build:cjs": "esbuild --format=cjs typescript-transform-lit-css.js --outfile=typescript-transform-lit-css.cjs"
+  },
   "repository": {
     "type": "git",
     "url": "git+ssh://git@github.com/bennypowers/lit-css.git",
@@ -35,6 +40,9 @@
     "@pwrs/lit-css": "^2.1.0"
   },
   "peerDependencies": {
+    "clean-css": "^5",
+    "postcss": "^8",
+    "postcss-nesting": "^12",
     "typescript": "^5",
     "ts-patch": "^3.0",
     "lit": "^2.7.2 || ^3.0.0"

packages/typescript-transform-lit-css/test/fixtures/cleanCss/tsconfig.json

@@ -1,7 +1,7 @@
 {
   "include": [".", "../declaration.d.ts"],
   "compilerOptions": {
-    "outDir": "../../TSPC_OUTPUT",
+    "outDir": "../../TSPC_OUTPUT/cleanCss",
     "module": "NodeNext",
     "plugins": [
       {

packages/typescript-transform-lit-css/test/fixtures/tsconfig.json

@@ -1,14 +1,14 @@
 {
   "include": ["."],
-  "exclude": ["cssnano"],
+  "exclude": ["cleanCss"],
   "compilerOptions": {
     "outDir": "../TSPC_OUTPUT",
     "module": "NodeNext",
     "plugins": [
       {
         "transform": "typescript-transform-lit-css",
         "inline": true,
-        "cleanCss": true
+        "cleanCss": false
       }
     ]
   }

packages/typescript-transform-lit-css/test/typescript-transform-lit-css.test.js

@@ -31,35 +31,35 @@ test('typescript-transform-lit-css', async function(assert) {
   await compile(FIXTURES_DIR);
   await compile(join(FIXTURES_DIR, 'cleanCss'));
 
-  // assert.equal(
-  //   await getCode('default/input.js'),
-  //   await read('default/output.js'),
-  //   'exports a default style import',
-  // );
-
-  // assert.equal(
-  //   await getCode('named/input.js'),
-  //   await read('named/output.js'),
-  //   'exports a named style import',
-  // );
-
-  // assert.equal(
-  //   await getCode('element/input.js'),
-  //   await read('element/output.js'),
-  //   'generates a inline style in typical element use',
-  // );
+  assert.equal(
+    await getCode('default/input.js'),
+    await read('default/output.js'),
+    'exports a default style import',
+  );
+
+  assert.equal(
+    await getCode('named/input.js'),
+    await read('named/output.js'),
+    'exports a named style import',
+  );
+
+  assert.equal(
+    await getCode('element/input.js'),
+    await read('element/output.js'),
+    'generates a inline style in typical element use',
+  );
 
   assert.equal(
     await getCode('cleanCss/input.js'),
     await read('cleanCss/output.js'),
     'generates a inline style in typical element use, minified',
   );
 
-  // assert.equal(
-  //   await getCode('special-chars/input.js'),
-  //   await read('special-chars/output.js'),
-  //   'handles special chars in CSS',
-  // );
+  assert.equal(
+    await getCode('special-chars/input.js'),
+    await read('special-chars/output.js'),
+    'handles special chars in CSS',
+  );
 
   assert.end();
 });