npm - dothtml-interfaces - Versions diffs - 0.4.7 → 1.0.0 - Mend

dothtml-interfaces 0.4.7 → 1.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (27) hide show

package/src/styles/{i-dot-css.d.ts → i-dot-css.ts} RENAMED Viewed

@@ -1,214 +1,218 @@
-import IAtColorProfileBuilder from "./at-rules/i-at-color-profile-builder";
-import IAtCounterStyleBuilder from "./at-rules/i-at-counter-style-builder";
-import IAtFontPaletteValues from "./at-rules/i-at-font-palette-values";
-import IAtKeyframesBuilder from "./at-rules/i-at-keyframes-builder";
-import IAtPageBuilder from "./at-rules/i-at-page-builder";
-import IDotcssProp from "./i-css-prop";
-// EASING FUNCTION
-// type StepPosition = "jump-start"|"jump-end"|"jump-none"|"jump-both"|"start"|"end";
-// type LinearStopLength = Percentage|`${Percentage} ${Percentage}`;
-// type LinearStop = number|`${number} ${LinearStopLength}`|`${LinearStopLength} ${number}`;
-// type LinearStopList = `${LinearStop}${`, ${LinearStop}${`, ${LinearStop}${`, ${LinearStop}${`, ${LinearStop}${ComplexType}`|""}`|""}`|""}`|""}`;
-// type StepEasingFunction = "step-start"|"step-end"|`steps(${Int}${`, ${StepPosition}`|""})`;
-// type CubicBezierEasingFunction = "ease"|"ease-in"|"ease-out"|"ease-in-out"|`cubic-bezier(${number}, ${number}, ${number}, ${number})`;
-// type LinearEasingFunction = `linear(${LinearStopList})`;
-// type EasingFunction = "linear"|LinearEasingFunction|CubicBezierEasingFunction|StepEasingFunction;
-// FILTER FUNCTION
-// TODO: don't forget to provide builders for these. Already put work into some.
-// type SaturateFunction = `saturate(${number|Percentage|""})`;
-// type SepiaFunction = `sepia(${number|Percentage|""})`;
-// type OpacityFunction = `opacity(${number|Percentage|""})`;
-// type InvertFunction = `invert(${number|Percentage|""})`;
-// type GrayscaleFunction = `grayscale(${number|Percentage|""})`;
-// type ContrastFunction = `contrast(${number|Percentage|""})`;
-// type BrightnessFunction = `brightness(${number|Percentage|""})`;
-// type BlurFunction = `blur(${NumericLength|""})`;
-// Regrettably, strong typing for color isn't possible due to the type complexity.
-// Even SimpleColor doesn't work. We use string in place of Color.
-// type DropShadowFunction = `drop-shadow(${`${ComplexType} ${NumericLength} ${NumericLength}`
-// 	|`${NumericLength} ${NumericLength} ${ComplexType}`
-// 	|`${NumericLength} ${NumericLength}`
-// 	|`${ComplexType} ${NumericLength} ${NumericLength} ${NumericLength}`
-// 	|`${NumericLength} ${NumericLength} ${NumericLength} ${ComplexType}`
-// 	|`${NumericLength} ${NumericLength} ${NumericLength}`
-// })`;
-// type HueRotateFunction = `hue-rotate(${Angle|""})`;
-// type FilterFunction = SaturateFunction|SepiaFunction|OpacityFunction|InvertFunction|GrayscaleFunction|ContrastFunction|BrightnessFunction|BlurFunction|DropShadowFunction|HueRotateFunction;
-// FLEX
-type Flex = `${number}fr`;
-// FONT
-// type GenericFamily = "serif" | "sans-serif" | "monospace" | "cursive" | "fantasy" | "system-ui" | "ui-serif" | "ui-sans-serif" | "ui-monospace" | "ui-rounded" | "emoji" | "math" | "fangsong";
-// POSITION
-// type HorizontalPosition = "left" | "center" | "right" | LengthPercentage;
-// type VerticalPosition = "top" | "center" | "bottom" | LengthPercentage;
-// type Position =
-//     | HorizontalPosition
-//     | VerticalPosition
-//     | `${HorizontalPosition} ${VerticalPosition}`
-//     | `${VerticalPosition} ${HorizontalPosition}`
-//     | `${"left" | "right"} ${LengthPercentage}`
-//     | `${"top" | "bottom"} ${LengthPercentage}`
-//     | `${"left" | "right"} ${LengthPercentage} ${"top" | "bottom"} ${LengthPercentage}`
-//     | `${"top" | "bottom"} ${LengthPercentage} ${"left" | "right"} ${LengthPercentage}`;
-// GRADIENT
-// https://developer.mozilla.org/en-US/docs/Web/CSS/gradient
-// TODO: absolutely need a builder for this.
-// type RadialShape = "circle"|"ellipse";
-// type RadialExtent = "closest-corner"|"closest-side"|"farthest-corner"|"farthest-side";
-// type SideOrCorner = "left"|"right"|"top"|"bottom"|`${"left" | "right"} ${"top" | "bottom"}`|`${"top" | "bottom"} ${"left" | "right"}`;
-// type RadialSize = `${RadialExtent} ${NumericLength} ${LengthPercentage} ${LengthPercentage}`;
-// type LinearColorStop = Color|`${Color} ${LengthPercentage}`;
-// type LinearColorHint = LengthPercentage;
-// // type LinearColorStopListItem = LinearColorStop|`${LinearColorHint}, ${LinearColorStop}`; // TOO COMPLEX :(
-// type LinearColorStopListItem = LinearColorStop|`${ComplexType}, ${LinearColorStop}`; // TODO: this type got botched due to complexity.
-// type ColorStopList = `${LinearColorStop}${`, ${ComplexType}`}`|`${LinearColorStop}`;
-// type AngleOrSideOrCorner = Angle | `to ${SideOrCorner}, `;
-// type LinearGradientSyntax = ComplexType; //`${`${AngleOrSideOrCorner} `|""}${ColorStopList}`;
-// // type RadiatShapeOrSize = RadialShape | RadialSize | `${RadialShape} ${RadialSize}` | `${RadialSize} ${RadialShape}`;
-// type RadiatShapeOrSize = RadialShape | RadialSize | ComplexType;//`${RadialShape} ${RadialSize}` | `${RadialSize} ${RadialShape}`;
-// type RadialGradientSyntax = `${`${RadiatShapeOrSize} ` | ""} [ at <position> ]? , <color-stop-list>`;
-// type LinearGradientFunction = `linear-gradient(${LinearGradientSyntax})`;
-// type RepeatingLinearGradientFunction = `linear-gradient(${LinearGradientSyntax})`;
-// type RadialGradientFunction = `radial-gradient(${RadialGradientSyntax})`;
-// type RepeatingRadialGradientFunction = `radial-gradient(${RadialGradientSyntax})`;
-// type Gradient = LinearGradientFunction | RepeatingLinearGradientFunction | RadialGradientFunction | RepeatingRadialGradientFunction;
-// URL
-// type Url = `${"src"|"url"}(${string})`;
-// IMAGE
-// type Image = Url|Gradient;
-// TODO:
-// https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function
-// type TransformFunction = ComplexType;
-// Building blocks.
-// type OptionalWhitespace = ""|" ";
-// export type Percentage = number|`${number}%`; // Used for filters.
-// ts starts complaining about the complexity of the type :(
-// Types
-// TODO: look up types online and correct this.
-// https://developer.mozilla.org/en-US/docs/Web/CSS/absolute-size
-// MORE COMPLEX TYPES?
-// type NumericLengthOrAuto = NumericLength|"auto";
-// type NumericAngle = number|`${number}${AngleUnits}`;
-// type AppearanceValues = BasicCommonValues|"none"|"menulist-button"|"textfield"|"button"|"searchfield"|"textarea"|"push-button"|"slider-horizontal"|"checkbox"|"radio"|"square-button"|"menulist"|"listbox"|"meter"|"progress-bar"|"scrollbarbutton-up"|"button-bevel"|"media-mute-button"|"caret";
-// type BackgroundAttachmentValues = BasicCommonValues|"scroll"|"fixed"|"local";
-// type BackgroundRepeatValues = GKV|"no-repeat"|"repeat"|"space"|"round";
-// type BackgroundOriginValues = GKV|"padding-box"|"border-box"|"content-box";
-// type BackgroundSizeValues = BasicCommonValues|"auto"|NumericLength|"cover"|"contain";
-// type BackfaceVisibilityValues = BasicCommonValues|"visible"|"hidden";
-// type BorderStyles = GKV|"dotted"|"dashed"|"solid"|"double"|"groove"|"ridge"|"inset"|"outset"|"none"|"hidden";
-// type DisplayValues = BasicCommonValues|"inline"|"block"|"contents"|"flex"|"grid"|"inline-block"|"inline-flex"|"inline-grid"|"inline-table"|"list-item"|"run-in"|"table"|"table-caption"|"table-column-group"|"table-header-group"|"table-footer-group"|"table-row-group"|"table-cell"|"table-column"|"table-row"|"none";
-// type DirectionValues = BasicCommonValues|"ltr"|"rtl";
-// type FontStyleValues = BasicCommonValues|"normal"|"italic"|"oblique";
-// type FontVariantValues = BasicCommonValues|"normal"|"small-caps";
-// type FontVariantCapsValues = FontVariantValues|"all-small-caps"|"petite-caps"|"all-petite-caps"|"unicase"|"titling-caps";
-// type FontWeightValues = GKV|ValueOrReactive<number>|"normal"|"bold"|"bolder"|"lighter";
-// type OutlineWidthValues = GKV|"medium"|"thin"|"thick"|NumericLength;
-// type PositionNames = BasicCommonValues|"static"|"relative"|"fixed"|"absolute"|"sticky";
-// type FlexDirectionNames = BasicCommonValues|"row"|"row-reverse"|"column"|"column-reverse";
-// type FlexWrapNames = BasicCommonValues|"nowrap"|"wrap"|"wrap-reverse";
-// Advanced formatted types.
-// type BackgroundRepeatValues2d = BackgroundRepeatValues|"repeat-x"|"repeat-y"|`${BackgroundRepeatValues} ${BackgroundRepeatValues}`;
-// type BorderShorthand = BasicCommonValues|`${BorderStyles}`|`${BorderStyles} ${Color}`|ComplexType;//`${number}${AllLengthUnits} ${BorderStyles} ${Color}`;
-// type BackgroundImageFormat = BasicCommonValues|Url|`${Url}, ${Url}`;
-// type BackgroundPositionShorthand2D = BasicCommonValues|`${BasicCommonValues|number} ${BasicCommonValues|number}`|`${number}% ${number}%`|`${"left"|"right"|"center"} ${"top"|"center"|"bottom"}`;
-// type BackgroundShorthand = BasicCommonValues|ComplexType;//`${Color} ${Url} ${BackgroundRepeatValues} ${BackgroundPositionShorthand2D}`;
-// type FlexFlowShorthand = BasicCommonValues|`${FlexDirectionNames} ${FlexWrapNames}`;
-// type FlexShorthand = BasicCommonValues|`${BasicCommonValues|number} ${BasicCommonValues|number} ${BasicCommonValues|`${number}${AllLengthUnits}`}`;
-export default interface IDotCss extends IDotcssProp{
-	// TODO: ensure each of these has test cases.
-	// Right now, most of these don't actually work. But they're typed so that they can progressively be added to the librrary.
-	(selector: "@charset", charset: string): void;
-	(selector: "@color-profile", name: string, styles: IAtColorProfileBuilder): void;
-	(selector: "@container", condition: string, styles: IDotcssProp): void;
-	(selector: "@counter-style", name: string, styles: IAtCounterStyleBuilder): void;
-	// (selector: "@document"): void; // Deprecated. Will not support it. https://developer.mozilla.org/en-US/docs/Web/CSS/@document
-	(selector: "@font-face"): void;
-	// (selector: "@font-feature-values"): void; // Need more info on declaration rule lists. https://developer.mozilla.org/en-US/docs/Web/CSS/@font-feature-values
-	(selector: "@font-palette-values", identifier: string, rules: IAtFontPaletteValues): void;
-	(selector: "@import", value: string): void;
-	(selector: "@keyframes", name: string, rules: IAtKeyframesBuilder): void;
-	(selector: "@layer", layerNames: string|string[]): void;
-	(selector: "@layer", rules: Record<string, IDotcssProp>): void;
-	(selector: "@layer", layerName: string, rules: Record<string, IDotcssProp>): void;
-	(selector: "@media", rules: Record<string, IDotcssProp>): void;
-	(selector: "@namespace", value: string): void;
-	(selector: "@page", styles: IAtPageBuilder): void;
-	(selector: "@page", pseudo: string, styles: IAtPageBuilder): void;
-	// (selector: "@property"): void; // This would be great if we could extend dothtml. Until then, there's no point of adding this because it only applies within CSS. Note that this can also be called using javascript. https://developer.mozilla.org/en-US/docs/Web/CSS/@property
-	(selector: "@scope", rules: Record<string, IDotcssProp>): void;
-	(selector: "@scope", scope: string, rules: Record<string, IDotcssProp>): void;
-	// (selector: "@starting-style"): void; // This one can be used as a standalone block or as a nested block. It needs more thought. Not supported yet. https://developer.mozilla.org/en-US/docs/Web/CSS/@starting-style
-	// (selector: "@supports", condition: string): void; // This needs more thought. Normally the selectors are accepted as params, but here they go inside. Not supported yet. https://developer.mozilla.org/en-US/docs/Web/CSS/@supports
-	(selector: Array<HTMLElement>|HTMLElement|string, styles: IDotcssProp): void;
-	(styles: IDotcssProp): void;
-	version: string;
-}
-// export interface IDotcssAnimatable<T> extends IDotcssProp{
-// 	(value: T): IDotcssProp;
-// 	animate(value: number|string, duration: number, style: "ease", complete: Function): IDotcssProp;
-// }
-// export interface IDotcssAnimatableColor extends IDotcssProp{
-// 	(value: Color|Array<number>): IDotcssProp;
-// 	(r: number, g: number, b: number, a?: number): IDotcssProp;
-// 	animate(value: Color|Array<number>, duration: number, style: "ease", complete: Function): IDotcssProp;
-// }
-// export interface HideParams{
-// 	duration?: number,
-// 	complete?: Function,
-// 	hideStyle?: "normal"|"fade"|"shrink",
-// 	animationStyle?: "ease",
-// }
-// export interface ShowParams{
-// 	duration?: number,
-// 	display?: DisplayValues, // TODO: potential to expand this.
-// 	complete?: Function,
-// 	opacity?: number,
-// 	width?: number,
-// 	height?: number,
-// 	showStyle?: "normal"|"fade"|"grow",
-// 	animationStyle?: "ease",
-// }
-// TODO: add tests for these. Especially the 2-parameter ones.
+import IAtColorProfileBuilder from "./at-rules/i-at-color-profile-builder";
+import IAtCounterStyleBuilder from "./at-rules/i-at-counter-style-builder";
+import IAtFontPaletteValues from "./at-rules/i-at-font-palette-values";
+import IAtKeyframesBuilder from "./at-rules/i-at-keyframes-builder";
+import IAtPageBuilder from "./at-rules/i-at-page-builder";
+import IDotcssProp from "./i-css-prop";
+// EASING FUNCTION
+// type StepPosition = "jump-start"|"jump-end"|"jump-none"|"jump-both"|"start"|"end";
+// type LinearStopLength = Percentage|`${Percentage} ${Percentage}`;
+// type LinearStop = number|`${number} ${LinearStopLength}`|`${LinearStopLength} ${number}`;
+// type LinearStopList = `${LinearStop}${`, ${LinearStop}${`, ${LinearStop}${`, ${LinearStop}${`, ${LinearStop}${ComplexType}`|""}`|""}`|""}`|""}`;
+// type StepEasingFunction = "step-start"|"step-end"|`steps(${Int}${`, ${StepPosition}`|""})`;
+// type CubicBezierEasingFunction = "ease"|"ease-in"|"ease-out"|"ease-in-out"|`cubic-bezier(${number}, ${number}, ${number}, ${number})`;
+// type LinearEasingFunction = `linear(${LinearStopList})`;
+// type EasingFunction = "linear"|LinearEasingFunction|CubicBezierEasingFunction|StepEasingFunction;
+// FILTER FUNCTION
+// TODO: don't forget to provide builders for these. Already put work into some.
+// type SaturateFunction = `saturate(${number|Percentage|""})`;
+// type SepiaFunction = `sepia(${number|Percentage|""})`;
+// type OpacityFunction = `opacity(${number|Percentage|""})`;
+// type InvertFunction = `invert(${number|Percentage|""})`;
+// type GrayscaleFunction = `grayscale(${number|Percentage|""})`;
+// type ContrastFunction = `contrast(${number|Percentage|""})`;
+// type BrightnessFunction = `brightness(${number|Percentage|""})`;
+// type BlurFunction = `blur(${NumericLength|""})`;
+// Regrettably, strong typing for color isn't possible due to the type complexity.
+// Even SimpleColor doesn't work. We use string in place of Color.
+// type DropShadowFunction = `drop-shadow(${`${ComplexType} ${NumericLength} ${NumericLength}`
+// 	|`${NumericLength} ${NumericLength} ${ComplexType}`
+// 	|`${NumericLength} ${NumericLength}`
+// 	|`${ComplexType} ${NumericLength} ${NumericLength} ${NumericLength}`
+// 	|`${NumericLength} ${NumericLength} ${NumericLength} ${ComplexType}`
+// 	|`${NumericLength} ${NumericLength} ${NumericLength}`
+// })`;
+// type HueRotateFunction = `hue-rotate(${Angle|""})`;
+// type FilterFunction = SaturateFunction|SepiaFunction|OpacityFunction|InvertFunction|GrayscaleFunction|ContrastFunction|BrightnessFunction|BlurFunction|DropShadowFunction|HueRotateFunction;
+// FLEX
+type Flex = `${number}fr`;
+// FONT
+// type GenericFamily = "serif" | "sans-serif" | "monospace" | "cursive" | "fantasy" | "system-ui" | "ui-serif" | "ui-sans-serif" | "ui-monospace" | "ui-rounded" | "emoji" | "math" | "fangsong";
+// POSITION
+// type HorizontalPosition = "left" | "center" | "right" | LengthPercentage;
+// type VerticalPosition = "top" | "center" | "bottom" | LengthPercentage;
+// type Position =
+//     | HorizontalPosition
+//     | VerticalPosition
+//     | `${HorizontalPosition} ${VerticalPosition}`
+//     | `${VerticalPosition} ${HorizontalPosition}`
+//     | `${"left" | "right"} ${LengthPercentage}`
+//     | `${"top" | "bottom"} ${LengthPercentage}`
+//     | `${"left" | "right"} ${LengthPercentage} ${"top" | "bottom"} ${LengthPercentage}`
+//     | `${"top" | "bottom"} ${LengthPercentage} ${"left" | "right"} ${LengthPercentage}`;
+// GRADIENT
+// https://developer.mozilla.org/en-US/docs/Web/CSS/gradient
+// TODO: absolutely need a builder for this.
+// type RadialShape = "circle"|"ellipse";
+// type RadialExtent = "closest-corner"|"closest-side"|"farthest-corner"|"farthest-side";
+// type SideOrCorner = "left"|"right"|"top"|"bottom"|`${"left" | "right"} ${"top" | "bottom"}`|`${"top" | "bottom"} ${"left" | "right"}`;
+// type RadialSize = `${RadialExtent} ${NumericLength} ${LengthPercentage} ${LengthPercentage}`;
+// type LinearColorStop = Color|`${Color} ${LengthPercentage}`;
+// type LinearColorHint = LengthPercentage;
+// // type LinearColorStopListItem = LinearColorStop|`${LinearColorHint}, ${LinearColorStop}`; // TOO COMPLEX :(
+// type LinearColorStopListItem = LinearColorStop|`${ComplexType}, ${LinearColorStop}`; // TODO: this type got botched due to complexity.
+// type ColorStopList = `${LinearColorStop}${`, ${ComplexType}`}`|`${LinearColorStop}`;
+// type AngleOrSideOrCorner = Angle | `to ${SideOrCorner}, `;
+// type LinearGradientSyntax = ComplexType; //`${`${AngleOrSideOrCorner} `|""}${ColorStopList}`;
+// // type RadiatShapeOrSize = RadialShape | RadialSize | `${RadialShape} ${RadialSize}` | `${RadialSize} ${RadialShape}`;
+// type RadiatShapeOrSize = RadialShape | RadialSize | ComplexType;//`${RadialShape} ${RadialSize}` | `${RadialSize} ${RadialShape}`;
+// type RadialGradientSyntax = `${`${RadiatShapeOrSize} ` | ""} [ at <position> ]? , <color-stop-list>`;
+// type LinearGradientFunction = `linear-gradient(${LinearGradientSyntax})`;
+// type RepeatingLinearGradientFunction = `linear-gradient(${LinearGradientSyntax})`;
+// type RadialGradientFunction = `radial-gradient(${RadialGradientSyntax})`;
+// type RepeatingRadialGradientFunction = `radial-gradient(${RadialGradientSyntax})`;
+// type Gradient = LinearGradientFunction | RepeatingLinearGradientFunction | RadialGradientFunction | RepeatingRadialGradientFunction;
+// URL
+// type Url = `${"src"|"url"}(${string})`;
+// IMAGE
+// type Image = Url|Gradient;
+// TODO:
+// https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function
+// type TransformFunction = ComplexType;
+// Building blocks.
+// type OptionalWhitespace = ""|" ";
+// export type Percentage = number|`${number}%`; // Used for filters.
+// ts starts complaining about the complexity of the type :(
+// Types
+// TODO: look up types online and correct this.
+// https://developer.mozilla.org/en-US/docs/Web/CSS/absolute-size
+// MORE COMPLEX TYPES?
+// type NumericLengthOrAuto = NumericLength|"auto";
+// type NumericAngle = number|`${number}${AngleUnits}`;
+// type AppearanceValues = BasicCommonValues|"none"|"menulist-button"|"textfield"|"button"|"searchfield"|"textarea"|"push-button"|"slider-horizontal"|"checkbox"|"radio"|"square-button"|"menulist"|"listbox"|"meter"|"progress-bar"|"scrollbarbutton-up"|"button-bevel"|"media-mute-button"|"caret";
+// type BackgroundAttachmentValues = BasicCommonValues|"scroll"|"fixed"|"local";
+// type BackgroundRepeatValues = GKV|"no-repeat"|"repeat"|"space"|"round";
+// type BackgroundOriginValues = GKV|"padding-box"|"border-box"|"content-box";
+// type BackgroundSizeValues = BasicCommonValues|"auto"|NumericLength|"cover"|"contain";
+// type BackfaceVisibilityValues = BasicCommonValues|"visible"|"hidden";
+// type BorderStyles = GKV|"dotted"|"dashed"|"solid"|"double"|"groove"|"ridge"|"inset"|"outset"|"none"|"hidden";
+// type DisplayValues = BasicCommonValues|"inline"|"block"|"contents"|"flex"|"grid"|"inline-block"|"inline-flex"|"inline-grid"|"inline-table"|"list-item"|"run-in"|"table"|"table-caption"|"table-column-group"|"table-header-group"|"table-footer-group"|"table-row-group"|"table-cell"|"table-column"|"table-row"|"none";
+// type DirectionValues = BasicCommonValues|"ltr"|"rtl";
+// type FontStyleValues = BasicCommonValues|"normal"|"italic"|"oblique";
+// type FontVariantValues = BasicCommonValues|"normal"|"small-caps";
+// type FontVariantCapsValues = FontVariantValues|"all-small-caps"|"petite-caps"|"all-petite-caps"|"unicase"|"titling-caps";
+// type FontWeightValues = GKV|ValueOrReactive<number>|"normal"|"bold"|"bolder"|"lighter";
+// type OutlineWidthValues = GKV|"medium"|"thin"|"thick"|NumericLength;
+// type PositionNames = BasicCommonValues|"static"|"relative"|"fixed"|"absolute"|"sticky";
+// type FlexDirectionNames = BasicCommonValues|"row"|"row-reverse"|"column"|"column-reverse";
+// type FlexWrapNames = BasicCommonValues|"nowrap"|"wrap"|"wrap-reverse";
+// Advanced formatted types.
+// type BackgroundRepeatValues2d = BackgroundRepeatValues|"repeat-x"|"repeat-y"|`${BackgroundRepeatValues} ${BackgroundRepeatValues}`;
+// type BorderShorthand = BasicCommonValues|`${BorderStyles}`|`${BorderStyles} ${Color}`|ComplexType;//`${number}${AllLengthUnits} ${BorderStyles} ${Color}`;
+// type BackgroundImageFormat = BasicCommonValues|Url|`${Url}, ${Url}`;
+// type BackgroundPositionShorthand2D = BasicCommonValues|`${BasicCommonValues|number} ${BasicCommonValues|number}`|`${number}% ${number}%`|`${"left"|"right"|"center"} ${"top"|"center"|"bottom"}`;
+// type BackgroundShorthand = BasicCommonValues|ComplexType;//`${Color} ${Url} ${BackgroundRepeatValues} ${BackgroundPositionShorthand2D}`;
+// type FlexFlowShorthand = BasicCommonValues|`${FlexDirectionNames} ${FlexWrapNames}`;
+// type FlexShorthand = BasicCommonValues|`${BasicCommonValues|number} ${BasicCommonValues|number} ${BasicCommonValues|`${number}${AllLengthUnits}`}`;
+export default interface IDotCss extends IDotcssProp{
+	// TODO: ensure each of these has test cases.
+	// Right now, most of these don't actually work. But they're typed so that they can progressively be added to the librrary.
+	(selector: "@charset", charset: string): void;
+	(selector: "@color-profile", name: string, styles: IAtColorProfileBuilder): void;
+	(selector: "@container", condition: string, styles: IDotcssProp): void;
+	(selector: "@counter-style", name: string, styles: IAtCounterStyleBuilder): void;
+	// (selector: "@document"): void; // Deprecated. Will not support it. https://developer.mozilla.org/en-US/docs/Web/CSS/@document
+	(selector: "@font-face"): void;
+	// (selector: "@font-feature-values"): void; // Need more info on declaration rule lists. https://developer.mozilla.org/en-US/docs/Web/CSS/@font-feature-values
+	(selector: "@font-palette-values", identifier: string, rules: IAtFontPaletteValues): void;
+	(selector: "@import", value: string): void;
+	(selector: "@keyframes", name: string, rules: IAtKeyframesBuilder): void;
+	(selector: "@layer", layerNames: string|string[]): void;
+	(selector: "@layer", rules: Record<string, IDotcssProp>): void;
+	(selector: "@layer", layerName: string, rules: Record<string, IDotcssProp>): void;
+	(selector: "@media", rules: Record<string, IDotcssProp>): void;
+	(selector: "@namespace", value: string): void;
+	(selector: "@page", styles: IAtPageBuilder): void;
+	(selector: "@page", pseudo: string, styles: IAtPageBuilder): void;
+	// (selector: "@property"): void; // This would be great if we could extend dothtml. Until then, there's no point of adding this because it only applies within CSS. Note that this can also be called using javascript. https://developer.mozilla.org/en-US/docs/Web/CSS/@property
+	(selector: "@scope", rules: Record<string, IDotcssProp>): void;
+	(selector: "@scope", scope: string, rules: Record<string, IDotcssProp>): void;
+	// (selector: "@starting-style"): void; // This one can be used as a standalone block or as a nested block. It needs more thought. Not supported yet. https://developer.mozilla.org/en-US/docs/Web/CSS/@starting-style
+	// (selector: "@supports", condition: string): void; // This needs more thought. Normally the selectors are accepted as params, but here they go inside. Not supported yet. https://developer.mozilla.org/en-US/docs/Web/CSS/@supports
+	(selector: Array<HTMLElement>|HTMLElement|string, styles: IDotcssProp): void;
+	(styles: IDotcssProp): void;
+	variable(name: string, value: any): this;
+	v(name: string): string;
+	[prop: string]: any;
+	version: string;
+}
+// export interface IDotcssAnimatable<T> extends IDotcssProp{
+// 	(value: T): IDotcssProp;
+// 	animate(value: number|string, duration: number, style: "ease", complete: Function): IDotcssProp;
+// }
+// export interface IDotcssAnimatableColor extends IDotcssProp{
+// 	(value: Color|Array<number>): IDotcssProp;
+// 	(r: number, g: number, b: number, a?: number): IDotcssProp;
+// 	animate(value: Color|Array<number>, duration: number, style: "ease", complete: Function): IDotcssProp;
+// }
+// export interface HideParams{
+// 	duration?: number,
+// 	complete?: Function,
+// 	hideStyle?: "normal"|"fade"|"shrink",
+// 	animationStyle?: "ease",
+// }
+// export interface ShowParams{
+// 	duration?: number,
+// 	display?: DisplayValues, // TODO: potential to expand this.
+// 	complete?: Function,
+// 	opacity?: number,
+// 	width?: number,
+// 	height?: number,
+// 	showStyle?: "normal"|"fade"|"grow",
+// 	animationStyle?: "ease",
+// }
+// TODO: add tests for these. Especially the 2-parameter ones.

