Fix the cross-origin access issue of stylesheets (GH-38)

Author: ArtyomVancyan

package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.1.7",
+  "version": "0.1.8",
   "name": "antd-phone-input",
   "description": "Advanced, highly customizable phone input component for Ant Design.",
   "keywords": [

src/index.tsx

@@ -1,65 +1,36 @@
-import {useContext, useEffect, useMemo} from "react";
-import theme from "antd/lib/theme";
+import {useContext, useMemo} from "react";
+import useToken from "antd/lib/theme/useToken";
 import genComponentStyleHook from "antd/lib/input/style";
+import {ConfigContext} from "antd/lib/config-provider";
+import {useStyleRegister} from "antd/lib/theme/internal";
 import {FormItemInputContext} from "antd/lib/form/context";
 import {getStatusClassNames} from "antd/lib/_util/statusUtils";
 
 import InputLegacy from "./legacy";
+import genPhoneInputStyle from "./style";
 import {PhoneInputProps} from "./types";
 
 const PhoneInput = (inputLegacyProps: PhoneInputProps) => {
-	const {token} = theme.useToken();
+	const {getPrefixCls} = useContext(ConfigContext);
 	const {status}: any = useContext(FormItemInputContext);
-	const [_1, inputCls] = genComponentStyleHook("ant-input");
-	const [_2, dropdownCls] = genComponentStyleHook("ant-dropdown");
+	const inputPrefixCls = getPrefixCls("input");
+	const dropdownPrefixCls = getPrefixCls("dropdown");
+	const [_1, inputCls] = genComponentStyleHook(inputPrefixCls);
+	const [_2, dropdownCls] = genComponentStyleHook(dropdownPrefixCls);
+	const [theme, token, _3] = useToken();
 
 	const inputClass = useMemo(() => {
-		return `${inputCls} ` + getStatusClassNames("ant-input", status);
-	}, [inputCls, status]);
+		return `${inputCls} ` + getStatusClassNames(inputPrefixCls, status);
+	}, [inputPrefixCls, inputCls, status]);
 
 	const dropdownClass = useMemo(() => "ant-dropdown " + dropdownCls, [dropdownCls]);
 
-	useEffect(() => {
-		/** Load antd 5.x styles dynamically observing the theme change */
-		for (let styleSheet of document?.styleSheets || []) {
-			let rule: any;
-			for (rule of styleSheet?.cssRules || styleSheet?.rules || []) {
-				if (rule.selectorText === ".react-tel-input .country-list") {
-					rule.style.boxShadow = token.boxShadow;
-					rule.style.backgroundColor = token.colorBgElevated;
-				}
-				if (rule.selectorText === ".react-tel-input .selected-flag") {
-					rule.style.borderColor = token.colorBorder;
-				}
-				if (rule.selectorText === ".react-tel-input .country-list .search") {
-					rule.style.backgroundColor = token.colorBgElevated;
-				}
-				if (rule.selectorText === ".react-tel-input .country-list .country") {
-					rule.style.borderRadius = token.borderRadiusOuter + "px";
-				}
-				if (rule.selectorText === ".react-tel-input .country-list .country-name") {
-					rule.style.color = token.colorText;
-				}
-				if (rule.selectorText === ".react-tel-input .country-list .country .dial-code") {
-					rule.style.color = token.colorTextDescription;
-				}
-				if (rule.selectorText === ".react-tel-input .country-list .country:hover") {
-					rule.style.backgroundColor = token.colorBgTextHover;
-				}
-				if (rule.selectorText === ".react-tel-input .country-list .country.highlight") {
-					rule.style.backgroundColor = token.colorPrimaryBg;
-				}
-				if (rule.selectorText === `:where(.${inputCls}).ant-input`) {
-					rule.selectorText += "\n,.react-tel-input .country-list .search-box";
-                    rule.style.backgroundColor = token.colorBgElevated;
-				}
-				if (rule.selectorText === `:where(.${inputCls}).ant-input:hover`) {
-					rule.selectorText += "\n,.react-tel-input .country-list .search-box:focus";
-					rule.selectorText += "\n,.react-tel-input .country-list .search-box:hover";
-				}
-			}
-		}
-	}, [inputCls, token])
+	useStyleRegister({
+		theme,
+		token,
+		hashId: "react-tel-input",
+		path: ["antd-phone-input"],
+	}, () => [genPhoneInputStyle(token)]);
 
 	return (
 		<InputLegacy

src/style.ts

@@ -0,0 +1,21 @@
+import {GlobalToken} from "antd/lib/theme/interface";
+import {genBasicInputStyle, initInputToken, InputToken} from "antd/lib/input/style";
+
+export default (token: GlobalToken) => ({
+	".react-tel-input": {
+		".country-list": {
+			boxShadow: token.boxShadow,
+			backgroundColor: token.colorBgElevated,
+			".country-name": {color: token.colorText},
+			".search": {backgroundColor: token.colorBgElevated},
+			".search-box": genBasicInputStyle(initInputToken(token) as InputToken),
+			".country": {
+				borderRadius: token.borderRadiusOuter,
+				".dial-code": {color: token.colorTextDescription},
+				"&:hover": {backgroundColor: token.colorBgTextHover},
+				"&.highlight": {backgroundColor: token.colorPrimaryBg},
+			},
+		},
+		".selected-flag": {borderColor: token.colorBorder},
+	}
+})