Add Tailwind to Test Site and e2e-tests

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

apps/test-site/postcss.config.cjs

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};

apps/test-site/src/layouts/LocationLayout.tsx

@@ -1,4 +1,5 @@
 import Header from "../components/Header";
+import "../styles/main.css";
 
 function LocationLayout() {
   return (

apps/test-site/src/styles/main.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

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: {

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: {

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

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"

e2e-tests/playwright.config.ts

@@ -1,5 +1,6 @@
 import { PlaywrightTestConfig, expect } from "@playwright/test";
 import fs from "node:fs";
+import os from "node:os";
 
 expect.extend({
   async toHaveContents(filepath: string, expectedContents: string) {
@@ -51,7 +52,7 @@ const config: PlaywrightTestConfig = {
     video: "on",
   },
   workers: 1,
-  ignoreSnapshots: true,
+  ignoreSnapshots: os.platform() !== "darwin",
 };
 
 export default config;

e2e-tests/postcss.config.cjs

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};

e2e-tests/src/layouts/LocationLayout.tsx

@@ -1,4 +1,5 @@
 import Header from "../components/Header";
+import "../styles/main.css";
 
 function LocationLayout() {
   return (

e2e-tests/src/styles/main.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

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

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

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

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: {

e2e-tests/tailwind.config.ts

@@ -0,0 +1,15 @@
+import type { StudioTailwindConfig } from "@yext/studio";
+
+export default {
+  content: ["./src/**/*.{ts,tsx}"],
+  theme: {
+    extend: {
+      colors: {
+        primary: "#aa00ff",
+      },
+      fontSize: {
+        medium: "14px",
+      },
+    },
+  },
+} satisfies StudioTailwindConfig;

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: {

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

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

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

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: {

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

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();
   }
 }