@blockbite/tailwind 3.4.2

package/.gitattributes

@@ -0,0 +1,2 @@
+# Auto detect text files and perform LF normalization
+* text=auto

package/.tool-versions

@@ -0,0 +1 @@
+nodejs 22.14.0

package/README.md

@@ -0,0 +1,75 @@
+# blockbite-tailwind
+
+wordpress theme.json parser to blockbite tailwind theme
+
+https://github.com/merijnponzo/blockbite-tailwind
+
+(for owner)
+npm version <update_type>
+npm publish
+
+# extend your tailwindconfig for wordpress
+
+• uses a 16px grid system for spacing and dimensions like p-16 or w-128, or with default prefixing b_p-16 etc
+(easy to remember, consistent layouts)
+• use dynamic font sizes in 8 steps, easy
+(easy to remember, consistent layouts)
+
+example
+
+```
+import { themeParser } from 'blockbite-tailwind'
+const fluidContainer = require('blockbite-tailwind/components/fluid-container')
+
+// load theme.json
+const themeJson = require('./theme.json')
+// parse it to tailwind values
+// https://www.blockbite.dev/documentation/api/themeParser
+const theme = themeParser(themeJson, {
+	prefixScreens: 'b_',
+	prefixAspectRatio: 'b_',
+	prefixContainer: 'b_',
+	prefixSpacing: 'b_',
+})
+
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+	content: [
+		'./blocks/**/*.{html,js,php}',
+		'./templates/**/*.{html,js,php}',
+		'./views/**/*.twig',
+	],
+	/* give the blockbite class a lower priority then the inline editor styles from the plugin ! */
+	important: '.theme',
+	safelist: [
+		'container-fluid',
+		'relative',
+		'w-full',
+		'-right-512',
+		'right-0',
+		'shadow-xl',
+		'bg-white',
+	],
+	theme: {
+		fontFamily: theme.fonts,
+		container: theme.container,
+		extend: {
+			fontSize: theme.fontSizes,
+			fontWeight: theme.fontWeights,
+			colors: theme.colors,
+			spacing: theme.spacing,
+			gap: theme.spacing,
+			minWidth: theme.spacing,
+			maxWidth: theme.spacing,
+			minHeight: theme.spacing,
+			maxHeight: theme.spacing,
+			aspectRatio: theme.aspectRatio,
+			screens: theme.screens,
+			backgroundImage: {
+				'bk-circle': "url('../resources/images/bgcircle.svg')",
+			},
+		},
+	},
+	plugins: [fluidContainer],
+}
+```

package/blockbite-tailwind.code-workspace

@@ -0,0 +1,7 @@
+{
+	"folders": [
+		{
+			"path": "."
+		}
+	]
+}

package/components/anchor-position.js

@@ -0,0 +1,110 @@
+module.exports = function ({ addComponents, theme }) {
+  const anchorTopCenter = {
+    ".b_anchor-top-center": {
+      position: "absolute",
+      top: "0",
+      left: "50%",
+      transform: "translate(-50%, -50%)",
+    },
+  };
+
+  const anchorTopLeft = {
+    ".b_anchor-top-left": {
+      position: "absolute",
+      top: "0",
+      left: "0",
+    },
+  };
+
+  const anchorTopRight = {
+    ".b_anchor-top-right": {
+      position: "absolute",
+      top: "0",
+      right: "0",
+    },
+  };
+
+  const anchorBottomCenter = {
+    ".b_anchor-bottom-center": {
+      position: "absolute",
+      bottom: "0",
+      left: "50%",
+      transform: "translate(-50%, 50%)",
+    },
+  };
+
+  const anchorBottomLeft = {
+    ".b_anchor-bottom-left": {
+      position: "absolute",
+      bottom: "0",
+      left: "0",
+    },
+  };
+
+  const anchorBottomRight = {
+    ".b_anchor-bottom-right": {
+      position: "absolute",
+      bottom: "0",
+      right: "0",
+    },
+  };
+
+  const anchorCenterLeft = {
+    ".b_anchor-center-left": {
+      position: "absolute",
+      top: "50%",
+      left: "0",
+      transform: "translate(-50%, -50%)",
+    },
+  };
+
+  const anchorCenterRight = {
+    ".b_anchor-center-right": {
+      position: "absolute",
+      top: "50%",
+      right: "0",
+      transform: "translate(50%, -50%)",
+    },
+  };
+
+  const anchorCenterCenter = {
+    ".b_anchor-center-center": {
+      position: "absolute",
+      top: "50%",
+      left: "50%",
+      transform: "translate(-50%, -50%)",
+    },
+  };
+
+  const anchorCenterTop = {
+    ".b_anchor-center-top": {
+      position: "absolute",
+      top: "0",
+      left: "50%",
+      transform: "translate(-50%, 0%)",
+    },
+  };
+
+  const anchorCenterBottom = {
+    ".b_anchor-center-bottom": {
+      position: "absolute",
+      bottom: "0",
+      left: "50%",
+      transform: "translate(-50%, 0%)",
+    },
+  };
+
+  addComponents([
+    anchorTopCenter,
+    anchorTopLeft,
+    anchorTopRight,
+    anchorBottomCenter,
+    anchorBottomLeft,
+    anchorBottomRight,
+    anchorCenterLeft,
+    anchorCenterRight,
+    anchorCenterCenter,
+    anchorCenterTop,
+    anchorCenterBottom,
+  ]);
+};

