From 252c91454cc191d33003b58abefd1861593ba376 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Pawe=C5=82=20Kuna?= <1282324+codecalm@users.noreply.github.com> Date: Thu, 1 Oct 2026 00:10:21 +0200 Subject: [PATCH] Shrink `tabler.js` and `tabler.css` with an ES2022 target and `//` Sass comments (#3259) --- .build/vite.config.helper.mts | 2 +- .changeset/js-build-target-es2022.md | 5 +++ .changeset/scss-doc-comments.md | 5 +++ core/scss/_props.scss | 28 ++++++++-------- core/scss/layout/_navbar.scss | 40 ++++++----------------- core/scss/mixins/_functions.scss | 30 ++++++++--------- core/scss/ui/_cards.scss | 28 ++++------------ core/scss/ui/_charts.scss | 4 +-- core/scss/ui/_forms.scss | 28 ++++------------ core/scss/ui/_legend.scss | 4 +-- core/scss/ui/_lists.scss | 8 ++--- core/scss/ui/_loaders.scss | 4 +-- core/scss/ui/_markdown.scss | 4 +-- core/scss/ui/_progress.scss | 16 +++------ core/scss/ui/_sparkline.scss | 4 +-- core/scss/ui/_tables.scss | 4 +-- core/scss/ui/_type.scss | 16 +++------ core/scss/ui/forms/_form-custom.scss | 8 ++--- core/scss/ui/forms/_form-icon.scss | 4 +-- core/scss/ui/forms/_form-imagecheck.scss | 4 +-- core/scss/ui/forms/_form-selectgroup.scss | 8 ++--- core/scss/ui/typo/_hr.scss | 8 ++--- core/scss/utils/_text.scss | 4 +-- 23 files changed, 87 insertions(+), 179 deletions(-) create mode 100644 .changeset/js-build-target-es2022.md create mode 100644 .changeset/scss-doc-comments.md diff --git a/.build/vite.config.helper.mts b/.build/vite.config.helper.mts index 7318afe68..f51464e79 100644 --- a/.build/vite.config.helper.mts +++ b/.build/vite.config.helper.mts @@ -39,7 +39,7 @@ export function createViteConfig({ entry, name, fileName, formats, outDir, banne rollupOptions: { output: rollupOutput, }, - target: 'es2015', + target: 'es2022', minify: minify, }, define: { diff --git a/.changeset/js-build-target-es2022.md b/.changeset/js-build-target-es2022.md new file mode 100644 index 000000000..52e71f2b5 --- /dev/null +++ b/.changeset/js-build-target-es2022.md @@ -0,0 +1,5 @@ +--- +"@tabler/core": patch +--- + +Updated the `tabler.js` build target from ES2015 to ES2022, making `tabler.min.js` about 1.5 kB smaller (gzip). diff --git a/.changeset/scss-doc-comments.md b/.changeset/scss-doc-comments.md new file mode 100644 index 000000000..059226bf2 --- /dev/null +++ b/.changeset/scss-doc-comments.md @@ -0,0 +1,5 @@ +--- +"@tabler/core": patch +--- + +Removed Sass doc comments from `tabler.css` and `tabler.rtl.css` by switching them to `//` comments. diff --git a/core/scss/_props.scss b/core/scss/_props.scss index 02841ac08..f92fd5b9e 100644 --- a/core/scss/_props.scss +++ b/core/scss/_props.scss @@ -3,16 +3,16 @@ :root, :host { - /** Direction multiplier for physical transforms (1 = LTR, -1 = RTL) */ + // Direction multiplier for physical transforms (1 = LTR, -1 = RTL) --dir: 1; - /** Fonts */ + // Fonts --font-monospace: #{$font-family-monospace}; --font-sans-serif: #{$font-family-sans-serif}; --font-serif: #{$font-family-serif}; --font-comic: #{$font-family-comic}; - /** Gray colors */ + // Gray colors --gray-50: #{$gray-50}; --gray-100: #{$gray-100}; --gray-200: #{$gray-200}; @@ -38,10 +38,10 @@ --dark: #{$dark}; --light: #{$light}; - /** Brand colors */ + // Brand colors --brand: #{$primary}; - /** Theme colors */ + // Theme colors @each $name, $color in map.merge($theme-colors, $social-colors) { --#{$name}: #{$color}; --#{$name}-fg: #{if(sass(contrast-ratio($color) > $min-contrast-ratio): var(--light); else: var(--dark))}; @@ -50,20 +50,20 @@ --#{$name}-200: color-mix(in oklab, var(--#{$name}) 20%, transparent); } - /** Gray colors */ + // Gray colors @each $name, $color in $gray-colors { --#{$name}-fg: var(--#{$name}); } - /** Spacers */ + // Spacers @each $name, $value in $spacers { --spacer-#{$name}: #{$value}; } - /** Icons */ + // Icons --icon-size: #{$icon-size}; - /** Font sizes */ + // Font sizes @each $name, $value in $font-weights { --font-weight-#{$name}: #{$value}; } @@ -76,13 +76,13 @@ --line-height-#{$name}: #{$value}; } - /** Shadows */ + // Shadows --shadow-color: #{$box-shadow-color}; @each $name, $value in $box-shadows { --shadow#{if(sass($name): '-#{$name}'; else: '')}: #{$value}; } - /** Border radiuses */ + // Border radiuses --border-radius-scale: 1; @each $name, $value in $border-radiuses { @if $name { @@ -92,7 +92,7 @@ } } - /** Buttons and form controls: one scale, in the names Bootstrap 6 uses */ + // Buttons and form controls: one scale, in the names Bootstrap 6 uses // scss-docs-start btn-input-css-vars --btn-input-fg: var(--body-color); --btn-input-bg: var(--bg-forms); @@ -125,7 +125,7 @@ --btn-input-xl-min-height: calc(var(--btn-input-xl-line-height) + var(--btn-input-xl-padding-y) * 2 + #{$input-btn-border-width} * 2); // scss-docs-end btn-input-css-vars - /** Checks, radios and switches: shared state colors, in the names Bootstrap 6 uses */ + // Checks, radios and switches: shared state colors, in the names Bootstrap 6 uses // scss-docs-start control-state-css-vars --control-checked-bg: #{$form-check-input-checked-bg-color}; --control-checked-border-color: #{$form-check-input-checked-border-color}; @@ -133,7 +133,7 @@ --control-disabled-opacity: #{$form-check-input-disabled-opacity}; // scss-docs-end control-state-css-vars - /** Backdrops */ + // Backdrops --backdrop-opacity: #{$backdrop-opacity}; --backdrop-bg: #{$backdrop-bg}; @each $name, $value in $backdrops { diff --git a/core/scss/layout/_navbar.scss b/core/scss/layout/_navbar.scss index 46ae231a4..3fa472faf 100644 --- a/core/scss/layout/_navbar.scss +++ b/core/scss/layout/_navbar.scss @@ -299,9 +299,7 @@ } } -/** -Navbar - */ +// Navbar .navbar { --navbar-bg: var(--bg-surface); --navbar-border-width: #{$navbar-border-width}; @@ -487,9 +485,7 @@ Navbar } } -/** -Navbar brand - */ +// Navbar brand .navbar-brand { display: inline-flex; gap: $spacer-2; @@ -509,9 +505,7 @@ Navbar brand opacity: 0.5; } -/** -Navbar toggler - */ +// Navbar toggler .navbar-toggler { position: relative; display: flex; @@ -572,17 +566,13 @@ Navbar toggler } } -/** -Navbar transparent - */ +// Navbar transparent .navbar-transparent { --navbar-border-color: transparent !important; background: transparent !important; } -/** -Navbar nav - */ +// Navbar nav .navbar-nav { --nav-link-hover-bg: #{$navbar-nav-link-hover-bg}; --nav-link-icon-color: #{$nav-link-icon-color}; @@ -598,9 +588,7 @@ Navbar nav } } -/** -Navbar side - */ +// Navbar side // The group at the end of a navbar: a row on the end side of a horizontal // navbar. In a vertical navbar the same class pins the group to the bottom // of the menu — see navbar-vertical-nav(). @@ -612,9 +600,7 @@ Navbar side margin: 0; } -/** -Navbar sticky - */ +// Navbar sticky // Runtime route only (data-bs-navbar="sticky" on ); static markup wraps // the navbar in its own .sticky-top. Just the top bar sticks — on the two-row // navbar the menu row scrolls away, so the sticky strip stays one row high. @@ -624,9 +610,7 @@ html[data-bs-navbar='sticky'] .page > .navbar:not(.navbar-vertical) { z-index: $zindex-sticky; } -/** -Navbar primary - */ +// Navbar primary // Runtime route only (data-bs-navbar-theme="primary" on ): the primary // color as the navbar surface. The text palette comes from the dark color // mode, which _extends.scss applies to the same selector; static markup gets @@ -642,9 +626,7 @@ html[data-bs-navbar-theme='primary'] .page > [class*='navbar-expand'] .navbar { --navbar-border-color: transparent; } -/** -Navbar vertical - */ +// Navbar vertical @if $enable-navbar-vertical { // Folded sidebar: every geometry consumer (aside width, page paddings, // page-wrapper/navbar margins) reads --sidebar-width, so flipping this one @@ -878,9 +860,7 @@ Navbar vertical } } -/** -Navbar floating - */ +// Navbar floating // The navbar keeps a gap from the edges around it, like .offcanvas-floating, // with an outline on every side instead of the single border line. // diff --git a/core/scss/mixins/_functions.scss b/core/scss/mixins/_functions.scss index 2a48ec044..cccd101e4 100644 --- a/core/scss/mixins/_functions.scss +++ b/core/scss/mixins/_functions.scss @@ -40,12 +40,10 @@ @return oklch(from #{$color} calc(l #{$sign} #{math.abs($delta)}) c h); } -/** - * Converts a given value to a percentage string. - * - * @param {Number} $value - The value to be converted to a percentage. - * @return {String} - The percentage representation of the value. - */ +// Converts a given value to a percentage string. +// +// @param {Number} $value - The value to be converted to a percentage. +// @return {String} - The percentage representation of the value. @function to-percentage($value) { @if meta.type-of($value) == number and math.is-unitless($value) { @return math.percentage($value); @@ -53,17 +51,15 @@ @return $value; } -/** - * Generates a transparent version of the given color. - * - * @param {Color} $color - The base color to be made transparent. - * @param {Number} $alpha - The level of transparency, ranging from 0 (fully transparent) to 1 (fully opaque). Default is 1. - * @return {Color} - The resulting color with the specified transparency. - * - * Mixes in `oklab` so tints against an opaque background (e.g. alert backgrounds - * over `--bg-surface`) stay perceptually even; mixing with `transparent` gives - * the same result in every color space. - */ +// Generates a transparent version of the given color. +// +// @param {Color} $color - The base color to be made transparent. +// @param {Number} $alpha - The level of transparency, ranging from 0 (fully transparent) to 1 (fully opaque). Default is 1. +// @return {Color} - The resulting color with the specified transparency. +// +// Mixes in `oklab` so tints against an opaque background (e.g. alert backgrounds +// over `--bg-surface`) stay perceptually even; mixing with `transparent` gives +// the same result in every color space. @function color-transparent($color, $alpha: 1, $background: transparent) { @if $alpha == 1 or $alpha == 100% { @return $color; diff --git a/core/scss/ui/_cards.scss b/core/scss/ui/_cards.scss index 81d57598c..03d9bd72a 100644 --- a/core/scss/ui/_cards.scss +++ b/core/scss/ui/_cards.scss @@ -160,9 +160,7 @@ } } -/** -Stacked card - */ +// Stacked card .card-stacked { --card-stacked-offset: #{$card-stacked-offset}; position: relative; @@ -418,9 +416,7 @@ Stacked card overflow: auto; } -/** -Card optinos - */ +// Card optinos .card-options { --card-options-top: #{$card-options-top}; --card-options-inset: #{$card-options-inset}; @@ -437,9 +433,7 @@ Card optinos color: var(--secondary); } -/** -Card status - */ +// Card status .card-status-top, .card-status-start, .card-status-bottom { @@ -467,9 +461,7 @@ Card status mask-image: linear-gradient(to top, #000 var(--card-status-size), transparent var(--card-status-size)); } -/** -Card table - */ +// Card table .card-table { margin-bottom: 0 !important; @@ -584,9 +576,7 @@ Card chart height: var(--card-avatar-height); } -/** -Card avatar - */ +// Card avatar .card-avatar { --card-avatar-ring-width: #{$card-avatar-ring-width}; margin-inline-start: auto; @@ -709,17 +699,13 @@ Card list group } } -/** -Card note -*/ +// Card note .card-note { --card-bg: #{mix-color-css(var(--yellow), var(--bg-surface), 12%)}; --card-border-color: #{mix-color-css(var(--yellow), var(--bg-surface), 20%)}; } -/** -Card gradient -*/ +// Card gradient // Split out so scss/tests/_cards.test.scss can assert on it directly — a bare // top-level ruleset like .card-gradient can't be @include-d or otherwise // referenced in isolation by sass-true. diff --git a/core/scss/ui/_charts.scss b/core/scss/ui/_charts.scss index e005a3a8b..b92b6fc73 100644 --- a/core/scss/ui/_charts.scss +++ b/core/scss/ui/_charts.scss @@ -29,9 +29,7 @@ height: var(--chart-height-square); } -/** -Chart sparkline - */ +// Chart sparkline .chart-sparkline { --chart-sparkline-width: #{$chart-sparkline-width}; --chart-sparkline-height: #{$chart-sparkline-height}; diff --git a/core/scss/ui/_forms.scss b/core/scss/ui/_forms.scss index 5d5e9ef00..61193f6f4 100644 --- a/core/scss/ui/_forms.scss +++ b/core/scss/ui/_forms.scss @@ -7,9 +7,7 @@ textarea { } } -/** -Form label - */ +// Form label .col-form-label, .form-label { --form-label-required-gap: #{$form-label-required-gap}; @@ -32,18 +30,14 @@ Form label color: $form-secondary-color; } -/** -Form select - */ +// Form select .form-select { &:-moz-focusring { color: var(--body-color); } } -/** -Form control - */ +// Form control .form-control { &:-webkit-autofill { color: var(--body-color); @@ -117,9 +111,7 @@ fieldset:empty { display: none; } -/** -Form help - */ +// Form help .form-help { --form-help-size: #{$form-help-size}; --form-help-font-size: #{$form-help-font-size}; @@ -150,9 +142,7 @@ Form help } } -/** -Input group - */ +// Input group .input-group { box-shadow: $input-box-shadow; @include border-radius(var(--input-group-addon-border-radius)); @@ -235,17 +225,13 @@ Input group } } -/** -Upload files - */ +// Upload files .form-file-button { margin-inline-start: 0; border-inline-start: 0; } -/** -Forms on mobile devices - */ +// Forms on mobile devices .form-control, .form-select { --form-control-mobile-font-size: #{$form-control-mobile-font-size}; diff --git a/core/scss/ui/_legend.scss b/core/scss/ui/_legend.scss index cb58e2907..46c82da06 100644 --- a/core/scss/ui/_legend.scss +++ b/core/scss/ui/_legend.scss @@ -1,6 +1,4 @@ -/** -Legend - */ +// Legend @use 'sass:map'; @use '../config' as *; diff --git a/core/scss/ui/_lists.scss b/core/scss/ui/_lists.scss index f96d636d0..5e0ab44db 100644 --- a/core/scss/ui/_lists.scss +++ b/core/scss/ui/_lists.scss @@ -96,18 +96,14 @@ } } -/** -Seprated list -*/ +// Seprated list .list-separated { display: flex; flex-direction: column; gap: $spacer; } -/** -Inline list - */ +// Inline list .list-inline { margin: 0; } diff --git a/core/scss/ui/_loaders.scss b/core/scss/ui/_loaders.scss index e3a8b528e..88c9c9cd1 100644 --- a/core/scss/ui/_loaders.scss +++ b/core/scss/ui/_loaders.scss @@ -26,9 +26,7 @@ } } -/** -Dimmer -*/ +// Dimmer .dimmer { position: relative; diff --git a/core/scss/ui/_markdown.scss b/core/scss/ui/_markdown.scss index f1eff867b..88a6755e6 100644 --- a/core/scss/ui/_markdown.scss +++ b/core/scss/ui/_markdown.scss @@ -3,9 +3,7 @@ $markdown-font-size: var(--font-size-h3) !default; $markdown-line-height: var(--line-height-lg) !default; -/** -Prose (formerly markdown) - */ +// Prose (formerly markdown) .prose, .markdown { --markdown-heading-margin-top: #{$markdown-heading-margin-top}; diff --git a/core/scss/ui/_progress.scss b/core/scss/ui/_progress.scss index 0ad899dab..20e03867f 100644 --- a/core/scss/ui/_progress.scss +++ b/core/scss/ui/_progress.scss @@ -13,9 +13,7 @@ } } -/** -Progress - */ +// Progress .progress { position: relative; width: 100%; @@ -52,9 +50,7 @@ Progress --progress-height: #{$progress-height-xl}; } -/** -Progress bar - */ +// Progress bar .progress-bar { height: 100%; @include transition(width $transition-time, background $transition-time); @@ -86,9 +82,7 @@ Progress bar } } -/** -Progressbg - */ +// Progressbg .progressbg { --progressbg-padding-y: #{$progressbg-padding-y}; --progressbg-padding-x: #{$progressbg-padding-x}; @@ -124,9 +118,7 @@ Progressbg font-weight: var(--font-weight-medium); } -/** -Progress steps - */ +// Progress steps .progress-steps { // scss-docs-start progress-steps-css-vars --progress-steps-gap: #{$progress-steps-gap}; diff --git a/core/scss/ui/_sparkline.scss b/core/scss/ui/_sparkline.scss index e420e685f..7bc93cc23 100644 --- a/core/scss/ui/_sparkline.scss +++ b/core/scss/ui/_sparkline.scss @@ -1,6 +1,4 @@ -/** -Sparkline (inline SVG, rendered by js/src/sparkline.ts) - */ +// Sparkline (inline SVG, rendered by js/src/sparkline.ts) @use 'sass:map'; @use '../config' as *; diff --git a/core/scss/ui/_tables.scss b/core/scss/ui/_tables.scss index 033647306..9e2e7e721 100644 --- a/core/scss/ui/_tables.scss +++ b/core/scss/ui/_tables.scss @@ -112,9 +112,7 @@ } } -/** -Table sort - */ +// Table sort .table-sort { --table-sort-icon-size: #{$table-sort-icon-size}; --table-sort-icon-margin-start: #{$table-sort-icon-margin-start}; diff --git a/core/scss/ui/_type.scss b/core/scss/ui/_type.scss index 966f6f7e1..449aaee36 100644 --- a/core/scss/ui/_type.scss +++ b/core/scss/ui/_type.scss @@ -184,9 +184,7 @@ img { margin-inline-start: 0; } -/** -Selection - */ +// Selection ::selection, .text-selected { background-color: $selection-bg; @@ -196,9 +194,7 @@ Selection display: inline-block; } -/** -Links - */ +// Links [class^='link-'], [class*=' link-'] { &.disabled { @@ -222,16 +218,12 @@ a:hover:has(.icon) { } } -/** -Subheader - */ +// Subheader .subheader { @include subheader(); } -/** -Mentions - */ +// Mentions .mention { display: inline-block; padding: calc(2em / 12) calc(8em / 12); diff --git a/core/scss/ui/forms/_form-custom.scss b/core/scss/ui/forms/_form-custom.scss index 5b72608f7..6e1b2542b 100644 --- a/core/scss/ui/forms/_form-custom.scss +++ b/core/scss/ui/forms/_form-custom.scss @@ -1,6 +1,4 @@ -/** -Bootstrap color input - */ +// Bootstrap color input @use '../../config' as *; .form-control-color { @@ -9,9 +7,7 @@ Bootstrap color input } } -/** -Remove the cancel buttons in Chrome and Safari on macOS. - */ +// Remove the cancel buttons in Chrome and Safari on macOS. [type='search']::-webkit-search-cancel-button { appearance: none; } diff --git a/core/scss/ui/forms/_form-icon.scss b/core/scss/ui/forms/_form-icon.scss index e23878096..2e3b758b4 100644 --- a/core/scss/ui/forms/_form-icon.scss +++ b/core/scss/ui/forms/_form-icon.scss @@ -1,6 +1,4 @@ -/** -Icon input - */ +// Icon input @use '../../config' as *; .input-icon { diff --git a/core/scss/ui/forms/_form-imagecheck.scss b/core/scss/ui/forms/_form-imagecheck.scss index 356b47743..4ce0e44fb 100644 --- a/core/scss/ui/forms/_form-imagecheck.scss +++ b/core/scss/ui/forms/_form-imagecheck.scss @@ -1,6 +1,4 @@ -/** -Image check - */ +// Image check @use '../../config' as *; .form-imagecheck { diff --git a/core/scss/ui/forms/_form-selectgroup.scss b/core/scss/ui/forms/_form-selectgroup.scss index 9a7024ef9..59fa02ebb 100644 --- a/core/scss/ui/forms/_form-selectgroup.scss +++ b/core/scss/ui/forms/_form-selectgroup.scss @@ -113,9 +113,7 @@ Select group @include focus-ring(true); } -/** -Alternate version of form select group - */ +// Alternate version of form select group .form-selectgroup-boxes { .form-selectgroup-label { padding: $card-spacer-y $card-spacer-x; @@ -138,9 +136,7 @@ Alternate version of form select group } } -/** -Select group - */ +// Select group .form-selectgroup-pills { flex-wrap: wrap; align-items: start; diff --git a/core/scss/ui/typo/_hr.scss b/core/scss/ui/typo/_hr.scss index 7ce983756..072e1a0c6 100644 --- a/core/scss/ui/typo/_hr.scss +++ b/core/scss/ui/typo/_hr.scss @@ -1,15 +1,11 @@ -/** -Horizontal rules - */ +// Horizontal rules @use '../../config' as *; // The `.hr` helper lives in `_extends.scss` — it extends the `hr` element // selector across all modules, which with the module system requires the // whole core to be upstream. -/** -Hr text - */ +// Hr text .hr-text { --hr-text-gap: #{$hr-text-gap}; display: flex; diff --git a/core/scss/utils/_text.scss b/core/scss/utils/_text.scss index cca3bbb3d..3f4a3a80e 100644 --- a/core/scss/utils/_text.scss +++ b/core/scss/utils/_text.scss @@ -1,8 +1,6 @@ // stylelint-disable declaration-no-important -/** -Antialiasing - */ +// Antialiasing @use '../config' as *; .antialiased {