From 8ff7b7c4bf7c3e184f0a50c6c4352b2bb2504554 Mon Sep 17 00:00:00 2001 From: Jeri Peier Date: Tue, 1 Oct 2024 10:35:16 +0200 Subject: [PATCH] build: avoid compiling CSS comments (#3124) --- .stylelintrc.json | 1 + .../autocomplete-base-element.scss | 2 +- src/elements/button/common/button-common.scss | 4 +- src/elements/checkbox/checkbox/checkbox.scss | 6 +- src/elements/core/styles/core/functions.scss | 2 +- src/elements/core/styles/mixins/helpers.scss | 2 +- src/elements/core/styles/mixins/lists.scss | 2 +- .../core/styles/mixins/scrollbar.scss | 4 +- src/elements/core/styles/mixins/table.scss | 10 +- src/elements/core/styles/normalize.scss | 193 ++++++------------ .../loading-indicator/loading-indicator.scss | 2 +- src/elements/notification/notification.scss | 2 +- src/elements/select/select.scss | 10 +- src/storybook/pages/home/home.scss | 4 +- 14 files changed, 85 insertions(+), 159 deletions(-) diff --git a/.stylelintrc.json b/.stylelintrc.json index 2da38741c4..717aed3b90 100644 --- a/.stylelintrc.json +++ b/.stylelintrc.json @@ -15,6 +15,7 @@ "no-descending-specificity": null, "scss/comment-no-empty": null, "scss/load-partial-extension": "never", + "scss/comment-no-loud": true, "property-no-vendor-prefix": [ true, { diff --git a/src/elements/autocomplete/autocomplete-base-element.scss b/src/elements/autocomplete/autocomplete-base-element.scss index 7c24cb8c52..a781c6445b 100644 --- a/src/elements/autocomplete/autocomplete-base-element.scss +++ b/src/elements/autocomplete/autocomplete-base-element.scss @@ -103,7 +103,7 @@ } } - /* stylelint-disable-next-line no-descending-specificity */ + // stylelint-disable-next-line no-descending-specificity &::before, &::after { :host(:is([data-state='opened'], [data-state='opening'])[data-option-panel-origin-borderless]) diff --git a/src/elements/button/common/button-common.scss b/src/elements/button/common/button-common.scss index be4cbc4fc2..8cb055662d 100644 --- a/src/elements/button/common/button-common.scss +++ b/src/elements/button/common/button-common.scss @@ -205,7 +205,7 @@ $icon-only: ':where([data-slot-names~=icon], [icon-name]):not([data-slot-names~= } } - /* stylelint-disable no-descending-specificity */ + // stylelint-disable no-descending-specificity :host([data-focus-visible]) &, // Hide focus outline when focus origin is mouse or touch. This is being used as a workaround in various components. // Handle focus on the host (button variant) @@ -216,7 +216,7 @@ $icon-only: ':where([data-slot-names~=icon], [icon-name]):not([data-slot-names~= @include sbb.focus-outline; } } - /* stylelint-enable no-descending-specificity */ + // stylelint-enable no-descending-specificity } .sbb-button__label, diff --git a/src/elements/checkbox/checkbox/checkbox.scss b/src/elements/checkbox/checkbox/checkbox.scss index 9d86e1a2a8..45d3251e96 100644 --- a/src/elements/checkbox/checkbox/checkbox.scss +++ b/src/elements/checkbox/checkbox/checkbox.scss @@ -15,19 +15,19 @@ } :host( - /** No icon */ + // No icon :not([icon-name], [data-slot-names~="icon"])) & { display: none; } :host( - /** Icon present and placement start */ + // Icon present and placement start :is([icon-name], [data-slot-names~="icon"]):not([icon-placement='end'])) & { padding-inline-end: var(--sbb-spacing-fixed-2x); } :host( - /** Icon present and placement end */ + // Icon present and placement end :is([icon-name], [data-slot-names~="icon"])[icon-placement='end']) & { padding-inline-start: var(--sbb-spacing-fixed-2x); } diff --git a/src/elements/core/styles/core/functions.scss b/src/elements/core/styles/core/functions.scss index 68ef58ea8e..0c08365f7f 100644 --- a/src/elements/core/styles/core/functions.scss +++ b/src/elements/core/styles/core/functions.scss @@ -1,6 +1,6 @@ @use 'sass:math'; @function px-to-rem-build($size) { - /* size: value in px (no unit) */ + // size: value in px (no unit) @return ((math.div($size, 16)) * 1rem); } diff --git a/src/elements/core/styles/mixins/helpers.scss b/src/elements/core/styles/mixins/helpers.scss index 2bc9d87679..d717ec1af1 100644 --- a/src/elements/core/styles/mixins/helpers.scss +++ b/src/elements/core/styles/mixins/helpers.scss @@ -23,7 +23,7 @@ transform: translateY(-50%); } -/** This mixin can be used to avoid spacing problems by inserting an invisible space as pseudo element. */ +// This mixin can be used to avoid spacing problems by inserting an invisible space as pseudo element. @mixin zero-width-space { &::before { content: '\200B'; diff --git a/src/elements/core/styles/mixins/lists.scss b/src/elements/core/styles/mixins/lists.scss index b66895af56..86bd10dc05 100644 --- a/src/elements/core/styles/mixins/lists.scss +++ b/src/elements/core/styles/mixins/lists.scss @@ -127,7 +127,7 @@ } } - /* stylelint-disable-next-line no-descending-specificity */ + // stylelint-disable-next-line no-descending-specificity > li { position: relative; padding-inline: calc(var(#{$padding-inline}) + var(#{$dimensions}) + var(#{$to-text-gap})) diff --git a/src/elements/core/styles/mixins/scrollbar.scss b/src/elements/core/styles/mixins/scrollbar.scss index 06e22fa0a6..47747fa96d 100644 --- a/src/elements/core/styles/mixins/scrollbar.scss +++ b/src/elements/core/styles/mixins/scrollbar.scss @@ -14,7 +14,7 @@ background-color: var(--sbb-scrollbar-track-color, transparent); } - /* Scrollbar itself */ + // Scrollbar itself &::-webkit-scrollbar-thumb { background-color: var(--sbb-scrollbar-color, currentcolor); border: calc(0.5 * (var(--sbb-scrollbar-width) - var(--sbb-scrollbar-thumb-width))) solid @@ -30,7 +30,7 @@ } } - /* Hide button (top and bottom of the scrollbar) */ + // Hide button (top and bottom of the scrollbar) &::-webkit-scrollbar-button, &::-webkit-scrollbar-corner { display: none; diff --git a/src/elements/core/styles/mixins/table.scss b/src/elements/core/styles/mixins/table.scss index c418985ac1..35aaedef6f 100644 --- a/src/elements/core/styles/mixins/table.scss +++ b/src/elements/core/styles/mixins/table.scss @@ -1,11 +1,9 @@ @use './typo'; -/* - * SBB table mixin - * Notes: - * We cannot use `border-collapse` because it is not compatible with the `border-radius` property. - * Therefore, we have to build the grid avoiding double borders. - */ +// SBB table mixin +// Notes: +// We cannot use `border-collapse` because it is not compatible with the `border-radius` property. +// Therefore, we have to build the grid avoiding double borders. @mixin table { @include table--m; @include table--striped; diff --git a/src/elements/core/styles/normalize.scss b/src/elements/core/styles/normalize.scss index 6079491980..fb9b57bc05 100644 --- a/src/elements/core/styles/normalize.scss +++ b/src/elements/core/styles/normalize.scss @@ -1,216 +1,147 @@ -/*! modern-normalize v1.1.0 | MIT License | https://github.com/sindresorhus/modern-normalize */ +// modern-normalize v1.1.0 | MIT License | https://github.com/sindresorhus/modern-normalize -/* -Document -======== -*/ - -/** -1. Correct the line height in all browsers. ///// Commented out since we define own line-height ///// -2. Prevent adjustments of font size after orientation changes in iOS. -3. Use a more readable tab size (opinionated). -*/ +// Document +// ======== +// 1. Correct the line height in all browsers. ///// Commented out since we define own line-height ///// +// 2. Prevent adjustments of font size after orientation changes in iOS. +// 3. Use a more readable tab size (opinionated). html { - // line-height: 1.15; /* 1 */ - -webkit-text-size-adjust: 100%; /* 2 */ - -moz-text-size-adjust: 100%; /* 2 */ - text-size-adjust: 100%; /* 2 */ - tab-size: 4; /* 3 */ + // line-height: 1.15; // 1 + -webkit-text-size-adjust: 100%; // 2 + -moz-text-size-adjust: 100%; // 2 + text-size-adjust: 100%; // 2 + tab-size: 4; // 3 } -/* -Sections -======== -*/ - +// Sections +// ======== body { - margin: 0; /* Remove the margin in all browsers. */ + margin: 0; // Remove the margin in all browsers. } -/* -Grouping content -================ -*/ - -/** -1. Add the correct height in Firefox. -2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655) -*/ +// Grouping content +// ================ +// 1. Add the correct height in Firefox. +// 2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655) hr { - height: 0; /* 1 */ - color: inherit; /* 2 */ + height: 0; // 1 + color: inherit; // 2 } -/* -Text-level semantics -==================== -*/ - -/** -Add the correct text decoration in Chrome, Edge, and Safari. -*/ +// Text-level semantics +// ==================== +// Add the correct text decoration in Chrome, Edge, and Safari. abbr[title] { text-decoration: underline dotted; } -/** -Add the correct font weight in Edge and Safari. -*/ - +// Add the correct font weight in Edge and Safari. b, strong { font-weight: bolder; } -/** -1. Improve consistency of default fonts in all browsers. (https://github.com/sindresorhus/modern-normalize/issues/3) -2. Correct the odd 'em' font sizing in all browsers. -*/ - +// 1. Improve consistency of default fonts in all browsers. (https://github.com/sindresorhus/modern-normalize/issues/3) +// 2. Correct the odd 'em' font sizing in all browsers. code, kbd, samp, pre { - font-family: ui-monospace, SFMono-Regular, Consolas, 'Liberation Mono', Menlo, monospace; /* 1 */ - font-size: 1em; /* 2 */ + font-family: ui-monospace, SFMono-Regular, Consolas, 'Liberation Mono', Menlo, monospace; // 1 + font-size: 1em; // 2 } -/** -Add the correct font size in all browsers. -*/ - +// Add the correct font size in all browsers. small { font-size: 80%; } -/* -Tabular data -============ -*/ - -/** -1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297) -2. Correct table border color inheritance in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016) -*/ +// Tabular data +// ============ +// 1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297) +// 2. Correct table border color inheritance in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016) table { - text-indent: 0; /* 1 */ - border-color: inherit; /* 2 */ + text-indent: 0; // 1 + border-color: inherit; // 2 } -/* -Forms -===== -*/ - -/** -1. Change the font styles in all browsers. -2. Remove the margin in Firefox and Safari. -*/ +// Forms +// ===== +// 1. Change the font styles in all browsers. +// 2. Remove the margin in Firefox and Safari. button, input, optgroup, select, textarea { - font-family: inherit; /* 1 */ - font-size: 100%; /* 1 */ - line-height: 1.15; /* 1 */ - margin: 0; /* 2 */ + font-family: inherit; // 1 + font-size: 100%; // 1 + line-height: 1.15; // 1 + margin: 0; // 2 } -/** -Remove the inheritance of text transform in Edge and Firefox. -*/ - +// Remove the inheritance of text transform in Edge and Firefox. button, select { text-transform: none; } -/** -Correct the inability to style clickable types in iOS and Safari. -*/ - +// Correct the inability to style clickable types in iOS and Safari. button, :is(button, input):where([type='button'], [type='reset'], [type='submit']) { -webkit-appearance: button; } -/** -Remove the additional ':invalid' styles in Firefox. -See: https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737 -*/ - +// Remove the additional ':invalid' styles in Firefox. +// See: https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737 :-moz-ui-invalid { box-shadow: none; } -/** -Remove the padding so developers are not caught out when they zero out 'fieldset' elements in all browsers. -*/ - +// Remove the padding so developers are not caught out when they zero out 'fieldset' elements in all browsers. legend { padding: 0; } -/** -Add the correct vertical alignment in Chrome and Firefox. -*/ - +// Add the correct vertical alignment in Chrome and Firefox. progress { vertical-align: baseline; } -/** -Correct the cursor style of increment and decrement buttons in Safari. -*/ - +// Correct the cursor style of increment and decrement buttons in Safari. ::-webkit-inner-spin-button, ::-webkit-outer-spin-button { height: auto; } -/** -1. Correct the odd appearance in Chrome and Safari. -2. Correct the outline style in Safari. -*/ - +// 1. Correct the odd appearance in Chrome and Safari. +// 2. Correct the outline style in Safari. [type='search'] { - -webkit-appearance: textfield; /* 1 */ - outline-offset: -2px; /* 2 */ + -webkit-appearance: textfield; // 1 + outline-offset: -2px; // 2 } -/** -Remove the inner padding in Chrome and Safari on macOS. -*/ - +// Remove the inner padding in Chrome and Safari on macOS. ::-webkit-search-decoration { -webkit-appearance: none; } -/** -1. Correct the inability to style clickable types in iOS and Safari. -2. Change font properties to 'inherit' in Safari. -*/ - +// 1. Correct the inability to style clickable types in iOS and Safari. +// 2. Change font properties to 'inherit' in Safari. ::-webkit-file-upload-button { - -webkit-appearance: button; /* 1 */ - font: inherit; /* 2 */ + -webkit-appearance: button; // 1 + font: inherit; // 2 } -/* -Interactive -=========== -*/ - -/* -Add the correct display in Chrome and Safari. -*/ +// Interactive +// =========== +// Add the correct display in Chrome and Safari. summary { display: list-item; } diff --git a/src/elements/loading-indicator/loading-indicator.scss b/src/elements/loading-indicator/loading-indicator.scss index 79f319f6f0..347a7dd049 100644 --- a/src/elements/loading-indicator/loading-indicator.scss +++ b/src/elements/loading-indicator/loading-indicator.scss @@ -58,7 +58,7 @@ overflow: hidden; border-radius: 50%; background: var(--sbb-loading-indicator-circle-background); - /* stylelint-disable-next-line property-no-vendor-prefix */ + // stylelint-disable-next-line property-no-vendor-prefix -webkit-mask: radial-gradient( circle 0.4375em, #0000 98%, diff --git a/src/elements/notification/notification.scss b/src/elements/notification/notification.scss index 22d5456bb3..a0f34ba629 100644 --- a/src/elements/notification/notification.scss +++ b/src/elements/notification/notification.scss @@ -57,7 +57,7 @@ $open-anim-height-to: calc( @include sbb.disable-animation; } -/* Types */ +// Types :host([type='info']) { --sbb-notification-type-color: var(--sbb-color-smoke); diff --git a/src/elements/select/select.scss b/src/elements/select/select.scss index d91b019c21..6423131bf9 100644 --- a/src/elements/select/select.scss +++ b/src/elements/select/select.scss @@ -73,11 +73,9 @@ .sbb-select__trigger--placeholder { color: var(--sbb-select-placeholder-color, var(--sbb-color-metal)); - /** - * Note: when the sbb-select is used within a sbb-form-field, some style are applied from it - * (see selector `.sbb-form-field__input ::slotted(:where(input, select, sbb-select))` in the sbb-form-field.scss); - * so, next line is mandatory because we need to override the rule from the parent. - */ + // Note: when the sbb-select is used within a sbb-form-field, some style are applied from it + // (see selector `.sbb-form-field__input ::slotted(:where(input, select, sbb-select))` in the sbb-form-field.scss); + // so, next line is mandatory because we need to override the rule from the parent. -webkit-text-fill-color: var(--sbb-select-placeholder-color, var(--sbb-color-metal)); } @@ -118,7 +116,7 @@ } } - /* stylelint-disable-next-line no-descending-specificity */ + // stylelint-disable-next-line no-descending-specificity &::before, &::after { :host(:is([data-state='opened'], [data-state='opening'])[data-option-panel-origin-borderless]) diff --git a/src/storybook/pages/home/home.scss b/src/storybook/pages/home/home.scss index 3cd6526778..155cde0624 100644 --- a/src/storybook/pages/home/home.scss +++ b/src/storybook/pages/home/home.scss @@ -209,9 +209,7 @@ section sbb-title { margin: 0; } -/* - Common classes - */ +// Common classes .grid-reduced-width { grid-column: 1/-1;