How to use typescript-plugin-styled-components - 10 common examples

/* eslint-disable */
const { resolve } = require('path');
const merge = require('webpack-merge');
const createStyledComponentsTransformer = require('typescript-plugin-styled-components').default;
const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
/* eslint-enable */

const INCLUDE = resolve(__dirname, 'src');

const dev = process.env.ENV === 'dev';

const styledComponentsTransformer = createStyledComponentsTransformer({
  minify: true,
  displayName: dev,
});

function getExternals(externals) {
  const res = {};
  for (const e of externals) {
    res[e] = `require('${e}')`;
  }
  return res;
}

const config = {
  mode: dev ? 'development' : 'production',

  devtool: dev ? 'eval-source-map' : 'none',

const CheckerPlugin = require('awesome-typescript-loader').CheckerPlugin

const path = require('path')

const createTransformer = require('typescript-plugin-styled-components').default
const styledComponentsTransformer = createTransformer({ displayName: true })

const basePath = path.resolve(__dirname, '../', 'packages')

module.exports = ({ config, mode }) => {
  const isDev = mode === 'DEVELOPMENT'

  // Add typescript support
  config.module.rules.push({
    test: /\.(ts|tsx)$/,
    use: [
      {
        loader: 'babel-loader',
        options: {
          presets: ['@babel/preset-env'],
        },
      },

const path = require('path');
const webpack = require('webpack');
const TSConfigPathsPlugin = require('tsconfig-paths-webpack-plugin');
// https://github.com/Igorbek/typescript-plugin-styled-components
const createStyledComponentsTransformer = require('typescript-plugin-styled-components')
  .default;
const styledComponentsTransformer = createStyledComponentsTransformer();
const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');

module.exports = {
  entry: './src/index.tsx',
  output: {
    path: path.resolve(__dirname, '../../public/client-v2/dist'),
    filename: 'app.bundle.js'
  },
  plugins: [new ForkTsCheckerWebpackPlugin()],
  module: {
    rules: [
      {
        test: /\.(ts|tsx|spec.ts|spec.tsx)$/,
        include: '/',
        loader: 'ts-loader',
        exclude: /node_modules/,

// you can use this file to add your custom webpack plugins, loaders and anything you like.
// This is just the basic way to add additional webpack configurations.
// For more information refer the docs: https://storybook.js.org/configurations/custom-webpack-config

// IMPORTANT
// When you add this file, we won't add the default configurations which is similar
// to "React Create App". This only has babel loader to load JavaScript.
const path = require("path");
const createStyledComponentsTransformer = require('typescript-plugin-styled-components').default;
const styledComponentsTransformer = createStyledComponentsTransformer();
module.exports = {
  plugins: [
    // your custom plugins
  ],
  module: {
    rules: [
      // add your custom rules.
      {
        test: /\.scss$/,
        loaders: ["style-loader", "css-loader", "sass-loader"],
        include: path.resolve(__dirname, "../")
      },
      {
        test: /\.css$/,
        loaders: ["style-loader", "css-loader"],
        include: path.resolve(__dirname, "../")

/* eslint-disable @typescript-eslint/no-var-requires */
const path = require("path");
const webpack = require("webpack");
const CompressionPlugin = require("compression-webpack-plugin");
const WorkboxPlugin = require("workbox-webpack-plugin");
const StatsPlugin = require("stats-webpack-plugin");
const BrotliPlugin = require("brotli-webpack-plugin");

const rootDir = path.resolve(__dirname, "../..");
const outputPath = path.resolve(rootDir, "build/client");
const outputPublicPath = "/public/";

const createStyledComponentsTransformer = require("typescript-plugin-styled-components")
  .default;

const styledComponentsTransformer = createStyledComponentsTransformer();

module.exports = {
  mode: "production",

  name: "client",

  target: "web",

  entry: [path.resolve(rootDir, "src/client/index")],

  output: {
    path: outputPath,
    filename: "[name]-[chunkhash].js",
    chunkFilename: "[name]-[chunkhash].js",
    publicPath: outputPublicPath,
  },

// Copyright (c) 2019 The Brave Authors. All rights reserved.
// This Source Code Form is subject to the terms of the Mozilla Public
// License, v. 2.0. If a copy of the MPL was not distributed with this file,
// you can obtain one at http://mozilla.org/MPL/2.0/.

const path = require('path')
const GenerateDepfilePlugin = require('./webpack-plugin-depfile')
const createStyledComponentsTransformer = require('typescript-plugin-styled-components').default

const styledComponentsTransformer = createStyledComponentsTransformer()

module.exports = (env, argv) => ({
  devtool: argv.mode === 'development' ? '#inline-source-map' : false,
  output: {
    path: process.env.TARGET_GEN_DIR,
    filename: '[name].bundle.js',
    chunkFilename: '[id].chunk.js'
  },
  resolve: {
    extensions: ['.js', '.tsx', '.ts', '.json'],
    alias: {
      'brave-ui': path.resolve(__dirname, '../../node_modules/brave-ui/src')
    },
    // For explanation of "chromeapp", see:
    // https://github.com/brave/brave-browser/issues/5587
    aliasFields: ['chromeapp']

var ethstatsUiPublicRoot = path.join(nodeModulesPath, "@alethio/ui/public");
    var assetsRoot = path.join(__dirname, "src/assets");
    var outputRoot = path.join(__dirname, "dist");

    var localesInfo = JSON.parse(fs.readFileSync(path.join(appRoot, "translation", "locales.json"), "utf8"));
    var defaultLocale = localesInfo.find(l => !!l.default).locale;
    var availableLocales = localesInfo.map(l => l.locale);

    var translation = require(path.join(appRoot, "translation", defaultLocale + ".json"));

    var gitRevisionPlugin = new GitRevisionPlugin({
        branch: true
    });

    var tsConfigJsonFilename = "tsconfig.webpack.json";
    var styledComponentsTransformer = createStyledComponentsTransformer();

    var basePath = (process.env.APP_BASE_PATH || "").replace(/^\//, "").replace(/\/$/, "");

    var plugins = [
        new ForkTsCheckerWebpackPlugin({
            tsconfig: path.resolve(".", tsConfigJsonFilename),
            tslint: path.resolve(".", isProduction ? "tslint.prod.json" : "tslint.json"),
            async: false
        }),
        // These are preprocessor constants which are replaced inline (that"s why the extra quotes)
        new webpack.DefinePlugin({
            // This is needed to be able to activate some features for development (like ReduxDevTools)
            // and, also, some libs (like React) have an optimized (smaller&faster) builds
            // if NODE_ENV is set to "production"
            "process.env.NODE_ENV": JSON.stringify(isDebug ? "development" : "production"),

/* eslint-disable */
const { resolve } = require('path');
const merge = require('webpack-merge');
const HardSourceWebpackPlugin = require('hard-source-webpack-plugin');
const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
const createStyledComponentsTransformer = require('typescript-plugin-styled-components').default;
/* eslint-enable */

const INCLUDE = resolve(__dirname, 'src');

const dev = process.env.ENV === 'dev';

const styledComponentsTransformer = createStyledComponentsTransformer({
  minify: true,
  displayName: dev,
});

const config = {
  mode: dev ? 'development' : 'production',

  devtool: dev ? 'eval-source-map' : 'source-map',

  plugins: [],

  output: {
    path: resolve(__dirname, 'build'),
    filename: '[name].bundle.js',
  },

public init(context: WorkFlowContext) {
		if (typeof require.resolve === "function") {
			try {
				require.resolve("typescript-plugin-styled-components");
			} catch (e) {
				throw new Error(
					`Cannot find module 'typescript-plugin-styled-components', install it to devDependency\nnpm install --save-dev typescript-plugin-styled-components`,
				);
			}
		}
		const createStyledComponentsTransformer = require("typescript-plugin-styled-components").default;
		context.allowExtension(".tsx");
		const styledComponentsTransformer = createStyledComponentsTransformer(this.options);
		context.fuse.opts.transformers = {
			before: [styledComponentsTransformer],
		};
	}
}

const path = require('path');
const webpack = require('webpack');
const ExtractCssChunks = require('extract-css-chunks-webpack-plugin');
const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const CompressionPlugin = require('compression-webpack-plugin');
const BrotliPlugin = require('brotli-webpack-plugin');

const createStyledComponentsTransformer = require('typescript-plugin-styled-components')
	.default;
const styledComponentsTransformer = createStyledComponentsTransformer();

module.exports = {
	name: 'client',
	entry: {
		vendor: ['react', 'react-dom'],
		main: ['./src/main.js'],
	},
	mode: 'production',
	output: {
		filename: '[name]-bundle.[hash].js',
		path: path.resolve(__dirname, '../dist'),
		publicPath: '/',
	},
	optimization: {
		splitChunks: {
			cacheGroups: {