Support CSS page bindings for named print pages
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:
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 stylexCurrent 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?
Source: facebook/stylex