@spark-ui/tailwind-plugins 2.5.0 → 2.7.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.
 
+# [2.7.0](https://github.com/adevinta/spark/compare/@spark-ui/tailwind-plugins@2.6.0...@spark-ui/tailwind-plugins@2.7.0) (2023-04-19)
+
+### Features
+
+- **tailwind-plugins:** add a new utilities plugin ([9fa1d36](https://github.com/adevinta/spark/commit/9fa1d36024563953314af438942542a70b372851))
+
+# [2.6.0](https://github.com/adevinta/spark/compare/@spark-ui/tailwind-plugins@2.5.0...@spark-ui/tailwind-plugins@2.6.0) (2023-04-14)
+
+### Features
+
+- **tailwind-plugins:** optimize multi-theme handling by eliminating token duplication ([fdf1483](https://github.com/adevinta/spark/commit/fdf1483685f0ce1ab64c4a8f03270b32a97796ec)), closes [#592](https://github.com/adevinta/spark/issues/592)
+
 # [2.5.0](https://github.com/adevinta/spark/compare/@spark-ui/tailwind-plugins@2.4.0...@spark-ui/tailwind-plugins@2.5.0) (2023-04-07)
 
 ### Features

package/index.js

@@ -1,6 +1,7 @@
 /* eslint-disable @typescript-eslint/no-var-requires */
 const animations = require('./animations')
 const sizings = require('./sizings')
+const utilities = require('./utilities')
 const sparkTheme = require('./spark-theme')
 const tailwindcssRadix = require('tailwindcss-radix')
 
@@ -21,6 +22,7 @@ const sparkConfig = ({ htmlFontSize, themes }) => {
     sparkTheme({ htmlFontSize, themes }),
     sizings({ htmlFontSize }),
     animations(),
+    utilities(),
     tailwindcssRadix({ variantPrefix: 'spark' }),
   ]
 }
@@ -28,6 +30,7 @@ const sparkConfig = ({ htmlFontSize, themes }) => {
 module.exports = {
   animations,
   sizings,
+  utilities,
   sparkTheme,
   sparkConfig,
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@spark-ui/tailwind-plugins",
-  "version": "2.5.0",
+  "version": "2.7.0",
   "description": "Spark Tailwind plugins",
   "publishConfig": {
     "access": "public"
@@ -18,5 +18,5 @@
     "url": "git@github.com:adevinta/spark.git",
     "directory": "packages/utils/tailwind-plugins"
   },
-  "gitHead": "a5e5af21496ded1cce43912266002fa36b3ac328"
+  "gitHead": "51d8f4725c9636e9d47dc0d8761fc6e589bb9d9c"
 }

package/spark-theme/index.js

@@ -1,7 +1,7 @@
 /* eslint-disable @typescript-eslint/no-var-requires */
 const { getCSSVariableDeclarations } = require('./getCSSVariableDeclarations')
 const { getCSSVariableReferences } = require('./getCSSVariableReferences')
-const { retrieveArrayDifferences, getAllObjectKeys } = require('./utils')
+const { retrieveArrayDifferences, getAllObjectKeys, getObjectDifferences } = require('./utils')
 
 const themeUtils = require('@spark-ui/theme-utils')
 const plugin = require('tailwindcss/plugin')
@@ -78,7 +78,10 @@ module.exports = plugin.withOptions(
         }
 
         addBase({
-          [`[data-theme="${key}"]`]: getCSSVariableDeclarations(value, htmlFontSize),
+          [`[data-theme="${key}"]`]: getObjectDifferences(
+            getCSSVariableDeclarations(themes.default, htmlFontSize),
+            getCSSVariableDeclarations(value, htmlFontSize)
+          ),
         })
       })
     },

package/spark-theme/utils.js

@@ -68,6 +68,19 @@ function retrieveArrayDifferences({ ref, comp }) {
   }
 }
 
+function getObjectDifferences(reference, comparison) {
+  const diffObj = {}
+
+  Object.keys(comparison).forEach(key => {
+    if (reference[key] === comparison[key]) {
+      return
+    }
+    diffObj[key] = comparison[key]
+  })
+
+  return diffObj
+}
+
 module.exports = {
   isObject,
   isStringOrNumber,
@@ -80,4 +93,5 @@ module.exports = {
   doubleHyphensRegex,
   getAllObjectKeys,
   retrieveArrayDifferences,
+  getObjectDifferences,
 }

package/utilities/index.js

@@ -0,0 +1,11 @@
+/* eslint-disable-next-line @typescript-eslint/no-var-requires */
+const plugin = require('tailwindcss/plugin')
+
+module.exports = plugin.withOptions(options => ({ addUtilities }) => {
+  addUtilities({
+    '.current-font-size': {
+      width: '1em',
+      height: '1em',
+    },
+  })
+})