Migrate pattern library site and tests to Tailwind v4

Migrate the pattern library website and tests to use Tailwind v4. The npm
package remains usable with either Tailwind v3 or v4 downstream. The changes
here are similar to those in h (hypothesis/h#9877).

Author: robertknight

gulpfile.js

@@ -2,7 +2,6 @@ import { buildCSS, runTests, watchJS } from '@hypothesis/frontend-build';
 import gulp from 'gulp';
 
 import { servePatternLibrary } from './scripts/serve-pattern-library.js';
-import tailwindConfig from './tailwind.config.js';
 
 gulp.task('serve-pattern-library', () => {
   servePatternLibrary();
@@ -12,7 +11,10 @@ gulp.task('serve-pattern-library', () => {
 // during development. Bundled JS and CSS are not published with the package.
 
 gulp.task('bundle-css', () =>
-  buildCSS(['./styles/pattern-library.scss'], { tailwindConfig }),
+  buildCSS(['./styles/pattern-library.css'], {
+    autoprefixer: false,
+    tailwind: true,
+  }),
 );
 
 gulp.task(
@@ -44,7 +46,7 @@ gulp.task(
  * nb. This is only used for unit tests that need CSS to verify accessibility requirements.
  */
 gulp.task('build-test-css', () =>
-  buildCSS(['styles/test.scss'], { tailwindConfig }),
+  buildCSS(['styles/test.css'], { autoprefixer: false, tailwind: true }),
 );
 
 // Some (eg. a11y) tests rely on CSS bundles. We assume that JS will always take

package.json

@@ -10,19 +10,19 @@
     "@babel/preset-env": "^7.1.6",
     "@babel/preset-react": "^7.0.0",
     "@babel/preset-typescript": "^7.18.6",
-    "@hypothesis/frontend-build": "^4.0.0",
+    "@hypothesis/frontend-build": "^4.1.0",
     "@hypothesis/frontend-testing": "^1.7.1",
     "@rollup/plugin-babel": "^6.0.0",
     "@rollup/plugin-commonjs": "^28.0.0",
     "@rollup/plugin-dynamic-import-vars": "^2.1.2",
     "@rollup/plugin-node-resolve": "^16.0.0",
     "@rollup/plugin-terser": "^0.4.4",
     "@rollup/plugin-virtual": "^3.0.0",
+    "@tailwindcss/postcss": "^4.1.13",
     "@trivago/prettier-plugin-sort-imports": "^5.2.0",
     "@vitest/browser": "^3.1.1",
     "@vitest/coverage-istanbul": "^3.1.1",
     "@vitest/eslint-plugin": "^1.1.44",
-    "autoprefixer": "^10.3.7",
     "axe-core": "^4.0.0",
     "babel-plugin-istanbul": "^7.0.0",
     "babel-plugin-mockable-imports": "^2.0.1",
@@ -47,10 +47,9 @@
     "prettier": "^3.0.0",
     "rollup": "^4.0.2",
     "rollup-plugin-string": "^3.0.0",
-    "sass": "^1.43.2",
     "sinon": "^21.0.0",
     "svgo": "^4.0.0",
-    "tailwindcss": "3.4.17",
+    "tailwindcss": "^4.1.13",
     "typescript": "^5.0.2",
     "typescript-eslint": "^8.10.0",
     "vitest": "^3.1.1",

src/components/data/test/DataTable-test.js

@@ -392,7 +392,7 @@ describe('DataTable', () => {
       assert.approximately(
         stickyHeaderHeight,
         scrollEl.scrollTop,
-        1,
+        2,
         'Scroll is adjusted to ensure selected row is visible below sticky header',
       );
     });

src/components/layout/test/Panel-test.js

@@ -71,7 +71,7 @@ describe('Panel', () => {
       assert.isTrue(loremWrapper.find('p').getDOMNode().clientHeight > 200);
       // But when in a Panel, and the Panel is within a height-constrained
       // element, the total Panel height will not exceed parent height (200px)
-      assert.equal(
+      assert.isBelow(
         wrapper.find('div[data-composite-component="Panel"]').getDOMNode()
           .clientHeight,
         200,

src/tailwind.focus-visible-ring.js

@@ -30,6 +30,8 @@ import plugin from 'tailwindcss/plugin.js';
  *
  * Ring width is this theme's `ringWidth.DEFAULT`
  */
+
+/** @type {any} */
 export const focusVisibleRing = plugin(({ addUtilities, theme }) => {
   const ringWidth = theme('ringWidth.DEFAULT');
   // Based on TW ring/shadow rules https://tailwindcss.com/docs/ring-width

src/tailwind.scroll-shadows.js

@@ -33,6 +33,8 @@ import plugin from 'tailwindcss/plugin.js';
  *   - The bottom scroll-hint shadow is always present, even if content is
  *     fully scrolled
  */
+
+/** @type {any} */
 export const scrollShadows = plugin(({ addUtilities }) => {
   // These "shadow covers" scroll with the content. They align with and
   // obscure the shadows when an element is scrolled all the way in one

src/tsconfig.json

@@ -6,7 +6,8 @@
     "lib": ["es2018", "dom"],
     "jsx": "react-jsx",
     "jsxImportSource": "preact",
-    "module": "commonjs",
+    "module": "es2022",
+    "moduleResolution": "bundler",
     "declaration": true,
     "emitDeclarationOnly": true,
     "declarationDir": "../lib",

styles/library.scss styles/library.cssstyles/library.scss renamed to styles/library.css

@@ -3,7 +3,7 @@
  */
 
 @layer components {
-  // Support some basic text styling in Library components
+  /* Support some basic text styling in Library components. */
   .styled-text {
     :where(a):not(:where([class~='unstyled-text'] *)) {
       @apply text-brand underline hover:text-brand-dark transition-colors;

styles/pattern-library.css

@@ -0,0 +1,25 @@
+/**
+ * This stylesheet provides all of the styles needed to run a standalone
+ * pattern library application, including resets, component styles, util
+ * styles and component styles.
+ */
+@import 'tailwindcss';
+
+/* Syntax highlighting style for Highlight.js. */
+@import 'highlight.js/styles/github-dark.css';
+
+@config '../tailwind.config.js';
+@import './library.css';
+
+@layer base {
+  /* For consistency with Tailwind v3. See https://tailwindcss.com/docs/upgrade-guide#default-border-color. */
+  * {
+    border-color: #dbdbdb;
+  }
+}
+
+/* For consistency with Tailwind v3. See https://tailwindcss.com/docs/upgrade-guide#default-ring-width-and-color. */
+@theme {
+  --default-ring-width: 2px;
+  --default-ring-color: #59a7e8;
+}