@yahoo/uds-create-config 2.45.0 → 3.0.0

package/dist/entities/system/Package.js

@@ -0,0 +1,75 @@
+import { defineEntity } from "../../framework/defineEntity.js";
+import { defineSubEntity } from "../../framework/defineSubEntity.js";
+import { z } from "zod";
+//#region src/entities/system/Package.ts
+/**
+* One export a system renders through — `package:react-native#Pressable`.
+*
+* A member rather than an entity of its own, because a `/` cannot separate the module from the export
+* and nothing else can either. `react-native/Pressable` reads as a module and an export only by the
+* CONVENTION that the last segment is the export, and that convention has cases it gets wrong:
+* `motion/react` is a module (`import { motion } from 'motion/react'`) but parses as `motion` plus an
+* export called `react`, and `@phosphor-icons/core` — a catalogue named by an icon library's
+* `metadata` and imported by nobody — parsed as a `core` export of `@phosphor-icons`. The grammar
+* already has the separator that says which is which, so it is used.
+*
+* A member's fields are empty because its identity IS its name: there is nothing else this system
+* knows to be true about somebody else's export. `default` for a default import, `Animated.View` for
+* a dotted one — the name as the TARGET spells it, which is what an emitted import has to write.
+*/
+const PackageExport = defineSubEntity({
+	name: "exports",
+	label: "Export",
+	labelPlural: "Exports",
+	fields: z.strictObject({})
+});
+/**
+* Package (`react-native`, `@ariakit/react`, `motion/react`) — one MODULE a system renders through.
+*
+* **The path IS the specifier**, verbatim, subpath and all — the same choice `File` makes for its src.
+* So there is no `module` field: a second copy of the path could disagree with it, which is the
+* reason a `File` computes its `binary` rather than storing one.
+*
+* Verbatim matters because the stored form has to regenerate the import an author wrote. `motion` and
+* `motion/react` are ONE npm package and TWO modules; emitting `from 'motion'` for a source that
+* wrote `from 'motion/react'` names a different entry point that resolves to a different file. That
+* the two are one thing to INSTALL is a separate question, and the seal is the only place it is asked
+* — `packageName` collapses them there.
+*
+* A key derived from the module — a slug like `ariakit` — is what this replaced. The slug was
+* resolved over the whole import SET so two specifiers sharing a scope could both qualify away from
+* it, which made a key depend on what else happened to be imported: `@phosphor-icons/core` arriving
+* beside `@phosphor-icons/react` renamed the latter and stranded every ref that named it. npm has
+* already made a module name unique; nothing here has to.
+*
+* The same shape `Icon` uses for a glyph library, with one difference in where membership comes from.
+* An icon group lists every glyph the package exports, because a person picks one from a picker and
+* all of them are candidates. A package's exports are only what a render actually placed in JSX,
+* because nobody browses a component library's exports; the build registers them from JSX usage. The
+* MODULE set is broader: it records every external module the render closure needs, which is what
+* makes the portable config the source of truth for consumer install requirements.
+*
+* Ordinary component authoring does not maintain this graph: the build derives modules and exports
+* from the source it walked. A human may still author one — to carry a label, or to pin a `version` —
+* and build collection updates rather than replaces it, so that metadata survives. What authoring
+* cannot do is choose the path.
+*/
+const Package = defineEntity({
+	kind: "package",
+	label: "Package",
+	labelPlural: "Packages",
+	emergentGroups: false,
+	linkable: ({ config, source }) => config.name === source.name,
+	bareMember: "exports",
+	fields: z.strictObject({
+		/** Pinned at build from the package's own `package.json`, like an icon library's already is.
+		*  Read from the PACKAGE (`motion`), since that is what has a manifest — a subpath has none. */
+		version: z.string().optional(),
+		/** The exports a render placed in JSX. Absent for a module nothing names by export: a runtime
+		*  dependency, or a catalogue read for its data. */
+		exports: PackageExport.optional()
+	}),
+	subEntities: { exports: PackageExport }
+});
+//#endregion
+export { Package };

package/dist/entities/system/Settings.d.ts

