chore: add babel-plugin-styled-components (smaller bundle size)

custom.d.ts

@@ -1,3 +1,5 @@
+/// <reference path="src/styled.d.ts" />
+
 declare module '*.json' {
   const content: any;
   export = content;

demo/webpack.config.ts

@@ -3,6 +3,7 @@ import * as HtmlWebpackPlugin from 'html-webpack-plugin';
 import * as ForkTsCheckerWebpackPlugin from 'fork-ts-checker-webpack-plugin';
 import * as CopyWebpackPlugin from 'copy-webpack-plugin';
 import { resolve } from 'path';
+import { compact } from 'lodash';
 
 const VERSION = JSON.stringify(require('../package.json').version);
 const REVISION = JSON.stringify(
@@ -25,17 +26,24 @@ const tsLoader = env => ({
   },
 });
 
-const babelHotLoader = {
+const babelLoader = mode => ({
   loader: 'babel-loader',
   options: {
-    plugins: [
+    plugins: compact([
       '@babel/plugin-syntax-typescript',
       '@babel/plugin-syntax-decorators',
       '@babel/plugin-syntax-jsx',
-      'react-hot-loader/babel',
-    ],
+      mode === 'production' ? 'react-hot-loader/babel' : undefined,
+      [
+        'babel-plugin-styled-components',
+        {
+          minify: true,
+          displayName: mode !== 'production',
         },
-};
+      ],
+    ]),
+  },
+});
 
 export default (env: { playground?: boolean; bench?: boolean } = {}, { mode }) => ({
   entry: [
@@ -76,7 +84,7 @@ export default (env: { playground?: boolean; bench?: boolean } = {}, { mode }) =
       { test: [/\.eot$/, /\.gif$/, /\.woff$/, /\.svg$/, /\.ttf$/], use: 'null-loader' },
       {
         test: /\.tsx?$/,
-        use: mode === 'production' ? [tsLoader(env)] : [tsLoader(env), babelHotLoader],
+        use: [tsLoader(env), babelLoader(mode)],
         exclude: ['node_modules'],
       },
       {
@@ -115,8 +123,6 @@ export default (env: { playground?: boolean; bench?: boolean } = {}, { mode }) =
       template: env.playground ? 'demo/playground/index.html' : 'demo/index.html',
     }),
     new ForkTsCheckerWebpackPlugin(),
-    new CopyWebpackPlugin([
-      'demo/openapi.yaml'
-    ])
+    new CopyWebpackPlugin(['demo/openapi.yaml']),
   ],
 });

package.json

@@ -69,6 +69,7 @@
     "@types/webpack-env": "^1.13.0",
     "@types/yargs": "^11.0.0",
     "babel-loader": "8.0.0-beta.2",
+    "babel-plugin-styled-components": "^1.5.1",
     "beautify-benchmark": "^0.2.4",
     "conventional-changelog-cli": "^1.3.5",
     "copy-webpack-plugin": "^4.5.1",

src/common-elements/fields.ts

@@ -1,5 +1,5 @@
 import { transparentize } from 'polished';
-import styled from 'styled-components';
+import styled from '../styled-components';
 import { PropertyNameCell } from './fields-layout';
 
 export const ClickablePropertyNameCell = PropertyNameCell.extend`

src/common-elements/linkify.ts

@@ -1,4 +1,4 @@
-import styled, { css } from 'styled-components';
+import styled, { css } from '../styled-components';
 
 // tslint:disable-next-line
 export const linkifyMixin = className => css`

src/common-elements/mixins.ts

@@ -1,4 +1,4 @@
-import { css } from 'styled-components';
+import { css } from '../styled-components';
 
 export const deprecatedCss = css`
   text-decoration: line-through;

src/components/Responses/ResponsesList.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import styled from 'styled-components';
+import styled from '../../styled-components';
 import { ResponseModel } from '../../services/models';
 import { ResponseView } from './Response';
 

src/styled.d.ts

@@ -0,0 +1,43 @@
+import * as styledComponents from 'styled-components';
+
+// Styled components typings for using babel-plugin BEFORE typescript
+declare module 'styled-components' {
+  interface ThemedStyledFunction<P, T, O = P> {
+    // adding "| string[]" for transpileTemplateLiterals and similar below
+    (
+      strings: TemplateStringsArray | string[],
+      ...interpolations: Interpolation<ThemedStyledProps<P, T>>[]
+    ): StyledComponentClass<P, T, O>;
+
+    new <U>(
+      strings: TemplateStringsArray | string[],
+      ...interpolations: Interpolation<ThemedStyledProps<P & U, T>>[]
+    ): StyledComponentClass<P & U, T, O & U>;
+
+    // adding "withConfig" for transpileTemplateLiterals
+    withConfig(config: any): ThemedStyledFunction<P, T, O>;
+  }
+
+  export interface ThemedCssFunction<T> {
+    // adding "| string[]" for transpileTemplateLiterals and similar below
+    (
+      strings: TemplateStringsArray | string[],
+      ...interpolations: SimpleInterpolation[]
+    ): InterpolationValue[];
+    <P>(
+      strings: TemplateStringsArray | string[],
+      ...interpolations: Interpolation<ThemedStyledProps<P, T>>[]
+    ): FlattenInterpolation<ThemedStyledProps<P, T>>[];
+  }
+
+  interface ThemedStyledComponentsModule<T> {
+    keyframes(
+      strings: TemplateStringsArray | string[],
+      ...interpolations: SimpleInterpolation[]
+    ): string;
+    injectGlobal(
+      strings: TemplateStringsArray | string[],
+      ...interpolations: SimpleInterpolation[]
+    ): void;
+  }
+}

webpack.config.ts

@@ -21,7 +21,7 @@ const BANNER = `ReDoc - OpenAPI/Swagger-generated API Reference Documentation
   Version: ${VERSION}
   Repo: https://github.com/Rebilly/ReDoc`;
 
