@spark-ui/cli-utils - npm Package Compare versions

Comparing version 2.4.4 to 2.5.0

CHANGELOG.md

@@ -6,2 +6,8 @@ # Change Log
 
+# [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)
@@ -8,0 +14,0 @@

package.json

 {
   "name": "@spark-ui/cli-utils",
-  "version": "2.4.4",
+  "version": "2.5.0",
   "description": "Spark CLI utils",
@@ -16,3 +16,3 @@ "publishConfig": {
     "@clack/prompts": "0.6.2",
-    "@spark-ui/theme-utils": "^2.6.4",
+    "@spark-ui/theme-utils": "^2.7.0",
     "camel-case": "4.1.2",
@@ -33,3 +33,3 @@ "chalk": "5.2.0",
   },
-  "gitHead": "6b65f63adc22d7a55eecb230c161ccaffd43ebc2"
+  "gitHead": "62c4c8020794ee3ea0ffd34f30cf673a92f55570"
 }

src/setup-themes/utils/createCSSTokenfile.js

@@ -7,5 +7,12 @@ import { appendFileSync } from 'node:fs'
 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 = {}
@@ -27,2 +34,6 @@
 
+          if (/rem$/gi.test(value)) {
+            return getRemEquivalentValue(value, htmlFontSize)
+          }
+
           return value
@@ -54,5 +65,5 @@ }
 
-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)
 
@@ -84,3 +95,3 @@ return key === 'default'
  */
-export function createCSSTokensFile(path, themeRecord) {
+export function createCSSTokensFile(path, themeRecord, htmlFontSize) {
   try {
@@ -93,3 +104,3 @@ appendFileSync(
         @tailwind utilities;
-        @layer base {${getStringifiedThemes(themeRecord).join('')}}
+        @layer base {${getStringifiedThemes(themeRecord, htmlFontSize).join('')}}
         `,
@@ -96,0 +107,0 @@ {

src/setup-themes/utils/utils.js

@@ -31,2 +31,9 @@ function toKebabCase(v) {
 
+function getRemEquivalentValue(remValue, htmlFontSize) {
+  const defaultBrowserBase = 16
+  const pxValue = parseFloat(remValue) * defaultBrowserBase
+
+  return `${pxValue / htmlFontSize}rem`
+}
+
 const doubleHyphensRegex = /(?<!var\()--+/g
@@ -41,3 +48,4 @@
   hasNumber,
+  getRemEquivalentValue,
   doubleHyphensRegex,
 }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

36024

increased by2.43%

Lines of code

743

increased by2.2%

Dependency changes

• Updated@spark-ui/theme-utils@^2.7.0