@lupinum/nuxt-email 1.0.0-beta.4 → 1.0.0-beta.5

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # Changelog
 
+## 1.0.0-beta.5
+
+### Patch Changes
+
+- [#63](https://github.com/lupinum-dev/nuxt-email/pull/63) [`8ceae4a`](https://github.com/lupinum-dev/nuxt-email/commit/8ceae4a7cf9439962e03f01ceb50bffa0b8fdd0f) Thanks [@Mat4m0](https://github.com/Mat4m0)! - Fix conditional and child utility styles with the current Tailwind compiler, and fail instead of dropping unsupported conditions.
+  
+  `ETailwind` keeps media-query, pseudo-class, child (`*:`, `**:`) and arbitrary selector variants such as `[:where(&)]:` with their conditions. Supported wrappers around a utility are `@media` and `@supports` (`@layer` is ignored). A utility inside any other at-rule now throws, for example `@container` variants (`@sm:`) or custom CSS in the `ETailwind` `utility` prop that wraps a class in `@scope` or `@container`. It throws `Unable to render Tailwind CSS: @<name> rules are not supported.` Before, the condition was dropped silently and the style applied everywhere.
+  
+  Migration: remove `@container` variants (`@sm:`, `@md:` and so on) from email templates, and move custom CSS in the `ETailwind` `utility` prop out of `@container`, `@scope` and other unsupported at-rules, or rewrite the condition with `@media` or `@supports`.
+
 ## v1.0.0-beta.4
 
 [compare changes](https://github.com/lupinum-dev/nuxt-email/compare/v1.0.0-beta.3...v1.0.0-beta.4)

package/README.md

@@ -20,12 +20,12 @@
   <a href="https://www.npmjs.com/package/@lupinum/nuxt-email"><img src="https://img.shields.io/npm/v/@lupinum/nuxt-email?color=00DC82" alt="npm version"></a>
   <a href="https://github.com/lupinum-dev/nuxt-email/actions/workflows/ci.yml"><img src="https://github.com/lupinum-dev/nuxt-email/actions/workflows/ci.yml/badge.svg" alt="CI status"></a>
   <a href="LICENSE"><img src="https://img.shields.io/badge/license-MIT-00DC82" alt="MIT license"></a>
-  <a href="https://discord.gg/RPH6SeA36N"><img src="https://img.shields.io/badge/Discord-18181B?logo=discord" alt="Discord"></a>
+  <a href="https://discord.lupinum.com"><img src="https://img.shields.io/badge/Discord-18181B?logo=discord" alt="Discord"></a>
   <a href="https://deepwiki.com/lupinum-dev/nuxt-email"><img src="https://deepwiki.com/badge.svg" alt="Ask DeepWiki"></a>
 </p>
 
 > [!WARNING]
-> [`1.0.0-beta.3`](https://www.npmjs.com/package/@lupinum/nuxt-email/v/1.0.0-beta.3) is published on npm's `next` tag. The [three-client beta smoke test](https://github.com/lupinum-dev/nuxt-email/blob/main/docs/release/client-qa-checklist.md#100-beta1-smoke-test) passed against beta.1; the full eight-client checklist and an external transactional beta still block stable `1.0.0`. The unscoped `nuxt-email` package on npm is unrelated to this project.
+> The 1.0.0 beta is published on npm's [`next` tag](https://www.npmjs.com/package/@lupinum/nuxt-email?activeTab=versions). The [three-client beta smoke test](https://github.com/lupinum-dev/nuxt-email/blob/main/docs/release/client-qa-checklist.md#100-beta1-smoke-test) passed against beta.1; the full eight-client checklist and an external transactional beta still block stable `1.0.0`. The unscoped `nuxt-email` package on npm is unrelated to this project.
 
 ## Why use Nuxt Email?
 
@@ -61,34 +61,6 @@ export default defineNuxtConfig({
 })
 ```
 
-<!-- BEGIN:consumer-onboarding -->
-
-### Use a coding agent
-
-A coding agent is a development tool that can inspect and change your project.
-After installation, copy this prompt into your coding agent:
-
-```text
-Add Nuxt Email to this Nuxt application and render one transactional email from
-a Vue template. Read the project's existing instructions first. Resolve
-@lupinum/nuxt-email/agent-docs from this application's directory and read its
-starting pages. Use the installed version's examples and public types. Preserve
-existing routes, security boundaries, conventions, and AGENTS.md instructions.
-Add or update one short Nuxt Email pointer in AGENTS.md if the project allows
-it; do not duplicate the documentation. If the file is absent, create only that
-pointer. Report missing guidance. Verify the server render, HTML and plain-text
-output, and one invalid request. Keep delivery in application-owned code.
-```
-
-If the installed package has no `agent-docs` export, read its packaged README,
-types, and `CONFORMANCE.md`. Use documentation from the matching source tag when
-more detail is needed. Installing or updating the package does not edit project
-instructions. The pointer resolves the installed package, so upgrades and
-rollbacks select the matching documentation without copying it into your
-application.
-
-<!-- END:consumer-onboarding -->
-
 ## Quick start
 
 Create `app/emails/welcome.vue`:
@@ -141,20 +113,52 @@ export default defineEventHandler(async () => {
 
 The template name and props are generated from the Vue file. Invalid names and props fail during type checking. Use a sibling fixture to inspect it in `/__email`, then [pass the rendered result to your provider](https://nuxt-email.lupinum.com/docs/guides/sending-email).
 
-## Discord
+Questions? Ask in the [Lupinum OSS Discord](https://discord.lupinum.com).
 
-Join the Lupinum OSS community to discuss Nuxt Email, ask questions, and share
-what you build.
+## Agent setup
 
-<p align="center">
-  <a href="https://discord.gg/RPH6SeA36N">
-    <picture>
-      <source media="(prefers-color-scheme: dark)" srcset="docs/public/discord-dark.svg">
-      <source media="(prefers-color-scheme: light)" srcset="docs/public/discord-light.svg">
-      <img src="docs/public/discord-light.svg" width="500" alt="Join the Lupinum OSS Discord">
-    </picture>
-  </a>
-</p>
+`@lupinum/nuxt-email` ships its documentation inside the package for coding
+agents such as Claude Code, Codex and Cursor. The pages match the installed
+version, so an agent does not follow the website for a different version.
+
+To set it up, give your coding agent this task:
+
+```text
+Set up @lupinum/nuxt-email for coding agents as described under "Agent setup" in its README.
+```
+
+### Steps for the agent
+
+1. Find `node_modules/@lupinum/nuxt-email/dist/agent/AGENTS.md`. Look in the
+   directory of the project that depends on `@lupinum/nuxt-email` first, then
+   in its parent directories up to the repository root (workspaces can hoist
+   packages). Read it; it lists the documentation pages.
+2. Add the section below to the project's agent instructions: `AGENTS.md`, or
+   `CLAUDE.md` if the project has only that file. If it has neither, create
+   `AGENTS.md`. Write the path relative to the repository root, through
+   `node_modules/@lupinum/nuxt-email` (for example
+   `apps/web/node_modules/@lupinum/nuxt-email/...` in a workspace). Never write
+   a resolved path such as `node_modules/.pnpm/...`: it contains the version and
+   breaks after an upgrade. If a section for `@lupinum/nuxt-email` already
+   exists, leave it as it is.
+
+   Use the path you found in place of the sample path:
+
+   ```md
+   ## @lupinum/nuxt-email
+
+   Before you change code that uses @lupinum/nuxt-email, read
+   `node_modules/@lupinum/nuxt-email/dist/agent/AGENTS.md` and the pages it
+   lists. They document the installed version. Prefer them over what you
+   remember about this package and over the website.
+   ```
+
+3. Do not copy the documentation into the project and do not install a skill.
+   The section points into the installed package, so it stays correct after
+   every upgrade or downgrade.
+
+If the file does not exist, the installed version has no packaged
+documentation. Read the package README and its TypeScript types instead.
 
 ## Email components
 
@@ -224,7 +228,7 @@ See the [changelog](CHANGELOG.md) for released changes.
 
 ## Contributing and development
 
-Read the [contribution guide](https://github.com/lupinum-dev/nuxt-email/blob/main/CONTRIBUTING.md) before you open a pull request. Run the normal handoff gate before you submit a change:
+Read the [contribution guide](https://github.com/lupinum-dev/nuxt-email/blob/main/.github/CONTRIBUTING.md) before you open a pull request. Run the normal handoff gate before you submit a change:
 
 ```bash
 corepack enable
@@ -232,11 +236,11 @@ pnpm install --frozen-lockfile
 pnpm verify
 ```
 
-Maintainers use the protected workflow in [MAINTAINING.md](https://github.com/lupinum-dev/nuxt-email/blob/main/MAINTAINING.md) for releases.
+Maintainers use the protected workflow in [Lupinum OSS](https://oss.lupinum.com/docs/releasing) for releases.
 
 ## Support and security
 
-Open a [GitHub issue](https://github.com/lupinum-dev/nuxt-email/issues) for bugs and focused proposals. Join the [Lupinum OSS Discord](https://discord.gg/RPH6SeA36N) for project discussion.
+Open a [GitHub issue](https://github.com/lupinum-dev/nuxt-email/issues) for bugs and focused proposals. Join the [Lupinum OSS Discord](https://discord.lupinum.com) for project discussion.
 
 Use the [private security process](https://github.com/lupinum-dev/nuxt-email/security/policy) to report a vulnerability. Do not report a vulnerability in a public issue.
 

package/THIRD_PARTY_NOTICES

@@ -2,12 +2,12 @@ React Email
 ===========
 
 Nuxt Email contains Vue adaptations of selected compatibility algorithms and
-markup strategies from React Email 6.9.0, pinned at source commit
-6eb428924c4c2774228a07cbec1977ad8898f143. The adapted surface covers button
+markup strategies from React Email 6.11.0, pinned at source commit
+15419ff1f4cd0e32ed2c15a4a9182cc47a200a60. The adapted surface covers button
 padding and Outlook spacing, text margin expansion, table padding placement,
 hidden preview text, the font-face declaration, inline code rendering, Markdown
 rendering, and Tailwind class inlining. The pinned upstream source is available at
-https://github.com/resend/react-email/tree/6eb428924c4c2774228a07cbec1977ad8898f143.
+https://github.com/resend/react-email/tree/15419ff1f4cd0e32ed2c15a4a9182cc47a200a60.
 
 Copyright 2024 Plus Five Five, Inc
 
@@ -44,7 +44,7 @@ whose text is reproduced once below.
 - css-tree 3.2.1 — CSS parsing and generation in the Tailwind inlining engine.
   Copyright (C) 2016-2026 by Roman Dvornov
 
-- tailwindcss 4.1.18 — utility compilation used by ETailwind; its stylesheet CSS
+- tailwindcss 4.3.3 — utility compilation used by ETailwind; its stylesheet CSS
   is also vendored byte-for-byte into the engine.
   Copyright (c) Tailwind Labs, Inc.
 

package/dist/agent/AGENTS.md

@@ -1,47 +1,43 @@
-# @lupinum/nuxt-email
+# @lupinum/nuxt-email 1.0.0-beta.5 documentation
 
-Documentation for installed version 1.0.0-beta.4.
+These pages document the installed version 1.0.0-beta.5. Prefer them over what you
+remember about this package and over the website, which may describe another version.
+Read the pages that match the task before you write code. If they do not answer a question,
+the user can ask in the Lupinum OSS Discord: https://discord.lupinum.com
 
-Read the relevant local pages before changing this package’s integration.
-Project instructions govern architecture, style and permissions.
+> Typed transactional email for Nuxt, with email-safe Tailwind v4.
 
-## Start here
+## When to use
 
-- [Installation](./pages/docs/getting-started/installation.md) — /docs/getting-started/installation
-- [Module behavior](./pages/docs/reference/module.md) — /docs/reference/module
+Use this site to author and render transactional email with Nuxt Email.
 
-## Find a page
+## Documentation
 
-The index below maps public documentation routes to this installed snapshot.
-For links to this documentation site, use the matching local page in manifest.json
-instead of fetching a possibly different website version. Preserve URL fragments.
-External dependencies have their own versioned contracts. Report missing guidance.
-
-- [Overview](./pages/docs/components.md) — /docs/components
-- [Code](./pages/docs/components/code.md) — /docs/components/code
-- [Content](./pages/docs/components/content.md) — /docs/components/content
-- [Layout](./pages/docs/components/layout.md) — /docs/components/layout
-- [Markdown](./pages/docs/components/markdown.md) — /docs/components/markdown
-- [Structure](./pages/docs/components/structure.md) — /docs/components/structure
-- [Tailwind](./pages/docs/components/tailwind.md) — /docs/components/tailwind
-- [Introduction](./pages/docs/getting-started.md) — /docs/getting-started
-- [Choose the right tool](./pages/docs/getting-started/choose-a-tool.md) — /docs/getting-started/choose-a-tool
-- [Your first email](./pages/docs/getting-started/first-email.md) — /docs/getting-started/first-email
-- [Installation](./pages/docs/getting-started/installation.md) — /docs/getting-started/installation
-- [Render from Nitro](./pages/docs/getting-started/render-from-nitro.md) — /docs/getting-started/render-from-nitro
-- [Guides](./pages/docs/guides.md) — /docs/guides
-- [Client compatibility and proofs](./pages/docs/guides/client-compatibility.md) — /docs/guides/client-compatibility
-- [Plain text](./pages/docs/guides/plain-text.md) — /docs/guides/plain-text
-- [Preview workflow](./pages/docs/guides/preview-workflow.md) — /docs/guides/preview-workflow
-- [Sending email](./pages/docs/guides/sending-email.md) — /docs/guides/sending-email
-- [Render outside Nitro](./pages/docs/guides/standalone-rendering.md) — /docs/guides/standalone-rendering
-- [Subject lines](./pages/docs/guides/subject-lines.md) — /docs/guides/subject-lines
-- [Using Tailwind](./pages/docs/guides/tailwind.md) — /docs/guides/tailwind
-- [Testing your emails](./pages/docs/guides/testing-your-emails.md) — /docs/guides/testing-your-emails
-- [Reference](./pages/docs/reference.md) — /docs/reference
-- [Conformance and divergences](./pages/docs/reference/conformance.md) — /docs/reference/conformance
-- [defineEmail](./pages/docs/reference/define-email.md) — /docs/reference/define-email
-- [Error types](./pages/docs/reference/errors.md) — /docs/reference/errors
-- [Migration from React Email](./pages/docs/reference/migration.md) — /docs/reference/migration
-- [Module behavior](./pages/docs/reference/module.md) — /docs/reference/module
-- [renderEmail](./pages/docs/reference/render-email.md) — /docs/reference/render-email
+- [Introduction](./pages/docs/getting-started.md): What Nuxt Email is, why its output is trustworthy, and how it is compared with a fixed React Email version.
+- [Choose the right tool](./pages/docs/getting-started/choose-a-tool.md): Compare Nuxt Email with the closest Vue, Nuxt, standalone, and React email workflows.
+- [Installation](./pages/docs/getting-started/installation.md): Add @lupinum/nuxt-email to a supported Nuxt application and optionally configure syntax highlighting.
+- [Your first email](./pages/docs/getting-started/first-email.md): Write a Vue email template under app/emails/, add a typed preview fixture, and understand template naming.
+- [Render from Nitro](./pages/docs/getting-started/render-from-nitro.md): Call the typed, server-only renderEmail auto-import and pass its html and text to your provider SDK.
+- [Overview](./pages/docs/components.md): The built-in E-prefixed components, optional ECodeBlock, and their shared safety rules.
+- [Structure](./pages/docs/components/structure.md): EHtml, EHead, EBody, EPreview, and EFont — the document shell, head, body, inbox preview text, and font declarations.
+- [Layout](./pages/docs/components/layout.md): EContainer, ESection, ERow, and EColumn — presentation-table primitives for stable email layouts.
+- [Content](./pages/docs/components/content.md): EText, EHeading, ELink, EImg, EHr, and EButton for visible email content.
+- [Code](./pages/docs/components/code.md): Compatibility-safe inline code and opt-in syntax-highlighted blocks.
+- [Markdown](./pages/docs/components/markdown.md): EMarkdown renders Markdown to email-safe HTML with inline styles and per-element overrides.
+- [Tailwind](./pages/docs/components/tailwind.md): ETailwind compiles Tailwind v4 utilities into email-safe inline styles and head rules during server rendering.
+- [Guides](./pages/docs/guides.md): Task-focused guides for authoring, previewing, testing, and sending transactional email.
+- [Preview workflow](./pages/docs/guides/preview-workflow.md): Use the development-only /__email preview, add fixtures, and monitor exact rendered size without treating it as a client guarantee.
+- [Sending email](./pages/docs/guides/sending-email.md): Hand Nuxt Email output to a provider SDK or a local Mailpit SMTP server.
+- [Using Tailwind](./pages/docs/guides/tailwind.md): How ETailwind inlines utilities, how nested-component classes are reached, and the exact documented limitations.
+- [Subject lines](./pages/docs/guides/subject-lines.md): Compute a subject line from the same typed props with defineEmail, and read it back from the render result.
+- [Plain text](./pages/docs/guides/plain-text.md): How the plain-text fallback is produced from the rendered HTML, what it excludes, and how to control table output.
+- [Testing your emails](./pages/docs/guides/testing-your-emails.md): Render templates and assert on their output in unit tests with the @lupinum/nuxt-email/testing utilities.
+- [Client compatibility and proofs](./pages/docs/guides/client-compatibility.md): What is automatically proven, and the manual email-client QA checklist that closes the remaining gap.
+- [Render outside Nitro](./pages/docs/guides/standalone-rendering.md): Compile the same Vue templates for a Node backend without booting Nuxt.
+- [Reference](./pages/docs/reference.md): The precise contracts — renderEmail, module behavior, error types, conformance, and migration.
+- [renderEmail](./pages/docs/reference/render-email.md): The one public render API — its signature, deterministic result shape, plain-text contract, and security boundary.
+- [defineEmail](./pages/docs/reference/define-email.md): Declare a template subject or authored plain-text alternative from script setup.
+- [Module behavior](./pages/docs/reference/module.md): What the module registers, its fixed conventions, and the opt-in codeBlock configuration.
+- [Error types](./pages/docs/reference/errors.md): Public error classes, their stable fields, common symptoms, and recovery steps.
+- [Conformance and divergences](./pages/docs/reference/conformance.md): How compatibility is measured against React Email, the current pass numbers, and every intentional divergence.
+- [Migration from React Email](./pages/docs/reference/migration.md): Translate JSX templates, props, and rendering calls to Nuxt Email's Vue single-file components and generated server API.

package/dist/agent/pages/docs/getting-started/installation.md

@@ -33,29 +33,17 @@ export default defineNuxtConfig({
 })
 ```
 
-### Use a coding agent
+### Set up a coding agent
 
-A coding agent is a development tool that can inspect and change your project.
-After installation, copy this prompt into your coding agent:
+The package ships its documentation for coding agents such as Claude Code,
+Codex and Cursor, so they read pages that match the installed version. Give
+your coding agent this task:
 
 ```text
-Add Nuxt Email to this Nuxt application and render one transactional email from
-a Vue template. Read the project's existing instructions first. Resolve
-@lupinum/nuxt-email/agent-docs from this application's directory and read its
-starting pages. Use the installed version's examples and public types. Preserve
-existing routes, security boundaries, conventions, and AGENTS.md instructions.
-Add or update one short Nuxt Email pointer in AGENTS.md if the project allows
-it; do not duplicate the documentation. If the file is absent, create only that
-pointer. Report missing guidance. Verify the server render, HTML and plain-text
-output, and one invalid request. Keep delivery in application-owned code.
+Set up @lupinum/nuxt-email for coding agents as described under "Agent setup" in its README.
 ```
 
-If the installed package has no `agent-docs` export, read its packaged README,
-types, and `CONFORMANCE.md`. Use documentation from the matching source tag when
-more detail is needed. Installing or updating the package does not edit project
-instructions. The pointer resolves the installed package, so upgrades and
-rollbacks select the matching documentation without copying it into your
-application.
+The steps are in the [README's Agent setup section](https://github.com/lupinum-dev/nuxt-email#agent-setup).
 
 ## 2. Confirm the TypeScript entry point
 

package/dist/agent/pages/docs/getting-started.md

@@ -27,7 +27,7 @@ Nuxt Email is one focused option among Vue, Nuxt, standalone, and React email to
 
 Email HTML is unforgiving: clients strip `<style>`, break flexbox, and mangle padding. Nuxt Email combines conservative primitives with reproducible checks while keeping live-client claims separate.
 
-- **Checked against React Email.** Covered behaviors are compared, case by case, with fixed versions of [React Email](https://react.email) (`6.9.0`) and `@react-email/render` (`2.1.0`). The [conformance report](/raw/docs/reference/conformance.md) records the tested scope and intentional differences. It is regression evidence, not a universal inbox-rendering guarantee.
+- **Checked against React Email.** Covered behaviors are compared, case by case, with fixed versions of [React Email](https://react.email) (`6.11.0`) and `@react-email/render` (`2.1.0`). The [conformance report](/raw/docs/reference/conformance.md) records the tested scope and intentional differences. It is regression evidence, not a universal inbox-rendering guarantee.
 - **Tailwind v4 for email.** `ETailwind` inlines compatible utilities, preserves author-style precedence, and moves media-query and pseudo-class rules into the head.
 - **Deterministic.** Two renders of the same template and props return byte-identical HTML and a matching plain-text fallback. No IDs, timestamps, hydration payload, or mutable renderer state.
 - **Server-only and typed.** `renderEmail('welcome', props)` is generated from your `app/emails/` folder. Unknown template names, missing props, and wrong types fail at compile time.
@@ -47,7 +47,7 @@ Email HTML is unforgiving: clients strip `<style>`, break flexbox, and mangle pa
 
 ## Release status
 
-[`1.0.0-beta.2`](https://www.npmjs.com/package/@lupinum/nuxt-email/v/1.0.0-beta.2) is published on npm's `next` tag. The [three-client beta smoke test](https://github.com/lupinum-dev/nuxt-email/blob/main/docs/release/client-qa-checklist.md#100-beta1-smoke-test) passed against beta.1. The full eight-client checklist and an external transactional beta still block stable `1.0.0`.
+The 1.0.0 beta is published on npm's [`next` tag](https://www.npmjs.com/package/@lupinum/nuxt-email?activeTab=versions). The [three-client beta smoke test](https://github.com/lupinum-dev/nuxt-email/blob/main/docs/release/client-qa-checklist.md#100-beta1-smoke-test) passed against beta.1. The full eight-client checklist and an external transactional beta still block stable `1.0.0`.
 
 The package identity is `@lupinum/nuxt-email`; the unscoped npm package is unrelated.
 
@@ -60,3 +60,5 @@ The package identity is `@lupinum/nuxt-email`; the unscoped npm package is unrel
 Nuxt `4.5.1` and Vue `3.5.40` are the compatibility baseline. Release consumers verify that minimum and the current compatible Nuxt 4 and Vue 3 versions without a dependency shim. CI covers Node 22, 24, and 26. Other Node majors, Nuxt 3, Nuxt 5, edge runtimes, and client-side email rendering are outside the support contract.
 
 The Node range follows the supported even-numbered Node release lines that can run the Nuxt baseline. Keeping that range narrow lets the renderer use the platform Nuxt already requires and avoids compatibility code for old or short-lived Node releases.
+
+Questions? Ask in the [Lupinum OSS Discord](https://discord.lupinum.com).

package/dist/agent/pages/docs/reference/conformance.md

@@ -17,7 +17,7 @@ Compatibility is reported **per behavior**. No global "React Email compatible" p
 
 ## How it is measured
 
-The current Nuxt Email candidate is compared against **React Email `6.9.0`** and **`@react-email/render` `2.1.0`**. Each behavior is a case that renders the same input through both renderers and asserts one of these classifications:
+The current Nuxt Email candidate is compared against **React Email `6.11.0`** and **`@react-email/render` `2.1.0`**. Each behavior is a case that renders the same input through both renderers and asserts one of these classifications:
 
 - **exact** — byte-identical output.
 - **normalized** — identical after the internal conformance helper canonicalizes insignificant serialization differences such as attribute order, trailing `style` semicolons, class whitespace, and self-closing form.

package/dist/module.json

@@ -4,7 +4,7 @@
   "compatibility": {
     "nuxt": ">=4.5.1 <5"
   },
-  "version": "1.0.0-beta.4",
+  "version": "1.0.0-beta.5",
   "builder": {
     "@nuxt/module-builder": "1.0.2",
     "unbuild": "unknown"

package/dist/runtime/components/EButton.d.ts

@@ -5,7 +5,7 @@ export type EButtonProps = Omit<SafeEmailAttributes<AnchorHTMLAttributes>, 'href
 };
 /**
  * Outlook spacing behavior adapted from React Email's MIT-licensed Button.
- * Copyright 2024 Plus Five Five, Inc; pinned source commit 6eb428924c4c2774228a07cbec1977ad8898f143.
+ * Copyright 2024 Plus Five Five, Inc; pinned source commit 15419ff1f4cd0e32ed2c15a4a9182cc47a200a60.
  */
 export declare function computeMsoFontWidthAndSpaceCount(expectedWidth: number): readonly [number, number];
 export declare const EButton: DefineComponent<EButtonProps>;

package/dist/runtime/tailwind/engine/css/constants.d.ts

@@ -0,0 +1 @@
+export declare const NON_INLINABLE_ATRULES: Set<string>;

package/dist/runtime/tailwind/engine/css/constants.js

@@ -0,0 +1 @@
+export const NON_INLINABLE_ATRULES = /* @__PURE__ */ new Set(["media", "supports"]);

package/dist/runtime/tailwind/engine/css/downlevel-for-email-clients.js

@@ -5,6 +5,7 @@ import {
   parse,
   walk
 } from "../../css-tree.js";
+import { NON_INLINABLE_ATRULES } from "./constants.js";
 export function downlevelForEmailClients(styleSheet) {
   styleSheet.children = flattenStyleSheet(styleSheet);
   downlevelRangeMediaQueries(styleSheet);
@@ -162,7 +163,7 @@ function assertNoNestingSelector(selectors) {
   });
 }
 function isConditionalAtrule(atrule) {
-  return atrule.name === "media" || atrule.name === "supports";
+  return NON_INLINABLE_ATRULES.has(atrule.name.toLowerCase());
 }
 function clonePrelude(prelude) {
   return prelude ? clone(prelude) : null;

package/dist/runtime/tailwind/engine/css/extract-rules-per-class.js

@@ -1,6 +1,12 @@
-import { string, walk } from "../../css-tree.js";
+import { clone, List, string, walk } from "../../css-tree.js";
+import { NON_INLINABLE_ATRULES } from "./constants.js";
 import { isRuleInlinable } from "./is-rule-inlinable.js";
 import { splitMixedRule } from "./split-mixed-rule.js";
+const OWNER_FUNCTIONS = /* @__PURE__ */ new Set(["is", "where", "matches"]);
+const SELECTOR_FUNCTIONS = /* @__PURE__ */ new Set([...OWNER_FUNCTIONS, "not", "has"]);
+function isOwnArbitraryVariant(className, functions) {
+  return className.includes("&") && functions.filter((name) => !OWNER_FUNCTIONS.has(name)).every((name) => className.toLowerCase().includes(`:${name}(`));
+}
 export function extractRulesPerClass(root, classes) {
   const classSet = new Set(classes);
   const inlinableRules = /* @__PURE__ */ new Map();
@@ -14,43 +20,95 @@ export function extractRulesPerClass(root, classes) {
       map.set(className, [rule]);
     }
   };
-  walk(root, {
-    visit: "Rule",
-    enter(rule) {
-      const firstSelector = rule.prelude.type === "SelectorList" ? rule.prelude.children.first : null;
-      if (firstSelector?.type === "Selector" && firstSelector.children.first?.type === "NestingSelector") {
-        return;
-      }
-      const selectorClasses = [];
-      walk(rule.prelude, {
-        visit: "ClassSelector",
-        enter(classSelector) {
-          selectorClasses.push(string.decode(classSelector.name));
-        }
+  const enclosingAtRules = [];
+  const handleRule = (rule) => {
+    const firstSelector = rule.prelude.type === "SelectorList" ? rule.prelude.children.first : null;
+    if (firstSelector?.type === "Selector" && firstSelector.children.first?.type === "NestingSelector") {
+      return;
+    }
+    const selectorClasses = [];
+    if (rule.prelude.type === "SelectorList") {
+      rule.prelude.children.forEach((selector) => {
+        const owners = [];
+        const collect = (insideFunctions) => {
+          const functions = [];
+          walk(selector, {
+            enter(node) {
+              if (node.type === "PseudoElementSelector") return walk.skip;
+              if (node.type === "PseudoClassSelector") {
+                const name = node.name.toLowerCase();
+                if (!insideFunctions || !SELECTOR_FUNCTIONS.has(name)) return walk.skip;
+                functions.push(name);
+              }
+              if (node.type === "ClassSelector") {
+                const className = string.decode(node.name);
+                if (functions.every((name) => OWNER_FUNCTIONS.has(name)) || isOwnArbitraryVariant(className, functions)) owners.push(className);
+              }
+            },
+            leave(node) {
+              if (node.type === "PseudoClassSelector" && insideFunctions && SELECTOR_FUNCTIONS.has(node.name.toLowerCase())) functions.pop();
+            }
+          });
+        };
+        collect(false);
+        if (!owners.length) collect(true);
+        selectorClasses.push(...owners);
       });
-      if (isRuleInlinable(rule)) {
-        for (const className of selectorClasses) {
-          if (classSet.has(className)) {
-            appendRule(inlinableRules, className, rule);
-          }
+    }
+    if (enclosingAtRules.length > 0) {
+      const unsupported = enclosingAtRules.find((atRule) => !NON_INLINABLE_ATRULES.has(atRule.name.toLowerCase()));
+      if (unsupported && selectorClasses.some((className) => classSet.has(className))) {
+        throw new TypeError(`Unable to render Tailwind CSS: @${unsupported.name} rules are not supported.`);
+      }
+      const conditional = clone(rule);
+      for (const atRule of [...enclosingAtRules].reverse()) {
+        conditional.block.children = new List().fromArray([{
+          type: "Atrule",
+          name: atRule.name,
+          prelude: atRule.prelude ? clone(atRule.prelude) : null,
+          block: { type: "Block", children: conditional.block.children }
+        }]);
+      }
+      let includesRequestedClass = false;
+      for (const className of selectorClasses) {
+        if (!classSet.has(className)) continue;
+        includesRequestedClass = true;
+        appendRule(nonInlinableRules, className, conditional);
+      }
+      if (includesRequestedClass) orderedNonInlinableRules.push(conditional);
+      return;
+    }
+    if (isRuleInlinable(rule)) {
+      for (const className of selectorClasses) {
+        if (classSet.has(className)) {
+          appendRule(inlinableRules, className, rule);
         }
-      } else {
-        const { inlinablePart, nonInlinablePart } = splitMixedRule(rule);
-        let includesRequestedClass = false;
-        for (const className of selectorClasses) {
-          if (!classSet.has(className)) continue;
-          includesRequestedClass = true;
-          if (inlinablePart) {
-            appendRule(inlinableRules, className, inlinablePart);
-          }
-          if (nonInlinablePart) {
-            appendRule(nonInlinableRules, className, nonInlinablePart);
-          }
+      }
+    } else {
+      const { inlinablePart, nonInlinablePart } = splitMixedRule(rule);
+      let includesRequestedClass = false;
+      for (const className of selectorClasses) {
+        if (!classSet.has(className)) continue;
+        includesRequestedClass = true;
+        if (inlinablePart) {
+          appendRule(inlinableRules, className, inlinablePart);
         }
-        if (includesRequestedClass && nonInlinablePart) {
-          orderedNonInlinableRules.push(nonInlinablePart);
+        if (nonInlinablePart) {
+          appendRule(nonInlinableRules, className, nonInlinablePart);
         }
       }
+      if (includesRequestedClass && nonInlinablePart) {
+        orderedNonInlinableRules.push(nonInlinablePart);
+      }
+    }
+  };
+  walk(root, {
+    enter(node) {
+      if (node.type === "Atrule" && node.name.toLowerCase() !== "layer") enclosingAtRules.push(node);
+      else if (node.type === "Rule") handleRule(node);
+    },
+    leave(node) {
+      if (node.type === "Atrule" && node.name.toLowerCase() !== "layer") enclosingAtRules.pop();
     }
   });
   return {

package/dist/runtime/tailwind/engine/css/sanitize-non-inlinable-rules.js

@@ -1,12 +1,14 @@
 import { string, walk } from "../../css-tree.js";
 import { sanitizeClassName } from "../compatibility/sanitize-class-name.js";
 import { isRuleInlinable } from "./is-rule-inlinable.js";
+import { NON_INLINABLE_ATRULES } from "./constants.js";
 import { stripEmptyTailwindVars } from "./strip-empty-tailwind-vars.js";
 export function sanitizeNonInlinableRules(node) {
+  let conditionalDepth = 0;
   walk(node, {
-    visit: "Rule",
     enter(rule) {
-      if (!isRuleInlinable(rule)) {
+      if (rule.type === "Atrule" && NON_INLINABLE_ATRULES.has(rule.name.toLowerCase())) conditionalDepth++;
+      if (rule.type === "Rule" && (conditionalDepth > 0 || !isRuleInlinable(rule))) {
         walk(rule.prelude, (node2) => {
           if (node2.type === "ClassSelector") {
             const unescapedClassName = string.decode(node2.name);
@@ -25,6 +27,9 @@ export function sanitizeNonInlinableRules(node) {
           }
         });
       }
+    },
+    leave(rule) {
+      if (rule.type === "Atrule" && NON_INLINABLE_ATRULES.has(rule.name.toLowerCase())) conditionalDepth--;
     }
   });
 }