gt-agent-company/.agents/skills/vue-best-practices/rules/strict-css-modules.md

title, impact, impactDescription, type, tags

title	impact	impactDescription	type	tags
Enable Strict CSS Modules Type Checking	MEDIUM	catches typos in CSS module class names at compile time	capability	strictCssModules, vueCompilerOptions, css-modules, style-module

Enable Strict CSS Modules Type Checking

Impact: MEDIUM - catches typos in CSS module class names at compile time

When using CSS modules with <style module>, Vue doesn't validate class names by default. Enable strictCssModules to catch typos and undefined classes.

Problem

CSS module class name errors go undetected:

<script setup lang="ts">
// No error for typo in class name
</script>

<template>
  <div :class="$style.buttn">Click me</div>
</template>

<style module>
.button {
  background: blue;
}
</style>

The typo buttn instead of button silently fails at runtime.

Solution

Enable strictCssModules in your tsconfig:

// tsconfig.json or tsconfig.app.json
{
  "vueCompilerOptions": {
    "strictCssModules": true
  }
}

Now $style.buttn will show a type error because buttn doesn't exist in the CSS module.

What Gets Checked

Access	With strictCssModules
$style.validClass	OK
$style.typo	Error: Property 'typo' does not exist
$style['dynamic']	OK (dynamic access not checked)

Limitations

• Only checks static property access ($style.className)
• Dynamic access ($style[variable]) is not validated
• Only works with <style module>, not external CSS files

Reference

• Vue Language Tools Wiki - Vue Compiler Options