) {
- if (node.nodeType !== Node.ELEMENT_NODE) continue
- if (node.tagName !== 'STYLE') continue
- if (node.getAttribute('type') !== STYLE_TYPE) continue
-
- observeSheet(node as HTMLStyleElement)
- full++
- }
-
- // New nodes require an incremental rebuild
- for (let node of record.addedNodes) {
- if (node.nodeType !== 1) continue
-
- // Skip the output stylesheet itself to prevent loops
- if (node === sheet) continue
-
- incremental++
- }
-
- // Changes to class attributes require an incremental rebuild
- if (record.type === 'attributes') {
- incremental++
- }
+ return result ?? '';
}
- if (full > 0) {
- return rebuild('full')
- } else if (incremental > 0) {
- return rebuild('incremental')
+ try {
+ buildQueue = buildQueue.then(run);
+ return await buildQueue;
+ } catch (error) {
+ I.error(error);
}
-}).observe(document.documentElement, {
- attributes: true,
- attributeFilter: ['class'],
- childList: true,
- subtree: true,
-})
-
-rebuild('full')
+}
+export const tailwindCompiler = rebuild;
-document.head.append(sheet)
diff --git a/packages/@tailwindcss-browser/tsconfig.json b/packages/@tailwindcss-browser/tsconfig.json
index 8ea040daf8d3..b9e1ccb07257 100644
--- a/packages/@tailwindcss-browser/tsconfig.json
+++ b/packages/@tailwindcss-browser/tsconfig.json
@@ -2,5 +2,14 @@
"extends": "../tsconfig.base.json",
"compilerOptions": {
"lib": ["es2022", "esnext.disposable", "dom", "dom.iterable"],
+ "target": "ESNext",
+ "module": "ESNext",
+ "declaration": true,
+ "declarationDir": "dist/types",
+ "outDir": "dist",
+ "esModuleInterop": true,
+ "skipLibCheck": true,
+ "strict": true,
},
+ "include": ["src"]
}
diff --git a/packages/@tailwindcss-browser/tsup.config.ts b/packages/@tailwindcss-browser/tsup.config.ts
index bb0ddc39cde4..654a9c0db5bc 100644
--- a/packages/@tailwindcss-browser/tsup.config.ts
+++ b/packages/@tailwindcss-browser/tsup.config.ts
@@ -1,9 +1,11 @@
import { defineConfig } from 'tsup'
export default defineConfig({
- format: ['iife'],
+ format: ['esm', 'cjs'],
clean: true,
minify: true,
+ sourcemap: true,
+ dts: true,
entry: ['src/index.ts'],
noExternal: [/.*/],
loader: {
From 10e683461bee99e8deeca6cbd2749bd20017a155 Mon Sep 17 00:00:00 2001
From: ssz
Date: Sat, 17 May 2025 17:34:19 +0200
Subject: [PATCH 2/3] add description
---
README.md | 16 ++++++++++++++++
1 file changed, 16 insertions(+)
diff --git a/README.md b/README.md
index 95ec9d87ddcc..d713e64827fe 100644
--- a/README.md
+++ b/README.md
@@ -1,3 +1,19 @@
+## Tailwind in browser
+changed the packages/@tailwindcss-browser project to use it as a library
+
+- clone it
+- add it in the package.js dependencies
+
+ `"@tailwindcss-browser": "file:../../tailwindcss-browser/packages/@tailwindcss-browser"`
+- install
+
+ `pnpm install`
+- import
+
+ `import { tailwindCompiler } from "@tailwindcss-browser";`
+
+
+---
From d7b996dfbbb3e4162628855f80f384fb41fed9a1 Mon Sep 17 00:00:00 2001
From: ssz
Date: Sat, 17 May 2025 20:18:21 +0200
Subject: [PATCH 3/3] simplify
---
packages/@tailwindcss-browser/src/index.ts | 94 +++-------------------
1 file changed, 9 insertions(+), 85 deletions(-)
diff --git a/packages/@tailwindcss-browser/src/index.ts b/packages/@tailwindcss-browser/src/index.ts
index 3b5a771c9aa0..290f435dc4df 100644
--- a/packages/@tailwindcss-browser/src/index.ts
+++ b/packages/@tailwindcss-browser/src/index.ts
@@ -16,29 +16,6 @@ console.warn(
*/
let compiler: Awaited>
-/**
- * The list of all seen classes on the page so far. The compiler already has a
- * cache of classes but this lets us only pass new classes to `build(…)`.
- */
-let classes = new Set()
-
-/**
- * The last input CSS that was compiled. If stylesheets "change" without
- * actually changing, we can avoid a full rebuild.
- */
-let lastCss = ''
-
-
-/**
- * The queue of build tasks that need to be run. This is used to ensure that we
- * don't run multiple builds concurrently.
- */
-let buildQueue = Promise.resolve('')
-
-/**
- * What build this is
- */
-let nextBuildId = 1
/**
* Used for instrumenting the build process. This data shows up in the
@@ -54,28 +31,11 @@ let I = new Instrumentation()
* This does **not** imply that the CSS is actually built. That happens in the
* `build` function and is a separate scheduled task.
*/
-async function createCompiler(css: string) {
+async function createCompiler() {
I.start(`Create compiler`)
I.start('Reading Stylesheets')
-
- // The user might have no stylesheets, or a some stylesheets without `@import`
- // because they want to customize their theme so we'll inject the main import
- // for them. However, if they start using `@import` we'll let them control
- // the build completely.
- if (!css.includes('@import')) {
- css = `@import "tailwindcss";${css}`
- }
-
- I.end('Reading Stylesheets', {
- size: css.length,
- changed: lastCss !== css,
- })
-
- // The input CSS did not change so the compiler does not need to be recreated
- if (lastCss === css) return
-
- lastCss = css
+ const css = `@import "tailwindcss";`
I.start('Compile CSS')
try {
@@ -88,8 +48,6 @@ async function createCompiler(css: string) {
I.end('Compile CSS')
I.end(`Create compiler`)
}
-
- classes.clear()
}
async function loadStylesheet(id: string, base: string) {
@@ -160,59 +118,25 @@ async function loadModule(): Promise {
throw new Error(`The browser build does not support plugins or config files.`)
}
-async function build() {
- if (!compiler) return
- // 1. Refresh the known list of classes
- let newClasses = new Set()
-
- I.start(`Collect classes`)
-
- for (let element of document.querySelectorAll('[class]')) {
- for (let c of element.classList) {
- if (classes.has(c)) continue
-
- classes.add(c)
- newClasses.add(c)
- }
- }
-
- I.end(`Collect classes`, {
- count: newClasses.size,
- })
-
- // 2. Compile the CSS
- I.start(`Build utilities`)
-
- const result = compiler.build(Array.from(newClasses))
-
- I.end(`Build utilities`)
-
- return result;
-}
-
-async function rebuild(css: string) {
+async function rebuild(classes: Set) {
async function run() {
- let buildId = nextBuildId++
-
- I.start(`Build #${buildId}`)
-
- await createCompiler(css)
-
+ if (!compiler) {
+ await createCompiler()
+ }
I.start(`Build`)
- const result = await build();
+ const result = compiler.build(Array.from(classes))
I.end(`Build`)
- I.end(`Build #${buildId}`)
+ I.end(`Build`)
return result ?? '';
}
try {
- buildQueue = buildQueue.then(run);
- return await buildQueue;
+ return await Promise.resolve().then(run);;
} catch (error) {
I.error(error);
}