@symbo.ls/scratch 2.29.64 → 2.29.66

package/dist/cjs/index.js

@@ -2267,12 +2267,13 @@ var isBorderStyle = (str) => [
   "initial"
 ].some((v) => str.includes(v));
 var transformBorder = (border) => {
-  const arr = border.split(", ");
+  const arr = (border + "").split(", ");
   return arr.map((v) => {
     v = v.trim();
     if (v.slice(0, 2) === "--") return `var(${v})`;
     else if (isBorderStyle(v)) return v || "solid";
-    else if (v.slice(-2) === "px" || v.slice(-2) === "em") return v;
+    else if (v.slice(-2) === "px" || v.slice(-2) === "em")
+      return v;
     else if (getColor(v).length > 2) return getColor(v);
     return getSpacingByKey(v, "border").border;
   }).join(" ");
@@ -2292,7 +2293,10 @@ var transformBoxShadow = (shadows, globalTheme) => shadows.split("|").map((shado
     if (v.slice(0, 2) === "--") return `var(${v})`;
     if (getColor(v).length > 2) {
       const color = getMediaColor(v, globalTheme);
-      if (isObject(color)) return Object.values(color).filter((v2) => v2.includes(": " + globalTheme))[0];
+      if (isObject(color))
+        return Object.values(color).filter(
+          (v2) => v2.includes(": " + globalTheme)
+        )[0];
       return color;
     }
     if (v.includes("px") || v.slice(-2) === "em") return v;
@@ -2308,9 +2312,13 @@ var transformBackgroundImage = (backgroundImage, globalTheme) => {
     if (v.includes("url") || v.includes("gradient")) return v;
     else if (CONFIG2.GRADIENT[backgroundImage]) {
       return {
-        backgroundImage: getMediaColor(backgroundImage, globalTheme || CONFIG2.globalTheme)
+        backgroundImage: getMediaColor(
+          backgroundImage,
+          globalTheme || CONFIG2.globalTheme
+        )
       };
-    } else if (v.includes("/") || v.startsWith("http") || v.includes(".")) return `url(${v})`;
+    } else if (v.includes("/") || v.startsWith("http") || v.includes("."))
+      return `url(${v})`;
     return v;
   }).join(" ");
 };
