Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

chore: optimize build size #66

Merged
merged 6 commits into from
Apr 18, 2022
Merged

chore: optimize build size #66

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
fd15cd4
chore: optimize build size
ychhabra-eightfold Apr 18, 2022
4e921c6
chore: set globals for styles
ychhabra-eightfold Apr 18, 2022
a4d4213
chore: deps cleanup
ychhabra-eightfold Apr 18, 2022
8c45750
chore: update deps
ychhabra-eightfold Apr 18, 2022
d5ec3d4
chore: use mode to use style-loader
ychhabra-eightfold Apr 18, 2022
b13c5de
chore: use configType for webpack mode in storybook
ychhabra-eightfold Apr 18, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
61 changes: 11 additions & 50 deletions .storybook/main.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
const path = require('path');
const webpackCommon = require('../webpack.common');

module.exports = {
stories: [
Expand Down Expand Up @@ -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;
},
};
5 changes: 2 additions & 3 deletions .storybook/manager.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
import { addons } from '@storybook/addons';
import { themes } from '@storybook/theming';
import octupleTheme from './octupleTheme';

addons.setConfig({
theme: octupleTheme
});
theme: octupleTheme,
});
224 changes: 1 addition & 223 deletions .storybook/preview-head.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
6 changes: 3 additions & 3 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down Expand Up @@ -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",
Expand All @@ -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",
Expand Down
5 changes: 2 additions & 3 deletions src/components/Pills/Pill.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down
10 changes: 10 additions & 0 deletions src/components/Pills/pills.module.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down
12 changes: 6 additions & 6 deletions src/styles/main.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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';
}
Loading