added twin.macro & emotion

NayanthaNethsara · Jun 23, 2021 · ce3a25c · ce3a25c
1 parent b5fba8e
commit ce3a25c
Show file tree

Hide file tree

Showing 7 changed files with 703 additions and 145 deletions.
diff --git a/.babelrc.js b/.babelrc.js
@@ -0,0 +1,18 @@
+module.exports = {
+ presets: [
+ [
+ "next/babel",
+ {
+ "preset-react": {
+ runtime: "automatic",
+ importSource: "@emotion/react",
+ },
+ },
+ ],
+ ],
+ plugins: [
+ "@emotion/babel-plugin",
+ "babel-plugin-twin",
+ "babel-plugin-macros",
+ ],
+};
diff --git a/components/navbar.js b/components/navbar.js
@@ -74,7 +74,7 @@ export default function Navbar() {
 
  {/* menu */}
  <div className="hidden text-center lg:flex lg:items-center">
- <ul className="items-center justify-end flex-1 pt-6 lg:pt-0 list-reset lg:flex">
+ <ul className="items-center justify-end flex-1 pt-6 list-none lg:pt-0 lg:flex">
  {navigation.map((menu, index) => (
  <li className="mr-3 nav__item" key={index}>
  <Link href="/">

diff --git a/components/sectionTitle.js b/components/sectionTitle.js
@@ -5,7 +5,7 @@ export default function SectionTitle(props) {
  return (
  <Container
  className={`flex w-full flex-col mt-4 ${
- props.align === "left" ? "" : "items-center justify-center  text-center"
+ props.align === "left" ? "" : "items-center justify-center text-center"
  }`}>
  {props.pretitle && (
  <div className="text-sm font-bold tracking-wider text-indigo-600 uppercase">

diff --git a/next.config.js b/next.config.js
@@ -4,4 +4,10 @@ module.exports = {
  defaultLocale: "en",
  },
  target: "serverless",
+ webpack: (config, { isServer }) => {
+ if (!isServer) {
+ config.resolve.fallback.fs = false;
+ }
+ return config;
+ },
 };
diff --git a/package.json b/package.json
@@ -20,18 +20,32 @@
  "author": "Surjith S M",
  "license": "ISC",
  "dependencies": {
+ "@emotion/css": "^11.1.3",
+ "@emotion/react": "^11.4.0",
+ "@emotion/server": "^11.4.0",
+ "@emotion/styled": "^11.3.0",
  "@headlessui/react": "^1.2.0",
  "@heroicons/react": "^1.0.1",
  "@tailwindcss/aspect-ratio": "^0.2.1",
- "next": "latest",
+ "next": "^11.0.1",
  "next-themes": "^0.0.14",
  "react": "^17.0.1",
  "react-dom": "^17.0.1",
  "react-hook-form": "^7.8.3"
  },
  "devDependencies": {
+ "@emotion/babel-plugin": "^11.3.0",
  "autoprefixer": "^10.0.4",
+ "babel-plugin-macros": "^3.1.0",
+ "babel-plugin-twin": "^1.0.2",
  "postcss": "^8.1.10",
- "tailwindcss": "^2.1.1"
+ "tailwindcss": "^2.2.2",
+ "twin.macro": "^2.5.0"
+ },
+ "babelMacros": {
+ "twin": {
+ "preset": "emotion",
+ "includeClassNames": true
+ }
  }
-}
+}
diff --git a/pages/_document.js b/pages/_document.js
@@ -0,0 +1,28 @@
+import Document, { Html, Head, Main, NextScript } from "next/document";
+import { extractCritical } from "@emotion/server";
+
+export default class MyDocument extends Document {
+ static async getInitialProps(ctx) {
+ const initialProps = await Document.getInitialProps(ctx);
+ const page = await ctx.renderPage();
+ const styles = extractCritical(page.html);
+ return { ...initialProps, ...page, ...styles };
+ }
+
+ render() {
+ return (
+ <Html lang="en">
+ <Head>
+ <style
+ data-emotion-css={this.props.ids.join(" ")}
+ dangerouslySetInnerHTML={{ __html: this.props.css }}
+ />
+ </Head>
+ <body>
+ <Main />
+ <NextScript />
+ </body>
+ </Html>
+ );
+ }
+}