Utilizing Scoped Styles to Prevent CSS Conflicts in Vue Components

{
  "title": "Utilizing Scoped Styles to Prevent CSS Conflicts in Vue Components",
  "description": "Techniques for applying scoped styles in Vue components to avoid style conflicts and maintain modularity.",
  "category": "Vue Cursor Rules",
  "rules": [
    {
      "id": "vue-scoped-styles",
      "level": "error",
      "message": "Ensure all component-specific styles are scoped to prevent unintended global application.",
      "pattern": "<style(?!.*scoped).*?>",
      "fix": {
        "description": "Add the 'scoped' attribute to the style tag.",
        "pattern": "<style>",
        "replacement": "<style scoped>"
      }
    },
    {
      "id": "vue-scoped-class-selectors",
      "level": "warning",
      "message": "Prefer class selectors over element selectors in scoped styles to improve performance.",
      "pattern": "<style scoped>.*?\\b(?:div|span|p|button|input|textarea|select|a|ul|ol|li|table|tr|td|th|h[1-6])\\b.*?</style>",
      "fix": {
        "description": "Replace element selectors with class selectors in scoped styles.",
        "pattern": "\\b(div|span|p|button|input|textarea|select|a|ul|ol|li|table|tr|td|th|h[1-6])\\b",
        "replacement": ".component-$1"
      }
    },
    {
      "id": "vue-scoped-deep-selector",
      "level": "info",
      "message": "Use the '::v-deep' pseudo-class to style child components within scoped styles.",
      "pattern": "::v-deep",
      "fix": {
        "description": "Ensure '::v-deep' is used appropriately to target child components.",
        "pattern": "::v-deep",
        "replacement": "::v-deep "
      }
    },
    {
      "id": "vue-scoped-global-selector",
      "level": "info",
      "message": "Use the ':global' pseudo-class to apply global styles within scoped styles.",
      "pattern": ":global",
      "fix": {
        "description": "Ensure ':global' is used appropriately to apply global styles.",
        "pattern": ":global",
        "replacement": ":global "
      }
    },
    {
      "id": "vue-scoped-slotted-selector",
      "level": "info",
      "message": "Use the ':slotted' pseudo-class to style slot content within scoped styles.",
      "pattern": ":slotted",
      "fix": {
        "description": "Ensure ':slotted' is used appropriately to style slot content.",
        "pattern": ":slotted",
        "replacement": ":slotted "
      }
    }
  ]
}