Support CSS page bindings for named print pages
- Dominant language
- JavaScript
- Stars
- 10.3k
- Forks
- 481
- Avg merge
- 3d 8h
- Merged PRs (30d)
- 13
Description
Feature/integration request for named print pages with StyleX 0.19.0.
The CSS `page` property associates an element with a named `@page` descriptor (for example, A4 route cards versus 4×6 inch stock cards in one app). Keeping `@page` descriptors global is understandable, but the element-level binding also currently fails the official ESLint validation:
```ts
import * as stylex from '@stylexjs/stylex';
export const styles = stylex.create({
staticPage: { page: 'bincard' },
conditionalPage: { page: { default: null, '@media print': 'bincard' } },
});
```
With `@stylexjs/eslint-plugin` 0.19.0 and `@stylexjs/valid-styles: 'error'`, this isolated probe reports:
```
3:17 This is not a key that is allowed by stylex
4:30 This is not a key that is allowed by stylex
4:45 This is not a key that is allowed by stylex
```
Current non-blocking workaround is a tiny global `[data-print-page="bincard"] { page: bincard }` binding next to `@page bincard { size: 4in 6in; ... }`. All other authored card layout/break declarations are StyleX. Actual Chromium PDFs retain 288×432 point pages with that workaround. This is not a request to replace the print workflow or disable validation.
Could element-level `page` be supported, or is there a supported alternative for assigning named pages?
Contributor guide
Assessment
This issue has not been assessed yet.