Diagnostics

src/example.uxdsl

.hero {
  padding: xs(1rem) xxl(2rem);
}

$ uxdsl build --entry src/example.uxdsl --out dist/example.css
[uxdsl] Error: uxdsl: src/example.uxdsl:2:3: UXD_BREAKPOINT_UNKNOWN: xxl(...) is not a configured breakpoint or a known CSS function; configured breakpoints: xs, sm, md, lg, xl.
  1 | .hero {
> 2 |   padding: xs(1rem) xxl(2rem);
    |   ^
  3 | }
  4 |

src/example.uxdsl

.card {
  box-shadow: shadow(9);
}

$ uxdsl build --entry src/example.uxdsl --out dist/example.css
[uxdsl] Error: uxdsl: src/example.uxdsl:2:3: UXD_SHADOW_REFERENCE: shadow(9) does not exist; available keys: 0–5. Did you mean "5"?
  1 | .card {
> 2 |   box-shadow: shadow(9);
    |   ^
  3 | }
  4 |

src/example.uxdsl

.card {
  border-radius: radius(12);
}

$ uxdsl build --entry src/example.uxdsl --out dist/example.css
[uxdsl] Error: uxdsl: src/example.uxdsl:2:3: UXD_EDGE_REFERENCE: radius(12) does not exist; available keys: 0–5, circle, pill. Did you mean "5"?
  1 | .card {
> 2 |   border-radius: radius(12);
    |   ^
  3 | }
  4 |

src/example.uxdsl

.card {
  padding: density(2.5);
}

$ uxdsl build --entry src/example.uxdsl --out dist/example.css
[uxdsl] Error: uxdsl: src/example.uxdsl:2:3: UXD_TOKEN_KEY: density(2.5) is not a token key: density(k). A key is a reference the theme defines, never a number to scale.
  1 | .card {
> 2 |   padding: density(2.5);
    |   ^
  3 | }
  4 |

src/example.uxdsl

.title {
  @ds-typo(hero);
}

$ uxdsl build --entry src/example.uxdsl --out dist/example.css
[uxdsl] Error: uxdsl: src/example.uxdsl:2:3: UXD_TYPO_REFERENCE: ds-typo(hero) does not exist; available keys: body, body-sm, caption, code, default, h1, h2, h3, h4, h5, h6, p, pre, small, span, subtitle2, tag.
  1 | .title {
> 2 |   @ds-typo(hero);
    |   ^
  3 | }
  4 |

src/example.uxdsl

.panel {
  @ds-surface(glass);
}

$ uxdsl build --entry src/example.uxdsl --out dist/example.css
[uxdsl] Error: uxdsl: src/example.uxdsl:2:3: UXD_SURFACE_REFERENCE: Undefined surface role "glass"; roles: contained, flat, outlined.
  1 | .panel {
> 2 |   @ds-surface(glass);
    |   ^
  3 | }
  4 |

src/example.uxdsl

@media (min-width: 768px) {
  @ds-surface(contained);
}

$ uxdsl build --entry src/example.uxdsl --out dist/example.css
[uxdsl] Error: uxdsl: src/example.uxdsl:2:3: UXD_DIRECTIVE_CONTEXT: Directives apply to a whole rule and are not responsive; use responsive values on the properties instead, e.g. padding: xs(…) md(…).
  1 | @media (min-width: 768px) {
> 2 |   @ds-surface(contained);
    |   ^
  3 | }
  4 |

src/example.uxdsl

.card {
  @ds-card(contained);
}

$ uxdsl build --entry src/example.uxdsl --out dist/example.css
[uxdsl] Error: uxdsl: src/example.uxdsl:2:3: UXD_DIRECTIVE_UNKNOWN: Unknown directive @ds-card.
  1 | .card {
> 2 |   @ds-card(contained);
    |   ^
  3 | }
  4 |

src/example.uxdsl

.overlay {
  background: palette(primary.main, 2);
}

$ uxdsl build --entry src/example.uxdsl --out dist/example.css
[uxdsl] Error: uxdsl: src/example.uxdsl:2:3: UXD_TOKEN_ALPHA: palette(primary.main, 2): expected an alpha between 0 and 1, got "2".
  1 | .overlay {
> 2 |   background: palette(primary.main, 2);
    |   ^
  3 | }
  4 |

uxdsl.theme.json

{
  "breakpoints": {
    "xs": 0,
    "sm": 480,
    "md": -1,
    "lg": 1024,
    "xl": 1280
  }
}

src/example.uxdsl

.a {
  padding: space(3);
}

$ uxdsl build --entry src/example.uxdsl --out dist/example.css
[uxdsl] Error: uxdsl.theme.json: UXD_BP_INVALID: Expected named, distinct non-negative widths and a zero-width base.

uxdsl.theme.json

{
  "typography_details": {
    "h1": {
      "opacity": "0.8"
    }
  }
}

src/example.uxdsl

.a {
  padding: space(3);
}

$ uxdsl build --entry src/example.uxdsl --out dist/example.css
[uxdsl] Error: uxdsl.theme.json: UXD_TYPO_FIELD: Invalid h1.opacity (at typography_details.h1.opacity).

uxdsl.theme.json

{
  "palette": {
    "primary": {
      "main": "var(--uxdsl__color__brand-500)"
    }
  }
}

src/example.uxdsl

.a {
  color: palette(primary.main);
}

$ uxdsl build --entry src/example.uxdsl --out dist/example.css
[uxdsl] Error: UXD_REFERENCE_MISSING: --uxdsl__color__brand-500 has no definition in the active theme/scope. Define it or declare its external provider. Referenced by 24 definitions: color (src/example.uxdsl:2:3), --uxdsl__palette__primary-main, --uxdsl__button__contained-focusvisible-outline, --uxdsl__button__contained-tone-primary-focusvisible-outline, --uxdsl__button__outlined-focusvisible-outline and 19 more.

