Working Linaria config for Storybook (Webpack 5)

Readme.md

You must use Storybook with webpack5!

npx sb@next init --builder webpack5

Remember to install all nedded packages because debugging babel deps might be tricky.

Enjoy!

main.js

const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = {
  "stories": [
    "../packages/components/**/*.stories.@(js|jsx|ts|tsx)"
  ],
  "addons": [
    "@storybook/addon-links",
    "@storybook/addon-essentials"
  ],
  "core": {
    "builder": "webpack5"
  },
  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.
    // Check docs here: https://storybook.js.org/docs/react/configure/webpack#extending-storybooks-webpack-config

    config.plugins.push(new MiniCssExtractPlugin({ filename: 'styles.css' }));

    // Add Linaria loader after babel-loader
    config.module.rules.splice(1, 0, {
      test: /\.tsx?$/,
      exclude: /node_modules/,
      use: [
        {
          loader: require.resolve('@linaria/webpack-loader'),
          options: {
            sourceMap: true,
            babelOptions: {
              presets: [
                require.resolve('@babel/preset-env'),
                require.resolve('@babel/preset-typescript'),
                require.resolve('@linaria/babel-preset'),
              ],
            },
          },
        },
      ],
    });

    // Replace CSS loader
    const cssKey = config.module.rules.findIndex(x => x.test.toString() === "/\\.css$/");

    config.module.rules[cssKey] =       {
      test: /\.css$/,
      use: [
        {
          loader: MiniCssExtractPlugin.loader
        },
        {
          loader: 'css-loader',
          options: { sourceMap: true },
        },
      ],
    };
  
    return config;
  }
}

package.json

{
  "name": "@oko-press/oko-ui",
  "description": "OKO UI",
  "version": "0.1.0",
  "license": "MIT",
  "main": "dist/index.js",
  "repository": "git://github.com/OKO-press/oko-ui.git",
  "private": true,
  "engines": {
    "node": ">=10"
  },
  "scripts": {
    "build": "lerna run build",
    "dev": "storybook",
    "storybook": "BROWSER=none start-storybook -p 6006",
    "storybook:debug": "BROWSER=none start-storybook --debug-webpack -p 6006",
    "build-storybook": "build-storybook",
    "publish": "lerna build && lerna publish",
    "types:check": "tsc --skipLibCheck --noEmit",
    "format": "eslint packages/**/src --ext .js,.ts,.tsx"
  },
  "lint-staged": {
    "*.{js,ts,tsx}": [
      "yarn format"
    ]
  },
  "husky": {
    "hooks": {
      "pre-commit": "yarn types:check && lint-staged",
      "pre-push": "yarn types:check"
    }
  },
  "author": {
    "name": "OKO.press"
  },
  "workspaces": [
    "packages/components/*",
    "packages/themes/*"
  ],
  "devDependencies": {
    "@babel/core": "^7.15.0",
    "@babel/preset-env": "^7.15.0",
    "@babel/preset-react": "^7.14.5",
    "@babel/preset-typescript": "^7.15.0",
    "@linaria/babel-preset": "^3.0.0-beta.4",
    "@linaria/core": "^3.0.0-beta.4",
    "@linaria/react": "^3.0.0-beta.7",
    "@linaria/rollup": "^3.0.0-beta.7",
    "@linaria/shaker": "^3.0.0-beta.7",
    "@linaria/webpack-loader": "^3.0.0-beta.7",
    "@rollup/plugin-commonjs": "^20.0.0",
    "@rollup/plugin-typescript": "^8.2.5",
    "@storybook/addon-actions": "^6.4.0-alpha.30",
    "@storybook/addon-essentials": "^6.4.0-alpha.30",
    "@storybook/addon-links": "^6.4.0-alpha.30",
    "@storybook/builder-webpack5": "^6.4.0-alpha.30",
    "@storybook/manager-webpack5": "^6.4.0-alpha.30",
    "@storybook/react": "^6.4.0-alpha.30",
    "@types/react": "^17.0.17",
    "babel-loader": "^8.2.2",
    "lerna": "^4.0.0",
    "mini-css-extract-plugin": "^2.2.0",
    "rollup": "^2.56.2",
    "rollup-plugin-css-only": "^3.1.0",
    "rollup-plugin-flat-dts": "^1.2.4",
    "rollup-plugin-peer-deps-external": "^2.2.4",
    "tslib": "^2.3.1",
    "typescript": "^4.3.4"
  },
  "peerDependencies": {
    "react": "^17.0.2",
    "react-dom": "^17.0.2"
  },
  "dependencies": {},
  "resolutions": {
    "webpack": "^5.0.0",
    "css-loader": "^5.0.0",
    "dotenv-webpack": "^6.0.0",
    "html-webpack-plugin": "^5.0.0",
    "style-loader": "^2.0.0",
    "terser-webpack-plugin": "^5.0.0",
    "webpack-dev-middleware": "^4.1.0",
    "webpack-virtual-modules": "^0.4.2"
  }
}

Nice!