@spark-ui/cli-utils 2.4.4 → 2.5.0

package/CHANGELOG.md

@@ -3,6 +3,12 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [2.5.0](https://github.com/adevinta/spark/compare/@spark-ui/cli-utils@2.4.4...@spark-ui/cli-utils@2.5.0) (2023-03-09)
+
+### Features
+
+- **cli-utils:** implement support for various base font sizes in theme building process ([7734203](https://github.com/adevinta/spark/commit/7734203330a411ba9c6898c6c1b4a84f6c168537)), closes [#385](https://github.com/adevinta/spark/issues/385)
+
 ## [2.4.4](https://github.com/adevinta/spark/compare/@spark-ui/cli-utils@2.4.3...@spark-ui/cli-utils@2.4.4) (2023-03-07)
 
 **Note:** Version bump only for package @spark-ui/cli-utils

package/bin/spark-setup-themes.mjs

@@ -45,10 +45,10 @@ if (!configFileIsMJS) writeFileSync(jsFilePath, jsFileContents)
 
 import(jsFilePath)
   .then(module => {
-    const { tailwindThemeConfigPath, tailwindCSSPath, themes } = module.default
+    const { tailwindThemeConfigPath, tailwindCSSPath, themes, htmlFontSize = 16 } = module.default
 
     createTailwindThemeConfigFile(tailwindThemeConfigPath)
-    createCSSTokensFile(tailwindCSSPath, themes)
+    createCSSTokensFile(tailwindCSSPath, themes, htmlFontSize)
 
     const child = spawn(process.execPath, [jsFilePath], {
       stdio: 'inherit',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@spark-ui/cli-utils",
-  "version": "2.4.4",
+  "version": "2.5.0",
   "description": "Spark CLI utils",
   "publishConfig": {
     "access": "public"
@@ -13,7 +13,7 @@
   "type": "module",
   "dependencies": {
     "@clack/prompts": "0.6.2",
-    "@spark-ui/theme-utils": "^2.6.4",
+    "@spark-ui/theme-utils": "^2.7.0",
     "camel-case": "4.1.2",
     "chalk": "5.2.0",
     "commander": "10.0.0",
@@ -29,5 +29,5 @@
     "url": "git@github.com:adevinta/spark.git",
     "directory": "packages/utils/cli"
   },
-  "gitHead": "6b65f63adc22d7a55eecb230c161ccaffd43ebc2"
+  "gitHead": "62c4c8020794ee3ea0ffd34f30cf673a92f55570"
 }

package/src/setup-themes/utils/createCSSTokenfile.js

@@ -4,9 +4,16 @@ import { join } from 'node:path'
 import hexRgb from 'hex-rgb'
 
 import { DEFAULT_KEY } from './constants.js'
-import { doubleHyphensRegex, isHex, isObject, isStringOrNumber, toKebabCase } from './utils.js'
+import {
+  doubleHyphensRegex,
+  getRemEquivalentValue,
+  isHex,
+  isObject,
+  isStringOrNumber,
+  toKebabCase,
+} from './utils.js'
 
-function toCSSVars(_theme, className) {
+function toCSSVars(_theme, className, htmlFontSize) {
   const flattenedTheme = {}
 
   function flatten(theme, paths = []) {
@@ -23,6 +30,10 @@ function toCSSVars(_theme, className) {
             return `${red} ${green} ${blue}`
           }
 
+          if (/rem$/gi.test(value)) {
+            return getRemEquivalentValue(value, htmlFontSize)
+          }
+
           return value
         }
 
@@ -49,9 +60,9 @@ const toStringifiedTheme = theme =>
     .map(([k, v]) => `${k}:${v}`)
     .join(';')
 
-const getStringifiedThemes = themeRecord =>
+const getStringifiedThemes = (themeRecord, htmlFontSize) =>
   Object.keys(themeRecord).map(key => {
-    const { className, ...rest } = toCSSVars(themeRecord[key], key)
+    const { className, ...rest } = toCSSVars(themeRecord[key], key, htmlFontSize)
 
     return key === 'default'
       ? `:root{${toStringifiedTheme(rest)}}`
@@ -78,7 +89,7 @@ const getStringifiedThemes = themeRecord =>
  *
  * createCSSTokensFile('somePath.css', themes) // will generate a "somePath.css" file in the relative location from which it was called
  */
-export function createCSSTokensFile(path, themeRecord) {
+export function createCSSTokensFile(path, themeRecord, htmlFontSize) {
   try {
     appendFileSync(
       join(process.cwd(), path),
@@ -86,7 +97,7 @@ export function createCSSTokensFile(path, themeRecord) {
         @tailwind base;
         @tailwind components;
         @tailwind utilities;
-        @layer base {${getStringifiedThemes(themeRecord).join('')}}
+        @layer base {${getStringifiedThemes(themeRecord, htmlFontSize).join('')}}
         `,
       {
         flag: 'w',

package/src/setup-themes/utils/utils.js

@@ -28,6 +28,13 @@ function hasNumber(value) {
   return /\d/.test(value)
 }
 
+function getRemEquivalentValue(remValue, htmlFontSize) {
+  const defaultBrowserBase = 16
+  const pxValue = parseFloat(remValue) * defaultBrowserBase
+
+  return `${pxValue / htmlFontSize}rem`
+}
+
 const doubleHyphensRegex = /(?<!var\()--+/g
 
 export {
@@ -37,5 +44,6 @@ export {
   isObject,
   isCamelCase,
   hasNumber,
+  getRemEquivalentValue,
   doubleHyphensRegex,
 }