src/example.uxdsl

.a {
  color: palette(primary-main);
}

$ uxdsl build --entry src/example.uxdsl --out dist/example.css
[uxdsl] Error: uxdsl: src/example.uxdsl:2:3: UXD_PALETTE_SYNTAX: palette(primary-main) is not a dotted path; write palette(primary.main).
  1 | .a {
> 2 |   color: palette(primary-main);
    |   ^
  3 | }
  4 |

src/example.uxdsl

.a {
  color: palette(primary.mian);
}

$ uxdsl build --entry src/example.uxdsl --out dist/example.css
[uxdsl] Error: uxdsl: src/example.uxdsl:2:3: UXD_PALETTE_REFERENCE: palette(primary.mian) does not exist; primary has: main, light, dark, contrast. Did you mean "main"?
  1 | .a {
> 2 |   color: palette(primary.mian);
    |   ^
  3 | }
  4 |

src/example.uxdsl

.card {
  border: border(1, red, dashed);
}

$ uxdsl build --entry src/example.uxdsl --out dist/example.css
[uxdsl] Error: uxdsl: src/example.uxdsl:2:3: UXD_EDGE_ARGUMENT: border(1, red, dashed) takes exactly one argument: border(k); write border(1) and set border-color/border-style as declarations after it.
  1 | .card {
> 2 |   border: border(1, red, dashed);
    |   ^
  3 | }
  4 |

src/example.uxdsl

.card {
  @ds-surface(contained text);
}

$ uxdsl build --entry src/example.uxdsl --out dist/example.css
[uxdsl] Error: uxdsl: src/example.uxdsl:2:3: UXD_SURFACE_TONE: "text" is not a tone; a tone is a Palette family with main, dark and contrast: dark, error, info, light, neutral, primary, secondary, success, surface, tertiary, warning.
  1 | .card {
> 2 |   @ds-surface(contained text);
    |   ^
  3 | }
  4 |

src/example.uxdsl

.cta {
  @ds-button(contained);
  @ds-button(outlined);
}

$ uxdsl build --entry src/example.uxdsl --out dist/example.css
[uxdsl] Error: uxdsl: src/example.uxdsl:3:3: UXD_DIRECTIVE_DUPLICATE: @ds-button(outlined) repeats @ds-button(contained) in the same rule; a rule takes one @ds-button or @ds-input. Choose one role, or split the selectors into two rules.
  1 | .cta {
  2 |   @ds-button(contained);
> 3 |   @ds-button(outlined);
    |   ^
  4 | }
  5 |

src/example.uxdsl

.card {
  box-shadow: elevation(2);
}

$ uxdsl build --entry src/example.uxdsl --out dist/example.css
[uxdsl] Error: uxdsl: src/example.uxdsl:2:3: UXD_SYNTAX_REMOVED: elevation() was removed; use shadow(2).
  1 | .card {
> 2 |   box-shadow: elevation(2);
    |   ^
  3 | }
  4 |

src/example.uxdsl

.card {
  padding: spacing(2);
}

$ uxdsl build --entry src/example.uxdsl --out dist/example.css
[uxdsl] Error: uxdsl: src/example.uxdsl:2:3: UXD_FUNCTION_UNKNOWN: spacing() is not a function CSS or UXDSL knows; did you mean space()?
  1 | .card {
> 2 |   padding: spacing(2);
    |   ^
  3 | }
  4 |

src/example.uxdsl

@theme {
  radius-2: 12px;
}

$ uxdsl build --entry src/example.uxdsl --out dist/example.css
[uxdsl] Error: uxdsl: src/example.uxdsl:1:1: UXD_THEME_BLOCK_REMOVED: @theme blocks were removed; define these tokens in the theme JSON (uxdsl.theme.json): density-<k> under "densities", radius-<k> under "radii", border-<k> under "borders", shadow-<k> under "shadows", and surface-/button-/input-<role> packs under "surfaces", "buttons" and "inputs".
> 1 | @theme {
    | ^
  2 |   radius-2: 12px;
  3 | }

src/example.uxdsl

.card {
  padding: $gap;
}

$ uxdsl build --entry src/example.uxdsl --out dist/example.css
[uxdsl] Error: src/example.uxdsl:2:12: UXD_SASS: Undefined variable.
    ╷
  2 │   padding: $gap;
    │            ^^^^
    ╵
    src/example.uxdsl 2:12  root stylesheet

src/example.uxdsl

$gap: 4px;
.card {
  --gap: $gap;
}

$ uxdsl build --entry src/example.uxdsl --out dist/example.css
[uxdsl] Error: uxdsl: src/example.uxdsl:3:3: UXD_SASS_CONTEXT: Sass keeps $gap literally in the custom property --gap; write #{$gap} (in a .uxdsl file compiled by uxdsl build, compile() or an adapter).
  1 | $gap: 4px;
  2 | .card {
> 3 |   --gap: $gap;
    |   ^
  4 | }
  5 |

src/example.uxdsl

@function space($n) {
  @return $n * 4px;
}
.card {
  padding: space(2);
}

$ uxdsl build --entry src/example.uxdsl --out dist/example.css
[uxdsl] Warning: src/example.uxdsl:1:11: UXD_FUNCTION_SHADOWED: @function space (src/example.uxdsl:1) replaces UXDSL's space() in this build; rename it to use the token

src/example.uxdsl

@import './card';

$ uxdsl build --entry src/example.uxdsl --out dist/example.css
[uxdsl] Warning: src/example.uxdsl:1:9: UXD_SASS_WARNING: [import] Sass @import rules are deprecated and will be removed in Dart Sass 3.0.0.