separator :

Author: mcha

src/index.js

@@ -6,7 +6,7 @@ import autoprefixer from 'autoprefixer';
 function postcssTw(purgeFile) {
   const processors = [
     tailwindcss({
-      config: { mode: 'jit', purge: [purgeFile], separator: '_' },
+      config: { mode: 'jit', purge: [purgeFile], separator: ':' },
     }),
     autoprefixer,
   ];
@@ -36,7 +36,12 @@ export default function litTailwindcss(options = defaultOptions) {
 
       if (code.includes(options.placeholder)) {
         return postcssTw(id).then((result) =>
-          result.css ? code.replace(options.placeholder, result.css) : null,
+          result.css
+            ? code.replace(
+                options.placeholder,
+                result.css.replaceAll(':', '\\:'),
+              )
+            : null,
         );
       }
       return null;

test/fixtures/component.js

@@ -5,10 +5,12 @@ export class SimpleComponent extends LitElement {
   static styles = css`tw_placeholder`;
 
   render() {
-    return html`<h1 class="text-purple-400 hover_text-green-500">
+    return html`<h1
+      class="text-purple-400 hover:text-green-500 md:text-red-400 md:hover:text-indigo-900"
+    >
       Hello, world!
     </h1>`;
   }
 }
 
-customElements.define('simple-component', SimpleComponent);
+customElements.define('simple-component', SimpleComponent);

test/snapshots/test.js.md

@@ -13,19 +13,31 @@ Generated by [AVA](https://avajs.dev).
     ␊
       class SimpleComponent extends lit.LitElement {␊
         static styles = lit.css\`.static {␊
-        position: static␊
+        position\\: static␊
     }␊
     .text-purple-400 {␊
-        --tw-text-opacity: 1;␊
-        color: rgba(167, 139, 250, var(--tw-text-opacity))␊
+        --tw-text-opacity\\: 1;␊
+        color\\: rgba(167, 139, 250, var(--tw-text-opacity))␊
     }␊
-    .hover_text-green-500:hover {␊
-        --tw-text-opacity: 1;␊
-        color: rgba(16, 185, 129, var(--tw-text-opacity))␊
+    .hover\\\\:text-green-500\\:hover {␊
+        --tw-text-opacity\\: 1;␊
+        color\\: rgba(16, 185, 129, var(--tw-text-opacity))␊
+    }␊
+    @media (min-width\\: 768px) {␊
+        .md\\\\:text-red-400 {␊
+            --tw-text-opacity\\: 1;␊
+            color\\: rgba(248, 113, 113, var(--tw-text-opacity))␊
+        }␊
+        .md\\\\:hover\\\\:text-indigo-900\\:hover {␊
+            --tw-text-opacity\\: 1;␊
+            color\\: rgba(49, 46, 129, var(--tw-text-opacity))␊
+        }␊
     }\`;␊
     ␊
         render() {␊
-          return lit.html\`<h1 class="text-purple-400 hover_text-green-500">␊
+          return lit.html\`<h1␊
+          class="text-purple-400 hover:text-green-500 md:text-red-400 md:hover:text-indigo-900"␊
+        >␊
           Hello, world!␊
         </h1>\`;␊
         }␊