Supports v-enter-from and v-leave-from (#44)

ota-meshi · web-flow · commit 4f53c921ddb7 · 2020-07-22T17:34:53.000+09:00
https://github.com/vuejs/rfcs/blob/master/active-rfcs/0018-transition-class-change.md
diff --git a/lib/styles/selectors/query/index.ts b/lib/styles/selectors/query/index.ts
@@ -46,9 +46,11 @@ import { Template } from "../../template"
 
 const TRANSITION_CLASS_BASES = [
     "enter",
+    "enter-from",
     "enter-active",
     "enter-to",
     "leave",
+    "leave-from",
     "leave-active",
     "leave-to",
 ]
diff --git a/tests/lib/rules/no-unused-selector.ts b/tests/lib/rules/no-unused-selector.ts
@@ -215,11 +215,13 @@ tester.run("no-unused-selector", rule, {
         </template>
         <style scoped>
         .v-enter,
+        .v-enter-from,
         .v-enter-active,
         .v-enter-to,
         .v-leave,
-        .v-leave-to,
-        .v-leave-active {}
+        .v-leave-from,
+        .v-leave-active,
+        .v-leave-to {}
         </style>
         `,
         `
@@ -230,11 +232,13 @@ tester.run("no-unused-selector", rule, {
         </template>
         <style scoped>
         .foo-enter,
+        .foo-enter-from,
         .foo-enter-active,
         .foo-enter-to,
         .foo-leave,
-        .foo-leave-to,
-        .foo-leave-active {}
+        .foo-leave-from,
+        .foo-leave-active,
+        .foo-leave-to {}
         </style>
         `,
         `
@@ -246,11 +250,13 @@ tester.run("no-unused-selector", rule, {
         </template>
         <style scoped>
         .foo-enter,
+        .foo-enter-from,
         .foo-enter-active,
         .foo-enter-to,
         .foo-leave,
-        .foo-leave-to,
-        .foo-leave-active {}
+        .foo-leave-from,
+        .foo-leave-active,
+        .foo-leave-to {}
         </style>
         `,
         `
diff --git a/tests/lib/rules/require-selector-used-inside.ts b/tests/lib/rules/require-selector-used-inside.ts
@@ -177,11 +177,13 @@ tester.run("require-selector-used-inside", rule, {
         </template>
         <style scoped>
         .v-enter,
+        .v-enter-from,
         .v-enter-active,
         .v-enter-to,
         .v-leave,
-        .v-leave-to,
-        .v-leave-active {}
+        .v-leave-from,
+        .v-leave-active,
+        .v-leave-to {}
         </style>
         `,
         `
@@ -192,11 +194,13 @@ tester.run("require-selector-used-inside", rule, {
         </template>
         <style scoped>
         .foo-enter,
+        .foo-enter-from,
         .foo-enter-active,
         .foo-enter-to,
         .foo-leave,
-        .foo-leave-to,
-        .foo-leave-active {}
+        .foo-leave-from,
+        .foo-leave-active,
+        .foo-leave-to {}
         </style>
         `,
         `
@@ -208,11 +212,13 @@ tester.run("require-selector-used-inside", rule, {
         </template>
         <style scoped>
         .foo-enter,
+        .foo-enter-from,
         .foo-enter-active,
         .foo-enter-to,
         .foo-leave,
-        .foo-leave-to,
-        .foo-leave-active {}
+        .foo-leave-from,
+        .foo-leave-active,
+        .foo-leave-to {}
         </style>
         `,
         `
diff --git a/tests/lib/styles/fixtures/selectors/query/vue-transition-group01/query-result.json b/tests/lib/styles/fixtures/selectors/query/vue-transition-group01/query-result.json
@@ -3,6 +3,10 @@
         "div#example-2>transition-group>p#a",
         "div#example-2>transition-group>p#c"
     ],
+    ".v-enter-from": [
+        "div#example-2>transition-group>p#a",
+        "div#example-2>transition-group>p#c"
+    ],
     ".v-enter-active": [
         "div#example-2>transition-group>p#a",
         "div#example-2>transition-group>p#c"
@@ -15,6 +19,10 @@
         "div#example-2>transition-group>p#a",
         "div#example-2>transition-group>p#c"
     ],
+    ".v-leave-from": [
+        "div#example-2>transition-group>p#a",
+        "div#example-2>transition-group>p#c"
+    ],
     ".v-leave-active": [
         "div#example-2>transition-group>p#a",
         "div#example-2>transition-group>p#c"
diff --git a/tests/lib/styles/fixtures/selectors/query/vue-transition-group01/source.vue b/tests/lib/styles/fixtures/selectors/query/vue-transition-group01/source.vue
@@ -23,12 +23,16 @@
 <style scoped>
 .v-enter {
 }
+.v-enter-from {
+}
 .v-enter-active{
 }
 .v-enter-to{
 }
 .v-leave{
 }
+.v-leave-from{
+}
 .v-leave-active{
 }
 .v-leave-to{
diff --git a/tests/lib/styles/fixtures/selectors/query/vue-transition01/query-result.json b/tests/lib/styles/fixtures/selectors/query/vue-transition01/query-result.json
@@ -3,6 +3,10 @@
         "div#example-2>transition>p#a",
         "div#example-2>transition>p#c"
     ],
+    ".v-enter-from": [
+        "div#example-2>transition>p#a",
+        "div#example-2>transition>p#c"
+    ],
     ".v-enter-active": [
         "div#example-2>transition>p#a",
         "div#example-2>transition>p#c"
@@ -15,6 +19,10 @@
         "div#example-2>transition>p#a",
         "div#example-2>transition>p#c"
     ],
+    ".v-leave-from": [
+        "div#example-2>transition>p#a",
+        "div#example-2>transition>p#c"
+    ],
     ".v-leave-active": [
         "div#example-2>transition>p#a",
         "div#example-2>transition>p#c"
diff --git a/tests/lib/styles/fixtures/selectors/query/vue-transition01/source.vue b/tests/lib/styles/fixtures/selectors/query/vue-transition01/source.vue
@@ -23,12 +23,16 @@
 <style scoped>
 .v-enter {
 }
+.v-enter-from {
+}
 .v-enter-active{
 }
 .v-enter-to{
 }
 .v-leave{
 }
+.v-leave-from{
+}
 .v-leave-active{
 }
 .v-leave-to{
diff --git a/tests/lib/styles/fixtures/selectors/query/vue-transition02/query-result.json b/tests/lib/styles/fixtures/selectors/query/vue-transition02/query-result.json
@@ -3,6 +3,10 @@
         "div#example-2>transition>p#b",
         "div#example-2>transition>p#c"
     ],
+    ".custom-enter-from": [
+        "div#example-2>transition>p#b",
+        "div#example-2>transition>p#c"
+    ],
     ".custom-enter-active": [
         "div#example-2>transition>p#b",
         "div#example-2>transition>p#c"
@@ -15,6 +19,10 @@
         "div#example-2>transition>p#b",
         "div#example-2>transition>p#c"
     ],
+    ".custom-leave-from": [
+        "div#example-2>transition>p#b",
+        "div#example-2>transition>p#c"
+    ],
     ".custom-leave-active": [
         "div#example-2>transition>p#b",
         "div#example-2>transition>p#c"
diff --git a/tests/lib/styles/fixtures/selectors/query/vue-transition02/source.vue b/tests/lib/styles/fixtures/selectors/query/vue-transition02/source.vue
@@ -23,12 +23,16 @@
 <style scoped>
 .custom-enter {
 }
+.custom-enter-from {
+}
 .custom-enter-active{
 }
 .custom-enter-to{
 }
 .custom-leave{
 }
+.custom-leave-from{
+}
 .custom-leave-active{
 }
 .custom-leave-to{
diff --git a/tests/lib/styles/fixtures/selectors/query/vue-transition03/query-result.json b/tests/lib/styles/fixtures/selectors/query/vue-transition03/query-result.json
@@ -2,6 +2,9 @@
     ".v-enter": [
         "div#example-2>transition>p#a"
     ],
+    ".v-enter-from": [
+        "div#example-2>transition>p#a"
+    ],
     ".v-enter-active": [
         "div#example-2>transition>p#a"
     ],
@@ -11,6 +14,9 @@
     ".v-leave": [
         "div#example-2>transition>p#a"
     ],
+    ".v-leave-from": [
+        "div#example-2>transition>p#a"
+    ],
     ".v-leave-active": [
         "div#example-2>transition>p#a"
     ],
diff --git a/tests/lib/styles/fixtures/selectors/query/vue-transition03/source.vue b/tests/lib/styles/fixtures/selectors/query/vue-transition03/source.vue
@@ -32,12 +32,16 @@ export default {
 <style scoped>
 .v-enter {
 }
+.v-enter-from {
+}
 .v-enter-active{
 }
 .v-enter-to{
 }
 .v-leave{
 }
+.v-leave-from{
+}
 .v-leave-active{
 }
 .v-leave-to{
diff --git a/tests/lib/styles/fixtures/selectors/query/vue-transition04/query-result.json b/tests/lib/styles/fixtures/selectors/query/vue-transition04/query-result.json
@@ -2,6 +2,9 @@
     ".custom-enter": [
         "div#example-2>transition>p#b"
     ],
+    ".custom-enter-from": [
+        "div#example-2>transition>p#b"
+    ],
     ".custom-enter-active": [
         "div#example-2>transition>p#b"
     ],
@@ -11,6 +14,9 @@
     ".custom-leave": [
         "div#example-2>transition>p#b"
     ],
+    ".custom-leave-from": [
+        "div#example-2>transition>p#b"
+    ],
     ".custom-leave-active": [
         "div#example-2>transition>p#b"
     ],
diff --git a/tests/lib/styles/fixtures/selectors/query/vue-transition04/source.vue b/tests/lib/styles/fixtures/selectors/query/vue-transition04/source.vue
@@ -32,12 +32,16 @@ export default {
 <style scoped>
 .custom-enter {
 }
+.custom-enter-from {
+}
 .custom-enter-active{
 }
 .custom-enter-to{
 }
 .custom-leave{
 }
+.custom-leave-from{
+}
 .custom-leave-active{
 }
 .custom-leave-to{
diff --git a/tests/lib/styles/fixtures/selectors/query/vue-transition05/query-result.json b/tests/lib/styles/fixtures/selectors/query/vue-transition05/query-result.json
@@ -2,6 +2,9 @@
     ".t-enter": [
         "div#example-2>transition>p#c"
     ],
+    ".t-enter-from": [
+        "div#example-2>transition>p#c"
+    ],
     ".t-enter-active": [
         "div#example-2>transition>p#c"
     ],
@@ -11,6 +14,9 @@
     ".t-leave": [
         "div#example-2>transition>p#c"
     ],
+    ".t-leave-from": [
+        "div#example-2>transition>p#c"
+    ],
     ".t-leave-active": [
         "div#example-2>transition>p#c"
     ],
diff --git a/tests/lib/styles/fixtures/selectors/query/vue-transition05/source.vue b/tests/lib/styles/fixtures/selectors/query/vue-transition05/source.vue
@@ -32,12 +32,16 @@ export default {
 <style scoped>
 .t-enter {
 }
+.t-enter-from {
+}
 .t-enter-active{
 }
 .t-enter-to{
 }
 .t-leave{
 }
+.t-leave-from{
+}
 .t-leave-active{
 }
 .t-leave-to{
diff --git a/tests/lib/styles/fixtures/selectors/query/vue-transition06/query-result.json b/tests/lib/styles/fixtures/selectors/query/vue-transition06/query-result.json
@@ -2,6 +2,9 @@
     ".ec": [
         "div#example-2>transition>p#c"
     ],
+    ".efc": [
+        "div#example-2>transition>p#c"
+    ],
     ".eac": [
         "div#example-2>transition>p#c"
     ],
@@ -11,6 +14,9 @@
     ".lc": [
         "div#example-2>transition>p#d"
     ],
+    ".lfc": [
+        "div#example-2>transition>p#d"
+    ],
     ".lac": [
         "div#example-2>transition>p#d"
     ],
diff --git a/tests/lib/styles/fixtures/selectors/query/vue-transition06/source.vue b/tests/lib/styles/fixtures/selectors/query/vue-transition06/source.vue
@@ -16,6 +16,7 @@
         <transition
             name="custom"
             enter-class="ec"
+            enter-from-class="efc"
             enter-active-class="eac"
             enter-to-class="etc"
         >
@@ -26,6 +27,7 @@
         <transition
             name="custom"
             leave-class="lc"
+            leave-from-class="lfc"
             leave-active-class="lac"
             leave-to-class="ltc"
         >
@@ -36,8 +38,8 @@
     </div>
 </template>
 <style scoped>
-.ec, .eac, .etc {
+.ec, .efc, .eac, .etc {
 }
-.lc, .lac, .ltc {
+.lc, .lfc, .lac, .ltc {
 }
 </style>
diff --git a/tests/lib/styles/fixtures/selectors/query/vue-transition07/source.vue b/tests/lib/styles/fixtures/selectors/query/vue-transition07/source.vue
@@ -16,6 +16,7 @@
         <transition
             name="custom"
             :enter-class="ec"
+            :enter-from-class="efc"
             :enter-active-class="eac"
             :enter-to-class="etc"
         >
@@ -26,6 +27,7 @@
         <transition
             name="custom"
             :leave-class="lc"
+            :leave-from-class="lfc"
             :leave-active-class="lac"
             :leave-to-class="ltc"
         >

Original file line number	Diff line number	Diff line change
`@@ -23,12 +23,16 @@`
`23`	`23`	`<style scoped>`
`24`	`24`	`.v-enter {`
`25`	`25`	`}`
	`26`	`+.v-enter-from {`
	`27`	`+}`
`26`	`28`	`.v-enter-active{`
`27`	`29`	`}`
`28`	`30`	`.v-enter-to{`
`29`	`31`	`}`
`30`	`32`	`.v-leave{`
`31`	`33`	`}`
	`34`	`+.v-leave-from{`
	`35`	`+}`
`32`	`36`	`.v-leave-active{`
`33`	`37`	`}`
`34`	`38`	`.v-leave-to{`