Show styles in Storybook

Author: deadcoder0904

.storybook/main.js

@@ -1,3 +1,5 @@
+const path = require('path');
+
 module.exports = {
   stories: ['../stories/**/*.stories.(ts|tsx)'],
   addons: [
@@ -22,6 +24,17 @@ module.exports = {
       ],
     });
 
+    // Remove the existing css rule
+    config.module.rules = config.module.rules.filter(
+      f => f.test.toString() !== '/\\.css$/'
+    );
+
+    config.module.rules.push({
+      test: /\.css$/,
+      use: ['style-loader', 'css-loader'],
+      include: path.resolve(__dirname, '../src'),
+    });
+
     config.resolve.extensions.push('.ts', '.tsx');
 
     return config;

example/index.tsx

@@ -2,6 +2,7 @@ import 'react-app-polyfill/ie11';
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';
 import { ReactTypical } from '../.';
+import '../dist/styles.min.css';
 
 const App = () => {
   const hypeText = ['Creator', 'Entrepreneur', 'Doer', 'Lone Wolf'];

package-lock.json

@@ -65,6 +65,7 @@
     "@types/react-dom": "^16.9.8",
     "autoprefixer": "^9.8.5",
     "babel-loader": "^8.1.0",
+    "css-loader": "^4.2.1",
     "cssnano": "^4.1.10",
     "husky": "^4.2.5",
     "identity-obj-proxy": "^3.0.0",
@@ -73,6 +74,8 @@
     "react-dom": "^16.13.1",
     "react-is": "^16.13.1",
     "rollup-plugin-postcss": "^3.1.3",
+    "rollup-plugin-terser": "^6.1.0",
+    "style-loader": "^1.2.1",
     "ts-loader": "^8.0.1",
     "tsdx": "^0.13.2",
     "tslib": "^2.0.0",

package.json

@@ -1,4 +1,6 @@
+const path = require('path');
 const postcss = require('rollup-plugin-postcss');
+const { terser } = require('rollup-plugin-terser');
 const autoprefixer = require('autoprefixer');
 const cssnano = require('cssnano');
 
@@ -7,6 +9,8 @@ module.exports = {
     config.plugins.push(
       postcss({
         modules: true,
+        onlyModules: true,
+        autoModules: false,
         plugins: [
           autoprefixer(),
           cssnano({
@@ -15,8 +19,11 @@ module.exports = {
         ],
         inject: false,
         // only write out CSS for the first bundle (avoids pointless extra files):
-        extract: !!options.writeMeta,
-      })
+        // extract: !!options.writeMeta,
+        extract: path.resolve('dist/styles.min.css'),
+        minimize: true,
+      }),
+      terser()
     );
     return config;
   },