From c9c38550c0e053985df903d7202a3e7408c651b2 Mon Sep 17 00:00:00 2001 From: Tim Roes Date: Fri, 27 Jan 2023 12:20:36 +0100 Subject: [PATCH] Prevent @use renaming in SASS (#21931) --- airbyte-webapp/.stylelintrc | 3 +- .../packages/stylelint-plugin/index.js | 1 + .../stylelint-plugin/no-use-renaming.js | 34 +++++++++++++++++++ .../ui/CheckBox/CheckBox.module.scss | 10 +++--- .../ui/NextTable/NextTable.module.scss | 20 +++++------ .../src/components/ui/Toast/Toast.module.scss | 18 +++++----- .../auth/OAuthLogin/OAuthLogin.module.scss | 18 +++++----- .../components/Separator.module.scss | 10 +++--- .../ConnectorServiceTypeControl.module.scss | 12 +++---- .../TestingConnectionSpinner.module.scss | 6 ++-- .../RequestConnectorModal.module.scss | 4 +-- 11 files changed, 86 insertions(+), 50 deletions(-) create mode 100644 airbyte-webapp/packages/stylelint-plugin/no-use-renaming.js diff --git a/airbyte-webapp/.stylelintrc b/airbyte-webapp/.stylelintrc index 55b5a685b4cf..e777d222acd5 100644 --- 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 index a60e83bc6409..04f1b74b7b22 100644 --- 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 new file mode 100644 index 000000000000..221d59d05562 --- /dev/null +++ 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} */ +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 index c3a67ea8d793..f6eb59caff74 100644 --- 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 index 25e49218fe98..c1ee9ea51440 100644 --- a/airbyte-webapp/src/components/ui/NextTable/NextTable.module.scss +++ b/airbyte-webapp/src/components/ui/NextTable/NextTable.module.scss @@ -1,5 +1,5 @@ @use "scss/colors"; -@use "scss/variables" as vars; +@use "scss/variables"; @use "scss/z-indices"; // ------- -------- @@ -7,7 +7,7 @@ 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,7 +51,7 @@ // ---------
--------- .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; @@ -59,18 +59,18 @@ 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 index d14a776aa30b..36a827682585 100644 --- 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 index bbe1cea8a112..e6e13509bcaf 100644 --- 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 index aedcba0ca985..f1bcb5d46e18 100644 --- 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/airbyte-webapp/src/views/Connector/ConnectorForm/components/Controls/ConnectorServiceTypeControl/ConnectorServiceTypeControl.module.scss b/airbyte-webapp/src/views/Connector/ConnectorForm/components/Controls/ConnectorServiceTypeControl/ConnectorServiceTypeControl.module.scss index 530470fee870..5cb031bfb35e 100644 --- a/airbyte-webapp/src/views/Connector/ConnectorForm/components/Controls/ConnectorServiceTypeControl/ConnectorServiceTypeControl.module.scss +++ b/airbyte-webapp/src/views/Connector/ConnectorForm/components/Controls/ConnectorServiceTypeControl/ConnectorServiceTypeControl.module.scss @@ -1,10 +1,10 @@ @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; @@ -12,7 +12,7 @@ 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/airbyte-webapp/src/views/Connector/ConnectorForm/components/TestingConnectionSpinner.module.scss b/airbyte-webapp/src/views/Connector/ConnectorForm/components/TestingConnectionSpinner.module.scss index c6230db871ec..6b2ffd07f631 100644 --- a/airbyte-webapp/src/views/Connector/ConnectorForm/components/TestingConnectionSpinner.module.scss +++ b/airbyte-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 index 6a80fe3b575f..f1a18c3460ef 100644 --- a/airbyte-webapp/src/views/Connector/RequestConnectorModal/RequestConnectorModal.module.scss +++ b/airbyte-webapp/src/views/Connector/RequestConnectorModal/RequestConnectorModal.module.scss @@ -1,4 +1,4 @@ -@use "../../../scss/variables" as vars; +@use "scss/variables"; .modalBody { overflow: unset; @@ -6,7 +6,7 @@ } .controlLabel { - margin-bottom: vars.$spacing-xl; + margin-bottom: variables.$spacing-xl; } .requestButton {