Refactored styling import (#1327)

* Refactored styling import * Fix import * as
FDMediagroep · May 2, 2024 · 61e3c43 · 61e3c43
1 parent eb3035c
commit 61e3c43
Show file tree

Hide file tree

Showing 94 changed files with 633 additions and 620 deletions.
diff --git a/__mocks__/styleMock.js b/__mocks__/styleMock.js
@@ -0,0 +1,12 @@
+module.exports = new Proxy(
+    {},
+    {
+        get: function getter(target, key) {
+            if (key === '__esModule') {
+                // True instead of false to pretend we're an ES module.
+                return true;
+            }
+            return key;
+        },
+    }
+);
diff --git a/jest.config.js b/jest.config.js
@@ -8,7 +8,8 @@ const customJestConfig = {
     coverageReporters: ['lcov', 'text'],
     testPathIgnorePatterns: ['/cypress/', '__tests__/mockdata/'],
     moduleNameMapper: {
-        '\\.(css|less|scss|sss|styl)$': 'identity-obj-proxy',
+        '^.+\\.(svg)$': '<rootDir>/__mocks__/fileMock.js',
+        '\\.(css|less|scss|sss|styl)$': '<rootDir>/__mocks__/styleMock.js',
     },
     setupFilesAfterEnv: ['<rootDir>/jest.setup.ts'],
     testEnvironment: 'jest-environment-jsdom',
@@ -23,19 +24,4 @@ const customJestConfig = {
     },
 };
 
-/**
- * We handle SVG in our own way instead of letting Next.js use next/image.
- * @param {} config
- * @returns
- */
-const fdmgJestConfig = async (config) => {
-    const nextConfig = { ...config };
-    nextConfig.moduleNameMapper = {
-        '^.+\\.(svg)$': '<rootDir>/__mocks__/fileMock.js',
-        ...nextConfig.moduleNameMapper,
-    };
-    return nextConfig;
-};
-
-// createJestConfig is exported this way to ensure that next/jest can load the Next.js config which is async
-module.exports = fdmgJestConfig(customJestConfig);
+module.exports = customJestConfig;
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -69,7 +69,6 @@
         "eslint-plugin-next": "^0.0.0",
         "eslint-plugin-prettier": "^5.1.3",
         "fetch-jsonp": "^1.3.0",
-        "identity-obj-proxy": "^3.0.0",
         "jest": "^29.7.0",
         "jest-environment-jsdom": "^29.7.0",
         "json-to-scss": "^1.6.2",

diff --git a/pages/[section]/[id]/[title].tsx b/pages/[section]/[id]/[title].tsx
@@ -1,7 +1,7 @@
 import React, { useState, useEffect } from 'react';
 import '@fdmg/css-grid/css/grid.css';
 import '@fdmg/css-grid/css/flex.css';
-import styles from './Article.module.scss';
+import * as styles from './Article.module.scss';
 import { mergeInlineContent } from '../../../src/utils/articleContent';
 import PageStore from '../../../src/stores/PageStore';
 import { OEmbedLoader } from '../../../src/utils/OEmbedLoader';
@@ -52,7 +52,7 @@ function Article(props: Props) {
 
     try {
         return (
-            <article className={styles.article}>
+            <article className={styles['article']}>
                 <Head>
                     <meta name="robots" content="noindex" />
                 </Head>
@@ -79,7 +79,7 @@ function Article(props: Props) {
                         ]}
                     >
                         <GridContainer
-                            className={styles.content}
+                            className={styles['content']}
                             attributes={['grid']}
                         >
                             <GridContainer attributes={['xs-12', 'gap-bottom']}>
@@ -92,7 +92,7 @@ function Article(props: Props) {
                                     />
 
                                     <h1>{props.json.title}</h1>
-                                    <p className={styles.intro}>
+                                    <p className={styles['intro']}>
                                         {props.json.intro}
                                     </p>
                                 </header>
@@ -110,12 +110,12 @@ function Article(props: Props) {
                     />
 
                     <GridContainer
-                        className={styles.fullHeight}
+                        className={styles['fullHeight']}
                         attributes={['m-1', 'hide-lt-m', 'gap-1', 'gap-2']}
                     >
                         <VerticalToolbar
                             id="12345"
-                            className={`${styles.left} ${styles.sticky}`}
+                            className={`${styles['left']} ${styles['sticky']}`}
                             bookmarked={false}
                             onClick={console.log}
                         />
@@ -131,7 +131,7 @@ function Article(props: Props) {
                         ]}
                     >
                         <GridContainer
-                            className={styles.content}
+                            className={styles['content']}
                             attributes={['grid']}
                         >
                             <GridContainer attributes={['xs-12', 'gap-bottom']}>
@@ -140,10 +140,12 @@ function Article(props: Props) {
                         </GridContainer>
                     </GridContainer>
                     <GridContainer
-                        className={styles.fullHeight}
+                        className={styles['fullHeight']}
                         attributes={['l-4', 'hide-lt-l', 'gap-2']}
                     >
-                        <span className={`${styles.right} ${styles.sticky}`}>
+                        <span
+                            className={`${styles['right']} ${styles['sticky']}`}
+                        >
                             AD
                         </span>
                     </GridContainer>

diff --git a/pages/_app.tsx b/pages/_app.tsx
@@ -7,7 +7,7 @@ import '../src/design-tokens/design-tokens.scss';
 import './_app.scss';
 import './_app_markdown.scss';
 import './_app_a11y-dark.scss';
-import styles from './_app.module.scss';
+import * as styles from './_app.module.scss';
 import PageStore, { Page } from '../src/stores/PageStore';
 import Head from 'next/head';
 import { Tooltip } from '../src/components/Tooltip';
@@ -66,7 +66,7 @@ function App({ Component, pageProps }) {
     const [loggedIn, setLoggedIn] = useState(false);
 
     const [pageType, setPageType] = useState<Page>(PageStore.getPageType());
-    const [pageStyle, setPageStyle] = useState(styles.overview);
+    const [pageStyle, setPageStyle] = useState(styles['overview']);
     const darkModeMediaQuery =
         typeof window !== 'undefined'
             ? window?.matchMedia('(prefers-color-scheme: dark)')
@@ -103,11 +103,11 @@ function App({ Component, pageProps }) {
     useEffect(() => {
         switch (pageType) {
             case 'article':
-                setPageStyle(styles.article);
+                setPageStyle(styles['article']);
                 break;
             case 'overview':
             default:
-                setPageStyle(styles.overview);
+                setPageStyle(styles['overview']);
         }
     }, [pageType]);
 

diff --git a/pages/ab.tsx b/pages/ab.tsx
@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 import { ABProvider, Experiment, Variant } from '../src/components/ab/ab';
 import { parseCookies } from 'nookies';
-import styles from './ab.module.scss';
+import * as styles from './ab.module.scss';
 import { GetServerSidePropsContext } from 'next';
 import Head from 'next/head';
 
@@ -22,7 +22,7 @@ function Demo(props: Props) {
     }
 
     return (
-        <div className={styles.ab}>
+        <div className={styles['ab']}>
             <Head>
                 <title>
                     {`${metaTitle} - Design System - Het Financieele Dagblad`}

diff --git a/pages/article-bullet-point.tsx b/pages/article-bullet-point.tsx
@@ -5,7 +5,7 @@ import {
     getCssClassNames,
 } from '../src/components/bullet-point/BulletPoint';
 import PageStore from '../src/stores/PageStore';
-import styles from './article-bullet-point.module.scss';
+import * as styles from './article-bullet-point.module.scss';
 import Head from 'next/head';
 import { globalCssClassNames } from '../src/utils/globalCssClassNames';
 
@@ -52,7 +52,7 @@ function Page() {
             <Explain
                 anchor="default"
                 cssClassNames={[...getCssClassNames(), ...globalCssClassNames]}
-                previewClassName={styles.preview}
+                previewClassName={styles['preview']}
                 legend="Bullet point"
                 reactComponentName="BulletPoint"
                 description={
@@ -68,7 +68,7 @@ function Page() {
             <Explain
                 anchor="align-right"
                 cssClassNames={[...getCssClassNames(), ...globalCssClassNames]}
-                previewClassName={styles.preview}
+                previewClassName={styles['preview']}
                 legend="Bullet point (align: right)"
                 reactComponentName="BulletPoint"
                 description={
@@ -84,7 +84,7 @@ function Page() {
             <Explain
                 anchor="variant-1"
                 cssClassNames={[...getCssClassNames(), ...globalCssClassNames]}
-                previewClassName={styles.preview}
+                previewClassName={styles['preview']}
                 legend="Summary (variant-1)"
                 reactComponentName="BulletPoint"
                 description={
@@ -100,7 +100,7 @@ function Page() {
             <Explain
                 anchor="variant-1-align-right"
                 cssClassNames={[...getCssClassNames(), ...globalCssClassNames]}
-                previewClassName={styles.preview}
+                previewClassName={styles['preview']}
                 legend="Bullet point (variant-1, align: right)"
                 reactComponentName="BulletPoint"
                 description={

diff --git a/pages/article-link-block.tsx b/pages/article-link-block.tsx
@@ -5,7 +5,7 @@ import {
     getCssClassNames,
 } from '../src/components/article-link-block/LinkBlock';
 import PageStore from '../src/stores/PageStore';
-import styles from './article-link-block.module.scss';
+import * as styles from './article-link-block.module.scss';
 import Head from 'next/head';
 import { globalCssClassNames } from '../src/utils/globalCssClassNames';
 
@@ -44,7 +44,7 @@ function Page() {
             <Explain
                 anchor="default"
                 cssClassNames={[...getCssClassNames(), ...globalCssClassNames]}
-                previewClassName={styles.preview}
+                previewClassName={styles['preview']}
                 legend="Link Block"
                 reactComponentName="LinkBlock"
                 description={
@@ -64,7 +64,7 @@ function Page() {
             <Explain
                 anchor="align-right"
                 cssClassNames={[...getCssClassNames(), ...globalCssClassNames]}
-                previewClassName={styles.preview}
+                previewClassName={styles['preview']}
                 legend="Link Block (align: right)"
                 reactComponentName="LinkBlock"
                 description={

diff --git a/pages/article-tags.tsx b/pages/article-tags.tsx
@@ -4,7 +4,7 @@ import {
     ArticleTags,
     getCssClassNames,
 } from '../src/components/article-tags/ArticleTags';
-import styles from './article-link-block.module.scss';
+import * as styles from './article-link-block.module.scss';
 import PageStore from '../src/stores/PageStore';
 import Head from 'next/head';
 import { globalCssClassNames } from '../src/utils/globalCssClassNames';
@@ -112,7 +112,7 @@ function Page() {
 
             <Explain
                 cssClassNames={[...getCssClassNames(), ...globalCssClassNames]}
-                previewClassName={styles.preview}
+                previewClassName={styles['preview']}
                 legend="Article tags"
                 description={
                     <>

diff --git a/pages/author-info.tsx b/pages/author-info.tsx
@@ -4,7 +4,7 @@ import {
     AuthorInfo,
     getCssClassNames,
 } from '../src/components/author-info/AuthorInfo';
-import styles from './article-link-block.module.scss';
+import * as styles from './article-link-block.module.scss';
 import Head from 'next/head';
 import { globalCssClassNames } from '../src/utils/globalCssClassNames';
 
@@ -36,7 +36,7 @@ function Page() {
 
             <Explain
                 cssClassNames={[...getCssClassNames(), ...globalCssClassNames]}
-                previewClassName={styles.preview}
+                previewClassName={styles['preview']}
                 legend="Author Info"
                 reactComponentName="AuthorInfo"
                 description={

diff --git a/pages/button/button.tsx b/pages/button/button.tsx
@@ -3,7 +3,7 @@ import { Explain } from '../../src/components/Explain';
 import { Button, getCssClassNames } from '../../src/components/button/Button';
 import Head from 'next/head';
 import { EnvelopeIcon } from '../../src/design-tokens/icons';
-import styles from './buttons.module.scss';
+import * as styles from './buttons.module.scss';
 import { globalCssClassNames } from '../../src/utils/globalCssClassNames';
 
 export const metaTitle = 'Neutral Button';
@@ -28,7 +28,7 @@ function Page() {
             </Head>
 
             <Explain
-                previewClassName={styles.buttons}
+                previewClassName={styles['buttons']}
                 anchor="default"
                 cssClassNames={[...getCssClassNames(), ...globalCssClassNames]}
                 legend="Button Neutral (default)"
@@ -65,7 +65,7 @@ function Page() {
             </Explain>
 
             <Explain
-                previewClassName={styles.buttons}
+                previewClassName={styles['buttons']}
                 anchor="m"
                 cssClassNames={[...getCssClassNames(), ...globalCssClassNames]}
                 legend="Button Neutral (M)"

diff --git a/pages/button/cta.tsx b/pages/button/cta.tsx
@@ -6,7 +6,7 @@ import {
 } from '../../src/components/button/ButtonCta';
 import Head from 'next/head';
 import { EnvelopeIcon } from '../../src/design-tokens/icons';
-import styles from './buttons.module.scss';
+import * as styles from './buttons.module.scss';
 import { globalCssClassNames } from '../../src/utils/globalCssClassNames';
 
 export const metaTitle = 'Button call-to-action';
@@ -31,7 +31,7 @@ function Page() {
             </Head>
 
             <Explain
-                previewClassName={styles.buttons}
+                previewClassName={styles['buttons']}
                 anchor="default"
                 cssClassNames={[...getCssClassNames(), ...globalCssClassNames]}
                 legend="Button CTA (default)"
@@ -89,7 +89,7 @@ function Page() {
             </Explain>
 
             <Explain
-                previewClassName={styles.buttons}
+                previewClassName={styles['buttons']}
                 anchor="m"
                 cssClassNames={[...getCssClassNames(), ...globalCssClassNames]}
                 legend="Button CTA (M)"