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

This commit is contained in:
Roman Hotsiy 2018-03-23 16:16:13 +02:00
parent 8583547f30
commit fefe571d29
No known key found for this signature in database
GPG Key ID: 5CB7B3ACABA57CB0
10 changed files with 107 additions and 22 deletions

2
custom.d.ts vendored
View File

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

View File

@ -1,8 +1,9 @@
import * as webpack from 'webpack';
import * as HtmlWebpackPlugin from 'html-webpack-plugin';
import * as ForkTsCheckerWebpackPlugin from 'fork-ts-checker-webpack-plugin';
import * as CopyWebpackPlugin from 'copy-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']),
],
});

View File

@ -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",

View File

@ -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`

View File

@ -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`

View File

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

View File

@ -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';

43
src/styled.d.ts vendored Normal file
View File

@ -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;
}
}

View File

@ -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,14 +62,33 @@ export default (env: { standalone?: boolean } = {}) => ({
rules: [
{
test: /\.tsx?$/,
use: {
loader: 'ts-loader',
options: {
compilerOptions: {
module: 'es2015',
use: [
{
loader: 'ts-loader',
options: {
compilerOptions: {
module: 'es2015',
},
},
},
},
{
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'],
},
{

View File

@ -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"