⬆️ update deps

.storybook/preview-head.html

@@ -1 +1 @@
-<!-- Pull in static files served from your Static director or the internet -->
+<link rel="stylesheet" href="/styles.css" />

.storybook/preview.js

@@ -10,7 +10,6 @@ import {
 } from '@storybook/addon-docs/blocks';
 
 import { IconsDecorator } from '../src/components/atoms/Icons';
-import '!style-loader!css-loader!./../build/styles.css';
 
 export const parameters = {
   actions: { argTypesRegex: "^on[A-Z].*" },

MIGRATION_GUIDE.md

@@ -1,5 +1,19 @@
 # Migration Guide
 
+## 1.0.2 → 1.0.3
+
+1. Upgrade all your dependencies `$ yarn upgrade-interactive --latest`
+2. Remove `css-loader` (`$ yarn remove css-loader`)
+3. Ensure Webpack 5 (`$ yarn add webpack --dev`)
+4. In `webpack.congif.js`, add after line 17: `mode: 'production',`
+5. Remove in `.storybook/preview.js`: `import '!style-loader!css-loader!./../build/styles.css';`
+6. Add in `.storybook/preview-head.html`: `<link rel="stylesheet" href="/styles.css" />`
+7. Update your NPM scripts to something like:
+  ```diff
+  -    "storybook:build": "NODE_PATH=src build-storybook",
+  +    "storybook:build": "NODE_PATH=src build-storybook && cp ./build/styles.css ./storybook-static",
+  ```
+
 ## 0.0.4 → 1.0.2
 
 1. Remove `chokidar-cli` and `postcss-cli` dependencies

package.json

@@ -15,58 +15,58 @@
     "tailwind:build": "export NODE_ENV=production && npx tailwindcss -i ./src/styles/base.css -o ./build/styles.css  --minify --purge='./src/**/*.tsx' --postcss",
     "tailwind:start": "npx tailwindcss -i ./src/styles/base.css -o ./build/styles.css --watch --jit --purge='./src/**/*.tsx' --postcss",
     "storybook:start": "yarn run clean && NODE_PATH=src start-storybook -s ./build -p 6006",
-    "storybook:build": "NODE_PATH=src build-storybook",
+    "storybook:build": "NODE_PATH=src build-storybook && cp ./build/styles.css ./storybook-static",
     "modules:build": "webpack",
     "start": "concurrently \"yarn tailwind:start\" \"yarn storybook:start\"",
     "build": "yarn tailwind:build && yarn run modules:build",
     "build:styleguide": "yarn tailwind:build && yarn run storybook:build",
     "generate": "npx generact"
   },
   "dependencies": {
-    "autoprefixer": "^10.2.6",
+    "autoprefixer": "^10.3.4",
     "fs-extra": "^10.0.0",
-    "postcss": "^8.3.5",
+    "postcss": "^8.3.6",
     "postcss-import": "^14.0.2",
-    "postcss-nested": "^5.0.5",
+    "postcss-nested": "^5.0.6",
     "postcss-preset-env": "^6.7.0",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
-    "tailwindcss": "^2.2.4"
+    "tailwindcss": "^2.2.15"
   },
   "devDependencies": {
-    "@babel/core": "^7.14.6",
-    "@storybook/addon-actions": "^6.3.0",
-    "@storybook/addon-essentials": "^6.3.0",
-    "@storybook/addon-links": "^6.3.0",
-    "@storybook/react": "^6.3.0",
-    "@storybook/theming": "^6.3.0",
+    "@babel/core": "^7.15.5",
+    "@storybook/addon-actions": "^6.3.8",
+    "@storybook/addon-essentials": "^6.3.8",
+    "@storybook/addon-links": "^6.3.8",
+    "@storybook/react": "^6.3.8",
+    "@storybook/theming": "^6.3.8",
     "@svgr/webpack": "^5.5.0",
-    "@types/jest": "^26.0.23",
-    "@types/react": "^17.0.11",
-    "@types/react-dom": "^17.0.8",
-    "@typescript-eslint/eslint-plugin": "^4.28.0",
-    "@typescript-eslint/parser": "^4.28.0",
+    "@types/jest": "^27.0.1",
+    "@types/react": "^17.0.21",
+    "@types/react-dom": "^17.0.9",
+    "@typescript-eslint/eslint-plugin": "^4.31.1",
+    "@typescript-eslint/parser": "^4.31.1",
     "@whitespace/storybook-addon-html": "^5.0.0",
     "babel-eslint": "^10.1.0",
-    "concurrently": "^6.2.0",
-    "css-loader": "^5.2.6",
-    "eslint": "^7.29.0",
-    "eslint-config-airbnb-typescript": "^12.3.1",
+    "concurrently": "^6.2.1",
+    "eslint": "^7.32.0",
+    "eslint-config-airbnb-typescript": "^14.0.0",
     "eslint-config-prettier": "^8.3.0",
-    "eslint-import-resolver-typescript": "^2.4.0",
+    "eslint-import-resolver-typescript": "^2.5.0",
     "eslint-plugin-html": "^6.1.2",
-    "eslint-plugin-import": "^2.23.4",
+    "eslint-plugin-import": "^2.24.2",
     "eslint-plugin-jsx-a11y": "^6.4.1",
-    "eslint-plugin-prettier": "^3.4.0",
-    "eslint-plugin-react": "^7.24.0",
+    "eslint-plugin-prettier": "^4.0.0",
+    "eslint-plugin-react": "^7.25.2",
     "eslint-plugin-react-hooks": "^4.2.0",
     "eslint-plugin-simple-import-sort": "^7.0.0",
     "eslint-plugin-tailwind": "^0.2.1",
-    "husky": "^6.0.0",
-    "lint-staged": "^11.0.0",
-    "prettier": "^2.3.1",
-    "ts-loader": "^9.2.3",
-    "typescript": "^4.3.4",
-    "webpack-cli": "^4.7.2"
+    "husky": "^7.0.2",
+    "lint-staged": "^11.1.2",
+    "prettier": "^2.4.1",
+    "ts-loader": "^9.2.5",
+    "typescript": "^4.4.3",
+    "webpack": "^5.53.0",
+    "webpack-cli": "^4.8.0"
   }
 }

src/modules/collapse-react.tsx

@@ -7,7 +7,7 @@ import { Props } from 'components/molecules/CollapseReact/CollapseReact';
 const roots = document.querySelectorAll('.sb-collapse');
 roots.forEach(root => {
   if (root instanceof HTMLElement) {
-    const data = root?.dataset as Props;
+    const data = root?.dataset as unknown as Props;
     const content = root?.innerHTML;
     ReactDOM.render(<CollapseReact {...data}>{content}</CollapseReact>, root);
   }

webpack.config.js

@@ -15,6 +15,7 @@ const entry = modules.reduce(
 
 module.exports = {
   entry,
+  mode: 'production',
   output: {
     path: path.resolve(__dirname, 'build'),
     filename: '[name].bundle.js',