Report invalid selectors

Author: jamesnw

src/utils.ts

@@ -80,23 +80,27 @@ export function splitCommaList(list: List<CssNode>) {
 export function getSelectors(rule: SelectorList | undefined) {
   if (!rule) return [];
 
-  return (rule.children as List<CssTreeSelector>)
-    .map((selector) => {
-      let pseudoElementPart: string | undefined;
-
-      if (selector.children.last?.type === 'PseudoElementSelector') {
-        selector = clone(selector) as CssTreeSelector;
-        pseudoElementPart = generateCSS(selector.children.last!);
-        selector.children.pop();
-      }
-
-      const elementPart = generateCSS(selector);
-
-      return {
-        selector: elementPart + (pseudoElementPart ?? ''),
-        elementPart,
-        pseudoElementPart,
-      } satisfies Selector;
-    })
-    .toArray();
+  try {
+    return (rule.children as List<CssTreeSelector>)
+      .map((selector) => {
+        let pseudoElementPart: string | undefined;
+
+        if (selector.children.last?.type === 'PseudoElementSelector') {
+          selector = clone(selector) as CssTreeSelector;
+          pseudoElementPart = generateCSS(selector.children.last!);
+          selector.children.pop();
+        }
+
+        const elementPart = generateCSS(selector);
+
+        return {
+          selector: elementPart + (pseudoElementPart ?? ''),
+          elementPart,
+          pseudoElementPart,
+        } satisfies Selector;
+      })
+      .toArray();
+  } catch {
+    throw new Error(`Invalid CSS. Can't parse selector "${generateCSS(rule)}"`);
+  }
 }

tests/unit/utils.test.ts

@@ -1,6 +1,12 @@
 import type * as csstree from 'css-tree';
 
-import { getAST, splitCommaList } from '../../src/utils.js';
+import { getAST, getSelectors,splitCommaList } from '../../src/utils.js';
+
+const getSelectorList = (cssText: string) => {
+  const stylesheet = getAST(cssText) as csstree.StyleSheet;
+  return (stylesheet.children.first as csstree.Rule)
+    .prelude as csstree.SelectorList;
+};
 
 describe('splitCommaList', () => {
   it('works', () => {
@@ -20,3 +26,23 @@ describe('splitCommaList', () => {
     ]);
   });
 });
+describe('getSelectors', () => {
+  it('includes invalid rule in error', () => {
+    const selectorList = getSelectorList('.w-[10]{color: red}');
+
+    expect(() => getSelectors(selectorList)).toThrowError(
+      'Invalid CSS. Can\'t parse selector ".w-[10]"',
+    );
+  });
+  it('parses valid selector with pseudoclass', () => {
+    const selectorList = getSelectorList('.a::before{color: red}');
+    const selectors = getSelectors(selectorList);
+    expect(selectors).toEqual([
+      {
+        selector: '.a::before',
+        elementPart: '.a',
+        pseudoElementPart: '::before',
+      },
+    ]);
+  });
+});