@symbo.ls/scratch 0.7.12 → 0.7.13

package/package.json

@@ -2,7 +2,7 @@
   "name": "@symbo.ls/scratch",
   "description": "Φ / CSS framework and methodology.",
   "author": "symbo.ls",
-  "version": "0.7.12",
+  "version": "0.7.13",
   "files": [
     "src"
   ],

package/src/defaultConfig/responsive.js

@@ -9,5 +9,19 @@ export const BREAKPOINTS = {
   tabletS: 1024,
   mobileL: 768,
   mobileM: 560,
-  mobileS: 480
+  mobileS: 480,
+  mobileXS: 375
+}
+
+export const DEVICES = {
+  screenL: [1920, 1024],
+  screenM: [1680, 1024],
+  screenS: [1440, 978],
+  tabletL: [1366, 926],
+  tabletM: [1280, 768],
+  tabletS: [1024, 768],
+  mobileL: [768, 375],
+  mobileM: [560, 768],
+  mobileS: [480, 768],
+  mobileXS: [375, 768]
 }

package/src/system/spacing.js

@@ -1,7 +1,7 @@
 'use strict'
 
 import { SPACING } from '../defaultConfig'
-import { applySequenceVars, arrayze, generateSequence, getSequenceValuePropertyPair, merge } from '../utils'
+import { applySequenceVars, arrayze, generateSequence, getSequenceValuePropertyPair, isString, merge } from '../utils'
 
 const runThroughMedia = sequenceProps => {
   for (const prop in sequenceProps) {
@@ -53,25 +53,29 @@ export const getSpacingByKey = (
   const stack = arrayze(value)
   if (!stack) return
 
-  let suffix = ''
-  if (propertyName === 'borderWidth') {
-    propertyName = 'border'
-    suffix = 'Width'
+  if (isString(value) && value.includes('calc')) {
+    return { [propertyName]: value }
   }
 
-  const directions = {
-    2: ['Block', 'Inline'],
-    3: ['BlockStart', 'Inline', 'BlockEnd'],
-    4: ['BlockStart', 'InlineEnd', 'BlockEnd', 'InlineStart']
-  }
+  if (stack.length > 1) {
+    let suffix = ''
+    if (propertyName === 'borderWidth') {
+      propertyName = 'border'
+      suffix = 'Width'
+    }
 
-  const wrapSequenceValueByDirection = (direction, i) => getSequenceValuePropertyPair(
-    stack[i],
-    propertyName + direction + suffix,
-    sequence
-  )
+    const directions = {
+      2: ['Block', 'Inline'],
+      3: ['BlockStart', 'Inline', 'BlockEnd'],
+      4: ['BlockStart', 'InlineEnd', 'BlockEnd', 'InlineStart']
+    }
+
+    const wrapSequenceValueByDirection = (direction, i) => getSequenceValuePropertyPair(
+      stack[i],
+      propertyName + direction + suffix,
+      sequence
+    )
 
-  if (stack.length > 1) {
     return directions[stack.length].map((dir, key) => wrapSequenceValueByDirection(dir, key))
   }
 

package/src/utils/object.js

@@ -39,8 +39,7 @@ export const deepMerge = (obj, obj2) => {
 }
 
 export const arrayze = val => {
-  const isString = typeof val === 'string'
-  if (isString) return val.split(' ')
+  if (isString(val)) return val.split(' ')
   if (isObject(val)) return Object.keys(val).map(v => val[v])
   if (isArray(val)) return val
 }

package/src/utils/sequence.js

@@ -118,9 +118,7 @@ export const getSequenceValue = (value = 'A', sequenceProps) => {
     useVariable
   } = sequenceProps
 
-  if (isString(value) && value.slice(0, 2) === '--') {
-    return `var(${value})`
-  }
+  if (isString(value) && value.slice(0, 2) === '--') return `var(${value})`
 
   const prefix = `--${toDashCase(sequenceProps.type.replace('.', '-'))}-`
 
@@ -134,6 +132,7 @@ export const getSequenceValue = (value = 'A', sequenceProps) => {
     value === 'fit-content' ||
     value === 'min-content' ||
     value === 'max-content' ||
+    value.includes('calc') ||
     !startsWithDashOrLetter
   ) return value
 
@@ -147,12 +146,17 @@ export const getSequenceValue = (value = 'A', sequenceProps) => {
     absValue = absValue.split('-')[0]
   }
 
+  const varValue = v => `var(${prefix}${v}${mediaName})`
   if (absValue.includes('+')) {
     const args = absValue.split('+')
-    const varValue = v => `var(${prefix}${v}${mediaName})`
     const [first, second] = args
     const joint = `${varValue(first)} + ${varValue(second)}`
     return isNegative ? `calc((${joint}) * -1)` : `calc(${joint})`
+  } else if (absValue.includes('-')) {
+    const args = absValue.split('-')
+    const [first, second] = args
+    const joint = `${varValue(first)} - ${varValue(second)}`
+    return isNegative ? `calc((${joint}) * -1)` : `calc(${joint})`
   }
 
   // if subsequence is not set but value is applied

package/src/utils/var.js

@@ -4,7 +4,7 @@ import { MEDIA, TIMING } from '../defaultConfig'
 import { CONFIG, CSS_VARS } from '../factory'
 import { isObjectLike } from './object'
 
-const ENV = process.env.NODE_ENV
+const ENV = process.env.NODE_ENV // eslint-disable-line no-undef
 
 export const setVariables = (result, key) => {
   // CSS_VARS[result.var] =