Closes https://github.com/future-architect/eslint-plugin-vue-scoped-css/issues/101

I ended up naming it acceptCssModules instead of acceptModule because the name is actually plural "CSS Modules".

Thank you

I'm also curious if you'd be open to requiring scoping via CSS Modules as well. So instead of acceptCssModules, we do:

{
	"cssModules": undefined | "accept" | "require"
}

where:

• undefined: Don't acknowledge module
• accept: Accept module in-place of scope
• require: Require scoping via module instead of scope

Apr 26 Update:

Implemented the following:

{
	"module": undefined | "accept" | "enforce"
}

May 20 Update:

Implementing the following:

{
	allows: ("plain" | "scoped" | "module")[]
}

May 21 Update:

Moved to new rule enforce-style-type

~~I want to prevent using v-deep selector in my project but there is no such rule now.~~ ~~And I think it should not be a general rule, so I thought that I will use no-restricted-syntax rule.~~ ~~But there is no such rule now, so I created this issue.~~

~~If it should be declared as a general rule, maybe rule name is vue-scoped-css/no-v-deep?~~

It would be better if there is a rule that enforces to use :deep() or ::v-deep(). Please see a new issue https://github.com/future-architect/eslint-plugin-vue-scoped-css/issues/258

Hi! Is it possible to configure vue-scoped-css/require-v-deep-argument rule to apply fixes with :deep() instead of ::v-deep for Vue 3 projects?

As stated in the following articles, the :deep() is currently supported syntax over the deprecated ::v-deep syntax.

• https://vuejs.org/api/sfc-css-features.html#deep-selectors
• https://stackoverflow.com/a/63986379/6934292

Hello,

I am facing an error when trying to install this plugin using the npm command mentioned in the Readme. Error seems to be on a peer dependency. Not sure if this is related to dependencies in the plugin, or my project, or both.

I am using node 14 and eslint 6.7. Appreciate any guidance on this. Thank you!

npm WARN ERESOLVE overriding peer dependency
npm WARN Found: [email protected]
npm WARN node_modules/eslint-plugin-vue-scoped-css/node_modules/postcss
npm WARN   postcss@"^8.2.4" from [email protected]
npm WARN   node_modules/eslint-plugin-vue-scoped-css
npm WARN     dev eslint-plugin-vue-scoped-css@"*" from the root project
npm WARN 
npm WARN Could not resolve dependency:
npm WARN peer postcss@"^8.3.3" from [email protected]
npm WARN node_modules/eslint-plugin-vue-scoped-css/node_modules/postcss-safe-parser
npm WARN   postcss-safe-parser@"^6.0.0" from [email protected]
npm WARN   node_modules/eslint-plugin-vue-scoped-css
npm WARN ERESOLVE overriding peer dependency
npm WARN Found: [email protected]
npm WARN node_modules/eslint-plugin-vue-scoped-css/node_modules/postcss
npm WARN   postcss@"^8.2.4" from [email protected]
npm WARN   node_modules/eslint-plugin-vue-scoped-css
npm WARN     dev eslint-plugin-vue-scoped-css@"*" from the root project
npm WARN 
npm WARN Could not resolve dependency:
npm WARN peer postcss@"^8.3.3" from [email protected]
npm WARN node_modules/eslint-plugin-vue-scoped-css/node_modules/postcss-scss
npm WARN   postcss-scss@"^4.0.0" from [email protected]
npm WARN   node_modules/eslint-plugin-vue-scoped-css
npm ERR! code ETARGET
npm ERR! notarget No matching version found for eslint-utils@^3.0.0.
npm ERR! notarget In most cases you or one of your dependencies are requesting
npm ERR! notarget a package version that doesn't exist.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/username/.npm/_logs/2022-02-02T19_21_53_038Z-debug.log

Thanks for making this plugin! Our team has a slightly different use case: we'd like to enforce no scoped attribute, as we find the side effects of scoped CSS to be too risky. Any chance of modifying the require-scoped rule to allow for "always"/"never" options?

Summary

False positives seem to occur when using both self-referencing adjacent selector and v-for.

Image

REPL

<template>
  <div>
    <div v-for="str in strs" :key="str" class="repl-class">{{ str }}</div>
  </div>
</template>

<script>
import { Component, Vue } from 'vue-property-decorator';

@Component({ components: {} })
export default class REPL extends Vue {
  private strs = ['a', 'b'];
}
</script>

<style lang="scss" scoped>
.repl-class {
  & + .repl-class {
    border-top: #ccc solid 1px;
  }
}
</style>

This PR contains the following updates:

| Package | Change | Age | Adoption | Passing | Confidence | |---|---|---|---|---|---| | stylelint-config-standard | ^29.0.0 -> ^30.0.0 | | | | |

Release Notes

Configuration

📅 Schedule: Branch creation - At any time (no schedule defined), Automerge - At any time (no schedule defined).

🚦 Automerge: Enabled.

♻ Rebasing: Whenever PR becomes conflicted, or you tick the rebase/retry checkbox.

🔕 Ignore: Close this PR and you won't be reminded about this update again.

• [ ] If you want to rebase/retry this PR, check this box

This PR has been generated by Mend Renovate. View repository job log here.

This PR contains the following updates:

| Package | Change | Age | Adoption | Passing | Confidence | |---|---|---|---|---|---| | stylelint (source) | ^14.9.1 -> ^15.0.0 | | | | |

