feat: typescript-transform-lit-css

package.json

@@ -39,26 +39,26 @@
     "@web/dev-server-core": "^0.6.3",
     "arraybuffer-to-string": "^1.0.2",
     "cross-env": "^7.0.3",
-    "cz-conventional-changelog": "^3.1.0",
+    "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.0",
+    "lit": "^3.0.1",
     "memfs": "^3.5.0",
     "nodemon": "^2.0.22",
     "npm-run-all": "^4.1.5",
     "postcss": "^8.4.31",
     "postcss-nesting": "^10.2.0",
     "rollup": "^2.79.1",
     "rollup-plugin-alias": "^2.2.0",
-    "sass": "^1.69.4",
+    "sass": "^1.69.5",
     "semantic-release": "^19.0.5",
     "tap-spec": "^5.0.0",
     "tap-summary": "^4.0.0",
-    "tape": "^5.7.1",
-    "typescript": "^4.9.5",
+    "tape": "^5.7.2",
+    "typescript": "^5.2.2",
     "webpack": "^5.89.0",
     "wsrun": "^5.2.4"
   }
-}
+}

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

@@ -141,3 +141,4 @@ 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)

packages/esbuild-plugin-lit-css/package.json

@@ -38,4 +38,4 @@
     "esbuild": "^0.16.17 || ^0.17.16 || ^0.18.1 || ^0.19.5",
     "lit": "^2.7.2 || ^3.0.0"
   }
-}
+}

packages/esbuild-plugin-minify-html-literals/package.json

@@ -37,4 +37,4 @@
   "peerDependencies": {
     "esbuild": "^0.16.17 || ^0.17.16 || ^0.18.1 || ^0.19.5"
   }
-}
+}

packages/lit-css-loader/README.md

@@ -118,3 +118,4 @@ 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)

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

@@ -177,3 +177,7 @@ export default {
   ]
 }
 ```
+
+Looking for webpack? [lit-css-loader](../lit-css-loader)
+Looking for esbuild? [esbuild-plugin-lit-css](../esbuild-plugin-lit-css)
+Looking for typescript? [typescript-transform-lit-css](../typescript-transform-lit-css)

packages/rollup-plugin-lit-css/package.json

@@ -32,6 +32,6 @@
   ],
   "dependencies": {
     "@pwrs/lit-css": "^2.0.0",
-    "@rollup/pluginutils": "^5.0.2"
+    "@rollup/pluginutils": "^5.0.5"
   }
 }

packages/typescript-transform-lit-css/README.md

@@ -0,0 +1,105 @@
+# typescript-transform-lit-css
+
+TypeScript transformer to import css files as JavaScript tagged-template literal objects.
+Use it with [ts-patch](https://npm.im/ts-patch)
+
+> _The "Lit" stands for "Literal"_
+
+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:
+
+```js
+import { css } from 'lit-element';
+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.
+
+In the mean time, enjoy importing your CSS into your component files.
+
+## Options
+
+| Name        | Accepts                                                            | Default |
+| ----------- | ------------------------------------------------------------------ | ------- |
+| `uglify`    | Boolean, whether to minify css.                                    | `false` |
+| `inline`    | Boolean, whether to inline css imports into the typescript source. | `false` |
+| `specifier` | Package to import `css` from                                       | `lit`   |
+| `tag`       | Name of the template-tag function                                  | `css`   |
+
+## Usage
+
+```json5
+{
+  "compilerOptions": {
+    "plugins": [
+      {
+        "transform": "typescript-transform-lit-css",
+      },
+    ]
+  }
+}
+```
+
+Then import your CSS:
+
+```css
+:host {
+  display: block;
+}
+
+h1 {
+  color: hotpink;
+}
+```
+
+```ts
+import { LitElement, customElement, html } from 'lit-element';
+
+import style from './css-in-css.css';
+
+@customElement('css-in-css')
+class CSSInCSS extends LitElement {
+  static get styles() {
+    return [style];
+  }
+
+  render() {
+    return html`<h1>It's Lit!</h1>`;
+  }
+}
+```
+
+### Usage with FAST
+
+```json5
+{
+  "compilerOptions": {
+    "plugins": [
+      {
+        "transform": "typescript-transform-lit-css",
+        "specifier": "@microsoft/fast-element",
+      },
+    ]
+  }
+}
+```
+
+```ts
+import { FASTElement, customElement, html } from '@microsoft/fast-element';
+
+import styles from './css-in-css.css';
+
+const template = html<CSSinCSS>`<h1>It's Lit!</h1>`;
+
+@customElement({ name: 'css-in-css', template, styles })
+class CSSinCSS extends FASTElement {}
+```
+
+Looking for esbuild? [esbuild-plugin-lit-css](../esbuild-plugin-lit-css)
+Looking for webpack? [lit-css-loader](../lit-css-loader)
+Looking for rollup? [rollup-plugin-lit-css](../rollup-plugin-lit-css)

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

@@ -0,0 +1,42 @@
+{
+  "name": "typescript-transform-lit-css",
+  "description": "import CSS files as tagged template literals",
+  "version": "1.0.0",
+  "type": "module",
+  "main": "typescript-transform-lit-css.js",
+  "types": "typescript-transform-lit-css.d.ts",
+  "exports": {
+    "import": "./typescript-transform-lit-css.js",
+    "require": "./typescript-transform-lit-css.cjs"
+  },
+  "author": "Benny Powers <web@bennypowers.com>",
+  "license": "ISC",
+  "repository": {
+    "type": "git",
+    "url": "git+ssh://git@github.com/bennypowers/lit-css.git",
+    "directory": "packages/typescript-transform-lit-css"
+  },
+  "bugs": {
+    "url": "https://github.com/bennypowers/lit-css/issues"
+  },
+  "keywords": [
+    "typescript",
+    "transform",
+    "lit",
+    "css",
+    "webcomponents"
+  ],
+  "files": [
+    "typescript-transform-lit-css.cjs",
+    "typescript-transform-lit-css.js",
+    "typescript-transform-lit-css.d.ts"
+  ],
+  "dependencies": {
+    "@pwrs/lit-css": "^2.0.0"
+  },
+  "peerDependencies": {
+    "typescript": "^5",
+    "ts-patch": "^3.0",
+    "lit": "^2.7.2 || ^3.0.0"
+  }
+}