react-app-rewire-styled-components-typescript v1.0.1

react-app-rewire-styled-components-typescript

Add the typescript-plugin-styled-components to your create-react-app app via react-app-rewired and react-scripts-ts.

What does it do?

const Header = styled.h1`...`;

transpiles to

const Header = styled.h1.withConfig({ displayName: 'Header' })`...`;

This generates class names that are recognizable and easier to debug.

Installation

npm install --save react-app-rewire-styled-components-typescript

# alternatively if you have yarn installed
yarn add react-app-rewire-styled-components-typescript

Usage

In the config-overrides.js you created for react-app-rewired add the following:

Note that rewiredStyledComponents is required before this plugin.

// config-overides.js

const { compose } = require("react-app-rewired");
const rewireStyledComponentsTypescriptPlugin = require('react-app-rewire-styled-components-typescript');

// react-app-rewired v1.3.4+ (right-to-left)
module.exports = compose(
  rewireStyledComponentsTypescriptPlugin,
  rewireStyledComponents
);

// older versions
module.exports = function(config, env) {
  config = rewireStyledComponents(config, env);
  config = rewireStyledComponentsTypescriptPlugin(config, env);

  return config;
};

Options

You can pass options directly to typescript-plugin-styled-components in the last argument

// config-overrides.js

module.exports = function(config, env) {
  const pluginOptions = {
    // fancy custom display name
    getDisplayName(filename, bindingName) {
      return (bindingName || filename).toUpperCase();
    }
  };

  config = rewireStyledComponents(config, env);
  config = rewireStyledComponentsTypescriptPlugin(config, env, pluginOptions);

  return config;
};