diff --git a/index.js b/index.js index cc274bd..17d1624 100644 --- a/index.js +++ b/index.js @@ -163,7 +163,7 @@ export function format(css, { minify = false } = {}) { return buffer } - /** @param {import('css-tree').Selector|import('css-tree').PseudoClassSelector} node */ + /** @param {import('css-tree').Selector|import('css-tree').PseudoClassSelector|import('css-tree').PseudoElementSelector} node */ function print_simple_selector(node) { let buffer = EMPTY_STRING let children = node.children || [] @@ -183,19 +183,15 @@ export function format(css, { minify = false } = {}) { } break } + case 'PseudoClassSelector': case 'PseudoElementSelector': { - buffer += COLON + COLON - buffer += lowercase(child.name) - break - } - case 'PseudoClassSelector': { buffer += COLON // Special case for `:before` and `:after` which were used in CSS2 and are usually minified // as `:before` and `:after`, but we want to print them as `::before` and `::after` let pseudo = lowercase(child.name) - if (pseudo === 'before' || pseudo === 'after') { + if (pseudo === 'before' || pseudo === 'after' || child.type === 'PseudoElementSelector') { buffer += COLON } diff --git a/test/selectors.test.js b/test/selectors.test.js index 7cbb7f2..aa404ff 100644 --- a/test/selectors.test.js +++ b/test/selectors.test.js @@ -180,6 +180,14 @@ li:nth-child() {}` assert.equal(actual, expected) }) +test(`formats ::highlight and ::highlight(Name) correctly`, () => { + let actual = format(`::highlight,::highlight(Name),::highlight(my-thing) {}`) + let expected = `::highlight, +::highlight(Name), +::highlight(my-thing) {}` + assert.equal(actual, expected) +}) + test('formats unknown pseudos correctly', () => { let actual = format(` ::foo-bar,