Automat 0.3 changes (#194)

* Reduce globals * Migrate to @emotion/core from vanilla emotion This is required to use the emotion cache, which Automat uses as part of its shadow dom support. In addition, Source uses @emotion/core and standardising helps avoid having to load both. Note, an interesting discussion on the differences between emotion and @emotion/core can be found here: emotion-js/emotion#1883.
guardian · Jul 28, 2020 · 633b951 · 633b951
1 parent 077f75c
commit 633b951
Show file tree

Hide file tree

Showing 23 changed files with 1,096 additions and 268 deletions.
diff --git a/.storybook/main.js b/.storybook/main.js
@@ -7,17 +7,5 @@ module.exports = {
         '@storybook/addon-links',
         '@storybook/addon-knobs',
         '@storybook/addon-viewport',
-        {
-            name: '@storybook/preset-typescript',
-            options: {
-                tsLoaderOptions: {
-                    configFile: path.resolve(__dirname, '../tsconfig.json'),
-                },
-                tsDocgenLoaderOptions: {
-                    tsconfigPath: path.resolve(__dirname, '../tsconfig.json'),
-                },
-                include: [path.resolve(__dirname, '../src')],
-            },
-        },
     ],
 };
diff --git a/.storybook/tsconfig.json b/.storybook/tsconfig.json
@@ -0,0 +1,22 @@
+{
+    "compilerOptions": {
+        "target": "ES2020",
+        "lib": ["es5", "es6", "es7", "es2017", "es2019", "dom"],
+        "strict": true,
+        "module": "CommonJS",
+        "noImplicitReturns": true,
+        "esModuleInterop": true,
+        "jsx": "preserve",
+        "outDir": "dist",
+        "typeRoots": ["./src/@types", "./node_modules/@types"],
+        "rootDirs": ["src", "stories"],
+        "baseUrl": "src"
+    },
+    "include": ["src/**/*"],
+    "exclude": [
+        "node_modules",
+        "src/**/*.test.ts",
+        "src/factories/*",
+        "src/tests/banners/*.tests.ts"
+    ]
+}
diff --git a/.storybook/webpack.config.js b/.storybook/webpack.config.js
@@ -0,0 +1,25 @@
+const path = require('path');
+module.exports = ({ config, mode }) => {
+    config.module.rules.push({
+        test: /\.(ts|tsx)$/,
+        loader: require.resolve('babel-loader'),
+        options: {
+            presets: [
+                '@babel/preset-typescript',
+                '@emotion/babel-preset-css-prop',
+                [
+                    '@babel/preset-env',
+                    {
+                        targets: {
+                            esmodules: true,
+                        },
+                    },
+                ],
+            ],
+            plugins: ['@babel/plugin-proposal-numeric-separator'],
+        },
+    });
+    config.resolve.extensions.push('.ts', '.tsx');
+
+    return config;
+};
diff --git a/babel.config.json b/babel.config.json
@@ -0,0 +1,7 @@
+{
+    "presets": [
+      ["@babel/preset-react"],
+      "@emotion/babel-preset-css-prop"
+    ],
+    "exclude": ["node_modules/**"]
+  }
diff --git a/package.json b/package.json
@@ -29,9 +29,9 @@
   },
   "dependencies": {
     "@babel/plugin-transform-react-jsx-compat": "^7.8.3",
-    "@babel/preset-react": "^7.9.4",
+    "@babel/preset-react": "^7.10.4",
     "@babel/standalone": "^7.9.5",
-    "@emotion/core": "^10.0.27",
+    "@emotion/core": "^10.0.28",
     "@guardian/src-brand": "^1.8.0",
     "@guardian/src-button": "^1.8.0",
     "@guardian/src-foundations": "^1.8.0",
@@ -43,7 +43,6 @@
     "amp-toolbox-cors": "^1.2.0-alpha.2",
     "aws-serverless-express": "^3.3.6",
     "cors": "^2.8.5",
-    "emotion": "^10.0.27",
     "emotion-server": "^10.0.27",
     "emotion-theming": "^10.0.27",
     "express": "^4.17.1",
@@ -60,6 +59,13 @@
     "@aws-cdk/aws-lambda": "^1.22.0",
     "@aws-cdk/core": "^1.22.0",
     "@babel/core": "^7.8.3",
+    "@babel/plugin-proposal-class-properties": "^7.10.4",
+    "@babel/plugin-proposal-numeric-separator": "^7.10.4",
+    "@babel/plugin-proposal-optional-chaining": "^7.10.4",
+    "@babel/preset-env": "^7.10.4",
+    "@babel/preset-typescript": "^7.10.4",
+    "@emotion/babel-preset-css-prop": "^10.0.27",
+    "@guardian/automat-deps": "^0.3.0",
     "@guardian/node-riffraff-artifact": "^0.1.1",
     "@rollup/plugin-babel": "^5.0.2",
     "@rollup/plugin-commonjs": "^12.0.0",
@@ -90,7 +96,6 @@
     "aws-cdk": "^1.22.0",
     "aws-sdk": "^2.604.0",
     "babel-loader": "^8.0.6",
-    "babel-plugin-emotion": "^10.0.33",
     "eslint": "^6.8.0",
     "eslint-config-prettier": "^6.9.0",
     "eslint-plugin-prettier": "^3.1.2",

diff --git a/rollup.config.js b/rollup.config.js
@@ -13,17 +13,15 @@ const tsOpts = {
     strict: true,
     noImplicitReturns: true,
     esModuleInterop: true,
-    jsx: 'react',
+    jsx: 'preserve',
     include: ['src/**/*'],
     exclude: ['node_modules', '**/*.test.ts', 'src/factories/*', 'src/cdk/*'],
     tsconfig: false,
 };
 
 const globals = {
-    react: 'guardian.automat.react',
-    emotion: 'guardian.automat.emotion', // TODO remove this dependency
+    react: 'guardian.automat.preact',
     '@emotion/core': 'guardian.automat.emotionCore',
-    'emotion-theming': 'guardian.automat.emotionTheming',
 };
 
 const config = [
@@ -57,27 +55,17 @@ const config = [
             format: 'es',
             sourcemap: isProd ? false : 'inline',
         },
-        external: id => Object.keys(globals).some(key => id.startsWith(key)),
+        external: id => Object.keys(globals).some(key => id == key),
         plugins: [
             resolveNode(),
             commonjs(),
             json(),
+            typescript(tsOpts),
             babel({
                 extensions: ['.ts', '.tsx', '.js', '.jsx', '.es6', '.es', '.mjs'],
-                plugins: [['emotion', { sourceMap: false }]],
-                presets: [
-                    [
-                        '@babel/preset-env',
-                        {
-                            targets: {
-                                ie: '11',
-                            },
-                        },
-                    ],
-                ],
                 babelHelpers: 'bundled',
             }),
-            typescript(tsOpts),
+
             // eslint-disable-next-line @typescript-eslint/camelcase
             terser({ compress: { global_defs: { 'process.env.NODE_ENV': 'production' } } }),
             externalGlobals(globals),

diff --git a/src/components/Lines.tsx b/src/components/Lines.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { css } from 'emotion';
+import { css } from '@emotion/core';
 import { border } from '@guardian/src-foundations/palette';
 import { remSpace } from '@guardian/src-foundations';
 
@@ -23,5 +23,5 @@ const straightLines = css`
 // Note, we should replace with @guardian/src-ed-lines once it is smaller in
 // size/better suited to tree-shaking.
 export const Lines: React.FC<{}> = ({}) => {
-    return <div className={straightLines} />;
+    return <div css={straightLines} />;
 };
diff --git a/src/components/modules/banners/ausMomentContributionsBanner/AusMomentContributionsBanner.tsx b/src/components/modules/banners/ausMomentContributionsBanner/AusMomentContributionsBanner.tsx
@@ -1,5 +1,5 @@
 import React, { useEffect, useRef, useState } from 'react';
-import { css } from 'emotion';
+import { css, SerializedStyles } from '@emotion/core';
 import { body, headline, textSans } from '@guardian/src-foundations/typography';
 import { neutral, opinion } from '@guardian/src-foundations/palette';
 import { from, until } from '@guardian/src-foundations/mq';
@@ -201,7 +201,7 @@ const horizon = css`
 
 const horizonSvg = (
     <svg
-        className={horizon}
+        css={horizon}
         viewBox="0 0 1300 19"
         preserveAspectRatio="none"
         fill="${neutral[7]}"
@@ -279,7 +279,7 @@ const mobileMessageContainer = css`
     }
 `;
 
-const mobileMessage = (isExpanded: boolean = false): string => {
+const mobileMessage = (isExpanded: boolean = false): SerializedStyles => {
     if (isExpanded) {
         return css`
             display: block;
@@ -397,7 +397,7 @@ const chevron = css`
 `;
 
 const messageMaxHeight = 210;
-const message = (isOverflowing: boolean): string => css`
+const message = (isOverflowing: boolean): SerializedStyles => css`
     overflow: hidden;
     display: none;
     max-height: 70px;
@@ -427,7 +427,7 @@ const messageText = css`
 
 const chevronUp = (
     <svg
-        className={chevron}
+        css={chevron}
         viewBox="0 0 30 30"
         xmlns="http://www.w3.org/2000/svg"
         height="20px"
@@ -444,7 +444,7 @@ const chevronUp = (
 
 const chevronDown = (
     <svg
-        className={chevron}
+        css={chevron}
         viewBox="0 0 30 30"
         xmlns="http://www.w3.org/2000/svg"
         height="20px"
@@ -462,7 +462,7 @@ const chevronDown = (
 const messageSupporter = (goalReached: boolean) => {
     if (goalReached) {
         return (
-            <div className={messageText}>
+            <div css={messageText}>
                 <p>
                     Thanks to the support of thousands of readers like you, Guardian Australia has
                     grown and is now read by one in three people. We’ve reached our first goal, and
@@ -479,7 +479,7 @@ const messageSupporter = (goalReached: boolean) => {
         );
     } else {
         return (
-            <div className={messageText}>
+            <div css={messageText}>
                 <p>
                     Thanks to the support of thousands of readers like you, Guardian Australia has
                     grown and is now read by one in three people. Your support has helped us deliver
@@ -500,7 +500,7 @@ const messageSupporter = (goalReached: boolean) => {
 const messageNonSupporter = (targetReached: boolean) => {
     if (targetReached) {
         return (
-            <div className={messageText}>
+            <div css={messageText}>
                 <p>
                     One in three people in Australia read the Guardian in the last year. We need to
                     keep growing our readership and gaining your support so we can provide high
@@ -517,7 +517,7 @@ const messageNonSupporter = (targetReached: boolean) => {
         );
     } else {
         return (
-            <div className={messageText}>
+            <div css={messageText}>
                 <p>
                     One in three people in Australia read the Guardian in the last year. We need to
                     keep growing our readership and gaining your financial support so we can provide
@@ -542,9 +542,9 @@ const urlWithTracking = (baseUrl: string, tracking: BannerTracking): string => {
 
 const socialShare = (): JSX.Element => {
     return (
-        <div className={ctaContainer}>
+        <div css={ctaContainer}>
             <SocialLinks />
-            <p className={shareYourSupport}>Share your support</p>
+            <p css={shareYourSupport}>Share your support</p>
         </div>
     );
 };
@@ -557,11 +557,11 @@ const support = (tracking: BannerTracking): JSX.Element => {
     const hearFromOurEditorUrl =
         'https://www.theguardian.com/media/commentisfree/2020/jun/23/information-can-save-lives-help-guardian-australia-reach-150000-supporters';
     return (
-        <div className={ctaContainer}>
-            <a className={button} href={supportTheGuardianUrl}>
+        <div css={ctaContainer}>
+            <a css={button} href={supportTheGuardianUrl}>
                 Support the Guardian
             </a>
-            <a className={hearFromOurEditor} href={hearFromOurEditorUrl}>
+            <a css={hearFromOurEditor} href={hearFromOurEditorUrl}>
                 Hear from our editor
             </a>
         </div>
@@ -630,71 +630,69 @@ export const AusMomentContributionsBanner: React.FC<BannerProps> = ({
     return (
         <>
             {showBanner ? (
-                <section className={banner}>
-                    <div className={contentContainer}>
+                <section css={banner}>
+                    <div css={contentContainer}>
                         <SunriseBackground percentage={percentage} />
-                        <div className={topContentContainer}>
-                            <div className={actualNumber}>
+                        <div css={topContentContainer}>
+                            <div css={actualNumber}>
                                 {goalReached && (
-                                    <p className={textAboveNumber}>Help us grow even further</p>
+                                    <p css={textAboveNumber}>Help us grow even further</p>
                                 )}
-                                <p className={actualNumberFigure}>{supporters.toLocaleString()}</p>
-                                <p className={textUnderNumber}>supporters in Australia</p>
+                                <p css={actualNumberFigure}>{supporters.toLocaleString()}</p>
+                                <p css={textUnderNumber}>supporters in Australia</p>
                             </div>
-                            <div className={goal}>
-                                <p className={goalNumber}>{supportersGoal.toLocaleString()}</p>
-                                <p className={goalText}>goal</p>
+                            <div css={goal}>
+                                <p css={goalNumber}>{supportersGoal.toLocaleString()}</p>
+                                <p css={goalText}>goal</p>
                             </div>
                             <div>
                                 <button
                                     onClick={(): void => {
                                         setContributionsBannerClosedTimestamp();
                                         closeBanner(false);
                                     }}
-                                    className={closeButton}
+                                    css={closeButton}
                                     aria-label="Close"
                                 >
                                     <SvgClose />
                                 </button>
                             </div>
                         </div>
 
-                        <div className={svgAndBottomContentContainer}>
-                            <div className={horizonContainer}>{horizonSvg}</div>
-                            <div className={bottomContentContainer}>
-                                <div className={headingAndCta}>
-                                    <h3 id="heading" className={heading}>
+                        <div css={svgAndBottomContentContainer}>
+                            <div css={horizonContainer}>{horizonSvg}</div>
+                            <div css={bottomContentContainer}>
+                                <div css={headingAndCta}>
+                                    <h3 id="heading" css={heading}>
                                         {isSupporter
                                             ? 'Help us reach more people across Australia'
                                             : 'Our supporters are doing something powerful'}
                                     </h3>
-                                    <div className={mobileMessageContainer}>
-                                        <div className={mobileMessage(expanded)}>
+                                    <div css={mobileMessageContainer}>
+                                        <div css={mobileMessage(expanded)}>
                                             {isSupporter
                                                 ? messageSupporter(goalReached)
                                                 : messageNonSupporter(goalReached)}
                                         </div>
-                                        <p onClick={toggleReadMore} className={readMore}>
+                                        <p onClick={toggleReadMore} css={readMore}>
                                             Read {expanded ? 'less' : 'more'}
                                             {expanded ? chevronUp : chevronDown}
                                         </p>
                                     </div>
                                     {isSupporter ? socialShare() : support(tracking)}
                                 </div>
 
-                                <div className={messageContainer}>
+                                <div css={messageContainer}>
                                     <div
                                         ref={messageElement}
-                                        className={
-                                            expanded ? messageExpanded : message(overflowing)
-                                        }
+                                        css={expanded ? messageExpanded : message(overflowing)}
                                     >
                                         {isSupporter
                                             ? messageSupporter(goalReached)
                                             : messageNonSupporter(goalReached)}
                                     </div>
                                     {(overflowing || expanded) && (
-                                        <p onClick={toggleReadMore} className={readMore}>
+                                        <p onClick={toggleReadMore} css={readMore}>
                                             Read {expanded ? 'less' : 'more'}
                                             {expanded ? chevronUp : chevronDown}
                                         </p>