npm - react-email - Versions diffs - 6.9.0 → 6.9.1 - Mend

react-email 6.9.0 → 6.9.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (13) hide show

package/CHANGELOG.md CHANGED Viewed

@@ -1,5 +1,12 @@
 # react-email
+## 6.9.1
+### Patch Changes
+- ea02028: Serve static assets with URL-encoded filenames correctly in the preview server while preventing decoded paths from escaping the static directory.
+- 60c96a6: Fix `<Tailwind>` dropping `dark:` and other media-query variants with `tailwindcss@4.3.3`+, where the conditional value was inlined as the base style and the `@media` rule never reached the `<head>`
 ## 6.9.0
 ## 6.8.1

package/dist/cli/index.mjs CHANGED Viewed

@@ -6533,7 +6533,7 @@ const getTracingRootDir = async (usersProjectLocation) => {
 //#region package.json
 var package_default = {
 	name: "react-email",
-	version: "6.9.0",
+	version: "6.9.1",
 	description: "A live preview of your emails right in your browser.",
 	bin: { "email": "./dist/cli/index.mjs" },
 	type: "module",
@@ -7249,15 +7249,24 @@ const getEnvVariablesForPreviewApp = (relativePathToEmailsDirectory, previewServ
 //#endregion
 //#region src/cli/utils/preview/serve-static-file.ts
 const serveStaticFile = async (res, pathname, staticDirRelativePath) => {
-	const pathname_ = pathname.replace("/static", "./static");
-	const ext = path.parse(pathname_).ext;
-	const staticBaseDir = path.resolve(process.cwd(), staticDirRelativePath);
-	const fileAbsolutePath = path.resolve(staticBaseDir, pathname_);
-	if (!fileAbsolutePath.startsWith(staticBaseDir)) {
+	let decodedPathname;
+	try {
+		decodedPathname = decodeURIComponent(pathname);
+	} catch {
+		res.statusCode = 400;
+		res.end();
+		return;
+	}
+	const staticBaseDir = path.resolve(process.cwd(), staticDirRelativePath, "static");
+	const staticFilePath = decodedPathname.replace(/^\/static\/?/, "");
+	const fileAbsolutePath = path.resolve(staticBaseDir, staticFilePath);
+	const relativeFilePath = path.relative(staticBaseDir, fileAbsolutePath);
+	if (relativeFilePath.startsWith(`..${path.sep}`) || path.isAbsolute(relativeFilePath)) {
 		res.statusCode = 403;
 		res.end();
 		return;
 	}
+	const ext = path.extname(fileAbsolutePath);
 	try {
 		const fileHandle = await promises.open(fileAbsolutePath, "r");
 		const fileData = await promises.readFile(fileHandle);

package/dist/components/tailwind/utils/css/constants.cjs ADDED Viewed

@@ -0,0 +1,4 @@
+//#region src/components/tailwind/utils/css/constants.ts
+const NON_INLINABLE_ATRULES = new Set(["media", "supports"]);
+//#endregion
+exports.NON_INLINABLE_ATRULES = NON_INLINABLE_ATRULES;

package/dist/components/tailwind/utils/css/constants.mjs ADDED Viewed

@@ -0,0 +1,4 @@
+//#region src/components/tailwind/utils/css/constants.ts
+const NON_INLINABLE_ATRULES = new Set(["media", "supports"]);
+//#endregion
+export { NON_INLINABLE_ATRULES };

package/dist/components/tailwind/utils/css/downlevel-for-email-clients.cjs CHANGED Viewed

@@ -1,4 +1,5 @@
 require("../../../../_virtual/_rolldown/runtime.cjs");
+const require_constants = require("./constants.cjs");
 let css_tree = require("css-tree");
 //#region src/components/tailwind/utils/css/downlevel-for-email-clients.ts
 /**
@@ -43,7 +44,7 @@ function unnestMediaQueries(styleSheet) {
 			const nestedAtrules = [];
 			const remainingChildren = [];
 			rule.block.children.forEach((child) => {
-				if (child.type === "Atrule" && (child.name === "media" || child.name === "supports")) nestedAtrules.push(child);
+				if (child.type === "Atrule" && require_constants.NON_INLINABLE_ATRULES.has(child.name.toLowerCase())) nestedAtrules.push(child);
 				else remainingChildren.push(child);
 			});
 			if (nestedAtrules.length > 0) transforms.push({

package/dist/components/tailwind/utils/css/downlevel-for-email-clients.mjs CHANGED Viewed

@@ -1,3 +1,4 @@
+import { NON_INLINABLE_ATRULES } from "./constants.mjs";
 import { List, clone, walk } from "css-tree/dist/csstree.esm";
 //#region src/components/tailwind/utils/css/downlevel-for-email-clients.ts
 /**
@@ -42,7 +43,7 @@ function unnestMediaQueries(styleSheet) {
 			const nestedAtrules = [];
 			const remainingChildren = [];
 			rule.block.children.forEach((child) => {
-				if (child.type === "Atrule" && (child.name === "media" || child.name === "supports")) nestedAtrules.push(child);
+				if (child.type === "Atrule" && NON_INLINABLE_ATRULES.has(child.name.toLowerCase())) nestedAtrules.push(child);
 				else remainingChildren.push(child);
 			});
 			if (nestedAtrules.length > 0) transforms.push({

package/dist/components/tailwind/utils/css/extract-rules-per-class.cjs CHANGED Viewed

@@ -1,8 +1,38 @@
 require("../../../../_virtual/_rolldown/runtime.cjs");
+const require_constants = require("./constants.cjs");
 const require_is_rule_inlinable = require("./is-rule-inlinable.cjs");
 const require_split_mixed_rule = require("./split-mixed-rule.cjs");
 let css_tree = require("css-tree");
 //#region src/components/tailwind/utils/css/extract-rules-per-class.ts
+/**
+* Re-nest the at-rule(s) back inside the rule so the pipeline stays
+* version-agnostic across Tailwind's variant shape change.
+* See https://github.com/resend/react-email/issues/3662
+*/
+function nestAtRulesInsideRule(rule, enclosingAtRules) {
+	let children = (0, css_tree.clone)(rule).block.children;
+	for (let i = enclosingAtRules.length - 1; i >= 0; i--) {
+		const atRule = enclosingAtRules[i];
+		const wrapped = {
+			type: "Atrule",
+			name: atRule.name,
+			prelude: atRule.prelude ? (0, css_tree.clone)(atRule.prelude) : null,
+			block: {
+				type: "Block",
+				children
+			}
+		};
+		children = new css_tree.List().fromArray([wrapped]);
+	}
+	return {
+		type: "Rule",
+		prelude: (0, css_tree.clone)(rule.prelude),
+		block: {
+			type: "Block",
+			children
+		}
+	};
+}
 function extractRulesPerClass(root, classes) {
 	const classSet = new Set(classes);
 	const inlinableRules = /* @__PURE__ */ new Map();
@@ -12,28 +42,41 @@ function extractRulesPerClass(root, classes) {
 		if (existing) existing.push(rule);
 		else map.set(className, [rule]);
 	};
-	(0, css_tree.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 = [];
-			(0, css_tree.walk)(rule.prelude, {
-				visit: "ClassSelector",
-				enter(classSelector) {
-					selectorClasses.push(css_tree.string.decode(classSelector.name));
-				}
-			});
-			if (require_is_rule_inlinable.isRuleInlinable(rule)) {
-				for (const className of selectorClasses) if (classSet.has(className)) appendRule(inlinableRules, className, rule);
-			} else {
-				const { inlinablePart, nonInlinablePart } = require_split_mixed_rule.splitMixedRule(rule);
-				for (const className of selectorClasses) {
-					if (!classSet.has(className)) continue;
-					if (inlinablePart) appendRule(inlinableRules, className, inlinablePart);
-					if (nonInlinablePart) appendRule(nonInlinableRules, className, nonInlinablePart);
-				}
+	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 = [];
+		(0, css_tree.walk)(rule.prelude, {
+			visit: "ClassSelector",
+			enter(classSelector) {
+				selectorClasses.push(css_tree.string.decode(classSelector.name));
 			}
+		});
+		if (enclosingAtRules.length > 0) {
+			const nonInlinablePart = nestAtRulesInsideRule(rule, enclosingAtRules);
+			for (const className of selectorClasses) if (classSet.has(className)) appendRule(nonInlinableRules, className, nonInlinablePart);
+			return;
+		}
+		if (require_is_rule_inlinable.isRuleInlinable(rule)) {
+			for (const className of selectorClasses) if (classSet.has(className)) appendRule(inlinableRules, className, rule);
+		} else {
+			const { inlinablePart, nonInlinablePart } = require_split_mixed_rule.splitMixedRule(rule);
+			for (const className of selectorClasses) {
+				if (!classSet.has(className)) continue;
+				if (inlinablePart) appendRule(inlinableRules, className, inlinablePart);
+				if (nonInlinablePart) appendRule(nonInlinableRules, className, nonInlinablePart);
+			}
+		}
+	};
+	(0, css_tree.walk)(root, {
+		enter(node) {
+			if (node.type === "Atrule") {
+				if (require_constants.NON_INLINABLE_ATRULES.has(node.name.toLowerCase())) enclosingAtRules.push(node);
+			} else if (node.type === "Rule") handleRule(node);
+		},
+		leave(node) {
+			if (node.type === "Atrule" && require_constants.NON_INLINABLE_ATRULES.has(node.name.toLowerCase())) enclosingAtRules.pop();
 		}
 	});
 	return {

package/dist/components/tailwind/utils/css/extract-rules-per-class.mjs CHANGED Viewed

@@ -1,7 +1,37 @@
+import { NON_INLINABLE_ATRULES } from "./constants.mjs";
 import { isRuleInlinable } from "./is-rule-inlinable.mjs";
 import { splitMixedRule } from "./split-mixed-rule.mjs";
-import { string, walk } from "css-tree/dist/csstree.esm";
+import { List, clone, string, walk } from "css-tree/dist/csstree.esm";
 //#region src/components/tailwind/utils/css/extract-rules-per-class.ts
+/**
+* Re-nest the at-rule(s) back inside the rule so the pipeline stays
+* version-agnostic across Tailwind's variant shape change.
+* See https://github.com/resend/react-email/issues/3662
+*/
+function nestAtRulesInsideRule(rule, enclosingAtRules) {
+	let children = clone(rule).block.children;
+	for (let i = enclosingAtRules.length - 1; i >= 0; i--) {
+		const atRule = enclosingAtRules[i];
+		const wrapped = {
+			type: "Atrule",
+			name: atRule.name,
+			prelude: atRule.prelude ? clone(atRule.prelude) : null,
+			block: {
+				type: "Block",
+				children
+			}
+		};
+		children = new List().fromArray([wrapped]);
+	}
+	return {
+		type: "Rule",
+		prelude: clone(rule.prelude),
+		block: {
+			type: "Block",
+			children
+		}
+	};
+}
 function extractRulesPerClass(root, classes) {
 	const classSet = new Set(classes);
 	const inlinableRules = /* @__PURE__ */ new Map();
@@ -11,28 +41,41 @@ function extractRulesPerClass(root, classes) {
 		if (existing) existing.push(rule);
 		else 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));
-				}
-			});
-			if (isRuleInlinable(rule)) {
-				for (const className of selectorClasses) if (classSet.has(className)) appendRule(inlinableRules, className, rule);
-			} else {
-				const { inlinablePart, nonInlinablePart } = splitMixedRule(rule);
-				for (const className of selectorClasses) {
-					if (!classSet.has(className)) continue;
-					if (inlinablePart) appendRule(inlinableRules, className, inlinablePart);
-					if (nonInlinablePart) appendRule(nonInlinableRules, className, nonInlinablePart);
-				}
+	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 = [];
+		walk(rule.prelude, {
+			visit: "ClassSelector",
+			enter(classSelector) {
+				selectorClasses.push(string.decode(classSelector.name));
 			}
+		});
+		if (enclosingAtRules.length > 0) {
+			const nonInlinablePart = nestAtRulesInsideRule(rule, enclosingAtRules);
+			for (const className of selectorClasses) if (classSet.has(className)) appendRule(nonInlinableRules, className, nonInlinablePart);
+			return;
+		}
+		if (isRuleInlinable(rule)) {
+			for (const className of selectorClasses) if (classSet.has(className)) appendRule(inlinableRules, className, rule);
+		} else {
+			const { inlinablePart, nonInlinablePart } = splitMixedRule(rule);
+			for (const className of selectorClasses) {
+				if (!classSet.has(className)) continue;
+				if (inlinablePart) appendRule(inlinableRules, className, inlinablePart);
+				if (nonInlinablePart) appendRule(nonInlinableRules, className, nonInlinablePart);
+			}
+		}
+	};
+	walk(root, {
+		enter(node) {
+			if (node.type === "Atrule") {
+				if (NON_INLINABLE_ATRULES.has(node.name.toLowerCase())) enclosingAtRules.push(node);
+			} else if (node.type === "Rule") handleRule(node);
+		},
+		leave(node) {
+			if (node.type === "Atrule" && NON_INLINABLE_ATRULES.has(node.name.toLowerCase())) enclosingAtRules.pop();
 		}
 	});
 	return {

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "react-email",
-  "version": "6.9.0",
+  "version": "6.9.1",
   "description": "A live preview of your emails right in your browser.",
   "bin": {
     "email": "./dist/cli/index.mjs"

package/src/components/tailwind/utils/css/constants.ts ADDED Viewed

@@ -0,0 +1,5 @@
+// At-rules whose contents are conditional, so their declarations can't be
+// inlined onto an element (e.g. `@media (prefers-color-scheme: dark)`). Shared
+// so the "mark non-inlinable" (extract-rules-per-class) and "hoist out of the
+// rule" (downlevel-for-email-clients) passes can't disagree on the set.
+export const NON_INLINABLE_ATRULES = new Set(['media', 'supports']);

package/src/components/tailwind/utils/css/downlevel-for-email-clients.ts CHANGED Viewed

@@ -26,6 +26,7 @@ import {
   type StyleSheet,
   walk,
 } from 'css-tree';
+import { NON_INLINABLE_ATRULES } from './constants.js';
 /**
  * css-tree 3.x introduced new AST node types for query-related at-rules that
@@ -114,7 +115,7 @@ function unnestMediaQueries(styleSheet: StyleSheet): void {
       rule.block.children.forEach((child) => {
         if (
           child.type === 'Atrule' &&
-          (child.name === 'media' || child.name === 'supports')
+          NON_INLINABLE_ATRULES.has(child.name.toLowerCase())
         ) {
           nestedAtrules.push(child);
         } else {

package/src/components/tailwind/utils/css/extract-rules-per-class.spec.ts CHANGED Viewed

@@ -1,4 +1,4 @@
-import { generate, type Rule } from 'css-tree';
+import { generate, parse, type Rule, type StyleSheet } from 'css-tree';
 import { setupTailwind } from '../tailwindcss/setup-tailwind.js';
 import { extractRulesPerClass } from './extract-rules-per-class.js';
@@ -207,6 +207,98 @@ describe('extractRulesPerClass()', async () => {
     `);
   });
+  // Wrapped shape emitted by Tailwind >=4.3.3.
+  // See https://github.com/resend/react-email/issues/3662
+  it('treats @media-wrapped rules (Tailwind >=4.3.3) as non-inlinable', () => {
+    const classes = [
+      'bg-white',
+      'text-black',
+      'dark:bg-black',
+      'dark:text-white',
+    ];
+    const stylesheet = parse(`
+@layer utilities {
+  .bg-white { background-color: rgb(255, 255, 255); }
+  .text-black { color: rgb(0, 0, 0); }
+  @media (prefers-color-scheme: dark) {
+    .dark\\:bg-black { background-color: rgb(0, 0, 0); }
+    .dark\\:text-white { color: rgb(255, 255, 255); }
+  }
+}
+`) as StyleSheet;
+    const { inlinable, nonInlinable } = extractRulesPerClass(
+      stylesheet,
+      classes,
+    );
+    expect(convertToComparable(inlinable)).toMatchInlineSnapshot(`
+      {
+        "bg-white": [
+          ".bg-white{background-color:rgb(255,255,255)}",
+        ],
+        "text-black": [
+          ".text-black{color:rgb(0,0,0)}",
+        ],
+      }
+    `);
+    expect(convertToComparable(nonInlinable)).toMatchInlineSnapshot(`
+      {
+        "dark:bg-black": [
+          ".dark\\:bg-black{@media (prefers-color-scheme:dark){background-color:rgb(0,0,0)}}",
+        ],
+        "dark:text-white": [
+          ".dark\\:text-white{@media (prefers-color-scheme:dark){color:rgb(255,255,255)}}",
+        ],
+      }
+    `);
+  });
+  // Nested shape emitted by Tailwind <=4.3.2; must classify identically.
+  // See https://github.com/resend/react-email/issues/3662
+  it('treats @media-nested rules (Tailwind <=4.3.2) as non-inlinable', () => {
+    const classes = [
+      'bg-white',
+      'text-black',
+      'dark:bg-black',
+      'dark:text-white',
+    ];
+    const stylesheet = parse(`
+@layer utilities {
+  .bg-white { background-color: rgb(255, 255, 255); }
+  .text-black { color: rgb(0, 0, 0); }
+  .dark\\:bg-black { @media (prefers-color-scheme: dark) { background-color: rgb(0, 0, 0); } }
+  .dark\\:text-white { @media (prefers-color-scheme: dark) { color: rgb(255, 255, 255); } }
+}
+`) as StyleSheet;
+    const { inlinable, nonInlinable } = extractRulesPerClass(
+      stylesheet,
+      classes,
+    );
+    expect(convertToComparable(inlinable)).toMatchInlineSnapshot(`
+      {
+        "bg-white": [
+          ".bg-white{background-color:rgb(255,255,255)}",
+        ],
+        "text-black": [
+          ".text-black{color:rgb(0,0,0)}",
+        ],
+      }
+    `);
+    expect(convertToComparable(nonInlinable)).toMatchInlineSnapshot(`
+      {
+        "dark:bg-black": [
+          ".dark\\:bg-black{@media (prefers-color-scheme:dark){background-color:rgb(0,0,0)}}",
+        ],
+        "dark:text-white": [
+          ".dark\\:text-white{@media (prefers-color-scheme:dark){color:rgb(255,255,255)}}",
+        ],
+      }
+    `);
+  });
   it('does not emit a bare nested rule for group/peer marker classes', async () => {
     const tailwind = await setupTailwind({});
     const classes = ['group', 'group-hover:underline'];

package/src/components/tailwind/utils/css/extract-rules-per-class.ts CHANGED Viewed

@@ -1,7 +1,52 @@
-import { type CssNode, type Rule, string, walk } from 'css-tree';
+import {
+  type Atrule,
+  type CssNode,
+  clone,
+  List,
+  type Rule,
+  string,
+  walk,
+} from 'css-tree';
+import { NON_INLINABLE_ATRULES } from './constants.js';
 import { isRuleInlinable } from './is-rule-inlinable.js';
 import { splitMixedRule } from './split-mixed-rule.js';
+/**
+ * Re-nest the at-rule(s) back inside the rule so the pipeline stays
+ * version-agnostic across Tailwind's variant shape change.
+ * See https://github.com/resend/react-email/issues/3662
+ */
+function nestAtRulesInsideRule(rule: Rule, enclosingAtRules: Atrule[]): Rule {
+  const ruleClone = clone(rule) as Rule;
+  let children = ruleClone.block.children;
+  // Wrap from the innermost enclosing at-rule outward.
+  for (let i = enclosingAtRules.length - 1; i >= 0; i--) {
+    const atRule = enclosingAtRules[i]!;
+    const wrapped: Atrule = {
+      type: 'Atrule',
+      name: atRule.name,
+      prelude: atRule.prelude
+        ? (clone(atRule.prelude) as Atrule['prelude'])
+        : null,
+      block: {
+        type: 'Block',
+        children,
+      },
+    };
+    children = new List<CssNode>().fromArray([wrapped]);
+  }
+  return {
+    type: 'Rule',
+    prelude: clone(rule.prelude) as Rule['prelude'],
+    block: {
+      type: 'Block',
+      children,
+    },
+  };
+}
 export function extractRulesPerClass(root: CssNode, classes: string[]) {
   const classSet = new Set(classes);
@@ -23,52 +68,83 @@ export function extractRulesPerClass(root: CssNode, classes: string[]) {
     }
   };
-  walk(root, {
-    visit: 'Rule',
-    enter(rule) {
-      // A nested rule (e.g. group/peer's `&:is(:where(.group):hover *)`) belongs
-      // to its parent utility; processing it standalone emits a bare, parentless
-      // `&` rule into the <style> block, so skip it here.
-      const firstSelector =
-        rule.prelude.type === 'SelectorList'
-          ? rule.prelude.children.first
-          : null;
-      if (
-        firstSelector?.type === 'Selector' &&
-        firstSelector.children.first?.type === 'NestingSelector'
-      ) {
-        return;
+  // A plain-looking rule inside these wrappers is still conditional and must
+  // not be inlined. See https://github.com/resend/react-email/issues/3662
+  const enclosingAtRules: Atrule[] = [];
+  const handleRule = (rule: Rule) => {
+    // A nested rule (e.g. group/peer's `&:is(:where(.group):hover *)`) belongs
+    // to its parent utility; processing it standalone emits a bare, parentless
+    // `&` rule into the <style> block, so skip it here.
+    const firstSelector =
+      rule.prelude.type === 'SelectorList' ? rule.prelude.children.first : null;
+    if (
+      firstSelector?.type === 'Selector' &&
+      firstSelector.children.first?.type === 'NestingSelector'
+    ) {
+      return;
+    }
+    // Only the prelude names the class that owns the rule; classes referenced
+    // inside the block (e.g. `.group` in `:where(.group)`) must not key it.
+    const selectorClasses: string[] = [];
+    walk(rule.prelude, {
+      visit: 'ClassSelector',
+      enter(classSelector) {
+        selectorClasses.push(string.decode(classSelector.name));
+      },
+    });
+    if (enclosingAtRules.length > 0) {
+      const nonInlinablePart = nestAtRulesInsideRule(rule, enclosingAtRules);
+      for (const className of selectorClasses) {
+        if (classSet.has(className)) {
+          appendRule(nonInlinableRules, className, nonInlinablePart);
+        }
       }
+      return;
+    }
-      // Only the prelude names the class that owns the rule; classes referenced
-      // inside the block (e.g. `.group` in `:where(.group)`) must not key it.
-      const selectorClasses: string[] = [];
-      walk(rule.prelude, {
-        visit: 'ClassSelector',
-        enter(classSelector) {
-          selectorClasses.push(string.decode(classSelector.name));
-        },
-      });
-      if (isRuleInlinable(rule)) {
-        for (const className of selectorClasses) {
-          if (classSet.has(className)) {
-            appendRule(inlinableRules, className, rule);
-          }
+    if (isRuleInlinable(rule)) {
+      for (const className of selectorClasses) {
+        if (classSet.has(className)) {
+          appendRule(inlinableRules, className, rule);
+        }
+      }
+    } else {
+      const { inlinablePart, nonInlinablePart } = splitMixedRule(rule);
+      for (const className of selectorClasses) {
+        if (!classSet.has(className)) continue;
+        if (inlinablePart) {
+          appendRule(inlinableRules, className, inlinablePart);
         }
-      } else {
-        const { inlinablePart, nonInlinablePart } = splitMixedRule(rule);
-        for (const className of selectorClasses) {
-          if (!classSet.has(className)) continue;
-          if (inlinablePart) {
-            appendRule(inlinableRules, className, inlinablePart);
-          }
-          if (nonInlinablePart) {
-            appendRule(nonInlinableRules, className, nonInlinablePart);
-          }
+        if (nonInlinablePart) {
+          appendRule(nonInlinableRules, className, nonInlinablePart);
         }
       }
+    }
+  };
+  walk(root, {
+    enter(node) {
+      if (node.type === 'Atrule') {
+        if (NON_INLINABLE_ATRULES.has(node.name.toLowerCase())) {
+          enclosingAtRules.push(node);
+        }
+      } else if (node.type === 'Rule') {
+        handleRule(node);
+      }
+    },
+    leave(node) {
+      if (
+        node.type === 'Atrule' &&
+        NON_INLINABLE_ATRULES.has(node.name.toLowerCase())
+      ) {
+        enclosingAtRules.pop();
+      }
     },
   });
   return {
     inlinable: inlinableRules,
     nonInlinable: nonInlinableRules,