@magic/css 0.7.43 → 0.7.47

package/README.md

@@ -539,6 +539,19 @@ update dependencies
 * use single quotes in output css
 * add cli
 
-#### 0.7.44 - unreleased
+#### 0.7.44
+* css props can be arrays to provide css overloads `{ color: ['green', 'red'] }` turns into `color: green; color: red;`
+* update dependencies
+
+#### 0.7.45
+update dependencies
+
+#### 0.7.46
+update dependencies
+
+#### 0.7.47
+update dependencies
+
+#### 0.7.48 - unreleased
 ...
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@magic/css",
-  "version": "0.7.43",
+  "version": "0.7.47",
   "author": "Wizards & Witches",
   "description": "css in js",
   "license": "AGPL-3.0",
@@ -37,11 +37,11 @@
   },
   "main": "src/index.mjs",
   "dependencies": {
-    "@magic/cases": "0.0.5",
-    "@magic/deep": "0.1.7",
-    "@magic/fs": "0.0.18",
-    "@magic/log": "0.1.10",
-    "@magic/types": "0.1.16",
+    "@magic/cases": "0.0.6",
+    "@magic/deep": "0.1.10",
+    "@magic/fs": "0.0.21",
+    "@magic/log": "0.1.12",
+    "@magic/types": "0.1.18",
     "autoprefixer": "10.4.0",
     "postcss": "8.4.5"
   },
@@ -52,8 +52,8 @@
     "@magic-modules/pre": "0.0.11",
     "@magic-themes/docs": "0.0.14",
     "@magic/core": "0.0.133",
-    "@magic/format": "0.0.33",
-    "@magic/test": "0.1.77"
+    "@magic/format": "0.0.35",
+    "@magic/test": "0.2.0"
   },
   "keywords": [
     "css-in-js",

package/src/parse/index.mjs

@@ -29,14 +29,12 @@ const recurseParse = (mod, opts) => {
   let children = []
   const props = {}
 
-  // media and keyframes are special, they provide a full body of css rules
   if (parent.startsWith('@keyframes') || parent.startsWith('@media')) {
+    // media and keyframes are special, they provide a full body of css rules
     const i = parse(items)
     return [parent, i]
-  }
-
-  // handle font face declarations that are expected to expand
-  if (parent.startsWith('@font-face')) {
+  } else if (parent.startsWith('@font-face')) {
+    // handle font face declarations that are expected to expand
     let i = items
     if (is.string(items.url)) {
       i = [items]
@@ -47,14 +45,18 @@ const recurseParse = (mod, opts) => {
     }
   }
 
-  Object.entries(items).forEach(([name, item]) => {
-    if (is.object(item)) {
-      name = getSelector(parent, name)
-      children = deep.merge(children, recurseParse([name, item], opts))
-    } else {
-      props[name] = item
-    }
-  })
+  if (is.objectNative(items)) {
+    Object.entries(items).forEach(([name, item]) => {
+      if (is.array(item)) {
+        props[name] = item
+      } else if (is.objectNative(item)) {
+        name = getSelector(parent, name)
+        children = deep.merge(children, recurseParse([name, item], opts))
+      } else {
+        props[name] = item
+      }
+    })
+  }
 
   if (is.empty(props)) {
     if (!is.empty(children)) {
@@ -102,12 +104,14 @@ const parse = (styles, opts = {}) => {
     styles = styles(opts)
   }
 
-  // this might trigger additionally to the is.function if statement above
   if (is.array(styles)) {
+    // if styles are an array, map over the items
     styles = styles.map(s => recurseParse(s, opts))
-  } else if (!is.array(styles) && is.objectNative(styles)) {
+  } else if (is.objectNative(styles)) {
+    // styles are an object
     styles = Object.entries(styles).map(s => recurseParse(s, opts))
   } else {
+    // unknown styles
     log.error('invalid styles received', styles)
   }
 

package/src/stringify/index.mjs

@@ -25,7 +25,7 @@ const stringify = async (styles, opts = {}) => {
 
   const parsed = parse(styles, opts)
 
-  const stringified = recurseStringify(parsed, plugins.stringify)
+  const stringified = recurseStringify(parsed, plugins.stringify, opts)
 
   /*
    * test the resulting css using postcss and autoprefix vendors where needed.

package/src/stringify/props.mjs

@@ -1,8 +1,18 @@
 import cases from '@magic/cases'
+import is from '@magic/types'
 
 export const stringifyProps = props =>
   Object.entries(props)
-    .map(([k, v]) => `${cases.kebab(k)}: ${v};`)
+    .map(([k, v]) => {
+      const kebab = cases.kebab(k)
+
+      // handle css overloads (color: ['green', 'red'] turns into "color: green; color: red;")
+      if (is.array(v)) {
+        return v.map(o => `${kebab}: ${o};`).join(' ')
+      }
+
+      return `${kebab}: ${v};`
+    })
     .join(' ')
 
 export default stringifyProps

package/src/stringify/recurseStringify.mjs

@@ -2,9 +2,10 @@ import is from '@magic/types'
 
 import stringifyProps from './props.mjs'
 
-export const recurseStringify = (res, plugins = []) => {
+export const recurseStringify = (res, plugins = [], opts = {}) => {
   if (is.array(res)) {
     const [name, items] = res
+
     if (is.string(name)) {
       let result = ''
       Object.entries(plugins).forEach(([lookup, fn]) => {
@@ -12,14 +13,16 @@ export const recurseStringify = (res, plugins = []) => {
           result = fn({ name, items, plugins })
         }
       })
+
       if (result) {
         return result
       }
     }
 
-    return res.map(r => recurseStringify(r, plugins)).join(' ')
+    return res.map(r => recurseStringify(r, plugins, opts)).join(' ')
   } else if (is.object(res)) {
-    return `{ ${stringifyProps(res)} }\n`
+    const stringified = stringifyProps(res)
+    return `{ ${stringified} }\n`
   }
 
   return res