From af76d222e77ffe930180ac248da78bc91dbc1028 Mon Sep 17 00:00:00 2001 From: kabin thakuri Date: Tue, 17 Feb 2026 12:01:07 +0545 Subject: [PATCH 1/2] refactor(ui)!: update flag icon css to generate in separate chunks --- apps/demo/src/main.tsx | 1 + packages/ui/package.json | 1 + packages/ui/src/CountryDisplay/index.tsx | 2 ++ packages/ui/src/FormWidgets/CountryPicker/index.tsx | 2 ++ packages/ui/src/assets/css/form-widgets/index.css | 2 -- packages/ui/src/react-env.d.ts | 1 + packages/ui/vite.config.ts | 8 ++++++++ 7 files changed, 15 insertions(+), 2 deletions(-) diff --git a/apps/demo/src/main.tsx b/apps/demo/src/main.tsx index e9ee4ab85..3c1f1f88a 100644 --- a/apps/demo/src/main.tsx +++ b/apps/demo/src/main.tsx @@ -19,6 +19,7 @@ import "primeicons/primeicons.css"; import "@prefabs.tech/react-form/dist/PrefabsTechReactForm.css"; import "@prefabs.tech/react-i18n/dist/PrefabsTechReactI18n.css"; import "@prefabs.tech/react-layout/dist/PrefabsTechReactLayout.css"; +import "@prefabs.tech/react-ui/dist/PrefabsTechFlagIcon.css"; import "@prefabs.tech/react-ui/dist/PrefabsTechReactUI.css"; import "@prefabs.tech/react-user/dist/PrefabsTechReactUser.css"; diff --git a/packages/ui/package.json b/packages/ui/package.json index a0e668c46..50711dab4 100644 --- a/packages/ui/package.json +++ b/packages/ui/package.json @@ -8,6 +8,7 @@ "import": "./dist/PrefabsTechReactUI.es.js", "require": "./dist/PrefabsTechReactUI.umd.js" }, + "./dist/PrefabsTechFlagIcon.css": "./dist/flag-icon.css", "./dist/PrefabsTechReactUI.css": "./dist/react-ui.css" }, "main": "./dist/PrefabsTechReactUI.umd.js", diff --git a/packages/ui/src/CountryDisplay/index.tsx b/packages/ui/src/CountryDisplay/index.tsx index 8d3c6f546..0b99e0d79 100644 --- a/packages/ui/src/CountryDisplay/index.tsx +++ b/packages/ui/src/CountryDisplay/index.tsx @@ -6,6 +6,8 @@ import type { Locales } from "../types"; import "../assets/css/country-display.css"; +import("@dzangolab/flag-icon-css/css/flag-icon.min.css"); + interface CountryDisplayProperties { className?: string; code: string; diff --git a/packages/ui/src/FormWidgets/CountryPicker/index.tsx b/packages/ui/src/FormWidgets/CountryPicker/index.tsx index fa8c9ace5..047fbbc77 100644 --- a/packages/ui/src/FormWidgets/CountryPicker/index.tsx +++ b/packages/ui/src/FormWidgets/CountryPicker/index.tsx @@ -16,6 +16,8 @@ import type { } from "../../types/country-picker"; import type { GroupedOption as OptionGroup, Option } from "../Select"; +import("@dzangolab/flag-icon-css/css/flag-icon.min.css"); + const getFavoriteOptions = ( favorites: string[], locale: string, diff --git a/packages/ui/src/assets/css/form-widgets/index.css b/packages/ui/src/assets/css/form-widgets/index.css index 4b31a18e6..e7ecc2546 100644 --- a/packages/ui/src/assets/css/form-widgets/index.css +++ b/packages/ui/src/assets/css/form-widgets/index.css @@ -1,5 +1,3 @@ -@import "@dzangolab/flag-icon-css/css/flag-icon.min.css"; - @import "./field.css"; @import "./checkbox-input.css"; diff --git a/packages/ui/src/react-env.d.ts b/packages/ui/src/react-env.d.ts index dd4ab7e91..45b093962 100644 --- a/packages/ui/src/react-env.d.ts +++ b/packages/ui/src/react-env.d.ts @@ -1 +1,2 @@ +declare module "*.css"; declare module "*.svg"; diff --git a/packages/ui/vite.config.ts b/packages/ui/vite.config.ts index 47dc567ef..417458ed9 100644 --- a/packages/ui/vite.config.ts +++ b/packages/ui/vite.config.ts @@ -12,6 +12,7 @@ export default defineConfig(({ mode }) => { return { build: { + cssCodeSplit: true, lib: { entry: resolve(dirname(fileURLToPath(import.meta.url)), "src/index.ts"), fileName: (format) => `PrefabsTechReactUI.${format}.js`, @@ -23,6 +24,13 @@ export default defineConfig(({ mode }) => { ...Object.keys(dependencies), ], output: { + assetFileNames: (assetInfo) => { + if (assetInfo.names?.includes("index.css")) { + return "react-ui.css"; + } + + return assetInfo.names?.[0]; + }, exports: "named", globals: { react: "React", From b63154e8661f1eb48ebe4e3e758e77c3a727dc51 Mon Sep 17 00:00:00 2001 From: kabin thakuri Date: Tue, 17 Feb 2026 13:53:59 +0545 Subject: [PATCH 2/2] chore(demo/ui): update flag icon css import to component level --- .../Views/Ui/components/CountryDisplay/CountryDisplayDemo.tsx | 2 ++ apps/demo/src/Views/Ui/components/FormWidgets/CountryPicker.tsx | 2 ++ apps/demo/src/main.tsx | 1 - 3 files changed, 4 insertions(+), 1 deletion(-) diff --git a/apps/demo/src/Views/Ui/components/CountryDisplay/CountryDisplayDemo.tsx b/apps/demo/src/Views/Ui/components/CountryDisplay/CountryDisplayDemo.tsx index 0d5e64c99..f9b9fa736 100644 --- a/apps/demo/src/Views/Ui/components/CountryDisplay/CountryDisplayDemo.tsx +++ b/apps/demo/src/Views/Ui/components/CountryDisplay/CountryDisplayDemo.tsx @@ -9,6 +9,8 @@ import nepaliData from "../FormWidgets/np.json"; import "../../../../assets/css/country.css"; export const CountryDisplayDemo = () => { + import("@prefabs.tech/react-ui/dist/PrefabsTechFlagIcon.css"); + const [t] = useTranslation("ui"); const navigate = useNavigate(); const selectedLocale = i18n.language; diff --git a/apps/demo/src/Views/Ui/components/FormWidgets/CountryPicker.tsx b/apps/demo/src/Views/Ui/components/FormWidgets/CountryPicker.tsx index d2a81d370..9b544bcf0 100644 --- a/apps/demo/src/Views/Ui/components/FormWidgets/CountryPicker.tsx +++ b/apps/demo/src/Views/Ui/components/FormWidgets/CountryPicker.tsx @@ -14,6 +14,8 @@ import nepaliData from "./np.json"; import { CodeBlock, Section } from "../../../../components/Demo"; export const CountryPickerDemo = () => { + import("@prefabs.tech/react-ui/dist/PrefabsTechFlagIcon.css"); + const [t, i18n] = useTranslation("ui"); const navigate = useNavigate(); const locale = i18n.language; diff --git a/apps/demo/src/main.tsx b/apps/demo/src/main.tsx index 3c1f1f88a..e9ee4ab85 100644 --- a/apps/demo/src/main.tsx +++ b/apps/demo/src/main.tsx @@ -19,7 +19,6 @@ import "primeicons/primeicons.css"; import "@prefabs.tech/react-form/dist/PrefabsTechReactForm.css"; import "@prefabs.tech/react-i18n/dist/PrefabsTechReactI18n.css"; import "@prefabs.tech/react-layout/dist/PrefabsTechReactLayout.css"; -import "@prefabs.tech/react-ui/dist/PrefabsTechFlagIcon.css"; import "@prefabs.tech/react-ui/dist/PrefabsTechReactUI.css"; import "@prefabs.tech/react-user/dist/PrefabsTechReactUser.css";