Merge pull request evidence-dev#3041 from evidence-dev/feat/upgrade-tailwind-4

Feat: Upgrade to tailwind 4

Author: ItsMeBrianD

.changeset/chilly-yaks-listen.md

@@ -0,0 +1,13 @@
+---
+'@evidence-dev/tailwind': patch
+---
+
+[!] BREAKING CHANGE:
+Custom theme colors are converted implicitly to kebab-case by tailwindcss
+
+This means that some color defined in `evidence.config.yaml` as `myCustomColor`
+should be used as (for example) `text-my-custom-color`. (`text-myCustomColor` will not work)
+
+When referencing custom theme colors in Javascript the original case should still be used
+(for example) `myCustomColor` would still be `<BarChart ... fillColor=myCustomColor />`
+_NOT_ `<BarChart ... fillColor="my-custom-color" />`

.changeset/kind-fishes-mate.md

@@ -0,0 +1,7 @@
+---
+'@evidence-dev/core-components': patch
+'@evidence-dev/tailwind': patch
+'@evidence-dev/evidence': patch
+---
+
+Use theme class instead of data-

.changeset/strong-wombats-admire.md

@@ -0,0 +1,5 @@
+---
+'@evidence-dev/evidence': patch
+---
+
+Add theme.css export for svelte component <style/> tags that need to access tailwind theme

e2e/base-path/tests/tests.spec.js

@@ -191,6 +191,24 @@ test.describe('Page', () => {
 	});
 });
 
