├── .gitignore
├── LICENSE
├── README.md
├── gatsby-config.js
├── package-lock.json
├── package.json
├── src
├── components
│ └── HelloWorld
│ │ ├── index.js
│ │ ├── index.module.css
│ │ └── index.stories.js
├── layouts
│ ├── index.css
│ └── index.js
└── pages
│ ├── 404.js
│ └── index.js
└── storybook
├── addons.js
├── config.js
└── webpack.config.js
/.gitignore:
--------------------------------------------------------------------------------
1 | # Project dependencies
2 | # https://www.npmjs.org/doc/misc/npm-faq.html#should-i-check-my-node_modules-folder-into-git
3 | node_modules
4 | .cache/
5 | # Build directory
6 | public/
7 | .DS_Store
8 | yarn-error.log
9 | yarn.lock
10 |
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | The MIT License (MIT)
2 |
3 | Copyright (c) 2015 gatsbyjs
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
23 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # gatsby-storybook-css-modules
2 |
3 | # UPDATE
4 |
5 | This example is for use with Gatsby v1. If you're using Gatsby v2 you should refer to [Gatsby's docs on using Storybook with Gatsby](https://www.gatsbyjs.org/docs/visual-testing-with-storybook/).
6 |
7 | ## About
8 | An example of using [Gatsby](https://www.gatsbyjs.org) with [Storybook](https://storybook.js.org/) and [CSS Modules](https://github.com/css-modules/css-modules). Based on Gatsby's default starter.
9 |
10 | Storybook is configured to match Gatsby's CSS Modules and cssnext setup. This means that CSS files that end with `.module.css` will be processed as CSS Modules, while all other CSS files will be processed as standard CSS.
11 |
12 | ## Requirements
13 |
14 | Built with:
15 |
16 | - NodeJs v8.5.0 or above
17 | - [Yarn](https://github.com/yarnpkg/yarn) v1.1.0 or above
18 |
19 | > Note: You _must_ use Yarn instead of npm, due to usage of Yarn's alias feature to configure Storybook's dependencies. See https://twitter.com/sebmck/status/873958247304232961?lang=en.
20 |
21 | ## Getting started
22 |
23 | - `yarn`
24 | - `yarn run develop`
25 | - In a different terminal: `yarn run storybook`
26 |
27 | Now you can browse to the Gatsby site and the Storybook on your local machine.
28 |
29 | ## Further info
30 |
31 | This config is a little unusual as Gatsby uses webpack version 1, whereas Storybook uses webpack version 3. This means that the versions of the postcss tools used in Gatsby's webpack config won't run correctly in Storybook's webpack config.
32 |
33 | To work around this, Yarn's [alias feature](https://twitter.com/sebmck/status/873958247304232961?lang=en) is used to install newer versions of these tools for Storybook to use, without overriding the older versions used by Gatsby. Note the following in `package.json`'s dependencies:
34 |
35 | ```
36 | "postcss-cssnext-3": "npm:postcss-cssnext@3",
37 | "postcss-import-11": "npm:postcss-import@11",
38 | "postcss-loader-2": "npm:postcss-loader@2",
39 | ```
40 |
41 | This allows Storybook to use these tools in `storybook/webpack.config.js`, as `postcss-loader-2`, `postcss-import-11` and `postcss-cssnext-3`
42 |
43 | > Beware of using cssnext features that are available in cssnext v3 (used in Storybook) and cssnext v2.8 (used in Gatsby).
44 |
45 |
--------------------------------------------------------------------------------
/gatsby-config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | siteMetadata: {
3 | title: `Gatsby Default Starter`,
4 | },
5 | plugins: [`gatsby-plugin-react-helmet`],
6 | }
7 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "gatsby-starter-default",
3 | "description": "Gatsby default starter",
4 | "version": "1.0.0",
5 | "author": "m-allanson",
6 | "dependencies": {
7 | "@storybook/addon-options": "^3.2.12",
8 | "@storybook/react": "^3.2.12",
9 | "gatsby": "^1.9.45",
10 | "gatsby-link": "^1.6.17",
11 | "gatsby-plugin-react-helmet": "^1.0.5",
12 | "imports-loader": "^0.7.1",
13 | "postcss-cssnext-3": "npm:postcss-cssnext@3",
14 | "postcss-import-11": "npm:postcss-import@11",
15 | "postcss-loader-2": "npm:postcss-loader@2",
16 | "react": "15",
17 | "react-dom": "15"
18 | },
19 | "keywords": [
20 | "gatsby",
21 | "storybook"
22 | ],
23 | "license": "MIT",
24 | "main": "n/a",
25 | "scripts": {
26 | "build": "gatsby build",
27 | "develop": "gatsby develop",
28 | "storybook": "start-storybook -p 9001 -c storybook",
29 | "format": "prettier --trailing-comma es5 --no-semi --single-quote --write 'src/**/*.js'",
30 | "test": "echo \"Error: no test specified\" && exit 1"
31 | },
32 | "devDependencies": {
33 | "prettier": "^1.6.1"
34 | }
35 | }
36 |
--------------------------------------------------------------------------------
/src/components/HelloWorld/index.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 |
3 | import styles from "./index.module.css";
4 |
5 | const HelloWorld = () => (
6 |
7 |
Hello,
8 | world!
9 |
10 | );
11 |
12 | export default HelloWorld;
13 |
--------------------------------------------------------------------------------
/src/components/HelloWorld/index.module.css:
--------------------------------------------------------------------------------
1 | .heading {
2 | border: 1px solid currentColor;
3 | background-color: pink;
4 | color: hotpink;
5 | margin: 0;
6 | text-align: center;
7 | padding: 5px;
8 | }
9 |
10 | .subHeading {
11 | composes: heading; /* composes is a CSS Modules feature */
12 | border-top: none;
13 |
14 | & span { /* nesting is a cssnext feature */
15 | color: rebeccapurple;
16 | }
17 | }
18 |
--------------------------------------------------------------------------------
/src/components/HelloWorld/index.stories.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import { storiesOf } from "@storybook/react";
3 |
4 | import HelloWorld from "./";
5 |
6 | const stories = storiesOf("HelloWorld", module);
7 |
8 | stories.add("Default", () => {
9 | const story =
15 |
22 |
23 |
33 |
34 |
39 |
46 |
47 |
55 | {children()}
56 |
57 |
5 |
NOT FOUND
6 |
You just hit a route that doesn't exist... the sadness.
7 |
7 |
9 | )
10 |
11 | export default IndexPage
12 |
--------------------------------------------------------------------------------
/storybook/addons.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Register storybook plugins
3 | *
4 | * https://getstorybook.io/docs/react-storybook/addons/addon-gallery
5 | */
6 |
7 | import "@storybook/addon-options/register";
8 |
--------------------------------------------------------------------------------
/storybook/config.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Config file for storybook
3 | */
4 |
5 | import { addDecorator, configure } from "@storybook/react";
6 | import { MemoryRouter } from "react-router-dom";
7 | import { setOptions } from "@storybook/addon-options";
8 | import React from "react";
9 |
10 | // Include any global CSS (standard CSS, not CSS Modules)
11 | import "../src/layouts/index.css";
12 |
13 | setOptions({
14 | name: "Example",
15 | goFullScreen: false,
16 | showLeftPanel: true,
17 | showDownPanel: false,
18 | showSearchBox: false,
19 | downPanelInRight: false
20 | });
21 |
22 | const req = require.context("../src/components", true, /stories\.js$/);
23 |
24 | function loadStories() {
25 | req.keys().forEach(filename => req(filename));
26 | }
27 |
28 | // Wrap all stories in decorator
29 | addDecorator(story => (
30 |
31 | {story()}
32 |
33 | ));
34 |
35 | configure(loadStories, module);
36 |
--------------------------------------------------------------------------------
/storybook/webpack.config.js:
--------------------------------------------------------------------------------
1 | require("imports-loader");
2 |
3 | const path = require("path");
4 | const genDefaultConfig = require("@storybook/react/dist/server/config/defaults/webpack.config.js");
5 |
6 | module.exports = (baseConfig, env) => {
7 | const config = genDefaultConfig(baseConfig, env);
8 |
9 | // Find Storybook's default CSS processing rule
10 | const cssLoaderIndex = config.module.rules.findIndex(
11 | rule => rule.test.source === `\\.css$`
12 | );
13 |
14 | if (!Number.isInteger(cssLoaderIndex))
15 | throw new Error("Could not find Storybook's CSS loader");
16 |
17 | // Exclude CSS Modules from Storybook's standard CSS processing
18 | config.module.rules[cssLoaderIndex].exclude = /\.module\.css$/;
19 |
20 | // Add specific loader rule for CSS Modules
21 | config.module.rules.push({
22 | test: /\.module\.css$/,
23 | use: [
24 | { loader: `style-loader` },
25 | {
26 | loader: "css-loader",
27 | options: {
28 | modules: true,
29 | importLoaders: 1,
30 | localIdentName: "[path]-[local]-[hash:base64:5]"
31 | }
32 | },
33 | {
34 | // Use newer versions of postcss tools
35 | loader: `postcss-loader-2`,
36 | options: {
37 | plugins: loader => [
38 | require("postcss-import-11")({ root: loader.resourcePath }),
39 | require("postcss-cssnext-3")()
40 | ]
41 | }
42 | }
43 | ],
44 | include: path.resolve(__dirname, "../src")
45 | });
46 |
47 | // ignore gatsby-link's global `__loader` variable
48 | config.module.rules.push({
49 | test: require.resolve("gatsby-link"),
50 | loaders: ["imports-loader?___loader=>{enqueue:function(){}}"]
51 | });
52 |
53 | return config;
54 | };
55 |
--------------------------------------------------------------------------------