Release Notes

Configuration

📅 Schedule: Branch creation - At any time (no schedule defined), Automerge - At any time (no schedule defined).

🚦 Automerge: Enabled.

♻ Rebasing: Whenever PR becomes conflicted, or you tick the rebase/retry checkbox.

🔕 Ignore: Close this PR and you won't be reminded about this update again.

• [ ] If you want to rebase/retry this PR, check this box

This PR has been generated by Mend Renovate. View repository job log here.

When installing eslint-plugin-vue-scoped-css, pnpm complains about vue-eslint-parser not being installed. In the README, the command is just npm install --save-dev eslint eslint-plugin-vue-scoped-css and everything seems to be working fine without having a direct dependency to vue-eslint-parser, so I'm wondering what's up with that? 🙂

Now no-unused-keyframes and no-unused-selector rules only work if scoped style. There are situations when without scoped style I would like to use this rules. But there is no such possibility. It might be worth adding a new option scoped: Boolean

Using Array-Syntax with an inline if breaks reporting of no-unused-selector.
Doing the same with Object-Syntax works fine.

I added two testcases for demonstration (https://github.com/lukashass/eslint-plugin-vue-scoped-css/commit/f0bff82d100b2c944dbdd2ceab4aa280825fdcf4):

// reports `.bar` as unused
{
    code: `
    <template>
        <div><div :class="{foo: b}"/></div>
    </template>
    <style scoped>
    .foo {}
    .bar {}
    </style>
    <script>
    export default {
        data () {
            return {
                b: true
            }
        }
    }
    </script>
    `,
    errors: [
        {
            messageId: "unused",
            data: { selector: ".bar" },
            line: 7,
            column: 13,
            endLine: 7,
            endColumn: 17,
        },
    ],
},
// should report `.bar` as unused but doesn't
{
    code: `
    <template>
        <div><div :class="[b ? 'foo' : '']"/></div>
    </template>
    <style scoped>
    .foo {}
    .bar {}
    </style>
    <script>
    export default {
        data () {
            return {
                b: true
            }
        }
    }
    </script>
    `,
    errors: [
        {
            messageId: "unused",
            data: { selector: ".bar" },
            line: 7,
            column: 13,
            endLine: 7,
            endColumn: 17,
        },
    ],
},

This PR contains the following updates:

| Package | Change | Age | Adoption | Passing | Confidence | |---|---|---|---|---|---| | rimraf | ^3.0.2 -> ^4.0.0 | | | | |

Release Notes

Configuration

📅 Schedule: Branch creation - At any time (no schedule defined), Automerge - At any time (no schedule defined).

🚦 Automerge: Enabled.

♻ Rebasing: Whenever PR becomes conflicted, or you tick the rebase/retry checkbox.

🔕 Ignore: Close this PR and you won't be reminded about this update again.

• [ ] If you want to rebase/retry this PR, check this box

This PR has been generated by Mend Renovate. View repository job log here.

Getting the following error installing the plugin:

TypeError: Failed to load plugin 'vue-scoped-css' declared in '.eslintrc.js': Class extends value undefined is not a constructor or null

Here's my eslintrc.js file:

module.exports = {
    env: {
        browser: true,
        es2021: true,
        node: true,
    },
    extends: [
        'plugin:vue/essential',
        'eslint:recommended',
        'plugin:vue-scoped-css/recommended',
    ],
    parserOptions: {
        parser: '@typescript-eslint/parser',
        ecmaVersion: 'latest',
        sourceType: 'module',
    },
    plugins: ['vue', '@typescript-eslint'],
    rules: {
        'import/order': 'off',
        'vue/no-v-html': 'off',
        'vue/no-unused-components': 'off',
        'no-unused-vars': 1,
        'no-undef': 2,
        'prefer-const': 2,
        'no-console': 0,
        'standard/computed-property-even-spacing': 'off',
        'object-shorthand': 'off',
        'vue-scoped-css/enforce-style-type': 'warn',
    },
}

I tried installing the plugin in a couple projects of mine and I still get the same error. Any idea what could be causing this?

For example:

<template>
  <nuxt-link :to="`#`">button</nuxt-link>
</template>

<style scoped>
a {
  color: red;
}
</style>

nuxt-link is converted to a tag, but I get error: The selector `a` is unused. Please support.

Maybe something like this in the settings:

'vue-scoped-css/no-unused-selector': ['warn', {
  'equalTags': {
    'nuxt-link': 'a',
    'n-link': 'a',
    'NuxtLink': 'a',
    'NLink': 'a',
    'router-link': 'a'
  },
}]

<template>
  <h1 class="eng-title">hello</h1>
</template>

<style scoped lang="scss">
%title {
  font-size: 2rem;
}

.eng-title {
  @extend %title;
}
</style>

I get: The selector `%title` is unused.

vue-scoped-css/no-unused-selector rule has ignoreBEMModifier option Besides BEM, there are other ways to organize CSS code. For example RSCCS, where the modifier is defined as in the following code. More details here.

.like-button {
  &.-wide { /* ... */ }
  &.-short { /* ... */ }
  &.-disabled { /* ... */ }
}

Also, development teams can use custom modifier naming. Сreator of the stylelint-selector-bem-pattern made it possible to specify a regular expression to define a modifier. Maybe you should pay attention to this.