feat: deprecated uglify in favor of cssnano or cleanCSS (#50)

* feat(typescript-transform): clean css

* fix: *sigh*

* chore: lint

* docs: changeset

* chore: changesets config

Author: bennypowers

.changeset/config.json

@@ -6,5 +6,7 @@
   "access": "public",
   "baseBranch": "main",
   "updateInternalDependencies": "patch",
-  "ignore": ["test"]
+  "ignore": [
+    "@lit-css/test"
+  ]
 }

.changeset/cssnano.md

@@ -1,4 +1,5 @@
-test/*/expected/**/*.js
+packages/*/test/expected/**/*.js
+packages/*/test/TSPC_OUTPUT/**/*.js
 packages/*/*.js
 packages/*/*.cjs
 packages/*/*.js.map

.changeset/typescript-min.md

@@ -10,6 +10,8 @@ fsevents-*.node
 # Diagnostic reports (https://nodejs.org/api/report.html)
 report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
 
+TSPC_OUTPUT
+
 # Runtime data
 pids
 *.pid

.eslintignore

@@ -0,0 +1 @@
+packages/*/test/**/*

.gitignore

@@ -19,7 +19,7 @@
     "build:runtime": "node build.js",
     "build:types": "tsc",
     "lint": "eslint .",
-    "test": "npm run build:runtime && tape 'test/*/*.test.js' | tap-spec",
+    "test": "npm run build:runtime && 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}'"
   },
