Styled Components Debugging - TypeScript

Debug your TypeScript styled component apps.

What does this package do?

Adds a TypeScript transformer to generate debug information for rewired create react apps.

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

transpiles to

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

✨ React Inspector ✨

Installation

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

yarn add react-app-rewire-styled-components-typescript

Usage

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

⚠️ rewiredStyledComponents is required before this plugin.

// config-overides.js

const { compose } = require("react-app-rewired");
const rewireStyledComponents = require("react-app-rewire-styled-components");
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;
};