-export default (env: { standalone?: boolean } = {}) => ({
+export default (env: { standalone?: boolean } = {}, { mode }) => ({
   entry: env.standalone ? ['./src/polyfills.ts', './src/standalone.tsx'] : './src/index.ts',
   output: {
     filename: env.standalone ? 'redoc.standalone.js' : 'redoc.lib.js',
@@ -62,7 +62,8 @@ export default (env: { standalone?: boolean } = {}) => ({
     rules: [
       {
         test: /\.tsx?$/,
-        use: {
+        use: [
+          {
             loader: 'ts-loader',
             options: {
               compilerOptions: {
@@ -70,6 +71,24 @@ export default (env: { standalone?: boolean } = {}) => ({
               },
             },
           },
+          {
+            loader: 'babel-loader',
+            options: {
+              plugins: [
+                '@babel/plugin-syntax-typescript',
+                '@babel/plugin-syntax-decorators',
+                '@babel/plugin-syntax-jsx',
+                [
+                  'babel-plugin-styled-components',
+                  {
+                    minify: true,
+                    displayName: mode !== 'production',
+                  },
+                ],
+              ],
+            },
+          },
+        ],
         exclude: ['node_modules'],
       },
       {

yarn.lock

@@ -38,6 +38,12 @@
     source-map "^0.5.0"
     trim-right "^1.0.1"
 
+"@babel/helper-annotate-as-pure@^7.0.0-beta.37":
+  version "7.0.0-beta.42"
+  resolved "https://registry.yarnpkg.com/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.0.0-beta.42.tgz#f2b0a3be684018b55fc308eb5408326f78479085"
+  dependencies:
+    "@babel/types" "7.0.0-beta.42"
+
 "@babel/helper-function-name@7.0.0-beta.42":
   version "7.0.0-beta.42"
   resolved "https://registry.yarnpkg.com/@babel/helper-function-name/-/helper-function-name-7.0.0-beta.42.tgz#b38b8f4f85168d1812c543dd700b5d549b0c4658"
@@ -919,6 +925,14 @@ babel-plugin-jest-hoist@^22.4.1:
   version "22.4.1"
   resolved "https://registry.yarnpkg.com/babel-plugin-jest-hoist/-/babel-plugin-jest-hoist-22.4.1.tgz#d712fe5da8b6965f3191dacddbefdbdf4fb66d63"
 
+babel-plugin-styled-components@^1.5.1:
+  version "1.5.1"
+  resolved "https://registry.yarnpkg.com/babel-plugin-styled-components/-/babel-plugin-styled-components-1.5.1.tgz#31dbeb696d1354d1585e60d66c7905f5e474afcd"
+  dependencies:
+    "@babel/helper-annotate-as-pure" "^7.0.0-beta.37"
+    babel-types "^6.26.0"
+    stylis "^3.0.0"
+
 babel-plugin-syntax-async-functions@^6.8.0:
   version "6.13.0"
   resolved "https://registry.yarnpkg.com/babel-plugin-syntax-async-functions/-/babel-plugin-syntax-async-functions-6.13.0.tgz#cad9cad1191b5ad634bf30ae0872391e0647be95"
@@ -8748,7 +8762,7 @@ stylis-rule-sheet@^0.0.10:
   version "0.0.10"
   resolved "https://registry.yarnpkg.com/stylis-rule-sheet/-/stylis-rule-sheet-0.0.10.tgz#44e64a2b076643f4b52e5ff71efc04d8c3c4a430"
 
-stylis@^3.5.0:
+stylis@^3.0.0, stylis@^3.5.0:
   version "3.5.0"
   resolved "https://registry.yarnpkg.com/stylis/-/stylis-3.5.0.tgz#016fa239663d77f868fef5b67cf201c4b7c701e1"