Question - How to use this right?

[ArtyomVancyan]

I could not find any documentation of the usage of this interesting lib.

I have a bad code that tries to do the same (as much as I understand) that does cssinjs, but it throws some errors when there exist certain browser add-ons used. So the following is my code and I want to achieve the same behavior using the cssinjs. Please note that the token variable refers to the global token of the current theme. (Full code can be found here.)

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

So this part of the code tries to make the existing stylesheets of the third-party dependency use the antd theme color scheme. And the question is can the cssinjs replace this code to achieve this behavior and if so, how?

P.S. I have tried to create a custom transformer, but it does not contain the stylesheets of the third-party dependencies.

const transform = (token) => ({
    visit: (rule) => {
        // Manipulate the rule object
        return rule;
    }
})

Will appreciate any kind of help!

[ArtyomVancyan]

@zombieJ, could you please take a look? Why I can't see all the stylesheets of the third-party dependencies? 谢谢

[ArtyomVancyan]

If someone in the future will ever be interested in the solution I have found for solving the above-described issue, I am leaving the link of the pull request that may be useful for solving a similar problem.