Add postCSS to Gazebo

.rescriptsrc.js

@@ -0,0 +1 @@
+module.exports = [['use-postcss-config']]

package.json

@@ -10,15 +10,16 @@
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
     "react-router-dom": "^5.2.0",
-    "react-scripts": "4.0.0",
+    "react-scripts": "^4.0.0",
+    "tailwindcss": "^1.9.6",
     "web-vitals": "^0.2.4"
   },
   "scripts": {
-    "start": "react-scripts start",
-    "build": "react-scripts build",
-    "test": "react-scripts test",
-    "test:ci": "react-scripts test --collectCoverage ",
-    "eject": "react-scripts eject",
+    "start": "rescripts start",
+    "build": "rescripts build",
+    "test": "rescripts test",
+    "test:ci": "rescripts test --collectCoverage ",
+    "eject": "rescripts eject",
     "lint": "npx eslint --no-ignore --max-warnings=0 'src/**/*.{js,jsx,ts,tsx,json}'",
     "bundlesize": "npx bundlesize",
     "storybook": "start-storybook -p 6006 -s public --no-dll",
@@ -61,18 +62,22 @@
     }
   ],
   "devDependencies": {
-    "bundlesize": "^0.18.0",
     "@babel/core": "^7.12.3",
+    "@rescripts/cli": "0.0.14",
     "@storybook/addon-actions": "^6.0.28",
     "@storybook/addon-essentials": "^6.0.28",
     "@storybook/addon-links": "^6.0.28",
     "@storybook/node-logger": "^6.0.28",
     "@storybook/preset-create-react-app": "^3.1.4",
     "@storybook/react": "^6.0.28",
+    "autoprefixer": "9.8.6",
+    "bundlesize": "^0.18.0",
     "eslint-config-prettier": "^6.15.0",
     "husky": "^4.3.0",
     "lint-staged": "^10.5.1",
+    "postcss-font-magician": "2.3.1",
     "prettier": "^2.1.2",
-    "react-is": "^17.0.1"
+    "react-is": "^17.0.1",
+    "rescript-use-postcss-config": "^1.0.0"
   }
 }

postcss.config.js

@@ -0,0 +1,10 @@
+const pfm = require('postcss-font-magician')
+
+module.exports = {
+  map: true,
+  plugins: [
+    require('tailwindcss'),
+    require('autoprefixer'),
+    pfm({ foundries: ['google'] }),
+  ],
+}

src/App.js → src/components/App.js

@@ -1,6 +1,6 @@
 import { Suspense, lazy } from 'react'
 
-import { BrowserRouter, Switch, Route } from "react-router-dom";
+import { BrowserRouter, Switch, Route } from 'react-router-dom'
 
 const Home = lazy(() => import('./pages/Home'))
 const About = lazy(() => import('./pages/About'))
@@ -19,7 +19,7 @@ function App() {
         </Switch>
       </BrowserRouter>
     </Suspense>
-  );
+  )
 }
 
 export default App

src/App.test.js → src/components/App.test.js

