[WEB-3985] feat: common postcss config and local fonts across all plane applications (#6998)

* [WEB-3985] feat: common postcss config and local fonts across all plane applications

* improvement: split fonts into a separate exports

admin/app/layout.tsx

@@ -3,18 +3,16 @@
 import { ReactNode } from "react";
 import { ThemeProvider, useTheme } from "next-themes";
 import { SWRConfig } from "swr";
-// ui
+// plane imports
 import { ADMIN_BASE_PATH, DEFAULT_SWR_CONFIG } from "@plane/constants";
 import { Toast } from "@plane/ui";
 import { resolveGeneralTheme } from "@plane/utils";
-// constants
-// helpers
 // lib
 import { InstanceProvider } from "@/lib/instance-provider";
 import { StoreProvider } from "@/lib/store-provider";
 import { UserProvider } from "@/lib/user-provider";
 // styles
-import "./globals.css";
+import "@/styles/globals.css";
 
 const ToastWithTheme = () => {
   const { resolvedTheme } = useTheme();

admin/package.json

@@ -17,6 +17,7 @@
     "@headlessui/react": "^1.7.19",
     "@plane/constants": "*",
     "@plane/hooks": "*",
+    "@plane/propel": "*",
     "@plane/services": "*",
     "@plane/types": "*",
     "@plane/ui": "*",

admin/postcss.config.js

@@ -1,8 +1,2 @@
-module.exports = {
+// eslint-disable-next-line @typescript-eslint/no-require-imports
-  plugins: {
+module.exports = require("@plane/tailwind-config/postcss.config.js");
-    "postcss-import": {},
-    "tailwindcss/nesting": {},
-    tailwindcss: {},
-    autoprefixer: {},
-  },
-};

admin/styles/globals.css

@@ -1,5 +1,4 @@
-@import url("https://fonts.googleapis.com/css2?family=Inter:wght@200;300;400;500;600;700;800&display=swap");
+@import "@plane/propel/styles/fonts";
-@import url("https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@48,400,0,0&display=swap");
 
 @tailwind base;
 @tailwind components;
@@ -60,23 +59,31 @@
     --color-border-300: 212, 212, 212; /* strong border- 1 */
     --color-border-400: 185, 185, 185; /* strong border- 2 */
 
-    --color-shadow-2xs: 0px 0px 1px 0px rgba(23, 23, 23, 0.06), 0px 1px 2px 0px rgba(23, 23, 23, 0.06),
+    --color-shadow-2xs:
+      0px 0px 1px 0px rgba(23, 23, 23, 0.06), 0px 1px 2px 0px rgba(23, 23, 23, 0.06),
       0px 1px 2px 0px rgba(23, 23, 23, 0.14);
-    --color-shadow-xs: 0px 1px 2px 0px rgba(0, 0, 0, 0.16), 0px 2px 4px 0px rgba(16, 24, 40, 0.12),
+    --color-shadow-xs:
+      0px 1px 2px 0px rgba(0, 0, 0, 0.16), 0px 2px 4px 0px rgba(16, 24, 40, 0.12),
       0px 1px 8px -1px rgba(16, 24, 40, 0.1);
-    --color-shadow-sm: 0px 1px 4px 0px rgba(0, 0, 0, 0.01), 0px 4px 8px 0px rgba(0, 0, 0, 0.02),
+    --color-shadow-sm:
-      0px 1px 12px 0px rgba(0, 0, 0, 0.12);
+      0px 1px 4px 0px rgba(0, 0, 0, 0.01), 0px 4px 8px 0px rgba(0, 0, 0, 0.02), 0px 1px 12px 0px rgba(0, 0, 0, 0.12);
-    --color-shadow-rg: 0px 3px 6px 0px rgba(0, 0, 0, 0.1), 0px 4px 4px 0px rgba(16, 24, 40, 0.08),
+    --color-shadow-rg:
+      0px 3px 6px 0px rgba(0, 0, 0, 0.1), 0px 4px 4px 0px rgba(16, 24, 40, 0.08),
       0px 1px 12px 0px rgba(16, 24, 40, 0.04);
-    --color-shadow-md: 0px 4px 8px 0px rgba(0, 0, 0, 0.12), 0px 6px 12px 0px rgba(16, 24, 40, 0.12),
+    --color-shadow-md:
+      0px 4px 8px 0px rgba(0, 0, 0, 0.12), 0px 6px 12px 0px rgba(16, 24, 40, 0.12),
       0px 1px 16px 0px rgba(16, 24, 40, 0.12);
-    --color-shadow-lg: 0px 6px 12px 0px rgba(0, 0, 0, 0.12), 0px 8px 16px 0px rgba(0, 0, 0, 0.12),
+    --color-shadow-lg:
+      0px 6px 12px 0px rgba(0, 0, 0, 0.12), 0px 8px 16px 0px rgba(0, 0, 0, 0.12),
       0px 1px 24px 0px rgba(16, 24, 40, 0.12);
-    --color-shadow-xl: 0px 0px 18px 0px rgba(0, 0, 0, 0.16), 0px 0px 24px 0px rgba(16, 24, 40, 0.16),
+    --color-shadow-xl:
+      0px 0px 18px 0px rgba(0, 0, 0, 0.16), 0px 0px 24px 0px rgba(16, 24, 40, 0.16),
       0px 0px 52px 0px rgba(16, 24, 40, 0.16);
-    --color-shadow-2xl: 0px 8px 16px 0px rgba(0, 0, 0, 0.12), 0px 12px 24px 0px rgba(16, 24, 40, 0.12),
+    --color-shadow-2xl:
+      0px 8px 16px 0px rgba(0, 0, 0, 0.12), 0px 12px 24px 0px rgba(16, 24, 40, 0.12),
       0px 1px 32px 0px rgba(16, 24, 40, 0.12);
-    --color-shadow-3xl: 0px 12px 24px 0px rgba(0, 0, 0, 0.12), 0px 16px 32px 0px rgba(0, 0, 0, 0.12),
+    --color-shadow-3xl:
+      0px 12px 24px 0px rgba(0, 0, 0, 0.12), 0px 16px 32px 0px rgba(0, 0, 0, 0.12),
       0px 1px 48px 0px rgba(16, 24, 40, 0.12);
     --color-shadow-4xl: 0px 8px 40px 0px rgba(0, 0, 61, 0.05), 0px 12px 32px -16px rgba(0, 0, 0, 0.05);
 

admin/tsconfig.json

@@ -6,7 +6,8 @@
     "paths": {
       "@/*": ["core/*"],
       "@/public/*": ["public/*"],
-      "@/plane-admin/*": ["ce/*"]
+      "@/plane-admin/*": ["ce/*"],
+      "@/styles/*": ["styles/*"]
     }
   },
   "include": ["next-env.d.ts", "next.config.js", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],

packages/propel/package.json

@@ -9,7 +9,8 @@
   },
   "exports": {
     "./ui/*": "./src/ui/*.tsx",
-    "./charts/*": "./src/charts/*/index.ts"
+    "./charts/*": "./src/charts/*/index.ts",
+    "./styles/fonts": "./src/styles/fonts/index.css"
   },
   "dependencies": {
     "@radix-ui/react-slot": "^1.1.1",

packages/propel/postcss.config.js

@@ -1,6 +1,2 @@
-module.exports = {
+// eslint-disable-next-line @typescript-eslint/no-require-imports
-  plugins: {
+module.exports = require("@plane/tailwind-config/postcss.config.js");
-    tailwindcss: {},
-    autoprefixer: {},
-  },
-};

packages/propel/src/globals.css

@@ -1,12 +0,0 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
-@layer base {
-  * {
-    @apply border-border;
-  }
-  body {
-    @apply font-sans antialiased bg-background text-foreground;
-  }
-}

packages/propel/src/styles/fonts/index.css

@@ -4,7 +4,7 @@
   font-family: Inter;
   font-style: normal;
   font-weight: 200;
-  src: url("fonts/Inter/inter-v13-latin-200.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+  src: url("./Inter/inter-v13-latin-200.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
 }
 
 /* inter-300 - latin */
@@ -13,7 +13,7 @@
   font-family: Inter;
   font-style: normal;
   font-weight: 300;
-  src: url("fonts/Inter/inter-v13-latin-300.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+  src: url("./Inter/inter-v13-latin-300.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
 }
 
 /* inter-regular - latin */
@@ -22,7 +22,7 @@
   font-family: Inter;
   font-style: normal;
   font-weight: 405;
-  src: url("fonts/Inter/inter-v13-latin-regular.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+  src: url("./Inter/inter-v13-latin-regular.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
 }
 
 /* inter-500 - latin */
@@ -31,7 +31,16 @@
   font-family: Inter;
   font-style: normal;
   font-weight: 500;
-  src: url("fonts/Inter/inter-v13-latin-500.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+  src: url("./Inter/inter-v13-latin-500.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+}
+
+/* inter-600 - latin */
+@font-face {
+  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+  font-family: Inter;
+  font-style: normal;
+  font-weight: 600;
+  src: url("./Inter/inter-v13-latin-600.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
 }
 
 /* inter-700 - latin */
@@ -40,7 +49,7 @@
   font-family: Inter;
   font-style: normal;
   font-weight: 700;
-  src: url("fonts/Inter/inter-v13-latin-700.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+  src: url("./Inter/inter-v13-latin-700.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
 }
 
 /* inter-800 - latin */
@@ -49,7 +58,7 @@
   font-family: Inter;
   font-style: normal;
   font-weight: 800;
-  src: url("fonts/Inter/inter-v13-latin-800.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+  src: url("./Inter/inter-v13-latin-800.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
 }
 
 /* material-symbols-rounded-regular - latin */
@@ -58,7 +67,7 @@
   font-family: "Material Symbols Rounded";
   font-style: normal;
   font-weight: 400;
-  src: url("fonts/Material-Symbols-Rounded/material-symbols-rounded-v168-latin-regular.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+  src: url("./Material-Symbols-Rounded/material-symbols-rounded-v168-latin-regular.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
 }
 
 .material-symbols-rounded {

space/package.json

@@ -22,6 +22,7 @@
     "@plane/constants": "*",
     "@plane/editor": "*",
     "@plane/i18n": "*",
+    "@plane/propel": "*",
     "@plane/services": "*",
     "@plane/types": "*",
     "@plane/ui": "*",

space/styles/globals.css

@@ -1,5 +1,4 @@
-@import url("https://fonts.googleapis.com/css2?family=Inter:wght@200;300;400;500;600;700;800&display=swap");
+@import "@plane/propel/styles/fonts";
-@import url("https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@48,400,0,0&display=swap");
 
 @tailwind base;
 @tailwind components;

web/postcss.config.js

@@ -1,8 +1,2 @@
-module.exports = {
+// eslint-disable-next-line @typescript-eslint/no-require-imports
-  plugins: {
+module.exports = require("@plane/tailwind-config/postcss.config.js");
-    "postcss-import": {},
-    "tailwindcss/nesting": {},
-    tailwindcss: {},
-    autoprefixer: {},
-  },
-};

web/styles/globals.css

@@ -1,4 +1,4 @@
-@import url("fonts/main.css");
+@import "@plane/propel/styles/fonts";
 
 @tailwind base;
 @tailwind components;