Usage with ::v-deep / :deep()

[xFeXx]

Hello :) I have build a component library for both vue 2.x and vue 3.x with this awesome library and I recently stumpled across a problem I couldn't find a solution to. In our css we have the power of ::v-deep / :deep() for our scoped styling. Is there any functionality in this project I could use to have a switch for this depending on our vue version, or should I simply use both and live with the deprecation warnings? Any ideas in your bright minds?

[peichenhu]

hi，仅使用 /deep/ 如果是 less 这样处理：

 install: function (_, pluginManager) {
        class PreProcessor {
            process(stylesheet) {
                const deep_var = '@{deep}';
                const vue_2_deep = '/deep/';
                const less_var = '@deep: ~\':deep()\';\n';
                stylesheet = less_var + stylesheet;
                stylesheet = stylesheet.replace(new RegExp(vue_2_deep, 'gm'), deep_var);
                return stylesheet;
            }
        }
        pluginManager.addPreProcessor(new PreProcessor());
    }

[xFeXx]

Thank you @peichenhu for your reply. Any usage with /deep/ is considered depricated. See https://stackoverflow.com/questions/48032006/how-do-i-use-deep-or-or-v-deep-in-vue-js

Your solution within the preprocessor must be written in every project where I would use my component library, which I cannot guarantee.