Merge branch 'main' into 252-fonts-manager-and-fonts-selector

apps/designer/app/critical-css.ts

@@ -1,50 +0,0 @@
-import {
-  insertCriticalCss as insert,
-  getCssText as getCanvasCssText,
-  resetCss as resetCanvasCss,
-} from "@webstudio-is/react-sdk";
-import {
-  getCssText as getDesignerCssText,
-  reset as resetDesignerCss,
-} 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,
-};
-
-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 getCanvasCssText;
-};
-
-/**
- * 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));
-};

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(
-    <RemixServer context={remixContext} url={request.url} />
-  );
+  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("<!DOCTYPE html>" + markup, {
-    status: responseStatusCode,
-    headers: responseHeaders,
-  });
+  return handle(request, responseStatusCode, responseHeaders, remixContext);
 }

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;

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;

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;

apps/designer/app/shared/remix/constants.ts

@@ -0,0 +1 @@
+export const CRITICAL_CSS_MARKER = "__CRITICAL_CSS__";

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(
+    <RemixServer context={remixContext} url={request.url} />
+  );
+
+  responseHeaders.set("Content-Type", "text/html");
+  responseHeaders.set("Accept-CH", "Sec-CH-Prefers-Color-Scheme");
+
+  return new Response("<!DOCTYPE html>" + insertCriticalCss(markup), {
+    status: responseStatusCode,
+    headers: responseHeaders,
+  });
+};

apps/designer/app/shared/remix/index.ts

@@ -0,0 +1,2 @@
+export * from "./handle-request.server";
+export * from "./root";

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, `<style>${flushCss()}</style>`);
+};

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 (
     <html lang="en" {...themeProps}>
@@ -12,7 +12,7 @@ export const Designer = () => {
         <meta name="viewport" content="width=device-width,initial-scale=1" />
         <Meta />
         <Links />
-        <CriticalCss />
+        {typeof document === "undefined" ? CRITICAL_CSS_MARKER : null}
       </head>
       <body>
         <Outlet />

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";

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<typeof config>;
 
+export { styled, css, theme, globalCss, keyframes, config };
+
+export const flushCss = () => {
+  const css = getCssText();
+  reset();
+  return css;
+};
+
 export const darkTheme = createTheme({
   colors: {
     ...grayDark,

packages/react-sdk/src/canvas/index.ts

@@ -1 +0,0 @@
-export * from "./canvas";

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";

packages/react-sdk/src/remix/constants.ts

@@ -0,0 +1 @@
+export const CRITICAL_CSS_MARKER = "__CRITICAL_CSS__";

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(
+    <RemixServer context={remixContext} url={request.url} />
+  );
+
+  responseHeaders.set("Content-Type", "text/html");
+
+  return new Response("<!DOCTYPE html>" + insertCriticalCss(markup), {
+    status: responseStatusCode,
+    headers: responseHeaders,
+  });
+};

packages/react-sdk/src/remix/index.ts

@@ -0,0 +1,2 @@
+export * from "./root";
+export * from "./handle-request.server";

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, `<style>${flushCss()}</style>`);
+};

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 = ({
         <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
         <Meta />
         <Links />
-        <CriticalCss />
+        {typeof document === "undefined" ? CRITICAL_CSS_MARKER : null}
       </head>
       <Outlet />
     </html>

packages/react-sdk/src/stitches/critical-css.tsx

@@ -1,14 +0,0 @@
-import React from "react";
-import { getCssText as getCssTextDefault } from "./css";
-
-const criticalCssMarker = "__critical-css__";
-
-export const CriticalCss = (): JSX.Element | null =>
-  typeof document === "undefined" ? <>{criticalCssMarker}</> : null;
-
-export const insertCriticalCss = (
-  markup: string,
-  getCssText: typeof getCssTextDefault = getCssTextDefault
-): string => {
-  return markup.replace(criticalCssMarker, `<style>${getCssText()}</style>`);
-};

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";

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 });
   }
@@ -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<Breakpoint>) => {

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";
 import { DEFAULT_FONT_FALLBACK, SYSTEM_FONTS } from "@webstudio-is/fonts";