feat: use default tailwind separator ":"

Author: mcha

.github/workflows/publish.yml

@@ -29,7 +29,7 @@ jobs:
         node-version: ${{ matrix.node-version }}
     - run: npm ci
     - run: npm run build --if-present
-#     - run: npm test
+    - run: npm test
 
   publish:
     if: ${{ github.ref == 'refs/heads/main' }}

README.md

@@ -1,41 +1,44 @@
 # rollup-plugin-lit-tailwindcss
 
 ```js
-import litTw from 'rollup-plugin-lit-tailwindcss';
+import litTailwind from 'rollup-plugin-lit-tailwindcss';
 
 export default {
   input: 'src/index.ts',
   output: {
     dir: 'dist',
   },
   plugins: [
-    litTw({
+    litTailwind({
       include: 'src/components/**/*.ts',
       placeholder: 'tw_placeholder',
+      placeholder: undefined,
     }),
   ],
 };
 ```
 
-lit component
+Then in `lit` component file:
 
 ```ts
 import { html, css, LitElement } from 'lit';
 import { customElement } from 'lit/decorators.js';
 
-@customElement('simple-component')
+@customElement('simple-footer')
 export class SimpleComponent extends LitElement {
-  static styles = css`tw_placeholder`;
+  static styles = css`tw_placeholder`; // 👈 classes will be injected here
 
   render() {
-    return html`<h1 class="text-purple-400 hover_text-green-500">Hello, world!</h1>`;
+    return html`<h1
+      class="text-purple-400 md:text-red-400 md:hover:text-green-500"
+    >
+      Hello, world!
+    </h1>`;
   }
 }
 ```
 
-## Todos
-
+## Todo
 - is this performant???
-- tailwind separator (`_` to default one `:`)
 - read tailwind config, styles.css?
 - ...

src/index.js

@@ -4,13 +4,13 @@ import tailwindcss from 'tailwindcss';
 import autoprefixer from 'autoprefixer';
 
 function postcssTw(purgeFile) {
-  const processors = [
+  const plugins = [
     tailwindcss({
       config: { mode: 'jit', purge: [purgeFile], separator: ':' },
     }),
     autoprefixer,
   ];
-  return postcss(processors).process('@tailwind utilities;', {
+  return postcss(plugins).process('@tailwind utilities;', {
     from: undefined,
     to: undefined,
   });
@@ -33,16 +33,16 @@ export default function litTailwindcss(options = defaultOptions) {
 
     transform(code, id) {
       if (!filter(id)) return;
-
       if (code.includes(options.placeholder)) {
-        return postcssTw(id).then((result) =>
-          result.css
-            ? code.replace(
-                options.placeholder,
-                result.css.replaceAll(':', '\\:'),
-              )
-            : null,
-        );
+        return postcssTw(id).then((result) => {
+          if (result.css) {
+            return code.replace(
+              options.placeholder,
+              result.css.replaceAll(':', '\\:'),
+            );
+          }
+          return null;
+        });
       }
       return null;
     },

tailwind.config.js

@@ -0,0 +1,12 @@
+// dev only
+module.exports = {
+  purge: [],
+  darkMode: false, // or 'media' or 'class'
+  theme: {
+    extend: {},
+  },
+  variants: {
+    extend: {},
+  },
+  plugins: [],
+}

test/test.js

@@ -1,15 +1,15 @@
 const test = require('ava');
 const rollup = require('rollup');
 const { getCode } = require('../helpers');
-const litTw = require('..');
+const litTailwindcss = require('..');
 
 process.chdir(__dirname);
 
 test('processes lit component', async (t) => {
   const bundle = await rollup.rollup({
     input: 'fixtures/component.js',
     plugins: [
-      litTw({
+      litTailwindcss({
         include: 'fixtures/component.js',
         placeholder: 'tw_placeholder',
       }),
@@ -18,5 +18,3 @@ test('processes lit component', async (t) => {
 
   t.snapshot(await getCode(bundle));
 });
-
-