From fd15cd4f06396e26e17334759d6d2b0ddb18dbbf Mon Sep 17 00:00:00 2001 From: Yash Raj Chhabra Date: Mon, 18 Apr 2022 12:36:26 +0530 Subject: [PATCH 1/6] chore: optimize build size --- .storybook/main.js | 57 +------ .storybook/manager.js | 5 +- .storybook/preview-head.html | 223 +------------------------ package.json | 11 +- src/components/Pills/Pill.tsx | 5 +- src/components/Pills/pills.module.scss | 10 ++ src/styles/common.scss | 4 + src/styles/main.scss | 7 - webpack.common.js | 29 +++- webpack.dev.js | 18 +- webpack.prod.js | 3 +- yarn.lock | 99 +++++++---- 12 files changed, 139 insertions(+), 332 deletions(-) create mode 100644 src/styles/common.scss diff --git a/.storybook/main.js b/.storybook/main.js index dd2744937..d7dc1bf9e 100644 --- a/.storybook/main.js +++ b/.storybook/main.js @@ -1,4 +1,5 @@ const path = require('path'); +const webpackCommon = require('../webpack.common'); module.exports = { stories: [ @@ -28,57 +29,11 @@ module.exports = { }, }, webpackFinal: async (config, { configType }) => { - // `configType` has a value of 'DEVELOPMENT' or 'PRODUCTION' - // You can change the configuration based on that. - // 'PRODUCTION' is used when building the static version of storybook. - - const fileLoaderRule = config.module.rules.find( - (rule) => rule.test && rule.test.test('.svg') - ); - fileLoaderRule.exclude = /\.svg$/; - - config.module.rules.push( - { - test: /\.s[ca]ss|css$/, - use: [ - 'style-loader', - '@teamsupercell/typings-for-css-modules-loader', - { - loader: 'css-loader', - options: { - modules: { - localIdentName: '[local]_[hash:base64:6]', - exportLocalsConvention: 'camelCase', - }, - }, - }, - 'resolve-url-loader', - 'sass-loader', - { - loader: 'style-resources-loader', - options: { - patterns: [ - path.resolve( - __dirname, - '../src/styles/main.scss' - ), - ], - }, - }, - ], - include: path.resolve(__dirname, '../'), - }, - { - test: /\.svg$/, - use: ['@svgr/webpack', 'file-loader', 'url-loader'], - include: path.resolve(__dirname, '../'), - } - ); - - config.resolve.fallback = { - http: false, + return { + ...config, + optimization: webpackCommon.optimization, + plugins: [...config.plugins, ...webpackCommon.plugins], + module: { ...config.module, rules: webpackCommon.module.rules }, }; - - return config; }, }; diff --git a/.storybook/manager.js b/.storybook/manager.js index d59e4c75b..f608b029d 100644 --- a/.storybook/manager.js +++ b/.storybook/manager.js @@ -1,7 +1,6 @@ import { addons } from '@storybook/addons'; -import { themes } from '@storybook/theming'; import octupleTheme from './octupleTheme'; addons.setConfig({ - theme: octupleTheme -}); \ No newline at end of file + theme: octupleTheme, +}); diff --git a/.storybook/preview-head.html b/.storybook/preview-head.html index 682a85852..89a6d9d4c 100644 --- a/.storybook/preview-head.html +++ b/.storybook/preview-head.html @@ -1,229 +1,8 @@ - \ No newline at end of file + diff --git a/package.json b/package.json index 6ff391e30..e915db5f2 100644 --- a/package.json +++ b/package.json @@ -44,7 +44,12 @@ "@mdi/react": "1.5.0", "bodymovin": "4.13.0", "lottie-web": "5.8.1", - "react-flip-toolkit": "7.0.13" + "react-flip-toolkit": "7.0.13", + "@types/react": "17.0.39", + "@types/react-dom": "17.0.11", + "react": "17.0.2", + "react-app-polyfill": "3.0.0", + "react-dom": "17.0.2" }, "peerDependencies": { "@types/react": "17.0.39", @@ -100,7 +105,7 @@ "clean-webpack-plugin": "3.0.0", "copy-webpack-plugin": "6.0.1", "css-loader": "6.5.1", - "css-minimizer-webpack-plugin": "3.2.0", + "css-minimizer-webpack-plugin": "^3.4.1", "cssnano": "4.1.10", "dotenv": "10.0.0", "dotenv-expand": "5.1.0", @@ -126,7 +131,7 @@ "jest-resolve": "27.4.2", "jest-watch-typeahead": "1.0.0", "lint-staged": "12.3.6", - "mini-css-extract-plugin": "2.4.5", + "mini-css-extract-plugin": "^2.6.0", "postcss": "8.4.4", "postcss-flexbugs-fixes": "5.0.2", "postcss-loader": "6.2.1", diff --git a/src/components/Pills/Pill.tsx b/src/components/Pills/Pill.tsx index 5ead13efd..e170a520c 100644 --- a/src/components/Pills/Pill.tsx +++ b/src/components/Pills/Pill.tsx @@ -30,9 +30,8 @@ export const Pill: FC = ({ ]); const labelClassName: string = classNames([ styles.label, - { [styles.header4]: size === PillSize.Large }, - { [styles.header5]: size === PillSize.Medium }, - { [styles.header6]: size === PillSize.Small }, + { [styles.medium]: size === PillSize.Medium }, + { [styles.small]: size === PillSize.Small }, ]); const tagClassName: string = classNames([ styles.tagPills, diff --git a/src/components/Pills/pills.module.scss b/src/components/Pills/pills.module.scss index 1b73ee332..5873105e7 100644 --- a/src/components/Pills/pills.module.scss +++ b/src/components/Pills/pills.module.scss @@ -15,6 +15,16 @@ .label { margin-bottom: 1px; margin-top: -1px; + font-weight: $text-font-weight-semibold; + font-size: $text-font-size-5; + + &.medium { + font-size: $text-font-size-3; + } + + &.small { + font-size: $text-font-size-2; + } } &.red { diff --git a/src/styles/common.scss b/src/styles/common.scss new file mode 100644 index 000000000..bebedd6c8 --- /dev/null +++ b/src/styles/common.scss @@ -0,0 +1,4 @@ +@import 'abstracts/variables'; +@import 'abstracts/functions'; +@import 'themes/definitions-light'; +@import 'abstracts/mixins'; diff --git a/src/styles/main.scss b/src/styles/main.scss index dabad548f..6b1f94b25 100644 --- a/src/styles/main.scss +++ b/src/styles/main.scss @@ -1,10 +1,3 @@ -@import 'abstracts/variables'; -@import 'abstracts/functions'; - -@import 'themes/definitions-light'; @import 'themes/default-theme'; - @import 'base/typography'; @import 'base/css-reset'; - -@import 'abstracts/mixins'; diff --git a/webpack.common.js b/webpack.common.js index c64fba705..5ca4e5e42 100644 --- a/webpack.common.js +++ b/webpack.common.js @@ -1,20 +1,26 @@ const path = require('path'); +const MiniCssExtractPlugin = require('mini-css-extract-plugin'); +const CssMinimizerPlugin = require('css-minimizer-webpack-plugin'); + module.exports = { - entry: path.resolve(__dirname, './src/octuple.ts'), + entry: [ + path.resolve(__dirname, 'src/octuple.ts'), + path.resolve(__dirname, 'src/styles/main.scss'), + ], module: { rules: [ { test: /\.tsx?$/, use: 'ts-loader', exclude: /node_modules/, - include: path.resolve(__dirname, './src'), + include: path.resolve(__dirname, 'src'), }, { test: /\.s[ca]ss|css$/, exclude: /node_modules/, - include: path.resolve(__dirname, './src'), + include: path.resolve(__dirname, 'src'), use: [ - 'style-loader', + MiniCssExtractPlugin.loader, '@teamsupercell/typings-for-css-modules-loader', { loader: 'css-loader', @@ -31,7 +37,10 @@ module.exports = { loader: 'style-resources-loader', options: { patterns: [ - path.resolve(__dirname, 'src/styles/main.scss'), + path.resolve( + __dirname, + 'src/styles/common.scss' + ), ], }, }, @@ -39,8 +48,16 @@ module.exports = { }, ], }, + optimization: { + minimizer: [`...`, new CssMinimizerPlugin()], + }, + plugins: [ + new MiniCssExtractPlugin({ + filename: '[name].css', + }), + ], resolve: { - extensions: ['.ts', '.tsx', '.js', '.json'], + extensions: ['.ts', '.tsx', '.js', '.json', '.css', '.scss'], }, devtool: 'source-map', output: { diff --git a/webpack.dev.js b/webpack.dev.js index 126b6f369..95f2e983d 100644 --- a/webpack.dev.js +++ b/webpack.dev.js @@ -1,19 +1,21 @@ const webpack = require('webpack'); -const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin; -const WebpackCommonConfig = require('./webpack.common.js'); +const BundleAnalyzerPlugin = + require('webpack-bundle-analyzer').BundleAnalyzerPlugin; +const WebpackCommonConfig = require('./webpack.common'); process.env.NODE_ENV = 'development'; module.exports = { ...WebpackCommonConfig, plugins: [ + ...WebpackCommonConfig.plugins, new webpack.DefinePlugin({ - VERSION: JSON.stringify(require('./package.json').version) + VERSION: JSON.stringify(require('./package.json').version), }), new BundleAnalyzerPlugin({ options: { - generateStatsFile: true - } - }) - ] -}; \ No newline at end of file + generateStatsFile: true, + }, + }), + ], +}; diff --git a/webpack.prod.js b/webpack.prod.js index 69d228139..56decd501 100644 --- a/webpack.prod.js +++ b/webpack.prod.js @@ -1,5 +1,5 @@ const webpack = require('webpack'); -const WebpackCommonConfig = require('./webpack.common.js'); +const WebpackCommonConfig = require('./webpack.common'); process.env.NODE_ENV = 'production'; @@ -10,6 +10,7 @@ module.exports = { 'react-dom': 'commonjs react-dom', }, plugins: [ + ...WebpackCommonConfig.plugins, new webpack.DefinePlugin({ VERSION: JSON.stringify(require('./package.json').version), }), diff --git a/yarn.lock b/yarn.lock index 358edcdec..858a5b98e 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3032,13 +3032,6 @@ dependencies: "@types/node" "*" -"@types/cssnano@^4.0.1": - version "4.0.1" - resolved "https://registry.yarnpkg.com/@types/cssnano/-/cssnano-4.0.1.tgz#67fa912753d80973a016e7684a47fedf338aacff" - integrity sha512-hGOroxRTBkYl5gSBRJOffhV4+io+Y2bFX1VP7LgKEVHJt/LPPJaWUIuDAz74Vlp7l7hCDZfaDi7iPxwNwuVA4Q== - dependencies: - postcss "5 - 7" - "@types/dotenv-webpack@7.0.3": version "7.0.3" resolved "https://registry.yarnpkg.com/@types/dotenv-webpack/-/dotenv-webpack-7.0.3.tgz#43eaf6a2ee6161e9c79d58c3704d4a1a054e6082" @@ -3297,7 +3290,7 @@ "@types/react" "*" "@types/reactcss" "*" -"@types/react-dom@*": +"@types/react-dom@*", "@types/react-dom@17.0.11": version "17.0.11" resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-17.0.11.tgz#e1eadc3c5e86bdb5f7684e00274ae228e7bcc466" integrity sha512-f96K3k+24RaLGVu/Y2Ng3e1EbZ8/cVJvypZWd7cy0ofCBaf2lcM46xNhycMZ2xGwbBjRql7hOlZ+e2WlJ5MH3Q== @@ -3318,7 +3311,7 @@ dependencies: "@types/react" "*" -"@types/react@*": +"@types/react@*", "@types/react@17.0.39": version "17.0.39" resolved "https://registry.yarnpkg.com/@types/react/-/react-17.0.39.tgz#d0f4cde092502a6db00a1cded6e6bf2abb7633ce" integrity sha512-UVavlfAxDd/AgAacMa60Azl7ygyQNRwC/DsHZmKgNvPmRR5p70AJ5Q9EAmL2NWOJmeV+vVUI4IAP7GZrN8h8Ug== @@ -4397,6 +4390,11 @@ arrify@^2.0.1: resolved "https://registry.yarnpkg.com/arrify/-/arrify-2.0.1.tgz#c9655e9331e0abcd588d2a7cad7e9956f66701fa" integrity sha512-3duEwti880xqi4eAMN8AyR4a0ByT90zoYdLlevfrvU43vb0YZwZVfxOgxWrLXXXpyugL0hNZc9G6BiB5B3nUug== +asap@~2.0.6: + version "2.0.6" + resolved "https://registry.yarnpkg.com/asap/-/asap-2.0.6.tgz#e50347611d7e690943208bbdafebcbc2fb866d46" + integrity sha1-5QNHYR1+aQlDIIu9r+vLwvuGbUY= + asn1.js@^5.2.0: version "5.4.1" resolved "https://registry.yarnpkg.com/asn1.js/-/asn1.js-5.4.1.tgz#11a980b84ebb91781ce35b0fdc2ee294e3783f07" @@ -5988,6 +5986,11 @@ core-js@^3.0.4, core-js@^3.6.5, core-js@^3.8.2: resolved "https://registry.yarnpkg.com/core-js/-/core-js-3.21.1.tgz#f2e0ddc1fc43da6f904706e8e955bc19d06a0d94" integrity sha512-FRq5b/VMrWlrmCzwRrpDYNxyHP9BcAZC+xHJaqTgIE5091ZV1NTmyh0sGOg5XqpnHvR0svdy0sv1gWA1zmhxig== +core-js@^3.19.2: + version "3.22.0" + resolved "https://registry.yarnpkg.com/core-js/-/core-js-3.22.0.tgz#b52007870c5e091517352e833b77f0b2d2b259f3" + integrity sha512-8h9jBweRjMiY+ORO7bdWSeWfHhLPO7whobj7Z2Bl0IDo00C228EdGgH7FE4jGumbEjzcFfkfW8bXgdkEDhnwHQ== + core-util-is@~1.0.0: version "1.0.3" resolved "https://registry.yarnpkg.com/core-util-is/-/core-util-is-1.0.3.tgz#a6042d3634c2b27e9328f837b965fac83808db85" @@ -6217,12 +6220,11 @@ css-loader@^5.0.1: schema-utils "^3.0.0" semver "^7.3.5" -css-minimizer-webpack-plugin@3.2.0: - version "3.2.0" - resolved "https://registry.yarnpkg.com/css-minimizer-webpack-plugin/-/css-minimizer-webpack-plugin-3.2.0.tgz#f59c56ec11137b37f000081bd19b450095094ad2" - integrity sha512-5q4myvkmm29jRlI73Fl8Mc008i6o6hCEKnV6/fOrzRVDWD6EFGwDRX+SM2qCVeZ7XiztRDKHpTGDUeUMAOOagg== +css-minimizer-webpack-plugin@^3.4.1: + version "3.4.1" + resolved "https://registry.yarnpkg.com/css-minimizer-webpack-plugin/-/css-minimizer-webpack-plugin-3.4.1.tgz#ab78f781ced9181992fe7b6e4f3422e76429878f" + integrity sha512-1u6D71zeIfgngN2XNRJefc/hY7Ybsxd74Jm4qngIXyUEk7fss3VUzuHxLAq/R8NAba4QU9OUSaMZlbpRc7bM4Q== dependencies: - "@types/cssnano" "^4.0.1" cssnano "^5.0.6" jest-worker "^27.0.2" postcss "^8.3.5" @@ -11033,10 +11035,10 @@ min-indent@^1.0.0: resolved "https://registry.yarnpkg.com/min-indent/-/min-indent-1.0.1.tgz#a63f681673b30571fbe8bc25686ae746eefa9869" integrity sha512-I9jwMn07Sy/IwOj3zVkVik2JTvgpaykDZEigL6Rx6N9LbMywwUSMtxET+7lVoDLLd3O3IXwJwvuuns8UB/HeAg== -mini-css-extract-plugin@2.4.5: - version "2.4.5" - resolved "https://registry.yarnpkg.com/mini-css-extract-plugin/-/mini-css-extract-plugin-2.4.5.tgz#191d6c170226037212c483af1180b4010b7b9eef" - integrity sha512-oEIhRucyn1JbT/1tU2BhnwO6ft1jjH1iCX9Gc59WFMg0n5773rQU0oyQ0zzeYFFuBfONaRbQJyGoPtuNseMxjA== +mini-css-extract-plugin@^2.6.0: + version "2.6.0" + resolved "https://registry.yarnpkg.com/mini-css-extract-plugin/-/mini-css-extract-plugin-2.6.0.tgz#578aebc7fc14d32c0ad304c2c34f08af44673f5e" + integrity sha512-ndG8nxCEnAemsg4FSgS+yNyHKgkTB4nPKqCOgh65j3/30qqC5RaSQQXMm++Y6sb6E1zRSxPkztj9fqxhS1Eo6w== dependencies: schema-utils "^4.0.0" @@ -12906,14 +12908,6 @@ postcss-value-parser@^4.0.2, postcss-value-parser@^4.1.0, postcss-value-parser@^ resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz#723c09920836ba6d3e5af019f92bc0971c02e514" integrity sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ== -"postcss@5 - 7", postcss@^7.0.0, postcss@^7.0.1, postcss@^7.0.14, postcss@^7.0.26, postcss@^7.0.27, postcss@^7.0.32, postcss@^7.0.35, postcss@^7.0.36, postcss@^7.0.5, postcss@^7.0.6: - version "7.0.39" - resolved "https://registry.yarnpkg.com/postcss/-/postcss-7.0.39.tgz#9624375d965630e2e1f2c02a935c82a59cb48309" - integrity sha512-yioayjNbHn6z1/Bywyb2Y4s3yvDAeXGOyxqD+LnVOinq6Mdmd++SW2wUNVzavyyHxd6+DxzWGIuosg6P1Rj8uA== - dependencies: - picocolors "^0.2.1" - source-map "^0.6.1" - postcss@8.4.4: version "8.4.4" resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.4.tgz#d53d4ec6a75fd62557a66bb41978bf47ff0c2869" @@ -12932,6 +12926,14 @@ postcss@^6.0.14, postcss@^6.0.2: source-map "^0.6.1" supports-color "^5.4.0" +postcss@^7.0.0, postcss@^7.0.1, postcss@^7.0.14, postcss@^7.0.26, postcss@^7.0.27, postcss@^7.0.32, postcss@^7.0.35, postcss@^7.0.36, postcss@^7.0.5, postcss@^7.0.6: + version "7.0.39" + resolved "https://registry.yarnpkg.com/postcss/-/postcss-7.0.39.tgz#9624375d965630e2e1f2c02a935c82a59cb48309" + integrity sha512-yioayjNbHn6z1/Bywyb2Y4s3yvDAeXGOyxqD+LnVOinq6Mdmd++SW2wUNVzavyyHxd6+DxzWGIuosg6P1Rj8uA== + dependencies: + picocolors "^0.2.1" + source-map "^0.6.1" + postcss@^8.2.15, postcss@^8.3.5: version "8.4.7" resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.7.tgz#f99862069ec4541de386bf57f5660a6c7a0875a8" @@ -13082,6 +13084,13 @@ promise.prototype.finally@^3.1.0: define-properties "^1.1.3" es-abstract "^1.19.1" +promise@^8.1.0: + version "8.1.0" + resolved "https://registry.yarnpkg.com/promise/-/promise-8.1.0.tgz#697c25c3dfe7435dd79fcd58c38a135888eaf05e" + integrity sha512-W04AqnILOL/sPRXziNicCjSNRruLAuIHEOVBazepu0545DDNGYHz7ar9ZgZ1fMU8/MA4mVxp5rkBWRi6OXIy3Q== + dependencies: + asap "~2.0.6" + prompts@2.4.2, prompts@^2.0.1, prompts@^2.4.0, prompts@^2.4.2: version "2.4.2" resolved "https://registry.yarnpkg.com/prompts/-/prompts-2.4.2.tgz#7b57e73b3a48029ad10ebd44f74b01722a4cb069" @@ -13227,7 +13236,7 @@ quick-lru@^4.0.1: resolved "https://registry.yarnpkg.com/quick-lru/-/quick-lru-4.0.1.tgz#5b8878f113a58217848c6482026c73e1ba57727f" integrity sha512-ARhCpm70fzdcvNQfPoy49IaanKkTlRWF2JMzqhcJbhSFRZv7nPTvZJdcY7301IPmvW+/p0RgIWnQDLJxifsQ7g== -raf@^3.4.0: +raf@^3.4.0, raf@^3.4.1: version "3.4.1" resolved "https://registry.yarnpkg.com/raf/-/raf-3.4.1.tgz#0742e99a4a6552f445d73e3ee0328af0ff1ede39" integrity sha512-Sq4CW4QhwOHE8ucn6J34MqtZCeWFP2aQSmrlroYgqAV1PjStIhJXxYuTgUIfkEk7zTLjmIjLmU5q+fbD1NnOJA== @@ -13290,6 +13299,18 @@ raw-loader@^4.0.2: loader-utils "^2.0.0" schema-utils "^3.0.0" +react-app-polyfill@3.0.0: + version "3.0.0" + resolved "https://registry.yarnpkg.com/react-app-polyfill/-/react-app-polyfill-3.0.0.tgz#95221e0a9bd259e5ca6b177c7bb1cb6768f68fd7" + integrity sha512-sZ41cxiU5llIB003yxxQBYrARBqe0repqPTTYBTmMqTz9szeBbE37BehCE891NZsmdZqqP+xWKdT3eo3vOzN8w== + dependencies: + core-js "^3.19.2" + object-assign "^4.1.1" + promise "^8.1.0" + raf "^3.4.1" + regenerator-runtime "^0.13.9" + whatwg-fetch "^3.6.2" + react-color@2.19.3: version "2.19.3" resolved "https://registry.yarnpkg.com/react-color/-/react-color-2.19.3.tgz#ec6c6b4568312a3c6a18420ab0472e146aa5683d" @@ -13354,6 +13375,15 @@ react-docgen@^5.0.0: node-dir "^0.1.10" strip-indent "^3.0.0" +react-dom@17.0.2: + version "17.0.2" + resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-17.0.2.tgz#ecffb6845e3ad8dbfcdc498f0d0a939736502c23" + integrity sha512-s4h96KtLDUQlsENhMn1ar8t2bEa+q/YAtj8pPPdIjPDGBDIVNsrD9aXNWqspUe6AzKCIG0C1HZZLqLV7qpOBGA== + dependencies: + loose-envify "^1.1.0" + object-assign "^4.1.1" + scheduler "^0.20.2" + react-element-to-jsx-string@^14.3.4: version "14.3.4" resolved "https://registry.yarnpkg.com/react-element-to-jsx-string/-/react-element-to-jsx-string-14.3.4.tgz#709125bc72f06800b68f9f4db485f2c7d31218a8" @@ -13425,6 +13455,14 @@ react-test-renderer@17.0.2, react-test-renderer@^17.0.0-0: react-shallow-renderer "^16.13.1" scheduler "^0.20.2" +react@17.0.2: + version "17.0.2" + resolved "https://registry.yarnpkg.com/react/-/react-17.0.2.tgz#d0b5cc516d29eb3eee383f75b62864cfb6800037" + integrity sha512-gnhPt75i/dq/z3/6q/0asP78D0u592D5L1pd7M8P+dck6Fu/jJeL6iVVK23fptSUZj8Vjf++7wXA8UNclGQcbA== + dependencies: + loose-envify "^1.1.0" + object-assign "^4.1.1" + reactcss@^1.2.0: version "1.2.3" resolved "https://registry.yarnpkg.com/reactcss/-/reactcss-1.2.3.tgz#c00013875e557b1cf0dfd9a368a1c3dab3b548dd" @@ -13570,7 +13608,7 @@ regenerate@^1.4.2: resolved "https://registry.yarnpkg.com/regenerate/-/regenerate-1.4.2.tgz#b9346d8827e8f5a32f7ba29637d398b69014848a" integrity sha512-zrceR/XhGYU/d/opr2EKO7aRHUeiBI8qjtfHqADTwZd6Szfy16la6kqD0MIUs5z5hx6AaKa+PixpPrR289+I0A== -regenerator-runtime@^0.13.4, regenerator-runtime@^0.13.7: +regenerator-runtime@^0.13.4, regenerator-runtime@^0.13.7, regenerator-runtime@^0.13.9: version "0.13.9" resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.13.9.tgz#8925742a98ffd90814988d7566ad30ca3b263b52" integrity sha512-p3VT+cOEgxFsRRA9X4lkI1E+k2/CtnKtU4gcxyaCUreilL/vqI6CdZ3wxVUx3UOUg+gnUOQQcRI7BmSI656MYA== @@ -16340,6 +16378,11 @@ whatwg-encoding@^1.0.5: dependencies: iconv-lite "0.4.24" +whatwg-fetch@^3.6.2: + version "3.6.2" + resolved "https://registry.yarnpkg.com/whatwg-fetch/-/whatwg-fetch-3.6.2.tgz#dced24f37f2624ed0281725d51d0e2e3fe677f8c" + integrity sha512-bJlen0FcuU/0EMLrdbJ7zOnW6ITZLrZMIarMUVmdKtsGvZna8vxKYaexICWPfZ8qwf9fzNq+UEIZrnSaApt6RA== + whatwg-mimetype@^2.3.0: version "2.3.0" resolved "https://registry.yarnpkg.com/whatwg-mimetype/-/whatwg-mimetype-2.3.0.tgz#3d4b1e0312d2079879f826aff18dbeeca5960fbf" From 4e921c68f36d62309cea6edce2bf6a11ca322b31 Mon Sep 17 00:00:00 2001 From: Yash Raj Chhabra Date: Mon, 18 Apr 2022 13:20:12 +0530 Subject: [PATCH 2/6] chore: set globals for styles --- .storybook/preview-head.html | 1 - src/styles/common.scss | 4 ---- src/styles/main.scss | 13 ++++++++++--- webpack.common.js | 14 +++++--------- 4 files changed, 15 insertions(+), 17 deletions(-) delete mode 100644 src/styles/common.scss diff --git a/.storybook/preview-head.html b/.storybook/preview-head.html index 89a6d9d4c..429f9c4a9 100644 --- a/.storybook/preview-head.html +++ b/.storybook/preview-head.html @@ -3,6 +3,5 @@ diff --git a/src/styles/common.scss b/src/styles/common.scss deleted file mode 100644 index bebedd6c8..000000000 --- a/src/styles/common.scss +++ /dev/null @@ -1,4 +0,0 @@ -@import 'abstracts/variables'; -@import 'abstracts/functions'; -@import 'themes/definitions-light'; -@import 'abstracts/mixins'; diff --git a/src/styles/main.scss b/src/styles/main.scss index 6b1f94b25..4d2bac668 100644 --- a/src/styles/main.scss +++ b/src/styles/main.scss @@ -1,3 +1,10 @@ -@import 'themes/default-theme'; -@import 'base/typography'; -@import 'base/css-reset'; +@import 'abstracts/variables'; +@import 'abstracts/functions'; +@import 'themes/definitions-light'; +@import 'abstracts/mixins'; + +:global { + @import 'themes/default-theme'; + @import 'base/typography'; + @import 'base/css-reset'; +} diff --git a/webpack.common.js b/webpack.common.js index 5ca4e5e42..6973139e0 100644 --- a/webpack.common.js +++ b/webpack.common.js @@ -3,10 +3,9 @@ const MiniCssExtractPlugin = require('mini-css-extract-plugin'); const CssMinimizerPlugin = require('css-minimizer-webpack-plugin'); module.exports = { - entry: [ - path.resolve(__dirname, 'src/octuple.ts'), - path.resolve(__dirname, 'src/styles/main.scss'), - ], + entry: { + octuple: [path.resolve(__dirname, 'src/octuple.ts')], + }, module: { rules: [ { @@ -37,10 +36,7 @@ module.exports = { loader: 'style-resources-loader', options: { patterns: [ - path.resolve( - __dirname, - 'src/styles/common.scss' - ), + path.resolve(__dirname, 'src/styles/main.scss'), ], }, }, @@ -63,7 +59,7 @@ module.exports = { output: { path: path.join(__dirname, 'lib'), library: 'Octuple', - filename: 'octuple.js', + filename: '[name].js', libraryTarget: 'umd', }, }; From a4d421321f9a7946b59937869b42f34eb8d4ddd8 Mon Sep 17 00:00:00 2001 From: Yash Raj Chhabra Date: Mon, 18 Apr 2022 13:25:41 +0530 Subject: [PATCH 3/6] chore: deps cleanup --- package.json | 7 +------ yarn.lock | 59 ++++------------------------------------------------ 2 files changed, 5 insertions(+), 61 deletions(-) diff --git a/package.json b/package.json index e915db5f2..33b9355c9 100644 --- a/package.json +++ b/package.json @@ -44,12 +44,7 @@ "@mdi/react": "1.5.0", "bodymovin": "4.13.0", "lottie-web": "5.8.1", - "react-flip-toolkit": "7.0.13", - "@types/react": "17.0.39", - "@types/react-dom": "17.0.11", - "react": "17.0.2", - "react-app-polyfill": "3.0.0", - "react-dom": "17.0.2" + "react-flip-toolkit": "7.0.13" }, "peerDependencies": { "@types/react": "17.0.39", diff --git a/yarn.lock b/yarn.lock index 858a5b98e..141f9335d 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3290,7 +3290,7 @@ "@types/react" "*" "@types/reactcss" "*" -"@types/react-dom@*", "@types/react-dom@17.0.11": +"@types/react-dom@*": version "17.0.11" resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-17.0.11.tgz#e1eadc3c5e86bdb5f7684e00274ae228e7bcc466" integrity sha512-f96K3k+24RaLGVu/Y2Ng3e1EbZ8/cVJvypZWd7cy0ofCBaf2lcM46xNhycMZ2xGwbBjRql7hOlZ+e2WlJ5MH3Q== @@ -3311,7 +3311,7 @@ dependencies: "@types/react" "*" -"@types/react@*", "@types/react@17.0.39": +"@types/react@*": version "17.0.39" resolved "https://registry.yarnpkg.com/@types/react/-/react-17.0.39.tgz#d0f4cde092502a6db00a1cded6e6bf2abb7633ce" integrity sha512-UVavlfAxDd/AgAacMa60Azl7ygyQNRwC/DsHZmKgNvPmRR5p70AJ5Q9EAmL2NWOJmeV+vVUI4IAP7GZrN8h8Ug== @@ -4390,11 +4390,6 @@ arrify@^2.0.1: resolved "https://registry.yarnpkg.com/arrify/-/arrify-2.0.1.tgz#c9655e9331e0abcd588d2a7cad7e9956f66701fa" integrity sha512-3duEwti880xqi4eAMN8AyR4a0ByT90zoYdLlevfrvU43vb0YZwZVfxOgxWrLXXXpyugL0hNZc9G6BiB5B3nUug== -asap@~2.0.6: - version "2.0.6" - resolved "https://registry.yarnpkg.com/asap/-/asap-2.0.6.tgz#e50347611d7e690943208bbdafebcbc2fb866d46" - integrity sha1-5QNHYR1+aQlDIIu9r+vLwvuGbUY= - asn1.js@^5.2.0: version "5.4.1" resolved "https://registry.yarnpkg.com/asn1.js/-/asn1.js-5.4.1.tgz#11a980b84ebb91781ce35b0fdc2ee294e3783f07" @@ -5986,11 +5981,6 @@ core-js@^3.0.4, core-js@^3.6.5, core-js@^3.8.2: resolved "https://registry.yarnpkg.com/core-js/-/core-js-3.21.1.tgz#f2e0ddc1fc43da6f904706e8e955bc19d06a0d94" integrity sha512-FRq5b/VMrWlrmCzwRrpDYNxyHP9BcAZC+xHJaqTgIE5091ZV1NTmyh0sGOg5XqpnHvR0svdy0sv1gWA1zmhxig== -core-js@^3.19.2: - version "3.22.0" - resolved "https://registry.yarnpkg.com/core-js/-/core-js-3.22.0.tgz#b52007870c5e091517352e833b77f0b2d2b259f3" - integrity sha512-8h9jBweRjMiY+ORO7bdWSeWfHhLPO7whobj7Z2Bl0IDo00C228EdGgH7FE4jGumbEjzcFfkfW8bXgdkEDhnwHQ== - core-util-is@~1.0.0: version "1.0.3" resolved "https://registry.yarnpkg.com/core-util-is/-/core-util-is-1.0.3.tgz#a6042d3634c2b27e9328f837b965fac83808db85" @@ -13084,13 +13074,6 @@ promise.prototype.finally@^3.1.0: define-properties "^1.1.3" es-abstract "^1.19.1" -promise@^8.1.0: - version "8.1.0" - resolved "https://registry.yarnpkg.com/promise/-/promise-8.1.0.tgz#697c25c3dfe7435dd79fcd58c38a135888eaf05e" - integrity sha512-W04AqnILOL/sPRXziNicCjSNRruLAuIHEOVBazepu0545DDNGYHz7ar9ZgZ1fMU8/MA4mVxp5rkBWRi6OXIy3Q== - dependencies: - asap "~2.0.6" - prompts@2.4.2, prompts@^2.0.1, prompts@^2.4.0, prompts@^2.4.2: version "2.4.2" resolved "https://registry.yarnpkg.com/prompts/-/prompts-2.4.2.tgz#7b57e73b3a48029ad10ebd44f74b01722a4cb069" @@ -13236,7 +13219,7 @@ quick-lru@^4.0.1: resolved "https://registry.yarnpkg.com/quick-lru/-/quick-lru-4.0.1.tgz#5b8878f113a58217848c6482026c73e1ba57727f" integrity sha512-ARhCpm70fzdcvNQfPoy49IaanKkTlRWF2JMzqhcJbhSFRZv7nPTvZJdcY7301IPmvW+/p0RgIWnQDLJxifsQ7g== -raf@^3.4.0, raf@^3.4.1: +raf@^3.4.0: version "3.4.1" resolved "https://registry.yarnpkg.com/raf/-/raf-3.4.1.tgz#0742e99a4a6552f445d73e3ee0328af0ff1ede39" integrity sha512-Sq4CW4QhwOHE8ucn6J34MqtZCeWFP2aQSmrlroYgqAV1PjStIhJXxYuTgUIfkEk7zTLjmIjLmU5q+fbD1NnOJA== @@ -13299,18 +13282,6 @@ raw-loader@^4.0.2: loader-utils "^2.0.0" schema-utils "^3.0.0" -react-app-polyfill@3.0.0: - version "3.0.0" - resolved "https://registry.yarnpkg.com/react-app-polyfill/-/react-app-polyfill-3.0.0.tgz#95221e0a9bd259e5ca6b177c7bb1cb6768f68fd7" - integrity sha512-sZ41cxiU5llIB003yxxQBYrARBqe0repqPTTYBTmMqTz9szeBbE37BehCE891NZsmdZqqP+xWKdT3eo3vOzN8w== - dependencies: - core-js "^3.19.2" - object-assign "^4.1.1" - promise "^8.1.0" - raf "^3.4.1" - regenerator-runtime "^0.13.9" - whatwg-fetch "^3.6.2" - react-color@2.19.3: version "2.19.3" resolved "https://registry.yarnpkg.com/react-color/-/react-color-2.19.3.tgz#ec6c6b4568312a3c6a18420ab0472e146aa5683d" @@ -13375,15 +13346,6 @@ react-docgen@^5.0.0: node-dir "^0.1.10" strip-indent "^3.0.0" -react-dom@17.0.2: - version "17.0.2" - resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-17.0.2.tgz#ecffb6845e3ad8dbfcdc498f0d0a939736502c23" - integrity sha512-s4h96KtLDUQlsENhMn1ar8t2bEa+q/YAtj8pPPdIjPDGBDIVNsrD9aXNWqspUe6AzKCIG0C1HZZLqLV7qpOBGA== - dependencies: - loose-envify "^1.1.0" - object-assign "^4.1.1" - scheduler "^0.20.2" - react-element-to-jsx-string@^14.3.4: version "14.3.4" resolved "https://registry.yarnpkg.com/react-element-to-jsx-string/-/react-element-to-jsx-string-14.3.4.tgz#709125bc72f06800b68f9f4db485f2c7d31218a8" @@ -13455,14 +13417,6 @@ react-test-renderer@17.0.2, react-test-renderer@^17.0.0-0: react-shallow-renderer "^16.13.1" scheduler "^0.20.2" -react@17.0.2: - version "17.0.2" - resolved "https://registry.yarnpkg.com/react/-/react-17.0.2.tgz#d0b5cc516d29eb3eee383f75b62864cfb6800037" - integrity sha512-gnhPt75i/dq/z3/6q/0asP78D0u592D5L1pd7M8P+dck6Fu/jJeL6iVVK23fptSUZj8Vjf++7wXA8UNclGQcbA== - dependencies: - loose-envify "^1.1.0" - object-assign "^4.1.1" - reactcss@^1.2.0: version "1.2.3" resolved "https://registry.yarnpkg.com/reactcss/-/reactcss-1.2.3.tgz#c00013875e557b1cf0dfd9a368a1c3dab3b548dd" @@ -13608,7 +13562,7 @@ regenerate@^1.4.2: resolved "https://registry.yarnpkg.com/regenerate/-/regenerate-1.4.2.tgz#b9346d8827e8f5a32f7ba29637d398b69014848a" integrity sha512-zrceR/XhGYU/d/opr2EKO7aRHUeiBI8qjtfHqADTwZd6Szfy16la6kqD0MIUs5z5hx6AaKa+PixpPrR289+I0A== -regenerator-runtime@^0.13.4, regenerator-runtime@^0.13.7, regenerator-runtime@^0.13.9: +regenerator-runtime@^0.13.4, regenerator-runtime@^0.13.7: version "0.13.9" resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.13.9.tgz#8925742a98ffd90814988d7566ad30ca3b263b52" integrity sha512-p3VT+cOEgxFsRRA9X4lkI1E+k2/CtnKtU4gcxyaCUreilL/vqI6CdZ3wxVUx3UOUg+gnUOQQcRI7BmSI656MYA== @@ -16378,11 +16332,6 @@ whatwg-encoding@^1.0.5: dependencies: iconv-lite "0.4.24" -whatwg-fetch@^3.6.2: - version "3.6.2" - resolved "https://registry.yarnpkg.com/whatwg-fetch/-/whatwg-fetch-3.6.2.tgz#dced24f37f2624ed0281725d51d0e2e3fe677f8c" - integrity sha512-bJlen0FcuU/0EMLrdbJ7zOnW6ITZLrZMIarMUVmdKtsGvZna8vxKYaexICWPfZ8qwf9fzNq+UEIZrnSaApt6RA== - whatwg-mimetype@^2.3.0: version "2.3.0" resolved "https://registry.yarnpkg.com/whatwg-mimetype/-/whatwg-mimetype-2.3.0.tgz#3d4b1e0312d2079879f826aff18dbeeca5960fbf" From 8c45750d12013190fed7b9b425ef6619eec79257 Mon Sep 17 00:00:00 2001 From: Yash Raj Chhabra Date: Mon, 18 Apr 2022 13:31:16 +0530 Subject: [PATCH 4/6] chore: update deps --- package.json | 4 ++-- yarn.lock | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/package.json b/package.json index 33b9355c9..ac6a6b3d1 100644 --- a/package.json +++ b/package.json @@ -100,7 +100,7 @@ "clean-webpack-plugin": "3.0.0", "copy-webpack-plugin": "6.0.1", "css-loader": "6.5.1", - "css-minimizer-webpack-plugin": "^3.4.1", + "css-minimizer-webpack-plugin": "3.4.1", "cssnano": "4.1.10", "dotenv": "10.0.0", "dotenv-expand": "5.1.0", @@ -126,7 +126,7 @@ "jest-resolve": "27.4.2", "jest-watch-typeahead": "1.0.0", "lint-staged": "12.3.6", - "mini-css-extract-plugin": "^2.6.0", + "mini-css-extract-plugin": "2.6.0", "postcss": "8.4.4", "postcss-flexbugs-fixes": "5.0.2", "postcss-loader": "6.2.1", diff --git a/yarn.lock b/yarn.lock index 141f9335d..aacab597f 100644 --- a/yarn.lock +++ b/yarn.lock @@ -6210,7 +6210,7 @@ css-loader@^5.0.1: schema-utils "^3.0.0" semver "^7.3.5" -css-minimizer-webpack-plugin@^3.4.1: +css-minimizer-webpack-plugin@3.4.1: version "3.4.1" resolved "https://registry.yarnpkg.com/css-minimizer-webpack-plugin/-/css-minimizer-webpack-plugin-3.4.1.tgz#ab78f781ced9181992fe7b6e4f3422e76429878f" integrity sha512-1u6D71zeIfgngN2XNRJefc/hY7Ybsxd74Jm4qngIXyUEk7fss3VUzuHxLAq/R8NAba4QU9OUSaMZlbpRc7bM4Q== @@ -11025,7 +11025,7 @@ min-indent@^1.0.0: resolved "https://registry.yarnpkg.com/min-indent/-/min-indent-1.0.1.tgz#a63f681673b30571fbe8bc25686ae746eefa9869" integrity sha512-I9jwMn07Sy/IwOj3zVkVik2JTvgpaykDZEigL6Rx6N9LbMywwUSMtxET+7lVoDLLd3O3IXwJwvuuns8UB/HeAg== -mini-css-extract-plugin@^2.6.0: +mini-css-extract-plugin@2.6.0: version "2.6.0" resolved "https://registry.yarnpkg.com/mini-css-extract-plugin/-/mini-css-extract-plugin-2.6.0.tgz#578aebc7fc14d32c0ad304c2c34f08af44673f5e" integrity sha512-ndG8nxCEnAemsg4FSgS+yNyHKgkTB4nPKqCOgh65j3/30qqC5RaSQQXMm++Y6sb6E1zRSxPkztj9fqxhS1Eo6w== From d5ec3d4d2635a7c5039fb7098d4334775653c381 Mon Sep 17 00:00:00 2001 From: Yash Raj Chhabra Date: Mon, 18 Apr 2022 13:53:02 +0530 Subject: [PATCH 5/6] chore: use mode to use style-loader --- .storybook/main.js | 3 +-- package.json | 2 +- webpack.common.js | 8 +++++--- webpack.dev.js | 29 ++++++++++++++++------------- webpack.prod.js | 27 +++++++++++++++------------ 5 files changed, 38 insertions(+), 31 deletions(-) diff --git a/.storybook/main.js b/.storybook/main.js index d7dc1bf9e..204f5e7da 100644 --- a/.storybook/main.js +++ b/.storybook/main.js @@ -1,5 +1,4 @@ -const path = require('path'); -const webpackCommon = require('../webpack.common'); +const webpackCommon = require('../webpack.common')({}, { mode: 'development' }); module.exports = { stories: [ diff --git a/package.json b/package.json index ac6a6b3d1..80c0034f8 100644 --- a/package.json +++ b/package.json @@ -9,7 +9,7 @@ "build-storybook": "rm -rf dist && mkdir dist && build-storybook -o dist", "build": "rm -rf lib && npm run lint && webpack --config webpack.prod.js --mode production", "details": "webpack --config webpack.dev.js --mode development --stats-error-details", - "analyze": "webpack --config webpack.dev.js --mode development --json > stats.json", + "analyze": "webpack --config webpack.dev.js --mode production --json > stats.json", "prepublish": "yarn build", "test": "jest", "lint": "eslint . --ext .js,.jsx,.ts,.tsx", diff --git a/webpack.common.js b/webpack.common.js index 6973139e0..8fca78a94 100644 --- a/webpack.common.js +++ b/webpack.common.js @@ -2,7 +2,7 @@ const path = require('path'); const MiniCssExtractPlugin = require('mini-css-extract-plugin'); const CssMinimizerPlugin = require('css-minimizer-webpack-plugin'); -module.exports = { +module.exports = (_, { mode }) => ({ entry: { octuple: [path.resolve(__dirname, 'src/octuple.ts')], }, @@ -19,7 +19,9 @@ module.exports = { exclude: /node_modules/, include: path.resolve(__dirname, 'src'), use: [ - MiniCssExtractPlugin.loader, + mode === 'production' + ? MiniCssExtractPlugin.loader + : 'style-loader', '@teamsupercell/typings-for-css-modules-loader', { loader: 'css-loader', @@ -62,4 +64,4 @@ module.exports = { filename: '[name].js', libraryTarget: 'umd', }, -}; +}); diff --git a/webpack.dev.js b/webpack.dev.js index 95f2e983d..89018e1b3 100644 --- a/webpack.dev.js +++ b/webpack.dev.js @@ -5,17 +5,20 @@ const WebpackCommonConfig = require('./webpack.common'); process.env.NODE_ENV = 'development'; -module.exports = { - ...WebpackCommonConfig, - plugins: [ - ...WebpackCommonConfig.plugins, - new webpack.DefinePlugin({ - VERSION: JSON.stringify(require('./package.json').version), - }), - new BundleAnalyzerPlugin({ - options: { - generateStatsFile: true, - }, - }), - ], +module.exports = (_, argv) => { + const commonConfig = WebpackCommonConfig(_, argv); + return { + ...commonConfig, + plugins: [ + ...commonConfig.plugins, + new webpack.DefinePlugin({ + VERSION: JSON.stringify(require('./package.json').version), + }), + new BundleAnalyzerPlugin({ + options: { + generateStatsFile: true, + }, + }), + ], + }; }; diff --git a/webpack.prod.js b/webpack.prod.js index 56decd501..6fed2a03b 100644 --- a/webpack.prod.js +++ b/webpack.prod.js @@ -3,16 +3,19 @@ const WebpackCommonConfig = require('./webpack.common'); process.env.NODE_ENV = 'production'; -module.exports = { - ...WebpackCommonConfig, - externals: { - react: 'commonjs react', - 'react-dom': 'commonjs react-dom', - }, - plugins: [ - ...WebpackCommonConfig.plugins, - new webpack.DefinePlugin({ - VERSION: JSON.stringify(require('./package.json').version), - }), - ], +module.exports = (_, argv) => { + const commonConfig = WebpackCommonConfig(_, argv); + return { + ...commonConfig, + externals: { + react: 'commonjs react', + 'react-dom': 'commonjs react-dom', + }, + plugins: [ + ...commonConfig.plugins, + new webpack.DefinePlugin({ + VERSION: JSON.stringify(require('./package.json').version), + }), + ], + }; }; From b13c5de58e7d53ebca91db80b443b9301b371447 Mon Sep 17 00:00:00 2001 From: Yash Raj Chhabra Date: Mon, 18 Apr 2022 14:00:01 +0530 Subject: [PATCH 6/6] chore: use configType for webpack mode in storybook --- .storybook/main.js | 15 +++++++++++---- 1 file changed, 11 insertions(+), 4 deletions(-) diff --git a/.storybook/main.js b/.storybook/main.js index 204f5e7da..fd5e81bd6 100644 --- a/.storybook/main.js +++ b/.storybook/main.js @@ -1,4 +1,4 @@ -const webpackCommon = require('../webpack.common')({}, { mode: 'development' }); +const webpackCommon = require('../webpack.common'); module.exports = { stories: [ @@ -28,11 +28,18 @@ module.exports = { }, }, webpackFinal: async (config, { configType }) => { + const webpackCommonConfig = webpackCommon( + {}, + { mode: configType.toLowerCase() } + ); return { ...config, - optimization: webpackCommon.optimization, - plugins: [...config.plugins, ...webpackCommon.plugins], - module: { ...config.module, rules: webpackCommon.module.rules }, + optimization: webpackCommonConfig.optimization, + plugins: [...config.plugins, ...webpackCommonConfig.plugins], + module: { + ...config.module, + rules: webpackCommonConfig.module.rules, + }, }; }, };