chore: optimize build size (EightfoldAI#66)

gclark-eightfold · Apr 27, 2022 · dc8cbee · dc8cbee
1 parent d5fdfc3
commit dc8cbee
Show file tree

Hide file tree

Showing 11 changed files with 110 additions and 347 deletions.
diff --git a/packages/octuple/.storybook/main.js b/packages/octuple/.storybook/main.js
@@ -1,4 +1,4 @@
-const path = require('path');
+const webpackCommon = require('../webpack.common');
 
 module.exports = {
     stories: [
@@ -28,57 +28,18 @@ 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')
+        const webpackCommonConfig = webpackCommon(
+            {},
+            { mode: configType.toLowerCase() }
         );
-        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, '../'),
+        return {
+            ...config,
+            optimization: webpackCommonConfig.optimization,
+            plugins: [...config.plugins, ...webpackCommonConfig.plugins],
+            module: {
+                ...config.module,
+                rules: webpackCommonConfig.module.rules,
             },
-            {
-                test: /\.svg$/,
-                use: ['@svgr/webpack', 'file-loader', 'url-loader'],
-                include: path.resolve(__dirname, '../'),
-            }
-        );
-
-        config.resolve.fallback = {
-            http: false,
         };
-
-        return config;
     },
 };
diff --git a/packages/octuple/.storybook/manager.js b/packages/octuple/.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
-});
+    theme: octupleTheme,
+});
diff --git a/packages/octuple/.storybook/preview-head.html b/packages/octuple/.storybook/preview-head.html
@@ -1,229 +1,7 @@
 <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro&display=swap" rel="stylesheet">
-<link href="https://cdn.jsdelivr.net/npm/@mdi/font@6.5.95/css/materialdesignicons.min.css" rel="stylesheet">
 
 <style>
     html, body {
         font-family: 'Source Sans Pro', sans-serif;
-        font-size: 16px;
     }
