@spark-ui/tailwind-plugins 3.4.2 → 3.6.0

package/CHANGELOG.md

@@ -3,6 +3,18 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [3.6.0](https://github.com/adevinta/spark/compare/@spark-ui/tailwind-plugins@3.5.0...@spark-ui/tailwind-plugins@3.6.0) (2024-01-04)
+
+### Features
+
+- **tailwind-plugins:** export TCV utils ([6fba6dc](https://github.com/adevinta/spark/commit/6fba6dc08a18f0f1c0773464494a5aba331dd572))
+
+# [3.5.0](https://github.com/adevinta/spark/compare/@spark-ui/tailwind-plugins@3.4.2...@spark-ui/tailwind-plugins@3.5.0) (2024-01-03)
+
+### Features
+
+- **tailwind-plugins:** add size field to sizing plugin ([8642feb](https://github.com/adevinta/spark/commit/8642febdda1a229f480f8828105729b43ad07b98))
+
 ## [3.4.2](https://github.com/adevinta/spark/compare/@spark-ui/tailwind-plugins@3.4.1...@spark-ui/tailwind-plugins@3.4.2) (2023-11-03)
 
 ### Bug Fixes

package/index.js

@@ -4,7 +4,8 @@ const sizings = require('./sizings')
 const utilities = require('./utilities')
 const variants = require('./variants')
 const sparkTheme = require('./spark-theme')
-const tailwindConfigViewerMisc = require('./tailwind.config.viewer.misc')
+const tailwindConfigViewerUtils = require('./tailwind-config-viewer')
+const tailwindConfigViewerMisc = require('./tailwind-config-viewer/misc')
 const tailwindcssRadix = require('tailwindcss-radix')
 
 /**
@@ -37,5 +38,6 @@ module.exports = {
   variants,
   sparkTheme,
   sparkConfig,
+  tailwindConfigViewerUtils,
   tailwindConfigViewerMisc,
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@spark-ui/tailwind-plugins",
-  "version": "3.4.2",
+  "version": "3.6.0",
   "description": "Spark Tailwind plugins",
   "publishConfig": {
     "access": "public"
@@ -35,5 +35,5 @@
   },
   "homepage": "https://sparkui.vercel.app",
   "license": "MIT",
-  "gitHead": "0c0b4cc546c55c387e6ebf95ba7cc6ed91e91d6c"
+  "gitHead": "25220468e758c9c4bad519c93d6bbbf45ae109ab"
 }

package/sizings/index.js

@@ -64,6 +64,7 @@ module.exports = plugin.withOptions(
         maxHeight: getCSSVariableReferences(),
         minHeight: getCSSVariableReferences(),
         translate: getCSSVariableReferences(),
+        size: getCSSVariableReferences(),
       },
     },
   })

package/tailwind-config-viewer/index.js

@@ -0,0 +1,48 @@
+const utils = {
+  isObject(value) {
+    return !!value && value.constructor === Object
+  },
+  isStringOrNumber(value) {
+    return typeof value === 'string' || typeof value === 'number'
+  },
+  toKebabCase(value) {
+    if (value.toUpperCase() === value) return value.toLowerCase()
+
+    return value.replace(/[A-Z0-9]/g, e => `-${e.toLocaleLowerCase()}`)
+  },
+  doubleHyphensRegex: /(?<!var\()--+/g,
+}
+
+function toTailwindConfigViewer(defaultTheme) {
+  const result = {}
+
+  function flatten(theme, paths = []) {
+    Object.entries(theme).forEach(([key, value]) => {
+      if (utils.isObject(value)) return flatten(value, paths.concat(key))
+
+      if (utils.isStringOrNumber(value)) {
+        if (paths.includes('colors')) {
+          result[
+            `rgb(var(--${[...paths, key]
+              .map(utils.toKebabCase)
+              .join('-')
+              .replace(utils.doubleHyphensRegex, '-')}) / <alpha-value>)`
+          ] = value
+        }
+
+        result[
+          `var(--${[...paths, key]
+            .map(utils.toKebabCase)
+            .join('-')
+            .replace(utils.doubleHyphensRegex, '-')})`
+        ] = value
+      }
+    })
+  }
+
+  flatten(defaultTheme)
+
+  return result
+}
+
+module.exports = { toTailwindConfigViewer }