Fixed false positives when using <slot> with <transition>. (#18)

Author: ota-meshi

lib/styles/selectors/query/elements.ts

@@ -94,7 +94,7 @@ export function getWrapperTransition(
         if (isTransitionElement(parent) || isTransitionGroupElement(parent)) {
             return parent
         }
-        if (!isSkipElement(parent)) {
+        if (!isSlotElement(parent) && !isSkipElement(parent)) {
             return null
         }
         parent = parent.parent

tests/lib/rules/no-unused-selector.ts

@@ -206,6 +206,54 @@ tester.run("no-unused-selector", rule, {
         .foo > div {}
         </style>
         `,
+        // transition
+        `
+        <template>
+            <transition>
+                <div/>
+            </transition>
+        </template>
+        <style scoped>
+        .v-enter,
+        .v-enter-active,
+        .v-enter-to,
+        .v-leave,
+        .v-leave-to,
+        .v-leave-active {}
+        </style>
+        `,
+        `
+        <template>
+            <transition name="foo">
+                <div/>
+            </transition>
+        </template>
+        <style scoped>
+        .foo-enter,
+        .foo-enter-active,
+        .foo-enter-to,
+        .foo-leave,
+        .foo-leave-to,
+        .foo-leave-active {}
+        </style>
+        `,
+        `
+        <template>
+            <!-- transition + slot -->
+            <transition name="foo">
+                <slot />
+            </transition>
+        </template>
+        <style scoped>
+        .foo-enter,
+        .foo-enter-active,
+        .foo-enter-to,
+        .foo-leave,
+        .foo-leave-to,
+        .foo-leave-active {}
+        </style>
+        `,
+
         // options
         // ignoreBEMModifier
         {

tests/lib/rules/require-selector-used-inside.ts

@@ -168,6 +168,53 @@ tester.run("require-selector-used-inside", rule, {
         :not(.a) {}
         </style>
         `,
+        // transition
+        `
+        <template>
+            <transition>
+                <div/>
+            </transition>
+        </template>
+        <style scoped>
+        .v-enter,
+        .v-enter-active,
+        .v-enter-to,
+        .v-leave,
+        .v-leave-to,
+        .v-leave-active {}
+        </style>
+        `,
+        `
+        <template>
+            <transition name="foo">
+                <div/>
+            </transition>
+        </template>
+        <style scoped>
+        .foo-enter,
+        .foo-enter-active,
+        .foo-enter-to,
+        .foo-leave,
+        .foo-leave-to,
+        .foo-leave-active {}
+        </style>
+        `,
+        `
+        <template>
+            <!-- transition + slot -->
+            <transition name="foo">
+                <slot />
+            </transition>
+        </template>
+        <style scoped>
+        .foo-enter,
+        .foo-enter-active,
+        .foo-enter-to,
+        .foo-leave,
+        .foo-leave-to,
+        .foo-leave-active {}
+        </style>
+        `,
         // options
         // ignoreBEMModifier
         {