fix css props when using babel macro with babel-plugin-styled-compone…

…nts 1.10.1 (#2633)

* fix macro on create-react-app

* add tests

* changelog entry

* fix linting error

CHANGELOG.md

@@ -6,6 +6,8 @@ _The format is based on [Keep a Changelog](http://keepachangelog.com/) and this
 
 ## Unreleased
 
+- Fix usage of the "css" prop with the styled-components babel macro (relevant to CRA 2.x users), by [@jamesknelson](http://github.com/jamesknelson) (see [#2633](https://github.com/styled-components/styled-components/issues/2633))
+
 ## [v4.3.1] - 2019-06-06
 
 - Revert #2586; breaks rehydration in dev for certain runtimes like next.js

packages/styled-components/flow-typed/npm/@babel/traverse_vx.x.x.js

@@ -0,0 +1,200 @@
+// flow-typed signature: 19806a68384fc871676f69ecf42553d0
+// flow-typed version: <<STUB>>/@babel/traverse_v7.2.3
+
+/**
+ * This is an autogenerated libdef stub for:
+ *
+ *   '@babel/traverse'
+ *
+ * Fill this stub out by replacing all the `any` types.
+ *
+ * Once filled out, we encourage you to share your work with the
+ * community by sending a pull request to:
+ * https://github.com/flowtype/flow-typed
+ */
+
+declare module '@babel/traverse' {
+  declare module.exports: any;
+}
+
+/**
+ * We include stubs for each file inside this npm package in case you need to
+ * require those files directly. Feel free to delete any files that aren't
+ * needed.
+ */
+declare module '@babel/traverse/lib/cache' {
+  declare module.exports: any;
+}
+
+declare module '@babel/traverse/lib/context' {
+  declare module.exports: any;
+}
+
+declare module '@babel/traverse/lib/hub' {
+  declare module.exports: any;
+}
+
+declare module '@babel/traverse/lib/index' {
+  declare module.exports: any;
+}
+
+declare module '@babel/traverse/lib/path/ancestry' {
+  declare module.exports: any;
+}
+
+declare module '@babel/traverse/lib/path/comments' {
+  declare module.exports: any;
+}
+
+declare module '@babel/traverse/lib/path/context' {
+  declare module.exports: any;
+}
+
+declare module '@babel/traverse/lib/path/conversion' {
+  declare module.exports: any;
+}
+
+declare module '@babel/traverse/lib/path/evaluation' {
+  declare module.exports: any;
+}
+
+declare module '@babel/traverse/lib/path/family' {
+  declare module.exports: any;
+}
+
+declare module '@babel/traverse/lib/path/index' {
+  declare module.exports: any;
+}
+
+declare module '@babel/traverse/lib/path/inference/index' {
+  declare module.exports: any;
+}
+
+declare module '@babel/traverse/lib/path/inference/inferer-reference' {
+  declare module.exports: any;
+}
+
+declare module '@babel/traverse/lib/path/inference/inferers' {
+  declare module.exports: any;
+}
+
+declare module '@babel/traverse/lib/path/introspection' {
+  declare module.exports: any;
+}
+
+declare module '@babel/traverse/lib/path/lib/hoister' {
+  declare module.exports: any;
+}
+
+declare module '@babel/traverse/lib/path/lib/removal-hooks' {
+  declare module.exports: any;
+}
+
+declare module '@babel/traverse/lib/path/lib/virtual-types' {
+  declare module.exports: any;
+}
+
+declare module '@babel/traverse/lib/path/modification' {
+  declare module.exports: any;
+}
+
+declare module '@babel/traverse/lib/path/removal' {
+  declare module.exports: any;
+}
+
+declare module '@babel/traverse/lib/path/replacement' {
+  declare module.exports: any;
+}
+
+declare module '@babel/traverse/lib/scope/binding' {
+  declare module.exports: any;
+}
+
+declare module '@babel/traverse/lib/scope/index' {
+  declare module.exports: any;
+}
+
+declare module '@babel/traverse/lib/scope/lib/renamer' {
+  declare module.exports: any;
+}
+
+declare module '@babel/traverse/lib/visitors' {
+  declare module.exports: any;
+}
+
+// Filename aliases
+declare module '@babel/traverse/lib/cache.js' {
+  declare module.exports: $Exports<'@babel/traverse/lib/cache'>;
+}
+declare module '@babel/traverse/lib/context.js' {
+  declare module.exports: $Exports<'@babel/traverse/lib/context'>;
+}
+declare module '@babel/traverse/lib/hub.js' {
+  declare module.exports: $Exports<'@babel/traverse/lib/hub'>;
+}
+declare module '@babel/traverse/lib/index.js' {
+  declare module.exports: $Exports<'@babel/traverse/lib/index'>;
+}
+declare module '@babel/traverse/lib/path/ancestry.js' {
+  declare module.exports: $Exports<'@babel/traverse/lib/path/ancestry'>;
+}
+declare module '@babel/traverse/lib/path/comments.js' {
+  declare module.exports: $Exports<'@babel/traverse/lib/path/comments'>;
+}
+declare module '@babel/traverse/lib/path/context.js' {
+  declare module.exports: $Exports<'@babel/traverse/lib/path/context'>;
+}
+declare module '@babel/traverse/lib/path/conversion.js' {
+  declare module.exports: $Exports<'@babel/traverse/lib/path/conversion'>;
+}
+declare module '@babel/traverse/lib/path/evaluation.js' {
+  declare module.exports: $Exports<'@babel/traverse/lib/path/evaluation'>;
+}
+declare module '@babel/traverse/lib/path/family.js' {
+  declare module.exports: $Exports<'@babel/traverse/lib/path/family'>;
+}
+declare module '@babel/traverse/lib/path/index.js' {
+  declare module.exports: $Exports<'@babel/traverse/lib/path/index'>;
+}
+declare module '@babel/traverse/lib/path/inference/index.js' {
+  declare module.exports: $Exports<'@babel/traverse/lib/path/inference/index'>;
+}
+declare module '@babel/traverse/lib/path/inference/inferer-reference.js' {
+  declare module.exports: $Exports<'@babel/traverse/lib/path/inference/inferer-reference'>;
+}
+declare module '@babel/traverse/lib/path/inference/inferers.js' {
+  declare module.exports: $Exports<'@babel/traverse/lib/path/inference/inferers'>;
+}
+declare module '@babel/traverse/lib/path/introspection.js' {
+  declare module.exports: $Exports<'@babel/traverse/lib/path/introspection'>;
+}
+declare module '@babel/traverse/lib/path/lib/hoister.js' {
+  declare module.exports: $Exports<'@babel/traverse/lib/path/lib/hoister'>;
+}
+declare module '@babel/traverse/lib/path/lib/removal-hooks.js' {
+  declare module.exports: $Exports<'@babel/traverse/lib/path/lib/removal-hooks'>;
+}
+declare module '@babel/traverse/lib/path/lib/virtual-types.js' {
+  declare module.exports: $Exports<'@babel/traverse/lib/path/lib/virtual-types'>;
+}
+declare module '@babel/traverse/lib/path/modification.js' {
+  declare module.exports: $Exports<'@babel/traverse/lib/path/modification'>;
+}
+declare module '@babel/traverse/lib/path/removal.js' {
+  declare module.exports: $Exports<'@babel/traverse/lib/path/removal'>;
+}
+declare module '@babel/traverse/lib/path/replacement.js' {
+  declare module.exports: $Exports<'@babel/traverse/lib/path/replacement'>;
+}
+declare module '@babel/traverse/lib/scope/binding.js' {
+  declare module.exports: $Exports<'@babel/traverse/lib/scope/binding'>;
+}
+declare module '@babel/traverse/lib/scope/index.js' {
+  declare module.exports: $Exports<'@babel/traverse/lib/scope/index'>;
+}
+declare module '@babel/traverse/lib/scope/lib/renamer.js' {
+  declare module.exports: $Exports<'@babel/traverse/lib/scope/lib/renamer'>;
+}
+declare module '@babel/traverse/lib/visitors.js' {
+  declare module.exports: $Exports<'@babel/traverse/lib/visitors'>;
+}

packages/styled-components/package.json

@@ -58,6 +58,7 @@
   "homepage": "https://styled-components.com",
   "dependencies": {
     "@babel/helper-module-imports": "^7.0.0",
+    "@babel/traverse": "^7.0.0",
     "@emotion/is-prop-valid": "^0.8.1",
     "@emotion/unitless": "^0.7.0",
     "babel-plugin-styled-components": ">= 1",

packages/styled-components/src/macro/index.js

@@ -1,7 +1,8 @@
 // @flow
+import { addDefault, addNamed } from '@babel/helper-module-imports';
+import traverse from '@babel/traverse';
 import { createMacro } from 'babel-plugin-macros';
 import babelPlugin from 'babel-plugin-styled-components';
-import { addDefault, addNamed } from '@babel/helper-module-imports';
 
 function styledComponentsMacro({ references, state, babel: { types: t }, config = {} }) {
   const program = state.file.path;
@@ -29,7 +30,7 @@ function styledComponentsMacro({ references, state, babel: { types: t }, config
 
   // SECOND STEP : apply babel-plugin-styled-components to the file
   const stateWithOpts = { ...state, opts: config, customImportName };
-  program.traverse(babelPlugin({ types: t }).visitor, stateWithOpts);
+  traverse(program.parent, babelPlugin({ types: t }).visitor, undefined, stateWithOpts);
 }
 
 const configName = 'styledComponents';

packages/styled-components/src/macro/test/__snapshots__/macro.test.js.snap

@@ -50,8 +50,8 @@ exports[`macro should work with { ThemeProvider }: should work with { ThemeProvi
 import { ThemeProvider } from '../../macro'
 
 React.createComponent(
-  ThemeProvider, 
-  { theme: { color: 'red' }}, 
+  ThemeProvider,
+  { theme: { color: 'red' }},
   'hello'
 )
 
@@ -191,6 +191,69 @@ _styled.div.withConfig({
 "
 `;
 
+exports[`macro should work with the css prop overriding an existing styled-component: should work with the css prop overriding an existing styled-component 1`] = `
+"
+import React from 'react';
+import styled from '../../macro'
+
+const Thing = styled.div\`
+  color: blue;
+\`;
+
+function Foo() {
+  return <Thing css=\\"color: red;\\" />;
+}
+
+      ↓ ↓ ↓ ↓ ↓ ↓
+
+import _styled2 from 'styled-components';
+import _styled from 'styled-components';
+import React from 'react';
+
+
+const Thing = _styled.div.withConfig({
+  displayName: 'macrotest__Thing',
+  componentId: 'sc-11gvsec-0'
+})(['color:blue;']);
+
+function Foo() {
+  return React.createElement(_StyledThing, null);
+}
+
+var _StyledThing = _styled(Thing).withConfig({
+  displayName: 'macrotest___StyledThing',
+  componentId: 'sc-11gvsec-1'
+})(['color:red;']);
+"
+`;
+
+exports[`macro should work with the css prop: should work with the css prop 1`] = `
+"
+import styled from '../../macro'
+import React from 'react';
+
+function Foo() {
+  return <div css=\\"color: red;\\" />;
+}
+
+      ↓ ↓ ↓ ↓ ↓ ↓
+
+import _styled2 from 'styled-components';
+import _styled from 'styled-components';
+
+import React from 'react';
+
+function Foo() {
+  return React.createElement(_StyledDiv, null);
+}
+
+var _StyledDiv = _styled.div.withConfig({
+  displayName: 'macrotest___StyledDiv',
+  componentId: 'sc-11gvsec-0'
+})(['color:red;']);
+"
+`;
+
 exports[`macro should work with types alongside import: should work with types alongside import 1`] = `
 "
 import styled, { DefaultTheme } from '../../macro'

packages/styled-components/src/macro/test/macro.test.js

@@ -50,8 +50,8 @@ const ThemeProviderExampleCode = `
 import { ThemeProvider } from '../../macro'
 
 React.createComponent(
-  ThemeProvider, 
-  { theme: { color: 'red' }}, 
+  ThemeProvider,
+  { theme: { color: 'red' }},
   'hello'
 )
 `;
@@ -69,7 +69,7 @@ styled(Hello)\`
 
 const multipleImportsExampleCode = `
 import styled, { css } from '../../macro'
-`
+`;
 
 const requireExampleCode = `
 const styled = require('../../macro')
@@ -87,11 +87,33 @@ const withTypeAndStandardImportExampleCode = `
   import styled, { DefaultTheme } from '../../macro'
 `;
 
+const cssPropExampleCode = `
+import styled from '../../macro'
+import React from 'react';
+
+function Foo() {
+  return <div css="color: red;" />;
+}
+`;
+
+const cssPropOverridingComponentExampleCode = `
+import React from 'react';
+import styled from '../../macro'
+
+const Thing = styled.div\`
+  color: blue;
+\`;
+
+function Foo() {
+  return <Thing css="color: red;" />;
+}
+`;
+
 pluginTester({
   title: 'macro',
   plugin,
   snapshot: true,
-  babelOptions: { filename: __filename },
+  babelOptions: { filename: __filename, presets: ['react'] },
   tests: {
     'should work with styled': styledExampleCode,
     'should work with custom import name': customStyledExampleCode,
@@ -118,5 +140,7 @@ pluginTester({
         }));
       },
     },
+    'should work with the css prop': cssPropExampleCode,
+    'should work with the css prop overriding an existing styled-component': cssPropOverridingComponentExampleCode,
   },
 });

packages/styled-components/src/models/ServerStyleSheet.js

@@ -1,7 +1,7 @@
 // @flow
 /* eslint-disable no-underscore-dangle */
 import React from 'react';
-import stream from 'stream';
+import stream, { type Readable } from 'stream';
 
 import { IS_BROWSER, SC_STREAM_ATTR } from '../constants';
 import StyledError from '../utils/error';
@@ -57,7 +57,7 @@ export default class ServerStyleSheet {
     return this.instance.toReactElements();
   }
 
-  interleaveWithNodeStream(readableStream: stream.Readable) {
+  interleaveWithNodeStream(readableStream: Readable) {
     if (!__SERVER__ || IS_BROWSER) {
       throw new StyledError(3);
     }