Skip invalid selectors during reconciliation

devknoll · devknoll · commit 8eb2d828f72a · 2022-09-06T16:15:47.000Z
diff --git a/README.md b/README.md
@@ -8,11 +8,10 @@ A small (9 kB compressed) polyfill for CSS Container Queries using [`ResizeObser
 
 ## Browser Support
 
-* Firefox 69+
-* Chrome 79+
-* Edge 79+
-* Safari 13.4+
-
+- Firefox 69+
+- Chrome 79+
+- Edge 79+
+- Safari 13.4+
 
 ## Getting Started
 
@@ -133,4 +132,4 @@ When using the polyfill, you may observe reports of errors like `ResizeObserver
 
 ## License
 
-[Apache 2.0](LICENSE)
+[Apache 2.0](LICENSE)
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "container-query-polyfill",
-  "version": "0.2.3",
+  "version": "0.2.4",
   "description": "",
   "repository": "github:GoogleChromeLabs/container-query-polyfill",
   "type": "module",
diff --git a/src/transform.ts b/src/transform.ts
@@ -93,6 +93,8 @@ const NO_WHERE_SELECTOR_TOKENS = parseComponentValue(
   Array.from(tokenize(NO_WHERE_SELECTOR))
 );
 
+const DUMMY_ELEMENT = document.createElement('div');
+
 // https://www.w3.org/TR/selectors-4/#single-colon-pseudos
 const SINGLE_COLON_PSEUDO_ELEMENTS = new Set([
   'before',
@@ -600,7 +602,14 @@ function transformContainerAtRule(
               return rule;
             }
 
-            elementSelectors.add(elementSelector.map(serialize).join(''));
+            const elementSelectorText = elementSelector.map(serialize).join('');
+            try {
+              DUMMY_ELEMENT.matches(elementSelectorText);
+              elementSelectors.add(elementSelectorText);
+            } catch {
+              // If `matches` throws, we won't use the selector when testing elements.
+            }
+
             return {
               ...rule,
               prelude: styleSelector,
diff --git a/tests/index.html b/tests/index.html
@@ -33,6 +33,8 @@
     'simple_new_long_syntax',
     'empty_href',
     '@supports',
+    '@layer',
+    'unsupported-selectors',
   ];
 
   const {results, iframe} = document.all;
diff --git a/tests/unsupported-selectors.html b/tests/unsupported-selectors.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<script src="./../dist/container-query-polyfill.modern.js"></script>
+<style>
+    #a {
+        container-type: inline-size;
+    }
+
+    @container (width > 0) {
+      h1:foo() {
+        font-size: 10px;
+      }
+
+      h1 {
+        font-size: 20px;
+      }
+    }
+  }
+</style>
+<div id="a">
+  <h1>Ohai</h1>
+</div>
+<script type="module">
+  import {doubleRaf, testSuite, assert} from './test-utils.js';
+
+  testSuite('Manual transpiling', async () => {
+    await doubleRaf();
+
+    const computed = getComputedStyle(document.querySelector('h1'));
+    assert(
+      computed.fontSize === '20px',
+      `Expected fontSize to be 20px, got ${computed.fontSize}`
+    );
+  });
+</script>

Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "container-query-polyfill",`
`3`		`- "version": "0.2.3",`
	`3`	`+ "version": "0.2.4",`
`4`	`4`	`"description": "",`
`5`	`5`	`"repository": "github:GoogleChromeLabs/container-query-polyfill",`
`6`	`6`	`"type": "module",`