Add support for CSS Modules within Storybook (they weren't rendered p…

…roperly before, even though it didn't break)

.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',
   ],
 };

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"

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;
+}

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

yarn.lock

@@ -16161,6 +16161,11 @@ [email protected]:
   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==
 
+[email protected]:
+  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==
+
 [email protected]:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/stream-browserify/-/stream-browserify-3.0.0.tgz#22b0a2850cdf6503e73085da1fc7b7d0c2122f2f"