package/components/fluid-container.js

@@ -0,0 +1,34 @@
+/*
+--b_container-fluid-xs: 98vw;
+--b_container-fluid-xl: 95vw;
+--b_padding: 1rem;
+*/
+module.exports = function ({ addComponents, theme, config }) {
+  const important = config("important");
+  const prefix = typeof important === "string" ? important : "";
+
+  const container = {
+    [`${prefix} .b_container-fluid`]: {
+      marginLeft: "auto",
+      marginRight: "auto",
+      paddingLeft: "var(--b_padding, 4vw)",
+      paddingRight: "var(--b_padding, 4vw)",
+    },
+  };
+
+  const maxWidth2xl = theme("screens.2xl");
+  // Add a media query for screens at '2xl' size
+  if (maxWidth2xl) {
+    container[`@media (min-width: ${maxWidth2xl})`] = {
+      [`${prefix} .b_container-fluid`]: {
+        maxWidth: maxWidth2xl,
+        marginLeft: "auto",
+        marginRight: "auto",
+        paddingLeft: "var(--b_padding, 1rem)",
+        paddingRight: "var(--b_padding, 1rem)",
+      },
+    };
+  }
+
+  addComponents(container);
+};

package/components/grid-container.js

@@ -0,0 +1,37 @@
+module.exports = function ({ addComponents, theme, config }) {
+  const maxWidthLg = theme("screens.lg");
+  const maxWidth2xl = theme("screens.2xl");
+
+  const important = config("important");
+  const cssVars = config("cssVars") | false;
+  const prefix = typeof important === "string" ? important : "";
+
+  const container = {
+    [`${prefix} .b_grid-container`]: {
+      display: "grid",
+      gridTemplateColumns: "1fr repeat(12, var(--b_col-width)) 1fr!important",
+    },
+  };
+  // skip adding the breakpoint-specific variables if cssVars is false
+  if (cssVars) {
+    const breakpoints = {
+      [maxWidthLg]: {
+        "--b_col-width": "calc((100% - ((var(--b_padding, 4vw) ) * 2)) / 12)",
+        "--b_fr-size": "4vw",
+      },
+      [maxWidth2xl]: {
+        "--b_col-width": `calc((${maxWidth2xl} - (var(--b_padding, 1rem) * 2)) / 12)`,
+        "--b_padding": "var(--b_padding, 1rem)",
+        "--b_fr-size": `calc(100% - ${maxWidth2xl} / 2)`,
+      },
+    };
+
+    // Add breakpoint-specific variables
+    for (const [breakpoint, vars] of Object.entries(breakpoints)) {
+      container[`@media (min-width: ${breakpoint})`] = {
+        ":root": vars,
+      };
+    }
+  }
+  addComponents(container);
+};

package/components/interaction.js

@@ -0,0 +1,37 @@
+module.exports = function ({ addComponents }) {
+  const b_tileslide_in = {
+    ".b_tile-in-left": {
+      position: "absolute!important",
+      top: 0,
+      left: 0,
+      right: 0,
+      bottom: 0,
+      zIndex: 10,
+      overflow: "hidden",
+      transition: "transform 0.5s",
+      transform: "translateX(-100%)",
+    },
+    ".b_active .b_tile-in-left": {
+      transform: "translateX(0%)",
+    },
+  };
+
+  const b_tilefade_in = {
+    ".b_tile-in-fade": {
+      opacity: 0,
+      transition: "opacity 0.5s",
+      position: "absolute!important",
+      top: 0,
+      left: 0,
+      right: 0,
+      bottom: 0,
+      zIndex: 10,
+      overflow: "hidden",
+    },
+    ".b_active .b_tile-in-fade": {
+      opacity: 1,
+    },
+  };
+
+  addComponents([b_tileslide_in, b_tilefade_in]);
+};

