fix: keep pseudo-element rules that can't be inlined

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
 

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'];

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>');
+  });
+});