0

I hope this question is not too broad.

Moving away from SASS while upgrading to Tailwind 4, I removed the lang=scss attributes from my <style scoped> tags in .vue files.

When removing the scss compiler reference, selectors only referenced in JS are not recognised as "used" anymore. This is already the case before switching to Tailwind 4.

Does anyone out there know if this might rather have to do with PhpStorm/WebStorm settings, Vite configuration, Vue or something else?

I have checked PhpStorm Setting

  • Languages & Frameworks > Style Sheets
  • Editor > Inspections > CSS > Unused selectors (I don't want to switch it off)

Minimal code example

<script setup lang="ts">
const {
  size = 'sm',
} = defineProps<{
  size?: 'sm' | 'md' | 'lg' | 'xl' | '2xl',
}>()
</script>

<template>
  <span :class="[size]" class="icon" />
</template>

<style scoped>
.sm { /* <-- marked as unused (greyed out) after removing scss compiler reference */
  height: 16px;
  width: 16px;

  &.icon { /* <-- still marked as used, presumably because it is directly referenced in HTML */
    font-size: 10px;
  }
}
</style>
Improve this question
6
  • 2
    Although for anyone knowing Vue it looks like common sense, you're asking for a lot of Vue knowledge from your IDE. You're expecting it to understand the size prop is used as a class (some IDE's do understand that) and couple that with the TS compilation result - figure out all possible values of its type) and then mark any classes allowed by theose values as "used". I agree it would be nice for the IDE to be that smart but, in reality, these checks are much simpler: string searches/matches in <template>, unless someone writes a dedicated plugin for it (e.g: the Vue team). Commented Feb 7 at 15:34
  • 2
    In fewer words, expect dynamic JS driven class names not to be marked correctly as used in (S)CSS, regardless of frontend framework used (React, Vue, Svelte), in most IDE's. :) Commented Feb 7 at 15:35
  • 1
    Ref being on/off topic: if I read your question as: "Are there any settings to make this work?", than the answer is "No" and your question is on-topic. If it's read as: "I'm expecting this to work and it doesn't, give me code to fix it!", your question becomes off-topic as you're asking for work/customization around a proprietary (or open source) tool which is not provided by the author of the tool and you haven't made any attempt at coding it yourself. At best, in the second case, you should post it as an issue on the author's repo/forum for the product, but here it's off-topic. Commented Feb 7 at 15:45
  • 1
    You should ask this in the Jetbrains forum. Commented Feb 9 at 21:56
  • 1
    I’m voting to close this question because the minimal code example included in the question should be the code attempting to implement the requested missing feature (correctly marking dynamic JS class expressions as used in Vue style tags - e.g: the JetBrains plugin), not the code used to demonstrate the feature is missing. The requirement to have a coding attempt inside the question was bypassed using code completely unrelated to making an effort towards coding the requested IDE functionality. Commented Feb 10 at 11:10
Related questions
4319
Is there a CSS parent selector?
4418
Change an HTML input's placeholder color with CSS
3724
Set cellpadding and cellspacing in CSS?
Load 6 more related questions Show fewer related questions

0

Reset to default

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.