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

* feat(typescript-transform): clean css

* fix: *sigh*

* chore: lint

* docs: changeset

* chore: changesets config

.changeset/config.json

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

.changeset/cssnano.md

@@ -0,0 +1,6 @@
+---
+"@pwrs/lit-css": minor
+"web-dev-server-plugin-lit-css": minor
+"esbuild-plugin-lit-css": minor
+---
+Add `cssnano` config property, deprecate `uglify` config property.

.changeset/typescript-min.md

@@ -0,0 +1,4 @@
+---
+"typescript-transform-lit-css": minor
+---
+Add `cleanCss` config property, deprecate uglify css

.eslintignore

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

.gitignore

@@ -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

.npmignore

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

package.json

@@ -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"

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

@@ -4,11 +4,14 @@ ESBuild plugin to import css files as JavaScript tagged-template literal objects
 
 > _The "Lit" stands for "Literal"_
 
-You can use it to import CSS for various libraries like `lit-element`, `@microsoft/fast-element`, or others.
+You can use it to import CSS for various libraries like `lit-element`, 
+`@microsoft/fast-element`, or others.
 
 ## Do I Need This?
 
-No. This is an optional package who's sole purpose is to make it easier to write CSS-in-CSS while working on lit-element projects. You can just as easily write your CSS in some '`styles.css.js`' modules a la:
+No. This is an optional package who's sole purpose is to make it easier to write 
+CSS-in-CSS while working on lit-element projects. You can just as easily write 
+your CSS in some '`styles.css.js`' modules a la:
 
 ```js
 import { css } from 'lit-element';
@@ -17,19 +20,21 @@ export default css`:host { display: block; }`;
 
 And this may actually be preferred.
 
-Hopefully this package will become quickly obsolete when the [CSS Modules Proposal](https://github.com/w3c/webcomponents/issues/759) (or something like it) is accepted and implemented.
+Hopefully this package will become quickly obsolete when the [CSS Modules 
+Proposal][modulesprop] (or something like it) is accepted and implemented.
 
 In the mean time, enjoy importing your CSS into your component files.
 
 ## Options
 
-| Name        | Accepts                                                                                | Default     |
-| ----------- | -------------------------------------------------------------------------------------- | ----------- |
-| `filter`    | RegExp of file names to apply to                                                       | `/\.css$/i` |
-| `uglify`    | Boolean or Object of [uglifycss](https://www.npmjs.com/package/uglifycss#api) options. | `false`     |
-| `specifier` | Package to import `css` from                                                           | `lit`       |
-| `tag`       | Name of the template-tag function                                                      | `css`       |
-| `transform` | Optional function (sync or async) which transforms css sources (e.g. postcss)          | `x => x`    |
+| Name                                   | Accepts                                                                       | Default     |
+| -------------------------------------- | ----------------------------------------------------------------------------- | ----------- |
+| `filter`                               | RegExp of file names to apply to                                              | `/\.css$/i` |
+| `uglify` (**deprecated**: use cssnano) | Boolean or Object of [uglifycss][uglifyopts] options.                         | `false`     |
+| `cssnano`                              | Boolean or Object of [cssnano][nanoopts] options.                             | `false`     |
+| `specifier`                            | Package to import `css` from                                                  | `lit`       |
+| `tag`                                  | Name of the template-tag function                                             | `css`       |
+| `transform`                            | Optional function (sync or async) which transforms css sources (e.g. postcss) | `x => x`    |
 
 ## Usage
 
@@ -142,3 +147,9 @@ await esbuild.build({
 Looking for webpack? [lit-css-loader](../lit-css-loader)
 Looking for rollup? [rollup-plugin-lit-css](../rollup-plugin-lit-css)
 Looking for typescript? [typescript-transform-lit-css](../typescript-transform-lit-css)
+
+[wds]: https://modern-web.dev/docs/dev-server/
+[modulesprop]: https://github.com/w3c/webcomponents/issues/759
+[uglifyopts]: https://www.npmjs.com/package/uglifycss#api
+[nanoopts]: https://cssnano.co/docs/config-file/#configuration-options
+

test/esbuild-plugin-lit-css/esbuild-plugin-lit-css.test.js → packages/esbuild-plugin-lit-css/test/esbuild-plugin-lit-css.test.js

@@ -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',

test/esbuild-plugin-minify-html-literals/esbuild-plugin-minify-html-literals.test.js → packages/esbuild-plugin-minify-html-literals/test/esbuild-plugin-minify-html-literals.test.js

@@ -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 {

packages/lit-css-loader/README.md

@@ -4,11 +4,14 @@ Webpack loader to import css files as JavaScript tagged-template literal objects
 
 > _The "Lit" stands for "Literal"_
 
-You can use it to import CSS for various libraries like `lit-element`, `@microsoft/fast-element`, or others.
+You can use it to import CSS for various libraries like `lit-element`, 
+`@microsoft/fast-element`, or others.
 
 ## Do I Need This?
 
-No. This is an optional package who's sole purpose is to make it easier to write CSS-in-CSS while working on lit-element projects. You can just as easily write your CSS in some '`styles.css.js`' modules a la:
+No. This is an optional package who's sole purpose is to make it easier to write 
+CSS-in-CSS while working on lit-element projects. You can just as easily write 
+your CSS in some '`styles.css.js`' modules a la:
 
 ```js
 import { css } from 'lit-element';