@@ -2349,7 +2357,9 @@ var transformSize = (propertyName, val, props = {}, opts = {}) => {
   if (!shouldScaleBoxSize && isBoxSize && isString(value)) {
     value = value.split(" ").map((v) => {
       const isSingleLetter = v.length < 3 && /[A-Z]/.test(v);
-      const hasUnits = ["%", "vw", "vh", "ch"].some((unit) => value.includes(unit));
+      const hasUnits = ["%", "vw", "vh", "ch"].some(
+        (unit) => value.includes(unit)
+      );
       if (isSingleLetter && !hasUnits) return v + "_default";
       return v;
     }).join(" ");

package/dist/cjs/transforms/index.js

@@ -1222,12 +1222,13 @@ var isBorderStyle = (str) => [
   "initial"
 ].some((v) => str.includes(v));
 var transformBorder = (border) => {
-  const arr = border.split(", ");
+  const arr = (border + "").split(", ");
   return arr.map((v) => {
     v = v.trim();
     if (v.slice(0, 2) === "--") return `var(${v})`;
     else if (isBorderStyle(v)) return v || "solid";
-    else if (v.slice(-2) === "px" || v.slice(-2) === "em") return v;
+    else if (v.slice(-2) === "px" || v.slice(-2) === "em")
+      return v;
     else if (getColor(v).length > 2) return getColor(v);
     return getSpacingByKey(v, "border").border;
   }).join(" ");
@@ -1247,7 +1248,10 @@ var transformBoxShadow = (shadows, globalTheme) => shadows.split("|").map((shado
     if (v.slice(0, 2) === "--") return `var(${v})`;
     if (getColor(v).length > 2) {
       const color = getMediaColor(v, globalTheme);
-      if (isObject(color)) return Object.values(color).filter((v2) => v2.includes(": " + globalTheme))[0];
+      if (isObject(color))
+        return Object.values(color).filter(
+          (v2) => v2.includes(": " + globalTheme)
+        )[0];
       return color;
     }
     if (v.includes("px") || v.slice(-2) === "em") return v;
@@ -1263,9 +1267,13 @@ var transformBackgroundImage = (backgroundImage, globalTheme) => {
     if (v.includes("url") || v.includes("gradient")) return v;
     else if (CONFIG2.GRADIENT[backgroundImage]) {
       return {
-        backgroundImage: getMediaColor(backgroundImage, globalTheme || CONFIG2.globalTheme)
+        backgroundImage: getMediaColor(
+          backgroundImage,
+          globalTheme || CONFIG2.globalTheme
+        )
       };
-    } else if (v.includes("/") || v.startsWith("http") || v.includes(".")) return `url(${v})`;
+    } else if (v.includes("/") || v.startsWith("http") || v.includes("."))
+      return `url(${v})`;
     return v;
   }).join(" ");
 };
@@ -1304,7 +1312,9 @@ var transformSize = (propertyName, val, props = {}, opts = {}) => {
   if (!shouldScaleBoxSize && isBoxSize && isString(value)) {
     value = value.split(" ").map((v) => {
       const isSingleLetter = v.length < 3 && /[A-Z]/.test(v);
-      const hasUnits = ["%", "vw", "vh", "ch"].some((unit) => value.includes(unit));
+      const hasUnits = ["%", "vw", "vh", "ch"].some(
+        (unit) => value.includes(unit)
+      );
       if (isSingleLetter && !hasUnits) return v + "_default";
       return v;
     }).join(" ");

package/package.json

@@ -2,7 +2,7 @@
   "name": "@symbo.ls/scratch",
   "description": "Φ / CSS framework and methodology.",
   "author": "symbo.ls",
-  "version": "2.29.64",
+  "version": "2.29.66",
   "files": [
     "src",
     "dist"
@@ -25,9 +25,9 @@
     "prepublish": "rimraf -I dist && npm run build && npm run copy:package:cjs"
   },
   "dependencies": {
-    "@domql/utils": "^2.29.64",
-    "@symbo.ls/utils": "^2.29.64",
+    "@domql/utils": "^2.29.66",
+    "@symbo.ls/utils": "^2.29.66",
     "color-contrast-checker": "^1.5.0"
   },
-  "gitHead": "9ca1d85168f72178a86206c16cf02d0d762386f0"
+  "gitHead": "96c61cae2bc621ca0ca6ad1e234e5feebd50b415"
 }

package/src/transforms/index.js

@@ -12,107 +12,142 @@ import {
   getSpacingBasedOnRatio
 } from '../system'
 
-const isBorderStyle = str => [
-  'none',
-  'hidden',
-  'dotted',
-  'dashed',
-  'solid',
-  'double',
-  'groove',
-  'ridge',
-  'inset',
-  'outset',
-  'initial'
-].some(v => str.includes(v))
-
-export const transformBorder = border => {
-  const arr = border.split(', ')
-  return arr.map(v => {
-    v = v.trim()
-    if (v.slice(0, 2) === '--') return `var(${v})`
-    else if (isBorderStyle(v)) return v || 'solid'
-    else if (v.slice(-2) === 'px' || v.slice(-2) === 'em') return v // TODO: add map spacing
-    else if (getColor(v).length > 2) return getColor(v)
-    return getSpacingByKey(v, 'border').border
-  }).join(' ')
+const isBorderStyle = (str) =>
+  [
+    'none',
+    'hidden',
+    'dotted',
+    'dashed',
+    'solid',
+    'double',
+    'groove',
+    'ridge',
+    'inset',
+    'outset',
+    'initial'
+  ].some((v) => str.includes(v))
+
+export const transformBorder = (border) => {
+  const arr = (border + '').split(', ')
+  return arr
+    .map((v) => {
+      v = v.trim()
+      if (v.slice(0, 2) === '--') return `var(${v})`
+      else if (isBorderStyle(v)) return v || 'solid'
+      else if (v.slice(-2) === 'px' || v.slice(-2) === 'em')
+        return v // TODO: add map spacing
+      else if (getColor(v).length > 2) return getColor(v)
+      return getSpacingByKey(v, 'border').border
+    })
+    .join(' ')
 }
 
-export const transformTextStroke = stroke => {
-  return stroke.split(', ').map(v => {
-    if (v.slice(0, 2) === '--') return `var(${v})`
-    if (v.includes('px')) return v
-    else if (getColor(v)) return getColor(v)
-    return v
-  }).join(' ')
+export const transformTextStroke = (stroke) => {
+  return stroke
+    .split(', ')
+    .map((v) => {
+      if (v.slice(0, 2) === '--') return `var(${v})`
+      if (v.includes('px')) return v
+      else if (getColor(v)) return getColor(v)
+      return v
+    })
+    .join(' ')
 }
 
 export const transformShadow = (sh, globalTheme) => getShadow(sh, globalTheme)
 
-export const transformBoxShadow = (shadows, globalTheme) => shadows.split('|').map(shadow => {
-  return shadow.split(',').map(v => {
-    v = v.trim()
-    if (v.slice(0, 2) === '--') return `var(${v})`
-    if (getColor(v).length > 2) {
-      const color = getMediaColor(v, globalTheme)
-      if (isObject(color)) return Object.values(color).filter(v => v.includes(': ' + globalTheme))[0]
-      return color
-    }
-    if (v.includes('px') || v.slice(-2) === 'em') return v
-    const arr = v.split(' ')
-    if (!arr.length) return v
-    return arr.map(v => getSpacingByKey(v, 'shadow').shadow).join(' ')
-  }).join(' ')
-}).join(',')
+export const transformBoxShadow = (shadows, globalTheme) =>
+  shadows
+    .split('|')
+    .map((shadow) => {
+      return shadow
+        .split(',')
+        .map((v) => {
+          v = v.trim()
+          if (v.slice(0, 2) === '--') return `var(${v})`
+          if (getColor(v).length > 2) {
+            const color = getMediaColor(v, globalTheme)
+            if (isObject(color))
+              return Object.values(color).filter((v) =>
+                v.includes(': ' + globalTheme)
+              )[0]
+            return color
+          }
+          if (v.includes('px') || v.slice(-2) === 'em') return v
+          const arr = v.split(' ')
+          if (!arr.length) return v
+          return arr.map((v) => getSpacingByKey(v, 'shadow').shadow).join(' ')
+        })
+        .join(' ')
+    })
+    .join(',')
 
 export const transformBackgroundImage = (backgroundImage, globalTheme) => {
   const CONFIG = getActiveConfig()
-  return backgroundImage.split(', ').map(v => {
-    if (v.slice(0, 2) === '--') return `var(${v})`
-    if (v.includes('url') || v.includes('gradient')) return v
-    else if (CONFIG.GRADIENT[backgroundImage]) {
-      return {
-        backgroundImage: getMediaColor(backgroundImage, globalTheme || CONFIG.globalTheme)
-      }
-    } else if (v.includes('/') || v.startsWith('http') || v.includes('.')) return `url(${v})`
-    return v
-  }).join(' ')
+  return backgroundImage
+    .split(', ')
+    .map((v) => {
+      if (v.slice(0, 2) === '--') return `var(${v})`
+      if (v.includes('url') || v.includes('gradient')) return v
+      else if (CONFIG.GRADIENT[backgroundImage]) {
+        return {
+          backgroundImage: getMediaColor(
+            backgroundImage,
+            globalTheme || CONFIG.globalTheme
+          )
+        }
+      } else if (v.includes('/') || v.startsWith('http') || v.includes('.'))
+        return `url(${v})`
+      return v
+    })
+    .join(' ')
 }
 
-export const transfromGap = gap => isString(gap) && (
-  gap.split(' ').map(v => getSpacingByKey(v, 'gap').gap).join(' ')
-)
+export const transfromGap = (gap) =>
+  isString(gap) &&
+  gap
+    .split(' ')
+    .map((v) => getSpacingByKey(v, 'gap').gap)
+    .join(' ')
 
-export const transformTransition = transition => {
+export const transformTransition = (transition) => {
   const arr = transition.split(' ')
 
   if (!arr.length) return transition
 
-  return arr.map(v => {
-    if (v.slice(0, 2) === '--') return `var(${v})`
-    if (v.length < 3 || v.includes('ms')) {
-      const mapWithSequence = getTimingByKey(v)
-      return mapWithSequence.timing || v
-    }
-    if (getTimingFunction(v)) return getTimingFunction(v)
-    return v
-  }).join(' ')
+  return arr
+    .map((v) => {
+      if (v.slice(0, 2) === '--') return `var(${v})`
+      if (v.length < 3 || v.includes('ms')) {
+        const mapWithSequence = getTimingByKey(v)
+        return mapWithSequence.timing || v
+      }
+      if (getTimingFunction(v)) return getTimingFunction(v)
+      return v
+    })
+    .join(' ')
 }
 
 export const transformDuration = (duration, props, propertyName) => {
   if (!isString(duration)) return
-  return duration.split(',').map(v => getTimingByKey(v).timing || v).join(',')
+  return duration
+    .split(',')
+    .map((v) => getTimingByKey(v).timing || v)
+    .join(',')
 }
 
-export const splitTransition = transition => {
+export const splitTransition = (transition) => {
   const arr = transition.split(',')
   if (!arr.length) return
   return arr.map(transformTransition).join(',')
 }
 
-export const checkIfBoxSize = propertyName => {
+export const checkIfBoxSize = (propertyName) => {
   const prop = propertyName.toLowerCase()
-  return (prop.includes('width') || prop.includes('height')) && !prop.includes('border')
+  return (
+    (prop.includes('width') || prop.includes('height')) &&
+    !prop.includes('border')
+  )
 }
 
 export const transformSize = (propertyName, val, props = {}, opts = {}) => {
@@ -124,12 +159,17 @@ export const transformSize = (propertyName, val, props = {}, opts = {}) => {
   const isBoxSize = checkIfBoxSize(propertyName)
 
   if (!shouldScaleBoxSize && isBoxSize && isString(value)) {
-    value = value.split(' ').map(v => {
-      const isSingleLetter = v.length < 3 && /[A-Z]/.test(v)
-      const hasUnits = ['%', 'vw', 'vh', 'ch'].some(unit => value.includes(unit))
-      if (isSingleLetter && !hasUnits) return v + '_default'
-      return v
-    }).join(' ')
+    value = value
+      .split(' ')
+      .map((v) => {
+        const isSingleLetter = v.length < 3 && /[A-Z]/.test(v)
+        const hasUnits = ['%', 'vw', 'vh', 'ch'].some((unit) =>
+          value.includes(unit)
+        )
+        if (isSingleLetter && !hasUnits) return v + '_default'
+        return v
+      })
+      .join(' ')
   }
 
   if (opts.ratio) {