From f40e7c335fd4836d0ac067598f631e9561e92a86 Mon Sep 17 00:00:00 2001 From: Tom Picton Date: Sun, 13 Sep 2020 13:22:04 -0700 Subject: [PATCH] Use template literal types for unit values --- README.md | 15 +- package.json | 8 +- packages/tacky-css/package.json | 2 +- packages/tacky-css/src/color.ts | 153 ++++++++- packages/tacky-css/src/function.ts | 5 +- packages/tacky-css/src/image.ts | 28 +- packages/tacky-css/src/index.ts | 2 +- packages/tacky-css/src/media/mediaFeatures.ts | 42 ++- packages/tacky-css/src/property/animations.ts | 28 +- .../src/property/backgroundsAndBorders.ts | 298 ++++++++++-------- .../src/property/basicUserInterface.ts | 15 +- .../tacky-css/src/property/boxAlignment.ts | 23 +- packages/tacky-css/src/property/boxModel.ts | 150 +++++---- packages/tacky-css/src/property/fonts.ts | 21 +- packages/tacky-css/src/property/logical.ts | 20 +- .../tacky-css/src/property/positioning.ts | 30 +- packages/tacky-css/src/property/table.ts | 15 +- packages/tacky-css/src/property/text.ts | 36 ++- .../tacky-css/src/property/textDecoration.ts | 38 ++- .../tacky-css/src/property/transitions.ts | 8 +- packages/tacky-css/src/shape.ts | 32 +- packages/tacky-css/src/unit.ts | 30 +- packages/tacky-css/src/utils.ts | 37 ++- packages/tacky-css/yarn.lock | 8 +- src/index.tsx | 8 +- yarn.lock | 253 +++++++++++---- 26 files changed, 849 insertions(+), 456 deletions(-) diff --git a/README.md b/README.md index 8b47149..adedf61 100644 --- a/README.md +++ b/README.md @@ -14,8 +14,8 @@ const styles = tacky(_ => [ _.fontSize(_.rem(fontSize)), _.fontFamily("Times New Roman", "serif"), _.display(display), - _.boxShadow(_.rem(2), _.rem(2), _.rem(2), _.rem(2), _.rgba(0, 0, 0, 0.5)), - _.media([_.media.screen(_.media.minWidth(_.rem(30)))], + _.boxShadow("2rem", "2rem", "2rem", "2rem", _.rgba(0, 0, 0, 0.5)), + _.media([_.media.screen(_.media.minWidth("300px"))], _.color(_.rgb(0, 255, 0)), ), ]); @@ -72,17 +72,6 @@ Tacky is a library inspired by approach in order to provide safety that can't be guaranteed by a `Record` interface alone. -### Why are values specified unit-first? - -Standard object styles allow any string where scalar CSS values e.g. `"2rem"`, -`"5px"` are expected. It's not feasible to enumerate every possibility -of those values, and TypeScript's type system has no ability to interpolate -strings. - -By expressing these as a "unit function" that receives magnitude as a -number, we can be much more strict about what values are allowed for a given -property. - ### Why write styles as a list of function calls? Representing complex CSS values safely in TypeScript warrants the use of a diff --git a/package.json b/package.json index eaf9521..f2d1b4c 100644 --- a/package.json +++ b/package.json @@ -29,14 +29,14 @@ "@types/lodash-es": "^4.17.3", "@types/react": "^16.9.46", "@types/react-dom": "^16.9.8", - "@typescript-eslint/eslint-plugin": "^3.10.0", - "@typescript-eslint/parser": "^3.10.0", + "@typescript-eslint/eslint-plugin": "^4.1.0", + "@typescript-eslint/parser": "^4.1.0", "babel-jest": "^26.3.0", "babel-loader": "^8.1.0", "babel-plugin-macros": "^2.8.0", "clean-webpack-plugin": "^3.0.0", "csstype": "^3.0.3", - "eslint": "^7.7.0", + "eslint": "^7.9.0", "eslint-config-prettier": "^6.11.0", "eslint-plugin-prettier": "^3.1.4", "eslint-plugin-react": "^7.20.6", @@ -50,7 +50,7 @@ "react": "^16.13.1", "react-dom": "^16.13.1", "tsconfig-paths-webpack-plugin": "^3.3.0", - "typescript": "^4.0.2", + "typescript": "^4.1.0-dev.20200911", "webpack": "^4.44.1", "webpack-cli": "^3.3.12", "webpack-dev-server": "^3.11.0" diff --git a/packages/tacky-css/package.json b/packages/tacky-css/package.json index 4209a17..93dbcb9 100644 --- a/packages/tacky-css/package.json +++ b/packages/tacky-css/package.json @@ -13,6 +13,6 @@ "babel-plugin-macros": "^2.8.0", "csstype": "^3.0.3", "nanoid": "^3.1.12", - "typescript": "^4.0.2" + "typescript": "^4.1.0-dev.20200911" } } diff --git a/packages/tacky-css/src/color.ts b/packages/tacky-css/src/color.ts index 7be2ffd..0663e0f 100644 --- a/packages/tacky-css/src/color.ts +++ b/packages/tacky-css/src/color.ts @@ -1,5 +1,156 @@ import { TackyVariant } from "./types"; +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" + | "darkgreen" + | "darkgrey" + | "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" + | "green" + | "greenyellow" + | "grey" + | "honeydew" + | "hotpink" + | "indianred" + | "indigo" + | "ivory" + | "khaki" + | "lavender" + | "lavenderblush" + | "lawngreen" + | "lemonchiffon" + | "lightblue" + | "lightcoral" + | "lightcyan" + | "lightgoldenrodyellow" + | "lightgray" + | "lightgreen" + | "lightgrey" + | "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" + | "transparent" + | "turquoise" + | "violet" + | "wheat" + | "white" + | "whitesmoke" + | "yellow" + | "yellowgreen"; + export type Rgb = TackyVariant<"rgb">; export const rgb = (red: number, green: number, blue: number): Rgb => `rgb(${red}, ${green}, ${blue})` as Rgb; @@ -12,4 +163,4 @@ export const rgba = ( alpha: number ): Rgba => `rgba(${red}, ${green}, ${blue}, ${alpha})` as Rgba; -export type CSSColor = Rgb | Rgba | "currentcolor" | "transparent"; +export type CSSColor = Rgb | Rgba | "currentcolor" | NamedColor; diff --git a/packages/tacky-css/src/function.ts b/packages/tacky-css/src/function.ts index 79f7d95..3037eaf 100644 --- a/packages/tacky-css/src/function.ts +++ b/packages/tacky-css/src/function.ts @@ -5,5 +5,6 @@ export type CSSURL = TackyVariant<"url">; export const url = (url: URL): CSSURL => `url(${url})` as CSSURL; export type FitContent = TackyVariant<"fitContent">; -export const fitContent = (arg: CSSLengthPercentage): FitContent => - `fitContent(${arg})` as FitContent; +export const fitContent = ( + arg: CSSLengthPercentage +): FitContent => `fitContent(${arg})` as FitContent; diff --git a/packages/tacky-css/src/image.ts b/packages/tacky-css/src/image.ts index 320fc43..c33a533 100644 --- a/packages/tacky-css/src/image.ts +++ b/packages/tacky-css/src/image.ts @@ -1,6 +1,6 @@ import { BackgroundPositionArgs } from "./property"; import { CSSColor } from "./color"; -import { CSSLengthPercentage, Percent, CSSAngle } from "./unit"; +import { CSSLengthPercentage, CSSPercentage, CSSAngle } from "./unit"; import { TackyVariant } from "./types"; import { CSSURL } from "./function"; @@ -18,15 +18,17 @@ type SideOrCorner = | "to right top" | "to right bottom"; -type InitialLinearColorStop = [ +type InitialLinearColorStop = [ color: CSSColor, - stopStart?: CSSLengthPercentage, - stopEnd?: CSSLengthPercentage + stopStart?: CSSLengthPercentage, + stopEnd?: CSSLengthPercentage ]; -type LinearColorStop = InitialLinearColorStop; -type ColorHint = Percent; -type LinearColorStopOrHint = LinearColorStop | [ColorHint, ...LinearColorStop]; +type LinearColorStop = InitialLinearColorStop; +type ColorHint = CSSPercentage; +type LinearColorStopOrHint = + | LinearColorStop + | [ColorHint, ...LinearColorStop]; // Ideally would be expressed in a way that matches the CSS syntax // more closely, i.e. @@ -58,11 +60,12 @@ type LinearColorStopOrHint = LinearColorStop | [ColorHint, ...LinearColorStop]; export interface LinearGradientFunction { < T extends [CSSAngle | SideOrCorner] | [], - V extends [LinearColorStopOrHint, ...LinearColorStopOrHint[]] + U extends string, + V extends [LinearColorStopOrHint, ...LinearColorStopOrHint[]] >( ...args: [ ...angle: T, - colorStop: InitialLinearColorStop, + colorStop: InitialLinearColorStop, ...colorStopOrHint: V ] ): Return; @@ -95,17 +98,18 @@ type RadialGradientExtentKeyword = | "farthest-corner"; export interface RadialGradientFunction { < + U extends string, T extends | [ RadialGradientShape | RadialGradientExtentKeyword, - ...([] | ["at", ...BackgroundPositionArgs]) + ...([] | ["at", ...BackgroundPositionArgs]) ] | [], - V extends [LinearColorStopOrHint, ...LinearColorStopOrHint[]] + V extends [LinearColorStopOrHint, ...LinearColorStopOrHint[]] >( ...args: [ ...shape: T, - colorStop: InitialLinearColorStop, + colorStop: InitialLinearColorStop, ...colorStopOrHint: V ] ): Return; diff --git a/packages/tacky-css/src/index.ts b/packages/tacky-css/src/index.ts index 37def18..f3ea9f9 100644 --- a/packages/tacky-css/src/index.ts +++ b/packages/tacky-css/src/index.ts @@ -24,7 +24,7 @@ type TackyArg = typeof tackyArg; export const compile = (styles: TypedCSSArray): CSSObject => styles.reduce((acc, [key, value]) => { - // Investigate TS2590 without this cast + // TODO: Investigate TS2590 without this cast acc[key as string] = Array.isArray(value) ? compile(value) : value; return acc; }, {} as CSSObject); diff --git a/packages/tacky-css/src/media/mediaFeatures.ts b/packages/tacky-css/src/media/mediaFeatures.ts index 74b19c4..6faa737 100644 --- a/packages/tacky-css/src/media/mediaFeatures.ts +++ b/packages/tacky-css/src/media/mediaFeatures.ts @@ -17,8 +17,9 @@ export const color = (bits?: number): MediaExpression => export const colorGamut = (gamut: "srgb" | "p3" | "rec2020"): MediaExpression => `(colorGamut: ${gamut})` as MediaExpression; -export const height = (value: CSSLength): MediaExpression => - `(height: ${value})` as MediaExpression; +export const height = ( + value: CSSLength +): MediaExpression => `(height: ${value})` as MediaExpression; export const hover = (support: "none" | "hover"): MediaExpression => `(hover: ${support})` as MediaExpression; @@ -26,32 +27,38 @@ export const hover = (support: "none" | "hover"): MediaExpression => export const maxColor = (bits: number): MediaExpression => `(max-color: ${bits})` as MediaExpression; -export const maxHeight = (value: CSSLength): MediaExpression => - `(max-height: ${value})` as MediaExpression; +export const maxHeight = ( + value: CSSLength +): MediaExpression => `(max-height: ${value})` as MediaExpression; export const maxMonochrome = (bits: number): MediaExpression => `(max-monochrome: ${bits})` as MediaExpression; -export const maxResolution = (value: CSSResolution): MediaExpression => - `(max-resolution: ${value})` as MediaExpression; +export const maxResolution = ( + value: CSSResolution +): MediaExpression => `(max-resolution: ${value})` as MediaExpression; -export const maxWidth = (value: CSSLength): MediaExpression => - `(max-width: ${value})` as MediaExpression; +export const maxWidth = ( + value: CSSLength +): MediaExpression => `(max-width: ${value})` as MediaExpression; export const minColor = (bits: number): MediaExpression => `(min-color: ${bits})` as MediaExpression; -export const minHeight = (value: CSSLength): MediaExpression => - `(min-height: ${value})` as MediaExpression; +export const minHeight = ( + value: CSSLength +): MediaExpression => `(min-height: ${value})` as MediaExpression; export const minMonochrome = (bits: number): MediaExpression => `(min-monochrome: ${bits})` as MediaExpression; -export const minResolution = (value: CSSResolution): MediaExpression => - `(min-resolution: ${value})` as MediaExpression; +export const minResolution = ( + value: CSSResolution +): MediaExpression => `(min-resolution: ${value})` as MediaExpression; -export const minWidth = (value: CSSLength): MediaExpression => - `(min-width: ${value})` as MediaExpression; +export const minWidth = ( + value: CSSLength +): MediaExpression => `(min-width: ${value})` as MediaExpression; export const monochrome = (bits?: number): MediaExpression => `(monochrome${bits ? `: ${bits}` : ""})` as MediaExpression; @@ -63,8 +70,9 @@ export const pointer = ( accuracy: "none" | "coarse" | "fine" ): MediaExpression => `(pointer: ${accuracy})` as MediaExpression; -export const resolution = (value: CSSResolution): MediaExpression => - `(resolution: ${value})` as MediaExpression; +export const resolution = ( + value: CSSResolution +): MediaExpression => `(resolution: ${value})` as MediaExpression; -export const width = (value: CSSLength): MediaExpression => +export const width = (value: CSSLength): MediaExpression => `(width: ${value})` as MediaExpression; diff --git a/packages/tacky-css/src/property/animations.ts b/packages/tacky-css/src/property/animations.ts index 8420c9f..7e80942 100644 --- a/packages/tacky-css/src/property/animations.ts +++ b/packages/tacky-css/src/property/animations.ts @@ -1,24 +1,30 @@ -import { KnownCSSValues } from "../types"; +import { KnownCSSValues, TypedCSSProperties } from "../types"; import { CSSTime } from "../unit"; -import { knownUnionProperty, variantProperty } from "../utils"; +import { PropertyTuple, knownUnionProperty } from "../utils"; -export const animationDelay = variantProperty< +export const animationDelay = ( + delay: KnownCSSValues<"animationDelay"> | CSSTime +): PropertyTuple<"animationDelay"> => [ "animationDelay", - KnownCSSValues<"animationDelay"> | CSSTime ->("animationDelay"); + delay.toString() as TypedCSSProperties["animationDelay"], +]; export const animationDirection = knownUnionProperty("animationDirection"); -export const animationDuration = variantProperty< +export const animationDuration = ( + duration: KnownCSSValues<"animationDuration"> | CSSTime +): PropertyTuple<"animationDuration"> => [ "animationDuration", - KnownCSSValues<"animationDuration"> | CSSTime ->("animationDuration"); + duration.toString() as TypedCSSProperties["animationDuration"], +]; export const animationFillMode = knownUnionProperty("animationFillMode"); -export const animationIterationCount = variantProperty< +export const animationIterationCount = ( + duration: KnownCSSValues<"animationIterationCount"> | CSSTime +): PropertyTuple<"animationIterationCount"> => [ "animationIterationCount", - KnownCSSValues<"animationIterationCount"> | CSSTime ->("animationIterationCount"); + duration.toString() as TypedCSSProperties["animationIterationCount"], +]; export const animationPlayState = knownUnionProperty("animationPlayState"); diff --git a/packages/tacky-css/src/property/backgroundsAndBorders.ts b/packages/tacky-css/src/property/backgroundsAndBorders.ts index 596a5db..ce29614 100644 --- a/packages/tacky-css/src/property/backgroundsAndBorders.ts +++ b/packages/tacky-css/src/property/backgroundsAndBorders.ts @@ -2,13 +2,12 @@ import * as CSS from "csstype"; import { CSSColor } from "../color"; import { CSSImage } from "../image"; import { KnownCSSValues, TypedCSSProperties } from "../types"; -import { CSSLength, CSSLengthPercentage, Percent } from "../unit"; +import { CSSLength, CSSLengthPercentage, CSSPercentage } from "../unit"; import { knownUnionProperty, variantProperty, PropertyTuple, FourDimensionalArgs, - FourDimensionalProperty, } from "../utils"; type BackgroundAttachmentKeyword = Exclude< @@ -89,25 +88,30 @@ export const backgroundOrigin: BackgroundOrigin = (...origin: unknown[]) => type BackgroundPositionKeyword = "top" | "left" | "bottom" | "right" | "center"; -export type BackgroundPositionArgs = +export type BackgroundPositionArgs = | [all: BackgroundPositionKeyword] - | [left: CSSLengthPercentage] - | [x: "left" | "right", y: "top" | "bottom" | CSSLengthPercentage] - | [y: "top" | "bottom", x: "left" | "right" | CSSLengthPercentage] - | [x: CSSLengthPercentage, y: CSSLengthPercentage] + | [left: CSSLengthPercentage] + | [x: "left" | "right", y: "top" | "bottom" | CSSLengthPercentage] + | [y: "top" | "bottom", x: "left" | "right" | CSSLengthPercentage] + | [x: CSSLengthPercentage, y: CSSLengthPercentage] | [ x: "left" | "right", - xOffset: CSSLengthPercentage, + xOffset: CSSLengthPercentage, y: "top" | "bottom", - yOffset: CSSLengthPercentage + yOffset: CSSLengthPercentage ]; -export const backgroundPosition = ( - ...args: - | [global: CSS.Globals] - | BackgroundPositionArgs - | [BackgroundPositionArgs, ...BackgroundPositionArgs[]] -): PropertyTuple<"backgroundPosition"> => +export interface BackgroundPosition { + (global: CSS.Globals): PropertyTuple<"backgroundPosition">; + (...args: BackgroundPositionArgs): PropertyTuple< + "backgroundPosition" + >; + (...args: BackgroundPositionArgs[]): PropertyTuple< + "backgroundPosition" + >; +} + +export const backgroundPosition: BackgroundPosition = (...args: unknown[]) => [ "backgroundPosition", (Array.isArray(args[0]) @@ -138,14 +142,25 @@ export const backgroundRepeat = ( type BackgroundSizeKeyword = "cover" | "contain"; -type BackgroundSizeArgs = - | [keyword: CSS.Globals | BackgroundSizeKeyword] - | [width: CSSLengthPercentage | "auto"] - | [width: CSSLengthPercentage | "auto", height: CSSLengthPercentage | "auto"]; +type BackgroundSizeArgs = + | [keyword: BackgroundSizeKeyword] + | [width: CSSLengthPercentage | "auto"] + | [ + width: CSSLengthPercentage | "auto", + height: CSSLengthPercentage | "auto" + ]; + +export interface BackgroundSize { + (global: CSS.Globals): PropertyTuple<"backgroundSize">; + (...args: BackgroundSizeArgs): PropertyTuple< + "backgroundSize" + >; + (...args: BackgroundSizeArgs[]): PropertyTuple< + "backgroundSize" + >; +} -export const backgroundSize = ( - ...args: BackgroundSizeArgs | [BackgroundSizeArgs, ...BackgroundSizeArgs[]] -): PropertyTuple<"backgroundSize"> => +export const backgroundSize: BackgroundSize = (...args: unknown[]) => [ "backgroundSize", (Array.isArray(args[0]) @@ -155,15 +170,18 @@ export const backgroundSize = ( type BorderStyle = TypedCSSProperties["borderTopStyle"]; -export interface Border { - (style: BorderStyle): PropertyTuple; - (style: BorderStyle, color: CSSColor): PropertyTuple; - (width: CSSLengthPercentage, style: BorderStyle): PropertyTuple; - ( - width: CSSLengthPercentage, +export interface Border { + (style: BorderStyle): PropertyTuple; + (style: BorderStyle, color: CSSColor): PropertyTuple; + ( + width: CSSLengthPercentage, + style: BorderStyle + ): PropertyTuple; + ( + width: CSSLengthPercentage, style: BorderStyle, color: CSSColor - ): PropertyTuple; + ): PropertyTuple; } export const border: Border<"border"> = (...args: unknown[]) => @@ -180,31 +198,39 @@ export const borderBottomColor = variantProperty< CSSColor | "none" >("borderBottomColor"); -export const borderBottomLeftRadius = variantProperty< - "borderBottomLeftRadius", - CSSLengthPercentage ->("borderBottomLeftRadius"); +export const borderBottomLeftRadius = ( + width: CSSLengthPercentage +): PropertyTuple<"borderBottomLeftRadius"> => + [ + "borderBottomLeftRadius", + width as TypedCSSProperties["borderBottomLeftRadius"], + ] as const; -export const borderBottomRightRadius = variantProperty< - "borderBottomRightRadius", - CSSLengthPercentage ->("borderBottomRightRadius"); +export const borderBottomRightRadius = ( + width: CSSLengthPercentage +): PropertyTuple<"borderBottomRightRadius"> => + [ + "borderBottomRightRadius", + width as TypedCSSProperties["borderBottomRightRadius"], + ] as const; export const borderBottomStyle = knownUnionProperty("borderBottomStyle"); -export const borderBottomWidth = variantProperty< - "borderBottomWidth", - CSSLengthPercentage ->("borderBottomWidth"); +export const borderBottomWidth = ( + width: CSSLengthPercentage +): PropertyTuple<"borderBottomWidth"> => + [ + "borderBottomWidth", + width as TypedCSSProperties["borderBottomWidth"], + ] as const; export const borderColor = variantProperty<"borderColor", CSSColor>( "borderColor" ); -export const borderImageOutset: FourDimensionalProperty< - PropertyTuple<"borderImageOutset">, - CSSLength | number -> = (...args: unknown[]) => +export const borderImageOutset = ( + ...args: FourDimensionalArgs> +) => [ "borderImageOutset", args.join(" ") as TypedCSSProperties["borderImageOutset"], @@ -228,19 +254,26 @@ export const borderImageRepeat = ( ] as const; // TODO: Allow "fill" keyword at any position -export type BorderImageSliceArgs = - | [all: number | Percent, fill?: "fill"] - | [vertical: number | Percent, horizontal: number | Percent, fill?: "fill"] - | [ - top: number | Percent, - horizontal: number | Percent, - bottom: number | Percent, - fill?: "fill" - ]; +export interface BorderImageSlice { + (global: CSS.Globals): PropertyTuple<"borderImageSlice">; + ( + all: number | CSSPercentage, + fill?: "fill" + ): PropertyTuple<"borderImageSlice">; + ( + vertical: number | CSSPercentage, + horizontal: number | CSSPercentage, + fill?: "fill" + ): PropertyTuple<"borderImageSlice">; + ( + top: number | CSSPercentage, + horizontal: number | CSSPercentage, + bottom: number | CSSPercentage, + fill?: "fill" + ): PropertyTuple<"borderImageSlice">; +} -export const borderImageSlice = ( - ...args: [global: CSS.Globals] | BorderImageSliceArgs -): PropertyTuple<"borderImageSlice"> => +export const borderImageSlice: BorderImageSlice = (...args: unknown[]) => [ "borderImageSlice", args.join(" ") as TypedCSSProperties["borderImageSlice"], @@ -251,9 +284,9 @@ export const borderImageSource = variantProperty< KnownCSSValues<"borderImageSource"> | CSSImage >("borderImageSource"); -export const borderImageWidth = ( - ...args: FourDimensionalArgs -): PropertyTuple<"borderImageWidth"> => +export const borderImageWidth = ( + ...args: FourDimensionalArgs> +) => [ "borderImageWidth", args.join(" ") as TypedCSSProperties["borderImageWidth"], @@ -269,37 +302,37 @@ export const borderLeftColor = variantProperty< export const borderLeftStyle = knownUnionProperty("borderLeftStyle"); -export const borderLeftWidth = variantProperty< - "borderLeftWidth", - CSSLengthPercentage ->("borderLeftWidth"); +export const borderLeftWidth = ( + width: CSSLengthPercentage +): PropertyTuple<"borderLeftWidth"> => + ["borderLeftWidth", width as TypedCSSProperties["borderLeftWidth"]] as const; -type BorderRadiusCorners = - | [all: CSSLengthPercentage] +type BorderRadiusCorners = + | [all: CSSLengthPercentage] | [ - topLeftAndBottomRight: CSSLengthPercentage, - topRightAndBottomLeft: CSSLengthPercentage + topLeftAndBottomRight: CSSLengthPercentage, + topRightAndBottomLeft: CSSLengthPercentage ] | [ - topLeft: CSSLengthPercentage, - topRightAndBottomLeft: CSSLengthPercentage, - bottomRight: CSSLengthPercentage + topLeft: CSSLengthPercentage, + topRightAndBottomLeft: CSSLengthPercentage, + bottomRight: CSSLengthPercentage ] | [ - topLeft: CSSLengthPercentage, - topRight: CSSLengthPercentage, - bottomRight: CSSLengthPercentage, - bottomLeft: CSSLengthPercentage + topLeft: CSSLengthPercentage, + topRight: CSSLengthPercentage, + bottomRight: CSSLengthPercentage, + bottomLeft: CSSLengthPercentage ]; -export type BorderRadiusEllipticalCorners = [ - ...BorderRadiusCorners, - ...([] | ["/", ...BorderRadiusCorners]) +export type BorderRadiusEllipticalCorners = [ + ...BorderRadiusCorners, + ...([] | ["/", ...BorderRadiusCorners]) ]; -export interface BorderRadius { - (global: CSS.Globals): T; - (...args: BorderRadiusEllipticalCorners): T; +export interface BorderRadius { + (global: CSS.Globals): R; + (...args: BorderRadiusEllipticalCorners): R; } export const borderRadius: BorderRadius> = ( @@ -320,10 +353,13 @@ export const borderRightColor = variantProperty< export const borderRightStyle = knownUnionProperty("borderRightStyle"); -export const borderRightWidth = variantProperty< - "borderRightWidth", - CSSLengthPercentage ->("borderRightWidth"); +export const borderRightWidth = ( + width: CSSLengthPercentage +): PropertyTuple<"borderRightWidth"> => + [ + "borderRightWidth", + width as TypedCSSProperties["borderRightWidth"], + ] as const; export const borderStyle = knownUnionProperty("borderStyle"); @@ -335,73 +371,75 @@ export const borderTopColor = variantProperty< CSSColor | "none" >("borderTopColor"); -export const borderTopLeftRadius = variantProperty< - "borderTopLeftRadius", - CSSLengthPercentage ->("borderTopLeftRadius"); +export const borderTopLeftRadius = ( + width: CSSLengthPercentage +): PropertyTuple<"borderTopLeftRadius"> => + [ + "borderTopLeftRadius", + width as TypedCSSProperties["borderTopLeftRadius"], + ] as const; -export const borderTopRightRadius = variantProperty< - "borderTopRightRadius", - CSSLengthPercentage ->("borderTopRightRadius"); +export const borderTopRightRadius = ( + width: CSSLengthPercentage +): PropertyTuple<"borderTopRightRadius"> => + [ + "borderTopRightRadius", + width as TypedCSSProperties["borderTopRightRadius"], + ] as const; export const borderTopStyle = knownUnionProperty("borderTopStyle"); -export const borderTopWidth = variantProperty< - "borderTopWidth", - CSSLengthPercentage ->("borderTopWidth"); +export const borderTopWidth = ( + width: CSSLengthPercentage +): PropertyTuple<"borderTopWidth"> => + ["borderTopWidth", width as TypedCSSProperties["borderTopWidth"]] as const; -export const borderWidth = ( - ...args: FourDimensionalArgs -): PropertyTuple<"borderWidth"> => +export const borderWidth = ( + ...args: FourDimensionalArgs> +) => ["borderWidth", args.join(" ") as TypedCSSProperties["borderWidth"]] as const; export interface BoxShadow { - ( - offsetX: CSSLengthPercentage, - offsetY: CSSLengthPercentage, - blurRadius: CSSLengthPercentage, - spreadLength: CSSLengthPercentage, + ( + offsetX: CSSLengthPercentage, + offsetY: CSSLengthPercentage, + blurRadius: CSSLengthPercentage, + spreadLength: CSSLengthPercentage, color?: CSSColor ): PropertyTuple<"boxShadow">; - ( - offsetX: CSSLengthPercentage, - offsetY: CSSLengthPercentage, - blurRadius: CSSLengthPercentage, + ( + offsetX: CSSLengthPercentage, + offsetY: CSSLengthPercentage, + blurRadius: CSSLengthPercentage, color?: CSSColor ): PropertyTuple<"boxShadow">; - ( - offsetX: CSSLengthPercentage, - offsetY: CSSLengthPercentage, + ( + offsetX: CSSLengthPercentage, + offsetY: CSSLengthPercentage, color?: CSSColor ): PropertyTuple<"boxShadow">; - ( + ( inset: "inset", - offsetX: CSSLengthPercentage, - offsetY: CSSLengthPercentage, - blurRadius: CSSLengthPercentage, - spreadLength: CSSLengthPercentage, + offsetX: CSSLengthPercentage, + offsetY: CSSLengthPercentage, + blurRadius: CSSLengthPercentage, + spreadLength: CSSLengthPercentage, color?: CSSColor ): PropertyTuple<"boxShadow">; - ( + ( inset: "inset", - offsetX: CSSLengthPercentage, - offsetY: CSSLengthPercentage, - blurRadius: CSSLengthPercentage, + offsetX: CSSLengthPercentage, + offsetY: CSSLengthPercentage, + blurRadius: CSSLengthPercentage, color?: CSSColor ): PropertyTuple<"boxShadow">; - ( + ( inset: "inset", - offsetX: CSSLengthPercentage, - offsetY: CSSLengthPercentage, + offsetX: CSSLengthPercentage, + offsetY: CSSLengthPercentage, color?: CSSColor ): PropertyTuple<"boxShadow">; } -export const boxShadow: BoxShadow = ( - ...args: unknown[] -): PropertyTuple<"boxShadow"> => [ - "boxShadow", - args.join(" ") as TypedCSSProperties["boxShadow"], -]; +export const boxShadow: BoxShadow = (...args: unknown[]) => + ["boxShadow", args.join(" ") as TypedCSSProperties["boxShadow"]] as const; diff --git a/packages/tacky-css/src/property/basicUserInterface.ts b/packages/tacky-css/src/property/basicUserInterface.ts index d3a89dd..3898567 100644 --- a/packages/tacky-css/src/property/basicUserInterface.ts +++ b/packages/tacky-css/src/property/basicUserInterface.ts @@ -1,7 +1,7 @@ import { CSSColor } from "../color"; -import { KnownCSSValues } from "../types"; +import { KnownCSSValues, TypedCSSProperties } from "../types"; import { CSSLength } from "../unit"; -import { knownUnionProperty, variantProperty } from "../utils"; +import { knownUnionProperty, PropertyTuple, variantProperty } from "../utils"; export const boxSizing = knownUnionProperty("boxSizing"); @@ -17,10 +17,13 @@ export const outlineColor = variantProperty<"outlineColor", CSSColor>( export const outlineStyle = knownUnionProperty("outlineStyle"); -export const outlineWidth = variantProperty< - "outlineWidth", - KnownCSSValues<"outlineWidth"> | CSSLength ->("outlineWidth"); +export const outlineWidth = ( + width: KnownCSSValues<"outlineWidth"> | CSSLength +): PropertyTuple<"outlineWidth"> => + [ + "outlineWidth", + width.toString() as TypedCSSProperties["outlineWidth"], + ] as const; export const resize = knownUnionProperty("resize"); diff --git a/packages/tacky-css/src/property/boxAlignment.ts b/packages/tacky-css/src/property/boxAlignment.ts index 5bc61e6..88eee99 100644 --- a/packages/tacky-css/src/property/boxAlignment.ts +++ b/packages/tacky-css/src/property/boxAlignment.ts @@ -1,6 +1,6 @@ -import { KnownCSSValues } from "../types"; +import { KnownCSSValues, TypedCSSProperties } from "../types"; import { CSSLengthPercentage } from "../unit"; -import { knownUnionProperty, variantProperty } from "../utils"; +import { knownUnionProperty, PropertyTuple } from "../utils"; export const alignContent = knownUnionProperty("alignContent"); @@ -8,10 +8,13 @@ export const alignItems = knownUnionProperty("alignItems"); export const alignSelf = knownUnionProperty("alignSelf"); -export const gridRowGap = variantProperty< - "gridRowGap", - KnownCSSValues<"rowGap"> | CSSLengthPercentage ->("gridRowGap"); +export const gridRowGap = ( + gridRowGap: KnownCSSValues<"gridRowGap"> | CSSLengthPercentage +): PropertyTuple<"gridRowGap"> => + [ + "gridRowGap", + gridRowGap.toString() as TypedCSSProperties["gridRowGap"], + ] as const; export const justifyContent = knownUnionProperty("justifyContent"); @@ -19,7 +22,7 @@ export const justifyItems = knownUnionProperty("justifyItems"); export const justifySelf = knownUnionProperty("justifySelf"); -export const rowGap = variantProperty< - "rowGap", - KnownCSSValues<"rowGap"> | CSSLengthPercentage ->("rowGap"); +export const rowGap = ( + rowGap: KnownCSSValues<"rowGap"> | CSSLengthPercentage +): PropertyTuple<"rowGap"> => + ["rowGap", rowGap.toString() as TypedCSSProperties["rowGap"]] as const; diff --git a/packages/tacky-css/src/property/boxModel.ts b/packages/tacky-css/src/property/boxModel.ts index 5f33be2..2abf3df 100644 --- a/packages/tacky-css/src/property/boxModel.ts +++ b/packages/tacky-css/src/property/boxModel.ts @@ -3,52 +3,76 @@ import { KnownCSSValues, TypedCSSProperties } from "../types"; import { CSSLengthPercentage } from "../unit"; import { knownUnionProperty, - variantProperty, PropertyTuple, FourDimensionalArgs, } from "../utils"; -export const height = variantProperty< +export const height = ( + height: KnownCSSValues<"height"> | CSSLengthPercentage | FitContent +): PropertyTuple<"height"> => [ "height", - KnownCSSValues<"height"> | CSSLengthPercentage | FitContent ->("height"); + height.toString() as TypedCSSProperties["height"], +]; // TODO: This is missing from the MDN page on Box Model module -export const margin = (...args: FourDimensionalArgs) => +export const margin = (...args: FourDimensionalArgs) => ["margin", args.join(" ") as TypedCSSProperties["margin"]] as const; -export const marginBottom = variantProperty< +export const marginBottom = ( + marginBottom: CSSLengthPercentage +): PropertyTuple<"marginBottom"> => [ "marginBottom", - CSSLengthPercentage ->("marginBottom"); - -export const marginLeft = variantProperty<"marginLeft", CSSLengthPercentage>( - "marginLeft" -); - -export const marginRight = variantProperty<"marginRight", CSSLengthPercentage>( - "marginRight" -); - -export const marginTop = variantProperty<"marginTop", CSSLengthPercentage>( - "marginTop" -); - -export const minHeight = variantProperty<"minHeight", CSSLengthPercentage>( - "minHeight" -); - -export const minWidth = variantProperty<"minWidth", CSSLengthPercentage>( - "minWidth" -); - -export const maxHeight = variantProperty<"maxHeight", CSSLengthPercentage>( - "maxHeight" -); - -export const maxWidth = variantProperty<"maxWidth", CSSLengthPercentage>( - "maxWidth" -); + marginBottom.toString() as TypedCSSProperties["marginBottom"], +]; + +export const marginLeft = ( + marginLeft: CSSLengthPercentage +): PropertyTuple<"marginLeft"> => [ + "marginLeft", + marginLeft.toString() as TypedCSSProperties["marginLeft"], +]; + +export const marginRight = ( + marginRight: CSSLengthPercentage +): PropertyTuple<"marginRight"> => [ + "marginRight", + marginRight.toString() as TypedCSSProperties["marginRight"], +]; + +export const marginTop = ( + marginTop: CSSLengthPercentage +): PropertyTuple<"marginTop"> => [ + "marginTop", + marginTop.toString() as TypedCSSProperties["marginTop"], +]; + +export const minHeight = ( + minHeight: CSSLengthPercentage +): PropertyTuple<"minHeight"> => [ + "minHeight", + minHeight.toString() as TypedCSSProperties["minHeight"], +]; + +export const minWidth = ( + minWidth: CSSLengthPercentage +): PropertyTuple<"minWidth"> => [ + "minWidth", + minWidth.toString() as TypedCSSProperties["minWidth"], +]; + +export const maxHeight = ( + maxHeight: CSSLengthPercentage +): PropertyTuple<"maxHeight"> => [ + "maxHeight", + maxHeight.toString() as TypedCSSProperties["maxHeight"], +]; + +export const maxWidth = ( + maxWidth: CSSLengthPercentage +): PropertyTuple<"maxWidth"> => [ + "maxWidth", + maxWidth.toString() as TypedCSSProperties["maxWidth"], +]; export const overscrollBehaviorBlock = knownUnionProperty( "overscrollBehaviorBlock" @@ -62,34 +86,42 @@ export const overscrollBehaviorX = knownUnionProperty("overscrollBehaviorX"); export const overscrollBehaviorY = knownUnionProperty("overscrollBehaviorY"); -export const padding = ( - ...args: FourDimensionalArgs -): PropertyTuple<"padding"> => +export const padding = (...args: FourDimensionalArgs) => ["padding", args.join(" ") as TypedCSSProperties["padding"]] as const; -export const paddingBottom = variantProperty< +export const paddingBottom = ( + paddingBottom: CSSLengthPercentage +): PropertyTuple<"paddingBottom"> => [ "paddingBottom", - CSSLengthPercentage ->("paddingBottom"); - -export const paddingLeft = variantProperty<"paddingLeft", CSSLengthPercentage>( - "paddingLeft" -); - -export const paddingRight = variantProperty< + paddingBottom.toString() as TypedCSSProperties["paddingBottom"], +]; + +export const paddingLeft = ( + paddingLeft: CSSLengthPercentage +): PropertyTuple<"paddingLeft"> => [ + "paddingLeft", + paddingLeft.toString() as TypedCSSProperties["paddingLeft"], +]; + +export const paddingRight = ( + paddingRight: CSSLengthPercentage +): PropertyTuple<"paddingRight"> => [ "paddingRight", - CSSLengthPercentage ->("paddingRight"); + paddingRight.toString() as TypedCSSProperties["paddingRight"], +]; -export const paddingTop = variantProperty<"paddingTop", CSSLengthPercentage>( - "paddingTop" -); +export const paddingTop = ( + paddingTop: CSSLengthPercentage +): PropertyTuple<"paddingTop"> => [ + "paddingTop", + paddingTop.toString() as TypedCSSProperties["paddingTop"], +]; -export const visibility = variantProperty<"visibility", CSSLengthPercentage>( - "visibility" -); +export const visibility = knownUnionProperty<"visibility">("visibility"); -export const width = variantProperty< +export const width = ( + width: KnownCSSValues<"width"> | CSSLengthPercentage | FitContent +): PropertyTuple<"width"> => [ "width", - KnownCSSValues<"width"> | CSSLengthPercentage | FitContent ->("width"); + width.toString() as TypedCSSProperties["width"], +]; diff --git a/packages/tacky-css/src/property/fonts.ts b/packages/tacky-css/src/property/fonts.ts index a598001..d25248c 100644 --- a/packages/tacky-css/src/property/fonts.ts +++ b/packages/tacky-css/src/property/fonts.ts @@ -1,6 +1,7 @@ +import * as CSS from "csstype"; import { TypedCSSProperties } from "../types"; import { CSSLengthPercentage } from "../unit"; -import { knownUnionProperty, PropertyTuple, variantProperty } from "../utils"; +import { knownUnionProperty, PropertyTuple } from "../utils"; // TODO: User-extendable interface export const fontFamily = ( @@ -16,9 +17,10 @@ export const fontKerning = knownUnionProperty("fontKerning"); export const fontOpticalSizing = knownUnionProperty("fontOpticalSizing"); -export const fontSize = variantProperty<"fontSize", CSSLengthPercentage>( - "fontSize" -); +export const fontSize = ( + fontSize: CSS.Globals | CSSLengthPercentage +): PropertyTuple<"fontSize"> => + ["fontSize", fontSize.toString() as TypedCSSProperties["fontSize"]] as const; export const fontSizeAdjust = knownUnionProperty("fontSizeAdjust"); @@ -28,9 +30,12 @@ export const fontVariantCaps = knownUnionProperty("fontVariantCaps"); export const fontVariantPosition = knownUnionProperty("fontVariantPosition"); -export const lineHeight = variantProperty< - "lineHeight", - CSSLengthPercentage | number ->("lineHeight"); +export const lineHeight = ( + lineHeight: CSSLengthPercentage | number +): PropertyTuple<"lineHeight"> => + [ + "lineHeight", + lineHeight.toString() as TypedCSSProperties["lineHeight"], + ] as const; export const fontWeight = knownUnionProperty("fontWeight"); diff --git a/packages/tacky-css/src/property/logical.ts b/packages/tacky-css/src/property/logical.ts index 2b14cdd..daba004 100644 --- a/packages/tacky-css/src/property/logical.ts +++ b/packages/tacky-css/src/property/logical.ts @@ -1,14 +1,14 @@ import { FitContent } from "../function"; -import { KnownCSSValues } from "../types"; +import { KnownCSSValues, TypedCSSProperties } from "../types"; import { CSSLengthPercentage } from "../unit"; -import { variantProperty } from "../utils"; +import { PropertyTuple } from "../utils"; -export const blockSize = variantProperty< - "blockSize", - KnownCSSValues<"blockSize"> | CSSLengthPercentage | FitContent ->("blockSize"); +export const blockSize = ( + size: KnownCSSValues<"blockSize"> | CSSLengthPercentage | FitContent +): PropertyTuple<"blockSize"> => + ["blockSize", size.toString() as TypedCSSProperties["blockSize"]] as const; -export const inlineSize = variantProperty< - "inlineSize", - KnownCSSValues<"inlineSize"> | CSSLengthPercentage | FitContent ->("inlineSize"); +export const inlineSize = ( + size: KnownCSSValues<"inlineSize"> | CSSLengthPercentage | FitContent +): PropertyTuple<"inlineSize"> => + ["inlineSize", size.toString() as TypedCSSProperties["inlineSize"]] as const; diff --git a/packages/tacky-css/src/property/positioning.ts b/packages/tacky-css/src/property/positioning.ts index 4a1efe2..2009d1d 100644 --- a/packages/tacky-css/src/property/positioning.ts +++ b/packages/tacky-css/src/property/positioning.ts @@ -1,24 +1,32 @@ +import * as CSS from "csstype"; +import { TypedCSSProperties } from "../types"; import { CSSLengthPercentage } from "../unit"; -import { knownUnionProperty, variantProperty } from "../utils"; +import { knownUnionProperty, PropertyTuple } from "../utils"; -export const bottom = variantProperty<"bottom", CSSLengthPercentage | "auto">( - "bottom" -); +export const bottom = ( + bottom: CSS.Globals | CSSLengthPercentage | "auto" +): PropertyTuple<"bottom"> => + ["bottom", bottom.toString() as TypedCSSProperties["bottom"]] as const; export const clear = knownUnionProperty("clear"); export const float = knownUnionProperty("float"); -export const left = variantProperty<"left", CSSLengthPercentage | "auto">( - "left" -); +export const left = ( + left: CSS.Globals | CSSLengthPercentage | "auto" +): PropertyTuple<"left"> => + ["left", left.toString() as TypedCSSProperties["left"]] as const; export const position = knownUnionProperty("position"); -export const right = variantProperty<"right", CSSLengthPercentage | "auto">( - "right" -); +export const right = ( + right: CSS.Globals | CSSLengthPercentage | "auto" +): PropertyTuple<"right"> => + ["right", right.toString() as TypedCSSProperties["right"]] as const; -export const top = variantProperty<"top", CSSLengthPercentage | "auto">("top"); +export const top = ( + top: CSS.Globals | CSSLengthPercentage | "auto" +): PropertyTuple<"top"> => + ["top", top.toString() as TypedCSSProperties["top"]] as const; export const zIndex = knownUnionProperty("zIndex"); diff --git a/packages/tacky-css/src/property/table.ts b/packages/tacky-css/src/property/table.ts index fab7dd7..65b1b0c 100644 --- a/packages/tacky-css/src/property/table.ts +++ b/packages/tacky-css/src/property/table.ts @@ -1,6 +1,6 @@ -import { KnownCSSValues } from "../types"; +import { TypedCSSProperties, KnownCSSValues } from "../types"; import { CSSLengthPercentage } from "../unit"; -import { knownUnionProperty, variantProperty } from "../utils"; +import { knownUnionProperty, PropertyTuple } from "../utils"; export const borderCollapse = knownUnionProperty("borderCollapse"); @@ -10,7 +10,10 @@ export const emptyCells = knownUnionProperty("emptyCells"); export const tableLayout = knownUnionProperty("tableLayout"); -export const verticalAlign = variantProperty< - "verticalAlign", - KnownCSSValues<"verticalAlign"> | CSSLengthPercentage ->("verticalAlign"); +export const verticalAlign = ( + alignment: KnownCSSValues<"verticalAlign"> | CSSLengthPercentage +): PropertyTuple<"verticalAlign"> => + [ + "verticalAlign", + alignment.toString() as TypedCSSProperties["verticalAlign"], + ] as const; diff --git a/packages/tacky-css/src/property/text.ts b/packages/tacky-css/src/property/text.ts index 9671717..55b3887 100644 --- a/packages/tacky-css/src/property/text.ts +++ b/packages/tacky-css/src/property/text.ts @@ -1,23 +1,26 @@ import * as CSS from "csstype"; -import { KnownCSSValues } from "../types"; -import { CSSLengthPercentage } from "../unit"; -import { knownUnionProperty, variantProperty } from "../utils"; +import { TypedCSSProperties } from "../types"; +import { CSSLength } from "../unit"; +import { knownUnionProperty, PropertyTuple } from "../utils"; export const hyphens = knownUnionProperty("hyphens"); -export const letterSpacing = variantProperty< - "letterSpacing", - KnownCSSValues<"letterSpacing"> ->("letterSpacing"); +export const letterSpacing = ( + spacing: CSS.Globals | CSSLength | "normal" +): PropertyTuple<"letterSpacing"> => + [ + "letterSpacing", + spacing.toString() as TypedCSSProperties["letterSpacing"], + ] as const; export const lineBreak = knownUnionProperty("lineBreak"); export const overflowWrap = knownUnionProperty("overflowWrap"); -export const tabSize = variantProperty< - "tabSize", - CSS.Properties["tabSize"] | CSSLengthPercentage ->("tabSize"); +export const tabSize = ( + size: CSS.Globals | CSSLength | number +): PropertyTuple<"tabSize"> => + ["tabSize", size.toString() as TypedCSSProperties["tabSize"]] as const; export const textAlign = knownUnionProperty("textAlign"); @@ -31,7 +34,10 @@ export const whiteSpace = knownUnionProperty("whiteSpace"); export const wordBreak = knownUnionProperty("wordBreak"); -export const wordSpacing = variantProperty< - "wordSpacing", - KnownCSSValues<"wordSpacing"> | CSSLengthPercentage ->("wordSpacing"); +export const wordSpacing = ( + spacing: CSS.Globals | CSSLength | "normal" +): PropertyTuple<"wordSpacing"> => + [ + "wordSpacing", + spacing.toString() as TypedCSSProperties["wordSpacing"], + ] as const; diff --git a/packages/tacky-css/src/property/textDecoration.ts b/packages/tacky-css/src/property/textDecoration.ts index 1063ef5..4977f1e 100644 --- a/packages/tacky-css/src/property/textDecoration.ts +++ b/packages/tacky-css/src/property/textDecoration.ts @@ -28,33 +28,39 @@ export const textDecorationSkipInk = knownUnionProperty( export const textDecorationStyle = knownUnionProperty("textDecorationStyle"); -export const textDecorationThickness = variantProperty< - "textDecorationThickness", - KnownCSSValues<"textDecorationThickness"> | CSSLengthPercentage ->("textDecorationThickness"); +export const textDecorationThickness = ( + thickness: KnownCSSValues<"textDecorationThickness"> | CSSLengthPercentage +): PropertyTuple<"textDecorationThickness"> => + [ + "textDecorationThickness", + thickness.toString() as TypedCSSProperties["textDecorationThickness"], + ] as const; -type TextShadowArgs = - | [offsetX: CSSLengthPercentage, offsetY: CSSLengthPercentage] +type TextShadowArgs = + | [offsetX: CSSLengthPercentage, offsetY: CSSLengthPercentage] | [ - offsetX: CSSLengthPercentage, - offsetY: CSSLengthPercentage, + offsetX: CSSLengthPercentage, + offsetY: CSSLengthPercentage, color: CSSColor ] | [ - offsetX: CSSLengthPercentage, - offsetY: CSSLengthPercentage, - blurRadius: CSSLengthPercentage + offsetX: CSSLengthPercentage, + offsetY: CSSLengthPercentage, + blurRadius: CSSLengthPercentage ] | [ - offsetX: CSSLengthPercentage, - offsetY: CSSLengthPercentage, - blurRadius: CSSLengthPercentage, + offsetX: CSSLengthPercentage, + offsetY: CSSLengthPercentage, + blurRadius: CSSLengthPercentage, color: CSSColor ]; export interface TextShadow { - (...args: TextShadowArgs): PropertyTuple<"textShadow">; - (...args: [TextShadowArgs, ...TextShadowArgs[]]): PropertyTuple<"textShadow">; + (global: CSS.Globals): PropertyTuple<"textShadow">; + (...args: TextShadowArgs): PropertyTuple<"textShadow">; + ( + ...args: [TextShadowArgs, ...TextShadowArgs[]] + ): PropertyTuple<"textShadow">; } export const textShadow: TextShadow = ( diff --git a/packages/tacky-css/src/property/transitions.ts b/packages/tacky-css/src/property/transitions.ts index 2a5871f..0fa369d 100644 --- a/packages/tacky-css/src/property/transitions.ts +++ b/packages/tacky-css/src/property/transitions.ts @@ -4,16 +4,16 @@ import { PropertyTuple } from "../utils"; import { CSSTime } from "../unit"; import { TypedCSSProperties } from "../types"; -export const transitionDelay = ( - ...args: [keyword: CSS.Globals] | [...delay: [CSSTime, ...CSSTime[]]] +export const transitionDelay = ( + ...args: [keyword: CSS.Globals] | [...delay: [CSSTime, ...CSSTime[]]] ): PropertyTuple<"transitionDelay"> => [ "transitionDelay", args.join(", ") as TypedCSSProperties["transitionDelay"], ] as const; -export const transitionDuration = ( - ...args: [keyword: CSS.Globals] | [...duration: [CSSTime, ...CSSTime[]]] +export const transitionDuration = ( + ...args: [keyword: CSS.Globals] | [...duration: [CSSTime, ...CSSTime[]]] ): PropertyTuple<"transitionDuration"> => [ "transitionDuration", diff --git a/packages/tacky-css/src/shape.ts b/packages/tacky-css/src/shape.ts index 9a610aa..e10f304 100644 --- a/packages/tacky-css/src/shape.ts +++ b/packages/tacky-css/src/shape.ts @@ -9,40 +9,46 @@ import { FourDimensionalArgs } from "./utils"; export type Inset = TackyVariant<"inset">; -export const inset = ( +export const inset = ( ...args: [ - ...FourDimensionalArgs, - ...([] | ["round", ...BorderRadiusEllipticalCorners]) + ...FourDimensionalArgs>, + ...([] | ["round", ...BorderRadiusEllipticalCorners]) ] ): Inset => `inset(${args.join(" ")})` as Inset; -type ShapeRadius = CSSLengthPercentage | "closest-side" | "farthest-side"; +type ShapeRadius = + | CSSLengthPercentage + | "closest-side" + | "farthest-side"; export type Circle = TackyVariant<"circle">; -export const circle = ( +export const circle = ( ...args: [ - ...([] | [radius: ShapeRadius]), - ...position: [] | ["at", ...BackgroundPositionArgs] + ...radius: [] | [ShapeRadius], + ...position: [] | ["at", ...BackgroundPositionArgs] ] ): Circle => `circle(${args.join(" ")})` as Circle; export type Ellipse = TackyVariant<"ellipse">; -export const ellipse = ( +export const ellipse = ( ...args: [ - ...([] | [rx: ShapeRadius, ry: ShapeRadius]), - ...position: [] | ["at", ...BackgroundPositionArgs] + ...radius: [] | [rx: ShapeRadius, ry: ShapeRadius], + ...position: [] | ["at", ...BackgroundPositionArgs] ] ): Ellipse => `ellipse(${args.join(" ")})` as Ellipse; type FillRule = "nonzero" | "evenodd"; -type Vertex = [xi: CSSLengthPercentage, yi: CSSLengthPercentage]; +type Vertex = [ + xi: CSSLengthPercentage, + yi: CSSLengthPercentage +]; export type Polygon = TackyVariant<"polygon">; -export const polygon = ( - ...args: [...([] | [fill: FillRule]), ...vertices: [Vertex, ...Vertex[]]] +export const polygon = ( + ...args: [...fill: [] | [FillRule], ...vertices: [Vertex, ...Vertex[]]] ): Polygon => `polygon(${(args as (string | string[])[]) .map(arg => (Array.isArray(arg) ? arg.join(" ") : arg)) diff --git a/packages/tacky-css/src/unit.ts b/packages/tacky-css/src/unit.ts index 541e2b1..6211a27 100644 --- a/packages/tacky-css/src/unit.ts +++ b/packages/tacky-css/src/unit.ts @@ -1,25 +1,18 @@ import { TackyVariant } from "./types"; +import { MatchDecimal } from "./utils"; // Length -export type Rem = TackyVariant<"rem">; -export const rem = (magnitude: number): Rem => `${magnitude}rem` as Rem; +export const rem = (magnitude: T): `${T}rem` => `${magnitude}rem` as `${T}rem`; -export type Em = TackyVariant<"em">; -export const em = (magnitude: number): Em => `${magnitude}em` as Em; +export const em = (magnitude: T): `${T}em` => `${magnitude}em` as `${T}em`; -export type Px = TackyVariant<"px">; -export const px = (magnitude: number): Px => `${magnitude}px` as Px; +export const px = (magnitude: T): `${T}px` => `${magnitude}px` as `${T}px`; -export type Percent = TackyVariant<"percent">; -export const percent = (magnitude: number): Percent => - `${magnitude}%` as Percent; +export const percent = (magnitude: T): `${T}%` => `${magnitude}%` as `${T}%`; // Time -export type Ms = TackyVariant<"ms">; -export const ms = (magnitude: number): Ms => `${magnitude}ms` as Ms; - -export type S = TackyVariant<"s">; -export const s = (magnitude: number): S => `${magnitude}s` as S; +export const ms = (magnitude: T): `${T}ms` => `${magnitude}ms` as `${T}ms`; +export const s = (magnitude: T): `${T}s` => `${magnitude}s` as `${T}s`; // Angle export type Deg = TackyVariant<"deg">; @@ -44,8 +37,9 @@ export const dpcm = (magnitude: number): Dpi => `${magnitude}dpi` as Dpi; export type Dppx = TackyVariant<"dppx">; export const dppx = (magnitude: number): Dpi => `${magnitude}dpi` as Dpi; -export type CSSLength = Rem | Em | Px | 0; -export type CSSLengthPercentage = CSSLength | Percent; -export type CSSTime = Ms | S | 0; +export type CSSLength = MatchDecimal | 0; +export type CSSPercentage = MatchDecimal | 0; +export type CSSLengthPercentage = CSSLength | CSSPercentage; +export type CSSTime = MatchDecimal | 0; export type CSSAngle = Deg | Rad | Grad | Turn; -export type CSSResolution = Dpi | Dpcm | Dppx; +export type CSSResolution = MatchDecimal | 0; diff --git a/packages/tacky-css/src/utils.ts b/packages/tacky-css/src/utils.ts index 9a0dab1..566a6ab 100644 --- a/packages/tacky-css/src/utils.ts +++ b/packages/tacky-css/src/utils.ts @@ -1,6 +1,5 @@ import * as CSS from "csstype"; import { TypedCSSProperties } from "./types"; -import { CSSLengthPercentage } from "./unit"; export type PropertyTuple = readonly [ T, @@ -26,21 +25,29 @@ export const variantProperty = < // TODO: Investigate TS2590 without this cast ([property, value] as unknown) as [T, TypedCSSProperties[T]]; -export interface FourDimensionalProperty { - (global: CSS.Globals): ReturnType; - (all: ValueType): ReturnType; - (vertical: ValueType, horizontal: ValueType): ReturnType; - (top: ValueType, right: ValueType, bottom: ValueType): ReturnType; - ( - top: ValueType, - right: ValueType, - bottom: ValueType, - left: ValueType - ): ReturnType; -} - -export type FourDimensionalArgs = +export type FourDimensionalArgs = | [all: Value] | [vertical: Value, horizontal: Value] | [top: Value, right: Value, bottom: Value] | [top: Value, right: Value, bottom: Value, left: Value]; + +type Digits = "0" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9"; + + +type MatchInteger = S extends Units +? T +: S extends `${infer U}${infer W}` +? U extends Digits ? W extends "" ? never : MatchInteger +: never +: never; + + +type MatchPositiveDecimal = S extends `${infer U}.${infer V}` +? V extends Units ? never +: MatchInteger<`${U}${V}`, Units, T> : MatchInteger; + +export type MatchDecimal = S extends ({[P in S]: P extends Units +? never +: P extends `${"-" | ""}${infer U}` +? MatchPositiveDecimal : never +}[S]) ? S : never; diff --git a/packages/tacky-css/yarn.lock b/packages/tacky-css/yarn.lock index 3aab21a..6bd758c 100644 --- a/packages/tacky-css/yarn.lock +++ b/packages/tacky-css/yarn.lock @@ -339,10 +339,10 @@ to-fast-properties@^2.0.0: resolved "https://registry.yarnpkg.com/to-fast-properties/-/to-fast-properties-2.0.0.tgz#dc5e698cbd079265bc73e0377681a4e4e83f616e" integrity sha1-3F5pjL0HkmW8c+A3doGk5Og/YW4= -typescript@^4.0.2: - version "4.0.2" - resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.0.2.tgz#7ea7c88777c723c681e33bf7988be5d008d05ac2" - integrity sha512-e4ERvRV2wb+rRZ/IQeb3jm2VxBsirQLpQhdxplZ2MEzGvDkkMmPglecnNDfSUBivMjP93vRbngYYDQqQ/78bcQ== +typescript@^4.1.0-dev.20200911: + version "4.1.0-dev.20200911" + resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.1.0-dev.20200911.tgz#4eced2cfb93ec50d397e8089e45916befd1960bd" + integrity sha512-PK9OudvbrRBqgn8a31QoSM1IizFUYVihAd+/wJIEDllOV7EyOrdyWylcd9ai2NR9MWvWF5ECBVnRGXFNHu8NFw== yaml@^1.7.2: version "1.10.0" diff --git a/src/index.tsx b/src/index.tsx index 34bf42a..e06a9ce 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -13,13 +13,13 @@ const Example: React.FC = () => { _.color(_.rgb(255, 0, 0)), _.fontSize(_.rem(test)), _.fontFamily("Helvetica"), - _.marginTop(_.rem(5)), - _.marginBottom(_.rem(5)), + _.marginTop("5rem"), + _.marginBottom("5rem"), _.backgroundColor(_.rgb(0, 0, 128)), _.display(display), - _.boxShadow(_.rem(2), _.rem(2), _.rem(2), _.rem(2), _.rgba(0, 0, 0, 0.5)), + _.boxShadow("2rem", "2rem", "2rem", "2rem", _.rgba(0, 0, 0, 0.5)), _.media( - ["not", _.media.screen(_.media.minWidth(_.px(300)))], + ["not", _.media.screen(_.media.minWidth("300px"))], _.color(_.rgb(0, 255, 0)) ), ]); diff --git a/yarn.lock b/yarn.lock index cf0cf62..e8e6ffe 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1100,6 +1100,22 @@ resolved "https://registry.yarnpkg.com/@emotion/weak-memoize/-/weak-memoize-0.2.5.tgz#8eed982e2ee6f7f4e44c253e12962980791efd46" integrity sha512-6U71C2Wp7r5XtFtQzYrW5iKFT67OixrSxjI4MptCHzdSVlgabczzqLe0ZSgnub/5Kp4hSbpDB1tMytZY9pwxxA== +"@eslint/eslintrc@^0.1.3": + version "0.1.3" + resolved "https://registry.yarnpkg.com/@eslint/eslintrc/-/eslintrc-0.1.3.tgz#7d1a2b2358552cc04834c0979bd4275362e37085" + integrity sha512-4YVwPkANLeNtRjMekzux1ci8hIaH5eGKktGqR0d3LWsKNn5B2X/1Z6Trxy7jQXl9EBGE6Yj02O+t09FMeRllaA== + dependencies: + ajv "^6.12.4" + debug "^4.1.1" + espree "^7.3.0" + globals "^12.1.0" + ignore "^4.0.6" + import-fresh "^3.2.1" + js-yaml "^3.13.1" + lodash "^4.17.19" + minimatch "^3.0.4" + strip-json-comments "^3.1.1" + "@istanbuljs/load-nyc-config@^1.0.0": version "1.1.0" resolved "https://registry.yarnpkg.com/@istanbuljs/load-nyc-config/-/load-nyc-config-1.1.0.tgz#fd3db1d59ecf7cf121e80650bb86712f9b55eced" @@ -1297,6 +1313,27 @@ "@types/yargs" "^15.0.0" chalk "^4.0.0" +"@nodelib/fs.scandir@2.1.3": + version "2.1.3" + resolved "https://registry.yarnpkg.com/@nodelib/fs.scandir/-/fs.scandir-2.1.3.tgz#3a582bdb53804c6ba6d146579c46e52130cf4a3b" + integrity sha512-eGmwYQn3gxo4r7jdQnkrrN6bY478C3P+a/y72IJukF8LjB6ZHeB3c+Ehacj3sYeSmUXGlnA67/PmbM9CVwL7Dw== + dependencies: + "@nodelib/fs.stat" "2.0.3" + run-parallel "^1.1.9" + +"@nodelib/fs.stat@2.0.3", "@nodelib/fs.stat@^2.0.2": + version "2.0.3" + resolved "https://registry.yarnpkg.com/@nodelib/fs.stat/-/fs.stat-2.0.3.tgz#34dc5f4cabbc720f4e60f75a747e7ecd6c175bd3" + integrity sha512-bQBFruR2TAwoevBEd/NWMoAAtNGzTRgdrqnYCc7dhzfoNvqPzLyqlEQnzZ3kVnNrSp25iyxE00/3h2fqGAGArA== + +"@nodelib/fs.walk@^1.2.3": + version "1.2.4" + resolved "https://registry.yarnpkg.com/@nodelib/fs.walk/-/fs.walk-1.2.4.tgz#011b9202a70a6366e436ca5c065844528ab04976" + integrity sha512-1V9XOY4rDW0rehzbrcqAmHnz8e7SKvX27gh8Gt2WgB0+pdzdiLV83p72kZPU+jvMbS1qU5mauP2iOvO8rhmurQ== + dependencies: + "@nodelib/fs.scandir" "2.1.3" + fastq "^1.6.0" + "@sinonjs/commons@^1.7.0": version "1.8.1" resolved "https://registry.yarnpkg.com/@sinonjs/commons/-/commons-1.8.1.tgz#e7df00f98a203324f6dc7cc606cad9d4a8ab2217" @@ -1354,11 +1391,6 @@ resolved "https://registry.yarnpkg.com/@types/color-name/-/color-name-1.1.1.tgz#1c1261bbeaa10a8055bbc5d8ab84b7b2afc846a0" integrity sha512-rr+OQyAjxze7GgWrSaJwydHStIhHq2lvY3BOC2Mj7KnzI7XK0Uw1TOOdI9lDoajEbSWLiYgoo4f1R51erQfhPQ== -"@types/eslint-visitor-keys@^1.0.0": - version "1.0.0" - resolved "https://registry.yarnpkg.com/@types/eslint-visitor-keys/-/eslint-visitor-keys-1.0.0.tgz#1ee30d79544ca84d68d4b3cdb0af4f205663dd2d" - integrity sha512-OCutwjDZ4aFS6PB1UZ988C4YgwlBHJd6wCeQqaLdmadZ/7e+w79+hbMUFC1QXDNCmdyoRfAFdm0RypzwR+Qpag== - "@types/glob@^7.1.1": version "7.1.3" resolved "https://registry.yarnpkg.com/@types/glob/-/glob-7.1.3.tgz#e6ba80f36b7daad2c685acd9266382e68985c183" @@ -1414,7 +1446,12 @@ jest-diff "^25.2.1" pretty-format "^25.2.1" -"@types/json-schema@^7.0.3", "@types/json-schema@^7.0.4", "@types/json-schema@^7.0.5": +"@types/json-schema@^7.0.3": + version "7.0.6" + resolved "https://registry.yarnpkg.com/@types/json-schema/-/json-schema-7.0.6.tgz#f4c7ec43e81b319a9815115031709f26987891f0" + integrity sha512-3c+yGKvVP5Y9TYBEibGNR+kLtijnj7mYrXRg+WpFb2X9xm04g/DXYkfg4hmzJQosc9snFNUPkbYIhu+KAm6jJw== + +"@types/json-schema@^7.0.4", "@types/json-schema@^7.0.5": version "7.0.5" resolved "https://registry.yarnpkg.com/@types/json-schema/-/json-schema-7.0.5.tgz#dcce4430e64b443ba8945f0290fb564ad5bac6dd" integrity sha512-7+2BITlgjgDhH0vvwZU/HZJVyk+2XUlvxXe8dFMedNX/aMkaOq++rMAFXc0tM7ij15QaWlbdQASBR9dihi+bDQ== @@ -1544,65 +1581,75 @@ dependencies: "@types/yargs-parser" "*" -"@typescript-eslint/eslint-plugin@^3.10.0": - version "3.10.0" - resolved "https://registry.yarnpkg.com/@typescript-eslint/eslint-plugin/-/eslint-plugin-3.10.0.tgz#40fd53e81639c0d1a515b44e5fdf4c03dfd3cd39" - integrity sha512-Bbeg9JAnSzZ85Y0gpInZscSpifA6SbEgRryaKdP5ZlUjhTKsvZS4GUIE6xAZCjhNTrf4zXXsySo83ZdHL7it0w== +"@typescript-eslint/eslint-plugin@^4.1.0": + version "4.1.0" + resolved "https://registry.yarnpkg.com/@typescript-eslint/eslint-plugin/-/eslint-plugin-4.1.0.tgz#7d309f60815ff35e9627ad85e41928d7b7fd443f" + integrity sha512-U+nRJx8XDUqJxYF0FCXbpmD9nWt/xHDDG0zsw1vrVYAmEAuD/r49iowfurjSL2uTA2JsgtpsyG7mjO7PHf2dYw== dependencies: - "@typescript-eslint/experimental-utils" "3.10.0" + "@typescript-eslint/experimental-utils" "4.1.0" + "@typescript-eslint/scope-manager" "4.1.0" debug "^4.1.1" functional-red-black-tree "^1.0.1" regexpp "^3.0.0" semver "^7.3.2" tsutils "^3.17.1" -"@typescript-eslint/experimental-utils@3.10.0": - version "3.10.0" - resolved "https://registry.yarnpkg.com/@typescript-eslint/experimental-utils/-/experimental-utils-3.10.0.tgz#f97a669a84a78319ab324cd51169d0c52853a360" - integrity sha512-e5ZLSTuXgqC/Gq3QzK2orjlhTZVXzwxDujQmTBOM1NIVBZgW3wiIZjaXuVutk9R4UltFlwC9UD2+bdxsA7yyNg== +"@typescript-eslint/experimental-utils@4.1.0": + version "4.1.0" + resolved "https://registry.yarnpkg.com/@typescript-eslint/experimental-utils/-/experimental-utils-4.1.0.tgz#263d7225645c09a411c8735eeffd417f50f49026" + integrity sha512-paEYLA37iqRIDPeQwAmoYSiZ3PiHsaAc3igFeBTeqRHgPnHjHLJ9OGdmP6nwAkF65p2QzEsEBtpjNUBWByNWzA== dependencies: "@types/json-schema" "^7.0.3" - "@typescript-eslint/types" "3.10.0" - "@typescript-eslint/typescript-estree" "3.10.0" + "@typescript-eslint/scope-manager" "4.1.0" + "@typescript-eslint/types" "4.1.0" + "@typescript-eslint/typescript-estree" "4.1.0" eslint-scope "^5.0.0" eslint-utils "^2.0.0" -"@typescript-eslint/parser@^3.10.0": - version "3.10.0" - resolved "https://registry.yarnpkg.com/@typescript-eslint/parser/-/parser-3.10.0.tgz#820322d990a82265a78f4c1fc9aae03ce95b76ac" - integrity sha512-iJyf3f2HVwscvJR7ySGMXw2DJgIAPKEz8TeU17XVKzgJRV4/VgCeDFcqLzueRe7iFI2gv+Tln4AV88ZOnsCNXg== +"@typescript-eslint/parser@^4.1.0": + version "4.1.0" + resolved "https://registry.yarnpkg.com/@typescript-eslint/parser/-/parser-4.1.0.tgz#9b0409411725f14cd7faa81a664e5051225961db" + integrity sha512-hM/WNCQTzDHgS0Ke3cR9zPndL3OTKr9OoN9CL3UqulsAjYDrglSwIIgswSmHBcSbOzLmgaMARwrQEbIumIglvQ== dependencies: - "@types/eslint-visitor-keys" "^1.0.0" - "@typescript-eslint/experimental-utils" "3.10.0" - "@typescript-eslint/types" "3.10.0" - "@typescript-eslint/typescript-estree" "3.10.0" - eslint-visitor-keys "^1.1.0" + "@typescript-eslint/scope-manager" "4.1.0" + "@typescript-eslint/types" "4.1.0" + "@typescript-eslint/typescript-estree" "4.1.0" + debug "^4.1.1" + +"@typescript-eslint/scope-manager@4.1.0": + version "4.1.0" + resolved "https://registry.yarnpkg.com/@typescript-eslint/scope-manager/-/scope-manager-4.1.0.tgz#9e389745ee9cfe12252ed1e9958808abd6b3a683" + integrity sha512-HD1/u8vFNnxwiHqlWKC/Pigdn0Mvxi84Y6GzbZ5f5sbLrFKu0al02573Er+D63Sw67IffVUXR0uR8rpdfdk+vA== + dependencies: + "@typescript-eslint/types" "4.1.0" + "@typescript-eslint/visitor-keys" "4.1.0" -"@typescript-eslint/types@3.10.0": - version "3.10.0" - resolved "https://registry.yarnpkg.com/@typescript-eslint/types/-/types-3.10.0.tgz#b81906674eca94a884345ba0bc1aaf6cd4da912a" - integrity sha512-ktUWSa75heQNwH85GRM7qP/UUrXqx9d6yIdw0iLO9/uE1LILW+i+3+B64dUodUS2WFWLzKTlwfi9giqrODibWg== +"@typescript-eslint/types@4.1.0": + version "4.1.0" + resolved "https://registry.yarnpkg.com/@typescript-eslint/types/-/types-4.1.0.tgz#edbd3fec346f34e13ce7aa176b03b497a32c496a" + integrity sha512-rkBqWsO7m01XckP9R2YHVN8mySOKKY2cophGM8K5uDK89ArCgahItQYdbg/3n8xMxzu2elss+an1TphlUpDuJw== -"@typescript-eslint/typescript-estree@3.10.0": - version "3.10.0" - resolved "https://registry.yarnpkg.com/@typescript-eslint/typescript-estree/-/typescript-estree-3.10.0.tgz#65df13579a5e53c12afb4f1c5309589e3855a5de" - integrity sha512-yjuY6rmVHRhcUKgXaSPNVloRueGWpFNhxR5EQLzxXfiFSl1U/+FBqHhbaGwtPPEgCSt61QNhZgiFjWT27bgAyw== +"@typescript-eslint/typescript-estree@4.1.0": + version "4.1.0" + resolved "https://registry.yarnpkg.com/@typescript-eslint/typescript-estree/-/typescript-estree-4.1.0.tgz#394046ead25164494218c0e3d6b960695ea967f6" + integrity sha512-r6et57qqKAWU173nWyw31x7OfgmKfMEcjJl9vlJEzS+kf9uKNRr4AVTRXfTCwebr7bdiVEkfRY5xGnpPaNPe4Q== dependencies: - "@typescript-eslint/types" "3.10.0" - "@typescript-eslint/visitor-keys" "3.10.0" + "@typescript-eslint/types" "4.1.0" + "@typescript-eslint/visitor-keys" "4.1.0" debug "^4.1.1" - glob "^7.1.6" + globby "^11.0.1" is-glob "^4.0.1" lodash "^4.17.15" semver "^7.3.2" tsutils "^3.17.1" -"@typescript-eslint/visitor-keys@3.10.0": - version "3.10.0" - resolved "https://registry.yarnpkg.com/@typescript-eslint/visitor-keys/-/visitor-keys-3.10.0.tgz#6c0cac867e705a42e2c71b359bf6a10a88a28985" - integrity sha512-g4qftk8lWb/rHZe9uEp8oZSvsJhUvR2cfp7F7qE6DyUD2SsovEs8JDQTRP1xHzsD+pERsEpYNqkDgQXW6+ob5A== +"@typescript-eslint/visitor-keys@4.1.0": + version "4.1.0" + resolved "https://registry.yarnpkg.com/@typescript-eslint/visitor-keys/-/visitor-keys-4.1.0.tgz#b2d528c9484e7eda1aa4f86ccf0432fb16e4d545" + integrity sha512-+taO0IZGCtCEsuNTTF2Q/5o8+fHrlml8i9YsZt2AiDCdYEJzYlsmRY991l/6f3jNXFyAWepdQj7n8Na6URiDRQ== dependencies: - eslint-visitor-keys "^1.1.0" + "@typescript-eslint/types" "4.1.0" + eslint-visitor-keys "^2.0.0" "@webassemblyjs/ast@1.9.0": version "1.9.0" @@ -1781,9 +1828,9 @@ acorn-globals@^6.0.0: acorn-walk "^7.1.1" acorn-jsx@^5.2.0: - version "5.2.0" - resolved "https://registry.yarnpkg.com/acorn-jsx/-/acorn-jsx-5.2.0.tgz#4c66069173d6fdd68ed85239fc256226182b2ebe" - integrity sha512-HiUX/+K2YpkpJ+SzBffkM/AQ2YE03S0U1kjTLVpoJdhZMOWy8qvXVN9JdLqv2QsaQ6MPYQIuNmwD8zOiYUofLQ== + version "5.3.1" + resolved "https://registry.yarnpkg.com/acorn-jsx/-/acorn-jsx-5.3.1.tgz#fc8661e11b7ac1539c47dbfea2e72b3af34d267b" + integrity sha512-K0Ptm/47OKfQRpNQ2J/oIN/3QYiK6FwW+eJbILhsdxh2WTLdl+30o8aGdTbm5JbffpFFAg/g+zi1E+jvJha5ng== acorn-walk@^7.1.1: version "7.2.0" @@ -1810,7 +1857,7 @@ ajv-keywords@^3.1.0, ajv-keywords@^3.4.1: resolved "https://registry.yarnpkg.com/ajv-keywords/-/ajv-keywords-3.5.2.tgz#31f29da5ab6e00d1c2d329acf7b5929614d5014d" integrity sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ== -ajv@^6.1.0, ajv@^6.10.0, ajv@^6.10.2, ajv@^6.12.2, ajv@^6.12.3: +ajv@^6.1.0, ajv@^6.10.0, ajv@^6.10.2, ajv@^6.12.2, ajv@^6.12.3, ajv@^6.12.4: version "6.12.4" resolved "https://registry.yarnpkg.com/ajv/-/ajv-6.12.4.tgz#0614facc4522127fa713445c6bfd3ebd376e2234" integrity sha512-eienB2c9qVQs2KWexhkrdMLVDoIQCz5KSeLxwg9Lzk4DOfBtIK9PQwwufcsn1jjGuf9WZmqPMbGxOzfcuphJCQ== @@ -1941,6 +1988,11 @@ array-union@^1.0.1: dependencies: array-uniq "^1.0.1" +array-union@^2.1.0: + version "2.1.0" + resolved "https://registry.yarnpkg.com/array-union/-/array-union-2.1.0.tgz#b798420adbeb1de828d84acd8a2e23d3efe85e8d" + integrity sha512-HGyxoOTYUyCM6stUe6EJgnd4EoewAI7zMdfqO+kGjnlZmBDz/cR5pf8r/cR4Wq60sL/p0IkcjUEEPwS3GFrIyw== + array-uniq@^1.0.1: version "1.0.3" resolved "https://registry.yarnpkg.com/array-uniq/-/array-uniq-1.0.3.tgz#af6ac877a25cc7f74e058894753858dfdb24fdb6" @@ -3085,6 +3137,13 @@ diffie-hellman@^5.0.0: miller-rabin "^4.0.0" randombytes "^2.0.0" +dir-glob@^3.0.1: + version "3.0.1" + resolved "https://registry.yarnpkg.com/dir-glob/-/dir-glob-3.0.1.tgz#56dbf73d992a4a93ba1584f4534063fd2e41717f" + integrity sha512-WkrWp9GR4KXfKGYzOLmTuGVi1UWFfws377n9cc55/tb6DuqyF6pcQ5AbiHEshaDpY9v6oaSr2XCDidGmMwdzIA== + dependencies: + path-type "^4.0.0" + dns-equal@^1.0.0: version "1.0.0" resolved "https://registry.yarnpkg.com/dns-equal/-/dns-equal-1.0.0.tgz#b39e7f1da6eb0a75ba9c17324b34753c47e0654d" @@ -3416,11 +3475,11 @@ eslint-scope@^4.0.3: estraverse "^4.1.1" eslint-scope@^5.0.0, eslint-scope@^5.1.0: - version "5.1.0" - resolved "https://registry.yarnpkg.com/eslint-scope/-/eslint-scope-5.1.0.tgz#d0f971dfe59c69e0cada684b23d49dbf82600ce5" - integrity sha512-iiGRvtxWqgtx5m8EyQUJihBloE4EnYeGE/bz1wSPwJE6tZuJUtHlhqDM4Xj2ukE8Dyy1+HCZ4hE0fzIVMzb58w== + version "5.1.1" + resolved "https://registry.yarnpkg.com/eslint-scope/-/eslint-scope-5.1.1.tgz#e786e59a66cb92b3f6c1fb0d508aab174848f48c" + integrity sha512-2NxwbF/hZ0KpepYN0cNbo+FN6XoK7GaHlQhgx/hIZl6Va0bF45RQOOwhLIy8lQDbuCiadSLCBnH2CFYquit5bw== dependencies: - esrecurse "^4.1.0" + esrecurse "^4.3.0" estraverse "^4.1.1" eslint-utils@^2.0.0, eslint-utils@^2.1.0: @@ -3435,12 +3494,18 @@ eslint-visitor-keys@^1.1.0, eslint-visitor-keys@^1.3.0: resolved "https://registry.yarnpkg.com/eslint-visitor-keys/-/eslint-visitor-keys-1.3.0.tgz#30ebd1ef7c2fdff01c3a4f151044af25fab0523e" integrity sha512-6J72N8UNa462wa/KFODt/PJ3IU60SDpC3QXC1Hjc1BXXpfL2C9R5+AU7jhe0F6GREqVMh4Juu+NY7xn+6dipUQ== -eslint@^7.7.0: - version "7.7.0" - resolved "https://registry.yarnpkg.com/eslint/-/eslint-7.7.0.tgz#18beba51411927c4b64da0a8ceadefe4030d6073" - integrity sha512-1KUxLzos0ZVsyL81PnRN335nDtQ8/vZUD6uMtWbF+5zDtjKcsklIi78XoE0MVL93QvWTu+E5y44VyyCsOMBrIg== +eslint-visitor-keys@^2.0.0: + version "2.0.0" + resolved "https://registry.yarnpkg.com/eslint-visitor-keys/-/eslint-visitor-keys-2.0.0.tgz#21fdc8fbcd9c795cc0321f0563702095751511a8" + integrity sha512-QudtT6av5WXels9WjIM7qz1XD1cWGvX4gGXvp/zBn9nXG02D0utdU3Em2m/QjTnrsk6bBjmCygl3rmj118msQQ== + +eslint@^7.9.0: + version "7.9.0" + resolved "https://registry.yarnpkg.com/eslint/-/eslint-7.9.0.tgz#522aeccc5c3a19017cf0cb46ebfd660a79acf337" + integrity sha512-V6QyhX21+uXp4T+3nrNfI3hQNBDa/P8ga7LoQOenwrlEFXrEnUEE+ok1dMtaS3b6rmLXhT1TkTIsG75HMLbknA== dependencies: "@babel/code-frame" "^7.0.0" + "@eslint/eslintrc" "^0.1.3" ajv "^6.10.0" chalk "^4.0.0" cross-spawn "^7.0.2" @@ -3450,7 +3515,7 @@ eslint@^7.7.0: eslint-scope "^5.1.0" eslint-utils "^2.1.0" eslint-visitor-keys "^1.3.0" - espree "^7.2.0" + espree "^7.3.0" esquery "^1.2.0" esutils "^2.0.2" file-entry-cache "^5.0.1" @@ -3477,7 +3542,7 @@ eslint@^7.7.0: text-table "^0.2.0" v8-compile-cache "^2.0.3" -espree@^7.2.0: +espree@^7.3.0: version "7.3.0" resolved "https://registry.yarnpkg.com/espree/-/espree-7.3.0.tgz#dc30437cf67947cf576121ebd780f15eeac72348" integrity sha512-dksIWsvKCixn1yrEXO8UosNSxaDoSYpq9reEjZSbHLpT5hpaCAKTLBwq0RHtLrIr+c0ByiYzWT8KTMRzoRCNlw== @@ -3505,12 +3570,19 @@ esrecurse@^4.1.0: dependencies: estraverse "^4.1.0" +esrecurse@^4.3.0: + version "4.3.0" + resolved "https://registry.yarnpkg.com/esrecurse/-/esrecurse-4.3.0.tgz#7ad7964d679abb28bee72cec63758b1c5d2c9921" + integrity sha512-KmfKL3b6G+RXvP8N1vr3Tq1kL/oCFgn2NYXEtqP8/L3pKapUA4G8cFVaoF3SU323CD4XypR/ffioHmkti6/Tag== + dependencies: + estraverse "^5.2.0" + estraverse@^4.1.0, estraverse@^4.1.1, estraverse@^4.2.0: version "4.3.0" resolved "https://registry.yarnpkg.com/estraverse/-/estraverse-4.3.0.tgz#398ad3f3c5a24948be7725e83d11a7de28cdbd1d" integrity sha512-39nnKffWz8xN1BU/2c79n9nB9HDzo0niYUqx6xyqUnyoAnQyyWpOTdZEeiCch8BBu515t4wp9ZmgVfVhn9EBpw== -estraverse@^5.1.0: +estraverse@^5.1.0, estraverse@^5.2.0: version "5.2.0" resolved "https://registry.yarnpkg.com/estraverse/-/estraverse-5.2.0.tgz#307df42547e6cc7324d3cf03c155d5cdb8c53880" integrity sha512-BxbNGGNm0RyRYvUdHpIwv9IWzeM9XClbOxwoATuFdOE7ZE6wHL+HQ5T8hoPM+zHvmKzzsEqhgy0GrQ5X13afiQ== @@ -3710,6 +3782,18 @@ fast-diff@^1.1.2: resolved "https://registry.yarnpkg.com/fast-diff/-/fast-diff-1.2.0.tgz#73ee11982d86caaf7959828d519cfe927fac5f03" integrity sha512-xJuoT5+L99XlZ8twedaRf6Ax2TgQVxvgZOYoPKqZufmJib0tL2tegPBOZb1pVNgIhlqDlA0eO0c3wBvQcmzx4w== +fast-glob@^3.1.1: + version "3.2.4" + resolved "https://registry.yarnpkg.com/fast-glob/-/fast-glob-3.2.4.tgz#d20aefbf99579383e7f3cc66529158c9b98554d3" + integrity sha512-kr/Oo6PX51265qeuCYsyGypiO5uJFgBS0jksyG7FUeCyQzNwYnzrNIMR1NXfkZXsMYXYLRAHgISHBz8gQcxKHQ== + dependencies: + "@nodelib/fs.stat" "^2.0.2" + "@nodelib/fs.walk" "^1.2.3" + glob-parent "^5.1.0" + merge2 "^1.3.0" + micromatch "^4.0.2" + picomatch "^2.2.1" + fast-json-stable-stringify@^2.0.0: version "2.1.0" resolved "https://registry.yarnpkg.com/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz#874bf69c6f404c2b5d99c481341399fd55892633" @@ -3720,6 +3804,13 @@ fast-levenshtein@^2.0.6, fast-levenshtein@~2.0.6: resolved "https://registry.yarnpkg.com/fast-levenshtein/-/fast-levenshtein-2.0.6.tgz#3d8a5c66883a16a30ca8643e851f19baa7797917" integrity sha1-PYpcZog6FqMMqGQ+hR8Zuqd5eRc= +fastq@^1.6.0: + version "1.8.0" + resolved "https://registry.yarnpkg.com/fastq/-/fastq-1.8.0.tgz#550e1f9f59bbc65fe185cb6a9b4d95357107f481" + integrity sha512-SMIZoZdLh/fgofivvIkmknUXyPnvxRE3DhtZ5Me3Mrsk5gyPL42F0xr51TdRXskBxHfMp+07bcYzfsYEsSQA9Q== + dependencies: + reusify "^1.0.4" + faye-websocket@^0.10.0: version "0.10.0" resolved "https://registry.yarnpkg.com/faye-websocket/-/faye-websocket-0.10.0.tgz#4e492f8d04dfb6f89003507f6edbf2d501e7c6f4" @@ -4017,14 +4108,14 @@ glob-parent@^3.1.0: is-glob "^3.1.0" path-dirname "^1.0.0" -glob-parent@^5.0.0, glob-parent@~5.1.0: +glob-parent@^5.0.0, glob-parent@^5.1.0, glob-parent@~5.1.0: version "5.1.1" resolved "https://registry.yarnpkg.com/glob-parent/-/glob-parent-5.1.1.tgz#b6c1ef417c4e5663ea498f1c45afac6916bbc229" integrity sha512-FnI+VGOpnlGHWZxthPGR+QhR78fuiK0sNLkHQv+bL9fQi57lNNdquIbna/WrfROrolq8GK5Ek6BiMwqL/voRYQ== dependencies: is-glob "^4.0.1" -glob@^7.0.3, glob@^7.1.1, glob@^7.1.2, glob@^7.1.3, glob@^7.1.4, glob@^7.1.6: +glob@^7.0.3, glob@^7.1.1, glob@^7.1.2, glob@^7.1.3, glob@^7.1.4: version "7.1.6" resolved "https://registry.yarnpkg.com/glob/-/glob-7.1.6.tgz#141f33b81a7c2492e125594307480c46679278a6" integrity sha512-LwaxwyZ72Lk7vZINtNNrywX0ZuLyStrdDtabefZKAY5ZGJhVtgdznluResxNmPitE0SAO+O26sWTHeKSI2wMBA== @@ -4084,6 +4175,18 @@ globals@^12.1.0: dependencies: type-fest "^0.8.1" +globby@^11.0.1: + version "11.0.1" + resolved "https://registry.yarnpkg.com/globby/-/globby-11.0.1.tgz#9a2bf107a068f3ffeabc49ad702c79ede8cfd357" + integrity sha512-iH9RmgwCmUJHi2z5o2l3eTtGBtXek1OYlHrbcxOYugyHLmAsZrPj43OtHThd62Buh/Vv6VyCBD2bdyWcGNQqoQ== + dependencies: + array-union "^2.1.0" + dir-glob "^3.0.1" + fast-glob "^3.1.1" + ignore "^5.1.4" + merge2 "^1.3.0" + slash "^3.0.0" + globby@^6.1.0: version "6.1.0" resolved "https://registry.yarnpkg.com/globby/-/globby-6.1.0.tgz#f5a6d70e8395e21c858fb0489d64df02424d506c" @@ -4395,7 +4498,12 @@ ignore@^4.0.6: resolved "https://registry.yarnpkg.com/ignore/-/ignore-4.0.6.tgz#750e3db5862087b4737ebac8207ffd1ef27b25fc" integrity sha512-cyFDKrqc/YdcWFniJhzI42+AzS+gNwmUzOSFcRCQYwySuBBBy/KjuxWLZ/FHEH6Moq1NizMOBWyTcv8O4OZIMg== -import-fresh@^3.0.0, import-fresh@^3.1.0: +ignore@^5.1.4: + version "5.1.8" + resolved "https://registry.yarnpkg.com/ignore/-/ignore-5.1.8.tgz#f150a8b50a34289b33e22f5889abd4d8016f0e57" + integrity sha512-BMpfD7PpiETpBl/A6S498BaIJ6Y/ABT93ETbby2fP00v4EbvPBXWEoaR1UBPKs3iR53pJY7EtZk5KACI57i1Uw== + +import-fresh@^3.0.0, import-fresh@^3.1.0, import-fresh@^3.2.1: version "3.2.1" resolved "https://registry.yarnpkg.com/import-fresh/-/import-fresh-3.2.1.tgz#633ff618506e793af5ac91bf48b72677e15cbe66" integrity sha512-6e1q1cnWP2RXD9/keSkxHScg508CdXqXWgWBaETNhyuBFz+kUZlKboh+ISK+bU++DmbHimVBrOz/zzPe0sZ3sQ== @@ -5565,6 +5673,11 @@ merge-stream@^2.0.0: resolved "https://registry.yarnpkg.com/merge-stream/-/merge-stream-2.0.0.tgz#52823629a14dd00c9770fb6ad47dc6310f2c1f60" integrity sha512-abv/qOcuPfk3URPfDzmZU1LKmuw8kT+0nIHvKrKgFrwifol/doWcdA4ZqsWQ8ENrFKkd67Mfpo/LovbIUsbt3w== +merge2@^1.3.0: + version "1.4.1" + resolved "https://registry.yarnpkg.com/merge2/-/merge2-1.4.1.tgz#4368892f885e907455a6fd7dc55c0c9d404990ae" + integrity sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg== + methods@~1.1.2: version "1.1.2" resolved "https://registry.yarnpkg.com/methods/-/methods-1.1.2.tgz#5529a4d67654134edcc5266656835b0f851afcee" @@ -6824,6 +6937,11 @@ retry@^0.12.0: resolved "https://registry.yarnpkg.com/retry/-/retry-0.12.0.tgz#1b42a6266a21f07421d1b0b54b7dc167b01c013b" integrity sha1-G0KmJmoh8HQh0bC1S33BZ7AcATs= +reusify@^1.0.4: + version "1.0.4" + resolved "https://registry.yarnpkg.com/reusify/-/reusify-1.0.4.tgz#90da382b1e126efc02146e90845a88db12925d76" + integrity sha512-U9nH88a3fc/ekCF1l0/UP1IosiuIjyTh7hBvXVMHYgVcfGvt897Xguj2UOLDeI5BG2m7/uwyaLVT6fbtCwTyzw== + rimraf@2.6.3: version "2.6.3" resolved "https://registry.yarnpkg.com/rimraf/-/rimraf-2.6.3.tgz#b2d104fe0d8fb27cf9e0a1cda8262dd3833c6cab" @@ -6858,6 +6976,11 @@ rsvp@^4.8.4: resolved "https://registry.yarnpkg.com/rsvp/-/rsvp-4.8.5.tgz#c8f155311d167f68f21e168df71ec5b083113734" integrity sha512-nfMOlASu9OnRJo1mbEk2cz0D56a1MBNrJ7orjRZQG10XDyuvwksKbuXNp6qa+kbn839HwjwhBzhFmdsaEAfauA== +run-parallel@^1.1.9: + version "1.1.9" + resolved "https://registry.yarnpkg.com/run-parallel/-/run-parallel-1.1.9.tgz#c9dd3a7cf9f4b2c4b6244e173a6ed866e61dd679" + integrity sha512-DEqnSRTDw/Tc3FXf49zedI638Z9onwUotBMiUFKmrO2sdFKIbXamXGQ3Axd4qgphxKB4kw/qP1w5kTxnfU1B9Q== + run-queue@^1.0.0, run-queue@^1.0.3: version "1.0.3" resolved "https://registry.yarnpkg.com/run-queue/-/run-queue-1.0.3.tgz#e848396f057d223f24386924618e25694161ec47" @@ -7459,7 +7582,7 @@ strip-final-newline@^2.0.0: resolved "https://registry.yarnpkg.com/strip-final-newline/-/strip-final-newline-2.0.0.tgz#89b852fb2fcbe936f6f4b3187afb0a12c1ab58ad" integrity sha512-BrpvfNAE3dcvq7ll3xVumzjKjZQ5tI1sEUIKr3Uoks0XUl45St3FlatVqef9prk4jRDzhW6WZg+3bk93y6pLjA== -strip-json-comments@^3.1.0: +strip-json-comments@^3.1.0, strip-json-comments@^3.1.1: version "3.1.1" resolved "https://registry.yarnpkg.com/strip-json-comments/-/strip-json-comments-3.1.1.tgz#31f1281b3832630434831c310c01cccda8cbe006" integrity sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig== @@ -7774,10 +7897,10 @@ typedarray@^0.0.6: resolved "https://registry.yarnpkg.com/typedarray/-/typedarray-0.0.6.tgz#867ac74e3864187b1d3d47d996a78ec5c8830777" integrity sha1-hnrHTjhkGHsdPUfZlqeOxciDB3c= -typescript@^4.0.2: - version "4.0.2" - resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.0.2.tgz#7ea7c88777c723c681e33bf7988be5d008d05ac2" - integrity sha512-e4ERvRV2wb+rRZ/IQeb3jm2VxBsirQLpQhdxplZ2MEzGvDkkMmPglecnNDfSUBivMjP93vRbngYYDQqQ/78bcQ== +typescript@^4.1.0-dev.20200911: + version "4.1.0-dev.20200911" + resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.1.0-dev.20200911.tgz#4eced2cfb93ec50d397e8089e45916befd1960bd" + integrity sha512-PK9OudvbrRBqgn8a31QoSM1IizFUYVihAd+/wJIEDllOV7EyOrdyWylcd9ai2NR9MWvWF5ECBVnRGXFNHu8NFw== unicode-canonical-property-names-ecmascript@^1.0.4: version "1.0.4"