Skip to content
Open
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
30 changes: 29 additions & 1 deletion src/sandbox/scoped_css.ts
Original file line number Diff line number Diff line change
Expand Up @@ -45,6 +45,10 @@ class CSSParser {
this.prefix = prefix
this.baseURI = baseURI
this.linkPath = linkPath || ''

// @layer: {:root, :host {}} => @layer: { * {}}
this.preprocessLayerSelectors()

this.matchRules()
return isFireFox() ? decodeURIComponent(this.result) : this.result
}
Expand Down Expand Up @@ -302,7 +306,15 @@ class CSSParser {
private layerRule (): boolean | void {
if (!this.commonMatch(/^@layer\s*([^{;]+)/)) return false

if (!this.matchOpenBrace()) return !!this.commonMatch(/^[;]+/)
// check if it ends with ; (declaration or single line)
if (this.cssText.charAt(0) === ';') {
this.commonMatch(/^;/) // delete ;
this.matchLeadingSpaces()
return true
}

// check if it starts with { (block)
if (!this.matchOpenBrace()) return false

this.matchComments()

Expand Down Expand Up @@ -462,6 +474,22 @@ class CSSParser {
parseError(msg, linkPath)
}
}

// @layer: {:root, :host {}} => @layer: { * {}}
private preprocessLayerSelectors (): void {
this.cssText = this.cssText.replace(
/@layer\s+([^{]+)\s*\{([^}]*)\}/g,
(_, layerDeclaration, layerContent) => {

const processedContent = layerContent.replace(
/(:root\s*,\s*:host|:host\s*,\s*:root)\s*\{/g,
' * {'
)

return `@layer ${layerDeclaration} {${processedContent}}`
}
)
}
}

/**
Expand Down