-    h2 {
-        margin-block-start: 0;
-    }
-
-    .display1 {
-        font-family: 'Source Sans Pro', sans-serif;
-        font-weight: 300;
-        font-size: 6rem;
-        line-height: 7rem;
-        letter-spacing: -0.03rem;
-    }
-
-    .display2 {
-        font-family: 'Source Sans Pro', sans-serif;
-        font-weight: 300;
-        font-size: 5rem;
-        line-height: 6rem;
-        letter-spacing: -0.03rem;
-    }
-
-    .display3 {
-        font-family: 'Source Sans Pro', sans-serif;
-        font-weight: 400;
-        font-size: 4rem;
-        line-height: 4.5rem;
-        letter-spacing: -0.02rem;
-    }
-
-    .display4 {
-        font-family: 'Source Sans Pro', sans-serif;
-        font-weight: 400;
-        font-size: 3.5rem;
-        line-height: 4rem;
-        letter-spacing: -0.02rem;
-    }
-
-    .header1 {
-        font-family: 'Source Sans Pro', sans-serif;
-        font-weight: 600;
-        font-size: 2.5rem;
-        line-height: 3rem;
-        letter-spacing: -0.02rem;
-    }
-
-    .header2 {
-        font-family: 'Source Sans Pro', sans-serif;
-        font-weight: 600;
-        font-size: 2rem;
-        line-height: 2.5rem;
-        letter-spacing: -0.01rem;
-    }
-
-    .header3 {
-        font-family: 'Source Sans Pro', sans-serif;
-        font-weight: 600;
-        font-size: 1.5rem;
-        line-height: 2rem;
-    }
-
-    .header4 {
-        font-family: 'Source Sans Pro', sans-serif;
-        font-weight: 600;
-        font-size: 1.25rem;
-        line-height: 1.5rem;
-    }
-
-    .header5 {
-        font-family: 'Source Sans Pro', sans-serif;
-        font-weight: 600;
-        font-size: 1rem;
-        line-height: 1.25rem;
-    }
-
-    .header6 {
-        font-family: 'Source Sans Pro', sans-serif;
-        font-weight: 600;
-        font-size: 0.875rem;
-        line-height: 1.25rem;
-    }
-
-    .subtitle1 {
-        font-family: 'Source Sans Pro', sans-serif;
-        font-weight: 400;
-        font-size: 2rem;
-        line-height: 2.5rem;
-        letter-spacing: -0.015rem;
-    }
-
-    .subtitle2 {
-        font-family: 'Source Sans Pro', sans-serif;
-        font-weight: 600;
-        font-size: 1.5rem;
-        line-height: 2rem;
-        letter-spacing: -0.01rem;
-    }
-
-    .pre-display {
-        font-family: 'Source Sans Pro', sans-serif;
-        font-weight: 600;
-        font-size: 1.25rem;
-        line-height: 1.75rem;
-        text-transform: uppercase;
-    }
-
-    .button1 {
-        font-family: 'Source Sans Pro', sans-serif;
-        font-weight: 600;
-        font-size: 1.25rem;
-        line-height: 1.5rem;
-    }
-    .button1.open-sans {
-        font-family: 'Open Sans', sans-serif;
-    }
-
-    .button2 {
-        font-family: 'Source Sans Pro', sans-serif;
-        font-weight: 600;
-        font-size: 1rem;
-        line-height: 1.25rem;
-    }
-    .button2.open-sans {
-        font-family: 'Open Sans', sans-serif;
-    }
-
-    .button3 {
-        font-family: 'Source Sans Pro', sans-serif;
-        font-weight: 600;
-        font-size: 0.875rem;
-        line-height: 1rem;
-    }
-    .button3.open-sans {
-        font-family: 'Open Sans', sans-serif;
-    }
-
-    .body1 {
-        font-family: 'Source Sans Pro', sans-serif;
-        font-weight: 400;
-        font-size: 1.125rem;
-        line-height: 1.5rem;
-    }
-    .body1.semibold {
-        font-weight: 600;
-    }
-    .body1.open-sans {
-        font-family: 'Open Sans', sans-serif;
-    }
-
-    .body2 {
-        font-family: 'Source Sans Pro', sans-serif;
-        font-weight: 400;
-        font-size: 1rem;
-        line-height: 1.5rem;
-    }
-    .body2.semibold {
-        font-weight: 600;
-    }
-    .body2.open-sans {
-        font-family: 'Open Sans', sans-serif;
-    }
-
-    .body3 {
-        font-family: 'Source Sans Pro', sans-serif;
-        font-weight: 400;
-        font-size: 0.875rem;
-        line-height: 1.25rem;
-    }
-    .body3.semibold {
-        font-family: 'Source Sans Pro', sans-serif;
-        font-weight: 600;
-    }
-    .body3.open-sans {
-        font-family: 'Open Sans', sans-serif;
-    }
-
-    .caption {
-        font-family: 'Source Sans Pro', sans-serif;
-        font-weight: 400;
-        font-size: 0.75rem;
-        line-height: 1rem;
-    }
-
-    .icon-material-l {
-        font-family: 'Material Design Icons';
-        font-size: 1.5rem;
-    }
-
-    .icon-material-m {
-        font-family: 'Material Design Icons';
-        font-size: 1.25rem;
-    }
-
-    .icon-material-s {
-        font-family: 'Material Design Icons';
-        font-size: 1rem;
-    }
-
-    .icon-material-xs {
-        font-family: 'Material Design Icons';
-        font-size: 0.875rem;
-    }
-
-    .octuple-menu .logo-text {
-        font-size: 2.5rem;
-        line-height: 3rem;
-        font-weight: 700;
-        font-family: 'Source Sans Pro', sans-serif;
-    }
-
-    input[type=text], input[type=search] {
-        padding: 0.5rem;
-        font-family: 'Source Sans Pro', sans-serif;
-        font-size: 1rem;
-    }
-
-    .field-label .text-style {
-        font-weight: 600;
-        font-size: 1rem;
-        line-height: 1.25rem;
-        font-family: 'Source Sans Pro', sans-serif;
-    }
-</style>
+</style>
diff --git a/packages/octuple/package.json b/packages/octuple/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",
@@ -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.2.0",
+        "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.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/packages/octuple/src/components/Pills/Pill.tsx b/packages/octuple/src/components/Pills/Pill.tsx
@@ -30,9 +30,8 @@ export const Pill: FC<PillProps> = ({
     ]);
     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/packages/octuple/src/components/Pills/pills.module.scss b/packages/octuple/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/packages/octuple/src/styles/main.scss b/packages/octuple/src/styles/main.scss
@@ -1,10 +1,10 @@
 @import 'abstracts/variables';
 @import 'abstracts/functions';
-
 @import 'themes/definitions-light';
-@import 'themes/default-theme';
-
-@import 'base/typography';
-@import 'base/css-reset';
-
 @import 'abstracts/mixins';
+
+:global {
+    @import 'themes/default-theme';
+    @import 'base/typography';
+    @import 'base/css-reset';
+}