Rule `vue/prefer-separate-static-class` does not support string interpolated static and dynamic classes.

[immannino]

Checklist

• I have tried restarting my IDE and the issue persists.
• I have read the FAQ and my problem is not listed.

Tell us about your environment

• ESLint version: 8.37.0
• eslint-plugin-vue version: 9.10.0
• Node version: 14.20.0
• Operating System: macOS Monterey

Please show your full configuration:

module.exports = {
    extends: [
        '@nuxtjs/eslint-config-typescript',
        'plugin:vue/recommended'
    ],
    rules: {
        indent: ['error', 4],
        semi: ['error', 'always'],
        'require-await': 'off',
        'no-tabs': 0,
        'prefer-destructuring': ['warn', { object: true, array: false }],
        'no-unused-vars': ['warn'],
        'vue/no-v-html': 0,
        'vue/require-default-prop': 0,
        'vue/html-indent': [
            'error',
            'tab',
            { alignAttributesVertically: true }
        ],
        'vue/prefer-separate-static-class': 'error',
        'vue/no-arrow-functions-in-watch': 'error',
        'vue/html-self-closing': [
            'error',
            {
                html: {
                    void: 'always',
                    normal: 'never',
                    component: 'any'
                }
            }
        ]
    }

};

What did you do?

<template>
    <div class="component">
        <input type="text" :class="`form-item input ${isDisabled ? 'disabled' : ''}`">
    </div>
</template>
<script>
export default {
    data() {
        return {
            isDisabled: false
        }
    }
    // vuelidate logic etc
}
</script>

What did you expect to happen?

I would expect the linter to error out that there are static classes on the property.

I recognize the complexity of trying to implement a solution that works for --fix since there is no clear way to know how many nested conditions or string class properties exist with the string interpolated ternary expression.

What actually happened?

The linter is ignoring the dynamic :class="`${}`" and treating it as a valid static class.

Repository to reproduce this issue

eslint-plugin-vue Online Playground