@bunup/plugin-tailwindcss 0.11.28 → 0.13.0

package/README.md

@@ -1,5 +1,5 @@
 # @bunup/plugin-tailwindcss
 
-The official Bunup plugin for creating libraries with Tailwind CSS.
+A plugin for Bunup that provides seamless integration with Tailwind CSS.
 
 Learn more: https://bunup.dev/docs/builtin-plugins/tailwindcss

package/dist/index.d.ts

@@ -0,0 +1,31 @@
+import { BunPlugin } from "bun";
+import { Plugin } from "postcss";
+type TailwindCSSOptions = {
+	/**
+	* Whether to inject CSS styles dynamically into the document head at runtime
+	* instead of bundling them to the build output.
+	* @default false
+	*/
+	inject?: boolean
+	/**
+	* Whether to minify the generated CSS output.
+	* @default false
+	*/
+	minify?: boolean
+	/**
+	* Whether to include Tailwind's preflight styles (CSS reset).
+	* @default false
+	*/
+	preflight?: boolean
+	/**
+	* Additional PostCSS plugins to apply during CSS processing.
+	*/
+	postcssPlugins?: Plugin[]
+};
+/**
+* A plugin for Bunup that provides seamless integration with Tailwind CSS.
+*
+* @see https://bunup.dev/docs/recipes/tailwindcss
+*/
+declare function tailwindcss(options?: TailwindCSSOptions): BunPlugin;
+export { tailwindcss, tailwindcss as default };

package/dist/index.js

@@ -0,0 +1,97 @@
+// packages/plugin-tailwindcss/src/index.ts
+import path from "node:path";
+import { getDefaultCssBrowserTargets } from "@bunup/shared";
+import tailwindPostcss from "@tailwindcss/postcss";
+import { transform } from "lightningcss";
+import postcss from "postcss";
+function tailwindcss(options = {}) {
+  return {
+    name: "bunup:tailwindcss",
+    setup: (build) => {
+      const { inject, minify, preflight, postcssPlugins } = options;
+      if (inject) {
+        build.onResolve({ filter: /^__inject-style$/ }, () => {
+          return {
+            path: "__inject-style",
+            namespace: "__inject-style"
+          };
+        });
+        build.onLoad({ filter: /^__inject-style$/, namespace: "__inject-style" }, () => {
+          return {
+            contents: `
+                      export default function injectStyle(css) {
+                        if (!css || typeof document === 'undefined') return
+
+                        const head = document.head || document.getElementsByTagName('head')[0]
+                        const style = document.createElement('style')
+                        head.appendChild(style)
+
+                        if (style.styleSheet) {
+                          style.styleSheet.cssText = css
+                        } else {
+                          style.appendChild(document.createTextNode(css))
+                        }
+                      }
+                      `,
+            loader: "js"
+          };
+        });
+      }
+      build.onLoad({ filter: /\.css$/ }, async (args) => {
+        const source = await Bun.file(args.path).text();
+        const cssFromTailwind = (await postcss([
+          tailwindPostcss({
+            base: build.config.root,
+            transformAssetUrls: false
+          }),
+          ...postcssPlugins ?? []
+        ]).process(preprocessSource(source, preflight), {
+          from: args.path
+        })).css;
+        const { code: css } = transform({
+          filename: path.basename(args.path),
+          code: Buffer.from(cssFromTailwind),
+          minify: minify ?? !!build.config.minify,
+          targets: getDefaultCssBrowserTargets()
+        });
+        if (inject) {
+          return {
+            contents: `import injectStyle from '__inject-style';injectStyle(${JSON.stringify(css)})`,
+            loader: "js"
+          };
+        }
+        return {
+          contents: css,
+          loader: "css"
+        };
+      });
+    }
+  };
+}
+var src_default = tailwindcss;
+var TAILWIND_IMPORT_RE = /^[\s]*@import\s+["']tailwindcss[^"']*["'][^;]*;[\s]*$/gm;
+var PREFIX_RE = /^[\s]*@import\s+["']tailwindcss[^"']*["'][^;]*prefix\(([^)]+)\)[^;]*;[\s]*$/gm;
+function extractPrefix(source) {
+  const match = source.match(PREFIX_RE);
+  if (match) {
+    const prefixMatch = match[0].match(/prefix\(([^)]+)\)/);
+    return prefixMatch ? prefixMatch[1] : null;
+  }
+  return null;
+}
+function preprocessSource(source, preflight) {
+  const prefix = extractPrefix(source);
+  const removedTailwindImports = source.replace(TAILWIND_IMPORT_RE, "");
+  return `
+	@layer theme, base, components, utilities;
+	@import "tailwindcss/theme.css" layer(theme)${prefix ? ` prefix(${prefix});` : ";"};
+	${preflight ? `@import "tailwindcss/preflight.css" layer(base)${prefix ? ` prefix(${prefix});` : ";"};` : ""}
+	@import "tailwindcss/utilities.css" layer(utilities)${prefix ? ` prefix(${prefix});` : ";"};
+	@source not inline("{contents,filter,transform}");
+	${removedTailwindImports}
+`.trim();
+}
+export {
+  tailwindcss,
+  src_default as default
+};

