This package has been deprecated

    Author message:

    WARNING: This module has been renamed to ressheet. Please install it instead. See for more information.


    1.1.1 • Public • Published


    Only ~3kb, no external dependencies & supports all major browsers

    React Evaluated StyleSheet, better known as RESS, is a tiny preprocessor that aims to be for React what LESS is to CSS. Highlights:

    • Easy to use and get started with
    • Light-weight, minified version is less than 1kb
    • No dependencies, built without the clutter of dependencies
    • Consistency across browsers (including the notorious Internet Explorer)
    • MIT Licensed, perfect for personal and commercial use

    Getting Started


    Package could be installed via npm.

    npm install @bukharim96/ress --save

    Import / require() Package

    ES6 Import Approach:

    import RESS from '@bukharim96/ress'

    NPM / CommonJS require() Approach:

    var RESS = require('@bukharim96/ress')


    RESS allows you to write better StyleSheets with react by using component props as CSS-like classes. Check the following title component:

    import React, { Component } from 'react'
    import { Text } from 'react-native'
    import RESS from '@bukharim96/ress'
    class Title extends Component {
      constructor(props) {
      render() {
        let titleStyles = new RESS(this.props, {
            default: {
              fontWeight: 'bold',
              color: '#000',
              fontSize: 25,
              textAlign: 'center'
            'h1, h2, h3, h4, h5, h6': {
              marginBottom: 12,
              fontFamily: "-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Ubuntu', 'Helvetica Neue', sans-serif",
              textTransform: 'uppercase',
              fancy: {
                fontFamily: 'cursive',
                fontStyle: 'italic'
            h1: { fontSize: 30 },
            h2: { fontSize: 25 },
            h3: { fontSize: 20 },
            h4: { fontSize: 15 },
            h5: { fontSize: 10 },
            h6: { fontSize: 7 }
        return <Text style={titleStyles} children={this.props.children} />

    I 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:

    <Title>This is an ordinary title</Title>
    <Title h1>This is an H1 title</Title>
    <Title h2 fancy>This is a fancy H2 title</Title>
    <Title h3>This is an H3 title</Title>
    <Title h6>This is an H6 title</Title>

    The following would then display:

    Notice 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.

    Without RESS, the above code would've been larger. This code is valid for both, react and react-native.

    Browser & Device Support

    Note: RESS supports both react and react-native out-of-the-box, along with all major browsers as highlighted below:

    Android IOS Chrome Edge Firefox IE Opera Safari
    (Yes) (Yes) (Yes) (Yes) (Yes) (Yes) (Yes) (Yes)


    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.


    RESS is licensed under the MIT License which makes it great for both personal and commercial use.

    Enjoy ;)


    npm i @bukharim96/ress

    DownloadsWeekly Downloads






    Unpacked Size

    42.1 kB

    Total Files


    Last publish


    • bukharim96