├── .gitignore
├── .travis.yml
├── LICENSE
├── README.md
├── index.js
├── package.json
└── test
└── index.js
/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules/
2 | npm-debug.log
3 |
--------------------------------------------------------------------------------
/.travis.yml:
--------------------------------------------------------------------------------
1 | language: node_js
2 | node_js:
3 | - "0.10"
4 | - "0.12"
5 | - 4
6 | - 6
7 | script: npm run test
8 |
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | The MIT License (MIT)
2 |
3 | Copyright (c) 2016 Ryan Tsao
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # react-stylematic
2 |
3 | [![build status][build-badge]][build-href]
4 | [![dependencies status][deps-badge]][deps-href]
5 | [![npm version][npm-badge]][npm-href]
6 |
7 | A [stylematic](https://github.com/rtsao/stylematic) wrapper for React
8 |
9 | ## Quick example
10 |
11 | ```jsx
12 |
13 | /** @jsx createElement */
14 |
15 | const createElement = require('react-stylematic');
16 |
17 | const App = () => (
18 |
25 | Hello World!
26 |
27 | );
28 |
29 | ```
30 | **Rendered HTML**
31 | ```html
32 | Hello World!
33 | ```
34 |
35 | **Automatically injected CSS into document ``**
36 | ```html
37 |
48 | ```
49 |
50 | ### Extraction of CSS on server
51 |
52 | ```jsx
53 | const React = require('react');
54 | const ReactDOM = require('react-dom/server');
55 | const {renderStatic} = require('styletron-server');
56 |
57 | const App = require('./app');
58 |
59 | const {html, css, hydrationSrc} = renderStatic(() => {
60 | return ReactDOM.renderToString();
61 | });
62 | ```
63 |
64 |
65 | [build-badge]: https://travis-ci.org/rtsao/react-stylematic.svg?branch=master
66 | [build-href]: https://travis-ci.org/rtsao/react-stylematic
67 | [deps-badge]: https://david-dm.org/rtsao/react-stylematic.svg
68 | [deps-href]: https://david-dm.org/rtsao/react-stylematic
69 | [npm-badge]: https://badge.fury.io/js/react-stylematic.svg
70 | [npm-href]: https://www.npmjs.com/package/react-stylematic
71 |
--------------------------------------------------------------------------------
/index.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | var React = require('react');
4 | var stylematic = require('stylematic');
5 |
6 | module.exports = function createElementStylematic(element, props) {
7 | // if no style prop, do nothing
8 | if (!props || !props.style) {
9 | return React.createElement.apply(null, arguments);
10 | }
11 |
12 | var result = stylematic(props.style);
13 | var args = Array(arguments.length);
14 |
15 | args[0] = element;
16 | args[1] = newProps(props, result.passthrough, result.className)
17 | var numChildrenArgs = arguments.length - 2;
18 | for (var i = 0; i < numChildrenArgs; i++) {
19 | args[i + 2] = arguments[i + 2];
20 | }
21 |
22 | return React.createElement.apply(null, args);
23 | }
24 |
25 | function newProps(original, styles, className) {
26 | var props = Object.keys(original).reduce(function(acc, key) {
27 | if (key === 'style') {
28 | if (Object.keys(styles).length) {
29 | acc.style = styles;
30 | }
31 | } else {
32 | acc[key] = original[key];
33 | }
34 | return acc;
35 | }, {});
36 |
37 | if (className) {
38 | props.className = props.className ?
39 | props.className + ' ' + className : className;
40 | }
41 | return props;
42 | }
43 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "react-stylematic",
3 | "version": "1.1.0",
4 | "description": "A stylematic wrapper for React",
5 | "author": "Ryan Tsao ",
6 | "main": "index.js",
7 | "homepage": "https://github.com/rtsao/react-stylematic",
8 | "repository": "git@github.com:rtsao/react-stylematic.git",
9 | "bugs": "https://github.com/rtsao/react-stylematic/issues",
10 | "scripts": {
11 | "test": "node test/index.js"
12 | },
13 | "dependencies": {
14 | "stylematic": "^1.2.0-beta.2"
15 | },
16 | "peerDependencies": {
17 | "react": "0.12.x - 15.x"
18 | },
19 | "devDependencies": {
20 | "react": "^15.0.1",
21 | "styletron": "^1.0.0",
22 | "tape": "^4.5.1"
23 | },
24 | "license": "MIT"
25 | }
26 |
--------------------------------------------------------------------------------
/test/index.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | var test = require('tape');
4 | var styletron = require('styletron');
5 |
6 | var createElement = require('react').createElement;
7 | var createElementStylematic = require('../');
8 |
9 | test('no props', function(t) {
10 | t.deepEqual(createElementStylematic('div'), createElement('div'));
11 | t.end();
12 | });
13 |
14 | test('style prop with passthrough', function(t) {
15 | t.deepEqual(
16 | createElementStylematic('div', {style: {color: 'red'}}),
17 | createElement('div', {style: {color: 'red'}})
18 | );
19 | t.end();
20 | });
21 |
22 | test('style prop with passthrough and children', function(t) {
23 | t.deepEqual(
24 | createElementStylematic('div', {style: {color: 'red'}}, createElement('div')),
25 | createElement('div', {style: {color: 'red'}}, createElement('div'))
26 | );
27 | t.end();
28 | });
29 |
30 | test('style prop with passthrough and children', function(t) {
31 | styletron.startBuffering();
32 | t.deepEqual(
33 | createElementStylematic('div', {style: {color: ['rgba(0,0,255,0.5)', 'blue']}}, createElement('div')),
34 | createElement('div', {className: '_style_3Bl7iO'}, createElement('div'))
35 | );
36 | var css = styletron.flushBuffer();
37 | t.equal(css, '._style_3Bl7iO {\n color: blue !important;\n color: rgba(0,0,255,0.5) !important\n}');
38 | t.end();
39 | });
40 |
--------------------------------------------------------------------------------