@@ -0,0 +1,94 @@
+import { SubEntityClass } from "../../framework/defineSubEntity.js";
+import { EntityClass } from "../../framework/defineEntity.js";
+import { Config } from "../../framework/Config.js";
+import { z } from "zod";
+
+//#region src/entities/system/Settings.d.ts
+/** The `system` section — what this config is in Create. */
+declare const SystemSection: SubEntityClass<z.ZodObject<{
+  id: z.ZodOptional<z.ZodString>;
+}, z.core.$strict>>;
+/** The `build` section — where a repo keeps this system's sources, where `uds build` writes, and
+ *  where linked systems are materialised. */
+declare const BuildSection: SubEntityClass<z.ZodObject<{
+  inputDir: z.ZodOptional<z.ZodString>;
+  outDir: z.ZodOptional<z.ZodString>;
+  registryDir: z.ZodOptional<z.ZodString>;
+}, z.core.$strict>>;
+/**
+ * One prefix for both namespaces, or one each. A string names classes and variables alike; the object
+ * names them apart, for a host page that already owns one of the two. Either form may be `''`, which
+ * emits that namespace unprefixed.
+ */
+declare const prefix: z.ZodUnion<readonly [z.ZodString, z.ZodObject<{
+  classNames: z.ZodString;
+  variables: z.ZodString;
+}, z.core.$strict>]>;
+type CssPrefix = z.output<typeof prefix>;
+/** The `css` section as a config that set nothing reads it, spelled once. */
+declare const CSS_DEFAULTS: {
+  readonly prefix: "uds";
+  readonly preflight: true;
+};
+/** The `css` section — how a web system names what it emits and where its stylesheet applies. A
+ *  native system declares no such section, so a native config setting one is refused. */
+declare const CssSection: SubEntityClass<z.ZodObject<{
+  prefix: z.ZodOptional<z.ZodUnion<readonly [z.ZodString, z.ZodObject<{
+    classNames: z.ZodString;
+    variables: z.ZodString;
+  }, z.core.$strict>]>>;
+  scope: z.ZodOptional<z.ZodString>;
+  preflight: z.ZodOptional<z.ZodBoolean>;
+  safelist: z.ZodOptional<z.ZodArray<z.ZodString>>;
+}, z.core.$strict>>;
+/** The two namespaces a prefix names, whichever form it was written in, defaulted when unset. */
+declare function cssPrefixes(value: CssPrefix | undefined): {
+  classNames: string;
+  variables: string;
+};
+/**
+ * The prefix on every emitted class (`uds`). Shared with codegen, which builds class names that must
+ * agree with the ones the projections produce.
+ *
+ * The prefix belongs to this kind's `css` section, so the reader lives beside it: a config type that
+ * emits no stylesheet declares no such section, `get` answers `undefined` there, and the default is
+ * what it gets. Callable on any `Config` for that reason.
+ */
+declare const classPrefixOf: (config: Config) => string;
+/** The prefix on every emitted custom property (`--uds-…`). The same setting as the class prefix
+ *  unless the config names the two apart, for a host page that already owns one namespace. */
+declare const varPrefixOf: (config: Config) => string;
+/** The `playground` section as a config that set nothing reads it, spelled once. */
+declare const PLAYGROUND_DEFAULTS: {
+  readonly port: 4321;
+};
+/** The `playground` section — dev-server settings for `uds dev --playground`. */
+declare const PlaygroundSection: SubEntityClass<z.ZodObject<{
+  pagesDir: z.ZodOptional<z.ZodString>;
+  port: z.ZodOptional<z.ZodNumber>;
+}, z.core.$strict>>;
+declare const Settings: EntityClass<z.ZodObject<{
+  system: z.ZodOptional<z.ZodObject<{
+    id: z.ZodOptional<z.ZodString>;
+  }, z.core.$strict>>;
+  build: z.ZodOptional<z.ZodObject<{
+    inputDir: z.ZodOptional<z.ZodString>;
+    outDir: z.ZodOptional<z.ZodString>;
+    registryDir: z.ZodOptional<z.ZodString>;
+  }, z.core.$strict>>;
+  css: z.ZodOptional<z.ZodObject<{
+    prefix: z.ZodOptional<z.ZodUnion<readonly [z.ZodString, z.ZodObject<{
+      classNames: z.ZodString;
+      variables: z.ZodString;
+    }, z.core.$strict>]>>;
+    scope: z.ZodOptional<z.ZodString>;
+    preflight: z.ZodOptional<z.ZodBoolean>;
+    safelist: z.ZodOptional<z.ZodArray<z.ZodString>>;
+  }, z.core.$strict>>;
+  playground: z.ZodOptional<z.ZodObject<{
+    pagesDir: z.ZodOptional<z.ZodString>;
+    port: z.ZodOptional<z.ZodNumber>;
+  }, z.core.$strict>>;
+}, z.core.$strict>, z.ZodObject<Record<never, never>, z.core.$strip>, "settings", Record<never, never>, Record<never, never>, true>;
+//#endregion
+export { BuildSection, CSS_DEFAULTS, CssPrefix, CssSection, PLAYGROUND_DEFAULTS, PlaygroundSection, Settings, SystemSection, classPrefixOf, cssPrefixes, varPrefixOf };