@@ -17,20 +20,22 @@ export default css`:host { display: block; }`;
 
 And this may actually be preferred.
 
-Hopefully this package will become quickly obsolete when the [CSS Modules Proposal](https://github.com/w3c/webcomponents/issues/759) (or something like it) is accepted and implemented.
+Hopefully this package will become quickly obsolete when the [CSS Modules 
+Proposal][modulesprop] (or something like it) is accepted and implemented.
 
 In the mean time, enjoy importing your CSS into your component files.
 
 ## Options
 
-| Name        | Accepts                                                                                | Default        |
-| ----------- | -------------------------------------------------------------------------------------- | -------------- |
-| `include`   | Array of glob of files to include.                                                     | `['**/*.css']` |
-| `exclude`   | Array of glob of files to exclude.                                                     | `undefined`    |
-| `uglify`    | Boolean or Object of [uglifycss](https://www.npmjs.com/package/uglifycss#api) options. | `false`        |
-| `specifier` | Package to import `css` from                                                           | `lit`          |
-| `tag`       | Name of the template-tag function                                                      | `css`          |
-| `transform` | Optional function (sync or async) which transforms css sources (e.g. postcss)    | `x => x`       |
+| Name                                   | Accepts                                                                       | Default        |
+| -------------------------------------- | ----------------------------------------------------------------------------- | -------------- |
+| `include`                              | Array of glob of files to include.                                            | `['**/*.css']` |
+| `exclude`                              | Array of glob of files to exclude.                                            | `undefined`    |
+| `uglify` (**deprecated**: use cssnano) | Boolean or Object of [uglifycss][uglifyopts] options.                         | `false`        |
+| `cssnano`                              | Boolean or Object of [cssnano][nanoopts] options.                             | `false`        |
+| `specifier`                            | Package to import `css` from                                                  | `lit`          |
+| `tag`                                  | Name of the template-tag function                                             | `css`          |
+| `transform`                            | Optional function (sync or async) which transforms css sources (e.g. postcss) | `x => x`       |
 
 ## Usage
 
@@ -119,3 +124,9 @@ module.exports = {
 Looking for rollup? [rollup-plugin-lit-css](../rollup-plugin-lit-css)
 Looking for esbuild? [esbuild-plugin-lit-css](../esbuild-plugin-lit-css)
 Looking for typescript? [typescript-transform-lit-css](../typescript-transform-lit-css)
+
+[wds]: https://modern-web.dev/docs/dev-server/
+[modulesprop]: https://github.com/w3c/webcomponents/issues/759
+[uglifyopts]: https://www.npmjs.com/package/uglifycss#api
+[nanoopts]: https://cssnano.co/docs/config-file/#configuration-options
+

test/lit-css-loader/compiler.js → packages/lit-css-loader/test/compiler.js

@@ -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),

test/lit-css-loader/lit-css-loader.test.js → packages/lit-css-loader/test/lit-css-loader.test.js

@@ -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));
 

packages/lit-css/lit-css.ts

@@ -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;

packages/lit-css/package.json

@@ -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/rollup-plugin-lit-css/rollup-plugin-lit-css.test.js → packages/rollup-plugin-lit-css/test/rollup-plugin-lit-css.test.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,