@magic/css 0.7.40 → 0.7.44

package/README.md

@@ -29,8 +29,44 @@ parse/stringify/write css in js
   npm install --save-exact @magic/css
 ```
 
+
 #### usage:
 
+##### cli:
+
+@magic/css includes a cli script that can handle most usecases the internal javascript api allows.
+
+to use this cli from any directory,
+`npm install -g @magic.css` is a useful shortcut.
+after the global install, you can just call `mcss` from anywhere in your terminal.
+
+after installation, add:
+`"mcss": "mcss"`
+to your package.json "scripts" section and then
+`npm run mcss`
+to see the help output below.
+
+```
+@magic/css
+commands:
+stringify - convert css in js to css
+parse     - convert css in js to an array of key value pairs
+full      - get a full result object.
+
+flags:
+--minified - output minified css - alias: ["--m", "-m"]
+--help     - alias: ["-h"]
+--out      - directory to write output files to. omit to print to stdout - alias: ["--o", "-o"]
+--in       - directory with source files, needs index.js to exist - alias: ["--i", "-i"]
+
+examples:
+mcss parse --in ./styles --out ./css
+mcss stringify --in ./styles --out ./css
+mcss full --in ./styles --out ./css
+```
+
+#### library:
+
 ##### init
 ```javascript
 import css from '@magic/css'
@@ -490,6 +526,23 @@ update dependencies
 #### 0.7.40
 update dependencies
 
-#### 0.7.41 - unreleased
+#### 0.7.41
+update dependencies
+
+#### 0.7.42
+update dependencies
+
+#### 0.7.43
+* update dependencies
+* added font v2 to allow handling of local() fonts (see https://magic.github.io/css/#styles-webfonts)
+* woff2 files are placed before woff files
+* use single quotes in output css
+* add cli
+
+#### 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 - unreleased
 ...
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@magic/css",
-  "version": "0.7.40",
+  "version": "0.7.44",
   "author": "Wizards & Witches",
   "description": "css in js",
   "license": "AGPL-3.0",
@@ -17,6 +17,10 @@
     "test": "t --exclude docs example config.js",
     "calls": "calls"
   },
+  "bin": {
+    "mcss": "src/bin/index.js",
+    "magic-css": "src/bin/index.js"
+  },
   "engines": {
     "node": ">=14.15.4"
   },
