CSS system rendering

css.system

Ready · No signal has been run.

Results

Full evidence

Signal properties and values
Property	Value
No results yet. No signal has been run.

JSON

Selected signal results for external comparison. Field statuses, controls and exact values are retained.

No run export is available.

Source

Source is not connected yet.

// Test source pending.

Definition

Feature syntax support, system colors, system fonts and computed transforms are separate observations.

Find it in the repository

Collector source: core/signals/css/system.ts
Export: measurementModule · Signal object
Field definitions: core/definitions/css/system.ts
Capture membership: Product capture · common/capture/product.ts
Page registration: app/signals/registry.ts
Field projection: core/results/measurement.ts

Execution contract

Signal: css.system
Collector: css.system
API / surface: core/signals/css/system.ts
Timeout: 500 ms
Companion signals: None
Fixture inputs: Declared requests (listed below)

Exact request inputs

[
  {
    "key": "css.system.supports",
    "inputs": {
      "supports-color-color(display-p3 1 0 0)": {
        "property": "color",
        "value": "color(display-p3 1 0 0)",
        "invalidControl": false
      },
      "supports-color-lab(50% 20 30)": {
        "property": "color",
        "value": "lab(50% 20 30)",
        "invalidControl": false
      },
      "supports-container-type-inline-size": {
        "property": "container-type",
        "value": "inline-size",
        "invalidControl": false
      },
      "supports-display-grid": {
        "property": "display",
        "value": "grid",
        "invalidControl": false
      },
      "supports-display-math": {
        "property": "display",
        "value": "math",
        "invalidControl": false
      },
      "supports-font-variation-settings-\"wght\" 500": {
        "property": "font-variation-settings",
        "value": "\"wght\" 500",
        "invalidControl": false
      },
      "supports-text-wrap-balance": {
        "property": "text-wrap",
        "value": "balance",
        "invalidControl": false
      },
      "supports-width-calc(2px + 3px)": {
        "property": "width",
        "value": "calc(2px + 3px)",
        "invalidControl": false
      },
      "supports-width-invalid-vendor-control": {
        "property": "width",
        "value": "invalid-vendor-control",
        "invalidControl": true
      },
      "supports-width-min(3px, 4px)": {
        "property": "width",
        "value": "min(3px, 4px)",
        "invalidControl": false
      }
    },
    "controls": {}
  },
  {
    "key": "css.system.color",
    "inputs": {
      "color-ButtonFace": {
        "property": "color",
        "value": "ButtonFace",
        "reset": "all:initial;box-sizing:content-box;direction:ltr;writing-mode:horizontal-tb;font:16px/normal monospace;letter-spacing:normal;word-spacing:normal;text-transform:none;"
      },
      "color-ButtonText": {
        "property": "color",
        "value": "ButtonText",
        "reset": "all:initial;box-sizing:content-box;direction:ltr;writing-mode:horizontal-tb;font:16px/normal monospace;letter-spacing:normal;word-spacing:normal;text-transform:none;"
      },
      "color-Canvas": {
        "property": "color",
        "value": "Canvas",
        "reset": "all:initial;box-sizing:content-box;direction:ltr;writing-mode:horizontal-tb;font:16px/normal monospace;letter-spacing:normal;word-spacing:normal;text-transform:none;"
      },
      "color-CanvasText": {
        "property": "color",
        "value": "CanvasText",
        "reset": "all:initial;box-sizing:content-box;direction:ltr;writing-mode:horizontal-tb;font:16px/normal monospace;letter-spacing:normal;word-spacing:normal;text-transform:none;"
      },
      "color-GrayText": {
        "property": "color",
        "value": "GrayText",
        "reset": "all:initial;box-sizing:content-box;direction:ltr;writing-mode:horizontal-tb;font:16px/normal monospace;letter-spacing:normal;word-spacing:normal;text-transform:none;"
      },
      "color-Highlight": {
        "property": "color",
        "value": "Highlight",
        "reset": "all:initial;box-sizing:content-box;direction:ltr;writing-mode:horizontal-tb;font:16px/normal monospace;letter-spacing:normal;word-spacing:normal;text-transform:none;"
      },
      "color-HighlightText": {
        "property": "color",
        "value": "HighlightText",
        "reset": "all:initial;box-sizing:content-box;direction:ltr;writing-mode:horizontal-tb;font:16px/normal monospace;letter-spacing:normal;word-spacing:normal;text-transform:none;"
      },
      "color-LinkText": {
        "property": "color",
        "value": "LinkText",
        "reset": "all:initial;box-sizing:content-box;direction:ltr;writing-mode:horizontal-tb;font:16px/normal monospace;letter-spacing:normal;word-spacing:normal;text-transform:none;"
      },
      "color-rgb(17, 34, 51)": {
        "property": "color",
        "value": "rgb(17, 34, 51)",
        "reset": "all:initial;box-sizing:content-box;direction:ltr;writing-mode:horizontal-tb;font:16px/normal monospace;letter-spacing:normal;word-spacing:normal;text-transform:none;"
      }
    },
    "controls": {}
  },
  {
    "key": "css.system.font",
    "inputs": {
      "font-caption": {
        "property": "font",
        "value": "caption",
        "reset": "all:initial;box-sizing:content-box;direction:ltr;writing-mode:horizontal-tb;font:16px/normal monospace;letter-spacing:normal;word-spacing:normal;text-transform:none;"
      },
      "font-icon": {
        "property": "font",
        "value": "icon",
        "reset": "all:initial;box-sizing:content-box;direction:ltr;writing-mode:horizontal-tb;font:16px/normal monospace;letter-spacing:normal;word-spacing:normal;text-transform:none;"
      },
      "font-menu": {
        "property": "font",
        "value": "menu",
        "reset": "all:initial;box-sizing:content-box;direction:ltr;writing-mode:horizontal-tb;font:16px/normal monospace;letter-spacing:normal;word-spacing:normal;text-transform:none;"
      },
      "font-message-box": {
        "property": "font",
        "value": "message-box",
        "reset": "all:initial;box-sizing:content-box;direction:ltr;writing-mode:horizontal-tb;font:16px/normal monospace;letter-spacing:normal;word-spacing:normal;text-transform:none;"
      },
      "font-small-caption": {
        "property": "font",
        "value": "small-caption",
        "reset": "all:initial;box-sizing:content-box;direction:ltr;writing-mode:horizontal-tb;font:16px/normal monospace;letter-spacing:normal;word-spacing:normal;text-transform:none;"
      },
      "font-status-bar": {
        "property": "font",
        "value": "status-bar",
        "reset": "all:initial;box-sizing:content-box;direction:ltr;writing-mode:horizontal-tb;font:16px/normal monospace;letter-spacing:normal;word-spacing:normal;text-transform:none;"
      }
    },
    "controls": {}
  },
  {
    "key": "css.system.transform",
    "inputs": {
      "transform-matrix(1, 0, 0, 1, 7, 11)": {
        "property": "transform",
        "value": "matrix(1, 0, 0, 1, 7, 11)",
        "reset": "all:initial;box-sizing:content-box;direction:ltr;writing-mode:horizontal-tb;font:16px/normal monospace;letter-spacing:normal;word-spacing:normal;text-transform:none;"
      }
    },
    "controls": {}
  }
]

One collector runs per invocation. Results and JSON select this signal’s fields; any companions execute in the same collector.

Generated source manifest lists runtime files, fixture URLs and content digests for this build. The Source tab provides a copyable console sample.

Run and edit locally

From the repository root, start the Astro app, then open /signals/css.system. Edit the collector source and reload the page to load its new build.

pnpm run dev:web

In a browser module served by this repository’s Vite graph:

import { createCollector } from "/core/collect"
import { measurementModule } from "/core/signals/css/system"

const signal = measurementModule
const collector = createCollector()
const suite = { signals: [signal] }
const result = await collector.collect(suite)

Reuse the collector owner for repeated calls so collection can enforce cleanup. This returns the collector’s raw result; app/signals/projection.ts selects the retained fields shown on this page.

rg -n 'measurementModule' core app tests
pnpm run check
pnpm run test tests/unit/app/focused-projection.test.ts