refactor(ui)!: update flag icon css to generate in separate chunks

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;

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;

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",

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;

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 = <T,>(
   favorites: string[],
   locale: string,

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";

packages/ui/src/react-env.d.ts

@@ -1 +1,2 @@
+declare module "*.css";
 declare module "*.svg";

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",