From 6bd52dc72f248bcecfd44a4e2e1cf756dfe41e2d Mon Sep 17 00:00:00 2001 From: Andras Bacsai Date: Tue, 13 Sep 2022 13:49:32 +0200 Subject: [PATCH] fix: imports/exports --- apps/designer/app/canvas/canvas.tsx | 30 +- .../app/canvas/shared/sync/use-sync.ts | 4 +- apps/designer/app/designer/designer.tsx | 14 +- .../features/breakpoints/breakpoints.tsx | 26 +- .../breakpoints/use-subscribe-breakpoints.ts | 5 +- .../breakpoints/use-subscribe-shortcuts.ts | 4 +- .../features/breakpoints/width-setting.tsx | 9 +- .../app/designer/features/topbar/publish.tsx | 24 +- .../app/designer/features/topbar/share.tsx | 6 +- .../app/designer/features/topbar/topbar.tsx | 4 +- apps/designer/app/routes/dashboard/index.tsx | 8 +- apps/designer/app/routes/designer/$id.tsx | 7 +- apps/designer/app/routes/index.tsx | 6 +- .../app/routes/rest/breakpoints.$projectId.ts | 6 +- .../app/routes/rest/pages.$projectId.ts | 6 +- apps/designer/app/routes/rest/patch.ts | 8 +- .../app/routes/rest/project/clone.$domain.ts | 9 +- .../app/routes/rest/props.$projectId.ts | 6 +- .../app/routes/rest/tree.$projectId.ts | 6 +- apps/designer/app/shared/db/canvas.server.ts | 20 +- apps/designer/app/shared/db/misc.server.ts | 12 +- packages/http-client/src/index.ts | 1 - packages/project/src/breakpoints.ts | 82 - packages/project/src/index.ts | 13 +- packages/project/src/project.ts | 210 --- packages/project/src/props.ts | 98 -- packages/project/src/tree.ts | 86 - packages/react-sdk/src/css/keyword-values.ts | 1539 +++++------------ packages/react-sdk/src/css/units.ts | 4 +- 29 files changed, 513 insertions(+), 1740 deletions(-) delete mode 100644 packages/project/src/breakpoints.ts delete mode 100644 packages/project/src/project.ts delete mode 100644 packages/project/src/props.ts delete mode 100644 packages/project/src/tree.ts diff --git a/apps/designer/app/canvas/canvas.tsx b/apps/designer/app/canvas/canvas.tsx index 772d329130..f898b5ad62 100644 --- a/apps/designer/app/canvas/canvas.tsx +++ b/apps/designer/app/canvas/canvas.tsx @@ -1,30 +1,30 @@ import { useCallback, useMemo, useState } from "react"; import store from "immerhin"; -import * as db from "@webstudio-is/project"; +import type { Project } from "@webstudio-is/project"; import { - type OnChangeChildren, + createElementsTree, type Data, + globalStyles, + type OnChangeChildren, type Tree, useAllUserProps, - globalStyles, - createElementsTree, } from "@webstudio-is/react-sdk"; import { useSubscribe } from "~/shared/pubsub"; import { useShortcuts } from "./shared/use-shortcuts"; import { - usePopulateRootInstance, - useInsertInstance, useDeleteInstance, - useReparentInstance, - usePublishSelectedInstanceData, - usePublishRootInstance, - useUpdateSelectedInstance, - usePublishSelectedInstanceDataRect, - usePublishHoveredInstanceRect, + useInsertInstance, + usePopulateRootInstance, usePublishHoveredInstanceData, + usePublishHoveredInstanceRect, + usePublishRootInstance, + usePublishSelectedInstanceData, + usePublishSelectedInstanceDataRect, + usePublishTextEditingInstanceId, + useReparentInstance, useSetHoveredInstance, useUnselectInstance, - usePublishTextEditingInstanceId, + useUpdateSelectedInstance, } from "./shared/instance"; import { useUpdateStyle } from "./shared/style"; import { useTrackSelectedElement } from "./shared/use-track-selected-element"; @@ -83,7 +83,7 @@ const useSubscribePreviewMode = () => { type DesignModeProps = { treeId: Tree["id"]; - project: db.project.Project; + project: Project; }; const DesignMode = ({ treeId, project }: DesignModeProps) => { @@ -112,7 +112,7 @@ const DesignMode = ({ treeId, project }: DesignModeProps) => { }; type CanvasProps = { - data: Data & { project: db.project.Project }; + data: Data & { project: Project }; }; export const Canvas = ({ data }: CanvasProps): JSX.Element | null => { diff --git a/apps/designer/app/canvas/shared/sync/use-sync.ts b/apps/designer/app/canvas/shared/sync/use-sync.ts index c86c38f217..a1c290fcfb 100644 --- a/apps/designer/app/canvas/shared/sync/use-sync.ts +++ b/apps/designer/app/canvas/shared/sync/use-sync.ts @@ -1,9 +1,9 @@ import useInterval from "react-use/lib/useInterval"; import { sync } from "immerhin"; import { enqueue } from "./queue"; -import { project } from "@webstudio-is/project"; +import type { Project } from "@webstudio-is/project"; -export const useSync = ({ project }: { project: project.Project }) => { +export const useSync = ({ project }: { project: Project }) => { useInterval(() => { const entries = sync(); if (entries.length === 0) return; diff --git a/apps/designer/app/designer/designer.tsx b/apps/designer/app/designer/designer.tsx index 7a87db0eeb..a268d51991 100644 --- a/apps/designer/app/designer/designer.tsx +++ b/apps/designer/app/designer/designer.tsx @@ -1,8 +1,8 @@ import { useCallback } from "react"; -import { useSubscribe, usePublish, type Publish } from "~/shared/pubsub"; -import * as db from "@webstudio-is/project"; +import { type Publish, usePublish, useSubscribe } from "~/shared/pubsub"; +import type { Project } from "@webstudio-is/project"; import type { Config } from "~/config"; -import { Box, Flex, Grid, type CSS } from "@webstudio-is/design-system"; +import { Box, type CSS, Flex, Grid } from "@webstudio-is/design-system"; import interStyles from "~/shared/font-faces/inter.css"; import { SidebarLeft } from "./features/sidebar-left"; import { Inspector } from "./features/inspector"; @@ -16,19 +16,19 @@ import designerStyles from "./designer.css"; import { Footer } from "./features/footer"; import { TreePrevew } from "./features/tree-preview"; import { - useUpdateCanvasWidth, useSubscribeBreakpoints, + useUpdateCanvasWidth, } from "./features/breakpoints"; import { + CanvasIframe, useReadCanvasRect, Workspace, - CanvasIframe, } from "./features/workspace"; import { usePublishShortcuts } from "./shared/shortcuts"; import { + useDragAndDropState, useIsPreviewMode, useRootInstance, - useDragAndDropState, } from "~/shared/nano-states"; import { useClientSettings } from "./shared/client-settings"; import { Navigator } from "./features/sidebar-left"; @@ -211,7 +211,7 @@ const NavigatorPanel = ({ publish, isPreviewMode }: NavigatorPanelProps) => { type DesignerProps = { config: Config; - project: db.project.Project; + project: Project; }; export const Designer = ({ config, project }: DesignerProps) => { diff --git a/apps/designer/app/designer/features/breakpoints/breakpoints.tsx b/apps/designer/app/designer/features/breakpoints/breakpoints.tsx index 3738eeb92c..99437785bc 100644 --- a/apps/designer/app/designer/features/breakpoints/breakpoints.tsx +++ b/apps/designer/app/designer/features/breakpoints/breakpoints.tsx @@ -1,16 +1,16 @@ import { useEffect, useState } from "react"; import { type Breakpoint } from "@webstudio-is/react-sdk"; -import { useSubscribe, type Publish } from "~/shared/pubsub"; +import { type Publish, useSubscribe } from "~/shared/pubsub"; import { - DropdownMenu, - DropdownMenuContent, - DropdownMenuPortal, - DropdownMenuItem, - DropdownMenuTrigger, - DropdownMenuArrow, - DropdownMenuSeparator, - DropdownMenuCheckboxItem, __DEPRECATED__Text, + DropdownMenu, + DropdownMenuArrow, + DropdownMenuCheckboxItem, + DropdownMenuContent, + DropdownMenuItem, + DropdownMenuPortal, + DropdownMenuSeparator, + DropdownMenuTrigger, Flex, } from "@webstudio-is/design-system"; import { useSelectedBreakpoint } from "../../shared/nano-states"; @@ -20,12 +20,12 @@ import { ZoomSetting } from "./zoom-setting"; import { TriggerButton } from "./trigger-button"; import { WidthSetting } from "./width-setting"; import { - useSubscribeZoomFromShortcut, useSubscribeSelectBreakpointFromShortcut, + useSubscribeZoomFromShortcut, } from "./use-subscribe-shortcuts"; import { ConfirmationDialog } from "./confirmation-dialog"; import { useBreakpoints } from "~/shared/nano-states"; -import { sort } from "@webstudio-is/project"; +import { utils } from "@webstudio-is/project"; declare module "~/shared/pubsub" { export interface PubsubMap { @@ -105,7 +105,7 @@ export const Breakpoints = ({ publish }: BreakpointsProps) => { nextBreakpoints.splice(index, 1); setBreakpoints(nextBreakpoints); if (breakpointToDelete === selectedBreakpoint) { - setSelectedBreakpoint(sort(nextBreakpoints)[0]); + setSelectedBreakpoint(utils.breakpoints.sort(nextBreakpoints)[0]); } publish({ type: "breakpointDelete", @@ -163,7 +163,7 @@ export const Breakpoints = ({ publish }: BreakpointsProps) => { )} {view === "selector" && ( <> - {sort(breakpoints).map((breakpoint) => { + {utils.breakpoints.sort(breakpoints).map((breakpoint) => { return ( { const [breakpoints, setBreakpoints] = useBreakpoints(); const [selectedBreakpoint, setSelectedBreakpoint] = useSelectedBreakpoint(); @@ -13,7 +12,7 @@ export const useSubscribeBreakpoints = () => { useEffect(() => { // Set the initial selected breakpoint if (selectedBreakpoint === undefined && breakpoints.length !== 0) { - setSelectedBreakpoint(sort(breakpoints)[0]); + setSelectedBreakpoint(utils.breakpoints.sort(breakpoints)[0]); } // Breakpoints must have changed, lets update the selected breakpoint diff --git a/apps/designer/app/designer/features/breakpoints/use-subscribe-shortcuts.ts b/apps/designer/app/designer/features/breakpoints/use-subscribe-shortcuts.ts index 16b7ed486e..8849e6a5ad 100644 --- a/apps/designer/app/designer/features/breakpoints/use-subscribe-shortcuts.ts +++ b/apps/designer/app/designer/features/breakpoints/use-subscribe-shortcuts.ts @@ -2,13 +2,13 @@ import { useSubscribe } from "~/shared/pubsub"; import { useBreakpoints } from "~/shared/nano-states"; import { useZoom, useSelectedBreakpoint } from "../../shared/nano-states"; import { minZoom } from "./zoom-setting"; -import { sort } from "@webstudio-is/project"; +import { utils } from "@webstudio-is/project"; export const useSubscribeSelectBreakpointFromShortcut = () => { const [breakpoints] = useBreakpoints(); const [, setSelectedBreakpoint] = useSelectedBreakpoint(); useSubscribe("selectBreakpointFromShortcut", (index) => { - const breakpoint = sort(breakpoints)[index - 1]; + const breakpoint = utils.breakpoints.sort(breakpoints)[index - 1]; if (breakpoint) setSelectedBreakpoint(breakpoint); }); }; diff --git a/apps/designer/app/designer/features/breakpoints/width-setting.tsx b/apps/designer/app/designer/features/breakpoints/width-setting.tsx index fae33443d9..4d69bab986 100644 --- a/apps/designer/app/designer/features/breakpoints/width-setting.tsx +++ b/apps/designer/app/designer/features/breakpoints/width-setting.tsx @@ -3,9 +3,9 @@ import { useCanvasWidth, useSelectedBreakpoint, } from "~/designer/shared/nano-states"; -import { Slider, __DEPRECATED__Text, Flex } from "@webstudio-is/design-system"; +import { __DEPRECATED__Text, Flex, Slider } from "@webstudio-is/design-system"; import { useBreakpoints, useIsPreviewMode } from "~/shared/nano-states"; -import { sort } from "@webstudio-is/project"; +import { utils } from "@webstudio-is/project"; // Doesn't make sense to allow resizing the canvas lower/higher than this. export const minWidth = 50; @@ -18,7 +18,10 @@ const useNextBreakpoint = () => { const [selectedBreakpoint] = useSelectedBreakpoint(); const [breakpoints] = useBreakpoints(); - const sortedBreakpoints = useMemo(() => sort(breakpoints), [breakpoints]); + const sortedBreakpoints = useMemo( + () => utils.breakpoints.sort(breakpoints), + [breakpoints] + ); return useMemo(() => { if (selectedBreakpoint === undefined) return; diff --git a/apps/designer/app/designer/features/topbar/publish.tsx b/apps/designer/app/designer/features/topbar/publish.tsx index 921a909253..0bfa1637ec 100644 --- a/apps/designer/app/designer/features/topbar/publish.tsx +++ b/apps/designer/app/designer/features/topbar/publish.tsx @@ -1,24 +1,24 @@ -import { useState, useEffect } from "react"; +import { useEffect, useState } from "react"; import { useFetcher } from "@remix-run/react"; -import { RocketIcon, ExternalLinkIcon } from "@webstudio-is/icons"; +import { ExternalLinkIcon, RocketIcon } from "@webstudio-is/icons"; import { + __DEPRECATED__Text, Button, Flex, - Popover, - PopoverContent, - PopoverTrigger, - PopoverPortal, - TextField, - Text, - __DEPRECATED__Text, Label, Link, + Popover, + PopoverContent, + PopoverPortal, + PopoverTrigger, + Text, + TextField, useId, } from "@webstudio-is/design-system"; import { useIsPublishDialogOpen } from "../../shared/nano-states"; import env from "~/shared/env"; -import * as db from "@webstudio-is/project"; -type PublishButtonProps = { project: db.project.Project }; +import type { Project } from "@webstudio-is/project"; +type PublishButtonProps = { project: Project }; const getHost = () => { if (env.PUBLISHER_ENDPOINT && env.PUBLISHER_HOST) { @@ -60,7 +60,7 @@ const Content = ({ project }: PublishButtonProps) => { gap: "$0", }} > - {`${domain}.${getHost()}`} + {`${domain}.${getHost()}`} )} diff --git a/apps/designer/app/designer/features/topbar/share.tsx b/apps/designer/app/designer/features/topbar/share.tsx index 4236ee23de..70e473fb26 100644 --- a/apps/designer/app/designer/features/topbar/share.tsx +++ b/apps/designer/app/designer/features/topbar/share.tsx @@ -4,15 +4,15 @@ import { IconButton, Popover, PopoverContent, - PopoverTrigger, PopoverPortal, + PopoverTrigger, TextField, } from "@webstudio-is/design-system"; import { Share1Icon } from "@webstudio-is/icons"; -import * as db from "@webstudio-is/project"; +import type { Project } from "@webstudio-is/project"; import { useIsShareDialogOpen } from "../../shared/nano-states"; -type ShareButtonProps = { path: string; project: db.project.Project }; +type ShareButtonProps = { path: string; project: Project }; const Content = ({ path, project }: ShareButtonProps) => { if (typeof location === "undefined") { diff --git a/apps/designer/app/designer/features/topbar/topbar.tsx b/apps/designer/app/designer/features/topbar/topbar.tsx index 5c0378f439..f888b27315 100644 --- a/apps/designer/app/designer/features/topbar/topbar.tsx +++ b/apps/designer/app/designer/features/topbar/topbar.tsx @@ -7,12 +7,12 @@ import { PublishButton } from "./publish"; import { SyncStatus } from "./sync-status"; import { Menu } from "./menu"; import { Breakpoints } from "../breakpoints"; -import * as db from "@webstudio-is/project"; +import type { Project } from "@webstudio-is/project"; type TopbarProps = { config: Config; css: CSS; - project: db.project.Project; + project: Project; publish: Publish; }; export const Topbar = ({ config, css, project, publish }: TopbarProps) => { diff --git a/apps/designer/app/routes/dashboard/index.tsx b/apps/designer/app/routes/dashboard/index.tsx index 0c24455103..4cd69bafc3 100644 --- a/apps/designer/app/routes/dashboard/index.tsx +++ b/apps/designer/app/routes/dashboard/index.tsx @@ -1,17 +1,17 @@ import { useLoaderData } from "@remix-run/react"; import { - redirect, - type LoaderFunction, type ActionFunction, json, + type LoaderFunction, + redirect, } from "@remix-run/node"; import { Dashboard, links } from "~/dashboard"; -import * as db from "@webstudio-is/project"; +import { db } from "@webstudio-is/project"; import config, { type Config } from "~/config"; import { ensureUserCookie } from "~/shared/session"; import { authenticator } from "~/services/auth.server"; import { zfd } from "zod-form-data"; -import { User, type Project } from "@webstudio-is/prisma-client"; +import { type Project, User } from "@webstudio-is/prisma-client"; export { links }; const schema = zfd.formData({ diff --git a/apps/designer/app/routes/designer/$id.tsx b/apps/designer/app/routes/designer/$id.tsx index fb2d6017e0..d9ec4d91c8 100644 --- a/apps/designer/app/routes/designer/$id.tsx +++ b/apps/designer/app/routes/designer/$id.tsx @@ -1,13 +1,14 @@ import { useLoaderData } from "@remix-run/react"; import { LoaderFunction } from "@remix-run/node"; import { Designer, links } from "~/designer"; -import * as db from "@webstudio-is/project"; +import { db } from "@webstudio-is/project"; +import type { Project } from "@webstudio-is/project"; import config from "~/config"; import env from "~/env.server"; import { ErrorMessage } from "~/shared/error"; import { action, useAction } from "./_assets"; -export { links, action }; +export { action, links }; export const loader: LoaderFunction = async ({ params }) => { if (params.id === undefined) throw new Error("Project id undefined"); @@ -20,7 +21,7 @@ export const loader: LoaderFunction = async ({ params }) => { type Data = { config: typeof config; - project: db.project.Project; + project: Project; }; type Error = { diff --git a/apps/designer/app/routes/index.tsx b/apps/designer/app/routes/index.tsx index 331aa26f62..4f8026d7c5 100644 --- a/apps/designer/app/routes/index.tsx +++ b/apps/designer/app/routes/index.tsx @@ -1,8 +1,8 @@ -import { redirect, type LoaderFunction } from "@remix-run/node"; +import { type LoaderFunction, redirect } from "@remix-run/node"; import { useLoaderData } from "@remix-run/react"; -import { Root, type Data } from "@webstudio-is/react-sdk"; +import { type Data, Root } from "@webstudio-is/react-sdk"; import config from "~/config"; -import * as db from "@webstudio-is/project"; +import { db } from "@webstudio-is/project"; import { Canvas as CanvasDocument } from "~/shared/documents/canvas"; import env, { Env } from "~/env.server"; diff --git a/apps/designer/app/routes/rest/breakpoints.$projectId.ts b/apps/designer/app/routes/rest/breakpoints.$projectId.ts index 50a7706e73..5074f48411 100644 --- a/apps/designer/app/routes/rest/breakpoints.$projectId.ts +++ b/apps/designer/app/routes/rest/breakpoints.$projectId.ts @@ -1,6 +1,6 @@ import type { LoaderFunction } from "@remix-run/node"; import { Breakpoint } from "@webstudio-is/react-sdk"; -import * as projectdomain from "@webstudio-is/project"; +import { db } from "@webstudio-is/project"; export type ErrorData = { errors: string; @@ -10,7 +10,7 @@ export const loader: LoaderFunction = async ({ params, }): Promise | ErrorData> => { try { - const project = await projectdomain.project.loadById(params.projectId); + const project = await db.project.loadById(params.projectId); if (project === null) { throw new Error(`Project ${params.projectId} not found`); } @@ -19,7 +19,7 @@ export const loader: LoaderFunction = async ({ `Project ${params.projectId} needs to be published first` ); } - const data = await projectdomain.breakpoints.load(project.prodTreeId); + const data = await db.breakpoints.load(project.prodTreeId); if (data === null) { throw new Error( `Breakpoints not found for project ${params.projectId} and tree ID ${project.prodTreeId}` diff --git a/apps/designer/app/routes/rest/pages.$projectId.ts b/apps/designer/app/routes/rest/pages.$projectId.ts index ac5cff59c9..39dced94fe 100644 --- a/apps/designer/app/routes/rest/pages.$projectId.ts +++ b/apps/designer/app/routes/rest/pages.$projectId.ts @@ -1,6 +1,6 @@ import type { LoaderFunction } from "@remix-run/node"; import type { Breakpoint } from "@webstudio-is/react-sdk"; -import * as projectdomain from "@webstudio-is/project"; +import { db } from "@webstudio-is/project"; export type ErrorData = { errors: string; @@ -10,7 +10,7 @@ export const loader: LoaderFunction = async ({ params, }): Promise | ErrorData> => { try { - const project = await projectdomain.project.loadById(params.projectId); + const project = await db.project.loadById(params.projectId); if (project === null) { throw new Error(`Project ${params.projectId} not found`); } @@ -19,7 +19,7 @@ export const loader: LoaderFunction = async ({ `Project ${params.projectId} needs to be published first` ); } - const data = await projectdomain.breakpoints.load(project.prodTreeId); + const data = await db.breakpoints.load(project.prodTreeId); if (data === null) { throw new Error( `Breakpoints not found for project ${params.projectId} and tree ID ${project.prodTreeId}` diff --git a/apps/designer/app/routes/rest/patch.ts b/apps/designer/app/routes/rest/patch.ts index 976d50abfb..abc739d53b 100644 --- a/apps/designer/app/routes/rest/patch.ts +++ b/apps/designer/app/routes/rest/patch.ts @@ -1,13 +1,13 @@ import { type ActionFunction } from "@remix-run/node"; -import * as projectdomain from "@webstudio-is/project"; +import { db } from "@webstudio-is/project"; import { type SyncItem } from "immerhin"; import { type Tree } from "@webstudio-is/react-sdk"; import { type Project } from "@webstudio-is/prisma-client"; const updaters = { - root: projectdomain.tree.patchRoot, - props: projectdomain.props.patch, - breakpoints: projectdomain.breakpoints.patch, + root: db.tree.patchRoot, + props: db.props.patch, + breakpoints: db.breakpoints.patch, }; type UpdaterKey = keyof typeof updaters; diff --git a/apps/designer/app/routes/rest/project/clone.$domain.ts b/apps/designer/app/routes/rest/project/clone.$domain.ts index 5ef971f6c1..ab578e1941 100644 --- a/apps/designer/app/routes/rest/project/clone.$domain.ts +++ b/apps/designer/app/routes/rest/project/clone.$domain.ts @@ -1,6 +1,7 @@ import { type LoaderFunction, redirect } from "@remix-run/node"; import type { User } from "@webstudio-is/prisma-client"; -import * as projectdomain from "@webstudio-is/project"; +import { db as database } from "@webstudio-is/project"; +import type { Project } from "@webstudio-is/project"; import * as db from "~/shared/db"; import { ensureUserCookie } from "~/shared/session"; import config from "~/config"; @@ -12,11 +13,11 @@ const ensureProject = async ({ }: { userId: User["id"]; domain: string; -}): Promise => { - const projects = await projectdomain.project.loadManyByUserId(userId); +}): Promise => { + const projects = await database.project.loadManyByUserId(userId); if (projects.length !== 0) return projects[0]; - return await projectdomain.project.clone(domain, userId); + return await database.project.clone(domain, userId); }; /** diff --git a/apps/designer/app/routes/rest/props.$projectId.ts b/apps/designer/app/routes/rest/props.$projectId.ts index c704e5bce6..8422272748 100644 --- a/apps/designer/app/routes/rest/props.$projectId.ts +++ b/apps/designer/app/routes/rest/props.$projectId.ts @@ -1,6 +1,6 @@ import { type LoaderFunction } from "@remix-run/node"; import { type InstanceProps } from "@webstudio-is/react-sdk"; -import * as projectdomain from "@webstudio-is/project"; +import { db } from "@webstudio-is/project"; type ErrorData = { errors: string; }; @@ -9,8 +9,8 @@ export const loader: LoaderFunction = async ({ params, }): Promise | ErrorData> => { try { - const project = await projectdomain.project.loadById(params.projectId); - return await projectdomain.props.loadByProject(project, "production"); + const project = await db.project.loadById(params.projectId); + return await db.props.loadByProject(project, "production"); } catch (error) { if (error instanceof Error) { return { diff --git a/apps/designer/app/routes/rest/tree.$projectId.ts b/apps/designer/app/routes/rest/tree.$projectId.ts index 0f9835a324..46da582ada 100644 --- a/apps/designer/app/routes/rest/tree.$projectId.ts +++ b/apps/designer/app/routes/rest/tree.$projectId.ts @@ -1,6 +1,6 @@ import { type LoaderFunction } from "@remix-run/node"; import type { Tree } from "@webstudio-is/react-sdk"; -import * as projectdomain from "@webstudio-is/project"; +import { db } from "@webstudio-is/project"; export type ErrorData = { errors: string; }; @@ -9,8 +9,8 @@ export const loader: LoaderFunction = async ({ params, }): Promise => { try { - const project = await projectdomain.project.loadById(params.projectId); - return await projectdomain.tree.loadByProject(project, "production"); + const project = await db.project.loadById(params.projectId); + return await db.tree.loadByProject(project, "production"); } catch (error) { if (error instanceof Error) { return { diff --git a/apps/designer/app/shared/db/canvas.server.ts b/apps/designer/app/shared/db/canvas.server.ts index 927a020e67..26db70052f 100644 --- a/apps/designer/app/shared/db/canvas.server.ts +++ b/apps/designer/app/shared/db/canvas.server.ts @@ -1,21 +1,21 @@ import { type Data } from "@webstudio-is/react-sdk"; -import * as projectdomain from "@webstudio-is/project"; - -export type CanvasData = Data & { project: projectdomain.project.Project }; +import { db } from "@webstudio-is/project"; +import type { Project } from "@webstudio-is/project"; +export type CanvasData = Data & { project: Project }; export type ErrorData = { errors: string; }; -const loadData = async (projectId: projectdomain.project.Project["id"]) => { - const project = await projectdomain.project.loadById(projectId); +const loadData = async (projectId: Project["id"]) => { + const project = await db.project.loadById(projectId); if (project === null) throw new Error(`Project "${projectId}" not found`); const [tree, props, breakpoints] = await Promise.all([ - projectdomain.tree.loadByProject(project, "development"), - projectdomain.props.loadByProject(project, "development"), - projectdomain.breakpoints.load(project.devTreeId), + db.tree.loadByProject(project, "development"), + db.props.loadByProject(project, "development"), + db.breakpoints.load(project.devTreeId), ]); if (tree === null) { @@ -39,7 +39,7 @@ const loadData = async (projectId: projectdomain.project.Project["id"]) => { export const loadCanvasData = async ({ projectId, }: { - projectId: projectdomain.project.Project["id"]; + projectId: Project["id"]; }): Promise => { return await loadData(projectId); }; @@ -49,7 +49,7 @@ export type PreviewData = Data; export const loadPreviewData = async ({ projectId, }: { - projectId: projectdomain.project.Project["id"]; + projectId: Project["id"]; }): Promise => { const { tree, props, breakpoints } = await loadData(projectId); return { tree, props, breakpoints }; diff --git a/apps/designer/app/shared/db/misc.server.ts b/apps/designer/app/shared/db/misc.server.ts index d3287cb4a2..9238ec88ad 100644 --- a/apps/designer/app/shared/db/misc.server.ts +++ b/apps/designer/app/shared/db/misc.server.ts @@ -1,4 +1,4 @@ -import * as projectdomain from "@webstudio-is/project"; +import { db } from "@webstudio-is/project"; /** * Conceptually publishing is cloning all data that affects user site @@ -18,17 +18,17 @@ export const publish = async ({ throw new Error("Domain required"); } - const project = await projectdomain.project.loadById(projectId); + const project = await db.project.loadById(projectId); if (project === null) { throw new Error(`Project "${projectId}" not found`); } - const tree = await projectdomain.tree.clone(project.devTreeId); - await projectdomain.props.clone({ + const tree = await db.tree.clone(project.devTreeId); + await db.props.clone({ previousTreeId: project.devTreeId, nextTreeId: tree.id, }); - await projectdomain.breakpoints.clone({ + await db.breakpoints.clone({ previousTreeId: project.devTreeId, nextTreeId: tree.id, }); @@ -36,7 +36,7 @@ export const publish = async ({ if (project.prodTreeId) { prodTreeIdHistory.push(project.prodTreeId); } - const updatedProject = await projectdomain.project.update({ + const updatedProject = await db.project.update({ id: projectId, domain, prodTreeId: tree.id, diff --git a/packages/http-client/src/index.ts b/packages/http-client/src/index.ts index 80e09ce24f..45ffdbad67 100644 --- a/packages/http-client/src/index.ts +++ b/packages/http-client/src/index.ts @@ -28,4 +28,3 @@ export const loadProject = async ({ breakpoints, }; }; - diff --git a/packages/project/src/breakpoints.ts b/packages/project/src/breakpoints.ts deleted file mode 100644 index b8b7d2781a..0000000000 --- a/packages/project/src/breakpoints.ts +++ /dev/null @@ -1,82 +0,0 @@ -import { - initialBreakpoints, - type Tree, - type Breakpoint, - BreakpointsSchema, -} from "@webstudio-is/react-sdk"; -import ObjectId from "bson-objectid"; -import { applyPatches, type Patch } from "immer"; -import { prisma, Project } from "@webstudio-is/prisma-client"; - -export const load = async (treeId?: Tree["id"]) => { - if (typeof treeId !== "string") { - throw new Error("Tree ID required"); - } - - const breakpoint = await prisma.breakpoints.findUnique({ - where: { treeId }, - }); - - if (breakpoint === null) { - throw new Error("Breakpoint not found"); - } - const values: Array = JSON.parse(breakpoint.values); - BreakpointsSchema.parse(values); - return { - ...breakpoint, - values, - }; -}; - -export const getBreakpointsWithId = () => - initialBreakpoints.map((breakpoint) => ({ - ...breakpoint, - id: ObjectId().toString(), - })); - -export const create = async ( - treeId: Project["id"], - values: Array -) => { - BreakpointsSchema.parse(values); - - const data = { - treeId, - values: JSON.stringify(values), - }; - await prisma.breakpoints.create({ data }); - return { - ...data, - breakpoints: values, - }; -}; - -export const clone = async ({ - previousTreeId, - nextTreeId, -}: { - previousTreeId: Tree["id"]; - nextTreeId: Tree["id"]; -}) => { - const breakpoints = await load(previousTreeId); - if (breakpoints === null) { - throw new Error(`Didn't find breakpoints with tree id "${previousTreeId}"`); - } - await create(nextTreeId, breakpoints.values); -}; - -export const patch = async ( - { treeId }: { treeId: Tree["id"]; projectId: Project["id"] }, - patches: Array -) => { - const breakpoints = await load(treeId); - if (breakpoints === null) return; - const nextValues = applyPatches(breakpoints.values, patches); - - BreakpointsSchema.parse(nextValues); - - await prisma.breakpoints.update({ - where: { treeId }, - data: { values: JSON.stringify(nextValues) }, - }); -}; diff --git a/packages/project/src/index.ts b/packages/project/src/index.ts index ae0b60e810..77721d7ddc 100644 --- a/packages/project/src/index.ts +++ b/packages/project/src/index.ts @@ -1,9 +1,8 @@ -import * as project from "./project"; -import * as breakpoints from "./breakpoints"; -import * as tree from "./tree"; -import * as props from "./props"; +import * as dbFunctions from "./db"; +import * as breakpointsUtils from "./shared/breakpoints"; +import * as treeUtils from "./shared/tree-utils"; -export const db = {project, breakpoints, tree, props} +export const utils = { breakpoints: breakpointsUtils, tree: treeUtils }; +export const db = dbFunctions; -export breakpoints from "./shared/breakpoints"; -export tree from "./shared/tree-utils"; +export * from "./db/types"; diff --git a/packages/project/src/project.ts b/packages/project/src/project.ts deleted file mode 100644 index b6790b46eb..0000000000 --- a/packages/project/src/project.ts +++ /dev/null @@ -1,210 +0,0 @@ -import slugify from "slugify"; -import { nanoid } from "nanoid"; -import { z } from "zod"; -import { - User, - prisma, - Prisma, - Project as BaseProject, -} from "@webstudio-is/prisma-client"; -import { formatAsset } from "@webstudio-is/asset-uploader"; -import type { Asset } from "@webstudio-is/asset-uploader"; -import * as db from "./index"; -const TreeHistorySchema = z.array(z.string()); - -export type Project = Omit & { - prodTreeIdHistory: z.infer; - assets?: Array; -}; - -const parseProject = (project: BaseProject): Project => { - const prodTreeIdHistory = JSON.parse(project.prodTreeIdHistory); - return { - ...project, - prodTreeIdHistory: TreeHistorySchema.parse(prodTreeIdHistory), - assets: project?.assets?.map(formatAsset), - }; -}; - -export const loadById = async (projectId?: Project["id"]) => { - if (typeof projectId !== "string") { - throw new Error("Project ID required"); - } - - const project = await prisma.project.findUnique({ - where: { id: projectId }, - include: { - assets: { - orderBy: { - createdAt: "desc", - }, - }, - }, - }); - - if (!project) return null; - return parseProject(project); -}; - -export const loadByDomain = async (domain: string): Promise => { - const project = await prisma.project.findUnique({ - where: { domain }, - include: { - assets: { - orderBy: { - createdAt: "desc", - }, - }, - }, - }); - if (!project) return null; - - return parseProject(project); -}; - -export const loadManyByUserId = async ( - userId: User["id"] -): Promise> => { - const projects = await prisma.project.findMany({ - where: { - user: { - id: userId, - }, - }, - }); - - return projects.map(parseProject) as Project[]; -}; - -const slugifyOptions = { lower: true, strict: true }; - -const MIN_DOMAIN_LENGTH = 10; -const MIN_TITLE_LENGTH = 2; - -const generateDomain = (title: string) => { - const slugifiedTitle = slugify(title, slugifyOptions); - const domain = `${slugifiedTitle}-${nanoid( - // If user entered a long title already, we just add 5 chars generated id - // Otherwise we add the amount of chars to satisfy min length - Math.max(MIN_DOMAIN_LENGTH - slugifiedTitle.length - 1, 5) - )}`; - return domain; -}; - -export const create = async ({ - userId, - title, -}: { - userId: string; - title: string; -}) => { - if (title.length < MIN_TITLE_LENGTH) { - throw new Error(`Minimum ${MIN_TITLE_LENGTH} characters required`); - } - - const domain = generateDomain(title); - const breakpoints = db.breakpoints.getBreakpointsWithId(); - const tree = await db.tree.create(db.tree.createRootInstance(breakpoints)); - const project = await prisma.project.create({ - data: { - userId, - title, - domain, - devTreeId: tree.id, - }, - }); - - await db.breakpoints.create(tree.id, breakpoints); - - return parseProject(project); -}; - -export const clone = async (clonableDomain: string, userId: string) => { - const clonableProject = await loadByDomain(clonableDomain); - if (clonableProject === null) { - throw new Error(`Not found project "${clonableDomain}"`); - } - if (clonableProject.prodTreeId === null) { - throw new Error("Expected project to be published first"); - } - - const tree = await db.tree.clone(clonableProject.prodTreeId); - const domain = generateDomain(clonableProject.title); - const [project] = await Promise.all([ - prisma.project.create({ - data: { - userId: userId, - title: clonableProject.title, - domain, - devTreeId: tree.id, - }, - include: { - assets: { - orderBy: { - createdAt: "desc", - }, - }, - }, - }), - db.props.clone({ - previousTreeId: clonableProject.prodTreeId, - nextTreeId: tree.id, - }), - db.breakpoints.clone({ - previousTreeId: clonableProject.prodTreeId, - nextTreeId: tree.id, - }), - ]); - - const parsedProject = parseProject(project); - if (parsedProject === null) { - throw new Error(`Not found project "${clonableDomain}"`); - } - return parsedProject; -}; - -export const update = async ({ - id, - ...data -}: { - id: string; - domain?: string; - prodTreeId?: string; - devTreeId?: string; - prodTreeIdHistory: Array; -}) => { - if (data.domain) { - data.domain = slugify(data.domain, slugifyOptions); - if (data.domain.length < MIN_DOMAIN_LENGTH) { - throw new Error(`Minimum ${MIN_DOMAIN_LENGTH} characters required`); - } - } - - TreeHistorySchema.parse(data.prodTreeIdHistory); - - try { - const project = await prisma.project.update({ - data: { - ...data, - prodTreeIdHistory: JSON.stringify(data.prodTreeIdHistory), - }, - where: { id }, - include: { - assets: { - orderBy: { - createdAt: "desc", - }, - }, - }, - }); - return project; - } catch (error) { - if ( - error instanceof Prisma.PrismaClientKnownRequestError && - error.code === "P2002" - ) { - throw new Error(`Domain "${data.domain}" is already used`); - } - throw error; - } -}; diff --git a/packages/project/src/props.ts b/packages/project/src/props.ts deleted file mode 100644 index ffebfc2cb7..0000000000 --- a/packages/project/src/props.ts +++ /dev/null @@ -1,98 +0,0 @@ -import { - type Tree, - type AllUserProps, - UserPropsSchema, -} from "@webstudio-is/react-sdk"; -import { applyPatches, type Patch } from "immer"; -import { prisma } from "@webstudio-is/prisma-client"; -import { Project } from "./project"; - -export const loadByProject = async ( - project: Project | null, - env: "production" | "development" = "development" -) => { - if (project === null) { - throw new Error("Project required"); - } - - const treeId = env === "production" ? project.prodTreeId : project.devTreeId; - - if (treeId === null) { - throw new Error("Site needs to be published, production tree ID is null."); - } - - return loadByTreeId(treeId); -}; - -export const loadByTreeId = async (treeId: Tree["id"]) => { - const instancePropsEntries = await prisma.instanceProps.findMany({ - where: { treeId }, - }); - - return instancePropsEntries.map((instanceProps) => { - const props = JSON.parse(instanceProps.props); - UserPropsSchema.parse(props); - return { - ...instanceProps, - props, - }; - }); -}; - -export const clone = async ({ - previousTreeId, - nextTreeId, -}: { - previousTreeId: string; - nextTreeId: string; -}) => { - const props = await prisma.instanceProps.findMany({ - where: { treeId: previousTreeId }, - }); - if (props.length === 0) return; - const data = props.map(({ id: _id, treeId: _treeId, ...rest }) => ({ - ...rest, - treeId: nextTreeId, - })); - - await prisma.$transaction( - data.map((prop) => - prisma.instanceProps.create({ - data: prop, - }) - ) - ); -}; - -export const patch = async ( - { treeId }: { treeId: Tree["id"]; projectId: Project["id"] }, - patches: Array -) => { - const allProps = await loadByTreeId(treeId); - - // We should get rid of this by applying patches on the client to the original - // model instead of the instanceId map. - // The map is handy for accessing props, but probably should be just cached interface, not the main data structure. - const allPropsMapByInstanceId = allProps.reduce((acc, prop) => { - acc[prop.instanceId] = prop; - return acc; - }, {} as AllUserProps); - const nextProps = applyPatches( - allPropsMapByInstanceId, - patches - ); - - await Promise.all( - Object.values(nextProps).map(({ id, instanceId, treeId, props }) => { - UserPropsSchema.parse(props); - const propsString = JSON.stringify(props); - return prisma.instanceProps.upsert({ - where: { id: id }, - create: { id: id, instanceId, treeId, props: propsString }, - update: { - props: propsString, - }, - }); - }) - ); -}; diff --git a/packages/project/src/tree.ts b/packages/project/src/tree.ts deleted file mode 100644 index 5ca4894ad0..0000000000 --- a/packages/project/src/tree.ts +++ /dev/null @@ -1,86 +0,0 @@ -import { - type Instance, - type Breakpoint, - type Tree, - InstanceSchema, -} from "@webstudio-is/react-sdk"; -import { applyPatches, type Patch } from "immer"; -import { prisma } from "@webstudio-is/prisma-client"; -import { Tree as DbTree } from "@prisma/client"; -import { Project } from "./project"; -import { sort } from "./shared/breakpoints"; -import { createInstance, populateInstance } from "./shared/tree-utils"; - -export const createRootInstance = (breakpoints: Array) => { - // Take the smallest breakpoint as default - const defaultBreakpoint = sort(breakpoints)[0]; - if (defaultBreakpoint === undefined) { - throw new Error("A breakpoint with minWidth 0 is required"); - } - const instance = createInstance({ component: "Body" }); - return populateInstance(instance, defaultBreakpoint.id); -}; - -export const create = async (root: Instance): Promise => { - InstanceSchema.parse(root); - const rootString = JSON.stringify(root); - return await prisma.tree.create({ - data: { root: rootString }, - }); -}; - -export const loadById = async (treeId: string): Promise => { - const tree = await prisma.tree.findUnique({ - where: { id: treeId }, - }); - - if (tree === null) return null; - - const root = JSON.parse(tree.root); - InstanceSchema.parse(root); - return { - ...tree, - root, - }; -}; - -export const loadByProject = async ( - project: Project | null, - env: "production" | "development" = "development" -) => { - if (project === null) { - throw new Error("Project required"); - } - - const treeId = env === "production" ? project.prodTreeId : project.devTreeId; - - if (treeId === null) { - throw new Error("Site needs to be published, production tree ID is null."); - } - - return await loadById(treeId); -}; - -export const clone = async (treeId: string) => { - const tree = await loadById(treeId); - if (tree === null) { - throw new Error(`Tree ${treeId} not found`); - } - return await create(tree.root); -}; - -export const patchRoot = async ( - { treeId }: { treeId: Tree["id"] }, - patches: Array -) => { - const tree = await loadById(treeId); - if (tree === null) { - throw new Error(`Tree ${treeId} not found`); - } - const root = applyPatches(tree.root, patches); - InstanceSchema.parse(root); - await prisma.tree.update({ - data: { root: JSON.stringify(root) }, - where: { id: treeId }, - }); -}; diff --git a/packages/react-sdk/src/css/keyword-values.ts b/packages/react-sdk/src/css/keyword-values.ts index fd757f6ee9..b745c19056 100644 --- a/packages/react-sdk/src/css/keyword-values.ts +++ b/packages/react-sdk/src/css/keyword-values.ts @@ -1,6 +1,6 @@ // This file was generated by yarn mdn-data export const keywordValues = { - "accentColor": [ + accentColor: [ "auto", "transparent", "aliceblue", @@ -179,9 +179,9 @@ export const keywordValues = { "ThreeDShadow", "Window", "WindowFrame", - "WindowText" + "WindowText", ], - "alignContent": [ + alignContent: [ "normal", "first", "last", @@ -196,9 +196,9 @@ export const keywordValues = { "start", "end", "flex-start", - "flex-end" + "flex-end", ], - "alignItems": [ + alignItems: [ "normal", "stretch", "first", @@ -212,9 +212,9 @@ export const keywordValues = { "self-start", "self-end", "flex-start", - "flex-end" + "flex-end", ], - "alignSelf": [ + alignSelf: [ "auto", "normal", "stretch", @@ -229,9 +229,9 @@ export const keywordValues = { "self-start", "self-end", "flex-start", - "flex-end" + "flex-end", ], - "alignTracks": [ + alignTracks: [ "normal", "first", "last", @@ -246,31 +246,14 @@ export const keywordValues = { "start", "end", "flex-start", - "flex-end" + "flex-end", ], - "animationDirection": [ - "normal", - "reverse", - "alternate", - "alternate-reverse" - ], - "animationFillMode": [ - "none", - "forwards", - "backwards", - "both" - ], - "animationIterationCount": [ - "infinite" - ], - "animationName": [ - "none" - ], - "animationPlayState": [ - "running", - "paused" - ], - "animationTimingFunction": [ + animationDirection: ["normal", "reverse", "alternate", "alternate-reverse"], + animationFillMode: ["none", "forwards", "backwards", "both"], + animationIterationCount: ["infinite"], + animationName: ["none"], + animationPlayState: ["running", "paused"], + animationTimingFunction: [ "linear", "ease", "ease-in", @@ -283,9 +266,9 @@ export const keywordValues = { "jump-none", "jump-both", "start", - "end" + "end", ], - "appearance": [ + appearance: [ "none", "auto", "textfield", @@ -301,12 +284,10 @@ export const keywordValues = { "listbox", "meter", "progress-bar", - "button" + "button", ], - "aspectRatio": [ - "auto" - ], - "backdropFilter": [ + aspectRatio: ["auto"], + backdropFilter: [ "none", "transparent", "aliceblue", @@ -485,18 +466,11 @@ export const keywordValues = { "ThreeDShadow", "Window", "WindowFrame", - "WindowText" + "WindowText", ], - "backfaceVisibility": [ - "visible", - "hidden" - ], - "backgroundAttachment": [ - "scroll", - "fixed", - "local" - ], - "backgroundBlendMode": [ + backfaceVisibility: ["visible", "hidden"], + backgroundAttachment: ["scroll", "fixed", "local"], + backgroundBlendMode: [ "normal", "multiply", "screen", @@ -512,14 +486,10 @@ export const keywordValues = { "hue", "saturation", "color", - "luminosity" + "luminosity", ], - "backgroundClip": [ - "border-box", - "padding-box", - "content-box" - ], - "backgroundColor": [ + backgroundClip: ["border-box", "padding-box", "content-box"], + backgroundColor: [ "transparent", "aliceblue", "antiquewhite", @@ -697,9 +667,9 @@ export const keywordValues = { "ThreeDShadow", "Window", "WindowFrame", - "WindowText" + "WindowText", ], - "backgroundImage": [ + backgroundImage: [ "none", "ltr", "rtl", @@ -894,51 +864,23 @@ export const keywordValues = { "farthest-corner", "at", "center", - "from" + "from", ], - "backgroundOrigin": [ - "border-box", - "padding-box", - "content-box" - ], - "backgroundPositionX": [ - "center", - "left", - "right", - "x-start", - "x-end" - ], - "backgroundPositionY": [ - "center", - "top", - "bottom", - "y-start", - "y-end" - ], - "backgroundRepeat": [ + backgroundOrigin: ["border-box", "padding-box", "content-box"], + backgroundPositionX: ["center", "left", "right", "x-start", "x-end"], + backgroundPositionY: ["center", "top", "bottom", "y-start", "y-end"], + backgroundRepeat: [ "repeat-x", "repeat-y", "repeat", "space", "round", - "no-repeat" + "no-repeat", ], - "backgroundSize": [ - "auto", - "cover", - "contain" - ], - "blockOverflow": [ - "clip", - "ellipsis" - ], - "blockSize": [ - "auto", - "min-content", - "max-content", - "fit-content" - ], - "borderBlockColor": [ + backgroundSize: ["auto", "cover", "contain"], + blockOverflow: ["clip", "ellipsis"], + blockSize: ["auto", "min-content", "max-content", "fit-content"], + borderBlockColor: [ "transparent", "aliceblue", "antiquewhite", @@ -1116,9 +1058,9 @@ export const keywordValues = { "ThreeDShadow", "Window", "WindowFrame", - "WindowText" + "WindowText", ], - "borderBlockStyle": [ + borderBlockStyle: [ "none", "hidden", "dotted", @@ -1128,14 +1070,10 @@ export const keywordValues = { "groove", "ridge", "inset", - "outset" + "outset", ], - "borderBlockWidth": [ - "thin", - "medium", - "thick" - ], - "borderBlockEndColor": [ + borderBlockWidth: ["thin", "medium", "thick"], + borderBlockEndColor: [ "transparent", "aliceblue", "antiquewhite", @@ -1313,9 +1251,9 @@ export const keywordValues = { "ThreeDShadow", "Window", "WindowFrame", - "WindowText" + "WindowText", ], - "borderBlockEndStyle": [ + borderBlockEndStyle: [ "none", "hidden", "dotted", @@ -1325,14 +1263,10 @@ export const keywordValues = { "groove", "ridge", "inset", - "outset" + "outset", ], - "borderBlockEndWidth": [ - "thin", - "medium", - "thick" - ], - "borderBlockStartColor": [ + borderBlockEndWidth: ["thin", "medium", "thick"], + borderBlockStartColor: [ "transparent", "aliceblue", "antiquewhite", @@ -1510,9 +1444,9 @@ export const keywordValues = { "ThreeDShadow", "Window", "WindowFrame", - "WindowText" + "WindowText", ], - "borderBlockStartStyle": [ + borderBlockStartStyle: [ "none", "hidden", "dotted", @@ -1522,14 +1456,10 @@ export const keywordValues = { "groove", "ridge", "inset", - "outset" + "outset", ], - "borderBlockStartWidth": [ - "thin", - "medium", - "thick" - ], - "borderBottomColor": [ + borderBlockStartWidth: ["thin", "medium", "thick"], + borderBottomColor: [ "transparent", "aliceblue", "antiquewhite", @@ -1707,9 +1637,9 @@ export const keywordValues = { "ThreeDShadow", "Window", "WindowFrame", - "WindowText" + "WindowText", ], - "borderBottomStyle": [ + borderBottomStyle: [ "none", "hidden", "dotted", @@ -1719,27 +1649,13 @@ export const keywordValues = { "groove", "ridge", "inset", - "outset" + "outset", ], - "borderBottomWidth": [ - "thin", - "medium", - "thick" - ], - "borderCollapse": [ - "collapse", - "separate" - ], - "borderImageRepeat": [ - "stretch", - "repeat", - "round", - "space" - ], - "borderImageSlice": [ - "fill" - ], - "borderImageSource": [ + borderBottomWidth: ["thin", "medium", "thick"], + borderCollapse: ["collapse", "separate"], + borderImageRepeat: ["stretch", "repeat", "round", "space"], + borderImageSlice: ["fill"], + borderImageSource: [ "none", "ltr", "rtl", @@ -1934,12 +1850,10 @@ export const keywordValues = { "farthest-corner", "at", "center", - "from" + "from", ], - "borderImageWidth": [ - "auto" - ], - "borderInlineColor": [ + borderImageWidth: ["auto"], + borderInlineColor: [ "transparent", "aliceblue", "antiquewhite", @@ -2117,9 +2031,9 @@ export const keywordValues = { "ThreeDShadow", "Window", "WindowFrame", - "WindowText" + "WindowText", ], - "borderInlineStyle": [ + borderInlineStyle: [ "none", "hidden", "dotted", @@ -2129,14 +2043,10 @@ export const keywordValues = { "groove", "ridge", "inset", - "outset" + "outset", ], - "borderInlineWidth": [ - "thin", - "medium", - "thick" - ], - "borderInlineEndColor": [ + borderInlineWidth: ["thin", "medium", "thick"], + borderInlineEndColor: [ "transparent", "aliceblue", "antiquewhite", @@ -2314,9 +2224,9 @@ export const keywordValues = { "ThreeDShadow", "Window", "WindowFrame", - "WindowText" + "WindowText", ], - "borderInlineEndStyle": [ + borderInlineEndStyle: [ "none", "hidden", "dotted", @@ -2326,14 +2236,10 @@ export const keywordValues = { "groove", "ridge", "inset", - "outset" + "outset", ], - "borderInlineEndWidth": [ - "thin", - "medium", - "thick" - ], - "borderInlineStartColor": [ + borderInlineEndWidth: ["thin", "medium", "thick"], + borderInlineStartColor: [ "transparent", "aliceblue", "antiquewhite", @@ -2511,9 +2417,9 @@ export const keywordValues = { "ThreeDShadow", "Window", "WindowFrame", - "WindowText" + "WindowText", ], - "borderInlineStartStyle": [ + borderInlineStartStyle: [ "none", "hidden", "dotted", @@ -2523,14 +2429,10 @@ export const keywordValues = { "groove", "ridge", "inset", - "outset" + "outset", ], - "borderInlineStartWidth": [ - "thin", - "medium", - "thick" - ], - "borderLeftColor": [ + borderInlineStartWidth: ["thin", "medium", "thick"], + borderLeftColor: [ "transparent", "aliceblue", "antiquewhite", @@ -2708,9 +2610,9 @@ export const keywordValues = { "ThreeDShadow", "Window", "WindowFrame", - "WindowText" + "WindowText", ], - "borderLeftStyle": [ + borderLeftStyle: [ "none", "hidden", "dotted", @@ -2720,14 +2622,10 @@ export const keywordValues = { "groove", "ridge", "inset", - "outset" + "outset", ], - "borderLeftWidth": [ - "thin", - "medium", - "thick" - ], - "borderRightColor": [ + borderLeftWidth: ["thin", "medium", "thick"], + borderRightColor: [ "transparent", "aliceblue", "antiquewhite", @@ -2905,9 +2803,9 @@ export const keywordValues = { "ThreeDShadow", "Window", "WindowFrame", - "WindowText" + "WindowText", ], - "borderRightStyle": [ + borderRightStyle: [ "none", "hidden", "dotted", @@ -2917,14 +2815,10 @@ export const keywordValues = { "groove", "ridge", "inset", - "outset" + "outset", ], - "borderRightWidth": [ - "thin", - "medium", - "thick" - ], - "borderTopColor": [ + borderRightWidth: ["thin", "medium", "thick"], + borderTopColor: [ "transparent", "aliceblue", "antiquewhite", @@ -3102,9 +2996,9 @@ export const keywordValues = { "ThreeDShadow", "Window", "WindowFrame", - "WindowText" + "WindowText", ], - "borderTopStyle": [ + borderTopStyle: [ "none", "hidden", "dotted", @@ -3114,21 +3008,12 @@ export const keywordValues = { "groove", "ridge", "inset", - "outset" + "outset", ], - "borderTopWidth": [ - "thin", - "medium", - "thick" - ], - "bottom": [ - "auto" - ], - "boxDecorationBreak": [ - "slice", - "clone" - ], - "boxShadow": [ + borderTopWidth: ["thin", "medium", "thick"], + bottom: ["auto"], + boxDecorationBreak: ["slice", "clone"], + boxShadow: [ "none", "inset", "transparent", @@ -3308,13 +3193,10 @@ export const keywordValues = { "ThreeDShadow", "Window", "WindowFrame", - "WindowText" + "WindowText", ], - "boxSizing": [ - "content-box", - "border-box" - ], - "breakAfter": [ + boxSizing: ["content-box", "border-box"], + breakAfter: [ "auto", "avoid", "always", @@ -3328,9 +3210,9 @@ export const keywordValues = { "avoid-column", "column", "avoid-region", - "region" + "region", ], - "breakBefore": [ + breakBefore: [ "auto", "avoid", "always", @@ -3344,24 +3226,18 @@ export const keywordValues = { "avoid-column", "column", "avoid-region", - "region" + "region", ], - "breakInside": [ - "auto", - "avoid", - "avoid-page", - "avoid-column", - "avoid-region" - ], - "captionSide": [ + breakInside: ["auto", "avoid", "avoid-page", "avoid-column", "avoid-region"], + captionSide: [ "top", "bottom", "block-start", "block-end", "inline-start", - "inline-end" + "inline-end", ], - "caretColor": [ + caretColor: [ "auto", "transparent", "aliceblue", @@ -3540,20 +3416,11 @@ export const keywordValues = { "ThreeDShadow", "Window", "WindowFrame", - "WindowText" + "WindowText", ], - "clear": [ - "none", - "left", - "right", - "both", - "inline-start", - "inline-end" - ], - "clip": [ - "auto" - ], - "clipPath": [ + clear: ["none", "left", "right", "both", "inline-start", "inline-end"], + clip: ["auto"], + clipPath: [ "round", "closest-side", "farthest-side", @@ -3572,9 +3439,9 @@ export const keywordValues = { "fill-box", "stroke-box", "view-box", - "none" + "none", ], - "color": [ + color: [ "transparent", "aliceblue", "antiquewhite", @@ -3752,29 +3619,14 @@ export const keywordValues = { "ThreeDShadow", "Window", "WindowFrame", - "WindowText" + "WindowText", ], - "colorAdjust": [ - "economy", - "exact" - ], - "colorScheme": [ - "normal", - "light", - "dark" - ], - "columnCount": [ - "auto" - ], - "columnFill": [ - "auto", - "balance", - "balance-all" - ], - "columnGap": [ - "normal" - ], - "columnRuleColor": [ + colorAdjust: ["economy", "exact"], + colorScheme: ["normal", "light", "dark"], + columnCount: ["auto"], + columnFill: ["auto", "balance", "balance-all"], + columnGap: ["normal"], + columnRuleColor: [ "transparent", "aliceblue", "antiquewhite", @@ -3952,9 +3804,9 @@ export const keywordValues = { "ThreeDShadow", "Window", "WindowFrame", - "WindowText" + "WindowText", ], - "columnRuleStyle": [ + columnRuleStyle: [ "none", "hidden", "dotted", @@ -3964,30 +3816,13 @@ export const keywordValues = { "groove", "ridge", "inset", - "outset" + "outset", ], - "columnRuleWidth": [ - "thin", - "medium", - "thick" - ], - "columnSpan": [ - "none", - "all" - ], - "columnWidth": [ - "auto" - ], - "contain": [ - "none", - "strict", - "content", - "size", - "layout", - "style", - "paint" - ], - "content": [ + columnRuleWidth: ["thin", "medium", "thick"], + columnSpan: ["none", "all"], + columnWidth: ["auto"], + contain: ["none", "strict", "content", "size", "layout", "style", "paint"], + content: [ "normal", "none", "ltr", @@ -4195,23 +4030,13 @@ export const keywordValues = { "first-letter", "dotted", "solid", - "space" + "space", ], - "contentVisibility": [ - "visible", - "auto", - "hidden" - ], - "counterIncrement": [ - "none" - ], - "counterReset": [ - "none" - ], - "counterSet": [ - "none" - ], - "cursor": [ + contentVisibility: ["visible", "auto", "hidden"], + counterIncrement: ["none"], + counterReset: ["none"], + counterSet: ["none"], + cursor: [ "auto", "default", "none", @@ -4247,13 +4072,10 @@ export const keywordValues = { "zoom-in", "zoom-out", "grab", - "grabbing" + "grabbing", ], - "direction": [ - "ltr", - "rtl" - ], - "display": [ + direction: ["ltr", "rtl"], + display: [ "block", "inline", "run-in", @@ -4282,13 +4104,10 @@ export const keywordValues = { "inline-list-item", "inline-table", "inline-flex", - "inline-grid" + "inline-grid", ], - "emptyCells": [ - "show", - "hide" - ], - "filter": [ + emptyCells: ["show", "hide"], + filter: [ "none", "transparent", "aliceblue", @@ -4467,61 +4286,19 @@ export const keywordValues = { "ThreeDShadow", "Window", "WindowFrame", - "WindowText" + "WindowText", ], - "flexBasis": [ - "content", - "auto", - "min-content", - "max-content", - "fit-content" - ], - "flexDirection": [ - "row", - "row-reverse", - "column", - "column-reverse" - ], - "flexWrap": [ - "nowrap", - "wrap", - "wrap-reverse" - ], - "float": [ - "left", - "right", - "none", - "inline-start", - "inline-end" - ], - "fontFamily": [ - "serif", - "sans-serif", - "cursive", - "fantasy", - "monospace" - ], - "fontFeatureSettings": [ - "normal", - "on", - "off" - ], - "fontKerning": [ - "auto", - "normal", - "none" - ], - "fontLanguageOverride": [ - "normal" - ], - "fontOpticalSizing": [ - "auto", - "none" - ], - "fontVariationSettings": [ - "normal" - ], - "fontSize": [ + flexBasis: ["content", "auto", "min-content", "max-content", "fit-content"], + flexDirection: ["row", "row-reverse", "column", "column-reverse"], + flexWrap: ["nowrap", "wrap", "wrap-reverse"], + float: ["left", "right", "none", "inline-start", "inline-end"], + fontFamily: ["serif", "sans-serif", "cursive", "fantasy", "monospace"], + fontFeatureSettings: ["normal", "on", "off"], + fontKerning: ["auto", "normal", "none"], + fontLanguageOverride: ["normal"], + fontOpticalSizing: ["auto", "none"], + fontVariationSettings: ["normal"], + fontSize: [ "xx-small", "x-small", "small", @@ -4531,18 +4308,18 @@ export const keywordValues = { "xx-large", "xxx-large", "larger", - "smaller" + "smaller", ], - "fontSizeAdjust": [ + fontSizeAdjust: [ "none", "ex-height", "cap-height", "ch-width", "ic-width", "ic-height", - "from-font" + "from-font", ], - "fontStretch": [ + fontStretch: [ "normal", "ultra-condensed", "extra-condensed", @@ -4551,20 +4328,11 @@ export const keywordValues = { "semi-expanded", "expanded", "extra-expanded", - "ultra-expanded" + "ultra-expanded", ], - "fontStyle": [ - "normal", - "italic", - "oblique" - ], - "fontSynthesis": [ - "none", - "weight", - "style", - "small-caps" - ], - "fontVariant": [ + fontStyle: ["normal", "italic", "oblique"], + fontSynthesis: ["none", "weight", "style", "small-caps"], + fontVariant: [ "normal", "none", "common-ligatures", @@ -4598,22 +4366,19 @@ export const keywordValues = { "traditional", "full-width", "proportional-width", - "ruby" + "ruby", ], - "fontVariantAlternates": [ - "normal", - "historical-forms" - ], - "fontVariantCaps": [ + fontVariantAlternates: ["normal", "historical-forms"], + fontVariantCaps: [ "normal", "small-caps", "all-small-caps", "petite-caps", "all-petite-caps", "unicase", - "titling-caps" + "titling-caps", ], - "fontVariantEastAsian": [ + fontVariantEastAsian: [ "normal", "jis78", "jis83", @@ -4623,9 +4388,9 @@ export const keywordValues = { "traditional", "full-width", "proportional-width", - "ruby" + "ruby", ], - "fontVariantLigatures": [ + fontVariantLigatures: [ "normal", "none", "common-ligatures", @@ -4635,9 +4400,9 @@ export const keywordValues = { "historical-ligatures", "no-historical-ligatures", "contextual", - "no-contextual" + "no-contextual", ], - "fontVariantNumeric": [ + fontVariantNumeric: [ "normal", "lining-nums", "oldstyle-nums", @@ -4646,64 +4411,34 @@ export const keywordValues = { "diagonal-fractions", "stacked-fractions", "ordinal", - "slashed-zero" + "slashed-zero", ], - "fontVariantPosition": [ - "normal", - "sub", - "super" - ], - "fontWeight": [ - "normal", - "bold", - "bolder", - "lighter" - ], - "forcedColorAdjust": [ - "auto", - "none" - ], - "gridAutoColumns": [ + fontVariantPosition: ["normal", "sub", "super"], + fontWeight: ["normal", "bold", "bolder", "lighter"], + forcedColorAdjust: ["auto", "none"], + gridAutoColumns: [ "none", "content", "auto", "min-content", "max-content", - "fit-content" + "fit-content", ], - "gridAutoFlow": [ - "row", - "column", - "dense" - ], - "gridAutoRows": [ + gridAutoFlow: ["row", "column", "dense"], + gridAutoRows: [ "none", "content", "auto", "min-content", "max-content", - "fit-content" + "fit-content", ], - "gridColumnEnd": [ - "auto", - "span" - ], - "gridColumnStart": [ - "auto", - "span" - ], - "gridRowEnd": [ - "auto", - "span" - ], - "gridRowStart": [ - "auto", - "span" - ], - "gridTemplateAreas": [ - "none" - ], - "gridTemplateColumns": [ + gridColumnEnd: ["auto", "span"], + gridColumnStart: ["auto", "span"], + gridRowEnd: ["auto", "span"], + gridRowStart: ["auto", "span"], + gridTemplateAreas: ["none"], + gridTemplateColumns: [ "none", "content", "auto", @@ -4712,9 +4447,9 @@ export const keywordValues = { "fit-content", "auto-fill", "auto-fit", - "subgrid" + "subgrid", ], - "gridTemplateRows": [ + gridTemplateRows: [ "none", "content", "auto", @@ -4723,80 +4458,26 @@ export const keywordValues = { "fit-content", "auto-fill", "auto-fit", - "subgrid" + "subgrid", ], - "hangingPunctuation": [ - "none", - "first", - "force-end", - "allow-end", - "last" - ], - "height": [ - "auto", - "min-content", - "max-content", - "fit-content" - ], - "hyphens": [ - "none", - "manual", - "auto" - ], - "imageOrientation": [ - "from-image", - "flip" - ], - "imageRendering": [ - "auto", - "crisp-edges", - "pixelated" - ], - "imageResolution": [ - "from-image", - "snap" - ], - "initialLetter": [ - "normal" - ], - "initialLetterAlign": [ - "auto", - "alphabetic", - "hanging", - "ideographic" - ], - "inlineSize": [ - "auto", - "min-content", - "max-content", - "fit-content" - ], - "inset": [ - "auto" - ], - "insetBlock": [ - "auto" - ], - "insetBlockEnd": [ - "auto" - ], - "insetBlockStart": [ - "auto" - ], - "insetInline": [ - "auto" - ], - "insetInlineEnd": [ - "auto" - ], - "insetInlineStart": [ - "auto" - ], - "isolation": [ - "auto", - "isolate" - ], - "justifyContent": [ + hangingPunctuation: ["none", "first", "force-end", "allow-end", "last"], + height: ["auto", "min-content", "max-content", "fit-content"], + hyphens: ["none", "manual", "auto"], + imageOrientation: ["from-image", "flip"], + imageRendering: ["auto", "crisp-edges", "pixelated"], + imageResolution: ["from-image", "snap"], + initialLetter: ["normal"], + initialLetterAlign: ["auto", "alphabetic", "hanging", "ideographic"], + inlineSize: ["auto", "min-content", "max-content", "fit-content"], + inset: ["auto"], + insetBlock: ["auto"], + insetBlockEnd: ["auto"], + insetBlockStart: ["auto"], + insetInline: ["auto"], + insetInlineEnd: ["auto"], + insetInlineStart: ["auto"], + isolation: ["auto", "isolate"], + justifyContent: [ "normal", "space-between", "space-around", @@ -4810,9 +4491,9 @@ export const keywordValues = { "flex-start", "flex-end", "left", - "right" + "right", ], - "justifyItems": [ + justifyItems: [ "normal", "stretch", "first", @@ -4829,9 +4510,9 @@ export const keywordValues = { "flex-end", "left", "right", - "legacy" + "legacy", ], - "justifySelf": [ + justifySelf: [ "auto", "normal", "stretch", @@ -4848,9 +4529,9 @@ export const keywordValues = { "flex-start", "flex-end", "left", - "right" + "right", ], - "justifyTracks": [ + justifyTracks: [ "normal", "space-between", "space-around", @@ -4864,28 +4545,14 @@ export const keywordValues = { "flex-start", "flex-end", "left", - "right" + "right", ], - "left": [ - "auto" - ], - "letterSpacing": [ - "normal" - ], - "lineBreak": [ - "auto", - "loose", - "normal", - "strict", - "anywhere" - ], - "lineClamp": [ - "none" - ], - "lineHeight": [ - "normal" - ], - "listStyleImage": [ + left: ["auto"], + letterSpacing: ["normal"], + lineBreak: ["auto", "loose", "normal", "strict", "anywhere"], + lineClamp: ["none"], + lineHeight: ["normal"], + listStyleImage: [ "ltr", "rtl", "transparent", @@ -5080,64 +4747,25 @@ export const keywordValues = { "at", "center", "from", - "none" - ], - "listStylePosition": [ - "inside", - "outside" - ], - "listStyleType": [ - "none" - ], - "marginBlock": [ - "auto" - ], - "marginBlockEnd": [ - "auto" - ], - "marginBlockStart": [ - "auto" - ], - "marginBottom": [ - "auto" - ], - "marginInline": [ - "auto" - ], - "marginInlineEnd": [ - "auto" - ], - "marginInlineStart": [ - "auto" - ], - "marginLeft": [ - "auto" - ], - "marginRight": [ - "auto" - ], - "marginTop": [ - "auto" - ], - "marginTrim": [ "none", - "in-flow", - "all" ], - "maskBorderMode": [ - "luminance", - "alpha" - ], - "maskBorderRepeat": [ - "stretch", - "repeat", - "round", - "space" - ], - "maskBorderSlice": [ - "fill" - ], - "maskBorderSource": [ + listStylePosition: ["inside", "outside"], + listStyleType: ["none"], + marginBlock: ["auto"], + marginBlockEnd: ["auto"], + marginBlockStart: ["auto"], + marginBottom: ["auto"], + marginInline: ["auto"], + marginInlineEnd: ["auto"], + marginInlineStart: ["auto"], + marginLeft: ["auto"], + marginRight: ["auto"], + marginTop: ["auto"], + marginTrim: ["none", "in-flow", "all"], + maskBorderMode: ["luminance", "alpha"], + maskBorderRepeat: ["stretch", "repeat", "round", "space"], + maskBorderSlice: ["fill"], + maskBorderSource: [ "none", "ltr", "rtl", @@ -5332,12 +4960,10 @@ export const keywordValues = { "farthest-corner", "at", "center", - "from" + "from", ], - "maskBorderWidth": [ - "auto" - ], - "maskClip": [ + maskBorderWidth: ["auto"], + maskClip: [ "border-box", "padding-box", "content-box", @@ -5345,15 +4971,10 @@ export const keywordValues = { "fill-box", "stroke-box", "view-box", - "no-clip" + "no-clip", ], - "maskComposite": [ - "add", - "subtract", - "intersect", - "exclude" - ], - "maskImage": [ + maskComposite: ["add", "subtract", "intersect", "exclude"], + maskImage: [ "none", "ltr", "rtl", @@ -5548,108 +5169,34 @@ export const keywordValues = { "farthest-corner", "at", "center", - "from" + "from", ], - "maskMode": [ - "alpha", - "luminance", - "match-source" - ], - "maskOrigin": [ + maskMode: ["alpha", "luminance", "match-source"], + maskOrigin: [ "border-box", "padding-box", "content-box", "margin-box", "fill-box", "stroke-box", - "view-box" + "view-box", ], - "maskPosition": [ - "left", - "center", - "right", - "top", - "bottom" - ], - "maskRepeat": [ - "repeat-x", - "repeat-y", - "repeat", - "space", - "round", - "no-repeat" - ], - "maskSize": [ - "auto", - "cover", - "contain" - ], - "maskType": [ - "luminance", - "alpha" - ], - "masonryAutoFlow": [ - "pack", - "next", - "definite-first", - "ordered" - ], - "mathStyle": [ - "normal", - "compact" - ], - "maxBlockSize": [ - "none", - "min-content", - "max-content", - "fit-content" - ], - "maxHeight": [ - "none", - "min-content", - "max-content", - "fit-content" - ], - "maxInlineSize": [ - "none", - "min-content", - "max-content", - "fit-content" - ], - "maxLines": [ - "none" - ], - "maxWidth": [ - "none", - "min-content", - "max-content", - "fit-content" - ], - "minBlockSize": [ - "auto", - "min-content", - "max-content", - "fit-content" - ], - "minHeight": [ - "auto", - "min-content", - "max-content", - "fit-content" - ], - "minInlineSize": [ - "auto", - "min-content", - "max-content", - "fit-content" - ], - "minWidth": [ - "auto", - "min-content", - "max-content", - "fit-content" - ], - "mixBlendMode": [ + maskPosition: ["left", "center", "right", "top", "bottom"], + maskRepeat: ["repeat-x", "repeat-y", "repeat", "space", "round", "no-repeat"], + maskSize: ["auto", "cover", "contain"], + maskType: ["luminance", "alpha"], + masonryAutoFlow: ["pack", "next", "definite-first", "ordered"], + mathStyle: ["normal", "compact"], + maxBlockSize: ["none", "min-content", "max-content", "fit-content"], + maxHeight: ["none", "min-content", "max-content", "fit-content"], + maxInlineSize: ["none", "min-content", "max-content", "fit-content"], + maxLines: ["none"], + maxWidth: ["none", "min-content", "max-content", "fit-content"], + minBlockSize: ["auto", "min-content", "max-content", "fit-content"], + minHeight: ["auto", "min-content", "max-content", "fit-content"], + minInlineSize: ["auto", "min-content", "max-content", "fit-content"], + minWidth: ["auto", "min-content", "max-content", "fit-content"], + mixBlendMode: [ "normal", "multiply", "screen", @@ -5665,31 +5212,12 @@ export const keywordValues = { "hue", "saturation", "color", - "luminosity" + "luminosity", ], - "objectFit": [ - "fill", - "contain", - "cover", - "none", - "scale-down" - ], - "objectPosition": [ - "left", - "center", - "right", - "top", - "bottom" - ], - "offsetAnchor": [ - "auto", - "left", - "center", - "right", - "top", - "bottom" - ], - "offsetPath": [ + objectFit: ["fill", "contain", "cover", "none", "scale-down"], + objectPosition: ["left", "center", "right", "top", "bottom"], + offsetAnchor: ["auto", "left", "center", "right", "top", "bottom"], + offsetPath: [ "none", "closest-side", "farthest-side", @@ -5711,21 +5239,11 @@ export const keywordValues = { "margin-box", "fill-box", "stroke-box", - "view-box" + "view-box", ], - "offsetPosition": [ - "auto", - "left", - "center", - "right", - "top", - "bottom" - ], - "offsetRotate": [ - "auto", - "reverse" - ], - "outlineColor": [ + offsetPosition: ["auto", "left", "center", "right", "top", "bottom"], + offsetRotate: ["auto", "reverse"], + outlineColor: [ "transparent", "aliceblue", "antiquewhite", @@ -5904,9 +5422,9 @@ export const keywordValues = { "Window", "WindowFrame", "WindowText", - "invert" + "invert", ], - "outlineStyle": [ + outlineStyle: [ "auto", "none", "hidden", @@ -5917,126 +5435,45 @@ export const keywordValues = { "groove", "ridge", "inset", - "outset" + "outset", ], - "outlineWidth": [ - "thin", - "medium", - "thick" - ], - "overflow": [ - "visible", - "hidden", - "clip", - "scroll", - "auto" - ], - "overflowAnchor": [ - "auto", - "none" - ], - "overflowBlock": [ - "visible", - "hidden", - "clip", - "scroll", - "auto" - ], - "overflowClipMargin": [ - "content-box", - "padding-box", - "border-box" - ], - "overflowInline": [ - "visible", - "hidden", - "clip", - "scroll", - "auto" - ], - "overflowWrap": [ - "normal", - "break-word", - "anywhere" - ], - "overflowX": [ - "visible", - "hidden", - "clip", - "scroll", - "auto" - ], - "overflowY": [ - "visible", - "hidden", - "clip", - "scroll", - "auto" - ], - "overscrollBehavior": [ - "contain", - "none", - "auto" - ], - "overscrollBehaviorBlock": [ - "contain", - "none", - "auto" - ], - "overscrollBehaviorInline": [ - "contain", - "none", - "auto" - ], - "overscrollBehaviorX": [ - "contain", - "none", - "auto" - ], - "overscrollBehaviorY": [ - "contain", - "none", - "auto" - ], - "pageBreakAfter": [ + outlineWidth: ["thin", "medium", "thick"], + overflow: ["visible", "hidden", "clip", "scroll", "auto"], + overflowAnchor: ["auto", "none"], + overflowBlock: ["visible", "hidden", "clip", "scroll", "auto"], + overflowClipMargin: ["content-box", "padding-box", "border-box"], + overflowInline: ["visible", "hidden", "clip", "scroll", "auto"], + overflowWrap: ["normal", "break-word", "anywhere"], + overflowX: ["visible", "hidden", "clip", "scroll", "auto"], + overflowY: ["visible", "hidden", "clip", "scroll", "auto"], + overscrollBehavior: ["contain", "none", "auto"], + overscrollBehaviorBlock: ["contain", "none", "auto"], + overscrollBehaviorInline: ["contain", "none", "auto"], + overscrollBehaviorX: ["contain", "none", "auto"], + overscrollBehaviorY: ["contain", "none", "auto"], + pageBreakAfter: [ "auto", "always", "avoid", "left", "right", "recto", - "verso" + "verso", ], - "pageBreakBefore": [ + pageBreakBefore: [ "auto", "always", "avoid", "left", "right", "recto", - "verso" + "verso", ], - "pageBreakInside": [ - "auto", - "avoid" - ], - "paintOrder": [ - "normal", - "fill", - "stroke", - "markers" - ], - "perspective": [ - "none" - ], - "perspectiveOrigin": [ - "left", - "center", - "right", - "top", - "bottom" - ], - "placeContent": [ + pageBreakInside: ["auto", "avoid"], + paintOrder: ["normal", "fill", "stroke", "markers"], + perspective: ["none"], + perspectiveOrigin: ["left", "center", "right", "top", "bottom"], + placeContent: [ "normal", "first", "last", @@ -6053,9 +5490,9 @@ export const keywordValues = { "flex-start", "flex-end", "left", - "right" + "right", ], - "pointerEvents": [ + pointerEvents: [ "auto", "none", "visiblePainted", @@ -6066,60 +5503,19 @@ export const keywordValues = { "fill", "stroke", "all", - "inherit" + "inherit", ], - "position": [ - "static", - "relative", - "absolute", - "sticky", - "fixed" - ], - "quotes": [ - "none", - "auto" - ], - "resize": [ - "none", - "both", - "horizontal", - "vertical", - "block", - "inline" - ], - "right": [ - "auto" - ], - "rotate": [ - "none", - "x", - "y", - "z" - ], - "rowGap": [ - "normal" - ], - "rubyAlign": [ - "start", - "center", - "space-between", - "space-around" - ], - "rubyMerge": [ - "separate", - "collapse", - "auto" - ], - "rubyPosition": [ - "alternate", - "over", - "under", - "inter-character" - ], - "scale": [ - "none" - ], - "scrollbarColor": [ + position: ["static", "relative", "absolute", "sticky", "fixed"], + quotes: ["none", "auto"], + resize: ["none", "both", "horizontal", "vertical", "block", "inline"], + right: ["auto"], + rotate: ["none", "x", "y", "z"], + rowGap: ["normal"], + rubyAlign: ["start", "center", "space-between", "space-around"], + rubyMerge: ["separate", "collapse", "auto"], + rubyPosition: ["alternate", "over", "under", "inter-character"], + scale: ["none"], + scrollbarColor: [ "auto", "transparent", "aliceblue", @@ -6298,66 +5694,25 @@ export const keywordValues = { "ThreeDShadow", "Window", "WindowFrame", - "WindowText" + "WindowText", ], - "scrollbarGutter": [ - "auto", - "stable", - "both-edges" - ], - "scrollbarWidth": [ - "auto", - "thin", - "none" - ], - "scrollBehavior": [ - "auto", - "smooth" - ], - "scrollPadding": [ - "auto" - ], - "scrollPaddingBlock": [ - "auto" - ], - "scrollPaddingBlockStart": [ - "auto" - ], - "scrollPaddingBlockEnd": [ - "auto" - ], - "scrollPaddingBottom": [ - "auto" - ], - "scrollPaddingInline": [ - "auto" - ], - "scrollPaddingInlineStart": [ - "auto" - ], - "scrollPaddingInlineEnd": [ - "auto" - ], - "scrollPaddingLeft": [ - "auto" - ], - "scrollPaddingRight": [ - "auto" - ], - "scrollPaddingTop": [ - "auto" - ], - "scrollSnapAlign": [ - "none", - "start", - "end", - "center" - ], - "scrollSnapStop": [ - "normal", - "always" - ], - "scrollSnapType": [ + scrollbarGutter: ["auto", "stable", "both-edges"], + scrollbarWidth: ["auto", "thin", "none"], + scrollBehavior: ["auto", "smooth"], + scrollPadding: ["auto"], + scrollPaddingBlock: ["auto"], + scrollPaddingBlockStart: ["auto"], + scrollPaddingBlockEnd: ["auto"], + scrollPaddingBottom: ["auto"], + scrollPaddingInline: ["auto"], + scrollPaddingInlineStart: ["auto"], + scrollPaddingInlineEnd: ["auto"], + scrollPaddingLeft: ["auto"], + scrollPaddingRight: ["auto"], + scrollPaddingTop: ["auto"], + scrollSnapAlign: ["none", "start", "end", "center"], + scrollSnapStop: ["normal", "always"], + scrollSnapType: [ "none", "x", "y", @@ -6365,9 +5720,9 @@ export const keywordValues = { "inline", "both", "mandatory", - "proximity" + "proximity", ], - "shapeOutside": [ + shapeOutside: [ "none", "border-box", "padding-box", @@ -6569,36 +5924,21 @@ export const keywordValues = { "ellipse", "closest-corner", "farthest-corner", - "from" + "from", ], - "tableLayout": [ - "auto", - "fixed" - ], - "textAlign": [ + tableLayout: ["auto", "fixed"], + textAlign: [ "start", "end", "left", "right", "center", "justify", - "match-parent" + "match-parent", ], - "textAlignLast": [ - "auto", - "start", - "end", - "left", - "right", - "center", - "justify" - ], - "textCombineUpright": [ - "none", - "all", - "digits" - ], - "textDecorationColor": [ + textAlignLast: ["auto", "start", "end", "left", "right", "center", "justify"], + textCombineUpright: ["none", "all", "digits"], + textDecorationColor: [ "transparent", "aliceblue", "antiquewhite", @@ -6776,43 +6116,30 @@ export const keywordValues = { "ThreeDShadow", "Window", "WindowFrame", - "WindowText" + "WindowText", ], - "textDecorationLine": [ + textDecorationLine: [ "none", "underline", "overline", "line-through", "blink", "spelling-error", - "grammar-error" + "grammar-error", ], - "textDecorationSkip": [ + textDecorationSkip: [ "none", "objects", "spaces", "leading-spaces", "trailing-spaces", "edges", - "box-decoration" + "box-decoration", ], - "textDecorationSkipInk": [ - "auto", - "all", - "none" - ], - "textDecorationStyle": [ - "solid", - "double", - "dotted", - "dashed", - "wavy" - ], - "textDecorationThickness": [ - "auto", - "from-font" - ], - "textEmphasisColor": [ + textDecorationSkipInk: ["auto", "all", "none"], + textDecorationStyle: ["solid", "double", "dotted", "dashed", "wavy"], + textDecorationThickness: ["auto", "from-font"], + textEmphasisColor: [ "transparent", "aliceblue", "antiquewhite", @@ -6990,15 +6317,10 @@ export const keywordValues = { "ThreeDShadow", "Window", "WindowFrame", - "WindowText" + "WindowText", ], - "textEmphasisPosition": [ - "over", - "under", - "right", - "left" - ], - "textEmphasisStyle": [ + textEmphasisPosition: ["over", "under", "right", "left"], + textEmphasisStyle: [ "none", "filled", "open", @@ -7006,34 +6328,19 @@ export const keywordValues = { "circle", "double-circle", "triangle", - "sesame" + "sesame", ], - "textIndent": [ - "hanging", - "each-line" - ], - "textJustify": [ - "auto", - "inter-character", - "inter-word", - "none" - ], - "textOrientation": [ - "mixed", - "upright", - "sideways" - ], - "textOverflow": [ - "clip", - "ellipsis" - ], - "textRendering": [ + textIndent: ["hanging", "each-line"], + textJustify: ["auto", "inter-character", "inter-word", "none"], + textOrientation: ["mixed", "upright", "sideways"], + textOverflow: ["clip", "ellipsis"], + textRendering: [ "auto", "optimizeSpeed", "optimizeLegibility", - "geometricPrecision" + "geometricPrecision", ], - "textShadow": [ + textShadow: [ "none", "transparent", "aliceblue", @@ -7212,34 +6519,21 @@ export const keywordValues = { "ThreeDShadow", "Window", "WindowFrame", - "WindowText" + "WindowText", ], - "textSizeAdjust": [ - "none", - "auto" - ], - "textTransform": [ + textSizeAdjust: ["none", "auto"], + textTransform: [ "none", "capitalize", "uppercase", "lowercase", "full-width", - "full-size-kana" + "full-size-kana", ], - "textUnderlineOffset": [ - "auto" - ], - "textUnderlinePosition": [ - "auto", - "from-font", - "under", - "left", - "right" - ], - "top": [ - "auto" - ], - "touchAction": [ + textUnderlineOffset: ["auto"], + textUnderlinePosition: ["auto", "from-font", "under", "left", "right"], + top: ["auto"], + touchAction: [ "auto", "none", "pan-x", @@ -7249,34 +6543,20 @@ export const keywordValues = { "pan-up", "pan-down", "pinch-zoom", - "manipulation" + "manipulation", ], - "transform": [ - "none" - ], - "transformBox": [ + transform: ["none"], + transformBox: [ "content-box", "border-box", "fill-box", "stroke-box", - "view-box" + "view-box", ], - "transformOrigin": [ - "left", - "center", - "right", - "top", - "bottom" - ], - "transformStyle": [ - "flat", - "preserve-3d" - ], - "transitionProperty": [ - "none", - "all" - ], - "transitionTimingFunction": [ + transformOrigin: ["left", "center", "right", "top", "bottom"], + transformStyle: ["flat", "preserve-3d"], + transitionProperty: ["none", "all"], + transitionTimingFunction: [ "linear", "ease", "ease-in", @@ -7289,27 +6569,19 @@ export const keywordValues = { "jump-none", "jump-both", "start", - "end" + "end", ], - "translate": [ - "none" - ], - "unicodeBidi": [ + translate: ["none"], + unicodeBidi: [ "normal", "embed", "isolate", "bidi-override", "isolate-override", - "plaintext" + "plaintext", ], - "userSelect": [ - "auto", - "text", - "none", - "contain", - "all" - ], - "verticalAlign": [ + userSelect: ["auto", "text", "none", "contain", "all"], + verticalAlign: [ "baseline", "sub", "super", @@ -7317,53 +6589,28 @@ export const keywordValues = { "text-bottom", "middle", "top", - "bottom" + "bottom", ], - "visibility": [ - "visible", - "hidden", - "collapse" - ], - "whiteSpace": [ + visibility: ["visible", "hidden", "collapse"], + whiteSpace: [ "normal", "pre", "nowrap", "pre-wrap", "pre-line", - "break-spaces" + "break-spaces", ], - "width": [ - "auto", - "min-content", - "max-content", - "fit-content" - ], - "willChange": [ - "auto", - "scroll-position", - "contents" - ], - "wordBreak": [ - "normal", - "break-all", - "keep-all", - "break-word" - ], - "wordSpacing": [ - "normal" - ], - "wordWrap": [ - "normal", - "break-word" - ], - "writingMode": [ + width: ["auto", "min-content", "max-content", "fit-content"], + willChange: ["auto", "scroll-position", "contents"], + wordBreak: ["normal", "break-all", "keep-all", "break-word"], + wordSpacing: ["normal"], + wordWrap: ["normal", "break-word"], + writingMode: [ "horizontal-tb", "vertical-rl", "vertical-lr", "sideways-rl", - "sideways-lr" + "sideways-lr", ], - "zIndex": [ - "auto" - ] -} as const; \ No newline at end of file + zIndex: ["auto"], +} as const; diff --git a/packages/react-sdk/src/css/units.ts b/packages/react-sdk/src/css/units.ts index b7ad92b6a0..a733273860 100644 --- a/packages/react-sdk/src/css/units.ts +++ b/packages/react-sdk/src/css/units.ts @@ -28,5 +28,5 @@ export const units = [ "vmin", "vw", "x", - "%" -] as const; \ No newline at end of file + "%", +] as const;