From e6cc6d58f6b5322c24f121952037d3cb9890fbfc Mon Sep 17 00:00:00 2001
From: Andre Luiz Rabello <andre.luiz_r@hotmail.com>
Date: Wed, 20 Jan 2021 13:22:00 +0000
Subject: [PATCH] fix(core): selectors applied conditionally (#209)

Sass' `&` will output the selector twice,
which is why the linter disallows it,
and our conditional selectors should account for that.
---
 .stylelintrc.json                              | 10 ++--------
 packages/core/src/mixins/as-text-input.scss    |  4 ++--
 packages/core/src/mixins/index.scss            |  1 +
 packages/core/src/mixins/interactive.scss      |  4 +++-
 packages/core/src/mixins/with-inner-focus.scss |  3 ++-
 packages/core/src/mixins/with-outer-focus.scss |  3 ++-
 packages/core/src/mixins/wrap-if.scss          |  9 +++++++++
 packages/core/src/theme/theme.scss             |  5 +++--
 8 files changed, 24 insertions(+), 15 deletions(-)
 create mode 100644 packages/core/src/mixins/wrap-if.scss

diff --git a/.stylelintrc.json b/.stylelintrc.json
index ce3410254..a74e03e01 100644
--- a/.stylelintrc.json
+++ b/.stylelintrc.json
@@ -11,15 +11,9 @@
     "scss/no-global-function-names": true,
     "order/order": [
       [
-        {
-          "type": "at-rule",
-          "name": "include"
-        },
-        {
-          "type": "at-rule",
-          "name": "extend"
-        },
         "dollar-variables",
+        { "type": "at-rule", "name": "include" },
+        { "type": "at-rule", "name": "extend" },
         "custom-properties",
         "declarations",
         "rules"
diff --git a/packages/core/src/mixins/as-text-input.scss b/packages/core/src/mixins/as-text-input.scss
index 74a06e614..c20649ad3 100644
--- a/packages/core/src/mixins/as-text-input.scss
+++ b/packages/core/src/mixins/as-text-input.scss
@@ -2,10 +2,10 @@
 @use './with-inner-focus' as mixins;
 
 @mixin as-text-input() {
-  @include helpers.font('300-regular');
-
   $border-width: 1px;
 
+  @include helpers.font('300-regular');
+
   background-color: helpers.color('background-input');
   border: $border-width solid helpers.color('border-input');
   border-radius: helpers.border-radius('medium');
diff --git a/packages/core/src/mixins/index.scss b/packages/core/src/mixins/index.scss
index 3bb1a93f4..4b1f2be2d 100755
--- a/packages/core/src/mixins/index.scss
+++ b/packages/core/src/mixins/index.scss
@@ -3,3 +3,4 @@
 @forward './square';
 @forward './with-inner-focus';
 @forward './with-outer-focus';
+@forward './wrap-if';
diff --git a/packages/core/src/mixins/interactive.scss b/packages/core/src/mixins/interactive.scss
index 46f39ee54..17984b13c 100644
--- a/packages/core/src/mixins/interactive.scss
+++ b/packages/core/src/mixins/interactive.scss
@@ -1,5 +1,7 @@
+@use './wrap-if' as mixins;
+
 @mixin interactive($target: null) {
-  #{if($target, $target, '&')} {
+  @include mixins.wrap-if($target) {
     cursor: pointer;
     user-select: none;
   }
diff --git a/packages/core/src/mixins/with-inner-focus.scss b/packages/core/src/mixins/with-inner-focus.scss
index 385a0fb02..adf2c7d55 100644
--- a/packages/core/src/mixins/with-inner-focus.scss
+++ b/packages/core/src/mixins/with-inner-focus.scss
@@ -1,4 +1,5 @@
 @use '../helpers';
+@use './wrap-if' as mixins;
 
 $_allowed-types: ('action', 'negative');
 
@@ -26,7 +27,7 @@ $_max-border-width: $_color-size; // when max, border used instead of color line
   $inner-line: inset 0 0 0 $inner-spread helpers.color('border-focus-inner');
   $color-line: inset 0 0 0 $color-spread helpers.color('border-#{$type}-focus');
 
-  #{if($target, $target, '&')} {
+  @include mixins.wrap-if($target) {
     outline: none;
   }
 
diff --git a/packages/core/src/mixins/with-outer-focus.scss b/packages/core/src/mixins/with-outer-focus.scss
index 875455991..80b90b698 100644
--- a/packages/core/src/mixins/with-outer-focus.scss
+++ b/packages/core/src/mixins/with-outer-focus.scss
@@ -1,4 +1,5 @@
 @use '../helpers';
+@use './wrap-if' as mixins;
 
 $_allowed-types: ('action', 'negative');
 
@@ -14,7 +15,7 @@ $_inner-spread: $_color-spread - $_color-size;
   $color-line: 0 0 0 $_color-spread helpers.color('border-#{$type}-focus');
   $inner-line: 0 0 0 $_inner-spread helpers.color('border-focus-inner');
 
-  #{if($target, $target, '&')} {
+  @include mixins.wrap-if($target) {
     outline: none;
   }
 
diff --git a/packages/core/src/mixins/wrap-if.scss b/packages/core/src/mixins/wrap-if.scss
new file mode 100644
index 000000000..6fcc29657
--- /dev/null
+++ b/packages/core/src/mixins/wrap-if.scss
@@ -0,0 +1,9 @@
+@mixin wrap-if($selector) {
+  @if not $selector {
+    @content;
+  } @else {
+    #{$selector} {
+      @content;
+    }
+  }
+}
diff --git a/packages/core/src/theme/theme.scss b/packages/core/src/theme/theme.scss
index 9ea236a12..cb15b6e82 100644
--- a/packages/core/src/theme/theme.scss
+++ b/packages/core/src/theme/theme.scss
@@ -1,4 +1,5 @@
 @use 'sass:list';
+@use '../mixins';
 @use './tokens' as castor;
 
 // ...$types: 'class' | 'raw';
@@ -6,9 +7,9 @@
   $class: list.index($types, 'class');
   $raw: list.index($types, 'raw');
 
-  $selector: if($class, '.castor-theme--#{$name}', '&');
+  $selector: if($class, '.castor-theme--#{$name}', null);
 
-  #{$selector} {
+  @include mixins.wrap-if($selector) {
     @if not $raw {
       @include castor.tokens();
     }