@symbo.ls/scratch 2.10.253 → 2.10.257

package/dist/cjs/utils/index.js

@@ -523,12 +523,22 @@ var require_object = __commonJS({
           continue;
         else if ((0, import_types.isObject)(objProp)) {
           detached[prop] = {};
-          deepStringify(objProp[prop], detached[prop]);
+          deepStringify(objProp, detached[prop]);
         } else if ((0, import_types.isArray)(objProp)) {
           detached[prop] = [];
-          objProp.map((v, i) => deepStringify(v, detached[prop][i]));
-        } else
+          objProp.forEach((v, i) => {
+            if ((0, import_types.isFunction)(v))
+              return;
+            if ((0, import_types.isObject)(v)) {
+              detached[prop][i] = {};
+              detachFunctionsFromObject(v, detached[prop][i]);
+            } else {
+              detached[prop][i] = v;
+            }
+          });
+        } else {
           detached[prop] = objProp;
+        }
       }
       return detached;
     };

package/dist/cjs/utils/sequence.js

@@ -523,12 +523,22 @@ var require_object = __commonJS({
           continue;
         else if ((0, import_types.isObject)(objProp)) {
           detached[prop] = {};
-          deepStringify(objProp[prop], detached[prop]);
+          deepStringify(objProp, detached[prop]);
         } else if ((0, import_types.isArray)(objProp)) {
           detached[prop] = [];
-          objProp.map((v, i) => deepStringify(v, detached[prop][i]));
-        } else
+          objProp.forEach((v, i) => {
+            if ((0, import_types.isFunction)(v))
+              return;
+            if ((0, import_types.isObject)(v)) {
+              detached[prop][i] = {};
+              detachFunctionsFromObject(v, detached[prop][i]);
+            } else {
+              detached[prop][i] = v;
+            }
+          });
+        } else {
           detached[prop] = objProp;
+        }
       }
       return detached;
     };

package/dist/cjs/utils/sprite.js

@@ -523,12 +523,22 @@ var require_object = __commonJS({
           continue;
         else if ((0, import_types.isObject)(objProp)) {
           detached[prop] = {};
-          deepStringify(objProp[prop], detached[prop]);
+          deepStringify(objProp, detached[prop]);
         } else if ((0, import_types.isArray)(objProp)) {
           detached[prop] = [];
-          objProp.map((v, i) => deepStringify(v, detached[prop][i]));
-        } else
+          objProp.forEach((v, i) => {
+            if ((0, import_types.isFunction)(v))
+              return;
+            if ((0, import_types.isObject)(v)) {
+              detached[prop][i] = {};
+              detachFunctionsFromObject(v, detached[prop][i]);
+            } else {
+              detached[prop][i] = v;
+            }
+          });
+        } else {
           detached[prop] = objProp;
+        }
       }
       return detached;
     };

package/dist/cjs/utils/var.js

@@ -523,12 +523,22 @@ var require_object = __commonJS({
           continue;
         else if ((0, import_types.isObject)(objProp)) {
           detached[prop] = {};
-          deepStringify(objProp[prop], detached[prop]);
+          deepStringify(objProp, detached[prop]);
         } else if ((0, import_types.isArray)(objProp)) {
           detached[prop] = [];
-          objProp.map((v, i) => deepStringify(v, detached[prop][i]));
-        } else
+          objProp.forEach((v, i) => {
+            if ((0, import_types.isFunction)(v))
+              return;
+            if ((0, import_types.isObject)(v)) {
+              detached[prop][i] = {};
+              detachFunctionsFromObject(v, detached[prop][i]);
+            } else {
+              detached[prop][i] = v;
+            }
+          });
+        } else {
           detached[prop] = objProp;
+        }
       }
       return detached;
     };

package/package.json

@@ -2,7 +2,7 @@
   "name": "@symbo.ls/scratch",
   "description": "Φ / CSS framework and methodology.",
   "author": "symbo.ls",
