{"_id":"@bukharim96/ress","_rev":"6-edcf1e92ebe653b0c80b3405760f9798","name":"@bukharim96/ress","dist-tags":{"latest":"1.1.1"},"versions":{"1.0.0":{"name":"@bukharim96/ress","version":"1.0.0","description":"A prop orientated LESS-like StyleSheet for React Components","main":"index.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"repository":{"type":"git","url":"git+https://github.com/bukharim96/ress.git"},"keywords":["react","react-native","react-stylesheet","dynamic-stylesheet","react-css","react-less"],"author":{"name":"bukharim96"},"license":"MIT","bugs":{"url":"https://github.com/bukharim96/ress/issues"},"homepage":"https://github.com/bukharim96/ress#readme","gitHead":"426b2efbefdf1b20ddd860b90ba2db466b555ce7","_id":"@bukharim96/ress@1.0.0","_shasum":"78b57c19f4a505eb2bb1f38b9ce4b688c3b0b645","_from":".","_npmVersion":"3.10.10","_nodeVersion":"6.11.0","_npmUser":{"name":"bukharim96","email":"bukharim96@gmail.com"},"dist":{"shasum":"78b57c19f4a505eb2bb1f38b9ce4b688c3b0b645","tarball":"https://registry.npmjs.org/@bukharim96/ress/-/ress-1.0.0.tgz","fileCount":5,"unpackedSize":4951,"integrity":"sha512-2E8RKycSSoueOchQ9DhtU5Woqd2Lkuduks84kYetss4OxlXe2P6zP/gS68yef50Zakis4hK3xbi2sY5aSTCZpg==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCID5oGoaxM25mFecHY9YzTXHC8qRN/75iVfap+bLHvEXbAiEAiplqeZfBwCSp1/1QJryMWcoa7I/vBml4UnDUpad8Pnw="}]},"maintainers":[{"name":"bukharim96","email":"bukharim96@gmail.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ress_1.0.0_1522763258842_0.9870838183526427"},"_hasShrinkwrap":false},"1.1.0":{"name":"@bukharim96/ress","version":"1.1.0","description":"A prop-based LESS-like StyleSheet for React Components","main":"index.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"repository":{"type":"git","url":"git+https://github.com/bukharim96/ress.git"},"keywords":["react","react-native","react-stylesheet","dynamic-stylesheet","react-css","react-less"],"author":{"name":"bukharim96"},"license":"MIT","bugs":{"url":"https://github.com/bukharim96/ress/issues"},"homepage":"https://github.com/bukharim96/ress#readme","gitHead":"78967547b025a5a8166798411056d16d1230ef0c","_id":"@bukharim96/ress@1.1.0","_shasum":"96a90f384eccc36bbf8f1354331797c9658f2a58","_from":".","_npmVersion":"3.10.10","_nodeVersion":"6.11.0","_npmUser":{"name":"bukharim96","email":"bukharim96@gmail.com"},"dist":{"shasum":"96a90f384eccc36bbf8f1354331797c9658f2a58","tarball":"https://registry.npmjs.org/@bukharim96/ress/-/ress-1.1.0.tgz","fileCount":7,"unpackedSize":41855,"integrity":"sha512-Nr4b6oTXokHD0KUAMT8rr8YUSFe0xnKvMZyNTP5/WG2FyZ2KIKAjGgesVCfccporRUUYVjvfLCShLevQ8LUvbQ==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEVvKPktxaNrIdbxmZlUDraRcs8lsqqUPWBNdWY8UnuKAiEApILo++OeA+lHozDpbeFLO2kJNh1s+vFSaRD6XJzwTuo="}]},"maintainers":[{"name":"bukharim96","email":"bukharim96@gmail.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ress_1.1.0_1523038992255_0.6415706859388619"},"_hasShrinkwrap":false},"1.1.1":{"name":"@bukharim96/ress","version":"1.1.1","description":"A prop-based LESS-like StyleSheet for React Components","main":"index.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"repository":{"type":"git","url":"git+https://github.com/bukharim96/ress.git"},"keywords":["react","react-native","react-stylesheet","dynamic-stylesheet","react-css","react-less"],"author":{"name":"bukharim96"},"license":"MIT","bugs":{"url":"https://github.com/bukharim96/ress/issues"},"homepage":"https://github.com/bukharim96/ress#readme","gitHead":"b213ac3f7e4ac0bbd1b0146934c393507731cb4b","_id":"@bukharim96/ress@1.1.1","_shasum":"a5fd8e3127be68fadd08277b7b1fc178528fc2b4","_from":".","_npmVersion":"3.10.10","_nodeVersion":"6.11.0","_npmUser":{"name":"bukharim96","email":"bukharim96@gmail.com"},"dist":{"shasum":"a5fd8e3127be68fadd08277b7b1fc178528fc2b4","tarball":"https://registry.npmjs.org/@bukharim96/ress/-/ress-1.1.1.tgz","fileCount":7,"unpackedSize":42080,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJa1nnyCRA9TVsSAnZWagAAOkMP/jSQ3FQoXIFQfCuhd3yF\nJLuszHjfaWMnusjBKH+/2fmyP2yfST1Ps2bw6MvvmcGj++FbK0s/AhHUvpr8\nQ0/YTR1mHbx6C4CcTEf/Huv9oYtV/yO1z306PwrdcMbTdJHmeDuEwWBuP82z\nH2yooLf73N1CA3UGnP8h60fLb1SEpYggh5nRAE3rPmJ7XdOnFsKD8yrryL/p\n/6yXZHqvLovLYi+mmQjCc8nCaE/8Mg6fly9zfQJqH0/IIic/wdiWXg9hZ4KR\nnaffWVQ7vs4I/qxwkCQzaQxOey1MoG5ulAiryKvJmlvlOn3dxwCTno7ZkGVl\nXTvlGQisboETHbBSKfoy71lSvyLKL7DWy9UOmseHTO7YHXsJHBVr4tBrFeU0\nFAynBOjqA05j8xrGXqxDtvxZ/viLMKI+ODdY6dEd+/UtCspTU4Rovk8mbwzw\nxiWYl67ivbZ4YGxJEFEHcTYBQ1BFEKhEgKkppcxaBfbYVveYU+wlFj+xJyFM\nxt6fBkRsQ8AuS3zbhQu57x9QUSNmGIRd7cNWvwBRBLV91byEALsWLnxYNFKJ\nADvDCjXN2YOBVtLIuQFY9X9aa8cbGmKhmUdsxPLAp/JtZvFkbU+FYf3KhALn\nMN/BJ6i+bYb3xqxICZeuFs0XZrQbSg7Ms1WKLtWU5RkUpyuVQVuNd6YgrFHD\n5bAG\r\n=VPL1\r\n-----END PGP SIGNATURE-----\r\n","integrity":"sha512-FgIOPM/Trxp+jPDJxJrims8d1UWKOoUADwzK/6xj0M43h+9O0TCU65Lhz70XHGS7/9Lf2NOBfNQZ+vljm67Xfw==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDCXvmUXeMO9D8W1uL/GRoO8C8hoiOAgmLP2DdM7IpDtAIhAIjyNFduBWSDseInKWOMQipoRObt80It7VDOrcx2Jw2H"}]},"maintainers":[{"name":"bukharim96","email":"bukharim96@gmail.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ress_1.1.1_1524005360482_0.6354763158239167"},"_hasShrinkwrap":false,"deprecated":"WARNING: This module has been renamed to ressheet. Please install it instead. See https://github.com/bukharim96/ressheet for more information."}},"time":{"created":"2018-04-03T13:47:38.794Z","1.0.0":"2018-04-03T13:47:38.916Z","modified":"2022-06-12T15:33:29.238Z","1.1.0":"2018-04-06T18:23:12.319Z","1.1.1":"2018-04-17T22:49:20.593Z"},"maintainers":[{"name":"bukharim96","email":"bukharim96@gmail.com"}],"description":"A prop-based LESS-like StyleSheet for React Components","homepage":"https://github.com/bukharim96/ress#readme","keywords":["react","react-native","react-stylesheet","dynamic-stylesheet","react-css","react-less"],"repository":{"type":"git","url":"git+https://github.com/bukharim96/ress.git"},"author":{"name":"bukharim96"},"bugs":{"url":"https://github.com/bukharim96/ress/issues"},"license":"MIT","readme":"<p align=\"center\">\r\n\t<img src=\"https://raw.githubusercontent.com/bukharim96/ress/master/resources/ress-logo@80.25percent.png\">\r\n</p>\r\n\r\n<h1 align=\"center\">RESS</h1>\r\n\r\n<p align=\"center\">\r\n\t<small>Only ~3kb, no external dependencies &amp; supports all major browsers</small>\r\n</p>\r\n\r\n***React Evaluated StyleSheet***, better known as **RESS**, is a tiny preprocessor that aims to be for React what LESS is to CSS. Highlights:\r\n\r\n> - **Easy** to use and get started with\r\n> - **Light-weight**, minified version is less than 1kb\r\n> - **No dependencies**, built without the clutter of dependencies\r\n> - **Consistency** across browsers (including the notorious Internet Explorer)\r\n> - **MIT Licensed**, perfect for personal and commercial use\r\n\r\n## Getting Started\r\n\r\n### Installation\r\n\r\nPackage could be installed via `npm`.\r\n\r\n```\r\nnpm install @bukharim96/ress --save\r\n```\r\n\r\n### Import / require() Package\r\n\r\nES6 Import Approach:\r\n\r\n```javascript\r\nimport RESS from '@bukharim96/ress'\r\n```\r\n\r\nNPM / CommonJS require() Approach:\r\n\r\n```javascript\r\nvar RESS = require('@bukharim96/ress')\r\n```\r\n\r\n## Usage\r\n\r\nRESS allows you to write better StyleSheets with `react` by using component `props` as CSS-like classes. Check the following `title` component:\r\n\r\n```javascript\r\nimport React, { Component } from 'react'\r\nimport { Text } from 'react-native'\r\nimport RESS from '@bukharim96/ress'\r\n\r\nclass Title extends Component {\r\n  constructor(props) {\r\n    super(props)\r\n  }\r\n\r\n  render() {\r\n    let titleStyles = new RESS(this.props, {\r\n        default: {\r\n          fontWeight: 'bold',\r\n          color: '#000',\r\n          fontSize: 25,\r\n          textAlign: 'center'\r\n        },\r\n        \r\n        'h1, h2, h3, h4, h5, h6': {\r\n          marginBottom: 12,\r\n          fontFamily: \"-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Ubuntu', 'Helvetica Neue', sans-serif\",\r\n          textTransform: 'uppercase',\r\n\r\n          fancy: {\r\n            fontFamily: 'cursive',\r\n            fontStyle: 'italic'\r\n          }\r\n        },\r\n\r\n        h1: { fontSize: 30 },\r\n        h2: { fontSize: 25 },\r\n        h3: { fontSize: 20 },\r\n        h4: { fontSize: 15 },\r\n        h5: { fontSize: 10 },\r\n        h6: { fontSize: 7 }\r\n      })\r\n\r\n    return <Text style={titleStyles} children={this.props.children} />\r\n  }\r\n}\r\n```\r\n\r\nI bet you noticed that `new RESS(props, {...})` accepts two parameters, namely: props object and the *RESSheet* object. I used a class component just for demonstration, however always make sure to use stateless components where possible. Anyways, the `<Title />` component could now be used as follows:\r\n\r\n```html\r\n<Title>This is an ordinary title</Title>\r\n<Title h1>This is an H1 title</Title>\r\n<Title h2 fancy>This is a fancy H2 title</Title>\r\n<Title h3>This is an H3 title</Title>\r\n<Title h6>This is an H6 title</Title>\r\n```\r\n\r\nThe following would then display:\r\n\r\n<p align=\"center\">\r\n\t<img src=\"https://raw.githubusercontent.com/bukharim96/ress/master/resources/ress-001.PNG\">\r\n</p>\r\n\r\nNotice how RESS allows multi *selectors* in `'h1, h2, h3, h4, h5, h6': {...}`. Styles specified there would affect components with any `h1` - `h6` props. RESS also features nested, styles similiar to LESS, as seen in the above demo.\r\n\r\nWithout RESS, the above code would've been larger. This code is valid for both, `react` and `react-native`.\r\n\r\n## Browser &amp; Device Support\r\n\r\n**Note**: RESS supports both `react` and `react-native` out-of-the-box, along with all major browsers as highlighted below:\r\n\r\n| Android | IOS   | Chrome | Edge  | Firefox | IE    | Opera | Safari|\r\n|---------|-------|--------|-------|---------|-------|-------|-------|\r\n| (Yes)   | (Yes) | (Yes)  | (Yes) | (Yes)   | (Yes) | (Yes) | (Yes) |\r\n\r\n## Contributing\r\n\r\n**RESS** is a free and open source library, and I'd appreciate any help you're willing to give - be it fixing bugs, improving documentation, or suggesting new features or enhancements.\r\n\r\n## [License](https://github.com/bukharim96/pregx/blob/master/LICENSE)\r\n\r\n**RESS** is licensed under the **MIT License** which makes it great for both personal and commercial use.\r\n\r\n<p align=\"center\"><strong>Enjoy</i> ;)</strong></p>","readmeFilename":"README.md"}