@luisitoluis/viewfx 0.0.3

package/src/masks.cjs

@@ -0,0 +1,99 @@
+/**
+ * Mask shapes for the ViewFX Tailwind plugin.
+ *
+ * Declared as readable SVG and emitted as base64 custom properties
+ * (`pnpm emit:masks` → `src/masks.css`). Base64 matters: an SVG data URI
+ * containing a nested `url(#id)` filter reference breaks CSS minifiers
+ * when written literally into a stylesheet.
+ */
+
+const svg = (viewBox, body) =>
+  `<svg xmlns="http://www.w3.org/2000/svg" viewBox="${viewBox}">${body}</svg>`
+
+const blur = (deviation) =>
+  `<defs><filter id="b"><feGaussianBlur stdDeviation="${deviation}"/></filter></defs>`
+
+const MASK_SVG = {
+  circle: svg('0 0 40 40', '<circle cx="20" cy="20" r="20" fill="#fff"/>'),
+
+  'circle-blur': svg(
+    '0 0 40 40',
+    `${blur(2)}<circle cx="20" cy="20" r="18" fill="#fff" filter="url(#b)"/>`
+  ),
+
+  'corner-tl': svg(
+    '0 0 40 40',
+    `${blur(2)}<circle cx="0" cy="0" r="18" fill="#fff" filter="url(#b)"/>`
+  ),
+
+  'corner-tr': svg(
+    '0 0 40 40',
+    `${blur(1.5)}<circle cx="40" cy="0" r="18" fill="#fff" filter="url(#b)"/>`
+  ),
+
+  'corner-bl': svg(
+    '0 0 40 40',
+    `${blur(2)}<circle cx="0" cy="40" r="18" fill="#fff" filter="url(#b)"/>`
+  ),
+
+  'corner-br': svg(
+    '0 0 40 40',
+    `${blur(1.5)}<circle cx="40" cy="40" r="18" fill="#fff" filter="url(#b)"/>`
+  ),
+
+  square: svg('0 0 40 40', '<rect x="4" y="4" width="32" height="32" fill="#fff"/>'),
+
+  soft: svg(
+    '0 0 40 40',
+    `${blur(3.2)}<ellipse cx="20" cy="20" rx="16" ry="12" fill="#fff" filter="url(#b)"/>`
+  ),
+
+  diamond: svg('0 0 40 40', '<polygon points="20,0 40,20 20,40 0,20" fill="#fff"/>'),
+
+  hexagon: svg(
+    '0 0 100 100',
+    '<polygon points="50,0 93.3,25 93.3,75 50,100 6.7,75 6.7,25" fill="#fff"/>'
+  ),
+
+  star: svg(
+    '0 0 100 100',
+    '<polygon points="50,0 61,35 95,35 68,57 79,91 50,70 21,91 32,57 5,35 39,35" fill="#fff"/>'
+  ),
+
+  ink: svg(
+    '0 0 100 100',
+    '<defs><filter id="t">' +
+      '<feTurbulence type="fractalNoise" baseFrequency="0.02" numOctaves="3" result="n"/>' +
+      '<feDisplacementMap in="SourceGraphic" in2="n" scale="15" xChannelSelector="R" yChannelSelector="G"/>' +
+      '</filter></defs>' +
+      '<circle cx="50" cy="50" r="50" fill="#fff" filter="url(#t)"/>'
+  ),
+
+  heart: svg(
+    '0 0 100 100',
+    '<path fill="#fff" d="M50 88C25 65 5 50 5 30 5 15 15 5 30 5c10 0 18 7 20 13 2-6 10-13 20-13 15 0 25 10 25 25 0 20-20 35-45 58Z"/>'
+  )
+}
+
+function toBase64(markup) {
+  return Buffer.from(markup, 'utf8').toString('base64')
+}
+
+function maskVariables() {
+  const vars = {}
+  for (const [name, markup] of Object.entries(MASK_SVG)) {
+    vars[`--mask-${name}`] = `url("data:image/svg+xml;base64,${toBase64(markup)}")`
+  }
+  return vars
+}
+
+/** `:root` declaration block exposing every shape as `--mask-<name>`. */
+function maskCustomProperties() {
+  const declarations = Object.entries(maskVariables())
+    .map(([name, value]) => `${name}:${value}`)
+    .join(';')
+
+  return `:root{${declarations}}`
+}
+
+module.exports = { MASK_SVG, maskCustomProperties, maskVariables }

