SyntaxError - AtRuleInvalid when using non-standard Page regions

[Stigjb]

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' }

[Stigjb]

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.

[julientaq]

Same issues here for paged.js (https://pagedjs.org)

after reading a bit the code and the doc, i thought i would manage to get away with customAtRules, but it seems that @page doesnt allow for nested at rules , (no problem with the @margin boxes because them seem to be rightly declared in the code.

Is it possible to visit a nested @rule inside another one from the config?

[julientaq]

I really need this, so i’m watching video and learning rust a bit to see if i can do something about it.

Would you accept and merge a PR for @footnote in the @page? (if i manage to write a good code obviously :D)