Allow random expressions as long as they result in a className that begins with css

example/.babelrc

@@ -10,10 +10,11 @@
         }
       }
     ],
-    "stage-2",
+    "stage-0",
     "react"
   ],
   "plugins": [
-    ['emotion/babel']
+    ['emotion/babel'],
+    "transform-class-properties"
   ]
 }

example/package.json

@@ -16,6 +16,7 @@
     "babel-core": "^6.23.1",
     "babel-eslint": "^7.2.3",
     "babel-loader": "^7.1.1",
+    "babel-plugin-transform-class-properties": "^6.24.1",
     "babel-preset-env": "^1.6.0",
     "babel-preset-react": "^6.24.1",
     "babel-preset-stage-0": "^6.24.1",

example/src/main.js

@@ -57,14 +57,23 @@ const theme = {
   gold: '#ffd43b'
 }
 
+const margin = (t, r, b, l) => {
+  return () => css`
+    margin-top: ${t}
+    margin-right: ${r}
+    margin-bottom: ${b}
+    margin-left: ${l}
+  `
+}
+
 const PlaygroundWrapper = styled('div')`
   font-family: 'Oxygen', sans-serif;
   flex:1;
   color: #343a40;
   background: #f8f9fa;
 
   & .inner {
-    margin: 0 auto;
+    ${margin(0, 'auto', 0, 'auto')};
     width: calc(100% - 32px);
     max-width: 960px;
 

example/webpack.config.js

@@ -8,7 +8,7 @@ module.exports = env => {
   var loaders = [
     {
       test: /\.jsx?$/,
-      include: [/src/, /autoprefixer/, /chalk/, /ansi-styles/, /postcss-nested/],
+      include: [/src/, /autoprefixer/, /chalk/, /ansi-styles/, /postcss-nested/, /caniuse-lite/],
       loader: 'babel-loader'
     },
     {
@@ -63,7 +63,8 @@ module.exports = env => {
       publicPath: '/'
     },
     resolve: {
-      extensions: ['.ts', '.tsx', '.js', '.jsx']
+      extensions: ['.ts', '.tsx', '.js', '.jsx'],
+      symlinks: false
     },
     plugins: [
       new HtmlWebpackPlugin({

src/index.js

@@ -234,18 +234,25 @@ function deconstruct (style) {
   let selects
   let medias
   let supports
+
   forEach(keys(style), key => {
     if (key.indexOf('&') >= 0) {
       selects = selects || {}
-      selects[key] = style[key]
+      selects[key] = deconstruct(style[key]).plain
     } else if (key.indexOf('@media') === 0) {
       medias = medias || {}
       medias[key] = deconstruct(style[key])
     } else if (key.indexOf('@supports') === 0) {
       supports = supports || {}
       supports[key] = deconstruct(style[key])
+    } else if (key.indexOf('css-') === 0) {
+      // replace fragments
+      plain = plain || {}
+      const registeredStyles = registered[key.split('css-')[1]].style
+      assign(plain, registeredStyles)
     } else {
       plain = plain || {}
+
       plain[key] = style[key]
     }
   })
@@ -361,12 +368,24 @@ function flatten (inArr) {
 }
 
 // mutable! modifies dest.
-function build (dest, { selector = '', mq = '', supp = '', src = {} }) {
+function build (
+  dest,
+  {
+    selector = '',
+    mq = '',
+    supp = '',
+    src = [{}]
+  }: {
+    selector?: string,
+    mq?: string,
+    supp?: string,
+    src: Array<{ [string]: any }>
+  }
+) {
   if (!Array.isArray(src)) {
     src = [src]
   }
   src = flatten(src)
-
   forEach(src, _src => {
     if (isLikeRule(_src)) {
       let reg = _getRegistered(_src)
@@ -379,7 +398,12 @@ function build (dest, { selector = '', mq = '', supp = '', src = {} }) {
     if (_src && _src.composes) {
       build(dest, { selector, mq, supp, src: _src.composes })
     }
+
     forEach(keys(_src || {}), key => {
+      if (key === 'undefined') {
+        // drop undefined fragment results
+        return
+      }
       if (isSelector(key)) {
         build(dest, {
           selector: joinSelectors(selector, key),
@@ -424,7 +448,7 @@ function build (dest, { selector = '', mq = '', supp = '', src = {} }) {
   })
 }
 
-let nullrule: EmotionClassName = {
+let nullrule: EmotionRule = {
   // 'data-css-nil': ''
 }
 

src/parser.js

@@ -1,5 +1,7 @@
 // @flow
-import parse from 'postcss-safe-parser'
+import Input from 'postcss/lib/input'
+import Declaration from 'postcss/lib/declaration'
+import SafeParser from 'postcss-safe-parser/lib/safe-parser'
 import postcssNested from 'postcss-nested'
 import postcssJs from 'postcss-js'
 import objParse from 'postcss-js/parser'
@@ -8,12 +10,6 @@ import { processStyleName } from './glamor/CSSPropertyOperations'
 
 export const prefixer = postcssJs.sync([autoprefixer, postcssNested])
 
-type Rule = {
-  parent: { selector: string, nodes: Array<mixed> },
-  selector: string,
-  remove: () => {}
-}
-
 type Decl = {
   parent: { selector: string, nodes: Array<mixed> },
   prop: string,
@@ -35,7 +31,7 @@ export function parseCSS (
   if (typeof css === 'object') {
     root = objParse(css, { from: filename })
   } else {
-    root = parse(css, { from: filename })
+    root = safeParse(css, { from: filename })
   }
   let vars = 0
   let composes: number = 0
@@ -89,3 +85,31 @@ export function expandCSSFallbacks (style: { [string]: any }) {
   // flatten arrays which haven't been flattened yet
   return flattened
 }
+
+// Parser
+export function safeParse (css, opts) {
+  let input = new Input(css, opts)
+
+  let parser = new EmotionSafeParser(input)
+  parser.parse()
+
+  return parser.root
+}
+
+export class EmotionSafeParser extends SafeParser {
+  unknownWord (tokens: Array<Array<any>>) {
+    if (tokens[0][0] === 'word') {
+      if (/xxx(\d+)xxx/gm.exec(tokens[0][1])) {
+        this.init(
+          new Declaration(
+            { prop: tokens[0][1], value: 'fragment' },
+            tokens[0][2],
+            tokens[0][3]
+          )
+        )
+        return
+      }
+    }
+    this.spaces += tokens.map(i => i[1]).join('')
+  }
+}

test/__snapshots__/css.test.js.snap

@@ -222,3 +222,23 @@ exports[`css null rule 1`] = `
   className="css-nil"
 />
 `;
+
+exports[`css random expression 1`] = `
+.glamor-0 {
+  font-size: 20px;
+  background: green;
+}
+
+@media (min-width: 420px) {
+  .glamor-0 {
+    color: blue;
+    width: 96px;
+    height: 96px;
+    line-height: 40px;
+  }
+}
+
+<div
+  className="glamor-0"
+/>
+`;

test/__snapshots__/react.test.js.snap

@@ -485,6 +485,36 @@ exports[`styled objects with spread properties 1`] = `
 </figure>
 `;
 
+exports[`styled random expressions 1`] = `
+.glamor-1 {
+  font-size: 1rem;
+  margin-top: 0px;
+  margin-right: auto;
+  margin-bottom: 0px;
+  margin-left: auto;
+  color: green;
+}
+
+<h1
+  className="glamor-0 legacy__class glamor-1"
+  prop={true}
+>
+  hello world
+</h1>
+`;
+
+exports[`styled random expressions undefined return 1`] = `
+.glamor-1 {
+  color: green;
+}
+
+<h1
+  className="glamor-0 legacy__class glamor-1"
+>
+  hello world
+</h1>
+`;
+
 exports[`styled themes 1`] = `
 .glamor-1 {
   background-color: #ffd43b;

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

@@ -246,15 +246,37 @@ const cls2 = /*#__PURE__*/css(['one-class', 'another-class', cls1], ['center'],
 exports[`babel css inline css basic 1`] = `
 "
 /*#__PURE__*/css([], [widthVar], function createEmotionStyledRules(x0) {
-        return [{
-                \\"margin\\": \\"12px 48px\\",
-                \\"color\\": \\"#ffffff; color: blue\\",
-                \\"display\\": \\"-webkit-box; display: -ms-flexbox; display: flex\\",
-                \\"WebkitBoxFlex\\": \\"1\\",
-                \\"msFlex\\": \\"1 0 auto\\",
-                \\"flex\\": \\"1 0 auto\\",
-                \\"width\\": \`\${x0}\`
-        }];
+  return [{
+    \\"margin\\": \\"12px 48px\\",
+    \\"color\\": \\"#ffffff; color: blue\\",
+    \\"display\\": \\"-webkit-box; display: -ms-flexbox; display: flex\\",
+    \\"WebkitBoxFlex\\": \\"1\\",
+    \\"msFlex\\": \\"1 0 auto\\",
+    \\"flex\\": \\"1 0 auto\\",
+    \\"@media (min-width: 420px)\\": {
+      \\"lineHeight\\": \\"40px\\"
+    },
+    \\"width\\": \`\${x0}\`
+  }];
+});"
+`;
+
+exports[`babel css inline css random expression 1`] = `
+"/*#__PURE__*/css([], [/*#__PURE__*/css([], [], function createEmotionStyledRules() {
+  return [{
+    \\"width\\": \\"96px\\",
+    \\"height\\": \\"96px\\"
+  }];
+})], function createEmotionStyledRules(x0) {
+  return [{
+    \\"fontSize\\": \\"20px\\",
+    \\"@media (min-width: 420px)\\": {
+      \\"color\\": \\"blue\\",
+      [\`\${x0}\`]: \\"fragment\\",
+      \\"lineHeight\\": \\"26px\\"
+    },
+    \\"background\\": \\"green\\"
+  }];
 });"
 `;
 

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

@@ -217,6 +217,29 @@ const H1 = styled('h1', 'css-13vphhj0', [{
 }]);"
 `;
 
+exports[`babel styled component inline random expressions 1`] = `
+"
+const a = () => /*#__PURE__*/css([], [], function createEmotionStyledRules() {
+  return [{
+    \\"fontSize\\": \\"1rem\\"
+  }];
+});
+/*#__PURE__*/styled(\\"h1\\", \\"css-1ep7oc10\\", [], [/*#__PURE__*/css([], [], function createEmotionStyledRules() {
+  return [{
+    \\"fontSize\\": \\"32px\\"
+  }];
+}), props => props.prop && a()], function createEmotionStyledRules(x0, x1) {
+  return [{
+    \\"margin\\": \\"12px 48px\\",
+    [\`\${x0}\`]: \\"fragment\\",
+    \\"color\\": \\"#ffffff\\",
+    \\"& .profile\\": {
+      [\`\${x1}\`]: \\"fragment\\"
+    }
+  }];
+});"
+`;
+
 exports[`babel styled component inline shorthand property 1`] = `
 "const H1 = styled(\\"h1\\", \\"css-1o8pmqr0\\", [{
   \\"fontSize\\": \`\${fontSize}\`

test/babel/css.test.js

@@ -16,6 +16,9 @@ describe('babel css', () => {
         display: flex;
         flex: 1 0 auto;
         color: blue;
+        @media(min-width: 420px) {
+          line-height: 40px;
+        }
         width: \${widthVar};
       \``
       const { code } = babel.transform(basic, {
@@ -24,6 +27,23 @@ describe('babel css', () => {
       expect(code).toMatchSnapshot()
     })
 
+    test('css random expression', () => {
+      const basic = `css\`
+        font-size: 20px;
+        @media(min-width: 420px) {
+          color: blue;
+          \${css\`width: 96px; height: 96px;\`};
+          line-height: 26px;
+        }
+        background: green;
+      \`
+      `
+      const { code } = babel.transform(basic, {
+        plugins: [[plugin]]
+      })
+      expect(code).toMatchSnapshot()
+    })
+
     test('nested expanded properties', () => {
       const basic = `
         css\`