package/src/styles/mapped-types/{angle-prop.d.ts → angle-prop.ts} RENAMED Viewed

@@ -1,16 +1,16 @@
-import { IReactive } from "../../bindings/i-reactive";
-type V = IReactive | number | string;
-type AngleUnitSuffix = "" | "Deg" | "Grad" | "Rad" | "Turn";
-type AngleProp<Prefixes extends Array<string>, Qty extends 1|2|3|4 = 1> = {
-	[Key in AngleUnitSuffix as `${Prefixes[number]}${Key}`]?: (
-		(Qty extends 1 ? V|[V] : void) |
-		(Qty extends 2 ? [V, V] : void) |
-		(Qty extends 3 ? [V, V, V] : void) |
-		(Qty extends 4 ? [V, V, V, V] : void)
-	);
-};
+import { IReactive } from "../../bindings/i-reactive";
+type V = IReactive | number | string;
+type AngleUnitSuffix = "" | "Deg" | "Grad" | "Rad" | "Turn";
+type AngleProp<Prefixes extends Array<string>, Qty extends 1|2|3|4 = 1> = {
+	[Key in AngleUnitSuffix as `${Prefixes[number]}${Key}`]?: (
+		(Qty extends 1 ? V|[V] : void) |
+		(Qty extends 2 ? [V, V] : void) |
+		(Qty extends 3 ? [V, V, V] : void) |
+		(Qty extends 4 ? [V, V, V, V] : void)
+	);
+};
 export default AngleProp;

