tabler/core/scss/tests/_css-var.test.scss

// Tests for the CSS custom-property builders in scss/mixins/_functions.scss:
// `varify()` and `rgba-css-var()`. A plain `@use` of the functions module is
// enough — no fixtures. Both emit unprefixed names: the `--tblr-` prefix is
// added later, by the css pipeline (.build/css-var-prefix.ts).

@use 'sass:meta';
@use '../mixins/functions' as *;

@include describe('varify') {
  // `varify` seeds its accumulator with `null`, so the raw list inspects as
  // `null var(...) ...`; Sass drops the null when serialising to CSS, so the
  // behaviour is asserted through the rendered output rather than the value.
  @include it('prefixes each entry as a space-separated var() list') {
    @include assert() {
      @include output() {
        .t {
          padding: varify(('gutter-x' 'gutter-y'));
        }
      }
      @include expect() {
        .t {
          padding: var(--gutter-x) var(--gutter-y);
        }
      }
    }
  }
}

@include describe('rgba-css-var') {
  @include it('builds a color-mix() from the identifier and target opacity') {
    @include assert-equal(meta.inspect(rgba-css-var('primary', 'bg')), 'color-mix(in srgb, var(--primary) calc(var(--bg-opacity) * 100%), transparent)');
  }

  @include it('special-cases the body background') {
    @include assert-equal(meta.inspect(rgba-css-var('body', 'bg')), 'color-mix(in srgb, var(--body-bg) calc(var(--bg-opacity) * 100%), transparent)');
  }
}