package/src/masks.css

@@ -0,0 +1,2 @@
+/* Generated by scripts/emit-masks.mjs — do not edit by hand. */
+:root{--mask-circle:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0MCA0MCI+PGNpcmNsZSBjeD0iMjAiIGN5PSIyMCIgcj0iMjAiIGZpbGw9IiNmZmYiLz48L3N2Zz4=");--mask-circle-blur:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0MCA0MCI+PGRlZnM+PGZpbHRlciBpZD0iYiI+PGZlR2F1c3NpYW5CbHVyIHN0ZERldmlhdGlvbj0iMiIvPjwvZmlsdGVyPjwvZGVmcz48Y2lyY2xlIGN4PSIyMCIgY3k9IjIwIiByPSIxOCIgZmlsbD0iI2ZmZiIgZmlsdGVyPSJ1cmwoI2IpIi8+PC9zdmc+");--mask-corner-tl:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0MCA0MCI+PGRlZnM+PGZpbHRlciBpZD0iYiI+PGZlR2F1c3NpYW5CbHVyIHN0ZERldmlhdGlvbj0iMiIvPjwvZmlsdGVyPjwvZGVmcz48Y2lyY2xlIGN4PSIwIiBjeT0iMCIgcj0iMTgiIGZpbGw9IiNmZmYiIGZpbHRlcj0idXJsKCNiKSIvPjwvc3ZnPg==");--mask-corner-tr:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0MCA0MCI+PGRlZnM+PGZpbHRlciBpZD0iYiI+PGZlR2F1c3NpYW5CbHVyIHN0ZERldmlhdGlvbj0iMS41Ii8+PC9maWx0ZXI+PC9kZWZzPjxjaXJjbGUgY3g9IjQwIiBjeT0iMCIgcj0iMTgiIGZpbGw9IiNmZmYiIGZpbHRlcj0idXJsKCNiKSIvPjwvc3ZnPg==");--mask-corner-bl:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0MCA0MCI+PGRlZnM+PGZpbHRlciBpZD0iYiI+PGZlR2F1c3NpYW5CbHVyIHN0ZERldmlhdGlvbj0iMiIvPjwvZmlsdGVyPjwvZGVmcz48Y2lyY2xlIGN4PSIwIiBjeT0iNDAiIHI9IjE4IiBmaWxsPSIjZmZmIiBmaWx0ZXI9InVybCgjYikiLz48L3N2Zz4=");--mask-corner-br:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0MCA0MCI+PGRlZnM+PGZpbHRlciBpZD0iYiI+PGZlR2F1c3NpYW5CbHVyIHN0ZERldmlhdGlvbj0iMS41Ii8+PC9maWx0ZXI+PC9kZWZzPjxjaXJjbGUgY3g9IjQwIiBjeT0iNDAiIHI9IjE4IiBmaWxsPSIjZmZmIiBmaWx0ZXI9InVybCgjYikiLz48L3N2Zz4=");--mask-square:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0MCA0MCI+PHJlY3QgeD0iNCIgeT0iNCIgd2lkdGg9IjMyIiBoZWlnaHQ9IjMyIiBmaWxsPSIjZmZmIi8+PC9zdmc+");--mask-soft:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0MCA0MCI+PGRlZnM+PGZpbHRlciBpZD0iYiI+PGZlR2F1c3NpYW5CbHVyIHN0ZERldmlhdGlvbj0iMy4yIi8+PC9maWx0ZXI+PC9kZWZzPjxlbGxpcHNlIGN4PSIyMCIgY3k9IjIwIiByeD0iMTYiIHJ5PSIxMiIgZmlsbD0iI2ZmZiIgZmlsdGVyPSJ1cmwoI2IpIi8+PC9zdmc+");--mask-diamond:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0MCA0MCI+PHBvbHlnb24gcG9pbnRzPSIyMCwwIDQwLDIwIDIwLDQwIDAsMjAiIGZpbGw9IiNmZmYiLz48L3N2Zz4=");--mask-hexagon:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDAgMTAwIj48cG9seWdvbiBwb2ludHM9IjUwLDAgOTMuMywyNSA5My4zLDc1IDUwLDEwMCA2LjcsNzUgNi43LDI1IiBmaWxsPSIjZmZmIi8+PC9zdmc+");--mask-star:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDAgMTAwIj48cG9seWdvbiBwb2ludHM9IjUwLDAgNjEsMzUgOTUsMzUgNjgsNTcgNzksOTEgNTAsNzAgMjEsOTEgMzIsNTcgNSwzNSAzOSwzNSIgZmlsbD0iI2ZmZiIvPjwvc3ZnPg==");--mask-ink:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDAgMTAwIj48ZGVmcz48ZmlsdGVyIGlkPSJ0Ij48ZmVUdXJidWxlbmNlIHR5cGU9ImZyYWN0YWxOb2lzZSIgYmFzZUZyZXF1ZW5jeT0iMC4wMiIgbnVtT2N0YXZlcz0iMyIgcmVzdWx0PSJuIi8+PGZlRGlzcGxhY2VtZW50TWFwIGluPSJTb3VyY2VHcmFwaGljIiBpbjI9Im4iIHNjYWxlPSIxNSIgeENoYW5uZWxTZWxlY3Rvcj0iUiIgeUNoYW5uZWxTZWxlY3Rvcj0iRyIvPjwvZmlsdGVyPjwvZGVmcz48Y2lyY2xlIGN4PSI1MCIgY3k9IjUwIiByPSI1MCIgZmlsbD0iI2ZmZiIgZmlsdGVyPSJ1cmwoI3QpIi8+PC9zdmc+");--mask-heart:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDAgMTAwIj48cGF0aCBmaWxsPSIjZmZmIiBkPSJNNTAgODhDMjUgNjUgNSA1MCA1IDMwIDUgMTUgMTUgNSAzMCA1YzEwIDAgMTggNyAyMCAxMyAyLTYgMTAtMTMgMjAtMTMgMTUgMCAyNSAxMCAyNSAyNSAwIDIwLTIwIDM1LTQ1IDU4WiIvPjwvc3ZnPg==")}

