Add theme showcase pages, Playwright screenshot tests, and Tailwind theme

.gitignore

@@ -9,3 +9,6 @@ node_modules
 !.env.example
 vite.config.js.timestamp-*
 vite.config.ts.timestamp-*
+/test-results/
+/playwright-report/
+/blob-report/

package.json

@@ -11,7 +11,8 @@
     "deploy": "NODE_ENV=production vite build && npm run add-nojekyll && gh-pages -d build -t true",
     "prepublishOnly": "npm run package && npm run build-css",
     "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
-    "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch"
+    "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
+    "test:screenshots": "npx playwright test tests/theme-screenshots.spec.ts"
   },
   "exports": {
     ".": {
@@ -36,6 +37,7 @@
     "svelte": "^3.0.0 || ^4.0.0"
   },
   "devDependencies": {
+    "@playwright/test": "^1.58.2",
     "@sveltejs/adapter-auto": "^3.2.2",
     "@sveltejs/kit": "^2.5.17",
     "@sveltejs/package": "^2.3.2",
@@ -45,7 +47,7 @@
     "postcss-import": "^16.1.0",
     "publint": "^0.2.8",
     "sass": "^1.77.6",
-    "svelte": "^3.0.0",
+    "svelte": "^4.2.20",
     "svelte-check": "^3.8.1",
     "svelte-preprocess": "^6.0.1",
     "tslib": "^2.6.3",

playwright.config.ts

@@ -0,0 +1,27 @@
+import { defineConfig, devices } from "@playwright/test";
+
+export default defineConfig({
+  testDir: "./tests",
+  outputDir: "./test-results",
+  fullyParallel: true,
+  forbidOnly: !!process.env.CI,
+  retries: process.env.CI ? 2 : 0,
+  workers: process.env.CI ? 1 : undefined,
+  reporter: "html",
+  use: {
+    baseURL: "http://localhost:5173/svelte-contain-css/",
+    trace: "on-first-retry",
+  },
+  projects: [
+    {
+      name: "chromium",
+      use: { ...devices["Desktop Chrome"] },
+    },
+  ],
+  webServer: {
+    command: "npm run dev",
+    url: "http://localhost:5173/svelte-contain-css",
+    reuseExistingServer: true,
+    timeout: 120000,
+  },
+});