package/package.json

@@ -1,13 +1,21 @@
 {
 	"name": "@bunup/plugin-tailwindcss",
-	"description": "The official Bunup plugin for creating libraries with Tailwind CSS.",
-	"version": "0.11.28",
-	"type": "module",
-	"files": [
-		"dist"
-	],
+	"version": "0.13.0",
+	"author": "Arshad Yaseen <m@arshadyaseen.com> (https://arshadyaseen.com)",
+	"repository": {
+		"type": "git",
+		"url": "git+https://github.com/bunup/bunup.git"
+	},
 	"module": "./dist/index.js",
-	"types": "./dist/index.d.ts",
+	"dependencies": {
+		"@tailwindcss/postcss": "^4.1.13",
+		"lightningcss": "^1.30.1",
+		"postcss": "^8.5.6",
+		"@bunup/shared": "0.11.30"
+	},
+	"peerDependencies": {
+		"typescript": ">=4.5.0"
+	},
 	"exports": {
 		".": {
 			"import": {
@@ -17,8 +25,18 @@
 		},
 		"./package.json": "./package.json"
 	},
+	"description": "A plugin for Bunup that provides seamless integration with Tailwind CSS.",
+	"files": [
+		"dist"
+	],
+	"funding": "https://github.com/sponsors/arshad-yaseen",
+	"homepage": "https://bunup.dev",
+	"keywords": [
+		"bunup",
+		"tailwindcss",
+		"bunup-tailwindcss"
+	],
 	"license": "MIT",
-	"author": "Arshad Yaseen <m@arshadyaseen.com> (https://arshadyaseen.com)",
 	"maintainers": [
 		{
 			"name": "Arshad Yaseen",
@@ -26,28 +44,11 @@
 			"url": "https://arshadyaseen.com"
 		}
 	],
-	"keywords": [
-		"bunup",
-		"tailwindcss",
-		"bunup-tailwindcss"
-	],
-	"repository": {
-		"type": "git",
-		"url": "git+https://github.com/bunup/bunup.git"
-	},
-	"funding": "https://github.com/sponsors/arshad-yaseen",
-	"homepage": "https://bunup.dev",
-	"peerDependencies": {
-		"typescript": ">=4.5.0"
-	},
 	"peerDependenciesMeta": {
 		"typescript": {
 			"optional": true
 		}
 	},
-	"dependencies": {
-		"@tailwindcss/postcss": "^4.1.13",
-		"lightningcss": "^1.30.1",
-		"postcss": "^8.5.6"
-	}
+	"type": "module",
+	"types": "./dist/index.d.ts"
 }