Skip to content

Styles: lint theme variables for branch duplicates, missing !default and dead declarations #35049

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
EugeniyKiyashko wants to merge 8 commits into
base: main
Choose a base branch
from
Open

Styles: lint theme variables for branch duplicates, missing !default and dead declarations #35049

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
df6035c
Styles: add the dx/no-identical-branch-declarations stylelint rule wi…
EugeniyKiyashko Sep 3, 2026
be61f39
Styles: declare once what every size, mode and colour branch set to t…
EugeniyKiyashko Sep 3, 2026
1e592b3
Styles: add the dx/module-variable-default stylelint rule requiring !…
EugeniyKiyashko Sep 3, 2026
7878f67
Styles: give every module variable the !default flag so @use with() c…
EugeniyKiyashko Sep 3, 2026
fe3cecb
Styles: drop three dead tabPanel variables the branch repeats were hi…
EugeniyKiyashko Sep 3, 2026
e9a237c
Styles: report a theme variable as unused when nothing reads it, not …
EugeniyKiyashko Sep 3, 2026
7e5c0ee
Styles: remove the 38 theme variables nothing reads
EugeniyKiyashko Sep 3, 2026
06475ff
Styles: anchor the variable scan so a stray $ is skipped instead of c…
EugeniyKiyashko Sep 4, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 5 additions & 1 deletion packages/devextreme-scss/.stylelintrc.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,9 @@
{
"plugins": [
"stylelint-scss",
"@stylistic/stylelint-plugin"
"@stylistic/stylelint-plugin",
"./tools/stylelint/no-identical-branch-declarations.mjs",
"./tools/stylelint/module-variable-default.mjs"
],
"extends": "stylelint-config-standard-scss",
"ignoreFiles": "!**/*.{css,scss}",
Expand All @@ -18,6 +20,8 @@
"@stylistic/declaration-colon-space-after": "always-single-line",
"@stylistic/declaration-colon-space-before": "never",
"declaration-no-important": true,
"dx/module-variable-default": true,
"dx/no-identical-branch-declarations": true,
"font-family-name-quotes": "always-unless-keyword",
"@stylistic/function-comma-space-after": "always-single-line",
"@stylistic/indentation": [2, { "ignore": ["inside-parens"] }],
Expand Down
22 changes: 11 additions & 11 deletions packages/devextreme-scss/scss/widgets/base/_htmlEditor.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,17 +2,17 @@
@use "sass:math";
@use "sass:selector";

$list-style: decimal lower-alpha lower-roman;
$list-style-width: 1.2em;
$list-style-margin: 0.3em;
$list-style-outer-width: $list-style-margin + $list-style-width;
$max-indent: 9;
$resize-handle-size: 11px;
$touch-resize-handle-size: 15px;
$half-resize-handle-size: math.div($resize-handle-size, 2);
$half-touch-resize-handle-size: math.div($touch-resize-handle-size, 2);

$transparent-border: 1px solid transparent;
$list-style: decimal lower-alpha lower-roman !default;
$list-style-width: 1.2em !default;
$list-style-margin: 0.3em !default;
$list-style-outer-width: $list-style-margin + $list-style-width !default;
$max-indent: 9 !default;
$resize-handle-size: 11px !default;
$touch-resize-handle-size: 15px !default;
$half-resize-handle-size: math.div($resize-handle-size, 2) !default;
$half-touch-resize-handle-size: math.div($touch-resize-handle-size, 2) !default;

$transparent-border: 1px solid transparent !default;

@function add-counter-reset($counter, $start: 1) {
@if $counter > $start {
Expand Down
2 changes: 1 addition & 1 deletion packages/devextreme-scss/scss/widgets/base/_icon_fonts.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -613,7 +613,7 @@ $icons: (
"gridkanban": "\f240",
"listbartreeoffset": "\f241",
"clearhistory": "\f242",
);
) !default;

// stylelint-enable

Expand Down
4 changes: 2 additions & 2 deletions packages/devextreme-scss/scss/widgets/base/_loadIndicator.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
@use "sass:math";

$loadindicator-width: 32px;
$loadindicator-height: 32px;
$loadindicator-width: 32px !default;
$loadindicator-height: 32px !default;

.dx-loadindicator {
width: $loadindicator-width;
Expand Down
4 changes: 2 additions & 2 deletions packages/devextreme-scss/scss/widgets/base/_mixins.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -140,5 +140,5 @@
transform: translate(-50%, -50%);
}

$overlay-zindex: 1000;
$max-integer: 2147483647;
$overlay-zindex: 1000 !default;
$max-integer: 2147483647 !default;
4 changes: 2 additions & 2 deletions packages/devextreme-scss/scss/widgets/base/_numberBox.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
@use "./mixins" as *;

$spin-container-width: 22px;
$touch-friendly-spin-container-width: 64px;
$spin-container-width: 22px !default;
$touch-friendly-spin-container-width: 64px !default;

.dx-numberbox {
position: relative;
Expand Down
4 changes: 2 additions & 2 deletions packages/devextreme-scss/scss/widgets/base/_pagination.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
@use "./mixins" as *;

$pagination-paddings: 8px;
$pagination-info-paddings: 9px;
$pagination-paddings: 8px !default;
$pagination-info-paddings: 9px !default;

.dx-pager,
.dx-pagination {
Expand Down
6 changes: 3 additions & 3 deletions packages/devextreme-scss/scss/widgets/base/_recurrenceEditor.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
$recurrence-interval-number-box-margin-top: 25px;
$recurrence-radio-group-item-padding: 10px;
$recurrence-button-group-item-padding: 8px;
$recurrence-interval-number-box-margin-top: 25px !default;
$recurrence-radio-group-item-padding: 10px !default;
$recurrence-button-group-item-padding: 8px !default;

.dx-recurrence-repeat-on,
.dx-recurrence-numberbox-interval-wrapper {
Expand Down
6 changes: 3 additions & 3 deletions packages/devextreme-scss/scss/widgets/base/_resizable.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
$handle-offset: 0;
$one-side-handle-size: 3px + $handle-offset;
$two-side-handle-size: 6px + $handle-offset;
$handle-offset: 0 !default;
$one-side-handle-size: 3px + $handle-offset !default;
$two-side-handle-size: 6px + $handle-offset !default;

.dx-resizable {
display: block;
Expand Down
4 changes: 2 additions & 2 deletions packages/devextreme-scss/scss/widgets/base/_scrollView.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
@use "./mixins" as *;

$pulldown-height: 50px;
$pulldown-padding: 15px;
$pulldown-height: 50px !default;
$pulldown-padding: 15px !default;

.dx-scrollable-native {
&.dx-scrollable-native-generic {
Expand Down
4 changes: 2 additions & 2 deletions packages/devextreme-scss/scss/widgets/base/_slider.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
@use "./mixins" as *;
@use "./popover/mixins" as *;

$slider-tooltip-content-height: 28px;
$slider-tooltip-arrow-height: 7px;
$slider-tooltip-content-height: 28px !default;
$slider-tooltip-arrow-height: 7px !default;

.dx-slider-label {
position: absolute;
Expand Down
2 changes: 1 addition & 1 deletion packages/devextreme-scss/scss/widgets/base/cardView/header_panel/_index.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
2px maximal right header item padding + 4px maximal dxSortable placeholder (drop indicator) width
We can increase this number up to the CardView root padding without issues
*/
$sortable-side-offset: 6px;
$sortable-side-offset: 6px !default;

.dx-cardview-header-item-sorting {
display: flex;
Expand Down
2 changes: 1 addition & 1 deletion packages/devextreme-scss/scss/widgets/base/colorBox/_index.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
@use "./mixins" as *;
@use "sass:string" as string;

$colorbox-input-left-padding: 40px;
$colorbox-input-left-padding: 40px !default;

.dx-colorbox-input-container {
&.dx-colorbox-color-is-not-defined {
Expand Down
24 changes: 12 additions & 12 deletions packages/devextreme-scss/scss/widgets/base/colorView/_index.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,17 +1,17 @@
@use "../mixins" as *;

$color-view-container-width: 450px;
$color-view-palette-width: 288px;
$color-view-palette-height: 299px;
$color-view-alpha-width: 292px;
$color-view-hue-scale-width: 18px;
$color-view-hue-scale-height: $color-view-palette-height;

$colorview-palette-handle-size: 28px;
$colorview-transparent-background-color: #ccc;

$colorview-handle-first-side-size: 36px;
$colorview-handle-second-side-size: 17px;
$color-view-container-width: 450px !default;
$color-view-palette-width: 288px !default;
$color-view-palette-height: 299px !default;
$color-view-alpha-width: 292px !default;
$color-view-hue-scale-width: 18px !default;
$color-view-hue-scale-height: $color-view-palette-height !default;

$colorview-palette-handle-size: 28px !default;
$colorview-transparent-background-color: #ccc !default;

$colorview-handle-first-side-size: 36px !default;
$colorview-handle-second-side-size: 17px !default;

.dx-colorview-container {
width: $color-view-container-width;
Expand Down
2 changes: 1 addition & 1 deletion packages/devextreme-scss/scss/widgets/base/diagram/_index.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
@use "../mixins" as *;

$transparent-border: 1px solid transparent;
$transparent-border: 1px solid transparent !default;

.dx-diagram {
border: $transparent-border;
Expand Down
26 changes: 13 additions & 13 deletions packages/devextreme-scss/scss/widgets/base/gridBase/_variables.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,13 +1,13 @@
$grid-cell-padding: 7px;
$grid-texteditor-input-padding: 32px;
$grid-total-footer-paddings: 7px;
$grid-command-select-column-width: 70px;
$grid-command-edit-column-width: 100px;
$grid-command-edit-column-with-icons-width: 80px;
$grid-command-expand-column-width: 30px;
$grid-command-adaptive-column-width: 36px;
$grid-column-header-indicator-width: 14px;
$grid-text-content-margin: 3px;
$grid-sort-index-width: 12px;
$grid-sort-index-offset: 3px;
$grid-ai-assistant-confirm-dialog-button-width: 50px;
$grid-cell-padding: 7px !default;
$grid-texteditor-input-padding: 32px !default;
$grid-total-footer-paddings: 7px !default;
$grid-command-select-column-width: 70px !default;
$grid-command-edit-column-width: 100px !default;
$grid-command-edit-column-with-icons-width: 80px !default;
$grid-command-expand-column-width: 30px !default;
$grid-command-adaptive-column-width: 36px !default;
$grid-column-header-indicator-width: 14px !default;
$grid-text-content-margin: 3px !default;
$grid-sort-index-width: 12px !default;
$grid-sort-index-offset: 3px !default;
$grid-ai-assistant-confirm-dialog-button-width: 50px !default;
12 changes: 6 additions & 6 deletions packages/devextreme-scss/scss/widgets/base/gridBase/layout/aiChat/_variables.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
$ai-chat-toolbar-item-spacing: 4px;
$ai-chat-message-gap: 8px;
$ai-chat-message-content-gap: 4px;
$ai-chat-message-width: 280px;
$ai-chat-message-regenerate-button-border-radius: 4px;
$ai-chat-action-list-item-text-max-lines: 2;
$ai-chat-toolbar-item-spacing: 4px !default;
$ai-chat-message-gap: 8px !default;
$ai-chat-message-content-gap: 4px !default;
$ai-chat-message-width: 280px !default;
$ai-chat-message-regenerate-button-border-radius: 4px !default;
$ai-chat-action-list-item-text-max-lines: 2 !default;
2 changes: 1 addition & 1 deletion packages/devextreme-scss/scss/widgets/base/list/_index.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
@use "../mixins" as *;
@use "../button/mixins" as *;

$list-searchbox-margin-bottom: 5px;
$list-searchbox-margin-bottom: 5px !default;

.dx-list {
margin: 0;
Expand Down
20 changes: 10 additions & 10 deletions packages/devextreme-scss/scss/widgets/base/pivotGrid/_index.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,16 +23,16 @@ $pivotgrid-button-top-padding: null !default;
@use "../icon_fonts" as *;
@use "./common";

$pivotgrid-drag-header-border: 1px solid;
$pivotgrid-drag-header-first-shadow: 0 0 1px $pivotgrid-drag-header-first-shadow-color;
$pivotgrid-drag-header-second-shadow: 0 1px 3px $pivotgrid-drag-header-second-shadow-color;
$pivotgrid-border-width: 1px;
$pivotgrid-border: $pivotgrid-border-width solid;
$pivotgrid-icon-size: 14px;
$pivotgrid-common-field-padding: 2px;
$pivotgrid-filter-area-border-spacing: $pivotgrid-common-left-right-padding - $pivotgrid-common-field-padding $pivotgrid-header-top-bottom-padding - $pivotgrid-common-field-padding;
$pivotgrid-expand-icon-offset: -5px;
$pivotgrid-expand-icon-text-offset: 0;
$pivotgrid-drag-header-border: 1px solid !default;
$pivotgrid-drag-header-first-shadow: 0 0 1px $pivotgrid-drag-header-first-shadow-color !default;
$pivotgrid-drag-header-second-shadow: 0 1px 3px $pivotgrid-drag-header-second-shadow-color !default;
$pivotgrid-border-width: 1px !default;
$pivotgrid-border: $pivotgrid-border-width solid !default;
$pivotgrid-icon-size: 14px !default;
$pivotgrid-common-field-padding: 2px !default;
$pivotgrid-filter-area-border-spacing: $pivotgrid-common-left-right-padding - $pivotgrid-common-field-padding $pivotgrid-header-top-bottom-padding - $pivotgrid-common-field-padding !default;
$pivotgrid-expand-icon-offset: -5px !default;
$pivotgrid-expand-icon-text-offset: 0 !default;

.dx-pivotgrid-fields-container {
.dx-position-indicator {
Expand Down
4 changes: 2 additions & 2 deletions packages/devextreme-scss/scss/widgets/base/scheduler/_common.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
@use "sass:math";
@use "../../base/mixins" as *;

$scheduler-appointment-collector-margin: 3px;
$scheduler-appointment-collector-height: 22px;
$scheduler-appointment-collector-margin: 3px !default;
$scheduler-appointment-collector-height: 22px !default;

.dx-scheduler {
.dx-empty-message {
Expand Down
68 changes: 34 additions & 34 deletions packages/devextreme-scss/scss/widgets/base/scheduler/_index.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -52,52 +52,52 @@ $agenda-appointment-recurrence-icon-color: null !default;
$scheduler-tooltip-list-focused-bg: $scheduler-tooltip-list-focused-bg
);

$scheduler-appointment-min-size: 4px;
$scheduler-appointment-content-padding: 5px 7px;
$scheduler-appointment-reduced-content-padding: 40px;
$scheduler-appointment-min-size: 4px !default;
$scheduler-appointment-content-padding: 5px 7px !default;
$scheduler-appointment-reduced-content-padding: 40px !default;

$scheduler-hovered-appointment-top-shadow-size: 5px;
$scheduler-focused-cell-shadow: inset 0 0 0 1px $scheduler-appointment-base-color;
$scheduler-hovered-appointment-top-shadow-size: 5px !default;
$scheduler-focused-cell-shadow: inset 0 0 0 1px $scheduler-appointment-base-color !default;

$scheduler-vertical-appointment-resizable-hovering-shadow: inset 0 $scheduler-hovered-appointment-top-shadow-size 0 0 $scheduler-appointment-start-color, inset 0 -2px 0 0 $scheduler-appointment-start-color;
$scheduler-vertical-appointment-hovering-shadow: inset 0 $scheduler-hovered-appointment-top-shadow-size 0 0 $scheduler-appointment-start-color;
$scheduler-vertical-appointment-shadow: inset 0 2px 0 0 $scheduler-appointment-start-color;
$scheduler-vertical-appointment-resizing-shadow: inset 0 -2px 0 0 $scheduler-appointment-start-color, $scheduler-vertical-appointment-shadow;
$scheduler-vertical-appointment-resizable-hovering-shadow: inset 0 $scheduler-hovered-appointment-top-shadow-size 0 0 $scheduler-appointment-start-color, inset 0 -2px 0 0 $scheduler-appointment-start-color !default;
$scheduler-vertical-appointment-hovering-shadow: inset 0 $scheduler-hovered-appointment-top-shadow-size 0 0 $scheduler-appointment-start-color !default;
$scheduler-vertical-appointment-shadow: inset 0 2px 0 0 $scheduler-appointment-start-color !default;
$scheduler-vertical-appointment-resizing-shadow: inset 0 -2px 0 0 $scheduler-appointment-start-color, $scheduler-vertical-appointment-shadow !default;

$scheduler-appointment-dragging-shadow: 7px 7px 15px 0 rgba(50, 50, 50, 0.2);
$scheduler-appointment-dragging-shadow: 7px 7px 15px 0 rgba(50, 50, 50, 0.2) !default;

$scheduler-horizontal-appointment-resizable-hovering-shadow: inset $scheduler-hovered-appointment-top-shadow-size 0 0 0 $scheduler-appointment-start-color, inset -2px 0 0 0 $scheduler-appointment-start-color;
$scheduler-horizontal-appointment-resizable-hovering-shadow-rtl: inset (-$scheduler-hovered-appointment-top-shadow-size) 0 0 0 $scheduler-appointment-start-color, inset 2px 0 0 0 $scheduler-appointment-start-color;
$scheduler-horizontal-appointment-hovering-shadow: inset $scheduler-hovered-appointment-top-shadow-size 0 0 0 $scheduler-appointment-start-color;
$scheduler-horizontal-appointment-hovering-shadow-rtl: inset (-$scheduler-hovered-appointment-top-shadow-size) 0 0 0 $scheduler-appointment-start-color;
$scheduler-horizontal-appointment-shadow: inset 2px 0 0 0 $scheduler-appointment-start-color;
$scheduler-horizontal-appointment-shadow-rtl: inset -2px 0 0 0 $scheduler-appointment-start-color;
$scheduler-horizontal-appointment-resizing-shadow: inset -2px 0 0 0 $scheduler-appointment-start-color, $scheduler-horizontal-appointment-shadow;
$scheduler-horizontal-appointment-resizable-hovering-shadow: inset $scheduler-hovered-appointment-top-shadow-size 0 0 0 $scheduler-appointment-start-color, inset -2px 0 0 0 $scheduler-appointment-start-color !default;
$scheduler-horizontal-appointment-resizable-hovering-shadow-rtl: inset (-$scheduler-hovered-appointment-top-shadow-size) 0 0 0 $scheduler-appointment-start-color, inset 2px 0 0 0 $scheduler-appointment-start-color !default;
$scheduler-horizontal-appointment-hovering-shadow: inset $scheduler-hovered-appointment-top-shadow-size 0 0 0 $scheduler-appointment-start-color !default;
$scheduler-horizontal-appointment-hovering-shadow-rtl: inset (-$scheduler-hovered-appointment-top-shadow-size) 0 0 0 $scheduler-appointment-start-color !default;
$scheduler-horizontal-appointment-shadow: inset 2px 0 0 0 $scheduler-appointment-start-color !default;
$scheduler-horizontal-appointment-shadow-rtl: inset -2px 0 0 0 $scheduler-appointment-start-color !default;
$scheduler-horizontal-appointment-resizing-shadow: inset -2px 0 0 0 $scheduler-appointment-start-color, $scheduler-horizontal-appointment-shadow !default;

$scheduler-grouped-appointment-month-text-size: 12px;
$scheduler-grouped-appointment-month-text-size: 12px !default;

$scheduler-base-border: 1px solid;
$scheduler-transparent-top-border: 1px solid transparent;
$scheduler-accent-border: 1px solid;
$scheduler-base-border: 1px solid !default;
$scheduler-transparent-top-border: 1px solid transparent !default;
$scheduler-accent-border: 1px solid !default;

$scheduler-reduced-icon-offset: 5px;
$scheduler-recurrence-icon-offset: 20px;
$scheduler-reduced-icon-offset: 5px !default;
$scheduler-recurrence-icon-offset: 20px !default;

$scheduler-agenda-appointment-margin: 5px;
$scheduler-agenda-last-in-date-appointment-margin: 20px;
$scheduler-agenda-appointment-margin: 5px !default;
$scheduler-agenda-last-in-date-appointment-margin: 20px !default;

$scheduler-small-size-factor: 0.5;
$scheduler-small-size-factor: 0.5 !default;

$scheduler-small-size-element-offset: $scheduler-left-column-width * $scheduler-small-size-factor;
$scheduler-small-size-element-offset: $scheduler-left-column-width * $scheduler-small-size-factor !default;

$scheduler-time-indicator-font-size: 30px;
$scheduler-time-indicator-size: 1px;
$scheduler-time-indicator-top: 14px;
$scheduler-time-indicator-left: 12px;
$scheduler-time-indicator-font-size: 30px !default;
$scheduler-time-indicator-size: 1px !default;
$scheduler-time-indicator-top: 14px !default;
$scheduler-time-indicator-left: 12px !default;

$scheduler-time-indicator-shadow-color: rgba(255, 255, 255, 0.1);
$scheduler-time-indicator-shadow: 0 1px 0 0 $scheduler-time-indicator-shadow-color;
$scheduler-time-indicator-text-shadow: $scheduler-time-indicator-shadow-color 1px 0 0;
$scheduler-time-indicator-shadow-color: rgba(255, 255, 255, 0.1) !default;
$scheduler-time-indicator-shadow: 0 1px 0 0 $scheduler-time-indicator-shadow-color !default;
$scheduler-time-indicator-text-shadow: $scheduler-time-indicator-shadow-color 1px 0 0 !default;

@use "./appointment" with (
$scheduler-transparent-top-border: $scheduler-transparent-top-border,
Expand Down
2 changes: 1 addition & 1 deletion packages/devextreme-scss/scss/widgets/base/scheduler/layout/_header.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
$arrow-down: "\f016";
$arrow-down: "\f016" !default;

@mixin header-base(
$border,
Expand Down
Loading
Loading