Prevent IDE unused CSS selector warning

[micantoine]

When using css module classname $style.myClassName on a html element. The svelte IDE extension does not recognize it and highlight the class .myClassName as an unused selector.

<div class="$style.myClassName">
  My html element using cssmodules
</div>

<style>
  /* Unused CSS selector warning */
  .myClassName { display: flex; }
   ~~~~~~~~~~
</style>

[micantoine]

Fixed in v2

[gamelaster]

this still happens to me ☹️

[micantoine]

It seems that the warning you're having is correct: .login-form input.email does not exist.

You do not have a <input> element but a component name <Input>.

you may change your css selector to:

<style lang="scss" module>
.login-form {
  ...
 .email {
  ...
 }
}
</style>

Also, I don't know if the Input component from Sveltestrap takes into consideration the class attribute. Please double check, if not you may have to use the :global() selector.

<style lang="scss" module>
.login-form {
  ...
 :global(input) {
  ...
 }
}
</style>

[gamelaster]

Hi @micantoine

My SCSS works good, just VS Code shows error. This means it's IDE plugin issue most likely.

[micantoine]

Yes, your code works as cssModules prevents non class selectors to be scoped (native mode). So if the Input component generates an <input> element, your rule will find a match.

Still, the IDE is telling you the truth. Your rule doesn’t exist within the component because <input> is part of a child component. Only the global() selector will let the IDE knows that this is the case.

At the end, I would recommend not to use input in your css rule. Your class .email is largely enough. Also, it does not necessary need to be nested.

.login-form { … }
.email { … }

[gamelaster]

Oh! This is giving a sense, thank you very much for explanation and solution. (and generally for whole package, it's life saver!.