package/components/swiper.js

@@ -0,0 +1,13 @@
+module.exports = function ({ addComponents }) {
+  // allows infinite loop for swiper continues
+  const b_newsticker = {
+    ".b_newsticker": {
+      "& > .swiper-free-mode > .swiper-wrapper": {
+        "-webkit-transition-timing-function": "linear !important",
+        "-o-transition-timing-function": "linear !important",
+        "transition-timing-function": "linear !important",
+      },
+    },
+  };
+  addComponents(b_newsticker);
+};

package/deprecated/fluid-container-aside.js

@@ -0,0 +1,48 @@
+module.exports = function ({ addComponents, theme }) {
+  const container = {
+    ".b_container-fluid-aside-r": {
+      width: "var(--container-fluid-xs)",
+      marginLeft: "auto",
+      marginRight: "auto",
+      paddingLeft: "1rem",
+      paddingRight: "1rem",
+    },
+    ".b_container-fluid-aside-l": {
+      width: "var(--container-fluid-xs)",
+      marginLeft: "auto",
+      marginRight: "auto",
+      paddingLeft: "1rem",
+      paddingRight: "1rem",
+    },
+  };
+
+  const maxWidth2xl = theme("screens.2xl");
+  const minWidthLg = theme("screens.lg");
+
+  if (minWidthLg) {
+    container[`@media (min-width: ${minWidthLg})`] = {
+      ".b_container-fluid-aside-l": {
+        width: "var(--container-fluid-xl)",
+        marginLeft: `calc((100% - var(--container-fluid-xl)) / 2)`,
+      },
+      ".b_container-fluid-aside-r": {
+        width: "var(--container-fluid-xl)",
+        marginRight: `calc((100% - var(--container-fluid-xl)) / 2 )`,
+      },
+    };
+  }
+  if (maxWidth2xl) {
+    container[`@media (min-width: ${maxWidth2xl})`] = {
+      ".b_container-fluid-aside-l": {
+        width: `calc(100% - (100% - ${maxWidth2xl}) / 2)`,
+        marginLeft: `calc((100% - ${maxWidth2xl}) / 2)`,
+      },
+      ".b_container-fluid-aside-r": {
+        width: `calc(100% - (100% - ${maxWidth2xl}) / 2)`,
+        marginRight: `calc((100% - ${maxWidth2xl}) / 2)`,
+      },
+    };
+  }
+
+  addComponents(container);
+};

package/deprecated/fluid-container-half.js

@@ -0,0 +1,48 @@
+module.exports = function ({ addComponents, theme }) {
+  const container = {
+    ".b_container-fluid-half-r": {
+      width: "var(--container-fluid-xs)",
+      marginLeft: "auto",
+      marginRight: "auto",
+      paddingLeft: "1rem",
+      paddingRight: "1rem",
+    },
+    ".b_container-fluid-half-l": {
+      width: "var(--container-fluid-xs)",
+      marginLeft: "auto",
+      marginRight: "auto",
+      paddingLeft: "1rem",
+      paddingRight: "1rem",
+    },
+  };
+
+  const maxWidth2xl = theme("screens.2xl");
+  const minWidthLg = theme("screens.lg");
+
+  if (minWidthLg) {
+    container[`@media (min-width: ${minWidthLg})`] = {
+      ".b_container-fluid-half-l": {
+        width: "50%",
+        marginLeft: `calc((100% - var(--container-fluid-xl)) / 2)`,
+      },
+      ".b_container-fluid-half-r": {
+        width: "50%",
+        marginRight: `calc((100% - var(--container-fluid-xl)) / 2 )`,
+      },
+    };
+  }
+  if (maxWidth2xl) {
+    container[`@media (min-width: ${maxWidth2xl})`] = {
+      ".b_container-fluid-half-l": {
+        width: `calc(${maxWidth2xl} / 2)`,
+        marginLeft: `calc((100% - ${maxWidth2xl}) / 2)`,
+      },
+      ".b_container-fluid-half-r": {
+        width: `calc(${maxWidth2xl} / 2)`,
+        marginRight: `calc((100% - ${maxWidth2xl}) / 2)`,
+      },
+    };
+  }
+
+  addComponents(container);
+};

package/gridarea/index.js

