chore(stylelint): disable rule for components, fix others

carbon-design-system · Feb 4, 2022 · b5705ce · b5705ce
1 parent 1c42a09
commit b5705ce
Show file tree

Hide file tree

Showing 13 changed files with 68 additions and 28 deletions.
diff --git a/config/stylelint-config-carbon/plugins/scss.js b/config/stylelint-config-carbon/plugins/scss.js
@@ -120,4 +120,19 @@ module.exports = {
     // Disallow redundant nesting selectors (&).
     'scss/selector-no-redundant-nesting-selector': true,
   },
+  overrides: [
+    {
+      files: [
+        './packages/components/**/*.scss',
+        './packages/type/**/*.scss',
+        './packages/motion/**/*.scss',
+        './packages/layout/**/*.scss',
+        './packages/grid/**/*.scss',
+        './packages/import-once/**/*.scss',
+      ],
+      rules: {
+        'scss/no-global-function-names': OFF,
+      },
+    },
+  ],
 };
diff --git a/packages/carbon-react/src/components/Icons/Icons.stories.scss b/packages/carbon-react/src/components/Icons/Icons.stories.scss
@@ -4,7 +4,6 @@
 // This source code is licensed under the Apache-2.0 license found in the
 // LICENSE file in the root directory of this source tree.
 //
-
 .demo-icon-example {
   display: flex;
   width: 10rem;

diff --git a/packages/components/src/globals/scss/_helper-mixins.scss b/packages/components/src/globals/scss/_helper-mixins.scss
@@ -207,35 +207,43 @@
       transform: scaleX(0);
       transform-origin: left;
     }
+
     20% {
       opacity: 1;
       transform: scaleX(1);
       transform-origin: left;
     }
+
     28% {
       transform: scaleX(1);
       transform-origin: right;
     }
+
     51% {
       transform: scaleX(0);
       transform-origin: right;
     }
+
     58% {
       transform: scaleX(0);
       transform-origin: right;
     }
+
     82% {
       transform: scaleX(1);
       transform-origin: right;
     }
+
     83% {
       transform: scaleX(1);
       transform-origin: left;
     }
+
     96% {
       transform: scaleX(0);
       transform-origin: left;
     }