package/dist/entities/system/Settings.js

@@ -0,0 +1,166 @@
+import { buildFields } from "../../configs/build-options.js";
+import { defineEntity } from "../../framework/defineEntity.js";
+import { defineSubEntity } from "../../framework/defineSubEntity.js";
+import { z } from "zod";
+//#region src/entities/system/Settings.ts
+/**
+* `Settings` — what this config is in Create, how a repo builds and serves it, and how its CSS is
+* named. Values about the config rather than about anything in it, so nothing refs them.
+*
+* One singleton kind, registered like every other: `register({ settings: { css: { prefix: 'acme' } } })`
+* authors it, `Settings.get(config)` reads it, and `settings/update` edits it from a tool with field
+* paths (`{ 'css.prefix': 'acme' }`). Each section is a singleton sub-entity, so it has a label of its
+* own, its own `sub-get/<section>` and `sub-update/<section>`, and a row in the changes list.
+*
+* Every section and every field is optional, and no field carries a schema default. A stored body is
+* exactly what was authored: a default that changes later reaches every system that never set the
+* field, and a clone emits only what the system chose. The defaults are the `*_DEFAULTS` constants
+* beside each section, which the readers fall back to.
+*
+* Not borrowed and not refed today. `linkable: false` is a statement about this kind, not about
+* singletons: a consumer's `link: '*'` must not inherit a source's build directories or CSS prefix.
+*/
+const systemFields = z.strictObject({ 
+/**
+* `id` is optional, and deliberately not required. A config is authored BEFORE the system exists
+* (`uds create-system` mints the id), so requiring it would make a config un-authorable until after a
+* round trip. It is also environment-coupled — the same config pushed to staging and to production is
+* two systems — so `uds push` still takes its target from `--system` or from the server's repo
+* binding; this does not replace either. What declaring it BUYS is an offline check nothing else can
+* make: a pin naming this same id is a system drawing on itself, and `attachLinkedSources` refuses it
+* by name.
+*/
+id: z.string().uuid().meta({
+	title: "System ID",
+	description: "This system's id in Create. The default target for `uds push` and remote agent edits, and what lets a build refuse a link back to itself. `uds connect` records the repo binding on the server; this is the copy the repo carries."
+}).optional() });
+/** The `system` section — what this config is in Create. */
+const SystemSection = defineSubEntity({
+	name: "system",
+	label: "System",
+	singleton: true,
+	fields: systemFields
+});
+/** The `build` section — where a repo keeps this system's sources, where `uds build` writes, and
+*  where linked systems are materialised. */
+const BuildSection = defineSubEntity({
+	name: "build",
+	label: "Build",
+	singleton: true,
+	fields: buildFields
+});
+/**
+* One prefix for both namespaces, or one each. A string names classes and variables alike; the object
+* names them apart, for a host page that already owns one of the two. Either form may be `''`, which
+* emits that namespace unprefixed.
+*/
+const prefix = z.union([z.string(), z.strictObject({
+	classNames: z.string(),
+	variables: z.string()
+})]);
+/** The `css` section as a config that set nothing reads it, spelled once. */
+const CSS_DEFAULTS = {
+	prefix: "uds",
+	preflight: true
+};
+const cssFields = z.strictObject({
+	prefix: prefix.meta({
+		title: "Prefix",
+		description: `The prefix on every emitted class and CSS variable, as in \`uds-flex\` and \`--uds-color-brand\`. One string names both; \`{ classNames, variables }\` names them apart. Empty emits that namespace unprefixed. Two systems on one page need different prefixes. Unset, \`${CSS_DEFAULTS.prefix}\`.`,
+		default: CSS_DEFAULTS.prefix
+	}).optional(),
+	/** A selector the shipped stylesheet is confined to, so its rules cannot reach the page around
+	*  the element that carries it. Unset, the sheet applies to the page. */
+	scope: z.string().min(1).meta({
+		title: "Scope",
+		description: "A selector the stylesheet is confined to, as in `.yos-app`: every rule nests under it and the token variables land on it instead of the document root. Unset, the stylesheet applies to the whole page."
+	}).optional(),
+	/** Whether the stylesheet opens with the element resets every rule below is written against. */
+	preflight: z.boolean().meta({
+		title: "Preflight",
+		description: "Start the stylesheet with the element resets, so buttons, inputs and headings begin from the same baseline in every browser. Off, the page keeps its own base styles. Unset, on.",
+		default: CSS_DEFAULTS.preflight
+	}).optional(),
+	/** Classes the stylesheet keeps whether or not a scanned file names them — for a class built at
+	*  runtime, or one used by a file the build does not scan. */
+	safelist: z.array(z.string().min(1)).meta({
+		title: "Safelist",
+		description: "Classes the stylesheet always keeps, whether or not a scanned file names them, as in `uds-bg-brand`. For a class assembled at runtime, or one used by a file the build does not scan."
+	}).optional()
+});
+/** The `css` section — how a web system names what it emits and where its stylesheet applies. A
+*  native system declares no such section, so a native config setting one is refused. */
+const CssSection = defineSubEntity({
+	name: "css",
+	label: "CSS",
+	singleton: true,
+	fields: cssFields
+});
+/** The two namespaces a prefix names, whichever form it was written in, defaulted when unset. */
+function cssPrefixes(value) {
+	if (value === void 0) return {
+		classNames: CSS_DEFAULTS.prefix,
+		variables: CSS_DEFAULTS.prefix
+	};
+	if (typeof value === "string") return {
+		classNames: value,
+		variables: value
+	};
+	return value;
+}
+/**
+* The prefix on every emitted class (`uds`). Shared with codegen, which builds class names that must
+* agree with the ones the projections produce.
+*
+* The prefix belongs to this kind's `css` section, so the reader lives beside it: a config type that
+* emits no stylesheet declares no such section, `get` answers `undefined` there, and the default is
+* what it gets. Callable on any `Config` for that reason.
+*/
+const classPrefixOf = (config) => cssPrefixes(Settings.get(config)?.css?.prefix).classNames;
+/** The prefix on every emitted custom property (`--uds-…`). The same setting as the class prefix
+*  unless the config names the two apart, for a host page that already owns one namespace. */
+const varPrefixOf = (config) => cssPrefixes(Settings.get(config)?.css?.prefix).variables;
+/** The `playground` section as a config that set nothing reads it, spelled once. */
+const PLAYGROUND_DEFAULTS = { port: 4321 };
+const playgroundFields = z.strictObject({
+	/** A path into the REPO, so it is meaningless in a config read from the database. Kept in the one
+	*  schema rather than split: settings serialize verbatim, and a stale path is inert. */
+	pagesDir: z.string().min(1).meta({
+		title: "Pages directory",
+		description: "Where `uds dev --playground` finds the pages it serves, relative to the config."
+	}).optional(),
+	port: z.number().int().meta({
+		title: "Port",
+		description: `The port the playground dev server listens on. Unset, ${PLAYGROUND_DEFAULTS.port}.`,
+		default: PLAYGROUND_DEFAULTS.port
+	}).optional()
+});
+/** The `playground` section — dev-server settings for `uds dev --playground`. */
+const PlaygroundSection = defineSubEntity({
+	name: "playground",
+	label: "Playground",
+	singleton: true,
+	fields: playgroundFields
+});
+const Settings = defineEntity({
+	kind: "settings",
+	label: "Settings",
+	labelPlural: "Settings",
+	singleton: true,
+	linkable: false,
+	authoredRefs: false,
+	fields: z.strictObject({
+		system: systemFields.meta({ title: "System" }).optional(),
+		build: buildFields.meta({ title: "Build" }).optional(),
+		css: cssFields.meta({ title: "CSS" }).optional(),
+		playground: playgroundFields.meta({ title: "Playground" }).optional()
+	}),
+	subEntities: {
+		system: SystemSection,
+		build: BuildSection,
+		css: CssSection,
+		playground: PlaygroundSection
+	}
+});
+//#endregion
+export { BuildSection, CSS_DEFAULTS, CssSection, PLAYGROUND_DEFAULTS, PlaygroundSection, Settings, SystemSection, classPrefixOf, cssPrefixes, varPrefixOf };