+test.describe('Parquet Files', () => {
+	test('Manifest links should use base path', async ({ page }) => {
+		// Firefox does not behave as expected in playwright.
+		// This isn't a browser-specific test, so we can get away with
+		// not running on firefox
+		if (test.info().project.name === 'firefox') return;
+		page.addListener('request', (req) => {
+			console.log(req.url());
+		});
+		const reqPromise = page.waitForRequest(`${basePath}/data/needful_things/orders/orders.parquet`);
+		page.goto(basePath);
+		const req = await reqPromise;
+
+		const res = await req.response();
+		expect(res?.ok()).toBe(true);
+	});
+});
+
 test.describe('Components', () => {
 	test('Table row links should use base path', async ({ page }) => {
 		await page.goto(`${basePath}/table-row-links`);

e2e/hmr/tests/tests.spec.js

@@ -1,6 +1,6 @@
 // @ts-check
 import { test, expect } from '@playwright/test';
-import { createFile, deleteFile, editFile, restoreChangedFiles } from './fs-utils';
+import { editFile, restoreChangedFiles } from './fs-utils';
 import { waitForPageToLoad } from '../../test-utils';
 
 /** @param {import("@playwright/test").Page} page */
@@ -26,34 +26,6 @@ test.describe('pages', () => {
 
 		await expect(page.getByText('This page has some different text on it')).toBeVisible();
 	});
-
-	test('creating should add to the sidebar and allow navigation', async ({ page }) => {
-		await page.goto('/');
-		await waitForPageToLoad(page);
-
-		await expect(page.getByText('Index')).toBeVisible();
-
-		createFile('pages/new-page.md', 'This is a new page');
-		// file deletions trigger full reload, so we don't waitForHMR() here
-
-		await expect(page.getByRole('link', { name: 'New Page' })).toBeVisible();
-		await page.goto('/new-page');
-		await expect(page.getByText('This is a new page')).toBeVisible();
-	});
-
-	test('deleting should remove from the sidebar and prevent navigation', async ({ page }) => {
-		await page.goto('/');
-		await waitForPageToLoad(page);
-
-		await expect(page.getByText('Index')).toBeVisible();
-
-		deleteFile('pages/page.md');
-		await waitForHMR(page);
-
-		await expect(page.getByRole('link', { name: 'Page' })).not.toBeVisible();
-		await page.goto('/page');
-		await expect(page.getByText('Page Not Found')).toBeVisible();
-	});
 });
 
 test.describe('sources', () => {

e2e/themes/pages/index.md

@@ -6,7 +6,7 @@
 	div-primary-var
 </div>
 
-<div data-testid="div-myCustomColor-class" class="bg-myCustomColor">
+<div data-testid="div-myCustomColor-class" class="bg-my-custom-color">
 	div-myCustomColor-class
 </div>
 

package.json

@@ -26,6 +26,8 @@
 		"@evidence-dev/telemetry": "link:packages/lib/telemetry",
 		"@evidence-dev/trino": "link:packages/datasources/trino",
 		"@evidence-dev/universal-sql": "link:packages/lib/universal-sql",
+		"@tailwindcss/vite": "^4.0.0",
+		"tailwindcss": "^4.0.0",
 		"@parcel/packager-ts": "2.12.0",
 		"@parcel/transformer-typescript-types": "2.12.0",
 		"@playwright/test": "^1.45.3",

packages/evidence/package.json

@@ -21,6 +21,9 @@
 	"bin": {
 		"evidence": "cli.js"
 	},
+	"exports": {
+		"./theme.css": "./template/src/app.css"
+	},
 	"scripts": {
 		"build": "node scripts/build-template",
 		"prepublishOnly": "npm run build"
@@ -54,12 +57,10 @@
 		"autoprefixer": "^10.4.7",
 		"debounce": "^1.2.1",
 		"git-remote-origin-url": "4.0.0",
-		"postcss": "^8.4.14",
-		"postcss-load-config": "^4.0.1",
 		"svelte": "4.2.19",
 		"svelte-preprocess": "5.1.3",
 		"svelte2tsx": "0.7.4",
-		"tailwindcss": "^3.3.1",
+		"tailwindcss": "^4.0.0",
 		"typescript": "5.4.2",
 		"unist-util-visit": "4.1.2",
 		"vite": "5.4.14"

packages/evidence/scripts/build-template.js

@@ -21,9 +21,7 @@ const templatePaths = [
 	'src/pages/settings/',
 	'src/pages/explore',
 	'src/pages/api/',
-	'src/pages/manifest.webmanifest/+server.js',
-	'tailwind.config.cjs',
-	'postcss.config.cjs'
+	'src/pages/manifest.webmanifest/+server.js'
 ];
 const ignorePaths = ['static/data'];
 
@@ -54,6 +52,7 @@ fsExtra.outputFileSync(
 	import { isDebug } from '@evidence-dev/sdk/utils';
 	import { log } from "@evidence-dev/sdk/logger";
 	import { evidenceThemes } from '@evidence-dev/tailwind/vite-plugin';
+	import tailwindcss from '@tailwindcss/vite';
 
 
 	process.removeAllListeners('warning');
@@ -73,7 +72,7 @@ fsExtra.outputFileSync(
     /** @type {import('vite').UserConfig} */
      const config = 
     {
-        plugins: [sveltekit(), configVirtual(), queryDirectoryHmr, sourceQueryHmr(), evidenceThemes()],
+        plugins: [tailwindcss(), sveltekit(), configVirtual(), queryDirectoryHmr, sourceQueryHmr(), evidenceThemes()],
         optimizeDeps: {
             include: ['echarts-stat', 'echarts', 'blueimp-md5', 'nanoid', '@uwdata/mosaic-sql',
 				// We need these to prevent HMR from doing a full page reload

packages/evidence/scripts/svelte.config.js

@@ -1,5 +1,5 @@
 import evidencePreprocess from '@evidence-dev/preprocess';
-import preprocess from 'svelte-preprocess';
+
 import adapter from '@sveltejs/adapter-static';
 import { addBasePathToHrefAndSrc, injectComponents } from '@evidence-dev/sdk/build/svelte';
 import fs from 'fs';
@@ -37,14 +37,7 @@ function errorHandler(warning) {
 /** @type {import('@sveltejs/kit').Config} */
 const config = {
 	extensions: ['.svelte', '.md'],
-	preprocess: [
-		...evidencePreprocess(true),
-		injectComponents(),
-		preprocess({
-			postcss: true
-		}),
-		addBasePathToHrefAndSrc
-	],
+	preprocess: [...evidencePreprocess(true), injectComponents(), addBasePathToHrefAndSrc],
 	onwarn: errorHandler,
 	kit: {
 		adapter: adapter({