[jss] Support @page rules

[gmaclennan]

Currently using a @page rule with JSS causes a warning. It still works fine, maybe it just needs to be added as a simple rule to https://github.com/cssinjs/jss/blob/master/src/plugins/rules.js#L9-L19 ?

[kof]

Are you using @page? Or how did it end up in your code?

[kof]

Please reopen once you got a use case for me, so that I know why adding support for this is important.

[joglr]

@page is used for defining printing options, such as page numbers, break-points, etc. It would be cool to have support for these things. The @page selector, among others is described in the following article: https://www.smashingmagazine.com/2015/01/designing-for-print-with-css/

[gmaclennan]

I missed this in November, and this hasn't been a huge issue since it does work, it just gives a warning. I use @page because I want the web app to look nice when printed. @page defines some styles for the page (page size and page margin) which are used when printed.

[kof]

Ok lets create a plugin that supports @page rule. For the core, this rule is too rare. Also to consider that spec supports special nested @ rules in there.

[christoffee2]

is there any update on this ?

[kof]

@christoffee2 @gmaclennan feel free to send us a PR implementing this. For the roadmap its not high prio.

[jareks]

@kof are you sure that @page needs to be handled by plugin? After all, it's part of basic CSS.

If we could just add it to global rules here: https://github.com/cssinjs/jss/blob/9b7daa79aeea23422664a283a2557bb70b19b1b5/packages/jss/src/plugins/rules.js then it would be simple even for me to implement :)

[mbrevda]

Is there a workaround for using @page in the meantime? Is there some way to get support for @page prioritized?

[kof]

Here are a few options:

• use it outside of JSS
• implement it as a plugin yourself
• contribute to JSS

[prajun7]

I was able to remove the warning by using the GlobalStyles component of MUI. I was using @page to define page size and page margin while printing. I did something like this,

 import { GlobalStyles } from '@mui/material';
     const printStyle = {
      ['@media print']: {
        ['@page']: {
          size: 'landscape',
          margin: '2px',
         },
       },
     };

You might not need to use @page inside the @media print because @page is only for printing. Documentation We can use the GlobalStyles in our App container. Like this

    const App: React.FC = () => (
      <>
         <GlobalStyles styles={printStyle} />
         <AppView />
      </>
     );