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

1const divColours = reactCSSExtra({
2    "default": {
3        div: {
4            color: "red",
5        },
6    },
7});
8
9const divFontSize = reactCSSExtra({
10    "default": {
11        div: {
12            fontSize: "48px",
13        },
14    },
15});
16
17const combined = styleMerge(false, divColours, divFontSize);
18//---------------
19/*
20* {
21*   div: {
22*     color: "red",
23*     fontSize: "48px"
24*   }
25* }
26*/
27
28const combinedWithoutDivKey = styleMerge(true, divColours, divFontSize);
29//---------------
30/*
31* {
32*   color: "red",
33*   fontSize: "48px"
34* }
35*/

• 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)

1const styles = reactCSSExtra({
2    "default": {
3        div1: {
4            fontWeight: "200",
5            fontSize: "30px",
6        },
7        div2: {
8            fontWeight: "400",
9        }
10    },
11    "heavy": {
12        div1: {
13            fontWeight: "400",
14            //fontSize doesn't need to be specified again, it will just inherit "30px" from above
15        },
16        //div2 doesn't need to be specified again, it will just inherit from above
17    }
18}, {
19    "heavy": true,
20});
21//---------------
22/*
23* {
24*   div1: {
25*      fontWeight: "400"
26*      fontSize: "30px",
27*   },
28*   div2: {
29*      fontWeight: "400",
30*   }
31* }
32*/

• reactCSS became reactCSSExtra

Change log

Version 1.2.6

• Fixed more issues that I don't find because I don't test properly

Version 1.2.5

• Fixed issue to do with extra scopes

Version 1.2.4

• Small issue that I fixed when changing the styleMerge typings (when destroyTopLevelKeys was true) I also fixed when destroyTopLevelKeys was false NOTE: For instance when D = styleMerge(false, X, Y), D will inherit keys from X, so just be careful!

Version 1.2.3

• I always leave stuff out when doing tests and I never put it back, so I put that stuff back

Version 1.2.2

• Improved the styleMerge typings. Made them more optimised and fixed? it even though I don't know whether it was actually broken.

Version 1.2.1

• Corrected name

Version 1.2.0

• Added proper typings for the styleMerge function. It no longer just returns object but actually the combined objects provided. It also removed the keys if you specify, but it's pretty unoptimised.

• Fixed typings for reactCSSExtra. An attribute like position that used the type "absolute" | "relative" | ... rather than just string would error because string is not assignable to type "absolute" | "relative" | ....