First version of tests

Author: Adam Plesnik

package.json

@@ -4,7 +4,8 @@
   "author": "Adam Plesnik <adam@adamplesnik.com>",
   "scripts": {
     "dev-docs": "npm run --workspace=docs dev",
-    "build": "swc ./src/index.ts --out-dir ./dist"
+    "build": "swc ./src/index.ts --out-dir ./dist",
+    "test": "vitest"
   },
   "workspaces": [
     "docs"
@@ -21,10 +22,12 @@
   "devDependencies": {
     "@swc/cli": "^0.3.10",
     "@swc/core": "^1.4.11",
+    "@types/jest": "^29.5.12",
     "prettier": "^3.2.5",
     "swcify": "^1.0.1",
     "tailwindcss": "^0.0.0-insiders.3ba51d1",
-    "typescript": "^5.4.3"
+    "typescript": "^5.4.3",
+    "vitest": "^1.5.0"
   },
   "description": "A plugin for Tailwind CSS v3.4+ that provides utilities for scroll-driven animations.",
   "files": [

src/index.ts

@@ -1,7 +1,7 @@
 import plugin from 'tailwindcss/plugin'
 
 export = plugin(
-  function ({ matchUtilities, addVariant, theme }) {
+  function scrollDrivenAnimations({ matchUtilities, addVariant, theme }) {
     matchUtilities(
       {
         timeline: (value, { modifier }) => ({

tests/index.test.ts

@@ -0,0 +1,49 @@
+import { expect, test } from 'vitest'
+import { css, html, run } from './utils'
+
+test('Test', async () => {
+  let config = {
+    content: [
+      {
+        raw: html`
+          <div>
+            <div class="timeline"></div>
+            <div class="timeline-auto"></div>
+            <div class="timeline-none"></div>
+            <div class="timeline-scroll-x"></div>
+            <div class="timeline-view"></div>
+            <div class="timeline/test"></div>
+          </div>
+        `,
+      },
+    ],
+    theme: {},
+    corePlugins: { preflight: false },
+  }
+
+  let input = `
+    @tailwind utilities;
+  `
+
+  const result = await run(input, config)
+  expect(result.css).toMatch(css`
+    .timeline {
+      animation-timeline: scroll(y);
+    }
+    .timeline-auto {
+      animation-timeline: auto;
+    }
+    .timeline-none {
+      animation-timeline: none;
+    }
+    .timeline-scroll-x {
+      animation-timeline: scroll(x);
+    }
+    .timeline-view {
+      animation-timeline: view();
+    }
+    .timeline\/test {
+      animation-timeline: --test;
+    }
+  `)
+})

tests/utils.ts

@@ -0,0 +1,22 @@
+import path from 'path'
+import postcss from 'postcss'
+import tailwind, { Config } from 'tailwindcss'
+import { expect } from 'vitest'
+import scrollDrivenAnimations from '../src/index'
+
+export let css = String.raw
+export let html = String.raw
+export let javascript = String.raw
+
+export function run(input: string, config: Config, plugin = tailwind) {
+  let { currentTestName } = expect.getState()
+
+  config.plugins ??= []
+  if (!config.plugins.includes(scrollDrivenAnimations)) {
+    config.plugins.push(scrollDrivenAnimations)
+  }
+
+  return postcss(plugin(config)).process(input, {
+    from: `${path.resolve(__filename)}?test=${currentTestName}`,
+  })
+}