@@ -0,0 +1,6 @@
+const plugin = require("tailwindcss/plugin");
+
+module.exports = plugin((api) => {
+  require("./utilities/area-dimensions")(api);
+  require("./utilities/grid-area")(api);
+});

package/gridarea/utilities/area-dimensions.js

@@ -0,0 +1,13 @@
+module.exports = function ({ addUtilities, theme, e }) {
+  const newUtilities = {};
+
+  // 96 is max resolution
+  for (let i = 0; i <= 97; i++) {
+    newUtilities[`.${e(`b_area-x-${i}`)}`] = { "--b_area-x": `${i}` };
+    newUtilities[`.${e(`b_area-y-${i}`)}`] = { "--b_area-y": `${i}` };
+    newUtilities[`.${e(`b_area-w-${i}`)}`] = { "--b_area-w": `${i}` };
+    newUtilities[`.${e(`b_area-h-${i}`)}`] = { "--b_area-h": `${i}` };
+  }
+
+  addUtilities(newUtilities, ["responsive"]);
+};

package/gridarea/utilities/grid-area.js

@@ -0,0 +1,51 @@
+const plugin = require("tailwindcss/plugin");
+
+module.exports = function ({ addComponents, matchUtilities, theme, config }) {
+  const important = config("important");
+  const prefix = typeof important === "string" ? important : "";
+  // Predefined grid-area utilities
+  addComponents({
+    [`${prefix} .b_area`]: {
+      gridArea:
+        "var(--b_area-y) / var(--b_area-x) / calc(var(--b_area-y) + var(--b_area-h)) / calc(var(--b_area-x) + var(--b_area-w))",
+    },
+    [`${prefix} .b_grid-area-16`]: {
+      display: "grid",
+      gridTemplateColumns: "repeat(16, 1fr)",
+      gridTemplateRows: "repeat(16, 1fr)",
+      "--init-area": "1 / 1 / 4 / 4",
+    },
+    [`${prefix} .b_grid-area-32`]: {
+      display: "grid",
+      gridTemplateColumns: "repeat(32, 1fr)",
+      gridTemplateRows: "repeat(32, 1fr)",
+      "--init-area": "1 / 1 / 8 / 8",
+    },
+    [`${prefix} .b_grid-area-64`]: {
+      display: "grid",
+      gridTemplateColumns: "repeat(64, 1fr)",
+      gridTemplateRows: "repeat(64, 1fr)",
+      "--init-area": "1 / 1 / 16 / 16",
+    },
+    [`${prefix} .b_grid-area-96`]: {
+      display: "grid",
+      gridTemplateColumns: "repeat(96, 1fr)",
+      gridTemplateRows: "repeat(96, 1fr)",
+      "--init-area": "1 / 1 / 24 / 24",
+    },
+  });
+  matchUtilities(
+    {
+      b_area: (value) => {
+        // Remove the square brackets and split the value by "/"
+        const parts = value.split("-"); // slice to remove the square brackets
+        if (parts.length === 4) {
+          return {
+            "grid-area": `${parts[0]} / ${parts[1]} / ${parts[2]} / ${parts[3]}`,
+          };
+        }
+      },
+    },
+    { values: {} } // Allow arbitrary values like b_area[1/4/4/3]
+  );
+};

package/index.d.ts

@@ -0,0 +1,17 @@
+declare module "blockbite-tailwind" {
+  // Function declarations
+  export function getAspectRatio(...args: any[]): any;
+  export function getContainer(...args: any[]): any;
+  export function getScreens(...args: any[]): any;
+  export function getColors(...args: any[]): any;
+  export function getColorObject(...args: any[]): any;
+  export function themeParser(...args: any[]): any;
+
+// Constant declarations
+export const gridSpacing: any;
+export const fluidSpacing: any;
+export const screenSpacing: any;
+export const percentSpacing: any;
+export const nativeSpacing: any;
+export const spanSpacing: any;
+}

package/index.html

