feat: added support to optionally generate entire styles including preflight and base css

Author: surajair

package.json

@@ -5,7 +5,7 @@
   "author": "Suraj Air",
   "license": "BSD-3-Clause",
   "homepage": "https://chaibuilder.com",
-  "version": "1.2.4",
+  "version": "1.2.5",
   "type": "module",
   "repository": {
     "type": "git",

src/Preview.tsx

@@ -12,15 +12,15 @@ function Preview() {
 
   useEffect(() => {
     (async () => {
-      const styles = await getStylesForBlocks(blocks, brandingOptions);
+      const styles = await getStylesForBlocks(blocks, brandingOptions, "", true);
       setStyles(styles);
     })();
   }, [blocks, brandingOptions]);
 
   return (
     <>
       <style>{allStyles}</style>
-      <RenderChaiBlocks blocks={blocks} />
+      <RenderChaiBlocks classPrefix={""} blocks={blocks} />
     </>
   );
 }

src/render/getTailwindCSS.ts

@@ -5,7 +5,6 @@ import defaultTheme from "tailwindcss/defaultTheme";
 import twForms from "@tailwindcss/forms";
 import twTypography from "@tailwindcss/typography";
 import twAspectRatio from "@tailwindcss/aspect-ratio";
-import twLineClamp from "@tailwindcss/line-clamp";
 import { ChaiBlock } from "../core/types/ChaiBlock.ts";
 import { addPrefixToClasses, ChaiPageData, getBrandingClasses } from "./functions.ts";
 import { STYLES_KEY } from "../core/constants/CONTROLS.ts";
@@ -16,6 +15,7 @@ export async function getTailwindCSS(
   markupString: string[],
   safelist: string[] = [],
   prefix: string = "c-",
+  includeBaseStyles: boolean = false,
 ) {
   const primary = get(options, "primaryColor", "#000");
   const secondary = get(options, "secondaryColor", "#ccc");
@@ -31,7 +31,6 @@ export async function getTailwindCSS(
   set(colors, "secondary.DEFAULT", secondary);
   const tailwind = createTailwindcss({
     tailwindConfig: {
-      prefix,
       darkMode: "class",
       safelist,
       theme: {
@@ -46,19 +45,22 @@ export async function getTailwindCSS(
           colors,
         },
       },
-      plugins: [twForms, twTypography, twAspectRatio, twLineClamp],
-      corePlugins: { preflight: false },
+      plugins: [twForms, twTypography, twAspectRatio],
+      corePlugins: { preflight: includeBaseStyles },
+      ...(prefix ? { prefix: `${prefix}` } : {}),
     },
   });
 
   const css = await tailwind.generateStylesFromContent(
-    ` @tailwind components;
+    ` ${includeBaseStyles ? "@tailwind base;" : ""}
+      @tailwind components;
       @tailwind utilities;`,
     markupString,
   );
-  return `${css} .${prefix}bg-clip-text{background-clip: text;-webkit-background-clip: text;} h1,h2,h3,h4,h5,h6{font-family: "${headingFont}",${defaultTheme.fontFamily.sans.join(
-    ", ",
-  )};}`;
+  return `${css} 
+    .${prefix}bg-clip-text{background-clip: text;-webkit-background-clip: text;} h1,h2,h3,h4,h5,h6{font-family: "${headingFont}",${defaultTheme.fontFamily.sans.join(
+      ", ",
+    )};}`;
 }
 
 const addPrefixToBlockStyles = (blocks: ChaiBlock[], prefix: string) => {
@@ -75,23 +77,37 @@ const addPrefixToBlockStyles = (blocks: ChaiBlock[], prefix: string) => {
   });
 };
 
-export const getBlocksTailwindCSS = (blocks: ChaiBlock[], brandingOptions: any, prefix: string = "c-") => {
+export const getBlocksTailwindCSS = (
+  blocks: ChaiBlock[],
+  brandingOptions: any,
+  prefix: string = "c-",
+  includeBaseStyles: boolean = false,
+) => {
   const brandingClasses = getBrandingClasses(brandingOptions, prefix);
   return getTailwindCSS(
     brandingOptions,
     [replace(JSON.stringify(addPrefixToBlockStyles(blocks, prefix)), /#styles:/g, "")],
     brandingClasses.split(" ").concat(`${prefix}inline-block`, `${prefix}w-full`, `${prefix}h-full`),
+    prefix,
+    includeBaseStyles,
   );
 };
-export const getStylesForPageData = async (pageData: ChaiPageData, classPrefix: string = "c-"): Promise<string> => {
+
+export const getStylesForPageData = async (
+  pageData: ChaiPageData,
+  classPrefix: string = "c-",
+  includeBaseStyles: boolean = false,
+): Promise<string> => {
   //TODO: add support for subpages
   const blocks = pageData.page.blocks;
-  return await getBlocksTailwindCSS(blocks, pageData.project.brandingOptions, classPrefix);
+  return await getBlocksTailwindCSS(blocks, pageData.project.brandingOptions, classPrefix, includeBaseStyles);
 };
+
 export const getStylesForBlocks = async (
   blocks: ChaiBlock[],
   brandingOptions: BrandingOptions,
   classPrefix: string = "c-",
+  includeBaseStyles: boolean = false,
 ): Promise<string> => {
-  return await getBlocksTailwindCSS(blocks, brandingOptions, classPrefix);
+  return await getBlocksTailwindCSS(blocks, brandingOptions, classPrefix, includeBaseStyles);
 };