@@ -28,35 +28,37 @@
     "test"
   ],
   "devDependencies": {
-    "@babel/core": "^7.23.2",
-    "@babel/preset-env": "^7.23.2",
+    "@babel/core": "^7.23.3",
+    "@babel/preset-env": "^7.23.3",
     "@changesets/cli": "^2.26.2",
     "@microsoft/fast-element": "^1.12.0",
     "@pwrs/eslint-config": "^0.0.26",
-    "@rollup/plugin-alias": "^3.1.9",
-    "@types/node": "^18.15.11",
-    "@types/uglifycss": "^0.0.9",
-    "@web/dev-server-core": "^0.6.3",
+    "@rollup/plugin-alias": "^5.0.1",
+    "@types/node": "^20.9.0",
+    "@types/uglifycss": "^0.0.10",
+    "@web/dev-server-core": "^0.7.0",
     "arraybuffer-to-string": "^1.0.2",
     "cross-env": "^7.0.3",
     "cz-conventional-changelog": "^3.3.0",
     "esbuild": "^0.19.5",
     "esbuild-plugin-alias": "^0.2.1",
     "esm": "^3.2.25",
-    "globby": "^13.2.2",
-    "lit": "^3.0.1",
-    "memfs": "^3.5.0",
-    "nodemon": "^2.0.22",
+    "execa": "^8.0.1",
+    "globby": "^14.0.0",
+    "lit": "^3.0.2",
+    "memfs": "^4.6.0",
+    "nodemon": "^3.0.1",
     "npm-run-all": "^4.1.5",
     "postcss": "^8.4.31",
-    "postcss-nesting": "^10.2.0",
-    "rollup": "^2.79.1",
+    "postcss-nesting": "^12.0.1",
+    "rollup": "^4.4.1",
     "rollup-plugin-alias": "^2.2.0",
     "sass": "^1.69.5",
-    "semantic-release": "^19.0.5",
+    "semantic-release": "^22.0.7",
     "tap-spec": "^5.0.0",
     "tap-summary": "^4.0.0",
     "tape": "^5.7.2",
+    "ts-patch": "^3.0.2",
     "typescript": "^5.2.2",
     "webpack": "^5.89.0",
     "wsrun": "^5.2.4"

.npmignore

@@ -2,29 +2,32 @@ import { litCssPlugin } from 'esbuild-plugin-lit-css';
 import esbuild from 'esbuild';
 import aliasPlugin from 'esbuild-plugin-alias';
 
-import { dirname, resolve } from 'node:path';
+import { dirname, join, resolve } from 'node:path';
 import { fileURLToPath } from 'node:url';
 
-import { run } from '../test.js';
+import { run } from '@lit-css/test/test.js';
+
 import ab2str from 'arraybuffer-to-string';
 
 // type check
 litCssPlugin({ filter: /hi/ });
 
 const dir = dirname(fileURLToPath(import.meta.url));
 
+const FIXTURES_DIR = join(dir, '..', '..', '..', 'test', '😁-FIXTURES');
+
 async function getCode(path, { options, alias } = {}) {
   const additionalPlugins = [...alias ? [
     aliasPlugin(
       Object.fromEntries(
         Object.entries(alias)
           .map(([k, v]) =>
-            [k, resolve(dir, '..', '😁-FIXTURES', 'bare', v)])
+            [k, resolve(FIXTURES_DIR, 'bare', v)])
       )
     ),
   ] : []];
 
-  const input = resolve(dir, '..', '😁-FIXTURES', path);
+  const input = resolve(FIXTURES_DIR, path);
   const bundle = await esbuild.build({
     entryPoints: [input],
     target: 'es2020',

package-lock.json

@@ -32,7 +32,7 @@ test('esbuild-plugin-minify-html-literals', async function(assert) {
     ],
   });
 
-  const expected = `// test/esbuild-plugin-minify-html-literals/fixture.js
+  const expected = `// packages/esbuild-plugin-minify-html-literals/test/fixture.js
 import { html } from "lit";
 var tpl = html\`<p>hello, world</p><input type="text"> <button type="button">button</button>\`;
 export {

package.json

@@ -8,6 +8,8 @@ import { createFsFromVolume, Volume } from 'memfs';
 
 const __dirname = dirname(fileURLToPath(import.meta.url));
 
+const FIXTURES_DIR = join(__dirname, '..', '..', '..', 'test', '😁-FIXTURES');
+
 /**
  * @param  {object} fixture
  * @param  {import('../../packages/lit-css-loader/lit-css-loader').LitCSSOptions} [options={}]
@@ -20,7 +22,7 @@ export const compiler = ({
 }) => {
   const compiler = webpack({
     mode: 'development',
-    context: resolve(__dirname, '..', '😁-FIXTURES'),
+    context: FIXTURES_DIR,
     entry: `./${path}`,
     output: {
       path: resolve(__dirname),

packages/esbuild-plugin-lit-css/README.md

@@ -1,7 +1,7 @@
 import { compiler } from './compiler.js';
 import { dirname } from 'node:path';
 import { fileURLToPath } from 'node:url';
-import { run } from '../test.js';
+import { run } from '@lit-css/test/test.js';
 
 const dir = dirname(fileURLToPath(import.meta.url));
 

test/esbuild-plugin-lit-css/esbuild-plugin-lit-css.test.js renamed to packages/esbuild-plugin-lit-css/test/esbuild-plugin-lit-css.test.js

@@ -1,6 +1,7 @@
 import stringToTemplateLiteral from 'string-to-template-literal';
 
 import { processString, UglifyCSSOptions } from 'uglifycss';
+import cssnano, { Options as CssnanoOptions } from 'cssnano';
 
 export interface Meta {
   /**
@@ -33,8 +34,14 @@ export interface Options {
   /**
    * Whether to uglify the CSS. Can also be an object of uglifycss options
    * @default false
+   * @deprecated: use `minify`
    */
   uglify?: boolean|UglifyCSSOptions;
+  /**
+   * Whether to minify the CSS using cssnano. can also be an object of css nano options.
+   * @default false
+   */
+  cssnano?: boolean|CssnanoOptions;
   /**
    * Transform sources using tools like sass or postcss
    * @param  source         Source file contents e.g. scss or postcss sources
@@ -44,17 +51,33 @@ export interface Options {
   transform?(source: string, meta: Meta): string|Promise<string>;
 }
 
+async function cssnanoify(css: string, options: boolean|CssnanoOptions) {
+  const cssnanoOptions = typeof options === 'object' ? options : undefined;
+  const result = await cssnano(cssnanoOptions).process(css);
+  return result.css;
+}
+
+/** @deprecated */
+async function uglifycssify(css: string, options: boolean|UglifyCSSOptions) {
+  const uglifyOptions = typeof options === 'object' ? options : undefined;
+  const result = processString(css, uglifyOptions);
+  return result;
+}
+
 export async function transform({
   css: source,
   filePath,
   specifier = 'lit',
   tag = 'css',
   uglify = false,
+  cssnano = false,
   transform = x => x,
 }: Options): Promise<string> {
   const css = await transform(source, { filePath });
-  const uglifyOptions = typeof uglify === 'object' ? uglify : undefined;
-  const cssContent = !uglify ? css : processString(css, uglifyOptions);
+  const cssContent =
+      cssnano ? await cssnanoify(css, cssnano)
+    : uglify ? await uglifycssify(css, uglify)
+    : css;
   return `import {${tag}} from '${specifier}';
 export const styles = ${tag}${stringToTemplateLiteral(cssContent)};
 export default styles;

test/esbuild-plugin-lit-css/expected/bare/output.js renamed to packages/esbuild-plugin-lit-css/test/expected/bare/output.js

@@ -30,6 +30,7 @@
     "lit-css.d.ts"
   ],
   "dependencies": {
+    "cssnano": "^6.0.1",
     "string-to-template-literal": "^2.0.0",
     "uglifycss": "^0.0.29"
   }

test/esbuild-plugin-lit-css/expected/basic/boop.js renamed to packages/esbuild-plugin-lit-css/test/expected/basic/boop.js

@@ -1,14 +1,16 @@
 import litcss from 'rollup-plugin-lit-css';
 import aliasPlugin from '@rollup/plugin-alias';
 
-import { dirname, resolve } from 'node:path';
+import { dirname, join, resolve } from 'node:path';
 import { fileURLToPath } from 'node:url';
 import { rollup } from 'rollup';
 
-import { run } from '../test.js';
+import { run } from '@lit-css/test/test.js';
 
 const dir = dirname(fileURLToPath(import.meta.url));
 
+const FIXTURES_DIR = join(dir, '..', '..', '..', 'test', '😁-FIXTURES');
+
 // type check
 litcss({
   include: ['*'],
@@ -21,7 +23,7 @@ run({
   async getCode(path, { options, alias } = {}) {
     const additionalPlugins = [...alias ? [aliasPlugin({ entries: alias })] : []];
 
-    const input = resolve(dir, '..', '😁-FIXTURES', path);
+    const input = resolve(FIXTURES_DIR, path);
 
     const bundle = await rollup({
       input,