Package Exports

reactcss-extra

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (reactcss-extra) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

reactcss-extra

ReactCSS with some extra features

Original ReactCSS

The original version of ReactCSS by casesandberg can be found here (github)

What's changed

The use of lodash has changed. Now only the necessary lodash sub-modules are imported instead of the entire lodash module.
Added a new function styleMerge which allows for combining multiple ReactCSS styles (can provide any number of styles):

const divColours = reactCSSExtra({
    "default": {
        div: {
            color: "red",
        },
    },
});

const divFontSize = reactCSSExtra({
    "default": {
        div: {
            fontSize: "48px",
        },
    },
});

const combined = styleMerge(false, divColours, divFontSize);
//---------------
/*
* {
*   div: {
*     color: "red",
*     fontSize: "48px"
*   }
* }
*/

const combinedWithoutDivKey = styleMerge(true, divColours, divFontSize);
//---------------
/*
* {
*   color: "red",
*   fontSize: "48px"
* }
*/

The type definition for reactCSS was changed to allow for keys to be left out of activating classes (and to allow for styles to be left out, too)

const styles = reactCSSExtra({
    "default": {
        div1: {
            fontWeight: "200",
            fontSize: "30px",
        },
        div2: {
            fontWeight: "400",
        }
    },
    "heavy": {
        div1: {
            fontWeight: "400",
            //fontSize doesn't need to be specified again, it will just inherit "30px" from above
        },
        //div2 doesn't need to be specified again, it will just inherit from above
    }
}, {
    "heavy": true,
});
//---------------
/*
* {
*   div1: {
*      fontWeight: "400"
*      fontSize: "30px",
*   },
*   div2: {
*      fontWeight: "400",
*   }
* }
*/

reactCSS became reactCSSExtra