package/src/masks.js

@@ -0,0 +1,97 @@
+/**
+ * Mask shapes for the ViewFX Tailwind plugin.
+ *
+ * Declared as readable SVG and emitted as base64 custom properties
+ * (`pnpm emit:masks` → `src/masks.css`). Base64 matters: an SVG data URI
+ * containing a nested `url(#id)` filter reference breaks CSS minifiers
+ * when written literally into a stylesheet.
+ */
+
+const svg = (viewBox, body) =>
+  `<svg xmlns="http://www.w3.org/2000/svg" viewBox="${viewBox}">${body}</svg>`
+
+const blur = (deviation) =>
+  `<defs><filter id="b"><feGaussianBlur stdDeviation="${deviation}"/></filter></defs>`
+
+export const MASK_SVG = {
+  circle: svg('0 0 40 40', '<circle cx="20" cy="20" r="20" fill="#fff"/>'),
+
+  'circle-blur': svg(
+    '0 0 40 40',
+    `${blur(2)}<circle cx="20" cy="20" r="18" fill="#fff" filter="url(#b)"/>`
+  ),
+
+  'corner-tl': svg(
+    '0 0 40 40',
+    `${blur(2)}<circle cx="0" cy="0" r="18" fill="#fff" filter="url(#b)"/>`
+  ),
+
+  'corner-tr': svg(
+    '0 0 40 40',
+    `${blur(1.5)}<circle cx="40" cy="0" r="18" fill="#fff" filter="url(#b)"/>`
+  ),
+
+  'corner-bl': svg(
+    '0 0 40 40',
+    `${blur(2)}<circle cx="0" cy="40" r="18" fill="#fff" filter="url(#b)"/>`
+  ),
+
+  'corner-br': svg(
+    '0 0 40 40',
+    `${blur(1.5)}<circle cx="40" cy="40" r="18" fill="#fff" filter="url(#b)"/>`
+  ),
+
+  square: svg('0 0 40 40', '<rect x="4" y="4" width="32" height="32" fill="#fff"/>'),
+
+  soft: svg(
+    '0 0 40 40',
+    `${blur(3.2)}<ellipse cx="20" cy="20" rx="16" ry="12" fill="#fff" filter="url(#b)"/>`
+  ),
+
+  diamond: svg('0 0 40 40', '<polygon points="20,0 40,20 20,40 0,20" fill="#fff"/>'),
+
+  hexagon: svg(
+    '0 0 100 100',
+    '<polygon points="50,0 93.3,25 93.3,75 50,100 6.7,75 6.7,25" fill="#fff"/>'
+  ),
+
+  star: svg(
+    '0 0 100 100',
+    '<polygon points="50,0 61,35 95,35 68,57 79,91 50,70 21,91 32,57 5,35 39,35" fill="#fff"/>'
+  ),
+
+  ink: svg(
+    '0 0 100 100',
+    '<defs><filter id="t">' +
+      '<feTurbulence type="fractalNoise" baseFrequency="0.02" numOctaves="3" result="n"/>' +
+      '<feDisplacementMap in="SourceGraphic" in2="n" scale="15" xChannelSelector="R" yChannelSelector="G"/>' +
+      '</filter></defs>' +
+      '<circle cx="50" cy="50" r="50" fill="#fff" filter="url(#t)"/>'
+  ),
+
+  heart: svg(
+    '0 0 100 100',
+    '<path fill="#fff" d="M50 88C25 65 5 50 5 30 5 15 15 5 30 5c10 0 18 7 20 13 2-6 10-13 20-13 15 0 25 10 25 25 0 20-20 35-45 58Z"/>'
+  )
+}
+
+function toBase64(markup) {
+  return Buffer.from(markup, 'utf8').toString('base64')
+}
+
+export function maskVariables() {
+  const vars = {}
+  for (const [name, markup] of Object.entries(MASK_SVG)) {
+    vars[`--mask-${name}`] = `url("data:image/svg+xml;base64,${toBase64(markup)}")`
+  }
+  return vars
+}
+
+/** `:root` declaration block exposing every shape as `--mask-<name>`. */
+export function maskCustomProperties() {
+  const declarations = Object.entries(maskVariables())
+    .map(([name, value]) => `${name}:${value}`)
+    .join(';')
+
+  return `:root{${declarations}}`
+}