-  "version": "2.10.253",
+  "version": "2.10.257",
   "files": [
     "src",
     "dist"
@@ -32,5 +32,5 @@
   "peerDependencies": {
     "@emotion/css": "^11.5.0"
   },
-  "gitHead": "a941c4b0f1e909f33428ac7f5dedcd90d0365c6b"
+  "gitHead": "3c16c123fa0b6cf00a16e2178bbbfd1049d4c0cc"
 }

package/src/index.js

@@ -7,6 +7,7 @@ export * from './factory.js'
 export * from './defaultConfig'
 export * from './system'
 export * from './utils'
+export * from './transforms'
 export * from './set.js'
 
 export { scratchUtils, scratchSystem }

package/src/system/color.js

@@ -46,8 +46,11 @@ export const getColor = (value, key) => {
     if (tone) {
       if (!val[tone]) {
         const toHex = rgbArrayToHex(rgb.split(', ').map(v => parseFloat(v)))
-        if (tone.slice(0, 1) === '-' || tone.slice(0, 1) === '+') {
-          rgb = hexToRgbArray(getColorShade(toHex, parseFloat(tone))).join(', ')
+        const abs = tone.slice(0, 1)
+        if (abs === '-' || abs === '+') {
+          rgb = hexToRgbArray(
+            getColorShade(toHex, parseFloat(tone))
+          ).join(', ')
         } else {
           const [r, g, b] = [...rgb.split(', ').map(v => parseInt(v))]
           const hsl = rgbToHSL(r, g, b)
@@ -64,7 +67,7 @@ export const getColor = (value, key) => {
   } else return CONFIG.useVariable ? `var(${val.var})` : val.value
 }
 
-export const getMediaColor = (value, property, globalTheme) => {
+export const getMediaColor = (value, globalTheme) => {
   const CONFIG = getActiveConfig()
   if (!globalTheme) globalTheme = CONFIG.globalTheme
   if (!isString(value)) {
@@ -72,7 +75,7 @@ export const getMediaColor = (value, property, globalTheme) => {
     return
   }
 
-  if (value.slice(0, 2) === '--') return { [property]: `var(${value})` }
+  if (value.slice(0, 2) === '--') return `var(${value})`
 
   const [name] = isArray(value) ? value : value.split(' ')
 
@@ -80,21 +83,21 @@ export const getMediaColor = (value, property, globalTheme) => {
   const val = COLOR[name] || GRADIENT[name]
   const isObj = isObject(val)
 
-  if (isObj && val.value) return { [property]: getColor(value, globalTheme) }
+  if (isObj && val.value) return getColor(value, `@${globalTheme}`)
   else if (isObj) {
-    if (globalTheme) return { [property]: getColor(value, `@${globalTheme}`) }
+    if (globalTheme) return getColor(value, `@${globalTheme}`)
     else {
       const obj = {}
       for (const mediaName in val) {
         const query = CONFIG.MEDIA[mediaName.slice(1)]
         const media = `@media screen and ${query}`
-        obj[media] = { [property]: getColor(value, mediaName) }
+        obj[media] = getColor(value, mediaName)
       }
       return obj
     }
   } else {
     if (CONFIG.verbose) console.warn('Can\'t find color', value)
-    return { [property]: value }
+    return value
   }
 }
 

package/src/transforms/index.js

@@ -0,0 +1,70 @@
+'use strict'
+
+import { isString } from '@domql/utils'
+import { getActiveConfig } from "../factory"
+import { getSpacingByKey, getColor, getMediaColor } 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(' ')
+}
+
+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)
+  }).join(' ')
+}
+
+export const transformShadow = shadows => 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) return getColor(v)
+    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.includes('http')) return `url(${v})`
+    return v
+  }).join(' ')
+}
+
+export const transfromGap = gap => isString(gap) && (
+  gap.split(' ').map(v => getSpacingByKey(v, 'gap').gap).join(' ')
+)