as-css Edge Case Test Suite

Test 1: Container References (&, *)

Container reference test content

Expected: & and * should become .as--X, preserving placement in selectors
Test 2: Attribute Selectors (should be preserved)
PDF Link
Expected: *= operators in attributes should NOT be replaced with scope
Test 3: Escaped Characters (should be preserved)
Escaped ampersand class
Escaped asterisk class
Escaped comma class
Data with ampersand
Expected: \& and \* should remain escaped, not become scope
Test 4: Pseudo-classes and Pseudo-elements
Expected: :hover → .as--X :hover (descendant), ::before → .as--X::before (container pseudo-element)
Test 5: Complex Selectors with Functions

Complex selector heading

Box element
Expected: Commas inside functions should be preserved, escaped commas preserved
Test 6: Animation Scoping
Animated element
Timing function test
Expected: slideIn → as--X-slideIn, but timing functions preserved, var(--custom-anim) preserved
Test 7: Media Queries and Responsive
Responsive content
Expected: Rules inside media queries should be scoped, sm-lt expanded to (max-width: 639px)
Test 8: CSS Layers

Layer test title

Themed content
Expected: Rules inside @layer blocks should be scoped recursively
Test 9: Mixed Edge Cases
Mixed case content
Expected: All patterns should work together correctly
Test 10: CSS Custom Properties
Variable test content
Expected: CSS variables should be preserved, & and * inside variable values should not be transformed
Test 11: Complex CSS Functions
Calc test
URL test
Clamp test
Complex function test
Expected: Functions should be preserved, & and * inside function parameters should not be transformed
Test 12: Content Property Edge Cases
Double quotes test
Single quotes test
Mixed quotes test
Escaped content test
Multiline test
Unicode test
Expected: Content with various quote types should preserve & and * inside quoted strings
Test 13: Malformed CSS Handling
Valid CSS
Recovery test
Expected: Valid CSS should work despite malformed rules, graceful degradation
Test 14: Strong Scoping
Strong scoped button
Deep nested content
Expected: Element gets ID, CSS scoped with #id instead of .class (1,1,0 specificity)
Test 15: Strong Scoping with Existing ID
Content with existing ID
Expected: Uses existing ID="existing-card", CSS scoped with #existing-card
Test 16: Named Style Definition with Strong
Named style definition with strong
Used to validate strong named-style behavior
Expected: Strong named-style behavior is validated by Test 19 and runtime checks
Test 17: Runtime Issue Check

Known runtime issue check: <head> should not receive as-strong class.

If this test fails in console, strong named-style handling is leaking global class state.

This section intentionally validates runtime correctness, not visual styling.

Expected: document.head.classList.contains('as-strong') should be false
Test 18: Normal Scoping (for comparison)
Normal scoped button
Expected: Element gets class, CSS scoped with .class (0,2,0 specificity)
Test 19: Named Style Strong Inheritance
Strong Card Reference 1
This should have strong scoping inherited from definition
Strong Card Reference 2
This should also inherit strong scoping
Strong Card Reference 3
No strong attribute, but should inherit from definition
Expected: All references inherit as-strong class from definition, CSS uses .scope.as-strong pattern
Test 20: Dynamic Latest Write Wins
Rapid dynamic rewrites should keep the latest update.
Expected: After rapid updates, processed CSS contains only the final payload