setup postcss to allow easier component overriding

VulcanJS · Jun 26, 2020 · a2afcb5 · a2afcb5
1 parent 9329a3a
commit a2afcb5
Show file tree

Hide file tree

Showing 9 changed files with 250 additions and 37 deletions.
diff --git a/babel.config.js b/babel.config.js
@@ -10,7 +10,16 @@ if (enableCoverage) {
 
 module.exports = {
   // we also need next/babel preset to work with Next
-  presets: ["next/babel"],
+  presets: [
+    [
+      "next/babel",
+      {
+        "styled-jsx": {
+          plugins: ["styled-jsx-plugin-postcss"],
+        },
+      },
+    ],
+  ],
   plugins,
   babelrc: false,
 };
diff --git a/docs/features.md b/docs/features.md
@@ -13,9 +13,9 @@ We use TypeScript extensively, and try to enable it wherever possible (sources,
 We extend [`next-with-apollo`](https://github.com/lfades/next-with-apollo) with a simpler API. Apollo SSR is enabled page per page, for a granular optimization.
 
 ```js
-withApollo(MyPage) // add ApolloProvider with the default apollo client, but no SSR
-withApollo(MyPage, {ssr: true}) // will fetch data during server-side render automatically
-MyPage // no SSR, no Apollo Provider
+withApollo(MyPage); // add ApolloProvider with the default apollo client, but no SSR
+withApollo(MyPage, { ssr: true }); // will fetch data during server-side render automatically
+MyPage; // no SSR, no Apollo Provider
 ```
 
 With have a non-regression test for SSR, so no surprise with component that suddenly appear in loading state.
@@ -122,11 +122,11 @@ Run `yarn auto-changelog` to compute a new changelog. Works best in combination
 
 We use next-i18next new serverless version (beta), as demoed in [this repo](https://github.com/borispoehland/next-i18next-boilerplate.git) from [@borispoehland](https://github.com/borispoehland).
 
-IMPORTANT NOTE: [there is one last blocking issue with serverless deployment on Vercel](https://github.com/vercel/next.js/issues/13624). To put it in a nutshell prevents your locale JSON to be deployed alongside your pages. 
+IMPORTANT NOTE: [there is one last blocking issue with serverless deployment on Vercel](https://github.com/vercel/next.js/issues/13624). To put it in a nutshell prevents your locale JSON to be deployed alongside your pages.
 
 More broadly, it is related to the impossibility of [reading static files in Next when deployed to Vercel](https://github.com/vercel/next.js/issues/8251) at the moment.
 
-### Lang in the custom _document
+### Lang in the custom \_document
 
 `lang` attribute is set automatically on `<html>` during server-render
 
@@ -174,7 +174,7 @@ We use [Cypress Webpack Preprocessor](https://github.com/cypress-io/cypress-webp
 
 We use `ts-loader`, with [`transpileOnly`](https://github.com/TypeStrong/ts-loader#transpileonly) option to fasten build. We expect your e2e tests typing to be correct at run time.
 
-### Pure SSR testing 
+### Pure SSR testing
 
 The `cy.visitAsHtml()` command allow to check the pure HTML render of a page. It will disable JS in the the page automatically.
 
@@ -188,7 +188,7 @@ We have preinstalled [React Testing Library](https://testing-library.com/docs/re
 
 ### Tests for Vulcan Next Starter (for contributors only)
 
-We have a unit tests for some key features and scripts of VNS, through the `tests/vns` folder. 
+We have a unit tests for some key features and scripts of VNS, through the `tests/vns` folder.
 
 This folder is ignored when running `yarn run test:unit`, to avoid bloating your own tests.
 
@@ -250,6 +250,12 @@ Initial setup based on [official Next example](https://github.com/mui-org/materi
 
 We try to reduce the foot print of Material UI for an easy remove. In next iterations, we'll try to make it fully pluggable, like in Vulcan Meteor, so you can easily swap your UI system.
 
+### PostCSS for easier override using Next
+
+In VNS, we favour out-of-the-box solutions from Next to style the app, so basically [styled-jsx](https://github.com/vercel/styled-jsx) and CSS modules.
+However, [usage with Material UI and more broadly override of child components is not very elegant.](https://github.com/vercel/styled-jsx/issues/142)
+We include PostCSS with the "nesting" plugin to allow a cleaner syntax.
+
 ## Deployment
 
 ### Dockerfile for production
@@ -280,7 +286,7 @@ Easy switch between MUI, Bootstrap, and probably Tailwind, Styled Components, Em
 
 ### Error and logs
 
-Global _app error boundary
+Global \_app error boundary
 Sentry demo
 Setup debug client side programmatically based on DEBUG environment variable
 
@@ -310,7 +316,7 @@ Fullstack cypress testing/coverage of the custom server
 Remove debug routes from bundle during build
 Remove private route during static export?
 
- ### Others
+### Others
 
 Pure JS support (no TS), in cypress, in code, in storybook, in jest...
 Performance testing?
@@ -327,4 +333,4 @@ Mock of next packages from storybook, in jest
 Efficient plug to Vulcan
 VS code debugging
 SSR disabling
-Slimer docker image/faster docker computation
+Slimer docker image/faster docker computation
diff --git a/package.json b/package.json
@@ -74,10 +74,12 @@
     "next": "^9.4.4",
     "next-i18next": "5.0.0-beta.2",
     "next-with-apollo": "5.0.1",
+    "postcss-nested": "^4.2.1",
     "react": "16.13.0",
     "react-dom": "16.13.0",
     "react-hook-form": "4.9.8",
-    "react-i18next": "^11.5.0"
+    "react-i18next": "^11.5.0",
+    "styled-jsx-plugin-postcss": "^2.0.1"
   },
   "devDependencies": {
     "@babel/core": "^7.10.2",

diff --git a/postcss.config.js b/postcss.config.js
@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    //require('autoprefixer'),
+    "postcss-nested": {},
+  },
+};
diff --git a/src/components/home/home.tsx b/src/components/home/home.tsx
@@ -1,12 +1,15 @@
 import "~/types/mdx.d.ts"; // TODO: load this automatically
 import Readme from "../../../README.md";
+import { Typography } from "@material-ui/core";
 
 export default () => (
   <div>
-    <em>
-      Below, find Vulcan Next Starter Readme loaded from an MD file using{" "}
-      <a href="https://mdxjs.com/">MDXJS</a>
-    </em>
+    <Typography>
+      <em>
+        Below, find Vulcan Next Starter Readme loaded from an MD file using{" "}
+        <a href="https://mdxjs.com/">MDXJS</a>
+      </em>
+    </Typography>
     <Readme />
   </div>
 );
diff --git a/src/components/layout/AppLayout.tsx b/src/components/layout/AppLayout.tsx
@@ -8,6 +8,72 @@ interface AppLayoutProps {
   children: React.ReactNode;
 }
 
-const AppLayout = ({ children }: AppLayoutProps) => <div>{children}</div>;
+const AppLayout = ({ children }: AppLayoutProps) => (
+  <div className="global">
+    {children}
+    <style jsx global>{`
+      /* FIXME: ignore errors when using "vscode-styled-jsx", as we also use PostCSS */
+      /* Typescale */
+      .global {
+        body {
+          font-size: 16px;
+        }
+        h1,
+        .MuiTypography-h1 {
+          font-size: 3.815em;
+          /* 61px */
+        }
+        h2,
+        .MuiTypography-h2 {
+          font-size: 2.441em;
+          /* 29px */
+        }
+        h3,
+        .MuiTypography-h3 {
+          font-size: 1.953em;
+          /* 29px */
+        }
+        h4,
+        .MuiTypography-h4 {
+          font-size: 1.563em;
+          /* 29px */
+        }
+        h5,
+        .MuiTypography-h5 {
+          font-size: 1.25em;
+          /* 29px */
+        }
+        p,
+        .MuiTypography-body1,
+        .MuiTypography-body2 {
+          font-size: 1em;
+        }
+        .helper,
+        .MuiTypography-caption {
+          font-size: 0.8em;
+          /* 14 px */
+        }
+        .legal {
+          font-size: 0.7em;
+          /* 12 px */
+        }
+        /* Text spacing */
+        p,
+        p.MuiTypography-root {
+          margin-bottom: 1em;
+        }
+        h1,
+        h2,
+        h3,
+        h4,
+        h5,
+        h6 {
+          margin-top: 32px;
+          margin-bottom: 16px;
+        }
+      }
+    `}</style>
+  </div>
+);
 
 export default AppLayout;
diff --git a/src/lib/material-ui/defaultTheme.ts b/src/lib/material-ui/defaultTheme.ts
@@ -1,5 +1,7 @@
 // Mui theme
 // @see https://material-ui.com/customization/default-theme
+// @see https://github.com/mui-org/material-ui/issues/20787
+// @see https://github.com/vercel/styled-jsx/issues/142
 import { createMuiTheme } from "@material-ui/core/styles";
 
 // Create a theme instance.

diff --git a/src/pages/index.tsx b/src/pages/index.tsx
@@ -39,8 +39,17 @@ const HomePage = () => {
     <MDXMuiLayout>
       <main>
         <Home />
-        {content}
+        {/*content*/}
       </main>
+      <style jsx>{`
+        main {
+          border-left: 72px solid;
+          padding-left: 24px;
+          border-image-source: linear-gradient(10deg, #e1009855, #3f77fa55);
+          border-image-slice: 1;
+          border-color: #3f77fa;
+        }
+      `}</style>
     </MDXMuiLayout>
   );
 };