facebook / facebook/stylex

Support CSS page bindings for named print pages

Open
#1,861 1 comment 0 reactions 1 assignee Claimed by @henryqdineen View on GitHub
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

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.