@ax-design/typed-om 0.1.0 → 0.2.0

package/README.md

@@ -1,7 +1,12 @@
-<h1 align="center">Typed OM</h1>
+<h1 align="center">
+  <picture>
+    <source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/ax-design/typed-om/master/docs/logo-r.png">
+    <img src="https://raw.githubusercontent.com/ax-design/typed-om/master/docs/logo.png" alt="Ax Typed OM">
+  </picture>
+</h1>
 
 <p align="center">
-  Typed reads and change detection of CSS custom properties for Axiom Design System, with or without CSS Typed OM.
+  Typed reads and monitors CSS custom properties for Axiom Design System.
 </p>
 
 <p align="center">

package/dist/reader.js

@@ -41,10 +41,16 @@ export class StyleReader {
 function parseFast(spec, text) {
     switch (spec.syntax.type) {
         case 'length':
+            if (spec.syntax.keywords && spec.syntax.keywords.indexOf(text) >= 0)
+                return text;
             return parseLength(text);
         case 'length-percentage':
+            if (spec.syntax.keywords && spec.syntax.keywords.indexOf(text) >= 0)
+                return text;
             return parseLengthPercentage(text);
         case 'number':
+            if (spec.syntax.keywords && spec.syntax.keywords.indexOf(text) >= 0)
+                return text;
             return parseNumber(text);
         case 'color':
             if (spec.syntax.keywords && spec.syntax.keywords.indexOf(text) >= 0)

package/dist/schema.d.ts

@@ -1,9 +1,12 @@
 export type PropertySyntax = {
     type: 'length';
+    keywords?: string[];
 } | {
     type: 'length-percentage';
+    keywords?: string[];
 } | {
     type: 'number';
+    keywords?: string[];
 } | {
     type: 'color';
     keywords?: string[];

package/dist/schema.js

@@ -1,4 +1,12 @@
 const RESERVED = ['initial', 'inherit', 'unset', 'revert', 'revert-layer', 'default'];
+function checkKeywords(name, keywords) {
+    for (const value of keywords) {
+        if (RESERVED.indexOf(value) >= 0)
+            throw new Error(`${name}: keyword "${value}" cannot be observed`);
+        if (!/^-?[_a-zA-Z][_a-zA-Z0-9-]*$/.test(value))
+            throw new Error(`${name}: "${value}" is not an identifier`);
+    }
+}
 export function validateSchema(schema) {
     const seen = [];
     for (const spec of schema) {
@@ -8,24 +16,25 @@ export function validateSchema(schema) {
         seen.push(spec.name);
         if (spec.name.indexOf('--') !== 0)
             throw new Error(`${spec.name} is not a custom property name`);
-        if (spec.syntax.type !== 'keyword')
-            continue;
-        for (const value of spec.syntax.values) {
-            if (RESERVED.indexOf(value) >= 0)
-                throw new Error(`${spec.name}: keyword "${value}" cannot be observed`);
-            if (!/^-?[_a-zA-Z][_a-zA-Z0-9-]*$/.test(value))
-                throw new Error(`${spec.name}: "${value}" is not an identifier`);
+        const syntax = spec.syntax;
+        if (syntax.type === 'keyword') {
+            checkKeywords(spec.name, syntax.values);
+        }
+        else if (syntax.type !== 'color' && syntax.keywords) {
+            // Numeric types may hold a keyword instead of a value ("<length> | auto");
+            // validate them the same way as the keyword type. Color keywords stay unvalidated.
+            checkKeywords(spec.name, syntax.keywords);
         }
     }
 }
 export function cssSyntax(syntax) {
     switch (syntax.type) {
         case 'length':
-            return '<length>';
+            return syntax.keywords && syntax.keywords.length ? `<length> | ${syntax.keywords.join(' | ')}` : '<length>';
         case 'length-percentage':
-            return '<length-percentage>';
+            return syntax.keywords && syntax.keywords.length ? `<length-percentage> | ${syntax.keywords.join(' | ')}` : '<length-percentage>';
         case 'number':
-            return '<number>';
+            return syntax.keywords && syntax.keywords.length ? `<number> | ${syntax.keywords.join(' | ')}` : '<number>';
         case 'color':
             return syntax.keywords && syntax.keywords.length ? `<color> | ${syntax.keywords.join(' | ')}` : '<color>';
         case 'keyword':

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ax-design/typed-om",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "Typed reads and change detection for CSS custom properties, for browsers with or without CSS Typed OM and @property.",
   "keywords": [
     "css",

package/src/reader.ts

@@ -54,10 +54,13 @@ export class StyleReader {
 function parseFast(spec: PropertySpec, text: string): PropertyValue {
     switch (spec.syntax.type) {
         case 'length':
+            if (spec.syntax.keywords && spec.syntax.keywords.indexOf(text) >= 0) return text;
             return parseLength(text);
         case 'length-percentage':
+            if (spec.syntax.keywords && spec.syntax.keywords.indexOf(text) >= 0) return text;
             return parseLengthPercentage(text);
         case 'number':
+            if (spec.syntax.keywords && spec.syntax.keywords.indexOf(text) >= 0) return text;
             return parseNumber(text);
         case 'color':
             if (spec.syntax.keywords && spec.syntax.keywords.indexOf(text) >= 0) return text;

package/src/schema.ts

@@ -1,8 +1,8 @@
 // Description of one custom property the caller wants to read and observe.
 export type PropertySyntax =
-    | { type: 'length' }
-    | { type: 'length-percentage' }
-    | { type: 'number' }
+    | { type: 'length'; keywords?: string[] }
+    | { type: 'length-percentage'; keywords?: string[] }
+    | { type: 'number'; keywords?: string[] }
     // `keywords`: extra identifiers the property may hold instead of a color (returned as strings).
     | { type: 'color'; keywords?: string[] }
     // Allowed values. CSS-wide keywords are rejected. `none` is allowed for existing APIs, but
@@ -37,6 +37,13 @@ export type PropertyValue = LengthPercentage | number | string | Rgba | null;
 
 const RESERVED = ['initial', 'inherit', 'unset', 'revert', 'revert-layer', 'default'];
 
+function checkKeywords(name: string, keywords: string[]): void {
+    for (const value of keywords) {
+        if (RESERVED.indexOf(value) >= 0) throw new Error(`${name}: keyword "${value}" cannot be observed`);
+        if (!/^-?[_a-zA-Z][_a-zA-Z0-9-]*$/.test(value)) throw new Error(`${name}: "${value}" is not an identifier`);
+    }
+}
+
 export function validateSchema(schema: PropertySpec[]): void {
     const seen: string[] = [];
     for (const spec of schema) {
@@ -45,10 +52,13 @@ export function validateSchema(schema: PropertySpec[]): void {
         }
         seen.push(spec.name);
         if (spec.name.indexOf('--') !== 0) throw new Error(`${spec.name} is not a custom property name`);
-        if (spec.syntax.type !== 'keyword') continue;
-        for (const value of spec.syntax.values) {
-            if (RESERVED.indexOf(value) >= 0) throw new Error(`${spec.name}: keyword "${value}" cannot be observed`);
-            if (!/^-?[_a-zA-Z][_a-zA-Z0-9-]*$/.test(value)) throw new Error(`${spec.name}: "${value}" is not an identifier`);
+        const syntax = spec.syntax;
+        if (syntax.type === 'keyword') {
+            checkKeywords(spec.name, syntax.values);
+        } else if (syntax.type !== 'color' && syntax.keywords) {
+            // Numeric types may hold a keyword instead of a value ("<length> | auto");
+            // validate them the same way as the keyword type. Color keywords stay unvalidated.
+            checkKeywords(spec.name, syntax.keywords);
         }
     }
 }
@@ -56,11 +66,11 @@ export function validateSchema(schema: PropertySpec[]): void {
 export function cssSyntax(syntax: PropertySyntax): string {
     switch (syntax.type) {
         case 'length':
-            return '<length>';
+            return syntax.keywords && syntax.keywords.length ? `<length> | ${syntax.keywords.join(' | ')}` : '<length>';
         case 'length-percentage':
-            return '<length-percentage>';
+            return syntax.keywords && syntax.keywords.length ? `<length-percentage> | ${syntax.keywords.join(' | ')}` : '<length-percentage>';
         case 'number':
-            return '<number>';
+            return syntax.keywords && syntax.keywords.length ? `<number> | ${syntax.keywords.join(' | ')}` : '<number>';
         case 'color':
             return syntax.keywords && syntax.keywords.length ? `<color> | ${syntax.keywords.join(' | ')}` : '<color>';
         case 'keyword':