Cannot comment out styles with interpolated values

[christiannaths]

originally filed here https://github.com/withspectrum/react-app-rewire-styled-components/issues/6

Problem

When commenting out an interpolated value from within a styled component, an error is thrown:

./src/App.js
Module build failed: TypeError: ./App.js: Property value expected type of string but got null
    at Array.map (native)

Steps to reproduce

Create a new app

$ create-react-app bpsc && cd bpsc && yarn eject
$ yarn add styled-components babel-plugin-styled-components

add plugin to webpack config

{
  test: /\.(js|jsx|mjs)$/,
  include: paths.appSrc,
  loader: require.resolve('babel-loader'),
  options: {
    plugins: ['babel-plugin-styled-components'],
    cacheDirectory: true,
  },
},

start

$ yarn start

Create a styled-component that uses an interpolated prop value

import React, { Component } from 'react';
import './App.css';
import styled from 'styled-components';

const Example = styled.div`
  background: ${p => p.bg};
`;

class App extends Component {
  render() {
    return <Example />;
  }
}

export default App;

Comment out the style with the interpolated value

const Example = styled.div`
  /* background: ${p => p.bg}; */
`;

---

Error Details

Property value expected type of string but got null

``` index.js:2177 ./src/App.js Module build failed: TypeError: /Users/christiannaths/Desktop/bpsc/src/App.js: Property value expected type of string but got null at Array.map (native) __stack_frame_overlay_proxy_console__ @ index.js:2177 handleErrors @ webpackHotDevClient.js:176 ./node_modules/react-dev-utils/webpackHotDevClient.js.connection.onmessage @ webpackHotDevClient.js:209 ./node_modules/sockjs-client/lib/event/eventtarget.js.EventTarget.dispatchEvent @ eventtarget.js:51 (anonymous) @ main.js:274 ./node_modules/sockjs-client/lib/main.js.SockJS._transportMessage @ main.js:272 ./node_modules/sockjs-client/lib/event/emitter.js.EventEmitter.emit @ emitter.js:50 WebSocketTransport.ws.onmessage @ websocket.js:35 ```

[kitten]

I think this is a bug with the minify option, so if you turn it off, that should work for now.

[christiannaths]

Ah, right you are! Thanks, at least that gives me a workaround for now 👍