@blockbite/tailwind 3.4.4 → 3.4.7

package/motion/theme.js

@@ -1,174 +1,174 @@
 module.exports = {
-    extend: {
-        keyframes: {
-            'wiggle': {
-                '0%, 100%': {
-                    transform: 'rotate(-3deg)',
-                },
-                '50%': {
-                    transform: 'rotate(3deg)',
-                },
-            },
-            'wiggle-more': {
-                '0%, 100%': {
-                    transform: 'rotate(-12deg)',
-                },
-                '50%': {
-                    transform: 'rotate(12deg)',
-                },
-            },
-            'rotate-y': {
-                '0%': {
-                    transform: 'rotateY(360deg)',
-                },
-                '100%': {
-                    transform: 'rotateY(0)',
-                },
-            },
-            'rotate-x': {
-                '0%': {
-                    transform: 'rotateX(360deg)',
-                },
-                '100%': {
-                    transform: 'rotateX(0)',
-                },
-            },
-            'jump': {
-                '0%, 100%': {
-                    transform: 'scale(100%)',
-                },
-                '10%': {
-                    transform: 'scale(80%)',
-                },
-                '50%': {
-                    transform: 'scale(120%)',
-                },
-            },
-            'jump-in': {
-                '0%': {
-                    transform: 'scale(0%)',
-                },
-                '80%': {
-                    transform: 'scale(120%)',
-                },
-                '100%': {
-                    transform: 'scale(100%)',
-                },
-            },
-            'jump-out': {
-                '0%': {
-                    transform: 'scale(100%)',
-                },
-                '20%': {
-                    transform: 'scale(120%)',
-                },
-                '100%': {
-                    transform: 'scale(0%)',
-                },
-            },
-            'shake': {
-                '0%': {
-                    transform: 'translateX(0rem)',
-                },
-                '25%': {
-                    transform: 'translateX(-1rem)',
-                },
-                '75%': {
-                    transform: 'translateX(1rem)',
-                },
-                '100%': {
-                    transform: 'translateX(0rem)',
-                },
-            },
-            'fade': {
-                '0%': {
-                    opacity: '0',
-                    transform: 'translate(var(--an-ani-x), var(--an-ani-y))',
-                },
-                '100%': {
-                    opacity: '1',
-                    transform: 'translateY(var(--tw-translate-y))',
-                },
-            },
-            'fade-left': {
-                '0%': {
-                    opacity: '0',
-                    transform: 'translateY(var(--an-translate-y))',
-                },
-                '100%': {
-                    opacity: '1',
-                    transform: 'translateY(var(--tw-translate-y))',
-                },
-            },
-            'fade-right': {
-                '0%': {
-                    opacity: '0',
-                    transform: 'translateY(var(--an-translate-y))',
-                },
-                '100%': {
-                    opacity: '1',
-                    transform: 'translateY(var(--tw-translate-y))',
-                },
-            },
-            'flip-up': {
-                '0%': {
-                    transform: 'rotateX(90deg)',
-                    transformOrigin: 'bottom',
-                },
-                '100%': {
-                    transform: 'rotateX(0)',
-                    transformOrigin: 'bottom',
-                },
-            },
-            'flip-down': {
-                '0%': {
-                    transform: 'rotateX(-90deg)',
-                    transformOrigin: 'top',
-                },
-                '100%': {
-                    transform: 'rotateX(0)',
-                    transformOrigin: 'top',
-                },
-            },
-        },
-        animation: {
-            'wiggle': 'wiggle 1s both',
-            'wiggle-more': 'wiggle-more 1s both',
-            'rotate-y': 'rotate-y 1s both',
-            'rotate-x': 'rotate-x 1s both',
-            'jump': 'jump .5s both',
-            'jump-in': 'jump-in .5s both',
-            'jump-out': 'jump-out .5s both',
-            'shake': 'shake .5s both',
-            'fade': 'fade 1s both',
-            'fade-down': 'fade-down 1s both',
-            'fade-up': 'fade-up 1s both',
-            'fade-left': 'fade-left 1s both',
-            'fade-right': 'fade-right 1s both',
-            'flip-up': 'flip-up 1s both',
-            'flip-down': 'flip-down 1s both',
-        },
-        animationDelay: {
-            none: '0ms',
-            0: '0ms',
-            75: '75ms',
-            100: '100ms',
-            150: '150ms',
-            200: '200ms',
-            300: '300ms',
-            500: '500ms',
-            700: '700ms',
-            1000: '1000ms',
-        },
-        animationDuration: {
-            75: '75ms',
-            100: '100ms',
-            150: '150ms',
-            200: '200ms',
-            300: '300ms',
-            500: '500ms',
-            700: '700ms',
-            1000: '1000ms',
+  extend: {
+    keyframes: {
+      wiggle: {
+        '0%, 100%': {
+          transform: 'rotate(-3deg)',
         },
+        '50%': {
+          transform: 'rotate(3deg)',
+        },
+      },
+      'wiggle-more': {
+        '0%, 100%': {
+          transform: 'rotate(-12deg)',
+        },
+        '50%': {
+          transform: 'rotate(12deg)',
+        },
+      },
+      'rotate-y': {
+        '0%': {
+          transform: 'rotateY(360deg)',
+        },
+        '100%': {
+          transform: 'rotateY(0)',
+        },
+      },
+      'rotate-x': {
+        '0%': {
+          transform: 'rotateX(360deg)',
+        },
+        '100%': {
+          transform: 'rotateX(0)',
+        },
+      },
+      jump: {
+        '0%, 100%': {
+          transform: 'scale(100%)',
+        },
+        '10%': {
+          transform: 'scale(80%)',
+        },
+        '50%': {
+          transform: 'scale(120%)',
+        },
+      },
+      'jump-in': {
+        '0%': {
+          transform: 'scale(0%)',
+        },
+        '80%': {
+          transform: 'scale(120%)',
+        },
+        '100%': {
+          transform: 'scale(100%)',
+        },
+      },
+      'jump-out': {
+        '0%': {
+          transform: 'scale(100%)',
+        },
+        '20%': {
+          transform: 'scale(120%)',
+        },
+        '100%': {
+          transform: 'scale(0%)',
+        },
+      },
+      shake: {
+        '0%': {
+          transform: 'translateX(0rem)',
+        },
+        '25%': {
+          transform: 'translateX(-1rem)',
+        },
+        '75%': {
+          transform: 'translateX(1rem)',
+        },
+        '100%': {
+          transform: 'translateX(0rem)',
+        },
+      },
+      fade: {
+        '0%': {
+          opacity: '0',
+          transform: 'translate(var(--an-ani-x), var(--an-ani-y))',
+        },
+        '100%': {
+          opacity: '1',
+          transform: 'translateY(var(--tw-translate-y))',
+        },
+      },
+      'fade-left': {
+        '0%': {
+          opacity: '0',
+          transform: 'translateY(var(--an-translate-y))',
+        },
+        '100%': {
+          opacity: '1',
+          transform: 'translateY(var(--tw-translate-y))',
+        },
+      },
+      'fade-right': {
+        '0%': {
+          opacity: '0',
+          transform: 'translateY(var(--an-translate-y))',
+        },
+        '100%': {
+          opacity: '1',
+          transform: 'translateY(var(--tw-translate-y))',
+        },
+      },
+      'flip-up': {
+        '0%': {
+          transform: 'rotateX(90deg)',
+          transformOrigin: 'bottom',
+        },
+        '100%': {
+          transform: 'rotateX(0)',
+          transformOrigin: 'bottom',
+        },
+      },
+      'flip-down': {
+        '0%': {
+          transform: 'rotateX(-90deg)',
+          transformOrigin: 'top',
+        },
+        '100%': {
+          transform: 'rotateX(0)',
+          transformOrigin: 'top',
+        },
+      },
+    },
+    animation: {
+      wiggle: 'wiggle 1s both',
+      'wiggle-more': 'wiggle-more 1s both',
+      'rotate-y': 'rotate-y 1s both',
+      'rotate-x': 'rotate-x 1s both',
+      jump: 'jump .5s both',
+      'jump-in': 'jump-in .5s both',
+      'jump-out': 'jump-out .5s both',
+      shake: 'shake .5s both',
+      fade: 'fade 1s both',
+      'fade-down': 'fade-down 1s both',
+      'fade-up': 'fade-up 1s both',
+      'fade-left': 'fade-left 1s both',
+      'fade-right': 'fade-right 1s both',
+      'flip-up': 'flip-up 1s both',
+      'flip-down': 'flip-down 1s both',
+    },
+    animationDelay: {
+      none: '0ms',
+      0: '0ms',
+      75: '75ms',
+      100: '100ms',
+      150: '150ms',
+      200: '200ms',
+      300: '300ms',
+      500: '500ms',
+      700: '700ms',
+      1000: '1000ms',
+    },
+    animationDuration: {
+      75: '75ms',
+      100: '100ms',
+      150: '150ms',
+      200: '200ms',
+      300: '300ms',
+      500: '500ms',
+      700: '700ms',
+      1000: '1000ms',
     },
+  },
 };

package/motion/utilities/delay.js

@@ -1,7 +1,11 @@
-module.exports = ({ matchUtilities, theme }) => matchUtilities({
-    'animate-delay': value => ({
+module.exports = ({ matchUtilities, theme }) =>
+  matchUtilities(
+    {
+      'animate-delay': (value) => ({
         'animation-delay': value,
-    }),
-}, {
-    values: theme('animationDelay'),
-});
+      }),
+    },
+    {
+      values: theme('animationDelay'),
+    }
+  );

package/motion/utilities/direction.js

@@ -1,14 +1,15 @@
-module.exports = ({ addUtilities }) => addUtilities({
+module.exports = ({ addUtilities }) =>
+  addUtilities({
     '.animate-normal': {
-        'animation-direction': 'normal',
+      'animation-direction': 'normal',
     },
     '.animate-reverse': {
-        'animation-direction': 'reverse',
+      'animation-direction': 'reverse',
     },
     '.animate-alternate': {
-        'animation-direction': 'alternate',
+      'animation-direction': 'alternate',
     },
     '.animate-alternate-reverse': {
-        'animation-direction': 'alternate-reverse',
+      'animation-direction': 'alternate-reverse',
     },
-});
+  });

package/motion/utilities/duration.js

@@ -1,7 +1,11 @@
-module.exports = ({ matchUtilities, theme }) => matchUtilities({
-    'animate-duration': value => ({
+module.exports = ({ matchUtilities, theme }) =>
+  matchUtilities(
+    {
+      'animate-duration': (value) => ({
         'animation-duration': value,
-    }),
-}, {
-    values: theme('animationDuration'),
-});
+      }),
+    },
+    {
+      values: theme('animationDuration'),
+    }
+  );

package/motion/utilities/fillMode.js

@@ -1,14 +1,15 @@
-module.exports = ({ addUtilities }) => addUtilities({
+module.exports = ({ addUtilities }) =>
+  addUtilities({
     '.animate-fill-none': {
-        'animation-fill-mode': 'normal',
+      'animation-fill-mode': 'normal',
     },
     '.animate-fill-forwards': {
-        'animation-fill-mode': 'forwards',
+      'animation-fill-mode': 'forwards',
     },
     '.animate-fill-backwards': {
-        'animation-fill-mode': 'backwards',
+      'animation-fill-mode': 'backwards',
     },
     '.animate-fill-both': {
-        'animation-fill-mode': 'both',
+      'animation-fill-mode': 'both',
     },
-});
+  });

package/motion/utilities/iterationCount.js

@@ -1,14 +1,15 @@
-module.exports = ({ addUtilities }) => addUtilities({
+module.exports = ({ addUtilities }) =>
+  addUtilities({
     '.animate-infinite': {
-        'animation-iteration-count': 'infinite',
+      'animation-iteration-count': 'infinite',
     },
     '.animate-once': {
-        'animation-iteration-count': '1',
+      'animation-iteration-count': '1',
     },
     '.animate-twice': {
-        'animation-iteration-count': '2',
+      'animation-iteration-count': '2',
     },
     '.animate-thrice': {
-        'animation-iteration-count': '3',
+      'animation-iteration-count': '3',
     },
-});
+  });

package/motion/utilities/offset.js

@@ -1,11 +1,11 @@
 module.exports = function ({ addUtilities, theme, e }, gridSpacing) {
-  const spacing = theme("spacing");
+  const spacing = theme('spacing');
   const newUtilities = {};
 
   Object.entries(spacing).map(([key, value]) => {
-    newUtilities[`.${e(`b_ani-x-${key}`)}`] = { "--an-ani-x": `${value}` };
-    newUtilities[`.${e(`b_ani-y-${key}`)}`] = { "--an-ani-y": `${value}` };
+    newUtilities[`.${e(`b_ani-x-${key}`)}`] = { '--an-ani-x': `${value}` };
+    newUtilities[`.${e(`b_ani-y-${key}`)}`] = { '--an-ani-y': `${value}` };
   });
 
-  addUtilities(newUtilities, ["responsive"]);
+  addUtilities(newUtilities, ['responsive']);
 };

package/motion/utilities/playState.js

@@ -1,14 +1,15 @@
-module.exports = ({ addUtilities }) => addUtilities({
+module.exports = ({ addUtilities }) =>
+  addUtilities({
     '.animate-run': {
-        'animation-play-state': 'running',
+      'animation-play-state': 'running',
     },
     '.animate-play': {
-        'animation-play-state': 'running',
+      'animation-play-state': 'running',
     },
     '.animate-stop': {
-        'animation-play-state': 'paused',
+      'animation-play-state': 'paused',
     },
     '.animate-pause': {
-        'animation-play-state': 'paused',
+      'animation-play-state': 'paused',
     },
-});
+  });

package/motion/utilities/timingFunction.js

@@ -1,14 +1,15 @@
-module.exports = ({ addUtilities }) => addUtilities({
+module.exports = ({ addUtilities }) =>
+  addUtilities({
     '.animate-ease-linear': {
-        'animation-timing-function': 'linear',
+      'animation-timing-function': 'linear',
     },
     '.animate-ease-in': {
-        'animation-timing-function': 'cubic-bezier(0.4, 0, 1, 1)',
+      'animation-timing-function': 'cubic-bezier(0.4, 0, 1, 1)',
     },
     '.animate-ease-out': {
-        'animation-timing-function': 'cubic-bezier(0, 0, 0.2, 1)',
+      'animation-timing-function': 'cubic-bezier(0, 0, 0.2, 1)',
     },
     '.animate-ease-in-out': {
-        'animation-timing-function': 'cubic-bezier(0.4, 0, 0.2, 1)',
+      'animation-timing-function': 'cubic-bezier(0.4, 0, 0.2, 1)',
     },
-});
+  });

package/package.json

@@ -1,13 +1,8 @@
 {
   "name": "@blockbite/tailwind",
-  "version": "3.4.4",
+  "version": "3.4.7",
   "description": "helper for blockbite plugin and blockbite theme",
   "main": "index.js",
-  "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1",
-    "dev": "vite",
-    "build": "vite build"
-  },
   "author": "block-bite.com",
   "license": "ISC",
   "dependencies": {
@@ -21,5 +16,10 @@
     "postcss": "^8.4.38",
     "tailwindcss": "^3.4.3",
     "vite": "^5.2.0"
+  },
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "dev": "vite",
+    "build": "vite build"
   }
 }

