lightningcss icon indicating copy to clipboard operation
lightningcss copied to clipboard

SyntaxError - AtRuleInvalid when using non-standard Page regions

Open Stigjb opened this issue 1 year ago • 4 comments

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 avatar Feb 20 '24 13:02 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.

Stigjb avatar Feb 21 '24 07:02 Stigjb