@@ -35,11 +39,11 @@
   "dependencies": {
     "@magic/cases": "0.0.5",
     "@magic/deep": "0.1.7",
-    "@magic/fs": "0.0.17",
+    "@magic/fs": "0.0.18",
     "@magic/log": "0.1.10",
     "@magic/types": "0.1.16",
-    "autoprefixer": "10.3.5",
-    "postcss": "8.3.7"
+    "autoprefixer": "10.4.0",
+    "postcss": "8.4.5"
   },
   "devDependencies": {
     "@magic-modules/git-badges": "0.0.11",
@@ -47,9 +51,9 @@
     "@magic-modules/no-spy": "0.0.6",
     "@magic-modules/pre": "0.0.11",
     "@magic-themes/docs": "0.0.14",
-    "@magic/core": "0.0.131",
-    "@magic/format": "0.0.31",
-    "@magic/test": "0.1.75"
+    "@magic/core": "0.0.133",
+    "@magic/format": "0.0.33",
+    "@magic/test": "0.1.77"
   },
   "keywords": [
     "css-in-js",

package/src/bin/index.js

@@ -0,0 +1,96 @@
+#!/usr/bin/env node
+
+import path from 'path'
+
+import cli from '@magic/cli'
+import fs from '@magic/fs'
+import log from '@magic/log'
+
+import css from '../index.mjs'
+
+const cwd = process.cwd()
+
+const { args, commands } = cli({
+  commands: ['full', 'parse', 'stringify'],
+  options: [
+    ['--in', '--i', '-i'],
+    ['--out', '--o', '-o'],
+    ['--minified', '--m', '-m'],
+  ],
+  single: ['--in', '--out', '--minified'],
+  help: {
+    name: '@magic/css',
+    header: 'css in js pipeline.',
+    commands: {
+      full: 'get a full result object.',
+      parse: 'convert css in js to an array of key value pairs',
+      stringify: 'convert css in js to css',
+    },
+    options: {
+      '--in': 'directory with index.js that has a css in js object as default export',
+      '--out': 'directory to write output files to. omit to print to stdout',
+      '--minified': 'output minified css',
+    },
+    example: `
+mcss parse --in ./css --out ./css
+mcss stringify --in ./styles --out ./css
+`.trim(),
+  },
+})
+
+const logResult = style => log.success('mcss output', `\n\n${style}\n`)
+
+const maybeWrite = async ({ args, commands, style }) => {
+  const outFile = commands.stringify ? 'main.css' : 'theme.js'
+
+  if (args.out) {
+    if (!path.isAbsolute(args.out)) {
+      args.out = path.join(cwd, args.out)
+    }
+
+    if (!args.out.endsWith('.css') && !args.out.endsWith('.js')) {
+      args.out = path.join(args.out, outFile)
+    }
+
+    const dirname = path.dirname(args.out)
+    await fs.mkdirp(dirname)
+
+    await fs.writeFile(args.out, style)
+  } else {
+    logResult(style)
+  }
+
+  log.success('mcss is done.')
+}
+
+const run = async () => {
+  if (!args.in) {
+    args.in = cwd
+    log.info('--in not specified, using process.cwd()', args.in)
+  } else if (!path.isAbsolute(args.in)) {
+    args.in = path.join(cwd, args.in)
+  }
+
+  if (!args.in.endsWith('index.js')) {
+    args.in = path.join(args.in, 'index.js')
+  }
+
+  const { default: theme } = await import(args.in)
+
+  const result = await css(theme)
+
+  if (commands.full) {
+    const style = JSON.stringify(result, null, 2)
+    maybeWrite({ args, commands, style })
+  } else if (commands.stringify) {
+    const style = args.hasOwnProperty('minified') ? result.minified : result.css
+    maybeWrite({ args, commands, style })
+  } else if (commands.parse) {
+    const style = JSON.stringify(result.parsed, null, 2)
+    maybeWrite({ args, commands, style })
+  } else {
+    log.error('MISSING_COMMAND', 'Either parse, stringify or full are required.')
+  }
+}
+
+run()

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)) {
@@ -67,6 +69,11 @@ const recurseParse = (mod, opts) => {
 
 const isStyle = style => style && style.length === 2 && is.string(style[0]) && is.object(style[1])
 
+/*
+ * we can not use deep.flatten here, the flattened array has a specific structure:
+ * [[key, styles], [key, styles]],
+ * deep.flatten would return [key, styles, key, styles]
+ */
 const flat = a => {
   if (isStyle(a)) {
     const [k, v] = a
@@ -83,22 +90,28 @@ const flat = a => {
         }
       }
     })
+
     return flattened
   }
 }
 
