From 777c3ce32ba13415b2ebd044b7e7b8ef1fe935a5 Mon Sep 17 00:00:00 2001
From: Dhenain Ambroise <ambroise.dhenain@gmail.com>
Date: Tue, 12 Jan 2021 11:16:11 +0100
Subject: [PATCH] Add support for CSS Modules within Storybook (they weren't
 rendered properly before, even though it didn't break)

---
 .storybook/main.js                             | 11 +++++++++++
 package.json                                   |  1 +
 src/stories/nrn/utilities/I18nLink.module.css  |  6 ++++++
 src/stories/nrn/utilities/I18nLink.stories.tsx | 12 ++++++++++++
 yarn.lock                                      |  5 +++++
 5 files changed, 35 insertions(+)
 create mode 100644 src/stories/nrn/utilities/I18nLink.module.css

diff --git a/.storybook/main.js b/.storybook/main.js
index b1da495bb..266fd0374 100644
--- a/.storybook/main.js
+++ b/.storybook/main.js
@@ -16,5 +16,16 @@ module.exports = {
      * @see https://github.com/storybookjs/storybook/tree/master/addons/google-analytics
      */
     '@storybook/addon-google-analytics',
+
+    /**
+     * Adds support for CSS Modules.
+     *
+     * Even though Next Right Now doesn't encourage the use of CSS Modules,
+     * we thought it's an interesting feature to support, which is natively supported by Next.js.
+     *
+     * @see https://www.npmjs.com/package/storybook-css-modules-preset How to configure Storybook to support CSS Modules
+     * @see https://nextjs.org/docs/basic-features/built-in-css-support#adding-component-level-css How to use CSS Modules with Next.js
+     */
+    'storybook-css-modules-preset',
   ],
 };
diff --git a/package.json b/package.json
index a1692d128..8ce0d6258 100644
--- a/package.json
+++ b/package.json
@@ -229,6 +229,7 @@
     "open-cli": "6.0.1",
     "react-test-renderer": "17.0.1",
     "storybook-addon-next-router": "2.0.3",
+    "storybook-css-modules-preset": "1.0.5",
     "ts-jest": "26.4.4",
     "typescript": "4.1.3",
     "vercel": "21.0.1"
diff --git a/src/stories/nrn/utilities/I18nLink.module.css b/src/stories/nrn/utilities/I18nLink.module.css
new file mode 100644
index 000000000..174aa2559
--- /dev/null
+++ b/src/stories/nrn/utilities/I18nLink.module.css
@@ -0,0 +1,6 @@
+/* This is a basic example to check Storybook supports using CSS Modules */
+.red {
+  margin: 10px;
+  padding: 10px;
+  background-color: red;
+}
diff --git a/src/stories/nrn/utilities/I18nLink.stories.tsx b/src/stories/nrn/utilities/I18nLink.stories.tsx
index 0a8a56945..f61791962 100644
--- a/src/stories/nrn/utilities/I18nLink.stories.tsx
+++ b/src/stories/nrn/utilities/I18nLink.stories.tsx
@@ -1,6 +1,7 @@
 import { Meta } from '@storybook/react/types-6-0';
 import React from 'react';
 import I18nLink, { Props } from '../../../components/i18n/I18nLink';
+import styles from './I18nLink.module.css';
 
 export default {
   title: 'Utilities/I18nLink',
@@ -18,6 +19,17 @@ export const SimpleLink: React.VFC<Props> = () => {
   );
 };
 
+export const LinkWithCSSModule: React.VFC<Props> = () => {
+  return (
+    <I18nLink
+      href={`/`}
+      className={styles.red}
+    >
+      Homepage (red)
+    </I18nLink>
+  );
+};
+
 export const LinkWithClass: React.VFC<Props> = () => {
   return (
     <I18nLink
diff --git a/yarn.lock b/yarn.lock
index dffd7587b..e87c3c7fe 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -16161,6 +16161,11 @@ storybook-addon-next-router@2.0.3:
   resolved "https://registry.yarnpkg.com/storybook-addon-next-router/-/storybook-addon-next-router-2.0.3.tgz#24cb0233c03749a9b416f5b191bbcd17545a3d3b"
   integrity sha512-1/q3ZYpN2Hae8ePL553J4rzVEh2rF+mVPvui2+Q7LEVvCTFgcB3Iow9xCA0P9nxNjg+oPs8Xkpb0ahXkwUAIcQ==
 
+storybook-css-modules-preset@1.0.5:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/storybook-css-modules-preset/-/storybook-css-modules-preset-1.0.5.tgz#8963bab91c42a66fc757610323d280d76a06d07b"
+  integrity sha512-NcGOdU7Woh1RMz7ftaDh6ThePRaW/5Cuh5AH5lK+5D9ue5X9cFxSvkWCZUswcGOS8Z6GNifeTx7UoH6nuWZPFg==
+
 stream-browserify@3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/stream-browserify/-/stream-browserify-3.0.0.tgz#22b0a2850cdf6503e73085da1fc7b7d0c2122f2f"