+
     100% {
       opacity: 0.3;
       transform: scaleX(0);

diff --git a/packages/grid/scss/_mixins.import.scss b/packages/grid/scss/_mixins.import.scss
@@ -25,8 +25,8 @@
 
 @use 'sass:meta';
 @use 'sass:math';
-@import '@carbon/layout/scss/breakpoint'; /* stylelint-disable-line no-invalid-position-at-import-rule */
-@import 'prefix'; /* stylelint-disable-line no-invalid-position-at-import-rule */
+@import '@carbon/layout/scss/breakpoint';
+@import 'prefix';
 
 // -----------------------------------------------------------------------------
 // Columns

diff --git a/packages/import-once/scss/import-once.scss b/packages/import-once/scss/import-once.scss
@@ -18,7 +18,7 @@ $imported-modules: () !default;
 /// @content Declaration blocks to be imported
 /// @group @carbon/import-once
 @mixin exports($name, $warn: false) {
-  @if (index($imported-modules, $name) == null) {
+  @if not(index($imported-modules, $name)) {
     $imported-modules: append($imported-modules, $name) !global;
     @content;
   } @else if $warn == true {

diff --git a/packages/layout/scss/_key-height.import.scss b/packages/layout/scss/_key-height.import.scss
@@ -21,8 +21,8 @@
 
 @use 'sass:meta';
 @use "sass:math";
-@import 'breakpoint'; /* stylelint-disable-line no-invalid-position-at-import-rule */
-@import 'utilities'; /* stylelint-disable-line no-invalid-position-at-import-rule */
+@import 'breakpoint';
+@import 'utilities';
 
 /// Get the column width for a given breakpoint
 /// @param {String} $breakpoint

diff --git a/packages/styles/scss/_reset.scss b/packages/styles/scss/_reset.scss
@@ -144,8 +144,8 @@
     border-collapse: collapse;
     border-spacing: 0;
   }
-  /// End vendor reset
 
+  /// End vendor reset
   html {
     box-sizing: border-box;
   }

diff --git a/packages/styles/scss/components/date-picker/_flatpickr.scss b/packages/styles/scss/components/date-picker/_flatpickr.scss
@@ -16,66 +16,73 @@
 
 @use '../button/tokens' as *;
 
-@keyframes fpFadeInDown {
+@keyframes fp-fade-in-down {
   from {
     opacity: 0;
     transform: translate3d(0, -20px, 0);
   }
+
   to {
     opacity: 1;
     transform: translate3d(0, 0, 0);
   }
 }
 
-@keyframes fpSlideLeft {
+@keyframes fp-slide-left {
   from {
     transform: translate3d(0, 0, 0);
   }
+
   to {
     transform: translate3d(-100%, 0, 0);
   }
 }
 
-@keyframes fpSlideLeftNew {
+@keyframes fp-slide-left-new {
   from {
     transform: translate3d(100%, 0, 0);
   }
+
   to {
     transform: translate3d(0, 0, 0);
   }
 }
 
-@keyframes fpSlideRight {
+@keyframes fp-slide-right {
   from {
     transform: translate3d(0, 0, 0);
   }
+
   to {
     transform: translate3d(100%, 0, 0);
   }
 }
 
-@keyframes fpSlideRightNew {
+@keyframes fp-slide-right-new {
   from {
     transform: translate3d(-100%, 0, 0);
   }
+
   to {
     transform: translate3d(0, 0, 0);
   }
 }
 
-@keyframes fpFadeOut {
+@keyframes fp-fade-out {
   from {
     opacity: 1;
   }
+
   to {
     opacity: 0;
   }
 }
 
-@keyframes fpFadeIn {
+@keyframes fp-fade-in {
   from {
     opacity: 0;
   }
+
   to {
     opacity: 1;
   }
@@ -130,7 +137,7 @@
   }
 
   .flatpickr-calendar.animate.open {
-    animation: fpFadeInDown $duration-fast-02 motion(entrance, productive);
+    animation: fp-fade-in-down $duration-fast-02 motion(entrance, productive);
   }
 
   .flatpickr-calendar.inline {
@@ -392,8 +399,8 @@
   }
 
   .flatpickr-calendar.animate .dayContainer.slideLeft {
-    animation: fpFadeOut 400ms cubic-bezier(0.23, 1, 0.32, 1),
-      fpSlideLeft 400ms cubic-bezier(0.23, 1, 0.32, 1);
+    animation: fp-fade-out 400ms cubic-bezier(0.23, 1, 0.32, 1),
+      fp-slide-left 400ms cubic-bezier(0.23, 1, 0.32, 1);
   }
 
   .flatpickr-calendar.animate .dayContainer.slideLeft,
@@ -402,19 +409,19 @@
   }
 
   .flatpickr-calendar.animate .dayContainer.slideLeftNew {
-    animation: fpFadeIn 400ms cubic-bezier(0.23, 1, 0.32, 1),
-      fpSlideLeft 400ms cubic-bezier(0.23, 1, 0.32, 1);
+    animation: fp-fade-in 400ms cubic-bezier(0.23, 1, 0.32, 1),
+      fp-slide-left 400ms cubic-bezier(0.23, 1, 0.32, 1);
   }
 
   .flatpickr-calendar.animate .dayContainer.slideRight {
-    animation: fpFadeOut 400ms cubic-bezier(0.23, 1, 0.32, 1),
-      fpSlideRight 400ms cubic-bezier(0.23, 1, 0.32, 1);
+    animation: fp-fade-out 400ms cubic-bezier(0.23, 1, 0.32, 1),
+      fp-slide-right 400ms cubic-bezier(0.23, 1, 0.32, 1);
     transform: translate3d(100%, 0, 0);
   }
 
   .flatpickr-calendar.animate .dayContainer.slideRightNew {
-    animation: fpFadeIn 400ms cubic-bezier(0.23, 1, 0.32, 1),
-      fpSlideRightNew 400ms cubic-bezier(0.23, 1, 0.32, 1);
+    animation: fp-fade-in 400ms cubic-bezier(0.23, 1, 0.32, 1),
+      fp-slide-right-new 400ms cubic-bezier(0.23, 1, 0.32, 1);
   }
 
   .flatpickr-day {

diff --git a/packages/styles/scss/fonts/_src.scss b/packages/styles/scss/fonts/_src.scss
@@ -66,7 +66,7 @@ $-google-filenames: (
 
 @function -get-google-filename($map, $keys...) {
   @each $key in $keys {
-    $map: map-get($map, $key);
+    $map: map.get($map, $key);
   }
 
   @return $map;

diff --git a/packages/styles/scss/utilities/_keyframes.scss b/packages/styles/scss/utilities/_keyframes.scss
@@ -19,6 +19,7 @@
   0% {
     @include content-visible;
   }
+
   100% {
     @include content-hidden;
   }
@@ -28,6 +29,7 @@
   0% {
     @include content-hidden;
   }
+
   100% {
     @include content-visible;
   }
@@ -39,35 +41,43 @@
     transform: scaleX(0);
     transform-origin: left;
   }
+
   20% {
     opacity: 1;
     transform: scaleX(1);
     transform-origin: left;
   }
+
   28% {
     transform: scaleX(1);
     transform-origin: right;
   }
+
   51% {
     transform: scaleX(0);
     transform-origin: right;
   }
+
   58% {
     transform: scaleX(0);
     transform-origin: right;
   }
+
   82% {
     transform: scaleX(1);
     transform-origin: right;
   }
+
   83% {
     transform: scaleX(1);
     transform-origin: left;
   }
+
   96% {
     transform: scaleX(0);
     transform-origin: left;
   }
+
   100% {
     opacity: 0.3;
     transform: scaleX(0);

diff --git a/packages/styles/scss/utilities/_tooltip.scss b/packages/styles/scss/utilities/_tooltip.scss
@@ -93,6 +93,7 @@
 
   @if $tooltip-type == 'icon' {
     cursor: pointer;
+
     &:focus {
       outline: 1px solid transparent;
 
@@ -181,6 +182,7 @@
       from {
         opacity: 0;
       }
+
       to {
         opacity: 1;
       }

diff --git a/packages/type/scss/_styles.import.scss b/packages/type/scss/_styles.import.scss
@@ -21,9 +21,9 @@
 
 @use "sass:meta";
 @use "sass:math";
-@import '@carbon/layout/scss/breakpoint'; /* stylelint-disable-line no-invalid-position-at-import-rule */
-@import 'font-family'; /* stylelint-disable-line no-invalid-position-at-import-rule */
-@import 'scale'; /* stylelint-disable-line no-invalid-position-at-import-rule */
+@import '@carbon/layout/scss/breakpoint';
+@import 'font-family';
+@import 'scale';
 
 /// @type Map
 /// @access public

diff --git a/www/src/components/Header/Header.module.scss b/www/src/components/Header/Header.module.scss
@@ -4,7 +4,6 @@
 // This source code is licensed under the Apache-2.0 license found in the
 // LICENSE file in the root directory of this source tree.
 //
-
 .header {
   display: grid;
   min-height: 4rem;