@symbo.ls/scratch - npm Package Compare versions

Comparing version 0.7.12 to 0.7.13

package.json

@@ -5,3 +5,3 @@ {
   "author": "symbo.ls",
-  "version": "0.7.12",
+  "version": "0.7.13",
   "files": [
@@ -8,0 +8,0 @@ "src"

src/defaultConfig/responsive.js

@@ -12,3 +12,17 @@ 'use strict'
   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]
+}

src/system/spacing.js

 'use strict'
 
 import { SPACING } from '../defaultConfig'
-import { applySequenceVars, arrayze, generateSequence, getSequenceValuePropertyPair, merge } from '../utils'
+import { applySequenceVars, arrayze, generateSequence, getSequenceValuePropertyPair, isString, merge } from '../utils'
 
@@ -56,21 +56,25 @@ const runThroughMedia = sequenceProps => {
 
-  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']
+    }
 
-  if (stack.length > 1) {
+    const wrapSequenceValueByDirection = (direction, i) => getSequenceValuePropertyPair(
+      stack[i],
+      propertyName + direction + suffix,
+      sequence
+    )
+
     return directions[stack.length].map((dir, key) => wrapSequenceValueByDirection(dir, key))
@@ -77,0 +81,0 @@ }

src/utils/object.js

@@ -42,4 +42,3 @@ 'use strict'
 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])
@@ -46,0 +45,0 @@ if (isArray(val)) return val

src/utils/sequence.js

@@ -121,5 +121,3 @@ 'use strict'
 
-  if (isString(value) && value.slice(0, 2) === '--') {
-    return `var(${value})`
-  }
+  if (isString(value) && value.slice(0, 2) === '--') return `var(${value})`
 
@@ -138,2 +136,3 @@ const prefix = `--${toDashCase(sequenceProps.type.replace('.', '-'))}-`
     value === 'max-content' ||
+    value.includes('calc') ||
     !startsWithDashOrLetter
@@ -152,8 +151,13 @@ ) return value
 
+  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})`
   }
@@ -160,0 +164,0 @@

src/utils/var.js

@@ -7,3 +7,3 @@ 'use strict'
 
-const ENV = process.env.NODE_ENV
+const ENV = process.env.NODE_ENV // eslint-disable-line no-undef
 
@@ -10,0 +10,0 @@ export const setVariables = (result, key) => {

No alert changes

Improved metrics

Total package byte prevSize

42286

increased by1.6%

Lines of code

1304

increased by1.48%

No dependency changes