SyntaxError - AtRuleInvalid when using non-standard Page regions
I am trying to process some CSS for Paged Media. I am getting SyntaxError: Unknown at rules on several examples from the spec, e.g. this footnote example: https://www.w3.org/TR/css-gcpm-3/#example-efe978c0:
const css = `
@page {
@footnote {
float: bottom;
}
}
span.footnote { float: footnote; }`;
const { code } = transform({
filename: 'test.css',
code: Buffer.from(css),
minify: true,
});
// I have tried using `customAtRules` to no avail:
const { code } = transform({
filename: 'test.css',
customAtRules: {
footnote: {
body: 'rule-list',
},
},
code: Buffer.from(css),
minify: true,
});
The error data is { type: 'AtRuleInvalid', value: 'footnote' }
We're using a PDF generator, Prince, that supports a wide range of Page regions. In addition to @top-left, @top-center, etc. - which are supported by Lightning CSS - there are some that can be found in standard documents, like @footnote, and also some custom ones like @prince-overlay.
Here's a table of the Page regions Prince supports: https://www.princexml.com/doc/paged/#tab-marginboxes
Obviously, Lightning CSS cannot add custom regions like @prince-overlay to its enum of page regions, but it would be nice to allow the syntax and process these rules in a visitor.