package/src/styles/mapped-types/{color-props.d.ts → color-props.ts} RENAMED Viewed

@@ -1,61 +1,61 @@
-import { IBinding } from "../../bindings/i-binding";
-import { IWatcher } from "../../bindings/i-watcher";
-type V = IBinding<any, number|string>| IWatcher<number|string> | number | string;
-type ColorUnitSuffix = ""
-	| "Rgb"
-	| "Lab"
-	| "Oklab"
-	| "Hsl" | "HslDeg" | "HslGrad" | "HslRad" | "HslTurn"
-	| "Hwb" | "HwbDeg" | "HwbGrad" | "HwbRad" | "HwbTurn"
-	| "Lch" | "LchDeg" | "LchGrad" | "LchRad" | "LchTurn"
-	| "Oklch" | "OklchDeg" | "OklchGrad" | "OklchRad" | "OklchTurn"
-	| "Color"
-	| "Srgb"|"SrgbLinear"|"DisplayP3"|"A98Rgb"|"ProphotoRgb"|"Rec2020"
-	| "Xyz"|"XyzD50"|"XyzD65";
-type NamedColor = "aliceblue"|"antiquewhite"|"aqua"|"aquamarine"|"azure"|"beige"|"bisque"|"black"|"blanchedalmond"|"blue"|"blueviolet"|"brown"|"burlywood"|"cadetblue"|"chartreuse"|"chocolate"|"coral"|"cornflowerblue"|"cornsilk"|"crimson"|"cyan"|"darkblue"|"darkcyan"|"darkgoldenrod"|"darkgray"|"darkgrey"|"darkgreen"|"darkkhaki"|"darkmagenta"|"darkolivegreen"|"darkorange"|"darkorchid"|"darkred"|"darksalmon"|"darkseagreen"|"darkslateblue"|"darkslategray"|"darkslategrey"|"darkturquoise"|"darkviolet"|"deeppink"|"deepskyblue"|"dimgray"|"dimgrey"|"dodgerblue"|"firebrick"|"floralwhite"|"forestgreen"|"fuchsia"|"gainsboro"|"ghostwhite"|"gold"|"goldenrod"|"gray"|"grey"|"green"|"greenyellow"|"honeydew"|"hotpink"|"indianred"|"indigo"|"ivory"|"khaki"|"lavender"|"lavenderblush"|"lawngreen"|"lemonchiffon"|"lightblue"|"lightcoral"|"lightcyan"|"lightgoldenrodyellow"|"lightgray"|"lightgrey"|"lightgreen"|"lightpink"|"lightsalmon"|"lightseagreen"|"lightskyblue"|"lightslategray"|"lightslategrey"|"lightsteelblue"|"lightyellow"|"lime"|"limegreen"|"linen"|"magenta"|"maroon"|"mediumaquamarine"|"mediumblue"|"mediumorchid"|"mediumpurple"|"mediumseagreen"|"mediumslateblue"|"mediumspringgreen"|"mediumturquoise"|"mediumvioletred"|"midnightblue"|"mintcream"|"mistyrose"|"moccasin"|"navajowhite"|"navy"|"oldlace"|"olive"|"olivedrab"|"orange"|"orangered"|"orchid"|"palegoldenrod"|"palegreen"|"paleturquoise"|"palevioletred"|"papayawhip"|"peachpuff"|"peru"|"pink"|"plum"|"powderblue"|"purple"|"rebeccapurple"|"red"|"rosybrown"|"royalblue"|"saddlebrown"|"salmon"|"sandybrown"|"seagreen"|"seashell"|"sienna"|"silver"|"skyblue"|"slateblue"|"slategray"|"slategrey"|"snow"|"springgreen"|"steelblue"|"tan"|"teal"|"thistle"|"tomato"|"turquoise"|"violet"|"wheat"|"white"|"whitesmoke"|"yellow"|"yellowgreen";
-type SystemColor = "AccentColor"|"AccentColorText"|"ActiveText"|"ButtonBorder"|"ButtonFace"|"ButtonText"|"Canvas"|"CanvasText"|"Field"|"FieldText"|"GrayText"|"Highlight"|"HighlightText"|"LinkText"|"Mark"|"MarkText"|"SelectedItem"|"SelectedItemText"|"VisitedText";
-type SpecialColors = "currentcolor"|"transparent";
-type ColorProp<Prefix extends string> = {
-	[Key in ColorUnitSuffix as `${Prefix}${Key}`]?: (
-		(Key extends "" ? IBinding<any, string> | IWatcher<string> | NamedColor | SystemColor | SpecialColors | `#${string}` | `${"rgb"|"rgba"|"hsl"|"hsla"|"hwb"|"lab"|"lch"|"oklab"|"oklch"|"color"}(${string})` : void) |
-		(Key extends "Rgb" | "Hsl" | "HslDeg" | "HslGrad" | "HslRad" | "HslTurn" | "Hwb" | "HwbDeg" | "HwbGrad" | "HwbRad" | "HwbTurn" | "Lab" | "Lch" | "LchDeg" | "LchGrad" | "LchRad" | "LchTurn" | "Oklch" | "OklchDeg" | "OklchGrad" | "OklchRad" | "OklchTurn" ? [V, V, V] | [V, V, V, V] : void) |
-		(Key extends "Srgb" | "SrgbLinear" | "DisplayP3" | "A98Rgb" | "ProphotoRgb" | "Rec2020" | "Xyz" | "XyzD50" | "XyzD65" ? [V, V, V] : void)
-	);
-};
-export default ColorProp;
-// Color
-// export type Hue = number|Angle;
-// export type PredefinedRgb = "srgb"|"srgb-linear"|"display-p3"|"a98-rgb"|"prophoto-rgb"|"rec2020";
-// export type XyzSpace = "xyz"|"xyz-d50"|"xyz-d65";
-// export type XyzParams = `${XyzSpace}                ${number|Percentage|"none"} ${number|Percentage|"none"} ${number|Percentage|"none"}`
-// export type PredefinedRgbParams = `${PredefinedRgb} ${number|Percentage|"none"} ${number|Percentage|"none"} ${number|Percentage|"none"}`
-// export type ColorspaceParams = PredefinedRgbParams|XyzParams;
-// export type LRgba<T extends number|AlphaValue> = `rgb(${T}, ${T}, ${T})` | `rgba(${T}, ${T}, ${T}, ${AlphaValue})`;
-// export type MRgba = `rgb(${number|Percentage|"none"} ${number|Percentage|"none"} ${number|Percentage|"none"})` | `rgba(${number|Percentage|"none"} ${number|Percentage|"none"} ${number|Percentage|"none"} / ${AlphaValue})`;
-// export type Rgba = LRgba<number|AlphaValue>|MRgba;
-// export type LHsla = `hsl(${Hue}, ${Percentage}, ${Percentage})` | `hsla(${Hue}, ${Percentage}, ${Percentage}, ${AlphaValue})`;
-// export type MHsla = `hsl(${Hue|"none"} ${Percentage|number|"none"} ${Percentage|number|"none"})` | `hsla(${Hue|"none"} ${Percentage|number|"none"} ${Percentage|number|"none"} / ${AlphaValue|"none"})`;
-// export type Hsla = LHsla|MHsla;
-// export type Hwb = `hwb(${Hue|"none"} ${Percentage|number|"none"} ${Percentage|number|"none"})` | `hwb(${Hue|"none"} ${Percentage|number|"none"} ${Percentage|number|"none"} / ${AlphaValue|"none"})`;
-// export type Lab = `${"lab"|"oklab"}(${number|Percentage|"none"} ${number|Percentage|"none"} ${number|Percentage|"none"})` | `${"lab"|"oklab"}(${number|Percentage|"none"} ${number|Percentage|"none"} ${number|Percentage|"none"} / ${AlphaValue|"none"})`;
-// export type Lch = `${"lch"|"oklch"}(${number|Percentage|"none"} ${number|Percentage|"none"} ${Hue|"none"})` | `${"lch"|"oklch"}(${number|Percentage|"none"} ${number|Percentage|"none"} ${Hue|"none"} / ${AlphaValue|"none"})`;
-// export type ColorFunc = `color(${ColorspaceParams})`| `color(${ColorspaceParams} / ${AlphaValue|"none"})`;
-// export type AbsoluteColorFunction = Rgba|Hsla|Hwb|Lab|Lch|ColorFunc;
-// export type AbsoluteColorBase = HexColor|AbsoluteColorFunction|NamedColor|"transparent";
-// export type Color = AbsoluteColorBase|SystemColor|"currentcolor";
-// export type SimpleColor =
-// 	HexColor
-// 	|`${"rgb"|"rgba"|"hsl"|"hsla"|"hwb"|"lab"|"lch"|"oklab"|"oklch"|"color"}(${ComplexType})`
+import { IBinding } from "../../bindings/i-binding";
+import { IWatcher } from "../../bindings/i-watcher";
+type V = IBinding<any, number|string>| IWatcher<number|string> | number | string;
+type ColorUnitSuffix = ""
+	| "Rgb"
+	| "Lab"
+	| "Oklab"
+	| "Hsl" | "HslDeg" | "HslGrad" | "HslRad" | "HslTurn"
+	| "Hwb" | "HwbDeg" | "HwbGrad" | "HwbRad" | "HwbTurn"
+	| "Lch" | "LchDeg" | "LchGrad" | "LchRad" | "LchTurn"
+	| "Oklch" | "OklchDeg" | "OklchGrad" | "OklchRad" | "OklchTurn"
+	| "Color"
+	| "Srgb"|"SrgbLinear"|"DisplayP3"|"A98Rgb"|"ProphotoRgb"|"Rec2020"
+	| "Xyz"|"XyzD50"|"XyzD65";
+type NamedColor = "aliceblue"|"antiquewhite"|"aqua"|"aquamarine"|"azure"|"beige"|"bisque"|"black"|"blanchedalmond"|"blue"|"blueviolet"|"brown"|"burlywood"|"cadetblue"|"chartreuse"|"chocolate"|"coral"|"cornflowerblue"|"cornsilk"|"crimson"|"cyan"|"darkblue"|"darkcyan"|"darkgoldenrod"|"darkgray"|"darkgrey"|"darkgreen"|"darkkhaki"|"darkmagenta"|"darkolivegreen"|"darkorange"|"darkorchid"|"darkred"|"darksalmon"|"darkseagreen"|"darkslateblue"|"darkslategray"|"darkslategrey"|"darkturquoise"|"darkviolet"|"deeppink"|"deepskyblue"|"dimgray"|"dimgrey"|"dodgerblue"|"firebrick"|"floralwhite"|"forestgreen"|"fuchsia"|"gainsboro"|"ghostwhite"|"gold"|"goldenrod"|"gray"|"grey"|"green"|"greenyellow"|"honeydew"|"hotpink"|"indianred"|"indigo"|"ivory"|"khaki"|"lavender"|"lavenderblush"|"lawngreen"|"lemonchiffon"|"lightblue"|"lightcoral"|"lightcyan"|"lightgoldenrodyellow"|"lightgray"|"lightgrey"|"lightgreen"|"lightpink"|"lightsalmon"|"lightseagreen"|"lightskyblue"|"lightslategray"|"lightslategrey"|"lightsteelblue"|"lightyellow"|"lime"|"limegreen"|"linen"|"magenta"|"maroon"|"mediumaquamarine"|"mediumblue"|"mediumorchid"|"mediumpurple"|"mediumseagreen"|"mediumslateblue"|"mediumspringgreen"|"mediumturquoise"|"mediumvioletred"|"midnightblue"|"mintcream"|"mistyrose"|"moccasin"|"navajowhite"|"navy"|"oldlace"|"olive"|"olivedrab"|"orange"|"orangered"|"orchid"|"palegoldenrod"|"palegreen"|"paleturquoise"|"palevioletred"|"papayawhip"|"peachpuff"|"peru"|"pink"|"plum"|"powderblue"|"purple"|"rebeccapurple"|"red"|"rosybrown"|"royalblue"|"saddlebrown"|"salmon"|"sandybrown"|"seagreen"|"seashell"|"sienna"|"silver"|"skyblue"|"slateblue"|"slategray"|"slategrey"|"snow"|"springgreen"|"steelblue"|"tan"|"teal"|"thistle"|"tomato"|"turquoise"|"violet"|"wheat"|"white"|"whitesmoke"|"yellow"|"yellowgreen";
+type SystemColor = "AccentColor"|"AccentColorText"|"ActiveText"|"ButtonBorder"|"ButtonFace"|"ButtonText"|"Canvas"|"CanvasText"|"Field"|"FieldText"|"GrayText"|"Highlight"|"HighlightText"|"LinkText"|"Mark"|"MarkText"|"SelectedItem"|"SelectedItemText"|"VisitedText";
+type SpecialColors = "currentcolor"|"transparent";
+type ColorProp<Prefix extends string> = {
+	[Key in ColorUnitSuffix as `${Prefix}${Key}`]?: (
+		(Key extends "" ? IBinding<any, string> | IWatcher<string> | NamedColor | SystemColor | SpecialColors | `#${string}` | `${"rgb"|"rgba"|"hsl"|"hsla"|"hwb"|"lab"|"lch"|"oklab"|"oklch"|"color"}(${string})` : void) |
+		(Key extends "Rgb" | "Hsl" | "HslDeg" | "HslGrad" | "HslRad" | "HslTurn" | "Hwb" | "HwbDeg" | "HwbGrad" | "HwbRad" | "HwbTurn" | "Lab" | "Lch" | "LchDeg" | "LchGrad" | "LchRad" | "LchTurn" | "Oklch" | "OklchDeg" | "OklchGrad" | "OklchRad" | "OklchTurn" ? [V, V, V] | [V, V, V, V] : void) |
+		(Key extends "Srgb" | "SrgbLinear" | "DisplayP3" | "A98Rgb" | "ProphotoRgb" | "Rec2020" | "Xyz" | "XyzD50" | "XyzD65" ? [V, V, V] : void)
+	);
+};
+export default ColorProp;
+// Color
+// export type Hue = number|Angle;
+// export type PredefinedRgb = "srgb"|"srgb-linear"|"display-p3"|"a98-rgb"|"prophoto-rgb"|"rec2020";
+// export type XyzSpace = "xyz"|"xyz-d50"|"xyz-d65";
+// export type XyzParams = `${XyzSpace}                ${number|Percentage|"none"} ${number|Percentage|"none"} ${number|Percentage|"none"}`
+// export type PredefinedRgbParams = `${PredefinedRgb} ${number|Percentage|"none"} ${number|Percentage|"none"} ${number|Percentage|"none"}`
+// export type ColorspaceParams = PredefinedRgbParams|XyzParams;
+// export type LRgba<T extends number|AlphaValue> = `rgb(${T}, ${T}, ${T})` | `rgba(${T}, ${T}, ${T}, ${AlphaValue})`;
+// export type MRgba = `rgb(${number|Percentage|"none"} ${number|Percentage|"none"} ${number|Percentage|"none"})` | `rgba(${number|Percentage|"none"} ${number|Percentage|"none"} ${number|Percentage|"none"} / ${AlphaValue})`;
+// export type Rgba = LRgba<number|AlphaValue>|MRgba;
+// export type LHsla = `hsl(${Hue}, ${Percentage}, ${Percentage})` | `hsla(${Hue}, ${Percentage}, ${Percentage}, ${AlphaValue})`;
+// export type MHsla = `hsl(${Hue|"none"} ${Percentage|number|"none"} ${Percentage|number|"none"})` | `hsla(${Hue|"none"} ${Percentage|number|"none"} ${Percentage|number|"none"} / ${AlphaValue|"none"})`;
+// export type Hsla = LHsla|MHsla;
+// export type Hwb = `hwb(${Hue|"none"} ${Percentage|number|"none"} ${Percentage|number|"none"})` | `hwb(${Hue|"none"} ${Percentage|number|"none"} ${Percentage|number|"none"} / ${AlphaValue|"none"})`;
+// export type Lab = `${"lab"|"oklab"}(${number|Percentage|"none"} ${number|Percentage|"none"} ${number|Percentage|"none"})` | `${"lab"|"oklab"}(${number|Percentage|"none"} ${number|Percentage|"none"} ${number|Percentage|"none"} / ${AlphaValue|"none"})`;
+// export type Lch = `${"lch"|"oklch"}(${number|Percentage|"none"} ${number|Percentage|"none"} ${Hue|"none"})` | `${"lch"|"oklch"}(${number|Percentage|"none"} ${number|Percentage|"none"} ${Hue|"none"} / ${AlphaValue|"none"})`;
+// export type ColorFunc = `color(${ColorspaceParams})`| `color(${ColorspaceParams} / ${AlphaValue|"none"})`;
+// export type AbsoluteColorFunction = Rgba|Hsla|Hwb|Lab|Lch|ColorFunc;
+// export type AbsoluteColorBase = HexColor|AbsoluteColorFunction|NamedColor|"transparent";
+// export type Color = AbsoluteColorBase|SystemColor|"currentcolor";
+// export type SimpleColor =
+// 	HexColor
+// 	|`${"rgb"|"rgba"|"hsl"|"hsla"|"hwb"|"lab"|"lch"|"oklab"|"oklch"|"color"}(${ComplexType})`
 // 	|NamedColor|SystemColor|"currentcolor";