+/*
+ * parse the styles css object into an array of key-value pairs.
+ */
 const parse = (styles, opts = {}) => {
   // first check if the user sent us a function that resolves to a css object
   if (is.function(styles)) {
     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.object(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/fontFaces.mjs

@@ -0,0 +1,150 @@
+import is from '@magic/types'
+import deep from '@magic/deep'
+import log from '@magic/log'
+
+import { recurseStringify } from './recurseStringify.mjs'
+
+export const fontFileTypes = {
+  eot: url => `src: url('${url}.eot'); src: url('${url}.eot#iefix') format('embedded-opentype')`,
+  woff2: url => `url('${url}.woff2') format('woff2')`,
+  woff: url => `url('${url}.woff') format('woff')`,
+  ttf: url => `url('${url}.ttf') format('truetype')`,
+  svg: (url, family) => `url('${url}.svg#${family}') format('svg')`,
+}
+
+const fontV1 = (name, font) => {
+  log.warn('W_DEPRECATED', 'font name', font.family, 'is declared in a deprecated way.')
+  log('See: https://magic.github.io/css/#styles-webfonts for more information.')
+
+  let { family, url, types = 'woff2', weights = 400, styles = 'normal', ...rest } = font
+
+  if (!url.endsWith('/')) {
+    url += '/'
+  }
+
+  if (!is.array(weights)) {
+    weights = [weights]
+  }
+
+  if (!is.array(types)) {
+    types = [types]
+  }
+
+  if (!is.array(styles)) {
+    styles = [styles]
+  }
+
+  return weights.map(fontWeight => {
+    return styles.map(fontStyle => {
+      const weightStyleUrl = `${url}${family}-${fontWeight}-${fontStyle}`
+
+      let fontString = `${name} ${recurseStringify({
+        fontFamily: `'${family}'`,
+        fontStyle,
+        fontWeight,
+        ...rest,
+      })}`
+
+      let fontFileString = 'src:'
+      if (types.includes('eot')) {
+        fontFileString = ''
+      }
+
+      const fontFileStrings = []
+      Object.entries(fontFileTypes).map(([name, fn]) => {
+        if (types.includes(name)) {
+          const str = fn(weightStyleUrl, family)
+          fontFileStrings.push(str)
+        }
+      })
+
+      fontFileString += fontFileStrings.join(',') + ';'
+
+      fontString = fontString.replace('}\n', `${fontFileString} }\n`)
+      return fontString
+    })
+  })
+}
+
+const fontV2 = (name, font) => {
+  let { family, url, types = 'woff2', styles, ...rest } = font
+
+  if (!url.endsWith('/')) {
+    url += '/'
+  }
+
+  if (!is.array(types)) {
+    types = [types]
+  }
+
+  const fontStrings = Object.entries(styles).map(entry => {
+    const [fontStyle, weights] = entry
+
+    return Object.entries(weights).map(([fontWeight, local]) => {
+      const weightStyleUrl = `${url}${family}-${fontWeight}-${fontStyle}`
+
+      const fontFileStrings = []
+
+      let fontFileString = ''
+      if (types.includes('eot')) {
+        fontFileString = ''
+      }
+
+      local.forEach(l => {
+        fontFileStrings.push(`local('${l}')`)
+      })
+
+      Object.entries(fontFileTypes).map(([name, fn]) => {
+        if (types.includes(name)) {
+          const str = fn(weightStyleUrl, family)
+          fontFileStrings.push(str)
+        }
+      })
+
+      fontFileString += fontFileStrings.join(',')
+
+      const props = recurseStringify({
+        fontFamily: `'${family}'`,
+        fontStyle,
+        fontWeight,
+        src: fontFileString,
+        ...rest,
+      })
+
+      const fontString = `${name} ${props}`
+
+      return fontString
+    })
+  })
+
+  return deep.flatten(fontStrings).join('\n')
+}
+
+export const fontFaces = ({ res, name, items }) => {
+  if (is.array(items)) {
+    const fontStrings = items.map(font => {
+      if (is.objectNative(font.styles)) {
+        return fontV2(name, font)
+      } else {
+        return fontV1(name, font)
+      }
+    })
+
+    return deep.flatten(fontStrings).join('\n')
+  } else {
+    const { fontFamily, fontDir = '', fontRoot, ...rest } = items
+    res = `${name} ${recurseStringify({ fontFamily: `'${fontFamily}'`, ...rest })}`
+
+    const eotString = `src: url('${fontDir}${fontFamily}.eot');`
+
+    const srcString = `${eotString} src: ${[
+      `url('${fontDir}${fontFamily}.eot#iefix') format('embedded-opentype')`,
+      `url('${fontDir}${fontFamily}.ttf') format('truetype')`,
+      `url('${fontDir}${fontFamily}.woff2') format('woff2')`,
+      `url('${fontDir}${fontFamily}.woff') format('woff')`,
+      `url('${fontDir}${fontFamily}.svg#${fontFamily}') format('svg');`,
+    ].join(', ')}`
+
+    return res.replace('}\n', `${srcString} }\n`)
+  }
+}

package/src/stringify/index.mjs

@@ -4,11 +4,34 @@ import autoprefixer from 'autoprefixer'
 import parse from '../parse/index.mjs'
 import recurseStringify from './recurseStringify.mjs'
 
+import { fontFaces } from './fontFaces.mjs'
+
+const keyframes = ({ name, items, plugins }) => `${name} { ${recurseStringify(items, plugins)} }\n`
+const mediaqueries = ({ name, items, plugins }) =>
+  `${name} { ${recurseStringify(items, plugins)} }\n`
+
+/*
+ * stringify the styles css object into a valid css string.
+ */
 const stringify = async (styles, opts = {}) => {
+  const { plugins = {} } = opts
+
+  plugins.stringify = {
+    '@font-face': fontFaces,
+    '@keyframes': keyframes,
+    '@media': mediaqueries,
+    ...plugins.stringify,
+  }
+
   const parsed = parse(styles, opts)
 
-  const stringified = recurseStringify(parsed)
+  const stringified = recurseStringify(parsed, plugins.stringify, opts)
+
+  /*
+   * test the resulting css using postcss and autoprefix vendors where needed.
+   */
   const result = await postcss([autoprefixer]).process(stringified, { from: undefined })
+
   result.warnings().forEach(warn => {
     console.warn(warn.toString())
   })

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,102 +2,27 @@ import is from '@magic/types'
 
 import stringifyProps from './props.mjs'
 
-export const fontFaces = ({ res, name, items }) => {
-  if (is.array(items)) {
-    const fontStrings = []
+export const recurseStringify = (res, plugins = [], opts = {}) => {
+  if (is.array(res)) {
+    const [name, items] = res
 
-    items.forEach(font => {
-      let { family, url, types = 'woff2', weights = 400, styles = 'normal', ...rest } = font
-
-      if (!url.endsWith('/')) {
-        url += '/'
-      }
-      if (!is.array(weights)) {
-        weights = [weights]
-      }
-      if (!is.array(styles)) {
-        styles = [styles]
-      }
-      if (!is.array(types)) {
-        types = [types]
-      }
-
-      weights.forEach(fontWeight => {
-        styles.forEach(fontStyle => {
-          const weightStyleUrl = `${url}${family}-${fontWeight}-${fontStyle}`
-
-          let fontString = `${name} ${recurseStringify({
-            fontFamily: `"${family}"`,
-            fontStyle,
-            fontWeight,
-            ...rest,
-          })}`
-
-          const fontFileTypes = {
-            eot: url =>
-              `src: url('${url}.eot'); src: url('${url}.eot#iefix') format('embedded-opentype')`,
-            ttf: url => `url('${url}.ttf') format('truetype')`,
-            woff: url => `url('${url}.woff') format('woff')`,
-            woff2: url => `url('${url}.woff2') format('woff2')`,
-            svg: url => `url('${url}.svg#${family}') format('svg')`,
-          }
-
-          let fontFileString = 'src:'
-          if (types.includes('eot')) {
-            fontFileString = ''
-          }
-
-          const fontFileStrings = []
-          Object.entries(fontFileTypes).map(([name, fn]) => {
-            if (types.includes(name)) {
-              const str = fn(weightStyleUrl)
-              fontFileStrings.push(str)
-            }
-          })
-
-          fontFileString += fontFileStrings.join(',') + ';'
-
-          fontString = fontString.replace('}\n', `${fontFileString} }\n`)
-          fontStrings.push(fontString)
-        })
+    if (is.string(name)) {
+      let result = ''
+      Object.entries(plugins).forEach(([lookup, fn]) => {
+        if (name.startsWith(lookup)) {
+          result = fn({ name, items, plugins })
+        }
       })
-    })
-
-    return fontStrings.join('\n')
-  } else {
-    const { fontFamily, fontDir = '', fontRoot, ...rest } = items
-    res = `${name} ${recurseStringify({ fontFamily: `"${fontFamily}"`, ...rest })}`
-
-    const eotString = `src: url('${fontDir}${fontFamily}.eot');`
-
-    const srcString = `${eotString} src: ${[
-      `url('${fontDir}${fontFamily}.eot#iefix') format('embedded-opentype')`,
-      `url('${fontDir}${fontFamily}.ttf') format('truetype')`,
-      `url('${fontDir}${fontFamily}.woff') format('woff')`,
-      `url('${fontDir}${fontFamily}.woff2') format('woff2')`,
-      `url('${fontDir}${fontFamily}.svg#${fontFamily}') format('svg');`,
-    ].join(', ')}`
 
-    return res.replace('}\n', `${srcString} }\n`)
-  }
-}
-
-export const recurseStringify = mod => {
-  let res = mod
-
-  if (is.array(mod)) {
-    const [name, items] = mod
-    if (is.string(name)) {
-      if (name.startsWith('@keyframes') || name.startsWith('@media')) {
-        return `${name} { ${recurseStringify(items)} }\n`
-      } else if (name.startsWith('@font-face')) {
-        return fontFaces({ res, name, items })
+      if (result) {
+        return result
       }
     }
 
-    return mod.map(recurseStringify).join(' ')
-  } else if (is.object(mod)) {
-    return `{ ${stringifyProps(mod)} }\n`
+    return res.map(r => recurseStringify(r, plugins, opts)).join(' ')
+  } else if (is.object(res)) {
+    const stringified = stringifyProps(res)
+    return `{ ${stringified} }\n`
   }
 
   return res