From 57802b564ecbeea670d7d11580d58fc794c40b30 Mon Sep 17 00:00:00 2001 From: Prateek Shourya Date: Wed, 30 Apr 2025 19:16:49 +0530 Subject: [PATCH 1/2] [WEB-3985] feat: common postcss config and local fonts across all plane applications --- admin/app/layout.tsx | 6 ++-- admin/package.json | 3 +- admin/postcss.config.js | 10 ++---- admin/{app => styles}/globals.css | 31 +++++++++++------- admin/tsconfig.json | 3 +- packages/propel/package.json | 3 +- packages/propel/postcss.config.js | 8 ++--- packages/propel/src/globals.css | 12 ------- .../propel/src}/styles/fonts/Inter/LICENSE | 0 .../fonts/Inter/inter-v13-latin-200.woff2 | Bin .../fonts/Inter/inter-v13-latin-300.woff2 | Bin .../fonts/Inter/inter-v13-latin-500.woff2 | Bin .../fonts/Inter/inter-v13-latin-600.woff2 | Bin .../fonts/Inter/inter-v13-latin-700.woff2 | Bin .../fonts/Inter/inter-v13-latin-800.woff2 | Bin .../fonts/Inter/inter-v13-latin-regular.woff2 | Bin .../fonts/Material-Symbols-Rounded/LICENSE | 0 ...l-symbols-rounded-v168-latin-regular.woff2 | Bin .../propel/src}/styles/fonts/main.css | 23 +++++++++---- packages/propel/src/styles/index.css | 1 + space/package.json | 1 + space/styles/globals.css | 3 +- web/postcss.config.js | 10 ++---- web/styles/globals.css | 2 +- 24 files changed, 53 insertions(+), 63 deletions(-) rename admin/{app => styles}/globals.css (92%) delete mode 100644 packages/propel/src/globals.css rename {web => packages/propel/src}/styles/fonts/Inter/LICENSE (100%) rename {web => packages/propel/src}/styles/fonts/Inter/inter-v13-latin-200.woff2 (100%) rename {web => packages/propel/src}/styles/fonts/Inter/inter-v13-latin-300.woff2 (100%) rename {web => packages/propel/src}/styles/fonts/Inter/inter-v13-latin-500.woff2 (100%) rename {web => packages/propel/src}/styles/fonts/Inter/inter-v13-latin-600.woff2 (100%) rename {web => packages/propel/src}/styles/fonts/Inter/inter-v13-latin-700.woff2 (100%) rename {web => packages/propel/src}/styles/fonts/Inter/inter-v13-latin-800.woff2 (100%) rename {web => packages/propel/src}/styles/fonts/Inter/inter-v13-latin-regular.woff2 (100%) rename {web => packages/propel/src}/styles/fonts/Material-Symbols-Rounded/LICENSE (100%) rename {web => packages/propel/src}/styles/fonts/Material-Symbols-Rounded/material-symbols-rounded-v168-latin-regular.woff2 (100%) rename {web => packages/propel/src}/styles/fonts/main.css (63%) create mode 100644 packages/propel/src/styles/index.css diff --git a/admin/app/layout.tsx b/admin/app/layout.tsx index ef9559af8c8..b10e9186c3c 100644 --- a/admin/app/layout.tsx +++ b/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(); diff --git a/admin/package.json b/admin/package.json index a809ef1b139..0ee292f03e2 100644 --- a/admin/package.json +++ b/admin/package.json @@ -17,10 +17,11 @@ "@headlessui/react": "^1.7.19", "@plane/constants": "*", "@plane/hooks": "*", + "@plane/propel": "*", + "@plane/services": "*", "@plane/types": "*", "@plane/ui": "*", "@plane/utils": "*", - "@plane/services": "*", "@tailwindcss/typography": "^0.5.9", "@types/lodash": "^4.17.0", "autoprefixer": "10.4.14", diff --git a/admin/postcss.config.js b/admin/postcss.config.js index 6887c82624a..9b1e55fc440 100644 --- a/admin/postcss.config.js +++ b/admin/postcss.config.js @@ -1,8 +1,2 @@ -module.exports = { - plugins: { - "postcss-import": {}, - "tailwindcss/nesting": {}, - tailwindcss: {}, - autoprefixer: {}, - }, -}; +// eslint-disable-next-line @typescript-eslint/no-require-imports +module.exports = require("@plane/tailwind-config/postcss.config.js"); diff --git a/admin/app/globals.css b/admin/styles/globals.css similarity index 92% rename from admin/app/globals.css rename to admin/styles/globals.css index 0a2218c219e..69134ddbf1d 100644 --- a/admin/app/globals.css +++ b/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 url("https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@48,400,0,0&display=swap"); +@import "@plane/propel/styles"; @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), - 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-sm: + 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), 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); diff --git a/admin/tsconfig.json b/admin/tsconfig.json index f9bb7cf10b7..e32f01e6a18 100644 --- a/admin/tsconfig.json +++ b/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"], diff --git a/packages/propel/package.json b/packages/propel/package.json index 382739d0368..aa926572756 100644 --- a/packages/propel/package.json +++ b/packages/propel/package.json @@ -9,7 +9,8 @@ }, "exports": { "./ui/*": "./src/ui/*.tsx", - "./charts/*": "./src/charts/*/index.ts" + "./charts/*": "./src/charts/*/index.ts", + "./styles": "./src/styles/index.css" }, "dependencies": { "@radix-ui/react-slot": "^1.1.1", diff --git a/packages/propel/postcss.config.js b/packages/propel/postcss.config.js index 12a703d900d..9b1e55fc440 100644 --- a/packages/propel/postcss.config.js +++ b/packages/propel/postcss.config.js @@ -1,6 +1,2 @@ -module.exports = { - plugins: { - tailwindcss: {}, - autoprefixer: {}, - }, -}; +// eslint-disable-next-line @typescript-eslint/no-require-imports +module.exports = require("@plane/tailwind-config/postcss.config.js"); diff --git a/packages/propel/src/globals.css b/packages/propel/src/globals.css deleted file mode 100644 index ee28968088a..00000000000 --- a/packages/propel/src/globals.css +++ /dev/null @@ -1,12 +0,0 @@ -@tailwind base; -@tailwind components; -@tailwind utilities; - -@layer base { - * { - @apply border-border; - } - body { - @apply font-sans antialiased bg-background text-foreground; - } -} diff --git a/web/styles/fonts/Inter/LICENSE b/packages/propel/src/styles/fonts/Inter/LICENSE similarity index 100% rename from web/styles/fonts/Inter/LICENSE rename to packages/propel/src/styles/fonts/Inter/LICENSE diff --git a/web/styles/fonts/Inter/inter-v13-latin-200.woff2 b/packages/propel/src/styles/fonts/Inter/inter-v13-latin-200.woff2 similarity index 100% rename from web/styles/fonts/Inter/inter-v13-latin-200.woff2 rename to packages/propel/src/styles/fonts/Inter/inter-v13-latin-200.woff2 diff --git a/web/styles/fonts/Inter/inter-v13-latin-300.woff2 b/packages/propel/src/styles/fonts/Inter/inter-v13-latin-300.woff2 similarity index 100% rename from web/styles/fonts/Inter/inter-v13-latin-300.woff2 rename to packages/propel/src/styles/fonts/Inter/inter-v13-latin-300.woff2 diff --git a/web/styles/fonts/Inter/inter-v13-latin-500.woff2 b/packages/propel/src/styles/fonts/Inter/inter-v13-latin-500.woff2 similarity index 100% rename from web/styles/fonts/Inter/inter-v13-latin-500.woff2 rename to packages/propel/src/styles/fonts/Inter/inter-v13-latin-500.woff2 diff --git a/web/styles/fonts/Inter/inter-v13-latin-600.woff2 b/packages/propel/src/styles/fonts/Inter/inter-v13-latin-600.woff2 similarity index 100% rename from web/styles/fonts/Inter/inter-v13-latin-600.woff2 rename to packages/propel/src/styles/fonts/Inter/inter-v13-latin-600.woff2 diff --git a/web/styles/fonts/Inter/inter-v13-latin-700.woff2 b/packages/propel/src/styles/fonts/Inter/inter-v13-latin-700.woff2 similarity index 100% rename from web/styles/fonts/Inter/inter-v13-latin-700.woff2 rename to packages/propel/src/styles/fonts/Inter/inter-v13-latin-700.woff2 diff --git a/web/styles/fonts/Inter/inter-v13-latin-800.woff2 b/packages/propel/src/styles/fonts/Inter/inter-v13-latin-800.woff2 similarity index 100% rename from web/styles/fonts/Inter/inter-v13-latin-800.woff2 rename to packages/propel/src/styles/fonts/Inter/inter-v13-latin-800.woff2 diff --git a/web/styles/fonts/Inter/inter-v13-latin-regular.woff2 b/packages/propel/src/styles/fonts/Inter/inter-v13-latin-regular.woff2 similarity index 100% rename from web/styles/fonts/Inter/inter-v13-latin-regular.woff2 rename to packages/propel/src/styles/fonts/Inter/inter-v13-latin-regular.woff2 diff --git a/web/styles/fonts/Material-Symbols-Rounded/LICENSE b/packages/propel/src/styles/fonts/Material-Symbols-Rounded/LICENSE similarity index 100% rename from web/styles/fonts/Material-Symbols-Rounded/LICENSE rename to packages/propel/src/styles/fonts/Material-Symbols-Rounded/LICENSE diff --git a/web/styles/fonts/Material-Symbols-Rounded/material-symbols-rounded-v168-latin-regular.woff2 b/packages/propel/src/styles/fonts/Material-Symbols-Rounded/material-symbols-rounded-v168-latin-regular.woff2 similarity index 100% rename from web/styles/fonts/Material-Symbols-Rounded/material-symbols-rounded-v168-latin-regular.woff2 rename to packages/propel/src/styles/fonts/Material-Symbols-Rounded/material-symbols-rounded-v168-latin-regular.woff2 diff --git a/web/styles/fonts/main.css b/packages/propel/src/styles/fonts/main.css similarity index 63% rename from web/styles/fonts/main.css rename to packages/propel/src/styles/fonts/main.css index 7263a01a920..7d6779d226c 100644 --- a/web/styles/fonts/main.css +++ b/packages/propel/src/styles/fonts/main.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 { diff --git a/packages/propel/src/styles/index.css b/packages/propel/src/styles/index.css new file mode 100644 index 00000000000..986251eacc8 --- /dev/null +++ b/packages/propel/src/styles/index.css @@ -0,0 +1 @@ +@import url("./fonts/main.css"); diff --git a/space/package.json b/space/package.json index 25db4589530..7f05ede6dea 100644 --- a/space/package.json +++ b/space/package.json @@ -22,6 +22,7 @@ "@plane/constants": "*", "@plane/editor": "*", "@plane/i18n": "*", + "@plane/propel": "*", "@plane/types": "*", "@plane/ui": "*", "@plane/services": "*", diff --git a/space/styles/globals.css b/space/styles/globals.css index 8976e83c2d7..54e0b959699 100644 --- a/space/styles/globals.css +++ b/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 url("https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@48,400,0,0&display=swap"); +@import "@plane/propel/styles"; @tailwind base; @tailwind components; diff --git a/web/postcss.config.js b/web/postcss.config.js index 6887c82624a..9b1e55fc440 100644 --- a/web/postcss.config.js +++ b/web/postcss.config.js @@ -1,8 +1,2 @@ -module.exports = { - plugins: { - "postcss-import": {}, - "tailwindcss/nesting": {}, - tailwindcss: {}, - autoprefixer: {}, - }, -}; +// eslint-disable-next-line @typescript-eslint/no-require-imports +module.exports = require("@plane/tailwind-config/postcss.config.js"); diff --git a/web/styles/globals.css b/web/styles/globals.css index 55c8c869ee7..5de95546b10 100644 --- a/web/styles/globals.css +++ b/web/styles/globals.css @@ -1,4 +1,4 @@ -@import url("fonts/main.css"); +@import "@plane/propel/styles"; @tailwind base; @tailwind components; From 9e7ae9eef7ecee07e9b87bbd90bd99e9b5f0de4f Mon Sep 17 00:00:00 2001 From: Prateek Shourya Date: Wed, 30 Apr 2025 21:38:25 +0530 Subject: [PATCH 2/2] improvement: split fonts into a separate exports --- admin/styles/globals.css | 2 +- packages/propel/package.json | 2 +- packages/propel/src/styles/fonts/{main.css => index.css} | 0 packages/propel/src/styles/index.css | 1 - space/styles/globals.css | 2 +- web/styles/globals.css | 2 +- 6 files changed, 4 insertions(+), 5 deletions(-) rename packages/propel/src/styles/fonts/{main.css => index.css} (100%) delete mode 100644 packages/propel/src/styles/index.css diff --git a/admin/styles/globals.css b/admin/styles/globals.css index 69134ddbf1d..d5554ce2f27 100644 --- a/admin/styles/globals.css +++ b/admin/styles/globals.css @@ -1,4 +1,4 @@ -@import "@plane/propel/styles"; +@import "@plane/propel/styles/fonts"; @tailwind base; @tailwind components; diff --git a/packages/propel/package.json b/packages/propel/package.json index aa926572756..3522c2f64a2 100644 --- a/packages/propel/package.json +++ b/packages/propel/package.json @@ -10,7 +10,7 @@ "exports": { "./ui/*": "./src/ui/*.tsx", "./charts/*": "./src/charts/*/index.ts", - "./styles": "./src/styles/index.css" + "./styles/fonts": "./src/styles/fonts/index.css" }, "dependencies": { "@radix-ui/react-slot": "^1.1.1", diff --git a/packages/propel/src/styles/fonts/main.css b/packages/propel/src/styles/fonts/index.css similarity index 100% rename from packages/propel/src/styles/fonts/main.css rename to packages/propel/src/styles/fonts/index.css diff --git a/packages/propel/src/styles/index.css b/packages/propel/src/styles/index.css deleted file mode 100644 index 986251eacc8..00000000000 --- a/packages/propel/src/styles/index.css +++ /dev/null @@ -1 +0,0 @@ -@import url("./fonts/main.css"); diff --git a/space/styles/globals.css b/space/styles/globals.css index 54e0b959699..5d27de67493 100644 --- a/space/styles/globals.css +++ b/space/styles/globals.css @@ -1,4 +1,4 @@ -@import "@plane/propel/styles"; +@import "@plane/propel/styles/fonts"; @tailwind base; @tailwind components; diff --git a/web/styles/globals.css b/web/styles/globals.css index 5de95546b10..ff71ba5ac32 100644 --- a/web/styles/globals.css +++ b/web/styles/globals.css @@ -1,4 +1,4 @@ -@import "@plane/propel/styles"; +@import "@plane/propel/styles/fonts"; @tailwind base; @tailwind components;