Add postcss-discard-comments plugin and update SRI hash for RTL CSS

core/.build/postcss.config.mjs

@@ -9,7 +9,10 @@ export default context => {
 			autoprefixer: {
 				cascade: false
 			},
-			rtlcss: context.env === 'RTL'
+			rtlcss: context.env === 'RTL',
+			'postcss-discard-comments': {
+				removeAll: true
+			},
 		}
 	}
 }

core/package.json

@@ -146,7 +146,8 @@
   },
   "dependencies": {
     "@popperjs/core": "^2.11.8",
-    "bootstrap": "5.3.7"
+    "bootstrap": "5.3.7",
+    "postcss-discard-comments": "^7.0.4"
   },
   "devDependencies": {
     "@hotwired/turbo": "^8.0.13",

core/scss/_bootstrap-config.scss

@@ -1,5 +1,7 @@
 // Config
 @import "bootstrap/scss/functions";
+@import "bootstrap-functions";
+
 @import "bootstrap/scss/variables";
 @import "bootstrap/scss/variables-dark";
 @import "bootstrap/scss/maps";

core/scss/_bootstrap-functions.scss

@@ -0,0 +1,258 @@
+@use "sass:color";
+@use "sass:map";
+@use "sass:math";
+@use "sass:meta";
+@use "sass:string";
+@use "sass:list";
+
+/**
+ * Converts a color value to RGB format
+ * 
+ * @param {Color} $value - The color value to convert
+ * @return {List} - RGB values as a list (red, green, blue)
+ * 
+ * @example
+ *   to-rgb(#ff0000) // Returns: (255, 0, 0)
+ */
+@function to-rgb($value) {
+  @return color.channel($value, "red", $space: rgb), color.channel($value, "green", $space: rgb), color.channel($value, "blue", $space: rgb);
+}
+
+/**
+ * Creates an opaque color by mixing a foreground color with a background color
+ * 
+ * @param {Color} $background - The background color
+ * @param {Color} $foreground - The foreground color to make opaque
+ * @return {Color} - The resulting opaque color
+ * 
+ * @example
+ *   opaque(#ffffff, rgba(255, 0, 0, 0.5)) // Returns solid red color
+ */
+@function opaque($background, $foreground) {
+  @return color.mix(rgba($foreground, 1), $background, opacity($foreground) * 100%);
+}
+
+/**
+ * Adjusts a color channel value for luminance calculation
+ * 
+ * @param {Number} $channel - The color channel value (0-1)
+ * @return {Number} - The adjusted channel value
+ * 
+ * @example
+ *   adjust(0.5) // Returns adjusted value for luminance calculation
+ */
+@function adjust($channel) {
+  @return if($channel < 0.03928, math.div($channel, 12.92), pow(($channel + 0.055) / 1.055, 2.4));
+}
+
+/**
+ * Calculates the relative luminance of a color using WCAG formula
+ * 
+ * @param {Color} $color - The color to calculate luminance for
+ * @return {Number} - The luminance value (0-1)
+ * 
+ * @example
+ *   luminance(#ffffff) // Returns: 1
+ *   luminance(#000000) // Returns: 0
+ */
+@function luminance($color) {
+  $r: math.div(color.channel($color, "red", $space: rgb), 255);
+  $g: math.div(color.channel($color, "green", $space: rgb), 255);
+  $b: math.div(color.channel($color, "blue", $space: rgb), 255);
+
+  $r: adjust($r);
+  $g: adjust($g);
+  $b: adjust($b);
+
+  @return 0.2126 * $r + 0.7152 * $g + 0.0722 * $b;
+}
+
+/**
+ * Determines the best contrasting color for a given background
+ * 
+ * @param {Color} $background - The background color
+ * @param {Color} $light - The light color option (default: #ffffff)
+ * @param {Color} $dark - The dark color option (default: #000000)
+ * @return {Color} - The contrasting color (light or dark)
+ * 
+ * @example
+ *   color-contrast(#000000) // Returns: #ffffff
+ *   color-contrast(#ffffff) // Returns: #000000
+ */
+@function color-contrast($background, $light: #ffffff, $dark: #000000) {
+  // Get relative luminance using WCAG formula
+
+  $bg-luminance: luminance($background);
+
+  // If background is dark, return light color, otherwise dark
+  @return if($bg-luminance > 0.179, $dark, $light);
+}
+
+/**
+ * Adds two values together, handling different data types
+ * 
+ * @param {*} $value1 - First value to add
+ * @param {*} $value2 - Second value to add
+ * @param {Boolean} $return-calc - Whether to return calc() function (default: true)
+ * @return {*} - The result of addition or calc() expression
+ * 
+ * @example
+ *   add(10px, 5px) // Returns: 15px
+ *   add(10px, 5px, false) // Returns: 10px + 5px
+ */
+@function add($value1, $value2, $return-calc: true) {
+  @if $value1 == null {
+    @return $value2;
+  }
+
+  @if $value2 == null {
+    @return $value1;
+  }
+
+  @if meta.type-of($value1) == number and meta.type-of($value2) == number and math.compatible($value1, $value2) {
+    @return $value1 + $value2;
+  }
+
+  @return if($return-calc == true, calc(#{$value1} + #{$value2}), $value1 + string.unquote(" + ") + $value2);
+}
+
+/**
+ * Subtracts the second value from the first value
+ * 
+ * @param {*} $value1 - The value to subtract from
+ * @param {*} $value2 - The value to subtract
+ * @param {Boolean} $return-calc - Whether to return calc() function (default: true)
+ * @return {*} - The result of subtraction or calc() expression
+ * 
+ * @example
+ *   subtract(10px, 5px) // Returns: 5px
+ *   subtract(10px, 5px, false) // Returns: 10px - 5px
+ */
+@function subtract($value1, $value2, $return-calc: true) {
+  @if $value1 == null and $value2 == null {
+    @return null;
+  }
+
+  @if $value1 == null {
+    @return -$value2;
+  }
+
+  @if $value2 == null {
+    @return $value1;
+  }
+
+  @if meta.type-of($value1) == number and meta.type-of($value2) == number and math.compatible($value1, $value2) {
+    @return $value1 - $value2;
+  }
+
+  @if meta.type-of($value2) != number {
+    $value2: string.unquote("(") + $value2 + string.unquote(")");
+  }
+
+  @return if($return-calc == true, calc(#{$value1} - #{$value2}), $value1 + unquote(" - ") + $value2);
+}
+
+/**
+ * Divides the dividend by the divisor with specified precision
+ * 
+ * @param {Number} $dividend - The number to be divided
+ * @param {Number} $divisor - The number to divide by
+ * @param {Number} $precision - The number of decimal places (default: 10)
+ * @return {Number} - The result of division
+ * 
+ * @example
+ *   divide(10, 2) // Returns: 5
+ *   divide(10px, 2) // Returns: 5px
+ *   divide(10, 3) // Returns: 3.3333333333
+ */
+@function divide($dividend, $divisor, $precision: 10) {
+  $sign: if($dividend > 0 and $divisor > 0 or $dividend < 0 and $divisor < 0, 1, -1);
+  $dividend: abs($dividend);
+  $divisor: abs($divisor);
+  @if $dividend == 0 {
+    @return 0;
+  }
+  @if $divisor == 0 {
+    @error "Cannot divide by 0";
+  }
+  $remainder: $dividend;
+  $result: 0;
+  $factor: 10;
+  @while ($remainder > 0 and $precision >= 0) {
+    $quotient: 0;
+    @while ($remainder >= $divisor) {
+      $remainder: $remainder - $divisor;
+      $quotient: $quotient + 1;
+    }
+    $result: $result * 10 + $quotient;
+    $factor: $factor * 0.1;
+    $remainder: $remainder * 10;
+    $precision: $precision - 1;
+    @if ($precision < 0 and $remainder >= $divisor * 5) {
+      $result: $result + 1;
+    }
+  }
+  $result: $result * $factor * $sign;
+  $dividend-unit: math.unit($dividend);
+  $divisor-unit: math.unit($divisor);
+  $unit-map: (
+    "px": 1px,
+    "rem": 1rem,
+    "em": 1em,
+    "%": 1%,
+  );
+  @if ($dividend-unit != $divisor-unit and map.has-key($unit-map, $dividend-unit)) {
+    $result: $result * map.get($unit-map, $dividend-unit);
+  }
+  @return $result;
+}
+
+/**
+ * Replaces all occurrences of a search string with a replace string
+ * 
+ * @param {String} $string - The string to search in
+ * @param {String} $search - The string to search for
+ * @param {String} $replace - The string to replace with (default: "")
+ * @return {String} - The string with replacements made
+ * 
+ * @example
+ *   str-replace("hello world", "world", "universe") // Returns: "hello universe"
+ *   str-replace("hello world", "o") // Returns: "hell wrld"
+ */
+@function str-replace($string, $search, $replace: "") {
+  $index: string.index($string, $search);
+
+  @if $index {
+    @return string.slice($string, 1, $index - 1) + $replace + str-replace(string.slice($string, $index + string.length($search)), $search, $replace);
+  }
+
+  @return $string;
+}
+
+/**
+ * Applies a function to each key-value pair in a map
+ * 
+ * @param {Map} $map - The map to iterate over
+ * @param {String} $func - The name of the function to apply
+ * @param {*} $args... - Additional arguments to pass to the function
+ * @return {Map} - A new map with the function applied to each value
+ * 
+ * @example
+ *   $colors: (primary: #007bff, secondary: #6c757d);
+ *   map-loop($colors, darken, 10%) // Returns map with darkened colors
+ */
+@function map-loop($map, $func, $args...) {
+  $_map: ();
+
+  @each $key, $value in $map {
+    // allow to pass the $key and $value of the map as an function argument
+    $_args: ();
+    @each $arg in $args {
+      $_args: list.append($_args, if($arg == "$key", $key, if($arg == "$value", $value, $arg)));
+    }
+
+    $_map: map.merge($_map, ($key: meta.call(meta.get-function($func), $_args...)));
+  }
+
+  @return $_map;
+}

core/scss/_bootstrap-override.scss

@@ -70,9 +70,4 @@
   // Override bootstrap core
 }
 
-//
+
-// TODO: remove when https://github.com/twbs/bootstrap/pull/37425/ will be released
-//
-@function opaque($background, $foreground) {
-  @return mix(rgba($foreground, 1), $background, opacity($foreground) * 100%);
-}

core/scss/_config.scss

@@ -1,4 +1,5 @@
 @import "bootstrap/scss/functions";
+@import "bootstrap-functions";
 
 @import "mixins";
 @import "variables";

core/scss/_props.scss

@@ -1,3 +1,4 @@
+@use "sass:map";
 @import "config";
 
 :root,
@@ -30,7 +31,7 @@
   --#{$prefix}brand: #{$primary};
 
   /** Theme colors */
-  @each $name, $color in map-merge($theme-colors, $social-colors) {
+  @each $name, $color in map.merge($theme-colors, $social-colors) {
     --#{$prefix}#{$name}: #{$color};
     --#{$prefix}#{$name}-rgb: #{to-rgb($color)};
     --#{$prefix}#{$name}-fg: #{if(contrast-ratio($color) > $min-contrast-ratio, var(--#{$prefix}light), var(--#{$prefix}dark))};

core/scss/_utilities-marketing.scss

@@ -1,6 +1,8 @@
+@use "sass:map";
+
 $negative-spacers-extra: if(
   $enable-negative-margins,
-  negativify-map(map-merge($spacers, $spacers-extra)),
+  negativify-map(map.merge($spacers, $spacers-extra)),
   null
 );
 

core/scss/_variables.scss

@@ -1,3 +1,8 @@
+@use "sass:string";
+@use "sass:color";
+@use "sass:map";
+@use "sass:math";
+
 $prefix: "tblr-" !default;
 
 // BASE CONFIG
@@ -23,8 +28,8 @@ $font-google-monospaced: null !default;
 $font-local: null !default;
 $font-icons: () !default;
 
-$font-family-sans-serif: unquote("#{if($font-local, "#{$font-local}, ", ' ')}#{if($font-google, "#{$font-google}, ", ' ')}") 'Inter Var', Inter, -apple-system, BlinkMacSystemFont, San Francisco, Segoe UI, Roboto, Helvetica Neue, sans-serif !default;
+$font-family-sans-serif: string.unquote("#{if($font-local, "#{$font-local}, ", ' ')}#{if($font-google, "#{$font-google}, ", ' ')}") 'Inter Var', Inter, -apple-system, BlinkMacSystemFont, San Francisco, Segoe UI, Roboto, Helvetica Neue, sans-serif !default;
-$font-family-monospace: unquote("#{if($font-google-monospaced, "#{$font-google-monospaced}, ", '')}") Monaco, Consolas, Liberation Mono, Courier New, monospace !default;
+$font-family-monospace: string.unquote("#{if($font-google-monospaced, "#{$font-google-monospaced}, ", '')}") Monaco, Consolas, Liberation Mono, Courier New, monospace !default;
 $font-family-serif: "Georgia", "Times New Roman", times, serif !default;
 $font-family-comic: "Comic Sans MS", "Comic Sans", "Chalkboard SE", "Comic Neue", sans-serif, cursive !default;
 
@@ -200,7 +205,7 @@ $border-color-translucent: rgba(4, 32, 69, 0.1);
 $border-dark-color: $gray-400 !default;
 $border-dark-color-translucent: rgba(4, 32, 69, 0.27);
 
-$border-active-color: mix($text-secondary, #ffffff, percentage($border-active-opacity)) !default;
+$border-active-color: color.mix($text-secondary, #ffffff, math.percentage($border-active-opacity)) !default;
 $border-active-color-translucent: rgba($text-secondary, $border-active-opacity) !default;
 
 $active-bg: rgba(var(--#{$prefix}primary-rgb), 0.04) !default;
@@ -282,7 +287,7 @@ $gray-colors: (
   gray-950: $gray-950,
 ) !default;
 
-$theme-colors: map-merge($theme-colors, map-merge($extra-colors, ()));
+$theme-colors: map.merge($theme-colors, map.merge($extra-colors, ()));
 
 // BACKDROPS
 $backdrop-opacity: 24% !default;
@@ -477,7 +482,7 @@ $size-spacers: (
   full: 100%,
 ) !default;
 
-$size-values: map-merge(
+$size-values: map.merge(
   $spacers,
   (
     25: 25%,

core/scss/mixins/_functions.scss

@@ -1,24 +1,46 @@
+@use "sass:math";
+
+/**
+ * Creates a lighter version of a theme color by mixing it with a background color
+ * 
+ * @param {Color} $color - The base color to lighten
+ * @param {Color} $background - The background color to mix with (default: #fff)
+ * @return {Color} - The lighter version of the color (10% mix)
+ * 
+ * @example
+ *   theme-color-lighter(#007bff) // Returns lighter blue
+ *   theme-color-lighter(#dc3545, #f8f9fa) // Returns lighter red mixed with light gray
+ */
 @function theme-color-lighter($color, $background: #fff) {
   @return mix($color, $background, 10%);
 }
 
+/**
+ * Creates a darker version of a theme color by shading it
+ * 
+ * @param {Color} $color - The base color to darken
+ * @return {Color} - The darker version of the color (10% shade)
+ * 
+ * @example
+ *   theme-color-darker(#007bff) // Returns darker blue
+ *   theme-color-darker(#28a745) // Returns darker green
+ */
 @function theme-color-darker($color) {
   @return shade-color($color, 10%);
 }
 
-//
+/**
-// Replace all occurrences of a substring within a string.
+ * Media query mixin for breakpoints smaller than the specified breakpoint
-//
+ * 
-@function str-replace($string, $search, $replace: "") {
+ * @param {String} $name - The breakpoint name to target
-  $index: str-index($string, $search);
+ * @param {Map} $breakpoints - The breakpoints map (default: $grid-breakpoints)
-
+ * @content - The CSS content to apply within the media query
-  @if $index {
+ * 
-    @return str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
+ * @example
-  }
+ *   @include media-breakpoint-down-than(lg) {
-
+ *     .container { max-width: 100%; }
-  @return $string;
+ *   }
-}
+ */
-
 @mixin media-breakpoint-down-than($name, $breakpoints: $grid-breakpoints) {
   $prev: breakpoint-prev($name);
 
@@ -37,6 +59,19 @@
   }
 }
 
+/**
+ * Gets the previous breakpoint name in the breakpoints map
+ * 
+ * @param {String} $name - The current breakpoint name
+ * @param {Map} $breakpoints - The breakpoints map (default: $grid-breakpoints)
+ * @param {List} $breakpoint-names - List of breakpoint names (default: map-keys($breakpoints))
+ * @return {String|null} - The previous breakpoint name or null if none exists
+ * 
+ * @example
+ *   breakpoint-prev(lg) // Returns: md
+ *   breakpoint-prev(sm) // Returns: xs
+ *   breakpoint-prev(xs) // Returns: null
+ */
 @function breakpoint-prev($name, $breakpoints: $grid-breakpoints, $breakpoint-names: map-keys($breakpoints)) {
   $n: index($breakpoint-names, $name);
   @if not $n {
@@ -45,9 +80,15 @@
   @return if($n > 1, nth($breakpoint-names, $n - 1), null);
 }
 
-//
+/**
-// Escape SVG strings.
+ * Escapes special characters in SVG strings for use in CSS
-//
+ * 
+ * @param {String} $string - The SVG string to escape
+ * @return {String} - The escaped SVG string
+ * 
+ * @example
+ *   escape-svg("data:image/svg+xml,<svg>...</svg>") // Returns escaped SVG
+ */
 @function escape-svg($string) {
   @if str-index($string, "data:image/svg+xml") {
     @each $char, $encoded in $escaped-characters {
@@ -68,9 +109,13 @@
  *
  * @param {Number} $value - The value to be converted to a percentage.
  * @return {String} - The percentage representation of the value.
+ * 
+ * @example
+ *   to-percentage(0.5) // Returns: 50%
+ *   to-percentage(0.25) // Returns: 25%
  */
 @function to-percentage($value) {
-  @return if(unitless($value), percentage($value), $value);
+  @return if(math.is-unitless($value), math.percentage($value), $value);
 }
 
 /**
@@ -78,7 +123,12 @@
  *
  * @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.
+ * @param {Color} $background - The background color to mix with (default: transparent)
  * @return {Color} - The resulting color with the specified transparency.
+ * 
+ * @example
+ *   color-transparent(#007bff, 0.5) // Returns semi-transparent blue
+ *   color-transparent(#dc3545, 0.8) // Returns mostly opaque red
  */
 @function color-transparent($color, $alpha: 1, $background: transparent) {
   @if $alpha == 1 {
@@ -88,9 +138,18 @@
   }
 }
 
+/**
+ * Converts an SVG string to a data URL format for use in CSS
+ * 
+ * @param {String} $svg - The SVG markup to convert
+ * @return {String} - The data URL formatted SVG
+ * 
+ * @example
+ *   url-svg('<svg>...</svg>') // Returns: url('data:image/svg+xml;charset=UTF-8,...')
+ */
 @function url-svg($svg) {
   $svg: str-replace($svg, '#', '%23');
   $svg: str-replace($svg, '<svg', '<svg xmlns="http://www.w3.org/2000/svg"');
 
   @return url('data:image/svg+xml;charset=UTF-8,#{$svg}');
-}
+}

core/scss/ui/_buttons.scss

@@ -1,4 +1,5 @@
 @use "sass:color";
+@use "sass:map";
 
 //
 // Button
@@ -76,7 +77,7 @@
 //
 // Button color variations
 //
-@each $color, $value in map-merge($theme-colors, $social-colors) {
+@each $color, $value in map.merge($theme-colors, $social-colors) {
   .btn-#{$color} {
     @if $color == "dark" {
       --#{$prefix}btn-border-color: var(--#{$prefix}dark-mode-border-color);

core/scss/ui/_grid.scss

@@ -1,3 +1,5 @@
+@use "sass:map";
+
 .row > * {
   min-width: 0;
 }
@@ -54,7 +56,7 @@
   }
 }
 
-@each $name, $size in map-merge((null: $spacer), $spacers) {
+@each $name, $size in map.merge((null: $spacer), $spacers) {
   $name-prefixed: if($name == null, null, '-#{$name}');
 
   .space-y#{$name-prefixed} {
@@ -69,7 +71,7 @@
   }
 }
 
-@each $name, $size in map-merge((null: $spacer), $spacers) {
+@each $name, $size in map.merge((null: $spacer), $spacers) {
   $name-prefixed: if($name == null, null, '-#{$name}');
 
   .divide-y#{$name-prefixed} {

core/scss/ui/_images.scss

@@ -1,5 +1,7 @@
+@use "sass:math";
+
 .img-responsive {
-  --#{$prefix}img-responsive-ratio: #{percentage(.75)};
+  --#{$prefix}img-responsive-ratio: #{math.percentage(.75)};
   background: no-repeat center/cover;
   padding-top: var(--#{$prefix}img-responsive-ratio);
 }

core/scss/utils/_colors.scss

@@ -1,5 +1,7 @@
+@use "sass:map";
+
 // All colors
-@each $color, $value in map-merge($theme-colors, ( white: $white)) {
+@each $color, $value in map.merge($theme-colors, ( white: $white)) {
   .bg-#{"" + $color} {
     background-color: color-mix(in srgb, var(--#{$prefix}#{$color}) calc(var(--#{$prefix}bg-opacity, 1) * 100%), transparent) !important;
   }

pnpm-lock.yaml

@@ -108,6 +108,9 @@ importers:
       bootstrap:
         specifier: 5.3.7
         version: 5.3.7(@popperjs/core@2.11.8)
+      postcss-discard-comments:
+        specifier: ^7.0.4
+        version: 7.0.4(postcss@8.5.6)
     devDependencies:
       '@hotwired/turbo':
         specifier: ^8.0.13
@@ -1358,6 +1361,11 @@ packages:
     resolution: {integrity: sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA==}
     engines: {node: '>= 8'}
 
+  cssesc@3.0.0:
+    resolution: {integrity: sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==}
+    engines: {node: '>=4'}
+    hasBin: true
+
   custom-event-polyfill@1.0.7:
     resolution: {integrity: sha512-TDDkd5DkaZxZFM8p+1I3yAlvM3rSr1wbrOliG4yJiwinMZN8z/iGL7BTlDkrJcYTmgUSb4ywVCc3ZaUtOtC76w==}
 
@@ -2455,6 +2463,12 @@ packages:
     peerDependencies:
       postcss: ^8.0.0
 
+  postcss-discard-comments@7.0.4:
+    resolution: {integrity: sha512-6tCUoql/ipWwKtVP/xYiFf1U9QgJ0PUvxN7pTcsQ8Ns3Fnwq1pU5D5s1MhT/XySeLq6GXNvn37U46Ded0TckWg==}
+    engines: {node: ^18.12.0 || ^20.9.0 || >=22.0}
+    peerDependencies:
+      postcss: ^8.4.32
+
   postcss-load-config@5.1.0:
     resolution: {integrity: sha512-G5AJ+IX0aD0dygOE0yFZQ/huFFMSNneyfp0e3/bT05a8OfPC5FUoZRPfGijUdGOJNMewJiwzcHJXFafFzeKFVA==}
     engines: {node: '>= 18'}
@@ -2476,6 +2490,10 @@ packages:
     peerDependencies:
       postcss: ^8.1.0
 
+  postcss-selector-parser@7.1.0:
+    resolution: {integrity: sha512-8sLjZwK0R+JlxlYcTuVnyT2v+htpdrjDOKuMcOVdYjt52Lh8hWRYpxBPoKx/Zg+bcjc3wx6fmQevMmUztS/ccA==}
+    engines: {node: '>=4'}
+
   postcss-value-parser@4.2.0:
     resolution: {integrity: sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==}
 
@@ -3069,6 +3087,9 @@ packages:
   urlpattern-polyfill@10.0.0:
     resolution: {integrity: sha512-H/A06tKD7sS1O1X2SshBVeA5FLycRpjqiBeqGKmBwBDBy28EnRjORxTNe269KSSr5un5qyWi1iL61wLxpd+ZOg==}
 
+  util-deprecate@1.0.2:
+    resolution: {integrity: sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==}
+
   uuid@3.4.0:
     resolution: {integrity: sha512-HjSDRw6gZE5JMggctHBcjVak08+KEVhSIiDzFnT9S9aegmp85S/bReBVTb4QTFaRNptJ9kuYaNhnbNEOkbKb/A==}
     deprecated: Please upgrade  to version 7 or higher.  Older versions may use Math.random() in certain circumstances, which is known to be problematic.  See https://v8.dev/blog/math-random for details.
@@ -4478,6 +4499,8 @@ snapshots:
       shebang-command: 2.0.0
       which: 2.0.2
 
+  cssesc@3.0.0: {}
+
   custom-event-polyfill@1.0.7: {}
 
   dashdash@1.14.1:
@@ -5505,6 +5528,11 @@ snapshots:
       - jiti
       - tsx
 
+  postcss-discard-comments@7.0.4(postcss@8.5.6):
+    dependencies:
+      postcss: 8.5.6
+      postcss-selector-parser: 7.1.0
+
   postcss-load-config@5.1.0(postcss@8.5.6):
     dependencies:
       lilconfig: 3.1.3
@@ -5518,6 +5546,11 @@ snapshots:
       postcss: 8.5.6
       thenby: 1.3.4
 
+  postcss-selector-parser@7.1.0:
+    dependencies:
+      cssesc: 3.0.0
+      util-deprecate: 1.0.2
+
   postcss-value-parser@4.2.0: {}
 
   postcss@8.5.6:
@@ -6128,6 +6161,8 @@ snapshots:
 
   urlpattern-polyfill@10.0.0: {}
 
+  util-deprecate@1.0.2: {}
+
   uuid@3.4.0: {}
 
   validate-npm-package-license@3.0.4:

preview/scss/_config.scss

@@ -0,0 +1,9 @@
+$prefix: "tblr-";
+$demo-icon-size: 4rem;
+
+$color-highlight-green: #b5f4a5;
+$color-highlight-yellow: #ffe484;
+$color-highlight-purple: #d9a9ff;
+$color-highlight-red: #ff8383;
+$color-highlight-blue: #93ddfd;
+$color-highlight-gray: #a0aec0;

preview/scss/_highlight.scss

@@ -1,16 +1,11 @@
-$color-highlight-green: #b5f4a5;
+@use "config";
-$color-highlight-yellow: #ffe484;
-$color-highlight-purple: #d9a9ff;
-$color-highlight-red: #ff8383;
-$color-highlight-blue: #93ddfd;
-$color-highlight-gray: #a0aec0;
 
 pre.highlight,
 .highlight pre {
   max-height: 30rem;
   margin: 1.5rem 0;
   overflow: auto;
-  border-radius: var(--#{$prefix}border-radius);
+  border-radius: var(--#{config.$prefix}border-radius);
 }
 
 .highlight {
@@ -21,10 +16,10 @@ pre.highlight,
     padding: 0 !important;
   }
 
-  .c, .c1 { color: $color-highlight-gray; }
+  .c, .c1 { color: config.$color-highlight-gray; }
-  .nt, .nc, .nx { color: $color-highlight-red; }
+  .nt, .nc, .nx { color: config.$color-highlight-red; }
-  .na, .p { color: $color-highlight-yellow; }
+  .na, .p { color: config.$color-highlight-yellow; }
-  .s, .dl, .s2 { color: $color-highlight-green; }
+  .s, .dl, .s2 { color: config.$color-highlight-green; }
-  .k { color: $color-highlight-blue; }
+  .k { color: config.$color-highlight-blue; }
-  .s1, .mi { color: $color-highlight-purple; }
+  .s1, .mi { color: config.$color-highlight-purple; }
 }

preview/scss/demo.scss

@@ -1,6 +1,5 @@
-$prefix: "tblr-";
+@use "config";
-
+@use "highlight";
-@import "highlight";
 
 .dropdown-menu-demo {
   display: inline-block;
@@ -45,7 +44,6 @@ $prefix: "tblr-";
   }
 }
 
-$demo-icon-size: 4rem;
 .demo-icons-list {
   display: flex;
   flex-wrap: wrap;
@@ -54,7 +52,7 @@ $demo-icon-size: 4rem;
   list-style: none;
 
   > * {
-    flex: 1 0 $demo-icon-size;
+    flex: 1 0 config.$demo-icon-size;
   }
 }
 
@@ -70,10 +68,8 @@ $demo-icon-size: 4rem;
   aspect-ratio: 1;
   text-align: center;
   padding: 0.5rem;
-  border-right: var(--#{$prefix}border-width) var(--#{$prefix}border-style)
+  border-right: var(--#{config.$prefix}border-width) var(--#{config.$prefix}border-style) var(--#{config.$prefix}border-color);
-    var(--#{$prefix}border-color);
+  border-bottom: var(--#{config.$prefix}border-width) var(--#{config.$prefix}border-style) var(--#{config.$prefix}border-color);
-  border-bottom: var(--#{$prefix}border-width) var(--#{$prefix}border-style)
-    var(--#{$prefix}border-color);
   color: inherit;
   cursor: pointer;
 
@@ -86,4 +82,4 @@ $demo-icon-size: 4rem;
   &:hover {
     text-decoration: none;
   }
-}
+}

shared/data/sri.json

@@ -1,6 +1,6 @@
 {
-  "css": "sha384-kz+I4+mczbNiZfLAJMxOlJaZmnbRYhARHNkR2k6tal4gz7OL33/0puDD3SvkiNX9",
+  "css": "sha384-cmnQUMuv5iff5IGgJhlGbkdjxkm5YhgCRNr0dnJCn7AzRfL4ZzLy40ErHuvOuHYd",
-  "css-rtl": "sha384-oBsMN4t4hqHp2yPeHCvYqwzbzTIQj7tW4JvGHxhmk14iAV8n8UWc8nl5PjfN0Cmp",
+  "css-rtl": "sha384-bXCvE3Xmz3jclb6GLOrtqQmT4Pia0o7yhSVzS3rarqYvFojdIGn7vYUtl7BJPEAX",
   "css-flags": "sha384-kmvP0hkBXZ2hMSZlbvE1Q2HIXzPCQRL3ijUeqNiwaPd2nl2Aks+s3gW+V5fAHOX9",
   "css-flags-rtl": "sha384-Q/h6koANGclsGnwB8rvF8h84H54NKHDeNWFj6yiE4WLLEXyHcz+Zu6Afkh2ssYTC",
   "css-marketing": "sha384-4dAlYnPzCom9yeC/5++PFq2FG/szJRlUPsDSrjZ3EWP8IAzK7g7rrsnSfqrS67Se",
@@ -9,8 +9,8 @@
   "css-payments-rtl": "sha384-69CxgA+uEPtM07SLA8MMAdnBmwtVGndDJf8nIPdfvNrDayBfPqOK3wS3nvV5yyk+",
   "css-socials": "sha384-eWmz8gyiLzrDw3JcT/PJxjGyKizQjvByfHqocjrMMkIrbKFCnOuP/qMwAz3bHmsC",
   "css-socials-rtl": "sha384-yobKDIyTOxB1z7t/uZ2ImuXrcKWF24vDYg2vR1n7x2msF09iWnvyIxQtfEl9+OFl",
-  "css-props": "sha384-yctdHmQqHsVGkRviR41l44mMU+tmJq7aIvUiRG05pnl2kIjaX1e9yuT6SdYTVMg/",
+  "css-props": "sha384-B4d12qdv8aSJS3AgmNo1S5vyuwHi2+be2xN8QLM8OC1MSH9Qws/EgfHwaP7enhCE",
-  "css-props-rtl": "sha384-xMuKYM+iQpCesX0ZyyH7tW8KJgLkUOyHlPwNjEY8ZepdiAXhT9+psV8ohJ4xqlkg",
+  "css-props-rtl": "sha384-y1dHdb/2gNZApz4MeXx3dEQ9jBWVpIoDfVp3AY7etyJjF/tMT333DoxOmgKzc2P+",
   "css-themes": "sha384-jTe/MdN6BlY4S3eYe6Qw++yTjuezmVnxWp/l7GAG1qXGC+jttphHqsAN/bGPvJOk",
   "css-themes-rtl": "sha384-WTp4aZ+OGqnkNR6Xe0sJwwfd0JHGq3dZTLU2ITKxTK2zjcJTBUMY/+Z4eXgm8ipF",
   "css-vendors-rtl": "sha384-V555LUGE2xyN4wNbzdVMgsajsKmJdlLFm20Ws72jEyPiSsTXXITV0PebNzVeBjnb",