@@ -1,11 +1,10 @@
-import { waitFor, render, screen } from '@testing-library/react';
-import App from './App';
+import { waitFor, render, screen } from '@testing-library/react'
+import App from './App'
 
 jest.mock('./pages/Home', () => () => 'HomeComponent')
 jest.mock('./pages/About', () => () => 'AboutComponent')
 
 describe('App', () => {
-
   describe('when rendering the App on homepage', () => {
     beforeEach(() => {
       window.history.pushState({}, 'Test page', '/')

src/components/LogoSpinner/LogoSpinner.module.css

@@ -1,7 +1,6 @@
 .spinner {
-  display: flex;
-  align-items: center;
-  justify-content: center;
+  @apply flex items-center justify-center;
+  /* Check Tailwind can be used with css modules */
 }
 
 @keyframes draw {
@@ -14,9 +13,8 @@
 }
 
 .spinner svg {
-  display: inline-block;
-  width: 100%;
-  height: 100%;
+  @apply inline-block w-full h-full;
+
   fill: none;
 }
 

src/components/pages/About.js

@@ -0,0 +1,5 @@
+function About() {
+  return <div className="p-4 bg-gray-200">Im the about page</div>
+}
+
+export default About

src/components/pages/Home.js

@@ -0,0 +1,11 @@
+import LogoSpinner from '../LogoSpinner'
+function Home() {
+  return (
+    <div className="p-4 bg-gray-200">
+      Im the home page
+      <LogoSpinner />
+    </div>
+  )
+}
+
+export default Home

src/globals.css

@@ -0,0 +1,5 @@
+@tailwind base;
+
+@tailwind components;
+
+@tailwind utilities;

src/index.js

@@ -1,7 +1,7 @@
 import React from 'react'
 import ReactDOM from 'react-dom'
-import './index.css'
-import App from './App'
+import App from './components/App'
+import './globals.css'
 import reportWebVitals from './reportWebVitals'
 
 ReactDOM.render(

tailwind.config.js

@@ -0,0 +1,133 @@
+const plugin = require('tailwindcss/plugin')
+
+module.exports = {
+  future: {
+    removeDeprecatedGapUtilities: true,
+    purgeLayersByDefault: true,
+  },
+  purge: {
+    content: [
+      './src/components/**/*.js',
+      './src/components/**.js',
+      './public/*.html',
+    ],
+  },
+  theme: {
+    fontFamily: {
+      body: ['sans-serif', 'Lato'],
+      display: ['sans-serif', 'Lato'],
+    },
+    container: {
+      center: true,
+    },
+    extend: {
+      colors: {
+        codecov: {
+          'text-light': '#465B6A',
+          green: '#27B340',
+          red: '#CE2019',
+          purple: '#AC39CF',
+          orange: '#FFC273',
+          success: '#83E46C', // Dupe of new success
+          warning: '#CA8E00', // Dupe of new warning
+          danger: '#C60800', // Dupe of new danger
+          negative: '#9F3A38',
+          dashboard: '#F7F7FC',
+        },
+        gray: {
+          100: '#F7F8FB',
+          200: '#EAEBEF',
+          300: '#C7CBD1',
+          400: '#999FA7',
+          500: '#68737E',
+          600: '#394754',
+          800: '#222F3D',
+          900: '#0E1B29',
+        },
+        pink: {
+          100: '#FF4A89',
+          500: '#F01F7A',
+          900: '#D10D62',
+        },
+        blue: {
+          100: '#52B7FF',
+          200: '#0095FF',
+          400: '#0088E9',
+          600: '#0071C2',
+          800: '#015896',
+          900: '#002D4D',
+        },
+        site: {
+          header: '#0E1B29',
+          footer: '#07111B',
+        },
+        warning: {
+          900: '#473610',
+          500: '#CA8E00',
+          100: '#FFEBD2',
+        },
+        success: {
+          100: '#DEFFE8',
+          500: '#73FF9E',
+          900: '#0E1B29',
+        },
+        error: {
+          100: '#FFEDF0',
+          500: '#FF9B9B',
+          900: '#590808',
+        },
+        info: {
+          100: '#DFF2FF',
+          500: '#A3D9FF',
+          900: '#013B65',
+        },
+      },
+      gradients: {
+        'green-red': [
+          '#73FF9E',
+          '#83E46C',
+          '#8DCB27',
+          '#CA8E00',
+          '#CA4800',
+          '#C60800',
+          '#840500',
+        ],
+      },
+      boxShadow: {
+        grid: '0 7px 20px 0 rgba(34,47,61,0.05)',
+        card: '0 7px 20px 0 rgba(34,47,61,0.05)',
+        table: '0 2px 15px 0 rgba(14,27,41,0.05)',
+        alert: {
+          negative: '0 0 0 1px #E0B4B4 inset, 0 0 0 0 transparent',
+        },
+      },
+    },
+  },
+  variants: {
+    text: ['default', 'hover', 'focus', 'disabled'],
+    backgroundColor: ['default', 'responsive', 'hover', 'focus', 'disabled'],
+    opacity: ['default', 'responsive', 'hover', 'focus', 'disabled'],
+    textColor: [
+      'default',
+      'responsive',
+      'hover',
+      'focus',
+      'disabled',
+      'visited',
+    ],
+    borderColor: ['default', 'responsive', 'hover', 'focus', 'disabled'],
+    cursor: ['default', 'responsive', 'disabled'],
+    textOpacity: ['default', 'responsive', 'hover', 'focus', 'disabled'],
+  },
+  plugins: [
+    plugin(function ({ addBase, config }) {
+      addBase({
+        html: {
+          fontFamily: config('theme.fontFamily.body'),
+          fontSize: '16px',
+          fontSize: '1rem',
+        },
+      })
+    }),
+  ],
+}