Remove unused SyntaxRule references and improve error handling in runtime

Author: 1aron

internal

@@ -31,7 +31,6 @@ export default class MasterCSS {
     readonly variables = new Map<string, Variable>()
     readonly at = new Map<string, string | number>()
     readonly animations = new Map<string, AnimationDefinitions>()
-    readonly SyntaxRule = SyntaxRule
 
     constructor(
         public customConfig?: Config
@@ -625,7 +624,7 @@ export default class MasterCSS {
         const syntaxRule = this.generalLayer.rules.find(({ key }) => key === ((fixedClass ? fixedClass + ' ' : '') + className))
         if (syntaxRule) return syntaxRule
         const registeredRule = this.match(className)
-        if (registeredRule) return new this.SyntaxRule(className, this, registeredRule, fixedClass, mode)
+        if (registeredRule) return new SyntaxRule(className, this, registeredRule, fixedClass, mode)
     }
 
     /**

packages/core/src/core.ts

@@ -19,5 +19,4 @@ export interface RuleNode {
     native?: CSSRule
     suffixSelectors?: string[]
     prefixSelectors?: string[]
-    unsupported?: boolean
 }

packages/core/src/rule.ts

@@ -316,11 +316,7 @@ export class SyntaxRule extends Rule {
         const propertiesText: string[] = []
         for (const propertyName in this.declarations) {
             const propertyValue = this.declarations[propertyName as keyof PropertiesHyphen] as any
-            // if (this.css.Native && VENDOR_PREFIX_REGEX.test(propertyName) && !this.css.Native.supports(propertyName, propertyValue)) {
-            //     continue
-            // }
             const propertyText = propertyName + ':' + String(propertyValue)
-            // animations
             if (
                 animations
                 && (propertyText.startsWith('animation') || propertyText.startsWith('animation-name'))
@@ -400,9 +396,6 @@ export class SyntaxRule extends Rule {
                         text: cssText,
                         selectorText
                     }
-                    if (this.css.Native && (prefixSelectorVendor || eachSuffixSelectorVendor)) {
-                        node.unsupported = !this.css.Native.supports(`selector(${selectorText})`)
-                    }
                     if (prefixSelectors) node.prefixSelectors = prefixSelectors
                     if (suffixSelectors) node.suffixSelectors = suffixSelectors
                     this.nodes.push(node)

packages/core/src/syntax-rule.ts

@@ -31,8 +31,7 @@ test('selectors', async ({ page, browserName }) => {
         expect(await page.evaluate(() => cssRuntime.generalLayer.rules.find((rule) => rule.name === 'hidden::slider-thumb'))).toMatchObject({
             nodes: [
                 {
-                    text: '.hidden\\:\\:slider-thumb::-webkit-slider-thumb{display:none}',
-                    unsupported: true
+                    text: '.hidden\\:\\:slider-thumb::-webkit-slider-thumb{display:none}'
                 },
                 {
                     text: '.hidden\\:\\:slider-thumb::-moz-range-thumb{display:none}',

packages/runtime/e2e/progressive/selectors/index.test.ts

@@ -4,7 +4,6 @@ import registerGlobal from './register-global'
 import { HydrateResult } from './types'
 import RuntimeLayer from './layer'
 import RuntimeSyntaxLayer, { RuntimeSyntaxLayerInstance } from './syntax-layer'
-import RuntimeSyntaxRule from './syntax-rule'
 
 export default class CSSRuntime extends MasterCSS {
     static instances = new WeakMap<Document | ShadowRoot, CSSRuntime>()
@@ -18,9 +17,7 @@ export default class CSSRuntime extends MasterCSS {
     readonly presetLayer = new RuntimeSyntaxLayer('preset', this)
     readonly componentsLayer = new RuntimeSyntaxLayer('components', this)
     readonly generalLayer = new RuntimeSyntaxLayer('general', this)
-    readonly SyntaxRule = RuntimeSyntaxRule
     readonly classCounts = new Map<string, number>()
-    readonly Native = CSS
 
     constructor(
         public root: Document | ShadowRoot = document,
@@ -310,7 +307,6 @@ export default class CSSRuntime extends MasterCSS {
                         layer.insertAnimations(createdRule)
                         result.allSyntaxRules.push(createdRule)
                         createdRule.nodes.forEach((node) => {
-                            if (node.unsupported) return
                             try {
                                 const checkRuleIndex = checkSheet.insertRule(node.text)
                                 const checkNodeNativeRule = checkSheet.cssRules.item(checkRuleIndex)
@@ -323,8 +319,12 @@ export default class CSSRuntime extends MasterCSS {
                                         return
                                     }
                                 }
-                            } catch (error) { }
-                            console.error(`Cannot retrieve CSS rule for \`${node.text}\`. (${layer.name}) (https://rc.css.master.co/messages/hydration-errors)`)
+                                console.error(`Cannot retrieve CSS rule for \`${node.text}\`. (${layer.name}) (https://rc.css.master.co/messages/hydration-errors)`)
+                            } catch (error) {
+                                if (process.env.NODE_ENV === 'development') {
+                                    console.debug(`Cannot insert CSS rule for \`${node.text}\`. (${layer.name}) (https://rc.css.master.co/messages/hydration-errors)`)
+                                }
+                            }
                         })
                     }
                 } else {

packages/runtime/src/core.ts

@@ -1,6 +1,5 @@
 export { default as CSSRuntime, default } from './core'
 export { default as initCSSRuntime } from './init'
-export { default as RuntimeSyntaxRule } from './syntax-rule'
 export { default as RuntimeSyntaxLayer } from './syntax-layer'
 
 export type * from './types'

packages/runtime/src/index.ts

@@ -50,18 +50,14 @@ export default class RuntimeLayer extends Layer {
 
             for (let i = 0; i < rule.nodes.length;) {
                 const node = rule.nodes[i]
-                if (node.unsupported) {
+                try {
+                    const insertedIndex = this.native.insertRule(node.text, cssRuleIndex)
+                    node.native = this.native.cssRules.item(insertedIndex) as CSSRule
+                    cssRuleIndex++
                     i++
-                } else {
-                    try {
-                        const insertedIndex = this.native.insertRule(node.text, cssRuleIndex)
-                        node.native = this.native.cssRules.item(insertedIndex) as CSSRule
-                        cssRuleIndex++
-                        i++
-                    } catch (error) {
-                        console.error(error, node)
-                        rule.nodes.splice(i, 1)
-                    }
+                } catch (error) {
+                    console.error(error, node)
+                    rule.nodes.splice(i, 1)
                 }
             }
         }