Display User CSS and SCSS in Preview Panel (#418)

At long last, this PR allows users to view their CSS and SCSS styling in the Preview Panel. This base of this feature is complete, however, it does have a known edge case which we have a maintenance item to address. When using third party styling imports, Studio will not resolve aliased file paths to style files. See [this thread](#412 (comment)). J=SLAP-2912
yext · Oct 26, 2023 · fc31076 · fc31076
1 parent f19478a
commit fc31076
Show file tree

Hide file tree

Showing 114 changed files with 1,551 additions and 234 deletions.
diff --git a/apps/test-site/package.json b/apps/test-site/package.json
@@ -25,10 +25,13 @@
     "@yext/pages": "^1.0.0-rc.1",
     "@yext/studio": "*",
     "@yext/types": "^0.1.12-alpha",
+    "autoprefixer": "^10.4.16",
     "eslint": "^8.11.0",
     "eslint-plugin-import": "^2.25.4",
     "eslint-plugin-react-perf": "^3.3.1",
-    "eslint-plugin-tsdoc": "^0.2.17"
+    "eslint-plugin-tsdoc": "^0.2.17",
+    "postcss": "^8.4.31",
+    "tailwindcss": "^3.3.4"
   },
   "scripts": {
     "dev": "studio",

diff --git a/apps/test-site/postcss.config.cjs b/apps/test-site/postcss.config.cjs
@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};
diff --git a/apps/test-site/src/layouts/LocationLayout.tsx b/apps/test-site/src/layouts/LocationLayout.tsx
@@ -1,4 +1,5 @@
 import Header from "../components/Header";
+import "../styles/main.css";
 
 function LocationLayout() {
   return (

diff --git a/apps/test-site/src/styles/main.css b/apps/test-site/src/styles/main.css
@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
diff --git a/apps/test-site/src/templates/LocationPage.tsx b/apps/test-site/src/templates/LocationPage.tsx
@@ -4,6 +4,7 @@ import BusinessInfo from "../components/BusinessInfo";
 import Header from "../components/Header";
 import HoursDisplay from "../components/HoursDisplay";
 import ProminentImage from "../components/ProminentImage";
+import "../styles/main.css";
 
 export const config: TemplateConfig = {
   stream: {

diff --git a/apps/test-site/src/templates/UniversalPage.tsx b/apps/test-site/src/templates/UniversalPage.tsx
@@ -4,6 +4,7 @@ import Button from "../components/Button";
 import Container from "../components/Container";
 import Cta from "../components/Cta";
 import FixedText from "../components/FixedText";
+import "../styles/main.css";
 
 export const config: TemplateConfig = {
   stream: {

diff --git a/apps/test-site/src/templates/index.tsx b/apps/test-site/src/templates/index.tsx
@@ -1,5 +1,6 @@
 import { GetPath, TemplateProps } from "@yext/pages";
 import Button from "../components/Button";
+import "../styles/main.css";
 
 export const getPath: GetPath<TemplateProps> = () => {
   return "index.html";

diff --git a/apps/test-site/tailwind.config.ts b/apps/test-site/tailwind.config.ts
@@ -3,13 +3,6 @@ import type { StudioTailwindConfig } from "@yext/studio";
 export default {
   content: ["./src/**/*.{ts,tsx}"],
   theme: {
-    extend: {
-      colors: {
-        primary: "#aa00ff",
-      },
-      fontSize: {
-        medium: "14px",
-      },
-    },
+    extend: {},
   },
 } satisfies StudioTailwindConfig;
diff --git a/e2e-tests/package.json b/e2e-tests/package.json
@@ -16,8 +16,11 @@
     "@vitejs/plugin-react": "^2.1.0",
     "@yext/pages": "^1.0.0-rc.1",
     "@yext/studio": "*",
+    "autoprefixer": "^10.4.16",
     "fs-extra": "^11.1.1",
-    "glob": "^10.3.1"
+    "glob": "^10.3.1",
+    "postcss": "^8.4.31",
+    "tailwindcss": "^3.3.4"
   },
   "dependencies": {
     "kill-port": "^2.0.1"

diff --git a/e2e-tests/postcss.config.cjs b/e2e-tests/postcss.config.cjs
@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};
diff --git a/e2e-tests/src/layouts/LocationLayout.tsx b/e2e-tests/src/layouts/LocationLayout.tsx
@@ -1,4 +1,5 @@
 import Header from "../components/Header";
+import "../styles/main.css";
 
 function LocationLayout() {
   return (

diff --git a/e2e-tests/src/styles/main.css b/e2e-tests/src/styles/main.css
@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
diff --git a/e2e-tests/src/templates/BasicPage.tsx b/e2e-tests/src/templates/BasicPage.tsx
@@ -1,6 +1,7 @@
 import { GetPath, TemplateProps } from "@yext/pages";
 import Banner from "../components/Banner";
 import Container from "../components/Container";
+import "../styles/main.css";
 
 export const getPath: GetPath<TemplateProps> = () => {
   return "index.html";

diff --git a/e2e-tests/src/templates/ErrorComponentPreviews.tsx b/e2e-tests/src/templates/ErrorComponentPreviews.tsx
@@ -1,5 +1,6 @@
 import { GetPath, TemplateProps } from "@yext/pages";
 import ErrorComponent from "../components/ErrorComponent";
+import "../styles/main.css";
 
 export const getPath: GetPath<TemplateProps> = () => {
   return "error-component-page";

diff --git a/e2e-tests/src/templates/ErrorPage.tsx b/e2e-tests/src/templates/ErrorPage.tsx
@@ -1,4 +1,5 @@
 import { GetPath, TemplateProps } from "@yext/pages";
+import "../styles/main.css";
 
 export const getPath: GetPath<TemplateProps> = () => {
   return "error-page";

diff --git a/e2e-tests/src/templates/LocationPage.tsx b/e2e-tests/src/templates/LocationPage.tsx
@@ -4,6 +4,7 @@ import BusinessInfo from "../components/BusinessInfo";
 import Header from "../components/Header";
 import HoursDisplay from "../components/HoursDisplay";
 import ProminentImage from "../components/ProminentImage";
+import "../styles/main.css";
 
 export const config: TemplateConfig = {
   stream: {

diff --git a/e2e-tests/tests/__fixtures__/add-element-expected-page.tsx b/e2e-tests/tests/__fixtures__/add-element-expected-page.tsx
@@ -5,6 +5,7 @@ import Footer from "../components/Footer";
 import Header from "../components/Header";
 import HoursDisplay from "../components/HoursDisplay";
 import ProminentImage from "../components/ProminentImage";
+import "../styles/main.css";
 
 export const config: TemplateConfig = {
   stream: {

diff --git a/e2e-tests/tests/__fixtures__/add-layout-page-expected.tsx b/e2e-tests/tests/__fixtures__/add-layout-page-expected.tsx
@@ -1,5 +1,6 @@
 import { GetPath, TemplateProps } from "@yext/pages";
 import Header from "../components/Header";
+import "../styles/main.css";
 
 export const getPath: GetPath<TemplateProps> = () => {
   return "index.html";

diff --git a/...sts/tests/__fixtures__/tailwind.config.ts → ...ts/__fixtures__/custom-tailwind.config.ts b/...sts/tests/__fixtures__/tailwind.config.ts → ...ts/__fixtures__/custom-tailwind.config.ts
diff --git a/e2e-tests/tests/__fixtures__/hmr/update-button-props-expected-page.tsx b/e2e-tests/tests/__fixtures__/hmr/update-button-props-expected-page.tsx
@@ -2,6 +2,7 @@ import { GetPath, TemplateProps } from "@yext/pages";
 import Banner from "../components/Banner";
 import Button from "../components/Button";
 import Container from "../components/Container";
+import "../styles/main.css";
 
 export const getPath: GetPath<TemplateProps> = () => {
   return "index.html";

diff --git a/e2e-tests/tests/__fixtures__/hmr/updated-universal-page.tsx b/e2e-tests/tests/__fixtures__/hmr/updated-universal-page.tsx
@@ -1,5 +1,6 @@
 import { GetPath, TemplateProps } from "@yext/pages";
 import Button from "../components/Button";
+import "../styles/main.css";
 
 export const getPath: GetPath<TemplateProps> = () => {
   return "index.html";

diff --git a/e2e-tests/tests/__fixtures__/rearrange-elements-expected-page.tsx b/e2e-tests/tests/__fixtures__/rearrange-elements-expected-page.tsx
@@ -4,6 +4,7 @@ import BusinessInfo from "../components/BusinessInfo";
 import Header from "../components/Header";
 import HoursDisplay from "../components/HoursDisplay";
 import ProminentImage from "../components/ProminentImage";
+import "../styles/main.css";
 
 export const config: TemplateConfig = {
   stream: {

diff --git a/e2e-tests/tests/__fixtures__/remove-element-expected-page.tsx b/e2e-tests/tests/__fixtures__/remove-element-expected-page.tsx
@@ -1,4 +1,5 @@
 import { GetPath, TemplateProps } from "@yext/pages";
+import "../styles/main.css";
 
 export const getPath: GetPath<TemplateProps> = () => {
   return "index.html";

diff --git a/e2e-tests/tests/custom-tailwind.spec.ts b/e2e-tests/tests/custom-tailwind.spec.ts
@@ -3,7 +3,7 @@ import { studioTest } from "./infra/studioTest.js";
 import fs from "fs";
 
 studioTest.use({
-  tailwindConfigPath: "tests/__fixtures__/tailwind.config.ts",
+  tailwindConfigPath: "tests/__fixtures__/custom-tailwind.config.ts",
 });
 
 studioTest(

diff --git a/e2e-tests/tests/infra/StudioPlaywrightPage.ts b/e2e-tests/tests/infra/StudioPlaywrightPage.ts
@@ -134,8 +134,18 @@ export default class StudioPlaywrightPage {
    */
   async waitForLoadState() {
     await this.page.waitForLoadState();
-    await expect(
-      this.page.getByRole("button", { name: "Open Add Element Menu" })
-    ).toBeVisible();
+    const overlayDomEl = this.page.getByTestId("loading-overlay");
+    await expect
+      .poll(
+        () =>
+          overlayDomEl.evaluate((e: HTMLElement) => {
+            return e.className.includes("opacity-0");
+          }),
+        {
+          message: "Waiting for LoadingOverlay to finish.",
+          timeout: 5000,
+        }
+      )
+      .toBeTruthy();
   }
 }
diff --git a/e2e-tests/tests/infra/studioTest.ts b/e2e-tests/tests/infra/studioTest.ts
@@ -25,7 +25,7 @@ export type StudioTestFixtures = {
 export const studioTest = base.extend<StudioTestFixtures>({
   createRemote: false,
   debug: false,
-  tailwindConfigPath: undefined,
+  tailwindConfigPath: "tests/infra/tailwind.config.ts",
   studioPage: async (
     { page, createRemote, debug, tailwindConfigPath },
     use,

diff --git a/e2e-tests/tests/infra/tailwind.config.ts b/e2e-tests/tests/infra/tailwind.config.ts
@@ -0,0 +1,8 @@
+import type { StudioTailwindConfig } from "@yext/studio";
+
+export default {
+  content: ["./src/**/*.{ts,tsx}"],
+  theme: {
+    extend: {},
+  },
+} satisfies StudioTailwindConfig;