@symbo.ls/scratch 0.7.7 → 0.7.9

package/package.json

@@ -2,7 +2,7 @@
   "name": "@symbo.ls/scratch",
   "description": "Φ / CSS framework and methodology.",
   "author": "symbo.ls",
-  "version": "0.7.7",
+  "version": "0.7.9",
   "files": [
     "src"
   ],
@@ -11,6 +11,8 @@
   "main": "src/index.js",
   "publishConfig": {},
   "dependencies": {
+    "@domql/utils": "latest",
+    "@symbo.ls/utils": "latest",
     "color-contrast-checker": "^1.5.0"
   },
   "scripts": {
@@ -20,18 +22,18 @@
     "bump": "npx np"
   },
   "devDependencies": {
+    "@babel/core": "^7.11.5",
     "@babel/preset-env": "^7.18.9",
+    "@emotion/css": "^11.5.0",
+    "babel-eslint": "^10.0.3",
     "babel-jest": "^27.0.2",
     "babel-preset-env": "^1.7.0",
     "coveralls": "^3.0.5",
+    "eslint": "^6.1.0",
     "eslint-plugin-jest": "^24.1.0",
     "jest": "^27.0.6",
     "nodemon": "^2.0.6",
     "np": "^7.2.0",
-    "@babel/core": "^7.11.5",
-    "@emotion/css": "^11.5.0",
-    "babel-eslint": "^10.0.3",
-    "eslint": "^6.1.0",
     "parcel-bundler": "^1.12.3",
     "parcel-plugin-svg-sprite": "^1.4.1",
     "standard": "^13.1.0"

package/src/utils/sequence.js

@@ -1,5 +1,6 @@
 'use strict'
 
+import { toDashCase } from '@symbo.ls/utils'
 import { UNIT } from '../defaultConfig'
 import { CONFIG } from '../factory'
 import { isString } from './object'
@@ -47,10 +48,6 @@ const setSequenceValue = (props, sequenceProps) => {
   sequenceProps.vars[variable] = scaling + sequenceProps.unit
 }
 
-const dashize = val => val
-  .replace(/[A-Z]/g, (match, offset) => (offset > 0 ? '-' : '') + match.toLowerCase())
-  .replace('.', '-')
-
 export const generateSubSequence = (props, sequenceProps) => {
   const { key, base, value, ratio, variable, index } = props
 
@@ -125,7 +122,7 @@ export const getSequenceValue = (value = 'A', sequenceProps) => {
     return `var(${value})`
   }
 
-  const prefix = `--${dashize(sequenceProps.type.replace('.', '-'))}-`
+  const prefix = `--${toDashCase(sequenceProps.type.replace('.', '-'))}-`
 
   const startsWithDashOrLetterRegex = /^-?[a-zA-Z]/i
   const startsWithDashOrLetter = startsWithDashOrLetterRegex.test(value)
@@ -149,8 +146,16 @@ export const getSequenceValue = (value = 'A', sequenceProps) => {
     absValue = absValue.split('-')[0]
   }
 
+  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})`
+  }
+
   // if subsequence is not set but value is applied
-  if (absValue.length === 2) {
+  if (!sequence[absValue] && absValue.length === 2) {
     if (CONFIG.verbose) console.warn(absValue, '- value is not found because `subSequence` is set to false')
     absValue = absValue.slice(0, 1)
   }
@@ -179,10 +184,12 @@ export const getSequenceValuePropertyPair = (value, propertyName, sequenceProps)
   return { [propertyName]: getSequenceValue(value, sequenceProps) }
 }
 
+export const findHeadingLetter = (h1Matches, index) => numToLetterMap[h1Matches - index]
+
 export const findHeadings = propertyNames => {
   const { h1Matches, sequence } = propertyNames
   return new Array(6).fill(null).map((_, i) => {
-    const findLetter = numToLetterMap[h1Matches - i]
+    const findLetter = findHeadingLetter(h1Matches, i)
     return sequence[findLetter]
   })
 }