Prevent @use renaming in SASS (#21931)

airbytehq · Jan 27, 2023 · c9c3855 · c9c3855
1 parent de7881b
commit c9c3855
Show file tree

Hide file tree

Showing 11 changed files with 86 additions and 50 deletions.
diff --git a/airbyte-webapp/.stylelintrc b/airbyte-webapp/.stylelintrc
@@ -16,7 +16,8 @@
     "scss/percent-placeholder-pattern": null,
     "value-keyword-case": null,
     "color-no-hex": true,
-    "airbyte/no-color-variables-in-rgba": true
+    "airbyte/no-color-variables-in-rgba": true,
+    "airbyte/no-use-renaming": true
   },
   "ignoreFiles": ["**/build/**", "**/dist/**"],
   "plugins": ["./packages/stylelint-plugin/index.js"]

diff --git a/airbyte-webapp/packages/stylelint-plugin/index.js b/airbyte-webapp/packages/stylelint-plugin/index.js
@@ -3,6 +3,7 @@ const stylelint = require("stylelint");
 
 const rules = {
   "no-color-variables-in-rgba": require("./no-color-variables-in-rgba"),
+  "no-use-renaming": require("./no-use-renaming"),
 };
 
 const rulesPlugins = Object.keys(rules).map((ruleName) =>

diff --git a/airbyte-webapp/packages/stylelint-plugin/no-use-renaming.js b/airbyte-webapp/packages/stylelint-plugin/no-use-renaming.js
@@ -0,0 +1,34 @@
+// eslint-disable-next-line @typescript-eslint/no-var-requires
+const stylelint = require("stylelint");
+const { ruleMessages } = stylelint.utils;
+const ruleName = "airbyte/no-use-renaming";
+const messages = ruleMessages(ruleName, {
+  rejected: () => `You should not assign @use imports a different name.`,
+});
+
+module.exports.ruleName = ruleName;
+module.exports.messages = messages;
+
+/**
+ * This stylelint rule checks a `@use` statement got a new name assigned e.g. `@use "scss/variables" as var`
+ * and fails if so.
+ */
+/** @type {import('stylelint').Rule<boolean>} */
+module.exports = (enabled) => {
+  return function lint(postcssRoot, postcssResult) {
+    if (!enabled) {
+      return;
+    }
+    postcssRoot.walkAtRules((rule) => {
+      if (rule.name === "use" && rule.params.includes(" as ")) {
+        stylelint.utils.report({
+          ruleName,
+          node: rule,
+          message: messages.rejected(),
+          result: postcssResult,
+          word: `as `,
+        });
+      }
+    });
+  };
+};
diff --git a/airbyte-webapp/src/components/ui/CheckBox/CheckBox.module.scss b/airbyte-webapp/src/components/ui/CheckBox/CheckBox.module.scss
@@ -1,5 +1,5 @@
 @use "scss/colors";
-@use "scss/variables" as vars;
+@use "scss/variables";
 
 $lg-size: 18px;
 $sm-size: 14px;
@@ -8,9 +8,9 @@ $sm-size: 14px;
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  padding: vars.$border-thin 0;
-  border: vars.$border-thin solid colors.$grey-100;
-  border-radius: vars.$border-radius-2xs;
+  padding: variables.$border-thin 0;
+  border: variables.$border-thin solid colors.$grey-100;
+  border-radius: variables.$border-radius-2xs;
   color: colors.$white;
   background-color: colors.$white;
   cursor: pointer;
@@ -27,7 +27,7 @@ $sm-size: 14px;
 
 .checked,
 .indeterminate {
-  border: vars.$border-thin solid colors.$blue;
+  border: variables.$border-thin solid colors.$blue;
   background: colors.$blue;
 
   &.disabled {

diff --git a/airbyte-webapp/src/components/ui/NextTable/NextTable.module.scss b/airbyte-webapp/src/components/ui/NextTable/NextTable.module.scss
@@ -1,13 +1,13 @@
 @use "scss/colors";
-@use "scss/variables" as vars;
+@use "scss/variables";
 @use "scss/z-indices";
 
 // ------- <table/> --------
 .table {
   border-spacing: 0;
   width: 100%;
   max-width: 100%;
-  border-radius: vars.$border-radius-md;
+  border-radius: variables.$border-radius-md;
 }
 
 .thead {
@@ -28,13 +28,13 @@
   font-weight: 600;
 
   &:first-child {
-    padding-left: calc(vars.$spacing-2xl + vars.$spacing-sm);
-    border-radius: vars.$border-radius-md 0 0;
+    padding-left: calc(variables.$spacing-2xl + variables.$spacing-sm);
+    border-radius: variables.$border-radius-md 0 0;
   }
 
   &:last-child {
-    padding-left: vars.$spacing-lg;
-    border-radius: 0 vars.$border-radius-md 0 0;
+    padding-left: variables.$spacing-lg;
+    border-radius: 0 variables.$border-radius-md 0 0;
   }
 }
 
@@ -51,26 +51,26 @@
 // --------- <td/> ---------
 
 .td {
-  padding: vars.$spacing-lg calc(vars.$spacing-md + vars.$spacing-xs);
+  padding: variables.$spacing-lg calc(variables.$spacing-md + variables.$spacing-xs);
   font-size: 12px;
   line-height: 15px;
   font-weight: normal;
   color: colors.$dark-blue;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
-  border-bottom: vars.$border-thin solid colors.$grey-100;
+  border-bottom: variables.$border-thin solid colors.$grey-100;
   width: auto;
 
   tr:last-child > & {
     border-bottom: none;
 
     &:first-child {
-      border-radius: 0 0 0 vars.$border-radius-md;
+      border-radius: 0 0 0 variables.$border-radius-md;
     }
 
     &:last-child {
-      border-radius: 0 0 vars.$border-radius-md;
+      border-radius: 0 0 variables.$border-radius-md;
     }
   }
 }
diff --git a/airbyte-webapp/src/components/ui/Toast/Toast.module.scss b/airbyte-webapp/src/components/ui/Toast/Toast.module.scss
@@ -1,5 +1,5 @@
 @use "scss/colors";
-@use "scss/variables" as vars;
+@use "scss/variables";
 @use "scss/z-indices";
 @use "scss/mixins";
 
@@ -38,17 +38,17 @@ $toast-bottom-margin: 27px;
   display: flex;
   flex-direction: row;
   align-items: flex-start;
-  gap: vars.$spacing-md;
-  max-width: vars.$width-max-notification;
+  gap: variables.$spacing-md;
+  max-width: variables.$width-max-notification;
   position: fixed;
   box-sizing: border-box;
   bottom: $toast-bottom-margin;
-  margin-left: calc(vars.$width-size-menu / 2);
+  margin-left: calc(variables.$width-size-menu / 2);
   left: 50%;
   transform: translate(-50%, 0);
   z-index: z-indices.$notification;
-  padding: vars.$spacing-md;
-  border-radius: vars.$border-radius-md;
+  padding: variables.$spacing-md;
+  border-radius: variables.$border-radius-md;
   animation: slide-up-animations 0.25s ease-out;
 
   @include mixins.shadow;
@@ -64,8 +64,8 @@ $toast-bottom-margin: 27px;
   height: $toast-icon-container-size;
   max-height: $toast-icon-container-size;
   min-width: $toast-icon-container-size;
-  padding: vars.$border-radius-md;
-  border-radius: vars.$border-radius-md;
+  padding: variables.$border-radius-md;
+  border-radius: variables.$border-radius-md;
   box-sizing: border-box;
   display: flex;
   align-items: center;
@@ -89,7 +89,7 @@ $toast-bottom-margin: 27px;
 }
 
 .actionButton {
-  margin-top: vars.$spacing-xs;
+  margin-top: variables.$spacing-xs;
 }
 
 .closeButton {

diff --git a/airbyte-webapp/src/packages/cloud/views/auth/OAuthLogin/OAuthLogin.module.scss b/airbyte-webapp/src/packages/cloud/views/auth/OAuthLogin/OAuthLogin.module.scss
@@ -1,10 +1,10 @@
-@use "../../../../../scss/variables" as vars;
-@use "../../../../../scss/colors";
+@use "scss/variables";
+@use "scss/colors";
 
 .buttons {
   display: grid;
   grid-template-columns: 1fr;
-  gap: vars.$spacing-sm;
+  gap: variables.$spacing-sm;
 }
 
 .spinner {
@@ -31,11 +31,11 @@
   font-size: 16px;
   font-weight: 500;
   width: 100%;
-  margin: vars.$spacing-sm auto;
-  padding: vars.$spacing-md;
-  gap: vars.$spacing-md;
-  border-radius: vars.$border-radius-md;
-  transition: all vars.$transition;
+  margin: variables.$spacing-sm auto;
+  padding: variables.$spacing-md;
+  gap: variables.$spacing-md;
+  border-radius: variables.$border-radius-md;
+  transition: all variables.$transition;
   cursor: pointer;
 
   &:hover,
@@ -49,6 +49,6 @@
 }
 
 .error {
-  margin-top: vars.$spacing-lg;
+  margin-top: variables.$spacing-lg;
   color: colors.$red;
 }
diff --git a/airbyte-webapp/src/packages/cloud/views/auth/SignupPage/components/Separator.module.scss b/airbyte-webapp/src/packages/cloud/views/auth/SignupPage/components/Separator.module.scss
@@ -1,9 +1,9 @@
-@use "../../../../../../scss/variables" as vars;
-@use "../../../../../../scss/colors";
+@use "scss/variables";
+@use "scss/colors";
 
 .separator {
   display: flex;
-  padding: vars.$spacing-md 0;
+  padding: variables.$spacing-md 0;
   font-size: 16px;
   text-align: center;
   font-weight: bold;
@@ -19,10 +19,10 @@
   }
 
   &::before {
-    margin-right: vars.$spacing-md;
+    margin-right: variables.$spacing-md;
   }
 
   &::after {
-    margin-left: vars.$spacing-md;
+    margin-left: variables.$spacing-md;
   }
 }
diff --git a/...m/components/Controls/ConnectorServiceTypeControl/ConnectorServiceTypeControl.module.scss b/...m/components/Controls/ConnectorServiceTypeControl/ConnectorServiceTypeControl.module.scss
@@ -1,18 +1,18 @@
 @use "scss/colors";
-@use "scss/variables" as vars;
+@use "scss/variables";
 
 .connectorListFooter {
   width: 100%;
-  padding: vars.$spacing-md;
-  border-top: vars.$border-thin solid colors.$grey-50;
+  padding: variables.$spacing-md;
+  border-top: variables.$border-thin solid colors.$grey-50;
   min-height: 36px;
   position: relative;
 
   .requestNewConnectorBtn {
     display: flex;
     flex-direction: row;
     align-items: center;
-    gap: vars.$spacing-md;
+    gap: variables.$spacing-md;
     border: none;
     cursor: pointer;
     background: colors.$white;
@@ -28,7 +28,7 @@
   display: flex;
   flex-direction: row;
   align-items: center;
-  gap: vars.$spacing-md;
+  gap: variables.$spacing-md;
 }
 
 .stageLabel {
@@ -37,7 +37,7 @@
   background: colors.$grey-100;
   color: colors.$dark-blue;
   text-transform: uppercase;
-  border-radius: vars.$border-radius-pill;
+  border-radius: variables.$border-radius-pill;
   font-weight: 500;
   font-size: 8px;
   line-height: 10px;

diff --git a/...-webapp/src/views/Connector/ConnectorForm/components/TestingConnectionSpinner.module.scss b/...-webapp/src/views/Connector/ConnectorForm/components/TestingConnectionSpinner.module.scss
@@ -1,12 +1,12 @@
-@use "../../../../scss/variables" as vars;
+@use "scss/variables";
 
 .container {
-  margin: 34px 0 vars.$spacing-md;
+  margin: 34px 0 variables.$spacing-md;
   display: flex;
   align-items: center;
   justify-content: center;
 }
 
 .button {
-  margin-left: vars.$spacing-md;
+  margin-left: variables.$spacing-md;
 }
diff --git a/airbyte-webapp/src/views/Connector/RequestConnectorModal/RequestConnectorModal.module.scss b/airbyte-webapp/src/views/Connector/RequestConnectorModal/RequestConnectorModal.module.scss
@@ -1,12 +1,12 @@
-@use "../../../scss/variables" as vars;
+@use "scss/variables";
 
 .modalBody {
   overflow: unset;
   min-width: 500px;
 }
 
 .controlLabel {
-  margin-bottom: vars.$spacing-xl;
+  margin-bottom: variables.$spacing-xl;
 }
 
 .requestButton {