diff --git a/.changeset/ts-peer.md b/.changeset/ts-peer.md new file mode 100644 index 0000000..7c46e09 --- /dev/null +++ b/.changeset/ts-peer.md @@ -0,0 +1,4 @@ +--- +"typescript-transform-lit-css": patch +--- +Add peer dependencies diff --git a/.changeset/typescript-transform-lit-css-23-11-15.md b/.changeset/typescript-transform-lit-css-23-11-15.md new file mode 100644 index 0000000..8cc02b1 --- /dev/null +++ b/.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 diff --git a/README.md b/README.md index 048a499..11b17c1 100644 --- a/README.md +++ b/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. diff --git a/build.js b/build.js index a1414be..4fd0b53 100644 --- a/build.js +++ b/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), diff --git a/package-lock.json b/package-lock.json index cce1547..5405272 100644 --- a/package-lock.json +++ b/package-lock.json @@ -2351,7 +2351,6 @@ "version": "3.0.0", "resolved": "https://registry.npmjs.org/@csstools/selector-specificity/-/selector-specificity-3.0.0.tgz", "integrity": "sha512-hBI9tfBtuPIi885ZsZ32IMEU/5nlZH/KOVYJCOh7gyMxaVLGmLedYqFN6Ui1LXkI8JlC8IsuC0rF0btcRZKd5g==", - "dev": true, "funding": [ { "type": "github", @@ -5755,14 +5754,15 @@ } }, "node_modules/clean-css": { - "version": "4.2.4", - "resolved": "https://registry.npmjs.org/clean-css/-/clean-css-4.2.4.tgz", - "integrity": "sha512-EJUDT7nDVFDvaQgAo2G/PJvxmp1o/c6iXLbswsBbUFXi1Nr+AjA2cKmfbKDMjMvzEe75g3P6JkaDDAKk96A85A==", + "version": "5.3.2", + "resolved": "https://registry.npmjs.org/clean-css/-/clean-css-5.3.2.tgz", + "integrity": "sha512-JVJbM+f3d3Q704rF4bqQ5UUyTtuJ0JRKNbTKVEeujCCBoMdkEi+V+e8oktO9qGQNSvHrFTM6JZRXrUvGR1czww==", + "peer": true, "dependencies": { "source-map": "~0.6.0" }, "engines": { - "node": ">= 4.0" + "node": ">= 10.0" } }, "node_modules/clean-stack": { @@ -8825,6 +8825,17 @@ "node": ">=6" } }, + "node_modules/html-minifier/node_modules/clean-css": { + "version": "4.2.4", + "resolved": "https://registry.npmjs.org/clean-css/-/clean-css-4.2.4.tgz", + "integrity": "sha512-EJUDT7nDVFDvaQgAo2G/PJvxmp1o/c6iXLbswsBbUFXi1Nr+AjA2cKmfbKDMjMvzEe75g3P6JkaDDAKk96A85A==", + "dependencies": { + "source-map": "~0.6.0" + }, + "engines": { + "node": ">= 4.0" + } + }, "node_modules/htmlparser2": { "version": "8.0.2", "resolved": "https://registry.npmjs.org/htmlparser2/-/htmlparser2-8.0.2.tgz", @@ -10841,6 +10852,17 @@ "parse-literals": "^1.2.1" } }, + "node_modules/minify-html-literals/node_modules/clean-css": { + "version": "4.2.4", + "resolved": "https://registry.npmjs.org/clean-css/-/clean-css-4.2.4.tgz", + "integrity": "sha512-EJUDT7nDVFDvaQgAo2G/PJvxmp1o/c6iXLbswsBbUFXi1Nr+AjA2cKmfbKDMjMvzEe75g3P6JkaDDAKk96A85A==", + "dependencies": { + "source-map": "~0.6.0" + }, + "engines": { + "node": ">= 4.0" + } + }, "node_modules/minimatch": { "version": "3.1.2", "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz", @@ -14960,7 +14982,6 @@ "version": "12.0.1", "resolved": "https://registry.npmjs.org/postcss-nesting/-/postcss-nesting-12.0.1.tgz", "integrity": "sha512-6LCqCWP9pqwXw/njMvNK0hGY44Fxc4B2EsGbn6xDcxbNRzP8GYoxT7yabVVMLrX3quqOJ9hg2jYMsnkedOf8pA==", - "dev": true, "funding": [ { "type": "github", @@ -18956,10 +18977,10 @@ } }, "packages/esbuild-plugin-lit-css": { - "version": "2.0.5", + "version": "2.1.0", "license": "ISC", "dependencies": { - "@pwrs/lit-css": "^2.0.0" + "@pwrs/lit-css": "^2.1.0" }, "peerDependencies": { "esbuild": "^0.16.17 || ^0.17.16 || ^0.18.1 || ^0.19.5", @@ -18978,7 +18999,7 @@ }, "packages/lit-css": { "name": "@pwrs/lit-css", - "version": "2.0.0", + "version": "2.1.0", "license": "ISC", "dependencies": { "cssnano": "^6.0.1", @@ -19003,22 +19024,25 @@ } }, "packages/typescript-transform-lit-css": { - "version": "1.0.0", + "version": "1.1.0", "license": "ISC", "dependencies": { - "@pwrs/lit-css": "^2.0.0" + "@pwrs/lit-css": "^2.1.0" }, "peerDependencies": { + "clean-css": "^5", "lit": "^2.7.2 || ^3.0.0", + "postcss": "^8", + "postcss-nesting": "^12", "ts-patch": "^3.0", "typescript": "^5" } }, "packages/web-dev-server-plugin-lit-css": { - "version": "2.0.5", + "version": "2.1.0", "license": "ISC", "dependencies": { - "@pwrs/lit-css": "^2.0.0", + "@pwrs/lit-css": "^2.1.0", "@rollup/pluginutils": "^5.0.5" } }, @@ -19027,7 +19051,7 @@ "version": "1.0.10", "license": "MIT", "dependencies": { - "esbuild-plugin-lit-css": "2.0.5", + "esbuild-plugin-lit-css": "2.1.0", "lit-css-loader": "2.0.1", "rollup-plugin-lit-css": "4.0.1" } @@ -20725,7 +20749,6 @@ "version": "3.0.0", "resolved": "https://registry.npmjs.org/@csstools/selector-specificity/-/selector-specificity-3.0.0.tgz", "integrity": "sha512-hBI9tfBtuPIi885ZsZ32IMEU/5nlZH/KOVYJCOh7gyMxaVLGmLedYqFN6Ui1LXkI8JlC8IsuC0rF0btcRZKd5g==", - "dev": true, "requires": {} }, "@es-joy/jsdoccomment": { @@ -21064,7 +21087,7 @@ "@lit-css/test": { "version": "file:test", "requires": { - "esbuild-plugin-lit-css": "2.0.5", + "esbuild-plugin-lit-css": "2.1.0", "lit-css-loader": "2.0.1", "rollup-plugin-lit-css": "4.0.1" } @@ -23189,9 +23212,10 @@ "dev": true }, "clean-css": { - "version": "4.2.4", - "resolved": "https://registry.npmjs.org/clean-css/-/clean-css-4.2.4.tgz", - "integrity": "sha512-EJUDT7nDVFDvaQgAo2G/PJvxmp1o/c6iXLbswsBbUFXi1Nr+AjA2cKmfbKDMjMvzEe75g3P6JkaDDAKk96A85A==", + "version": "5.3.2", + "resolved": "https://registry.npmjs.org/clean-css/-/clean-css-5.3.2.tgz", + "integrity": "sha512-JVJbM+f3d3Q704rF4bqQ5UUyTtuJ0JRKNbTKVEeujCCBoMdkEi+V+e8oktO9qGQNSvHrFTM6JZRXrUvGR1czww==", + "peer": true, "requires": { "source-map": "~0.6.0" } @@ -24274,7 +24298,7 @@ "esbuild-plugin-lit-css": { "version": "file:packages/esbuild-plugin-lit-css", "requires": { - "@pwrs/lit-css": "^2.0.0" + "@pwrs/lit-css": "^2.1.0" } }, "esbuild-plugin-minify-html-literals": { @@ -25514,6 +25538,16 @@ "param-case": "^2.1.1", "relateurl": "^0.2.7", "uglify-js": "^3.5.1" + }, + "dependencies": { + "clean-css": { + "version": "4.2.4", + "resolved": "https://registry.npmjs.org/clean-css/-/clean-css-4.2.4.tgz", + "integrity": "sha512-EJUDT7nDVFDvaQgAo2G/PJvxmp1o/c6iXLbswsBbUFXi1Nr+AjA2cKmfbKDMjMvzEe75g3P6JkaDDAKk96A85A==", + "requires": { + "source-map": "~0.6.0" + } + } } }, "htmlparser2": { @@ -27016,6 +27050,16 @@ "html-minifier": "^4.0.0", "magic-string": "^0.25.0", "parse-literals": "^1.2.1" + }, + "dependencies": { + "clean-css": { + "version": "4.2.4", + "resolved": "https://registry.npmjs.org/clean-css/-/clean-css-4.2.4.tgz", + "integrity": "sha512-EJUDT7nDVFDvaQgAo2G/PJvxmp1o/c6iXLbswsBbUFXi1Nr+AjA2cKmfbKDMjMvzEe75g3P6JkaDDAKk96A85A==", + "requires": { + "source-map": "~0.6.0" + } + } } }, "minimatch": { @@ -29798,7 +29842,6 @@ "version": "12.0.1", "resolved": "https://registry.npmjs.org/postcss-nesting/-/postcss-nesting-12.0.1.tgz", "integrity": "sha512-6LCqCWP9pqwXw/njMvNK0hGY44Fxc4B2EsGbn6xDcxbNRzP8GYoxT7yabVVMLrX3quqOJ9hg2jYMsnkedOf8pA==", - "dev": true, "requires": { "@csstools/selector-specificity": "^3.0.0", "postcss-selector-parser": "^6.0.13" @@ -32168,7 +32211,7 @@ "typescript-transform-lit-css": { "version": "file:packages/typescript-transform-lit-css", "requires": { - "@pwrs/lit-css": "^2.0.0" + "@pwrs/lit-css": "^2.1.0" } }, "uglify-js": { @@ -32381,7 +32424,7 @@ "web-dev-server-plugin-lit-css": { "version": "file:packages/web-dev-server-plugin-lit-css", "requires": { - "@pwrs/lit-css": "^2.0.0", + "@pwrs/lit-css": "^2.1.0", "@rollup/pluginutils": "^5.0.5" } }, diff --git a/package.json b/package.json index 0eaebe5..3f71c8a 100644 --- a/package.json +++ b/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}'" }, diff --git a/packages/typescript-transform-lit-css/package.json b/packages/typescript-transform-lit-css/package.json index f0b324b..f694987 100644 --- a/packages/typescript-transform-lit-css/package.json +++ b/packages/typescript-transform-lit-css/package.json @@ -11,6 +11,11 @@ }, "author": "Benny Powers ", "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" diff --git a/packages/typescript-transform-lit-css/test/fixtures/cleanCss/tsconfig.json b/packages/typescript-transform-lit-css/test/fixtures/cleanCss/tsconfig.json index 464e02f..7cabddb 100644 --- a/packages/typescript-transform-lit-css/test/fixtures/cleanCss/tsconfig.json +++ b/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": [ { diff --git a/packages/typescript-transform-lit-css/test/fixtures/tsconfig.json b/packages/typescript-transform-lit-css/test/fixtures/tsconfig.json index 76e9edd..d46ecac 100644 --- a/packages/typescript-transform-lit-css/test/fixtures/tsconfig.json +++ b/packages/typescript-transform-lit-css/test/fixtures/tsconfig.json @@ -1,6 +1,6 @@ { "include": ["."], - "exclude": ["cssnano"], + "exclude": ["cleanCss"], "compilerOptions": { "outDir": "../TSPC_OUTPUT", "module": "NodeNext", @@ -8,7 +8,7 @@ { "transform": "typescript-transform-lit-css", "inline": true, - "cleanCss": true + "cleanCss": false } ] } diff --git a/packages/typescript-transform-lit-css/test/typescript-transform-lit-css.test.js b/packages/typescript-transform-lit-css/test/typescript-transform-lit-css.test.js index 571330b..db3677b 100644 --- a/packages/typescript-transform-lit-css/test/typescript-transform-lit-css.test.js +++ b/packages/typescript-transform-lit-css/test/typescript-transform-lit-css.test.js @@ -31,23 +31,23 @@ 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'), @@ -55,11 +55,11 @@ test('typescript-transform-lit-css', async function(assert) { '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(); }); diff --git a/packages/typescript-transform-lit-css/tsconfig.json b/packages/typescript-transform-lit-css/tsconfig.json new file mode 100644 index 0000000..307de38 --- /dev/null +++ b/packages/typescript-transform-lit-css/tsconfig.json @@ -0,0 +1,7 @@ +{ + "extends": "../../tsconfig.json", + "exclude": ["test"], + "compilerOptions": { + "emitDeclarationOnly": false + } +} diff --git a/packages/typescript-transform-lit-css/typescript-transform-lit-css.ts b/packages/typescript-transform-lit-css/typescript-transform-lit-css.ts index 269f208..fb91d72 100644 --- a/packages/typescript-transform-lit-css/typescript-transform-lit-css.ts +++ b/packages/typescript-transform-lit-css/typescript-transform-lit-css.ts @@ -210,9 +210,10 @@ export default function( return (ctx: ts.TransformationContext) => { function visitor(node: ts.Node) { /* eslint-disable operator-linebreak */ - if (ts.isImportDeclaration(node) - && !node.importClause?.isTypeOnly - || ts.isExportDeclaration(node) + if (!ts.isTypeOnlyImportOrExportDeclaration(node) + && (ts.isImportDeclaration(node) || ts.isExportDeclaration(node)) + // TODO: handle cases like `import { style as foo } from './x.css'; export { foo as bar };` + && node.moduleSpecifier ) { /* eslint-enable operator-linebreak */ const importedStyleSheetSpecifier = diff --git a/tsconfig.json b/tsconfig.json index 89bbe31..08c816f 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -1,4 +1,5 @@ { + "exclude": ["./packages/typescript-transform-lit-css/test"], "compilerOptions": { "declaration": true, "emitDeclarationOnly": true, @@ -14,7 +15,8 @@ "@pwrs/lit-css/*": ["packages/lit-css/*"], "esbuild-plugin-lit-css": ["packages/esbuild-plugin-lit-css/esbuild-plugin-lit-css"], "rollup-plugin-lit-css": ["packages/rollup-plugin-lit-css/rollup-plugin-lit-css"], - "web-dev-server-plugin-lit-css": ["packages/web-dev-server-plugin-lit-css/web-dev-server-plugin-lit-css"] + "web-dev-server-plugin-lit-css": ["packages/web-dev-server-plugin-lit-css/web-dev-server-plugin-lit-css"], + "typescript-transform-lit-css": ["packages/typescript-transform-lit-css/typescript-transform-lit-css"] } } }