From ad6825dd3dd1440101f2e13571ae966e58973d4e Mon Sep 17 00:00:00 2001
From: Shohei Yoshida <ysds.code@gmail.com>
Date: Wed, 1 Apr 2020 15:42:33 +0900
Subject: [PATCH] transition() mixin prevent redundant 'transition: none' and
 pass `null` (#30391)

* Prevent redundant 'none' for prefers-reduced-motion

* Output warning when use 'none' or 'null' with multiple arguments

* Fix for libsass(node-sass)
---
 scss/mixins/_transition.scss | 18 ++++++++++++++----
 1 file changed, 14 insertions(+), 4 deletions(-)

diff --git a/scss/mixins/_transition.scss b/scss/mixins/_transition.scss
index 54983d736c59..54553deb9c67 100644
--- a/scss/mixins/_transition.scss
+++ b/scss/mixins/_transition.scss
@@ -1,13 +1,23 @@
 // stylelint-disable property-blacklist
 @mixin transition($transition...) {
+  @if length($transition) == 0 {
+    $transition: $transition-base;
+  }
+
+  @if length($transition) > 1 {
+    @each $value in $transition {
+      @if $value == null or $value == none {
+        @warn "The keyword 'none' or 'null' must be used as a single argument.";
+      }
+    }
+  }
+
   @if $enable-transitions {
-    @if length($transition) == 0 {
-      transition: $transition-base;
-    } @else {
+    @if nth($transition, 1) != null {
       transition: $transition;
     }
 
-    @if $enable-prefers-reduced-motion-media-query {
+    @if $enable-prefers-reduced-motion-media-query and nth($transition, 1) != null and nth($transition, 1) != none {
       @media (prefers-reduced-motion: reduce) {
         transition: none;
       }