diff --git a/packages/octuple/.storybook/main.js b/packages/octuple/.storybook/main.js
index dd2744937..fd5e81bd6 100644
--- 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
index d59e4c75b..f608b029d 100644
--- 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
-});
\ No newline at end of file
+ theme: octupleTheme,
+});
diff --git a/packages/octuple/.storybook/preview-head.html b/packages/octuple/.storybook/preview-head.html
index 682a85852..429f9c4a9 100644
--- a/packages/octuple/.storybook/preview-head.html
+++ b/packages/octuple/.storybook/preview-head.html
@@ -1,229 +1,7 @@
-
\ No newline at end of file
+
diff --git a/packages/octuple/package.json b/packages/octuple/package.json
index 6ff391e30..80c0034f8 100644
--- 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
index 5ead13efd..e170a520c 100644
--- a/packages/octuple/src/components/Pills/Pill.tsx
+++ b/packages/octuple/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/packages/octuple/src/components/Pills/pills.module.scss b/packages/octuple/src/components/Pills/pills.module.scss
index 1b73ee332..5873105e7 100644
--- 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
index dabad548f..4d2bac668 100644
--- 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';
+}
diff --git a/packages/octuple/webpack.common.js b/packages/octuple/webpack.common.js
index c64fba705..8fca78a94 100644
--- a/packages/octuple/webpack.common.js
+++ b/packages/octuple/webpack.common.js
@@ -1,20 +1,27 @@
const path = require('path');
-module.exports = {
- entry: path.resolve(__dirname, './src/octuple.ts'),
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
+
+module.exports = (_, { mode }) => ({
+ entry: {
+ octuple: [path.resolve(__dirname, 'src/octuple.ts')],
+ },
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',
+ mode === 'production'
+ ? MiniCssExtractPlugin.loader
+ : 'style-loader',
'@teamsupercell/typings-for-css-modules-loader',
{
loader: 'css-loader',
@@ -39,14 +46,22 @@ 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: {
path: path.join(__dirname, 'lib'),
library: 'Octuple',
- filename: 'octuple.js',
+ filename: '[name].js',
libraryTarget: 'umd',
},
-};
+});
diff --git a/packages/octuple/webpack.dev.js b/packages/octuple/webpack.dev.js
index 126b6f369..89018e1b3 100644
--- a/packages/octuple/webpack.dev.js
+++ b/packages/octuple/webpack.dev.js
@@ -1,19 +1,24 @@
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: [
- new webpack.DefinePlugin({
- VERSION: JSON.stringify(require('./package.json').version)
- }),
- new BundleAnalyzerPlugin({
- options: {
- generateStatsFile: true
- }
- })
- ]
-};
\ No newline at end of file
+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/packages/octuple/webpack.prod.js b/packages/octuple/webpack.prod.js
index 69d228139..6fed2a03b 100644
--- a/packages/octuple/webpack.prod.js
+++ b/packages/octuple/webpack.prod.js
@@ -1,17 +1,21 @@
const webpack = require('webpack');
-const WebpackCommonConfig = require('./webpack.common.js');
+const WebpackCommonConfig = require('./webpack.common');
process.env.NODE_ENV = 'production';
-module.exports = {
- ...WebpackCommonConfig,
- externals: {
- react: 'commonjs react',
- 'react-dom': 'commonjs react-dom',
- },
- 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),
+ }),
+ ],
+ };
};
diff --git a/packages/octuple/yarn.lock b/packages/octuple/yarn.lock
index 358edcdec..aacab597f 100644
--- a/packages/octuple/yarn.lock
+++ b/packages/octuple/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"
@@ -6217,12 +6210,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 +11025,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 +12898,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 +12916,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"