Skip to content

Update for SSR environments and Async imports #374

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
break-stuff wants to merge 3 commits into from
Closed

Update for SSR environments and Async imports #374

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
6056b09
added check to run safely in ssr environments
break-stuff Jan 23, 2026
cb85914
added optional chaining incase there is timing issues when loading co…
break-stuff Jan 23, 2026
4fc79bc
prevent failures for async loading
break-stuff Jan 23, 2026
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
6 changes: 3 additions & 3 deletions src/cascade.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -70,7 +70,7 @@ function expandInsetShorthands(node: CssNode, block?: Block) {
};

if (node.property === 'inset') {
const values = node.value.children.toArray();
const values = node.value.children?.toArray() || [];
// `inset` shorthand expands to top, right, bottom, left
// See https://drafts.csswg.org/css-position/#inset-shorthands
const [top, right, bottom, left] = (() => {
Expand All @@ -92,7 +92,7 @@ function expandInsetShorthands(node: CssNode, block?: Block) {
appendProperty('bottom', bottom);
appendProperty('left', left);
} else if (node.property === 'inset-block') {
const values = node.value.children.toArray();
const values = node.value.children?.toArray() || [];
const [blockStart, blockEnd] = (() => {
switch (values.length) {
case 1:
Expand All @@ -106,7 +106,7 @@ function expandInsetShorthands(node: CssNode, block?: Block) {
appendProperty('inset-block-start', blockStart);
appendProperty('inset-block-end', blockEnd);
} else if (node.property === 'inset-inline') {
const values = node.value.children.toArray();
const values = node.value.children?.toArray() || [];
const [inlineStart, inlineEnd] = (() => {
switch (values.length) {
case 1:
Expand Down
22 changes: 11 additions & 11 deletions src/fallback.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -319,7 +319,7 @@ function mapMargin(
) {
// TODO: Handle flip-start
if (key === 'margin') {
const [first, second, third, fourth] = valueAst.children.toArray();
const [first, second, third, fourth] = valueAst.children?.toArray() || [];
if (tactic === 'flip-block') {
if (fourth) {
valueAst.children.fromArray([third, second, first, fourth]);
Expand All @@ -332,14 +332,14 @@ function mapMargin(
} // No change needed for 1, 2 or 3 values
}
} else if (key === 'margin-block') {
const [first, second] = valueAst.children.toArray();
const [first, second] = valueAst.children?.toArray() || [];
if (tactic === 'flip-block') {
if (second) {
valueAst.children.fromArray([second, first]);
}
}
} else if (key === 'margin-inline') {
const [first, second] = valueAst.children.toArray();
const [first, second] = valueAst.children?.toArray() || [];
if (tactic === 'flip-inline') {
if (second) {
valueAst.children.fromArray([second, first]);
Expand All @@ -351,9 +351,9 @@ function mapMargin(
// Parses a value into an AST.
const getValueAST = (property: string, val: string) => {
const ast = getAST(`#id{${property}: ${val};}`) as Block;
const astDeclaration = (ast.children.first as Rule)?.block.children
.first as Declaration;
return astDeclaration.value as Value;
const astDeclaration = (ast.children?.first as Rule)?.block?.children
?.first as Declaration;
return astDeclaration?.value as Value;
};

export function applyTryTacticToBlock(
Expand Down Expand Up @@ -453,7 +453,7 @@ function parsePositionTryFallbacks(list: List<CssNode>) {
}

function getPositionTryFallbacksDeclaration(node: Declaration) {
if (isPositionTryFallbacksDeclaration(node) && node.value.children.first) {
if (isPositionTryFallbacksDeclaration(node) && node.value.children?.first) {
return parsePositionTryFallbacks(node.value.children);
}
return [];
Expand All @@ -463,11 +463,11 @@ export function getPositionTryDeclaration(node: Declaration): {
order?: PositionTryOrder;
options?: PositionTryObject[];
} {
if (isPositionTryDeclaration(node) && node.value.children.first) {
if (isPositionTryDeclaration(node) && node.value.children?.first) {
const declarationNode = clone(node) as DeclarationWithValue;
let order: PositionTryOrder | undefined;
// get potential order
const firstName = (declarationNode.value.children.first as Identifier).name;
const firstName = (declarationNode.value.children?.first as Identifier)?.name;
if (firstName && isPositionTryOrder(firstName)) {
order = firstName;
declarationNode.value.children.shift();
Expand All @@ -480,9 +480,9 @@ export function getPositionTryDeclaration(node: Declaration): {
}

function getPositionTryOrderDeclaration(node: Declaration) {
if (isPositionTryOrderDeclaration(node) && node.value.children.first) {
if (isPositionTryOrderDeclaration(node) && node.value.children?.first) {
return {
order: (node.value.children.first as Identifier).name as PositionTryOrder,
order: (node.value.children.first as Identifier)?.name as PositionTryOrder,
};
}
return {};
Expand Down
16 changes: 9 additions & 7 deletions src/index-wpt.ts
View file
Open in desktop
Copy link
Contributor

@jamesnw jamesnw Jan 23, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This file is only used for running the Web Platform Tests, in which case we can be sure that window is available. I don't think we need to make any changes to this file.

Copy link
Contributor Author

@break-stuff break-stuff Jan 23, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I added it for continuity so the tests and public API are consistent. I can remove it.

Original file line number Diff line number Diff line change
Expand Up @@ -2,13 +2,15 @@ import { polyfill } from './polyfill.js';

// Used by the WPT test harness to delay test assertions
// and give the polyfill time to apply changes
window.CHECK_LAYOUT_DELAY = true;
if (typeof window !== 'undefined') {
window.CHECK_LAYOUT_DELAY = true;

// apply polyfill
if (document.readyState !== 'complete') {
window.addEventListener('load', () => {
// apply polyfill
if (document.readyState !== 'complete') {
window.addEventListener('load', () => {
polyfill(true);
});
} else {
polyfill(true);
});
} else {
polyfill(true);
}
}
12 changes: 7 additions & 5 deletions src/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,12 @@
import { polyfill } from './polyfill.js';

// apply polyfill
if (document.readyState !== 'complete') {
window.addEventListener('load', () => {
if (typeof window !== 'undefined') {
if (document.readyState !== 'complete') {
window.addEventListener('load', () => {
polyfill();
});
} else {
polyfill();
});
} else {
polyfill();
}
}
16 changes: 8 additions & 8 deletions src/parse.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -142,7 +142,7 @@ function parseAnchorFn(
customPropName: string | undefined;

const args: CssNode[] = [];
node.children.toArray().forEach((child) => {
node.children?.toArray()?.forEach((child) => {
if (foundComma) {
fallbackValue = `${fallbackValue}${generateCSS(child)}`;
return;
Expand All @@ -164,9 +164,9 @@ function parseAnchorFn(
if (isIdentifier(name) && name.name.startsWith('--')) {
// Store anchor name
anchorName = name.name;
} else if (isVarFunction(name) && name.children.first) {
} else if (isVarFunction(name) && name.children?.first) {
// Store CSS custom prop for anchor name
customPropName = (name.children.first as Identifier).name;
customPropName = (name.children.first as Identifier)?.name;
}
}
if (sideOrSize) {
Expand Down Expand Up @@ -210,7 +210,7 @@ function parseAnchorFn(
}

function getAnchorNames(node: DeclarationWithValue) {
return (node.value.children as List<Identifier>).map(({ name }) => name);
return (node.value.children as List<Identifier>)?.map(({ name }) => name) || [];
}

let anchorNames: AnchorSelectors = {};
Expand Down Expand Up @@ -427,8 +427,8 @@ export async function parseCSS(
isVarFunction(node) &&
declaration &&
prop &&
node.children.first &&
customPropsToCheck.has((node.children.first as Identifier).name) &&
node.children?.first &&
customPropsToCheck.has((node.children.first as Identifier)?.name) &&
// For now, we only want assignments to other CSS custom properties
prop.startsWith('--')
) {
Expand Down Expand Up @@ -496,7 +496,7 @@ export async function parseCSS(
isVarFunction(node) &&
declaration &&
prop &&
node.children.first &&
node.children?.first &&
// Now we only want assignments to inset/sizing properties
(isInsetProp(prop) || isSizingProp(prop))
) {
Expand Down Expand Up @@ -649,7 +649,7 @@ export async function parseCSS(
enter(node) {
if (
isVarFunction(node) &&
(node.children.first as Identifier)?.name?.startsWith('--') &&
(node.children?.first as Identifier)?.name?.startsWith('--') &&
this.declaration?.property?.startsWith('--') &&
this.block
) {
Expand Down
4 changes: 2 additions & 2 deletions src/position-area.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -457,8 +457,8 @@ function isPositionAreaDeclaration(

function parsePositionAreaValue(node: DeclarationWithValue) {
const value = (node.value.children as List<Identifier>)
.toArray()
.map(({ name }) => name);
?.toArray()
?.map(({ name }) => name) || [];
if (value.length === 1) {
if (axisForPositionAreaValue(value[0]) === 'ambiguous') {
value.push(value[0]);
Expand Down
6 changes: 3 additions & 3 deletions src/utils.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -61,7 +61,7 @@ export function isDeclaration(node: CssNode): node is DeclarationWithValue {
}

export function getDeclarationValue(node: DeclarationWithValue) {
return (node.value.children.first as Identifier).name;
return (node.value.children?.first as Identifier)?.name;
}

export interface StyleData {
Expand Down Expand Up @@ -95,7 +95,7 @@ export function getSelectors(rule: SelectorList | undefined) {
if (!rule) return [];

return (rule.children as List<CssTreeSelector>)
.map((selector) => {
?.map((selector) => {
let pseudoElementPart: string | undefined;

if (selector.children.last?.type === 'PseudoElementSelector') {
Expand All @@ -112,7 +112,7 @@ export function getSelectors(rule: SelectorList | undefined) {
pseudoElementPart,
} satisfies Selector;
})
.toArray();
.toArray() || [];
}

export function reportParseErrorsOnFailure() {
Expand Down
Loading