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

@@ -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"

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');

packages/core/src/mixins/index.scss

@@ -3,3 +3,4 @@
 @forward './square';
 @forward './with-inner-focus';
 @forward './with-outer-focus';
+@forward './wrap-if';

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;
   }

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;
   }
 

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;
   }
 

packages/core/src/mixins/wrap-if.scss

@@ -0,0 +1,9 @@
+@mixin wrap-if($selector) {
+  @if not $selector {
+    @content;
+  } @else {
+    #{$selector} {
+      @content;
+    }
+  }
+}

packages/core/src/theme/theme.scss

@@ -1,14 +1,15 @@
 @use 'sass:list';
+@use '../mixins';
 @use './tokens' as castor;
 
 // ...$types: 'class' | 'raw';
 @mixin theme($name, $types...) {
   $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();
     }