Prefix css objects (#101)

* Prefix css objects

* Fix tests

* Handle expressions

* Use postcss and autoprefixer

* Update doc

Author: nishp1

docs/objects.md

@@ -2,7 +2,8 @@
 
 `css` can also take an object or an array of objects as a parameter.
 This allows you to use your existing object styles in the emotion ecosystem.
-Another great benefit is that you can now use [polished](https://polished.js.org/) with emotion!
+
+Another great benefit is that you can now use [polished](https://polished.js.org/) with emotion and styles are prefixed automatically at build time via [postcss](https://github.com/postcss/postcss-js) and [autoprefixer](https://github.com/postcss/autoprefixer/)!
 
 `styled` can also take objects or functions that return objects as parameters.
 

package.json

@@ -29,10 +29,12 @@
     "format": "prettier-eslint --write \"src/**/*.js\" \"test/**/*.js\" \"example/**/*.js\" \"jest-utils/**/*.js\""
   },
   "dependencies": {
+    "autoprefixer": "^7.1.2",
     "@arr/filter.mutate": "^1.0.0",
     "@arr/foreach": "^1.0.0",
     "@arr/map": "^1.0.0",
     "babel-plugin-syntax-jsx": "^6.18.0",
+    "postcss-js": "^1.0.0",
     "styled-components": "2.0.0",
     "theming": "^1.0.1",
     "touch": "^1.0.0"

src/babel.js

@@ -1,6 +1,8 @@
 import fs from 'fs'
 import { basename } from 'path'
 import { touchSync } from 'touch'
+import postcssJs from 'postcss-js'
+import autoprefixer from 'autoprefixer'
 import { inline, keyframes, fontFace, injectGlobal } from './inline'
 import cssProps from './css-prop'
 import createAttrExpression from './attrs'
@@ -102,8 +104,84 @@ function parseDynamicValues (rules, t, options) {
   })
 }
 
+const visited = Symbol('visited')
+
 export default function (babel) {
   const { types: t } = babel
+  const prefixer = postcssJs.sync([autoprefixer])
+
+  function isLiteral (value) {
+    return (
+      t.isStringLiteral(value) ||
+      t.isNumericLiteral(value) ||
+      t.isBooleanLiteral(value)
+    )
+  }
+
+  function prefixAst (args) {
+    if (Array.isArray(args)) {
+      return args.map(element => prefixAst(element))
+    }
+
+    if (t.isObjectExpression(args)) {
+      let properties = []
+      args.properties.forEach(property => {
+        // nested objects
+        if (t.isObjectExpression(property.value)) {
+          const key = t.isStringLiteral(property.key)
+            ? t.stringLiteral(property.key.value)
+            : t.identifier(property.key.name)
+          return properties.push(
+            t.objectProperty(key, prefixAst(property.value))
+          )
+
+          // literal value or array of literal values
+        } else if (
+          isLiteral(property.value) ||
+          (t.isArrayExpression(property.value) &&
+            property.value.elements.every(isLiteral))
+        ) {
+          // handle array values: { display: ['flex', 'block'] }
+          const propertyValue = t.isArrayExpression(property.value)
+            ? property.value.elements.map(element => element.value)
+            : property.value.value
+
+          const style = { [property.key.name]: propertyValue }
+          const prefixedStyle = prefixer(style)
+
+          for (var k in prefixedStyle) {
+            const key = t.isStringLiteral(property.key)
+              ? t.stringLiteral(k)
+              : t.identifier(k)
+            const val = prefixedStyle[k]
+            let value
+
+            if (typeof val === 'number') {
+              value = t.numericLiteral(val)
+            } else if (typeof val === 'string') {
+              value = t.stringLiteral(val)
+            } else if (Array.isArray(val)) {
+              value = t.arrayExpression(val.map(i => t.stringLiteral(i)))
+            }
+
+            properties.push(t.objectProperty(key, value))
+          }
+
+          // expressions
+        } else {
+          properties.push(property)
+        }
+      })
+
+      return t.objectExpression(properties)
+    }
+
+    if (t.isArrayExpression(args)) {
+      return t.arrayExpression(prefixAst(args.elements))
+    }
+
+    return args
+  }
 
   return {
     name: 'emotion', // not required
@@ -147,6 +225,9 @@ export default function (babel) {
         cssProps(path, t)
       },
       CallExpression (path) {
+        if (path[visited]) {
+          return
+        }
         if (
           (t.isCallExpression(path.node.callee) &&
             path.node.callee.callee.name === 'styled') ||
@@ -160,11 +241,17 @@ export default function (babel) {
           path.replaceWith(
             t.callExpression(t.identifier('styled'), [
               tag,
-              t.arrayExpression(path.node.arguments),
+              t.arrayExpression(prefixAst(path.node.arguments)),
               t.arrayExpression()
             ])
           )
         }
+
+        if (t.isCallExpression(path.node) && path.node.callee.name === 'css') {
+          const prefixedAst = prefixAst(path.node.arguments)
+          path.replaceWith(t.callExpression(t.identifier('css'), prefixedAst))
+        }
+        path[visited] = true
       },
       TaggedTemplateExpression (path, state) {
         // in:

test/__snapshots__/css.test.js.snap

@@ -22,9 +22,9 @@ exports[`css composes 3`] = `
       justify-content: center; }.css-cls1-vyoujf-va5xsk { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; }"
 `;
 
-exports[`css composes with objects 1`] = `"css-q8izmm"`;
+exports[`css composes with objects 1`] = `"css-1puxias"`;
 
-exports[`css composes with objects 2`] = `"css-cls2-1qb2ovg-1em6aur css-cls2-1qb2ovg css-q8izmm"`;
+exports[`css composes with objects 2`] = `"css-cls2-1qb2ovg-1em6aur css-cls2-1qb2ovg css-1puxias"`;
 
 exports[`css composes with objects 3`] = `
 ".css-cls1-1gi569l-b877w5 { background: white;
@@ -41,7 +41,7 @@ exports[`css composes with objects 3`] = `
       -webkit-justify-content: center;
       -ms-flex-pack: center;
       -webkit-box-pack: center;
-      justify-content: center; }.css-cls1-vyoujf-va5xsk { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; }.css-1fe3owl{display:flex}.css-q8izmm{display:flex;display:block;width:30px;height:calc(40vw - 50px)}.css-q8izmm:hover{color:blue}.css-q8izmm:after{content:\\" \\";color:red}@media(min-width: 420px){.css-q8izmm{color:green}}"
+      justify-content: center; }.css-cls1-vyoujf-va5xsk { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; }.css-xmm9em{display:-webkit-box;display:-ms-flexbox;display:flex}.css-1puxias{display:-webkit-box;display:-ms-flexbox;display:flex;display:block;width:30px;height:calc(40vw - 50px)}.css-1puxias:hover{color:blue}.css-1puxias:after{content:\\" \\";color:red}@media(min-width: 420px){.css-1puxias{color:green}}"
 `;
 
 exports[`css composes with undefined values 1`] = `"css-cls2-1qb2ovg-1em6aur css-cls2-1qb2ovg css-15famh2"`;
@@ -80,4 +80,4 @@ exports[`css handles more than 10 dynamic properties 2`] = `
       border: solid 1px red; }"
 `;
 
-exports[`css handles objects 1`] = `"css-1fe3owl"`;
+exports[`css handles objects 1`] = `"css-xmm9em"`;

test/__snapshots__/react.test.js.snap

@@ -50,28 +50,28 @@ exports[`styled call expression 1`] = `
 `;
 
 exports[`styled component as selector 1`] = `
-.css-H1-rs9k70-qz486c {
-  font-size: 20px;
-}
-
-.css-Thing-1kdnbhf-d995d2 {
+.css-Thing-1kdnbhf-19sb43k {
   display: -webkit-box;
   display: -moz-box;
   display: -ms-flexbox;
   display: -webkit-flex;
   display: flex;
 }
 
-.css-Thing-1kdnbhf-d995d2 .css-H1-rs9k70 {
+.css-Thing-1kdnbhf-19sb43k .css-H1-1t8i2zo {
   color: green;
 }
 
+.css-H1-1t8i2zo-1c6u60b {
+  font-size: 20px;
+}
+
 <div
-  className="css-Thing-1kdnbhf-d995d2 css-Thing-1kdnbhf"
+  className="css-Thing-1kdnbhf-19sb43k css-Thing-1kdnbhf"
 >
   hello 
   <h1
-    className="css-H1-rs9k70-qz486c css-H1-rs9k70"
+    className="css-H1-1t8i2zo-1c6u60b css-H1-1t8i2zo"
   >
     This will be green
   </h1>
@@ -258,7 +258,7 @@ exports[`styled no dynamic 1`] = `
 `;
 
 exports[`styled objects 1`] = `
-.css-1x9ygd3 {
+.css-1viuxsa {
   padding: 10px;
 }
 
@@ -267,7 +267,7 @@ exports[`styled objects 1`] = `
 }
 
 <h1
-  className="some-class css-1x9ygd3 css-1fe3owl"
+  className="some-class css-1viuxsa css-1fe3owl"
   display="flex"
 >
   hello world

test/babel/__snapshots__/css.test.js.snap

@@ -1,6 +1,10 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`babel css extract basic object support 1`] = `"css({ display: 'flex' });"`;
+exports[`babel css extract basic object support 1`] = `
+"css({
+  display: ['-webkit-box', '-ms-flexbox', 'flex']
+});"
+`;
 
 exports[`babel css extract composes 1`] = `
 "import './css.test.emotion.css';
@@ -45,7 +49,9 @@ exports[`babel css extract composes no dynamic 2`] = `
 exports[`babel css extract composes with objects 1`] = `
 "import './css.test.emotion.css';
 
-const cls1 = css({ display: 'flex' });
+const cls1 = css({
+  display: ['-webkit-box', '-ms-flexbox', 'flex']
+});
 const cls2 = \`\${'css-cls2-k8jueb'} \${cls1}\`;"
 `;
 
@@ -87,6 +93,39 @@ const cls2 = css([\\"css-cls2-16o34vq\\"], [className], function createEmotionRu
 });"
 `;
 
+exports[`babel css extract prefixed array of objects 1`] = `
+"
+css([{
+  borderRadius: '50%',
+  WebkitBoxSizing: 'border-box',
+  boxSizing: 'border-box',
+  display: ['-webkit-box', '-ms-flexbox', 'flex'],
+  ':hover': {
+    WebkitTransform: 'scale(1.2)',
+    transform: 'scale(1.2)'
+  }
+}, {
+  WebkitTransition: '-webkit-transform 400ms ease-in-out',
+  transition: ['-webkit-transform 400ms ease-in-out', 'transform 400ms ease-in-out', 'transform 400ms ease-in-out, -webkit-transform 400ms ease-in-out']
+}]);"
+`;
+
+exports[`babel css extract prefixed objects 1`] = `
+"
+css({
+    borderRadius: '50%',
+    WebkitTransition: '-webkit-transform 400ms ease-in-out',
+    transition: ['-webkit-transform 400ms ease-in-out', 'transform 400ms ease-in-out', 'transform 400ms ease-in-out, -webkit-transform 400ms ease-in-out'],
+    WebkitBoxSizing: 'border-box',
+    boxSizing: 'border-box',
+    display: ['-webkit-box', '-ms-flexbox', 'flex'],
+    ':hover': {
+        WebkitTransform: 'scale(1.2)',
+        transform: 'scale(1.2)'
+    }
+});"
+`;
+
 exports[`babel css inline composes 1`] = `
 "
 const cls1 = css(['css-cls1-1q8jsgx'], [], function createEmotionRules() {

test/babel/__snapshots__/styled.test.js.snap

@@ -224,15 +224,35 @@ const H1 = styled('h1', ['some-class', props => ({
 
 exports[`babel styled component inline objects based on props 1`] = `
 "
-const H1 = styled('h1', [{ padding: 10 }, props => ({
+const H1 = styled('h1', [{
+  padding: '10px'
+}, props => ({
   display: props.display
 })], []);"
 `;
 
 exports[`babel styled component inline objects fn call 1`] = `
 "
 const H1 = styled('h1', [{
-  display: 'flex'
+  display: ['-webkit-box', '-ms-flexbox', 'flex']
+}], []);"
+`;
+
+exports[`babel styled component inline objects prefixed 1`] = `
+"
+const H1 = styled('h1', [{
+  borderRadius: '50%',
+  WebkitTransition: '-webkit-transform 400ms ease-in-out',
+  transition: ['-webkit-transform 400ms ease-in-out', 'transform 400ms ease-in-out', 'transform 400ms ease-in-out, -webkit-transform 400ms ease-in-out'],
+  WebkitBoxSizing: 'border-box',
+  boxSizing: 'border-box',
+  display: ['-webkit-box', '-ms-flexbox', 'flex'],
+  ':hover': {
+    WebkitTransform: 'scale(1.2)',
+    transform: 'scale(1.2)'
+  }
+}, props => {
+  padding: props.padding;
 }], []);"
 `;
 
@@ -246,7 +266,27 @@ styled(\\"h1\\", [\\"css-byjn67\\"], [SomeComponent], function createEmotionStyl
 
 exports[`babel styled component inline styled. objects 1`] = `
 "
-const H1 = styled(\\"h1\\", [{ padding: 10 }, props => ({
+const H1 = styled(\\"h1\\", [{
+  padding: \\"10px\\"
+}, props => ({
+  display: props.display
+})], []);"
+`;
+
+exports[`babel styled component inline styled. objects prefixed 1`] = `
+"
+const H1 = styled('h1', [{
+  borderRadius: '50%',
+  WebkitTransition: '-webkit-transform 400ms ease-in-out',
+  transition: ['-webkit-transform 400ms ease-in-out', 'transform 400ms ease-in-out', 'transform 400ms ease-in-out, -webkit-transform 400ms ease-in-out'],
+  WebkitBoxSizing: 'border-box',
+  boxSizing: 'border-box',
+  display: ['-webkit-box', '-ms-flexbox', 'flex'],
+  ':hover': {
+    WebkitTransform: 'scale(1.2)',
+    transform: 'scale(1.2)'
+  }
+}, props => ({
   display: props.display
 })], []);"
 `;