package/plugins/viewport-dimensions.js

@@ -1,4 +1,4 @@
-const plugin = require("tailwindcss/plugin");
+const plugin = require('tailwindcss/plugin');
 
 module.exports = plugin(function ({ addUtilities }) {
   const utilities = {};

package/postcss.config.js

@@ -3,4 +3,4 @@ module.exports = {
     tailwindcss: {},
     autoprefixer: {},
   },
-}
+};

package/tailwind.config.js

@@ -1,18 +1,18 @@
 /** @type {import('tailwindcss').Config} */
 
-import { getContainer } from "./lib/container.js";
+import { getContainer } from './lib/container.js';
 
 module.exports = {
-  content: ["./vite.html", "./vite.js"],
+  content: ['./vite.html', './vite.js'],
   theme: {
     extend: {
       container: getContainer(),
     },
   },
   plugins: [
-    require("./gridarea"),
-    require("./components/fluid-container.js"),
-    require("./components/grid-container.js"),
-    require("./themecolors"),
+    require('./gridarea'),
+    require('./components/fluid-container.js'),
+    require('./components/grid-container.js'),
+    require('./themecolors'),
   ],
 };

package/themecolors/index.js

@@ -1,28 +1,27 @@
-const plugin = require("tailwindcss/plugin");
+const plugin = require('tailwindcss/plugin');
 
