From 88938aeaf2ef7b64389706977c8e4edbf4968618 Mon Sep 17 00:00:00 2001
From: Cosmin Popovici <hellocosmin@gmail.com>
Date: Thu, 24 Sep 2026 17:20:57 +0300
Subject: [PATCH] fix: keep pseudo-element rules that can't be inlined

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
---
 README.md          |  4 ++--
 lib/inline.js      |  5 ++++-
 test/juice.test.js | 27 +++++++++++++++++++++++++++
 3 files changed, 33 insertions(+), 3 deletions(-)

diff --git a/README.md b/README.md
index 3f0481e..d69357e 100644
--- a/README.md
+++ b/README.md
@@ -157,9 +157,9 @@ Note that `codeBlocks` is a dictionary which can contain many different code blo
 #### juice.ignoredPseudos
 
 Type: Array\
-Default: `['hover', 'active', 'focus', 'visited', 'link']`
+Default: `['hover', 'active', 'focus', 'visited', 'link', 'first-letter', 'first-line', 'marker', 'selection', 'placeholder']`
 
-Array of ignored pseudo-selectors such as 'hover' and 'active'.
+Array of ignored pseudo-selectors such as 'hover' and 'active'. Rules that use them can't be inlined, so they're kept in a `<style>` tag instead (see `preservePseudos`).
 
 #### juice.widthElements
 
diff --git a/lib/inline.js b/lib/inline.js
index c40534e..11ab03a 100644
--- a/lib/inline.js
+++ b/lib/inline.js
@@ -5,7 +5,10 @@ import * as numbers from './numbers.js';
 import * as variables from './variables.js';
 
 export default function makeJuiceClient(juiceClient) {
-  juiceClient.ignoredPseudos = ['hover', 'active', 'focus', 'visited', 'link'];
+  juiceClient.ignoredPseudos = [
+    'hover', 'active', 'focus', 'visited', 'link',
+    'first-letter', 'first-line', 'marker', 'selection', 'placeholder'
+  ];
   juiceClient.widthElements = ['TABLE', 'TD', 'TH', 'IMG'];
   juiceClient.heightElements = ['TABLE', 'TD', 'TH', 'IMG'];
   juiceClient.tableElements = ['TABLE', 'TH', 'TR', 'TD', 'CAPTION', 'COLGROUP', 'COL', 'THEAD', 'TBODY', 'TFOOT'];
diff --git a/test/juice.test.js b/test/juice.test.js
index b47d90b..3c33fdc 100644
--- a/test/juice.test.js
+++ b/test/juice.test.js
@@ -877,3 +877,30 @@ describe('non-string html input', function() {
     expect(juice(html)).toBe('<p style="color: red;">x</p>');
   });
 });
+
+describe('pseudo-elements that cannot be inlined', function() {
+  const html = (css) => `<style>${css}</style><h3>abc</h3>`;
+
+  it.each([
+    'h3::first-letter { color: red; }',
+    'h3:first-letter { color: red; }',
+    'h3::first-line { color: red; }',
+    'h3:first-line { color: red; }',
+    'h3::marker { color: red; }',
+    'h3::selection { color: red; }',
+    'h3::placeholder { color: red; }',
+  ])('keeps %s in a <style> tag instead of dropping it', function(css) {
+    const result = juice(html(css));
+    expect(result).toMatch(/<style>[\s\S]*color: red;[\s\S]*<\/style>/);
+    expect(result).toContain('<h3>abc</h3>');
+  });
+
+  it('drops them when preservePseudos is false, like other ignored pseudos', function() {
+    expect(juice(html('h3::first-letter { color: red; }'), { preservePseudos: false })).toBe('<h3>abc</h3>');
+  });
+
+  it('still inlines the rest of the rules', function() {
+    expect(juice(html('h3 { font-size: 20px; } h3::first-letter { color: red; }')))
+      .toBe('<style>\nh3::first-letter {\n  color: red;\n}\n</style><h3 style="font-size: 20px;">abc</h3>');
+  });
+});