package/src/plugin.cjs

@@ -0,0 +1,41 @@
+const plugin = require('tailwindcss/plugin')
+const { engineBase } = require('./engine.cjs')
+const effects = require('./effects.cjs')
+const { registerCompound } = require('./compound.cjs')
+const { duration, delay, steps } = require('./theme.json')
+
+module.exports = plugin(
+  function viewfx({ addBase, addUtilities, matchUtilities, theme }) {
+    addBase(engineBase())
+    addUtilities(effects)
+    registerCompound({ matchUtilities })
+
+    matchUtilities(
+      {
+        'fx-duration': (value) => ({ '--fx-duration-override': value })
+      },
+      { values: theme('fxDuration') }
+    )
+
+    matchUtilities(
+      {
+        'fx-delay': (value) => ({ '--fx-delay': value })
+      },
+      { values: theme('fxDelay') }
+    )
+
+    matchUtilities(
+      {
+        'fx-steps': (value) => ({ '--fx-ease-override': `steps(${value})` })
+      },
+      { values: theme('fxSteps') }
+    )
+  },
+  {
+    theme: {
+      fxDuration: duration,
+      fxDelay: delay,
+      fxSteps: steps
+    }
+  }
+)

package/src/plugin.js

@@ -0,0 +1 @@
+export { default } from './plugin.cjs'

package/src/theme.json

@@ -0,0 +1,43 @@
+{
+  "duration": {
+    "none": "0ms",
+    "slower": "500ms",
+    "slow": "400ms",
+    "normal": "300ms",
+    "fast": "200ms",
+    "faster": "100ms",
+    "0": "0ms",
+    "100": "100ms",
+    "150": "150ms",
+    "200": "200ms",
+    "250": "250ms",
+    "300": "300ms",
+    "400": "400ms",
+    "500": "500ms",
+    "700": "700ms",
+    "800": "800ms",
+    "900": "900ms",
+    "1000": "1000ms"
+  },
+  "delay": {
+    "none": "0ms",
+    "0": "0ms",
+    "100": "100ms",
+    "150": "150ms",
+    "200": "200ms",
+    "250": "250ms",
+    "300": "300ms",
+    "400": "400ms",
+    "500": "500ms",
+    "700": "700ms",
+    "800": "800ms",
+    "900": "900ms",
+    "1000": "1000ms"
+  },
+  "steps": {
+    "none": "0",
+    "retro": "8",
+    "normal": "16",
+    "modern": "24"
+  }
+}