-function flattenColorPalette(colors, prefix = "") {
+function flattenColorPalette(colors, prefix = '') {
   return Object.entries(colors).flatMap(([key, value]) => {
     const name = prefix ? `${prefix}-${key}` : key;
-    if (typeof value === "string") {
+    if (typeof value === 'string') {
       return [[name, value]];
-    } else {
-      return flattenColorPalette(value, name);
     }
+    return flattenColorPalette(value, name);
   });
 }
 
 module.exports = plugin(({ addUtilities, theme, e }) => {
-  const colors = theme("colors");
+  const colors = theme('colors');
 
   const flatColors = flattenColorPalette(colors);
 
   const themedVarMap = {
-    bg: "--theme-bg",
-    text: "--theme-text",
-    border: "--theme-border",
-    fill: "--theme-fill",
-    stroke: "--theme-stroke",
-    ring: "--theme-ring",
+    bg: '--theme-bg',
+    text: '--theme-text',
+    border: '--theme-border',
+    fill: '--theme-fill',
+    stroke: '--theme-stroke',
+    ring: '--theme-ring',
   };
 
   const themedUtilities = flatColors.flatMap(([name, value]) => {
@@ -36,31 +35,31 @@ module.exports = plugin(({ addUtilities, theme, e }) => {
   });
 
   const applyThemeClasses = {
-    ".bg-b_theme": {
-      "background-color": "var(--theme-bg)",
+    '.bg-b_theme': {
+      'background-color': 'var(--theme-bg)',
     },
-    ".text-b_theme": {
-      color: "var(--theme-text)",
+    '.text-b_theme': {
+      color: 'var(--theme-text)',
     },
-    ".border-b_theme": {
-      "border-color": "var(--theme-border)",
+    '.border-b_theme': {
+      'border-color': 'var(--theme-border)',
     },
-    ".fill-b_theme": {
-      fill: "var(--theme-fill)",
+    '.fill-b_theme': {
+      fill: 'var(--theme-fill)',
     },
-    ".stroke-b_theme": {
-      stroke: "var(--theme-stroke)",
+    '.stroke-b_theme': {
+      stroke: 'var(--theme-stroke)',
     },
-    ".ring-b_theme": {
-      "--tw-ring-color": "var(--theme-ring)",
+    '.ring-b_theme': {
+      '--tw-ring-color': 'var(--theme-ring)',
     },
   };
 
   addUtilities(themedUtilities, {
-    variants: ["responsive", "hover", "focus"],
+    variants: ['responsive', 'hover', 'focus'],
   });
 
   addUtilities(applyThemeClasses, {
-    variants: ["responsive", "hover", "focus"],
+    variants: ['responsive', 'hover', 'focus'],
   });
 });

package/vite.js

@@ -1,5 +1,5 @@
-import "./vite.css";
-document.querySelector("#app").innerHTML = `
+import './vite.css';
+document.querySelector('#app').innerHTML = `
 <div style="--b_full:100%;">
   <div class="w-full h-[500px] grid b_grid-area-64 bg-red-200">
     <h1 class="bg-yellow-200 b_area md:b_area-x-6 md:b_area-y-4 md:b_area-w-14 md:b_area-h-14">Grid area </h1>

package/.gitattributes

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