Ns CSS Variables Calc

CSS variables and calc()

Custom properties and var() work, with cascade/inheritance down the view tree:

.ns-root { --brand: #2563eb; --pad: 16; }
.cta { color: var(--brand); padding: var(--pad); }

var() fallback truth table

An undefined variable with no (resolvable) fallback silently unsets the property — it does not keep a previous value and does not warn.

Dynamic theming trick: class is settable via CSS as a special property, and can itself come from a variable — class: var(--theme-class); swaps component classes per scope. Note an inline style="--x: ..." custom property beats any class-defined one.

calc(): the return-shape trap

calc() folds constants, but the type of the computed style value depends on the unit inside:

And percent values are fractions: '50%' parses to { value: 0.5, unit: '%' }. Code doing view.width.value === 50 or treating view.width as always-number breaks the moment a percent or px unit enters. Read defensively:

import { PercentLength } from '@nativescript/core';

function widthInfo(v: any): string {
  if (typeof v === 'number') return `${v} dip`;
  if (v?.unit === '%') return `${v.value * 100}%`;
  return `${v?.value} ${v?.unit}`;
}

Mixed px/% in one calc() is left unevaluated — calc(100px - (100px - 100%)) stays a literal string and the property never resolves. There is no late (layout-time) evaluation; restructure to a single unit.

PercentLength.parse throws on malformed strings — including the classic template-literal bug `${undefined}px` → 'undefinedpx'. Guard interpolated style strings.

Verified 2026-08 against @nativescript/core 9.1.0-rc.3: the fallback table, calc return shapes, fraction percents and the unevaluated mixed-unit case are asserted in apps/automated/src/ui/styling/style-tests.ts and style-properties-tests.ts; not re-run standalone.