Open milesj opened 4 years ago
Great idea! I just put together a basic implementation and usage example as follows:
import * as CSS from 'csstype';
export type MarginAtRules<TLength> = {
[pageMargin in
| '@top-left-corner'
| '@top-left'
| '@top-center'
| '@top-right'
| '@top-right-corner'
| '@right-top'
| '@right-middle'
| '@right-bottom'
| '@bottom-right-corner'
| '@bottom-right'
| '@bottom-center'
| '@bottom-left'
| '@bottom-left-corner'
| '@left-bottom'
| '@left-middle'
| '@left-top']?: CSS.Properties<TLength>; // TODO: PageMarginCSSProperties
};
export type Page<TLength = string | 0> =
| CSS.Properties<TLength> // TODO: PageCSSProperties
| MarginAtRules<TLength>
| {
[pseudo in ' :left' | ' :right' | ' :first' | ' :blank']?: MarginAtRules<
TLength
>;
};
export type GlobalCSSRules = {
'@page'?: Page;
};
Please see the CSS Paged Media Module specification for the values of PageProperties and PageMarginProperties.
@page
has special rules here: https://developer.mozilla.org/en-US/docs/Web/CSS/@pageThis is similar to
@viewport
which already has a custom typeViewport
.Spec: https://drafts.csswg.org/css-page-3/#at-page-rule