chore: add tailwind styles support for lit components (#4862)

This PR adds the TailwindLitElement class which can be used to use tailwind classes in multiple Lit components with [no unnecessary CSS duplication](#4804 (comment)). At this time this is for Tailwind V3 but this can be made compatible with Tailwind V4 with [minimal changes](#4804 (comment)). Based on #4804, without the atomic-text component and its styles. You can refer to the comments for details on usage. --------- Co-authored-by: GitHub Actions Bot <> Co-authored-by: ylakhdar <[email protected]>
coveo · Jan 24, 2025 · 6537c36 · 6537c36
1 parent 4678a59
commit 6537c36
Show file tree

Hide file tree

Showing 11 changed files with 492 additions and 2 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/atomic-angular/scripts/build-lit.mjs b/packages/atomic-angular/scripts/build-lit.mjs
@@ -1,7 +1,7 @@
 import cem from '@coveo/atomic/custom-elements-manifest' with {type: 'json'};
 import { createWriteStream, readFileSync, writeFileSync } from 'fs';
 
-const isLitDeclaration = (declaration) => declaration?.superclass?.name === 'LitElement';
+const isLitDeclaration = (declaration) => declaration?.superclass?.name === 'LitElement' || declaration?.superclass?.name === 'TailwindLitElement';
 
 const atomicAngularModuleFilePath ='projects/atomic-angular/src/lib/stencil-generated/atomic-angular.module.ts';
 const atomicAngularComponentFilePath = 'projects/atomic-angular/src/lib/stencil-generated/components.ts';

diff --git a/packages/atomic-react/scripts/build-lit.mjs b/packages/atomic-react/scripts/build-lit.mjs
@@ -3,7 +3,7 @@ import {writeFileSync} from 'node:fs';
 import * as prettier from 'prettier';
 
 const isLitDeclaration = (declaration) =>
-  declaration?.superclass?.name === 'LitElement';
+  declaration?.superclass?.name === 'LitElement' || declaration?.superclass?.name === 'TailwindLitElement';
 
 const entries = [
   {

diff --git a/packages/atomic/package.json b/packages/atomic/package.json
@@ -126,11 +126,13 @@
     "jest-cli": "29.7.0",
     "jest-environment-node": "29.7.0",
     "jest-localstorage-mock": "2.4.26",
+    "lightningcss": "1.28.2",
     "lit-html": "3.2.1",
     "local-web-server": "5.4.0",
     "natural-orderby": "5.0.0",
     "postcss-focus-visible": "10.0.1",
     "postcss-import": "16.1.0",
+    "postcss-load-config": "6.0.1",
     "postcss-map": "0.11.0",
     "postcss-mixins": "11.0.3",
     "postcss-nested": "7.0.2",

diff --git a/packages/atomic/postcss.config.mjs b/packages/atomic/postcss.config.mjs
@@ -0,0 +1,7 @@
+import autoprefixer from 'autoprefixer';
+import postcssImport from 'postcss-import';
+import tailwindcss from 'tailwindcss';
+
+export default {
+  plugins: [postcssImport(), tailwindcss(), autoprefixer()],
+};