@nutshelllabs/stylesheet
v4.1.8
Published
A styles engine for Node and the browser
Downloads
316
Readme
@nutshelllabs/stylesheet
React-pdf styles engine
How to install
yarn add @nutshelllabs/stylesheet
How it works
const stylesheet = require('@nutshelllabs/stylesheet');
const container = {
width: 400,
height: 600,
orientation: 'portrait',
};
const style = {
margin: 20,
width: '50vw',
height: '20vh',
borderRadius: 5,
fontWeight: 'semibold',
borderBottom: '2 solid yellow',
'@media max-width: 500': {
backgroundColor: 'rgb(255, 0, 0)',
},
};
const computed = stylesheet(container, style);
// Computed
// {
// width: 200,
// height: 120,
// marginTop: 20,
// marginLeft: 20,
// marginRight: 20,
// marginBottom: 20,
// marginBottom: 20,
// borderTopLeftRadius: 5,
// borderTopRightRadius: 5,
// borderBottomLeftRadius: 5,
// borderBottomRightRadius: 5,
// fontWeight: 600,
// borderBottomWidth: 2,
// borderBottomStyle: 'solid',
// borderBottomColor: 'yellow',
// backgroundColor: '#FF0000'
// }
This library exports a stylesheet
function that takes two arguments:
- container: Container where the styles are being computed into. It specifies the
width
andheight
in points (needed for media queries and unit conversions), and optionally the containerorientation
(needed for certain media queries). - style: Style to be computed. JS object with raw styles that you would like to get in a normalized format.
License
MIT © Diego Muracciole