Pass filename to PostCSS correctly

src/ast-object.js

@@ -1,7 +1,10 @@
+import postcssJs from 'postcss-js'
+import Input from 'postcss/lib/input'
 import { expandCSSFallbacks, prefixer } from './parser'
 import { forEach, reduce } from './utils'
+import { getFilename } from './babel'
 
-function prefixAst(args, t) {
+function prefixAst(args, t, path) {
   function isLiteral(value) {
     return (
       t.isStringLiteral(value) ||
@@ -11,7 +14,7 @@ function prefixAst(args, t) {
   }
 
   if (Array.isArray(args)) {
-    return args.map(element => prefixAst(element, t))
+    return args.map(element => prefixAst(element, t, path))
   }
 
   if (t.isObjectExpression(args)) {
@@ -38,7 +41,7 @@ function prefixAst(args, t) {
           ]
         }
 
-        const prefixedValue = prefixAst(property.value, t)
+        const prefixedValue = prefixAst(property.value, t, path)
 
         if (!property.computed) {
           if (prefixedPseudoSelectors[key.value]) {
@@ -75,7 +78,12 @@ function prefixAst(args, t) {
           : property.value.value
 
         const style = { [property.key.name]: propertyValue }
-        const prefixedStyle = expandCSSFallbacks(prefixer(style))
+        const parsedStyle = postcssJs.parse(style)
+        parsedStyle.source = {}
+        parsedStyle.source.input = new Input(parsedStyle.toString(), {
+          from: getFilename(path)
+        })
+        const prefixedStyle = expandCSSFallbacks(prefixer(parsedStyle))
 
         for (let k in prefixedStyle) {
           const key = t.isStringLiteral(property.key)
@@ -105,7 +113,7 @@ function prefixAst(args, t) {
   }
 
   if (t.isArrayExpression(args)) {
-    return t.arrayExpression(prefixAst(args.elements, t))
+    return t.arrayExpression(prefixAst(args.elements, t, path))
   }
 
   return args
@@ -288,7 +296,7 @@ export default class ASTObject {
     return new ASTObject(props, [], composesCount, t)
   }
 
-  static fromAST(astObj, t) {
+  static fromAST(astObj, t, path) {
     function isLiteral(value) {
       return (
         t.isStringLiteral(value) ||
@@ -376,7 +384,7 @@ export default class ASTObject {
       return props
     }
 
-    const objectProperties = convertAstToObj(prefixAst(astObj, t))
+    const objectProperties = convertAstToObj(prefixAst(astObj, t, path))
     return new ASTObject(
       objectProperties,
       expressions,

src/babel.js

@@ -16,7 +16,7 @@ import { hashArray } from './hash'
 import cssProps from './css-prop'
 import ASTObject from './ast-object'
 
-function getFilename(path) {
+export function getFilename(path) {
   return path.hub.file.opts.filename === 'unknown'
     ? ''
     : path.hub.file.opts.filename
@@ -203,7 +203,7 @@ export function buildStyledObjectCallExpression(path, state, identifier, t) {
 
 function buildProcessedStylesFromObjectAST(objectAST, path, t) {
   if (t.isObjectExpression(objectAST)) {
-    return ASTObject.fromAST(objectAST, t).toAST()
+    return ASTObject.fromAST(objectAST, t, path).toAST()
   }
   if (t.isArrayExpression(objectAST)) {
     return t.arrayExpression(

src/parser.js

@@ -55,7 +55,7 @@ export function parseCSS(
     }
   })
 
-  const styles = expandCSSFallbacks(prefixer(postcssJs.objectify(root)))
+  const styles = expandCSSFallbacks(prefixer(root))
 
   return {
     styles,

test/__snapshots__/css.test.js.snap

@@ -17,8 +17,6 @@ exports[`css composes 1`] = `
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
-  -webkit-box-pack: center;
-  -ms-flex-pack: center;
   justify-content: center;
 }
 
@@ -35,8 +33,6 @@ exports[`css composes with objects 1`] = `
   display: block;
   width: 30px;
   height: calc(40vw - 50px);
-  -webkit-box-pack: center;
-  -ms-flex-pack: center;
   justify-content: center;
 }
 
@@ -62,8 +58,6 @@ exports[`css composes with objects 1`] = `
 
 exports[`css composes with undefined values 1`] = `
 .glamor-0 {
-  -webkit-box-pack: center;
-  -ms-flex-pack: center;
   justify-content: center;
 }
 

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

@@ -58,8 +58,6 @@ const cls1 = css({
 const cls2 = /*#__PURE__*/css([cls1], [], function createEmotionStyledRules() {
   return [{
     'height': '20',
-    'WebkitBoxPack': 'center',
-    'msFlexPack': 'center',
     'justifyContent': 'center'
   }];
 });"

test/babel/css-prop.test.js

@@ -5,6 +5,7 @@ import * as fs from 'fs'
 jest.mock('fs')
 
 fs.existsSync.mockReturnValue(true)
+fs.statSync.mockReturnValue({ isFile: () => false })
 
 describe('babel css prop', () => {
   test('basic with extractStatic', () => {

test/babel/css.test.js

@@ -4,6 +4,7 @@ import * as fs from 'fs'
 jest.mock('fs')
 
 fs.existsSync.mockReturnValue(true)
+fs.statSync.mockReturnValue({ isFile: () => false })
 
 describe('babel css', () => {
   describe('inline', () => {

test/babel/font-face.test.js

@@ -4,6 +4,7 @@ import * as fs from 'fs'
 jest.mock('fs')
 
 fs.existsSync.mockReturnValue(true)
+fs.statSync.mockReturnValue({ isFile: () => false })
 
 describe('fontFace babel', () => {
   describe('inline', () => {

test/babel/fs.test.js

@@ -4,6 +4,7 @@ import touch from 'touch'
 import emotionPlugin from '../../src/babel'
 
 jest.mock('fs').mock('touch')
+fs.statSync.mockReturnValue({ isFile: () => false })
 
 const basic = `
 css\`

test/babel/inject-global.test.js

@@ -4,6 +4,7 @@ import * as fs from 'fs'
 jest.mock('fs')
 
 fs.existsSync.mockReturnValue(true)
+fs.statSync.mockReturnValue({ isFile: () => false })
 
 describe('babel injectGlobal', () => {
   describe('inline', () => {

test/babel/keyframes.test.js

@@ -4,6 +4,7 @@ import * as fs from 'fs'
 jest.mock('fs')
 
 fs.existsSync.mockReturnValue(true)
+fs.statSync.mockReturnValue({ isFile: () => false })
 
 describe('babel keyframes', () => {
   describe('inline', () => {

test/babel/styled.test.js

@@ -5,6 +5,7 @@ import * as fs from 'fs'
 jest.mock('fs')
 
 fs.existsSync.mockReturnValue(true)
+fs.statSync.mockReturnValue({ isFile: () => false })
 
 describe('babel styled component', () => {
   describe('inline', () => {

test/browserslist/__snapshots__/babel.test.js.snap

@@ -4,7 +4,14 @@ exports[`babel css inline css basic 1`] = `
 "
 /*#__PURE__*/css([], [], function createEmotionStyledRules() {
         return [{
-                \\"display\\": \\"-webkit-box; display: -ms-flexbox; display: flex\\"
+                \\"display\\": \\"flex\\"
         }];
 });"
 `;
+
+exports[`babel css inline css object 1`] = `
+"
+css({
+  'display': 'flex'
+});"
+`;

test/browserslist/__snapshots__/css.test.js.snap

@@ -2,8 +2,18 @@
 
 exports[`prefixing css 1`] = `
 .glamor-0 {
-  display: -webkit-box;
-  display: -ms-flexbox;
+  display: flex;
+}
+
+<div
+  className="glamor-0"
+>
+  hello world
+</div>
+`;
+
+exports[`prefixing object 1`] = `
+.glamor-0 {
   display: flex;
 }
 
@@ -16,8 +26,6 @@ exports[`prefixing css 1`] = `
 
 exports[`prefixing styled 1`] = `
 .glamor-1 {
-  display: -webkit-box;
-  display: -ms-flexbox;
   display: flex;
 }
 

test/browserslist/babel.test.js

@@ -15,5 +15,17 @@ describe('babel css', () => {
       })
       expect(code).toMatchSnapshot()
     })
+    test('css object', () => {
+      const basic = `
+        css({
+          display: 'flex'
+        })`
+      const { code } = babel.transform(basic, {
+        plugins: [[plugin]],
+        filename: __filename,
+        babelrc: false
+      })
+      expect(code).toMatchSnapshot()
+    })
   })
 })

test/browserslist/css.test.js

@@ -23,4 +23,14 @@ describe('prefixing', () => {
 
     expect(tree).toMatchSnapshot()
   })
+  test('object', () => {
+    const cls1 = css({
+      display: 'flex'
+    })
+    const tree = renderer
+      .create(<div className={cls1}>hello world</div>)
+      .toJSON()
+
+    expect(tree).toMatchSnapshot()
+  })
 })

test/macro/__snapshots__/css.test.js.snap

@@ -5,8 +5,6 @@ exports[`css macro composes 1`] = `
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
-  -webkit-box-pack: center;
-  -ms-flex-pack: center;
   justify-content: center;
 }
 
@@ -23,8 +21,6 @@ exports[`css macro composes with objects 1`] = `
   display: block;
   width: 30px;
   height: calc(40vw - 50px);
-  -webkit-box-pack: center;
-  -ms-flex-pack: center;
   justify-content: center;
 }
 
@@ -50,8 +46,6 @@ exports[`css macro composes with objects 1`] = `
 
 exports[`css macro composes with undefined values 1`] = `
 .glamor-0 {
-  -webkit-box-pack: center;
-  -ms-flex-pack: center;
   justify-content: center;
 }