@@ -0,0 +1,46 @@
+<!doctype html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Vite App</title>
+
+
+  <script type="module">
+    import buildCss from "https://esm.sh/tailwindcss-in-browser@0.1.3";
+
+    const markup = `
+        <div class="p-6 max-w-sm mx-auto bg-white rounded-xl shadow-md space-y-4">
+        <h1 class="text-2xl font-bold">Hello, Tailwind CSS v4!</h1>
+        <p class="text-gray-500">This is a sample component styled with Tailwind CSS v4 in the browser.</p>
+        </div>
+    `;
+
+    const configurationCss = `
+        @theme {
+        --color-primary: #3b82f6;
+        --color-secondary: #64748b;
+        --font-sans: 'Inter', sans-serif;
+        }
+    `;
+
+    buildCss(markup, configurationCss).then((css) => {
+      const styleTag = document.createElement("style");
+      styleTag.textContent = css;
+      document.head.appendChild(styleTag);
+    });
+  </script>
+</head>
+
+
+<body>
+  <div class="p-6 max-w-sm mx-auto bg-white rounded-xl shadow-md space-y-4">
+    <h1 class="text-2xl font-bold">Hello, Tailwind CSS v4!</h1>
+    <p class="text-gray-500">This is a sample component styled with Tailwind CSS v4 in the browser.</p>
+  </div>
+  <div id="app"></div>
+  <script type="module" src="/vite.js"></script>
+</body>
+
+</html>

package/index.js

@@ -0,0 +1,30 @@
+// Import functions and constants
+import { getAspectRatio } from "./lib/aspect-ratio";
+import { getContainer } from "./lib/container";
+import {
+  gridSpacing,
+  fluidSpacing,
+  screenSpacing,
+  percentSpacing,
+  nativeSpacing,
+  spanSpacing,
+} from "./lib/spacing";
+import { getScreens } from "./lib/screens";
+import { getColors, getColorObject } from "./lib/colors";
+import { themeParser } from "./lib/theme-parser";
+
+// Export functions and constants
+export {
+  getAspectRatio,
+  getContainer,
+  gridSpacing,
+  fluidSpacing,
+  screenSpacing,
+  percentSpacing,
+  nativeSpacing,
+  spanSpacing,
+  getScreens,
+  getColors,
+  getColorObject,
+  themeParser,
+};

package/lib/aspect-ratio.js

@@ -0,0 +1,6 @@
+export const getAspectRatio = (prefix = "b_") => {
+  const ratios = {};
+  ratios[prefix + "portrait"] = "3 / 4";
+  ratios[prefix + "landscape"] = "4 / 3";
+  return ratios;
+};

package/lib/colors.js

@@ -0,0 +1,59 @@
+const colors = [
+  "b_theme",
+  "black",
+  "white",
+  "transparent",
+  "inherit",
+  "current",
+  "gray",
+  "red",
+  "yellow",
+  "green",
+  "blue",
+  "indigo",
+  "purple",
+  "pink",
+];
+
+const shades = [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950];
+
+export const isSpecialColor = (color) =>
+  ["black", "white", "transparent", "inherit", "current", "b_theme"].includes(
+    color
+  );
+
+export const getColors = () => {
+  const tailwindColors = {};
+
+  colors.forEach((color) => {
+    if (isSpecialColor(color)) {
+      tailwindColors[color] = color;
+    } else {
+      shades.forEach((shade) => {
+        tailwindColors[`${color}-${shade}`] = `${color}-${shade}`;
+      });
+    }
+  });
+
+  return tailwindColors;
+};
+
+export const getColorObject = () => {
+  const colorObjects = colors.flatMap((color) => {
+    if (isSpecialColor(color)) {
+      return {
+        label: `${color.charAt(0).toUpperCase() + color.slice(1)}`,
+        id: color,
+      };
+    } else {
+      return shades.map((shade) => ({
+        label: `${color.charAt(0).toUpperCase() + color.slice(1)} ${shade}`,
+        id: `${color}-${shade}`,
+      }));
+    }
+  });
+
+  return colorObjects;
+};
+
+export default { getColors, getColorObject };

package/lib/container.js

@@ -0,0 +1,10 @@
+export const getContainer = () => {
+  return {
+    center: true,
+    padding: {
+      DEFAULT: "var(--b_padding, 1rem)",
+      sm: "var(--b_padding, 1rem)",
+      lg: "var(--b_padding, 1rem)",
+    },
+  };
+};

package/lib/screens.js

@@ -0,0 +1,13 @@
+export const getScreens = (
+  prefix = "b_",
+  minxmax = { min: "768px", max: "1100px", max2xl: "1440px" }
+) => {
+  // max 320px
+  const screens = {};
+  screens[prefix + "xs"] = { max: minxmax.min };
+  screens[prefix + "md"] = { min: minxmax.min, max: minxmax.max };
+  screens[prefix + "xl"] = { min: minxmax.max };
+  screens[prefix + "sm"] = { max: minxmax.max };
+  screens[prefix + "2xl"] = { min: minxmax.max2xl };
+  return screens;
+};