Fix prefixed selectors in objects

Closes #201
emotion-js · Jul 30, 2017 · f4946d1 · f4946d1
1 parent 5173549
commit f4946d1
Show file tree

Hide file tree

Showing 4 changed files with 152 additions and 5 deletions.
diff --git a/src/ast-object.js b/src/ast-object.js
@@ -20,13 +20,28 @@ function prefixAst (args, t) {
       // nested objects
       if (t.isObjectExpression(property.value)) {
         const key = property.computed
-          ? property.key
-          : t.isStringLiteral(property.key)
-            ? t.stringLiteral(property.key.value)
-            : t.identifier(property.key.name)
+        ? property.key
+        : t.isStringLiteral(property.key)
+          ? t.stringLiteral(property.key.value)
+          : t.identifier(property.key.name)
+
+        const prefixedPseudoSelectors = {
+          '::placeholder': ['::-webkit-input-placeholder', '::-moz-placeholder', ':-ms-input-placeholder'],
+          ':fullscreen': [':-webkit-full-screen', ':-moz-full-screen', ':-ms-fullscreen']
+        }
+
+        const prefixedValue = prefixAst(property.value, t)
+
+        if (!property.computed) {
+          if (prefixedPseudoSelectors[key.value]) {
+            forEach(prefixedPseudoSelectors[key.value], (prefixedKey) => {
+              properties.push(t.objectProperty(t.stringLiteral(prefixedKey), prefixedValue, false))
+            })
+          }
+        }
 
         return properties.push(
-          t.objectProperty(key, prefixAst(property.value, t), property.computed)
+          t.objectProperty(key, prefixedValue, property.computed)
         )
 
         // literal value or array of literal values

diff --git a/test/__snapshots__/react.test.js.snap b/test/__snapshots__/react.test.js.snap
@@ -356,6 +356,18 @@ exports[`styled input placeholder 1`] = `
 `;
 
 exports[`styled input placeholder object 1`] = `
+.glamor-1::-webkit-input-placeholder {
+  background-color: green;
+}
+
+.glamor-1::-moz-placeholder {
+  background-color: green;
+}
+
+.glamor-1:-ms-input-placeholder {
+  background-color: green;
+}
+
 .glamor-1::placeholder {
   background-color: green;
 }

diff --git a/test/babel/__snapshots__/css.test.js.snap b/test/babel/__snapshots__/css.test.js.snap
@@ -129,6 +129,86 @@ css({
 });"
 `;
 
+exports[`babel css inline ::placeholder 1`] = `
+"
+const cls1 = css({
+  '::-webkit-input-placeholder': {
+    'color': 'green',
+    'display': '-webkit-box; display: -ms-flexbox; display: flex'
+  },
+  '::-moz-placeholder': {
+    'color': 'green',
+    'display': '-webkit-box; display: -ms-flexbox; display: flex'
+  },
+  ':-ms-input-placeholder': {
+    'color': 'green',
+    'display': '-webkit-box; display: -ms-flexbox; display: flex'
+  },
+  '::placeholder': {
+    'color': 'green',
+    'display': '-webkit-box; display: -ms-flexbox; display: flex'
+  }
+});
+const cls2 = /*#__PURE__*/css([], [], function createEmotionStyledRules() {
+  return [{
+    '::-webkit-input-placeholder': {
+      'color': 'green',
+      'display': '-webkit-box; display: flex'
+    },
+    ':-ms-input-placeholder': {
+      'color': 'green',
+      'display': '-ms-flexbox; display: flex'
+    },
+    '::placeholder': {
+      'color': 'green',
+      'display': '-webkit-box; display: -ms-flexbox; display: flex'
+    }
+  }];
+});"
+`;
+
+exports[`babel css inline :fullscreen 1`] = `
+"
+const cls1 = css({
+  ':-webkit-full-screen': {
+    'color': 'green',
+    'display': '-webkit-box; display: -ms-flexbox; display: flex'
+  },
+  ':-moz-full-screen': {
+    'color': 'green',
+    'display': '-webkit-box; display: -ms-flexbox; display: flex'
+  },
+  ':-ms-fullscreen': {
+    'color': 'green',
+    'display': '-webkit-box; display: -ms-flexbox; display: flex'
+  },
+  ':fullscreen': {
+    'color': 'green',
+    'display': '-webkit-box; display: -ms-flexbox; display: flex'
+  }
+});
+const cls2 = /*#__PURE__*/css([], [], function createEmotionStyledRules() {
+  return [{
+    ':-webkit-full-screen': {
+      'color': 'green',
+      'display': '-webkit-box; display: flex'
+    },
+    ':-moz-full-screen': {
+      'color': 'green',
+      'display': 'flex'
+    },
+    ':-ms-fullscreen': {
+      'color': 'green',
+      'display': '-ms-flexbox; display: flex'
+    },
+    ':fullscreen': {
+      'color': 'green',
+      'display': '-webkit-box; display: -ms-flexbox; display: flex'
+    }
+  }];
+});"
+`;
+
 exports[`babel css inline array of objects 1`] = `
 "
 const cls2 = css([{

diff --git a/test/babel/css.test.js b/test/babel/css.test.js
@@ -85,6 +85,46 @@ describe('babel css', () => {
       expect(code).toMatchSnapshot()
     })
 
+    test('::placeholder', () => {
+      const basic = `
+        const cls1 = css({
+          '::placeholder': {
+            color: 'green',
+            display: 'flex'
+          }
+        })
+        const cls2 = css\`
+          ::placeholder {
+            color: green;
+            display: flex;
+          }
+        \`
+      `
+      const { code } = babel.transform(basic, {
+        plugins: [[plugin]]
+      })
+      expect(code).toMatchSnapshot()
+    })
+    test(':fullscreen', () => {
+      const basic = `
+      const cls1 = css({
+        ':fullscreen': {
+          color: 'green',
+          display: 'flex'
+        }
+      })
+      const cls2 = css\`
+        :fullscreen {
+          color: green;
+          display: flex;
+        }
+      \`
+    `
+      const { code } = babel.transform(basic, {
+        plugins: [[plugin]]
+      })
+      expect(code).toMatchSnapshot()
+    })
     test('only composes', () => {
       const basic = `
         const cls1 = css\`