From 82884ef248a14d571e1cf30a628039235ab81806 Mon Sep 17 00:00:00 2001 From: Oleg Isonen Date: Tue, 27 Sep 2022 19:11:32 +0300 Subject: [PATCH 1/2] move flush css function to the corresponding packages --- apps/designer/app/critical-css.ts | 32 +++++-------------- packages/design-system/src/index.ts | 14 +------- packages/design-system/src/stitches.config.ts | 10 +++++- .../react-sdk/src/stitches/critical-css.tsx | 6 ++-- packages/react-sdk/src/stitches/css.ts | 11 +++---- 5 files changed, 26 insertions(+), 47 deletions(-) diff --git a/apps/designer/app/critical-css.ts b/apps/designer/app/critical-css.ts index adef6a6865..28145afd71 100644 --- a/apps/designer/app/critical-css.ts +++ b/apps/designer/app/critical-css.ts @@ -1,32 +1,16 @@ import { insertCriticalCss as insert, - getCssText as getCanvasCssText, - resetCss as resetCanvasCss, + flushCss as flushCanvasCss, } from "@webstudio-is/react-sdk"; -import { - getCssText as getDesignerCssText, - reset as resetDesignerCss, -} from "@webstudio-is/design-system"; +import { flushCss as flushDesignerCss } from "@webstudio-is/design-system"; import config from "./config"; -const flushCanvas = () => { - const css = getCanvasCssText(); - resetCanvasCss(); - return css; -}; - -const flushDesigner = () => { - const css = getDesignerCssText(); - resetDesignerCss(); - return css; -}; - const flushFunctions = { - [config.previewPath]: flushCanvas, - [config.canvasPath]: flushCanvas, - [config.designerPath]: flushDesigner, - [config.dashboardPath]: flushDesigner, - [config.loginPath]: flushDesigner, + [config.previewPath]: flushCanvasCss, + [config.canvasPath]: flushCanvasCss, + [config.designerPath]: flushDesignerCss, + [config.dashboardPath]: flushDesignerCss, + [config.loginPath]: flushDesignerCss, }; const getFlushFunction = (url: string) => { @@ -37,7 +21,7 @@ const getFlushFunction = (url: string) => { return flushFunctions[path]; } } - return getCanvasCssText; + return flushCanvasCss; }; /** diff --git a/packages/design-system/src/index.ts b/packages/design-system/src/index.ts index ec369e4873..54bb4137dc 100644 --- a/packages/design-system/src/index.ts +++ b/packages/design-system/src/index.ts @@ -1,16 +1,4 @@ -export { - config, - createTheme, - css, - darkTheme, - getCssText, - globalCss, - keyframes, - reset, - styled, - theme, - type CSS, -} from "./stitches.config"; +export * from "./stitches.config"; export * from "./components/toast"; export * as Collapsible from "@radix-ui/react-collapsible"; diff --git a/packages/design-system/src/stitches.config.ts b/packages/design-system/src/stitches.config.ts index e159c2e7d7..b1906c6d94 100644 --- a/packages/design-system/src/stitches.config.ts +++ b/packages/design-system/src/stitches.config.ts @@ -118,7 +118,7 @@ import { import type * as Stitches from "@stitches/react"; export type { VariantProps } from "@stitches/react"; -export const { +const { styled, css, theme, @@ -414,6 +414,14 @@ export const { export type CSS = Stitches.CSS; +export { styled, css, theme, globalCss, keyframes, config }; + +export const flushCss = () => { + const css = getCssText(); + reset(); + return css; +}; + export const darkTheme = createTheme({ colors: { ...grayDark, diff --git a/packages/react-sdk/src/stitches/critical-css.tsx b/packages/react-sdk/src/stitches/critical-css.tsx index efd45dda7e..77f6268bae 100644 --- a/packages/react-sdk/src/stitches/critical-css.tsx +++ b/packages/react-sdk/src/stitches/critical-css.tsx @@ -1,5 +1,5 @@ import React from "react"; -import { getCssText as getCssTextDefault } from "./css"; +import { flushCss as flushCssDefault } from "./css"; const criticalCssMarker = "__critical-css__"; @@ -8,7 +8,7 @@ export const CriticalCss = (): JSX.Element | null => export const insertCriticalCss = ( markup: string, - getCssText: typeof getCssTextDefault = getCssTextDefault + flushCss: typeof flushCssDefault = flushCssDefault ): string => { - return markup.replace(criticalCssMarker, ``); + return markup.replace(criticalCssMarker, ``); }; diff --git a/packages/react-sdk/src/stitches/css.ts b/packages/react-sdk/src/stitches/css.ts index 6baf04d7c1..af71864036 100644 --- a/packages/react-sdk/src/stitches/css.ts +++ b/packages/react-sdk/src/stitches/css.ts @@ -29,12 +29,11 @@ export const globalCss: typeof globalCssImport = (...args) => { return getCachedConfig().globalCss(...args); }; -export const getCssText = (): string => { - return getCachedConfig().getCssText(); -}; - -export const resetCss = () => { - getCachedConfig().reset(); +export const flushCss = () => { + const config = getCachedConfig(); + const css = config.getCssText(); + config.reset(); + return css; }; export const setBreakpoints = (breakpoints: Array) => { From c681299fdd122a86175d45ab7e5ac05aa0002966 Mon Sep 17 00:00:00 2001 From: Oleg Isonen Date: Wed, 28 Sep 2022 13:33:28 +0300 Subject: [PATCH 2/2] separate critical css and remix stuff on canvas and in designer We need to reuse canvas stuff on the published site as well --- apps/designer/app/critical-css.ts | 34 ------------------- apps/designer/app/entry.server.tsx | 26 +++++++------- apps/designer/app/routes/dashboard.tsx | 4 +-- apps/designer/app/routes/designer.tsx | 4 +-- apps/designer/app/routes/login.tsx | 4 +-- apps/designer/app/shared/remix/constants.ts | 1 + .../shared/remix/handle-request.server.tsx | 23 +++++++++++++ apps/designer/app/shared/remix/index.ts | 2 ++ .../app/shared/remix/insert-critical-css.ts | 6 ++++ .../designer.tsx => remix/root.tsx} | 6 ++-- packages/react-sdk/src/canvas/index.ts | 1 - packages/react-sdk/src/index.ts | 2 +- packages/react-sdk/src/remix/constants.ts | 1 + .../src/remix/handle-request.server.tsx | 22 ++++++++++++ packages/react-sdk/src/remix/index.ts | 2 ++ .../src/remix/insert-critical-css.ts | 6 ++++ .../src/{canvas/canvas.tsx => remix/root.tsx} | 4 +-- .../react-sdk/src/stitches/critical-css.tsx | 14 -------- packages/react-sdk/src/stitches/index.ts | 3 +- .../src/stitches/{css.ts => stitches.ts} | 2 +- packages/react-sdk/src/stitches/to-css.ts | 2 +- 21 files changed, 90 insertions(+), 79 deletions(-) delete mode 100644 apps/designer/app/critical-css.ts create mode 100644 apps/designer/app/shared/remix/constants.ts create mode 100644 apps/designer/app/shared/remix/handle-request.server.tsx create mode 100644 apps/designer/app/shared/remix/index.ts create mode 100644 apps/designer/app/shared/remix/insert-critical-css.ts rename apps/designer/app/shared/{documents/designer.tsx => remix/root.tsx} (79%) delete mode 100644 packages/react-sdk/src/canvas/index.ts create mode 100644 packages/react-sdk/src/remix/constants.ts create mode 100644 packages/react-sdk/src/remix/handle-request.server.tsx create mode 100644 packages/react-sdk/src/remix/index.ts create mode 100644 packages/react-sdk/src/remix/insert-critical-css.ts rename packages/react-sdk/src/{canvas/canvas.tsx => remix/root.tsx} (84%) delete mode 100644 packages/react-sdk/src/stitches/critical-css.tsx rename packages/react-sdk/src/stitches/{css.ts => stitches.ts} (96%) diff --git a/apps/designer/app/critical-css.ts b/apps/designer/app/critical-css.ts deleted file mode 100644 index 28145afd71..0000000000 --- a/apps/designer/app/critical-css.ts +++ /dev/null @@ -1,34 +0,0 @@ -import { - insertCriticalCss as insert, - flushCss as flushCanvasCss, -} from "@webstudio-is/react-sdk"; -import { flushCss as flushDesignerCss } from "@webstudio-is/design-system"; -import config from "./config"; - -const flushFunctions = { - [config.previewPath]: flushCanvasCss, - [config.canvasPath]: flushCanvasCss, - [config.designerPath]: flushDesignerCss, - [config.dashboardPath]: flushDesignerCss, - [config.loginPath]: flushDesignerCss, -}; - -const getFlushFunction = (url: string) => { - const { pathname } = new URL(url); - let path: keyof typeof flushFunctions; - for (path in flushFunctions) { - if (pathname.indexOf(path) === 0) { - return flushFunctions[path]; - } - } - return flushCanvasCss; -}; - -/** - * This works around the problem with getCssTextfunction being a different one - * depending on createStitches() used in each outlet. - * @todo find a better way - */ -export const insertCriticalCss = (markup: string, url: string): string => { - return insert(markup, getFlushFunction(url)); -}; diff --git a/apps/designer/app/entry.server.tsx b/apps/designer/app/entry.server.tsx index 0d2bdf0cc2..2d217876da 100644 --- a/apps/designer/app/entry.server.tsx +++ b/apps/designer/app/entry.server.tsx @@ -1,10 +1,10 @@ -import { renderToString } from "react-dom/server"; -import { RemixServer } from "@remix-run/react"; -import { insertCriticalCss } from "./critical-css"; import type { EntryContext } from "@remix-run/node"; import * as Sentry from "@sentry/remix"; import { initSentry } from "./shared/sentry"; import { prisma } from "@webstudio-is/prisma-client"; +import { handleRequest as handleRequestDesigner } from "./shared/remix"; +import { handleRequest as handleRequestCanvas } from "@webstudio-is/react-sdk"; +import config from "./config"; initSentry({ integrations: [new Sentry.Integrations.Prisma({ client: prisma })], @@ -16,17 +16,15 @@ export default function handleRequest( responseHeaders: Headers, remixContext: EntryContext ) { - let markup = renderToString( - - ); + const { pathname } = new URL(request.url); + let handle = handleRequestDesigner; - markup = insertCriticalCss(markup, request.url); + if ( + pathname.indexOf(config.previewPath) === 0 || + pathname.indexOf(config.canvasPath) === 0 + ) { + handle = handleRequestCanvas; + } - responseHeaders.set("Content-Type", "text/html"); - responseHeaders.set("Accept-CH", "Sec-CH-Prefers-Color-Scheme"); - - return new Response("" + markup, { - status: responseStatusCode, - headers: responseHeaders, - }); + return handle(request, responseStatusCode, responseHeaders, remixContext); } diff --git a/apps/designer/app/routes/dashboard.tsx b/apps/designer/app/routes/dashboard.tsx index 20bd4e9ce0..4a0cb028ab 100644 --- a/apps/designer/app/routes/dashboard.tsx +++ b/apps/designer/app/routes/dashboard.tsx @@ -1,5 +1,5 @@ import type { LoaderFunction, MetaFunction } from "@remix-run/node"; -import { Designer } from "~/shared/documents/designer"; +import { Root } from "~/shared/remix"; import env from "~/env.server"; import { getThemeData } from "~/shared/theme"; @@ -14,4 +14,4 @@ export const meta: MetaFunction = () => { return { title: "Webstudio Dashboard" }; }; -export default Designer; +export default Root; diff --git a/apps/designer/app/routes/designer.tsx b/apps/designer/app/routes/designer.tsx index 7097e1b5cf..44e8680655 100644 --- a/apps/designer/app/routes/designer.tsx +++ b/apps/designer/app/routes/designer.tsx @@ -1,5 +1,5 @@ import type { LoaderFunction, MetaFunction } from "@remix-run/node"; -import { Designer } from "~/shared/documents/designer"; +import { Root } from "~/shared/remix"; import env from "~/env.server"; import { getThemeData } from "~/shared/theme"; @@ -14,4 +14,4 @@ export const meta: MetaFunction = () => { return { title: "Webstudio" }; }; -export default Designer; +export default Root; diff --git a/apps/designer/app/routes/login.tsx b/apps/designer/app/routes/login.tsx index 99d9febb01..a76cc559f8 100644 --- a/apps/designer/app/routes/login.tsx +++ b/apps/designer/app/routes/login.tsx @@ -1,5 +1,5 @@ import { LoaderFunction, MetaFunction } from "@remix-run/node"; -import { Designer } from "~/shared/documents/designer"; +import { Root } from "~/shared/remix"; import env from "~/env.server"; import { getThemeData } from "~/shared/theme"; @@ -14,4 +14,4 @@ export const meta: MetaFunction = () => { return { title: "Webstudio Login" }; }; -export default Designer; +export default Root; diff --git a/apps/designer/app/shared/remix/constants.ts b/apps/designer/app/shared/remix/constants.ts new file mode 100644 index 0000000000..b5ddbd71f5 --- /dev/null +++ b/apps/designer/app/shared/remix/constants.ts @@ -0,0 +1 @@ +export const CRITICAL_CSS_MARKER = "__CRITICAL_CSS__"; diff --git a/apps/designer/app/shared/remix/handle-request.server.tsx b/apps/designer/app/shared/remix/handle-request.server.tsx new file mode 100644 index 0000000000..9b72cb7cc7 --- /dev/null +++ b/apps/designer/app/shared/remix/handle-request.server.tsx @@ -0,0 +1,23 @@ +import { renderToString } from "react-dom/server"; +import { RemixServer } from "@remix-run/react"; +import type { EntryContext } from "@remix-run/node"; +import { insertCriticalCss } from "./insert-critical-css"; + +export const handleRequest = ( + request: Request, + responseStatusCode: number, + responseHeaders: Headers, + remixContext: EntryContext +) => { + const markup = renderToString( + + ); + + responseHeaders.set("Content-Type", "text/html"); + responseHeaders.set("Accept-CH", "Sec-CH-Prefers-Color-Scheme"); + + return new Response("" + insertCriticalCss(markup), { + status: responseStatusCode, + headers: responseHeaders, + }); +}; diff --git a/apps/designer/app/shared/remix/index.ts b/apps/designer/app/shared/remix/index.ts new file mode 100644 index 0000000000..444dfb6c40 --- /dev/null +++ b/apps/designer/app/shared/remix/index.ts @@ -0,0 +1,2 @@ +export * from "./handle-request.server"; +export * from "./root"; diff --git a/apps/designer/app/shared/remix/insert-critical-css.ts b/apps/designer/app/shared/remix/insert-critical-css.ts new file mode 100644 index 0000000000..fda5504048 --- /dev/null +++ b/apps/designer/app/shared/remix/insert-critical-css.ts @@ -0,0 +1,6 @@ +import { flushCss } from "@webstudio-is/design-system"; +import { CRITICAL_CSS_MARKER } from "./constants"; + +export const insertCriticalCss = (markup: string): string => { + return markup.replace(CRITICAL_CSS_MARKER, ``); +}; diff --git a/apps/designer/app/shared/documents/designer.tsx b/apps/designer/app/shared/remix/root.tsx similarity index 79% rename from apps/designer/app/shared/documents/designer.tsx rename to apps/designer/app/shared/remix/root.tsx index 4638c4919a..38a1e662c6 100644 --- a/apps/designer/app/shared/documents/designer.tsx +++ b/apps/designer/app/shared/remix/root.tsx @@ -1,9 +1,9 @@ import { Links, LiveReload, Meta, Outlet, Scripts } from "@remix-run/react"; -import { CriticalCss } from "@webstudio-is/react-sdk"; import { Env } from "~/shared/env"; import { useThemeProps } from "~/shared/theme"; +import { CRITICAL_CSS_MARKER } from "./constants"; -export const Designer = () => { +export const Root = () => { const themeProps = useThemeProps(); return ( @@ -12,7 +12,7 @@ export const Designer = () => { - + {typeof document === "undefined" ? CRITICAL_CSS_MARKER : null} diff --git a/packages/react-sdk/src/canvas/index.ts b/packages/react-sdk/src/canvas/index.ts deleted file mode 100644 index df456a3704..0000000000 --- a/packages/react-sdk/src/canvas/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from "./canvas"; diff --git a/packages/react-sdk/src/index.ts b/packages/react-sdk/src/index.ts index 58ede255ac..7458f83c4d 100644 --- a/packages/react-sdk/src/index.ts +++ b/packages/react-sdk/src/index.ts @@ -6,4 +6,4 @@ export * as componentsMeta from "./components/meta"; export * from "./user-props"; export * from "./pubsub"; export * from "./db"; -export * from "./canvas"; +export * from "./remix"; diff --git a/packages/react-sdk/src/remix/constants.ts b/packages/react-sdk/src/remix/constants.ts new file mode 100644 index 0000000000..b5ddbd71f5 --- /dev/null +++ b/packages/react-sdk/src/remix/constants.ts @@ -0,0 +1 @@ +export const CRITICAL_CSS_MARKER = "__CRITICAL_CSS__"; diff --git a/packages/react-sdk/src/remix/handle-request.server.tsx b/packages/react-sdk/src/remix/handle-request.server.tsx new file mode 100644 index 0000000000..8efe2c9943 --- /dev/null +++ b/packages/react-sdk/src/remix/handle-request.server.tsx @@ -0,0 +1,22 @@ +import { renderToString } from "react-dom/server"; +import { RemixServer } from "@remix-run/react"; +import type { EntryContext } from "@remix-run/node"; +import { insertCriticalCss } from "./insert-critical-css"; + +export const handleRequest = ( + request: Request, + responseStatusCode: number, + responseHeaders: Headers, + remixContext: EntryContext +) => { + const markup = renderToString( + + ); + + responseHeaders.set("Content-Type", "text/html"); + + return new Response("" + insertCriticalCss(markup), { + status: responseStatusCode, + headers: responseHeaders, + }); +}; diff --git a/packages/react-sdk/src/remix/index.ts b/packages/react-sdk/src/remix/index.ts new file mode 100644 index 0000000000..1287530143 --- /dev/null +++ b/packages/react-sdk/src/remix/index.ts @@ -0,0 +1,2 @@ +export * from "./root"; +export * from "./handle-request.server"; diff --git a/packages/react-sdk/src/remix/insert-critical-css.ts b/packages/react-sdk/src/remix/insert-critical-css.ts new file mode 100644 index 0000000000..9f0bdd20ca --- /dev/null +++ b/packages/react-sdk/src/remix/insert-critical-css.ts @@ -0,0 +1,6 @@ +import { flushCss } from "../stitches"; +import { CRITICAL_CSS_MARKER } from "./constants"; + +export const insertCriticalCss = (markup: string): string => { + return markup.replace(CRITICAL_CSS_MARKER, ``); +}; diff --git a/packages/react-sdk/src/canvas/canvas.tsx b/packages/react-sdk/src/remix/root.tsx similarity index 84% rename from packages/react-sdk/src/canvas/canvas.tsx rename to packages/react-sdk/src/remix/root.tsx index b20e8fb98e..eced0b5951 100644 --- a/packages/react-sdk/src/canvas/canvas.tsx +++ b/packages/react-sdk/src/remix/root.tsx @@ -1,5 +1,5 @@ import { Links, Meta, Outlet as DefaultOutlet } from "@remix-run/react"; -import { CriticalCss } from ".."; +import { CRITICAL_CSS_MARKER } from "./constants"; /** * We are using Outlet prop from index layout when user renders site from a subdomain. @@ -18,7 +18,7 @@ export const Root = ({ - + {typeof document === "undefined" ? CRITICAL_CSS_MARKER : null} diff --git a/packages/react-sdk/src/stitches/critical-css.tsx b/packages/react-sdk/src/stitches/critical-css.tsx deleted file mode 100644 index 77f6268bae..0000000000 --- a/packages/react-sdk/src/stitches/critical-css.tsx +++ /dev/null @@ -1,14 +0,0 @@ -import React from "react"; -import { flushCss as flushCssDefault } from "./css"; - -const criticalCssMarker = "__critical-css__"; - -export const CriticalCss = (): JSX.Element | null => - typeof document === "undefined" ? <>{criticalCssMarker} : null; - -export const insertCriticalCss = ( - markup: string, - flushCss: typeof flushCssDefault = flushCssDefault -): string => { - return markup.replace(criticalCssMarker, ``); -}; diff --git a/packages/react-sdk/src/stitches/index.ts b/packages/react-sdk/src/stitches/index.ts index f5c9580245..cba98204fc 100644 --- a/packages/react-sdk/src/stitches/index.ts +++ b/packages/react-sdk/src/stitches/index.ts @@ -1,3 +1,2 @@ export * from "./to-css"; -export * from "./css"; -export * from "./critical-css"; +export * from "./stitches"; diff --git a/packages/react-sdk/src/stitches/css.ts b/packages/react-sdk/src/stitches/stitches.ts similarity index 96% rename from packages/react-sdk/src/stitches/css.ts rename to packages/react-sdk/src/stitches/stitches.ts index af71864036..67662b3eb3 100644 --- a/packages/react-sdk/src/stitches/css.ts +++ b/packages/react-sdk/src/stitches/stitches.ts @@ -14,7 +14,7 @@ let stitches: any; export { type CSS }; -export const getCachedConfig = () => { +const getCachedConfig = () => { if (stitches === undefined) { stitches = createStitches({ media }); } diff --git a/packages/react-sdk/src/stitches/to-css.ts b/packages/react-sdk/src/stitches/to-css.ts index 5c4420caa5..4cee92ba01 100644 --- a/packages/react-sdk/src/stitches/to-css.ts +++ b/packages/react-sdk/src/stitches/to-css.ts @@ -1,4 +1,4 @@ -import type { CSS } from "./css"; +import type { CSS } from "./stitches"; import type { StyleProperty, StyleValue, CssRule, Breakpoint } from "../css"; export const toValue = (value: StyleValue): string => {