package/dist/entities/system/StyleProperty.d.ts

@@ -0,0 +1,135 @@
+import { Ref } from "../../framework/utils/refs.js";
+import { EntityClass } from "../../framework/defineEntity.js";
+import { Config } from "../../framework/Config.js";
+import { z } from "zod";
+
+//#region src/entities/system/StyleProperty.d.ts
+/** What a form is built against. Both members are absent when a concrete schema is needed with no
+ *  body in hand: hydration, `register`, tool derivation. */
+interface StylePropValueCtx {
+  readonly config?: Config;
+  /** The CSS properties the owning style property writes, for a form that is CSS text. */
+  readonly properties?: readonly string[];
+}
+declare const STYLE_PROP_VALUE_FORMS: {
+  readonly keyword: (ctx?: StylePropValueCtx) => z.ZodString;
+  readonly number: (_ctx?: StylePropValueCtx) => z.ZodNumber;
+  readonly token: ({
+    config
+  }?: StylePropValueCtx) => z.ZodObject<{
+    __ref: z.ZodString;
+  }, z.core.$strip>;
+  readonly tokenGroup: ({
+    config
+  }?: StylePropValueCtx) => z.ZodObject<{
+    __ref: z.ZodString;
+  }, z.core.$strip>;
+  readonly flag: (_ctx?: StylePropValueCtx) => z.ZodObject<{
+    alias: z.ZodBoolean;
+    value: z.ZodUnion<readonly [z.ZodString, z.ZodObject<{
+      __ref: z.ZodString;
+    }, z.core.$strip>, z.ZodRecord<z.ZodString, z.ZodString>]>;
+  }, z.core.$strict>;
+  readonly aliasToken: ({
+    config
+  }?: StylePropValueCtx) => z.ZodObject<{
+    alias: z.ZodUnion<readonly [z.ZodString, z.ZodNumber]>;
+    value: z.ZodObject<{
+      __ref: z.ZodString;
+    }, z.core.$strip>;
+  }, z.core.$strict>;
+  readonly aliasLiteral: (ctx?: StylePropValueCtx) => z.ZodObject<{
+    alias: z.ZodUnion<readonly [z.ZodString, z.ZodNumber]>;
+    value: z.ZodString;
+  }, z.core.$strict>;
+  readonly aliasDeclarations: (_ctx?: StylePropValueCtx) => z.ZodObject<{
+    alias: z.ZodUnion<readonly [z.ZodString, z.ZodNumber]>;
+    value: z.ZodRecord<z.ZodString, z.ZodString>;
+  }, z.core.$strict>;
+};
+type Forms = typeof STYLE_PROP_VALUE_FORMS;
+/** A form the record declares. */
+type StylePropValueKind = keyof Forms;
+/** One entry of a style property's `values`, as the config stores it. */
+type StylePropValue = { [K in StylePropValueKind]: z.infer<ReturnType<Forms[K]>> }[StylePropValueKind];
+/** One allowed value as both halves: the leaf a consumer authors and the value it resolves to. A leaf
+ *  that sets several properties to different things carries them as `declarations`. */
+interface StylePropLeaf {
+  readonly leaf: string;
+  readonly value: string;
+  readonly declarations?: Record<string, string>;
+}
+/** One entry a ref names: the leaf it is called and the qualified path it stores. */
+interface RefMember {
+  readonly leaf: string;
+  readonly path: string;
+}
+type FormValue<K extends StylePropValueKind> = z.infer<ReturnType<Forms[K]>>;
+/**
+ * What each form's stored entry stands for as leaves. `members` expands a ref to what it names, one
+ * entry for an item and one per member for a folder, since that walk is the config's. A flag's
+ * `true` is the bare prop, an empty leaf so the class is its prefix; `false` is its absence and
+ * authors nothing. A numeric alias is a leaf once it is a string: `6` names `.uds-grid-cols-6`.
+ */
+declare const STYLE_PROP_VALUE_LEAVES: { readonly [K in StylePropValueKind]: (entry: FormValue<K>, members: (target: Ref) => readonly RefMember[]) => StylePropLeaf[] };
+/** The leaves one stored entry stands for; none for a value no form admits. */
+declare function leavesOfStylePropValue(entry: unknown, members: (target: Ref) => readonly RefMember[]): StylePropLeaf[];
+/** The `values` field's member schema against `ctx`: the union of every form. With no context it is
+ *  the storage shape; with a config and the owner's properties it is also the judge. */
+declare function stylePropValueSchema(ctx?: StylePropValueCtx): z.ZodType<StylePropValue>;
+/** The form a stored entry is, or `undefined` for a value no form admits. With a config, a ref is
+ *  `token` or `tokenGroup` as the config says; without one it reads as `token`. */
+declare function stylePropValueFormOf(entry: unknown, ctx?: StylePropValueCtx): StylePropValueKind | undefined;
+/** Which form a stored entry is, asked of the config that holds it. */
+declare function classifyStylePropValue({
+  config,
+  entry
+}: {
+  config: Config;
+  entry: StylePropValue;
+}): StylePropValueKind;
+/** StyleProperty (`flex/direction`) — a prop a component can expose, mapped to a CSS
+ *  property with an allowed value set. Grouping (`flex`) is emergent from the path. */
+declare const StyleProperty: EntityClass<z.ZodObject<{
+  properties: z.ZodArray<z.ZodString>;
+  values: z.ZodOptional<z.ZodArray<z.ZodType<StylePropValue, unknown, z.core.$ZodTypeInternals<StylePropValue, unknown>>>>;
+  responsive: z.ZodDefault<z.ZodBoolean>;
+  classPrefix: z.ZodOptional<z.ZodString>;
+  arbitrary: z.ZodDefault<z.ZodBoolean>;
+  negates: z.ZodDefault<z.ZodBoolean>;
+  opacityOf: z.ZodOptional<z.ZodLazy<z.ZodType<Ref, unknown, z.core.$ZodTypeInternals<Ref, unknown>>>>;
+}, z.core.$strip>, z.ZodObject<Record<never, never>, z.core.$strip>, "style-property", {
+  readonly rename: {
+    readonly to: z.ZodString;
+  };
+  readonly create: {
+    readonly path: z.ZodString;
+    readonly description: `Create a style property \u2014 the prop a component exposes for one CSS effect. \`path\` is the prop's JSX name, camelCase (\`borderRadius\`), never a CSS name; the CSS goes in \`properties\`. \`values\` is a ref to a token GROUP (\`${string}\`), which offers every token in it and keeps the prop in step with modes and edits; \`{ "alias": "brand", "value": ${string} }\` offers one token under a name of the prop's own; a literal (\`"row"\`, \`{ "alias": "full", "value": "9999px" }\`) is for a keyword the system has no token for. Restating a token's value as a literal instead of referencing it is refused.`;
+    readonly example: ({
+      config
+    }: {
+      config: Config;
+      kind: string;
+      path: string;
+    }) => {
+      path: string;
+      data: Record<string, unknown>;
+    } | undefined;
+  };
+}, Record<never, never>, false>;
+/** `flexDirection` → `flex-direction`. A name already spelled as CSS comes back unchanged. */
+declare function toCssPropertyName(property: string): string;
+/**
+ * The CSS property names a style property governs, as the spec spells them.
+ *
+ * A web style property stores CSS names. A native one stores React Native style keys
+ * (`flexDirection`), so a surface keyed on CSS names, the designer panel's controls or a Figma
+ * paste's promotion, compares through this rather than against `properties` directly. A key only
+ * React Native defines (`paddingHorizontal`) comes back hyphenated and matches no CSS-keyed control,
+ * which is the right answer.
+ */
+declare function cssPropertyNames(styleProp: {
+  readonly properties: readonly string[];
+}): string[];
+//#endregion
+export { RefMember, STYLE_PROP_VALUE_FORMS, STYLE_PROP_VALUE_LEAVES, StylePropLeaf, StylePropValue, StylePropValueCtx, StylePropValueKind, StyleProperty, classifyStylePropValue, cssPropertyNames, leavesOfStylePropValue, stylePropValueFormOf, stylePropValueSchema, toCssPropertyName };