├── .eslintignore
├── .travis.yml
├── .gitignore
├── .npmignore
├── css.js
├── component.js
├── test_flow
    ├── package.json
    ├── .flowconfig
    └── index.js
├── src
    ├── getComponentDisplayName.js
    ├── __tests__
    │   ├── setup.js
    │   ├── index-test.js
    │   ├── StyleableDOMComponent-test.js
    │   └── DOMStylesheet-test.js
    ├── index.js.flow
    ├── StyleableDOMComponent.js
    ├── index.js
    ├── CSS.js
    ├── component.js
    └── DOMStylesheet.js
├── .flowconfig
├── LICENSE
├── Makefile
├── package.json
└── README.md


/.eslintignore:
--------------------------------------------------------------------------------
1 | src/**/__tests__/*.js
2 | 


--------------------------------------------------------------------------------
/.travis.yml:
--------------------------------------------------------------------------------
1 | language: node_js
2 | node_js:
3 | - 4
4 | - 6
5 | - stable
6 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | example/bundle.js
3 | lib/
4 | coverage/
5 | .nyc_output/
6 | 


--------------------------------------------------------------------------------
/.npmignore:
--------------------------------------------------------------------------------
1 | src/
2 | npm-debug.log
3 | coverage/
4 | .nyc_output/
5 | test_flow/
6 | Makefile
7 | 


--------------------------------------------------------------------------------
/css.js:
--------------------------------------------------------------------------------
1 | /**
2 |  * @copyright 2015, Prometheus Research, LLC
3 |  * @flow
4 |  */
5 | 'use strict';
6 | 
7 | module.exports = require('./lib/CSS');
8 | 


--------------------------------------------------------------------------------
/component.js:
--------------------------------------------------------------------------------
1 | /**
2 |  * @copyright 2016-present, Prometheus Research, LLC
3 |  */
4 | 'use strict';
5 | 
6 | module.exports = require('./lib/component');
7 | 
8 | 


--------------------------------------------------------------------------------
/test_flow/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "react-dom-stylesheet-test-flow",
 3 |   "version": "1.0.0",
 4 |   "dependencies": {
 5 |     "react": "^15.2.1",
 6 |     "react-dom-stylesheet": "../"
 7 |   },
 8 |   "devDependencies": {
 9 |     "flow-bin": "^0.31.1"
10 |   }
11 | }
12 | 


--------------------------------------------------------------------------------
/src/getComponentDisplayName.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * @copyright 2015 Prometheus Research, LLC
 3 |  */
 4 | 
 5 | export default function getComponentDisplayName(Component) {
 6 |   return typeof Component === 'string' ?
 7 |     Component :
 8 |     Component.displayName || Component.name || 'Component';
 9 | }
10 | 
11 | 


--------------------------------------------------------------------------------
/test_flow/.flowconfig:
--------------------------------------------------------------------------------
 1 | [ignore]
 2 | <PROJECT_ROOT>/node_modules/fbjs/.*.flow
 3 | <PROJECT_ROOT>/node_modules/fbjs/.*.js
 4 | <PROJECT_ROOT>/node_modules/.store/fbjs@.*/.*.flow
 5 | <PROJECT_ROOT>/node_modules/.store/fbjs@.*/.*.js
 6 | 
 7 | [include]
 8 | 
 9 | [libs]
10 | 
11 | [options]
12 | suppress_comment=\\(.\\|\\n\\)*\\$ExpectError
13 | 


--------------------------------------------------------------------------------
/.flowconfig:
--------------------------------------------------------------------------------
 1 | [ignore]
 2 | <PROJECT_ROOT>/node_modules/fbjs/.*.flow
 3 | <PROJECT_ROOT>/node_modules/fbjs/.*.js
 4 | <PROJECT_ROOT>/node_modules/.store/fbjs@.*/.*.flow
 5 | <PROJECT_ROOT>/node_modules/.store/fbjs@.*/.*.js
 6 | <PROJECT_ROOT>/test_flow/node_modules/fbjs/.*.flow
 7 | <PROJECT_ROOT>/test_flow/node_modules/fbjs/.*.js
 8 | <PROJECT_ROOT>/test_flow/node_modules/.store/fbjs@.*/.*.flow
 9 | <PROJECT_ROOT>/test_flow/node_modules/.store/fbjs@.*/.*.js
10 | 
11 | [include]
12 | 
13 | [libs]
14 | 
15 | [options]
16 | suppress_comment=\\(.\\|\\n\\)*\\$ExpectError
17 | 


--------------------------------------------------------------------------------
/src/__tests__/setup.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * @copyright 2015 Prometheus Research, LLC
 3 |  */
 4 | 
 5 | import assert from 'power-assert';
 6 | import jsdom  from 'jsdom';
 7 | 
 8 | let document = jsdom.jsdom('<!doctype html><html><body></body></html>');
 9 | let window = document.defaultView;
10 | 
11 | global.assert = assert;
12 | global.document = document;
13 | global.window = window;
14 | 
15 | propagateToGlobal(window);
16 | 
17 | function propagateToGlobal(window) {
18 |   for (let key in window) {
19 |     if (!window.hasOwnProperty(key)) {
20 |       continue;
21 |     }
22 |     if (key in global) {
23 |       continue;
24 |     }
25 |     global[key] = window[key];
26 |   }
27 | }
28 | 


--------------------------------------------------------------------------------
/src/index.js.flow:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * @copyright 2016+ Prometheus Research, LLC
 3 |  * @flow
 4 |  */
 5 | 
 6 | declare export function style<T: Function | string>(
 7 |   Component: T,
 8 |   stylesheetSpec: Object,
 9 |   options?: string | {displayName?: string}
10 | ): T;
11 | 
12 | declare export function wrapWithStylesheet<T: Function | string>(
13 |   Component: T,
14 |   stylesheet: Object,
15 |   options: string | {displayName?: string}
16 | ): T;
17 | 
18 | export type DOMStylesheet = {
19 |   use(): void;
20 |   dispose(): void;
21 |   asClassName(variant?: Object): string;
22 |   override(stylesheetSpec: Object | DOMStylesheet): DOMStylesheet;
23 | };
24 | 
25 | declare export function create(stylesheetSpec: Object): DOMStylesheet;
26 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | The MIT License (MIT)
 2 | 
 3 | Copyright (c) 2015 Prometheus Research
 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
13 | all 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
21 | THE SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/test_flow/index.js:
--------------------------------------------------------------------------------
 1 |  /**
 2 |   * @flow
 3 |   */
 4 | 
 5 | import {style} from 'react-dom-stylesheet';
 6 | import React from 'react';
 7 | 
 8 | function Functional({hello}: {hello: string}) {
 9 |   return <div>{hello}</div>;
10 | }
11 | 
12 | <Functional hello="here" />;
13 | 
14 | // $ExpectError
15 | <Functional hello={42} />;
16 | 
17 | let StyledFunctional = style(Functional, {
18 |   color: 'red',
19 | });
20 | 
21 | <StyledFunctional hello="here" />;
22 | 
23 | // $ExpectError
24 | <StyledFunctional hello={42} />;
25 | 
26 | class Class extends React.Component {
27 | 
28 |   props: {
29 |     hello: string;
30 |   };
31 | 
32 |   render() {
33 |     return <div>{this.props.hello}</div>;
34 |   }
35 | }
36 | 
37 | <Class hello="here" />;
38 | 
39 | // $ExpectError
40 | <Class hello={42} />;
41 | 
42 | let StyledClass = style(Class, {
43 |   color: 'red',
44 | });
45 | 
46 | <StyledClass hello="here" />;
47 | 
48 | // $ExpectError
49 | <StyledClass hello={42} />;
50 | 
51 | import {create} from 'react-dom-stylesheet';
52 | 
53 | let stylesheet = create({
54 |   color: 'red'
55 | });
56 | 
57 | stylesheet.use();
58 | 
59 | stylesheet.dispose();
60 | 
61 | let className = stylesheet.asClassName({ok: true});
62 | 
63 | let nextStylesheet = stylesheet.override({
64 |   background: 'red',
65 | });
66 | 


--------------------------------------------------------------------------------
/src/StyleableDOMComponent.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * @copyright 2015 Prometheus Research, LLC
 3 |  */
 4 | 
 5 | import React, {PropTypes} from 'react';
 6 | import getComponentDisplayName from './getComponentDisplayName';
 7 | 
 8 | export default class StyleableDOMComponent extends React.Component {
 9 | 
10 |   static Component = null;
11 | 
12 |   static stylesheet = null;
13 | 
14 |   static propTypes = {
15 |     variant: PropTypes.object,
16 |     className: PropTypes.string,
17 |     Component: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
18 |   };
19 | 
20 |   static style(spec) {
21 |     return class extends StyleableDOMComponent {
22 |       static displayName = getComponentDisplayName(this);
23 |       static Component = this.Component;
24 |       static stylesheet = this.stylesheet.override(spec);
25 |     };
26 |   }
27 | 
28 |   render() {
29 |     let {
30 |       variant,
31 |       className: extraClassName,
32 |       Component = this.constructor.Component,
33 |       ...props
34 |     } = this.props;
35 |     let className = this.constructor.stylesheet.asClassName(variant);
36 |     if (extraClassName) {
37 |       className = className + ' ' + extraClassName;
38 |     }
39 |     return (
40 |       <Component
41 |         {...props}
42 |         className={className}
43 |         />
44 |     );
45 |   }
46 | 
47 |   componentWillMount() {
48 |     this.constructor.stylesheet.use();
49 |   }
50 | 
51 |   componentWillUnmount() {
52 |     this.constructor.stylesheet.dispose();
53 |   }
54 | }
55 | 


--------------------------------------------------------------------------------
/Makefile:
--------------------------------------------------------------------------------
 1 | .DELETE_ON_ERROR:
 2 | 
 3 | BIN           = ./node_modules/.bin
 4 | TESTS         = $(shell find src -path '*/__tests__/*-test.js')
 5 | SRC           = $(filter-out $(TESTS), $(shell find src -name '*.js')) $(wildcard src/*.js.flow)
 6 | LIB           = $(SRC:src/%.js=lib/%.js) $(SRC:src/%.js.flow=lib/%.js.flow) lib/CSS.js.flow
 7 | NODE          = $(BIN)/babel-node $(BABEL_OPTIONS)
 8 | MOCHA_OPTIONS = --require ./src/__tests__/setup.js
 9 | MOCHA         = $(BIN)/_mocha $(MOCHA_OPTIONS)
10 | NYC_OPTIONS   = --all --require babel-core/register
11 | NYC           = $(BIN)/nyc $(NYC_OPTIONS)
12 | 
13 | build:
14 | 	@$(MAKE) -j 8 $(LIB)
15 | 
16 | lint:
17 | 	@$(BIN)/eslint src
18 | 
19 | test::
20 | 	@NODE_ENV=test $(BIN)/babel-node $(MOCHA) -- $(TESTS)
21 | 
22 | ci:
23 | 	@NODE_ENV=test $(BIN)/babel-node $(MOCHA) --watch -- $(TESTS)
24 | 
25 | test-cov::
26 | 	@NODE_ENV=test $(NYC) --check-coverage $(MOCHA) -- $(TESTS)
27 | 
28 | test-flow::
29 | 	@(cd test_flow/ && npm install && $(BIN)/flow check)
30 | 
31 | report-cov::
32 | 	@$(BIN)/nyc report --reporter html
33 | 
34 | report-cov-coveralls::
35 | 	@$(BIN)/nyc report --reporter=text-lcov | $(BIN)/coveralls
36 | 
37 | version-major version-minor version-patch: lint test
38 | 	@npm version $(@:version-%=%)
39 | 
40 | publish: build test lint
41 | 	@npm publish
42 | 	@git push --tags origin HEAD:master
43 | 
44 | clean:
45 | 	@rm -rf lib/
46 | 
47 | lib/%.js: src/%.js
48 | 	@echo "Building $<"
49 | 	@mkdir -p $(@D)
50 | 	@$(BIN)/babel $(BABEL_OPTIONS) -o $@ $<
51 | 
52 | lib/%.js.flow: src/%.js.flow
53 | 	@echo "Building $<"
54 | 	@mkdir -p $(@D)
55 | 	@cp $< $@
56 | 
57 | lib/CSS.js.flow: src/CSS.js
58 | 	@echo "Building $<"
59 | 	@mkdir -p $(@D)
60 | 	@cp $< $@
61 | 


--------------------------------------------------------------------------------
/src/__tests__/index-test.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * @copyright 2015 Prometheus Research, LLC
 3 |  */
 4 | 
 5 | import React from 'react';
 6 | import {style, create, isStylesheet} from '../';
 7 | 
 8 | describe('index', function() {
 9 | 
10 |   describe('style(...)', function() {
11 | 
12 |     it('creates a component with a stylesheet attached', function() {
13 |       let Component = 'div';
14 |       let Styled = style(Component, {width: 10});
15 |       assert(Styled.Component === 'div');
16 |       assert(Styled.stylesheet.style.base.width === 10);
17 |       assert(Styled.displayName === 'Styled(div)');
18 |     });
19 | 
20 |     it('allows to override displayName', function() {
21 |       let Component = 'div';
22 |       let Styled = style(Component, {width: 10}, 'CustomDisplayName');
23 |       assert(Styled.displayName === 'CustomDisplayName');
24 |     });
25 | 
26 |     it('allows to override displayName via stylesheet spec', function() {
27 |       let Component = 'div';
28 |       let Styled = style(Component, {
29 |         width: 10,
30 |         displayName: 'CustomDisplayName'
31 |       });
32 |       assert(Styled.displayName === 'CustomDisplayName');
33 |     });
34 | 
35 |     it('delegates to style() method if component has it', function() {
36 |       class Component extends React.Component {
37 | 
38 |         render() {
39 |           return <div className={this.props.className} />;
40 |         }
41 | 
42 |         static style(_stylesheet) {
43 |           return 'span';
44 |         }
45 |       }
46 | 
47 |       let Styled = style(Component, {width: 10});
48 |       assert(Styled === 'span');
49 |     });
50 | 
51 |   });
52 | 
53 |   describe('create(...)', function() {
54 | 
55 |     it('creates a new stylesheet', function() {
56 |       let stylesheet = create({width: 10});
57 |       assert(isStylesheet(stylesheet));
58 |     });
59 | 
60 |   });
61 | 
62 | });
63 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "react-dom-stylesheet",
 3 |   "version": "0.8.8",
 4 |   "description": "Stylesheets for React DOM elements",
 5 |   "main": "lib/index.js",
 6 |   "scripts": {
 7 |     "test": "make test"
 8 |   },
 9 |   "repository": {
10 |     "type": "git",
11 |     "url": "git+https://github.com/prometheusresearch/react-dom-stylesheet.git"
12 |   },
13 |   "keywords": [
14 |     "react",
15 |     "stylesheet",
16 |     "dom"
17 |   ],
18 |   "babel": {
19 |     "presets": [
20 |       "prometheusresearch"
21 |     ]
22 |   },
23 |   "eslintConfig": {
24 |     "extends": "prometheusresearch"
25 |   },
26 |   "nyc": {
27 |     "exclude": [
28 |       "*.js",
29 |       "lib/*.js",
30 |       "coverage/*.js",
31 |       "**/__tests__/*.js"
32 |     ]
33 |   },
34 |   "author": "Prometheus Research, LLC",
35 |   "license": "MIT",
36 |   "bugs": {
37 |     "url": "https://github.com/prometheusresearch/react-dom-stylesheet/issues"
38 |   },
39 |   "homepage": "https://github.com/prometheusresearch/react-dom-stylesheet#readme",
40 |   "peerDependencies": {
41 |     "react": "^0.14.0 || ^15.0.0"
42 |   },
43 |   "devDependencies": {
44 |     "babel-cli": "^6.6.5",
45 |     "babel-core": "^6.6.5",
46 |     "babel-preset-prometheusresearch": "^0.1.0",
47 |     "eslint": "^2.4.0",
48 |     "eslint-config-prometheusresearch": "^0.2.0",
49 |     "eslint-plugin-react": "^6.1.2",
50 |     "flow-bin": "^0.32.0",
51 |     "invariant": "^2.2.1",
52 |     "jsdom": "^8.1.0",
53 |     "mocha": "^2.4.5",
54 |     "nyc": "^6.1.1",
55 |     "power-assert": "^1.3.1",
56 |     "react": "^0.14.0 || ^15.0.0",
57 |     "react-dom": "^0.14.0 || ^15.0.0",
58 |     "sinon": "^1.17.3",
59 |     "react-addons-test-utils": "^15.4.1"
60 |   },
61 |   "dependencies": {
62 |     "inline-style-prefix-all": "^2.0.2",
63 |     "lodash": "^4.13.1",
64 |     "murmurhash-js": "^1.0.0",
65 |     "react-css-property-operations": "^15.4.1",
66 |     "style-loader": "^0.13.0"
67 |   }
68 | }
69 | 


--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * @copyright 2015 Prometheus Research, LLC
 3 |  */
 4 | 
 5 | import {isStylesheet, create} from './DOMStylesheet';
 6 | import StyleableDOMComponent from './StyleableDOMComponent';
 7 | import getComponentDisplayName from './getComponentDisplayName';
 8 | 
 9 | export function style(Component, stylesheetSpec, options) {
10 |   if (options == null) {
11 |     options = {};
12 |   } else if (typeof options === 'string') {
13 |     options = {displayName: options};
14 |   }
15 | 
16 |   let {
17 |     displayName: displayNameFromSpec,
18 |     ...stylesheet
19 |   } = stylesheetSpec;
20 | 
21 |   options = {
22 |     displayName: displayNameFromSpec,
23 |     ...options
24 |   };
25 | 
26 |   if (Component.style) {
27 |     return Component.style(stylesheet, options.displayName);
28 |   } else {
29 |     return wrapWithStylesheet(Component, stylesheet, options);
30 |   }
31 | }
32 | 
33 | /**
34 |  * Produce a new component by applying a stylesheet.
35 |  */
36 | export function wrapWithStylesheet(Component, stylesheet, options) {
37 |   if (options == null) {
38 |     options = {};
39 |   } else if (typeof options === 'string') {
40 |     options = {displayName: options};
41 |   }
42 | 
43 |   if (!isStylesheet(stylesheet)) {
44 |     let id = options.displayName || getComponentDisplayName(Component);
45 |     stylesheet = create(stylesheet, id);
46 |   }
47 |   return class extends StyleableDOMComponent {
48 |     static displayName = getDisplayName(Component, options.displayName);
49 |     static Component = Component;
50 |     static stylesheet = stylesheet;
51 |   };
52 | }
53 | 
54 | const STYLED_DISPLAY_NAME_RE = /^Styled\(.+\)$/;
55 | 
56 | function getDisplayName(Component, displayName) {
57 |   if (displayName != null) {
58 |     return displayName;
59 |   }
60 |   displayName = getComponentDisplayName(Component);
61 |   if (STYLED_DISPLAY_NAME_RE.exec(displayName)) {
62 |     return displayName;
63 |   } else {
64 |     return `Styled(${displayName})`;
65 |   }
66 | }
67 | 
68 | export {StyleableDOMComponent, isStylesheet, create};
69 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # React DOM Stylesheet
  2 | 
  3 | A simple yet powerful way to define styled React DOM components.
  4 | 
  5 | ## Installation
  6 | 
  7 | ```
  8 | % npm install react-dom-stylesheet
  9 | ```
 10 | 
 11 | ## Usage
 12 | 
 13 | Basic usage:
 14 | 
 15 | ```
 16 | import {style} from 'react-dom-stylesheet'
 17 | 
 18 | let Label = style('span', {
 19 |   fontWeight: 'bold',
 20 |   fontSize: '12pt',
 21 | })
 22 | ```
 23 | 
 24 | Now `Label` is a regular React component styled with `fontWeight` and
 25 | `fontSize`. You can render into DOM and use as a part of React element tree:
 26 | 
 27 | ```
 28 | <Label />
 29 | ```
 30 | 
 31 | ### Pseudoclasses
 32 | 
 33 | Pseudoclasses are supported:
 34 | 
 35 | ```
 36 | let Label = style('span', {
 37 |   fontWeight: 'bold',
 38 |   fontSize: '12pt',
 39 |   hover: {
 40 |     textDecoration: 'underline'
 41 |   }
 42 | })
 43 | ```
 44 | 
 45 | Now on hover you can see the underline appears.
 46 | 
 47 | But you can always force any pseudoclass to appear from JS by passing a
 48 | specially constructed `variant` prop:
 49 | 
 50 | ```
 51 | <Label variant={{hover: true}} />
 52 | ```
 53 | 
 54 | ### Variants
 55 | 
 56 | Sometimes you want a set of style variants and toggle them via JS:
 57 | 
 58 | ```
 59 | let Label = style('span', {
 60 |   fontWeight: 'bold',
 61 |   fontSize: '12pt',
 62 |   emphasis: {
 63 |     textDecoration: 'underline'
 64 |   }
 65 | })
 66 | ```
 67 | 
 68 | Now to toggle any particular variant you need to pass a component a specially
 69 | constructed `variant` prop:
 70 | 
 71 | ```
 72 | <Label variant={{emphasis: true}} />
 73 | ```
 74 | 
 75 | This is very similar to pseudoclass example above and in fact pseudoclasses are
 76 | also variants.
 77 | 
 78 | ## CSS helpers
 79 | 
 80 | There's helpers for producing CSS values:
 81 | 
 82 | ```
 83 | import * as css from 'react-dom-stylesheet/css'
 84 | 
 85 | let Label = style('span', {
 86 |   fontWeight: css.fontWeight.bold,
 87 |   border: css.border(1, css.rgb(167)),
 88 | })
 89 | ```
 90 | 
 91 | ## Component factories
 92 | 
 93 | Component factories for DOM components provided for convenience:
 94 | 
 95 | ```
 96 | import * as css from 'react-dom-stylesheet/css'
 97 | import {span} from 'react-dom-stylesheet/component'
 98 | 
 99 | let Label = span({
100 |   fontWeight: css.fontWeight.bold,
101 |   border: css.border(1, css.rgb(167)),
102 | })
103 | ```
104 | 


--------------------------------------------------------------------------------
/src/__tests__/StyleableDOMComponent-test.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * @copyright 2015 Prometheus Research, LLC
 3 |  */
 4 | 
 5 | import React                  from 'react';
 6 | import ReactDOM               from 'react-dom';
 7 | import TestUtils              from 'react-addons-test-utils';
 8 | import Sinon                  from 'sinon';
 9 | import StyleableDOMComponent  from '../StyleableDOMComponent';
10 | 
11 | describe('StyleableDOMComponent', function() {
12 | 
13 |   let defaultStylesheet;
14 |   let Component;
15 |   let component;
16 |   let element;
17 | 
18 |   function create(className = 'class') {
19 |     return {
20 |       asClassName: Sinon.stub().returns(className),
21 |       use: Sinon.spy(),
22 |       dispose: Sinon.spy(),
23 |     };
24 |   }
25 | 
26 |   function mount(props) {
27 |     defaultStylesheet = create('default');
28 | 
29 |     Component = class extends StyleableDOMComponent {
30 |       static stylesheet = defaultStylesheet;
31 |       static Component = 'span';
32 |     }
33 | 
34 |     component = TestUtils.renderIntoDocument(<Component {...props} />);
35 |     element = ReactDOM.findDOMNode(component);
36 |     return element;
37 |   }
38 | 
39 |   function update(props) {
40 |     ReactDOM.render(<Component {...props} />, element.parentNode);
41 |   }
42 | 
43 |   function unmount() {
44 |     if (element.parentNode) {
45 |       ReactDOM.unmountComponentAtNode(element.parentNode);
46 |     }
47 |   }
48 | 
49 |   it('renders provided Component with the provided stylesheet', function() {
50 |     mount();
51 |     assert(element.classList.contains('default'));
52 |     assert(element.tagName === 'SPAN');
53 |     unmount();
54 |   });
55 | 
56 |   it('uses and disposes stylesheet', function() {
57 |     mount();
58 |     assert(element.classList.contains('default'));
59 |     assert(defaultStylesheet.use.calledOnce);
60 |     assert(!defaultStylesheet.dispose.called);
61 |     unmount();
62 |     assert(defaultStylesheet.use.calledOnce);
63 |     assert(defaultStylesheet.dispose.calledOnce);
64 |     unmount();
65 |   });
66 | 
67 |   it('allows to override DOM component via props', function() {
68 |     let element = mount({Component: 'div'});
69 |     assert(element.tagName === 'DIV');
70 |     unmount();
71 |   });
72 | 
73 |   it('allows setting custom className', function() {
74 |     let element = mount({className: 'custom'});
75 |     assert(element.classList.contains('default'));
76 |     assert(element.classList.contains('custom'));
77 |     unmount();
78 |   });
79 | 
80 |   it('allows variants', function() {
81 |     let variant = {};
82 |     let element = mount({variant});
83 |     assert(defaultStylesheet.asClassName.calledOnce);
84 |     assert(defaultStylesheet.asClassName.firstCall.args.length === 1);
85 |     assert(defaultStylesheet.asClassName.firstCall.args[0] === variant);
86 |     unmount();
87 |   });
88 | });
89 | 


--------------------------------------------------------------------------------
/src/CSS.js:
--------------------------------------------------------------------------------
  1 | /**
  2 |  * @copyright 2015+, Prometheus Research, LLC
  3 |  * @flow
  4 |  */
  5 | 
  6 | import invariant from 'invariant';
  7 | 
  8 | export function boxShadow(
  9 |   offsetX: number,
 10 |   offsetY: number,
 11 |   blurRadius: number,
 12 |   spreadRadius: number,
 13 |   color: string
 14 | ): string {
 15 |   if (color === none || color === null) {
 16 |     return none;
 17 |   }
 18 |   return `${offsetX}px ${offsetY}px ${blurRadius}px ${spreadRadius}px ${color}`;
 19 | }
 20 | 
 21 | export function insetBoxShadow(
 22 |   offsetX: number,
 23 |   offsetY: number,
 24 |   blurRadius: number,
 25 |   spreadRadius: number,
 26 |   color: string
 27 | ): string {
 28 |   if (color === none || color === null) {
 29 |     return none;
 30 |   }
 31 |   return `inset ${boxShadow(offsetX, offsetY, blurRadius, spreadRadius, color)}`;
 32 | }
 33 | 
 34 | export function textShadow(
 35 |   offsetX: number,
 36 |   offsetY: number,
 37 |   blurRadius: number,
 38 |   color: string
 39 | ): string {
 40 |   if (color === none || color === null) {
 41 |     return none;
 42 |   }
 43 |   return `${offsetX}px ${offsetY}px ${blurRadius}px ${color}`;
 44 | }
 45 | 
 46 | export function rgba(r: number, g: number, b?: number, a?: number): string {
 47 |   if (b == null && a == null) {
 48 |     a = g;
 49 |     g = r;
 50 |     b = r;
 51 |   }
 52 |   if (b == null || a == null) {
 53 |     invariant(false, 'Invalid color format: rgba(%s, %s, %s, %s)', r, g, b, a);
 54 |   }
 55 |   return `rgba(${r}, ${g}, ${b}, ${a})`;
 56 | }
 57 | 
 58 | export function rgb(r: number, g?: number, b?: number) {
 59 |   if (g == null && b == null) {
 60 |     g = r;
 61 |     b = r;
 62 |   }
 63 |   if (g == null || b == null) {
 64 |     invariant(false, 'Invalid color format: rgb(%s, %s, %s)', r, g, b);
 65 |   }
 66 |   return `rgb(${r}, ${g}, ${b})`;
 67 | }
 68 | 
 69 | export function border(width: number, style: string, color?: string): string {
 70 |   if (color === undefined) {
 71 |     color = style;
 72 |     style = border.solid;
 73 |   }
 74 |   if (color === none || color === null) {
 75 |     return none;
 76 |   }
 77 |   return `${width}px ${style} ${color}`;
 78 | }
 79 | 
 80 | border.solid = 'solid';
 81 | 
 82 | export function linearGradient(
 83 |   direction: string,
 84 |   ...colorStops: Array<{color: string; value: string}>
 85 | ): string {
 86 |   let colorStopsStr = colorStops
 87 |     .map(p => typeof p === 'string' ? p : `${p.color} ${p.value}`)
 88 |     .join(', ');
 89 |   return `linear-gradient(${direction}, ${colorStopsStr})`;
 90 | }
 91 | 
 92 | export function transform(duration: string): string {
 93 |   return `transform ${duration}s`;
 94 | }
 95 | 
 96 | export function translate3d(x: number, y: number, z: number): string {
 97 |   return `translate3d(${x}px, ${y}px, ${z}px)`;
 98 | }
 99 | 
100 | function sizeSeq(...args: Array<number>): string {
101 |   return args
102 |     .map(arg => typeof arg === 'string' ? arg : `${arg}px`)
103 |     .join(' ');
104 | }
105 | 
106 | export function multi(...args: Array<string>): string {
107 |   return args.filter(item => item !== none).join(', ');
108 | }
109 | 
110 | export let padding = sizeSeq;
111 | export let margin = sizeSeq;
112 | 
113 | export let position = {
114 |   absolute: 'absolute',
115 |   relative: 'relative',
116 |   fixed: 'fixed',
117 | };
118 | 
119 | export let display = {
120 |   block: 'block',
121 |   inlineBlock: 'inline-block',
122 |   flex: 'flex',
123 |   inlineFlex: 'inline-flex',
124 |   inline: 'inline',
125 | };
126 | 
127 | export let cursor = {
128 |   pointer: 'pointer',
129 |   default: 'default',
130 | };
131 | 
132 | export let overflow = {
133 |   auto: 'auto',
134 |   hidden: 'hidden',
135 |   scroll: 'scroll',
136 | };
137 | 
138 | export let textAlign = {
139 |   center: 'center',
140 |   left: 'left',
141 |   right: 'right',
142 | };
143 | 
144 | export let verticalAlign = {
145 |   middle: 'middle',
146 |   baseline: 'baseline',
147 |   sub: 'sub',
148 |   super: 'super',
149 |   top: 'top',
150 |   bottom: 'bottom',
151 | };
152 | 
153 | export let fontWeight = {
154 |   bold: 'bold',
155 |   normal: 'normal',
156 | };
157 | 
158 | export let touchAction = {
159 |   manipulation: 'manipulation',
160 | };
161 | 
162 | export let none = 'none';
163 | 
164 | export let auto = 'auto';
165 | 
166 | export let whiteSpace = {
167 |   nowrap: 'nowrap',
168 | };
169 | 
170 | export let textDecoration = {
171 |   none: 'none',
172 |   underline: 'underline',
173 | };
174 | 
175 | export let textOverflow = {
176 |   ellipsis: 'ellipsis',
177 | };
178 | 
179 | export let textTransform = {
180 |   none: 'none',
181 |   capitalize: 'capitalize',
182 |   uppercase: 'uppercase',
183 |   lowercase: 'lowercase',
184 |   fullWidth: 'full-width',
185 | };
186 | 
187 | export let color = {
188 |   transparent: 'transparent',
189 | };
190 | 


--------------------------------------------------------------------------------
/src/component.js:
--------------------------------------------------------------------------------
  1 | /**
  2 |  * @copyright 2016-present Prometheus Research, LLC
  3 |  */
  4 | 
  5 | import {style} from './index';
  6 | 
  7 | function createStyleFactory(Component) {
  8 |   return stylesheet => style(Component, stylesheet);
  9 | }
 10 | 
 11 | export let a = createStyleFactory('a');
 12 | export let abbr = createStyleFactory('abbr');
 13 | export let acronym = createStyleFactory('acronym');
 14 | export let address = createStyleFactory('address');
 15 | export let area = createStyleFactory('area');
 16 | export let article = createStyleFactory('article');
 17 | export let aside = createStyleFactory('aside');
 18 | export let b = createStyleFactory('b');
 19 | export let base = createStyleFactory('base');
 20 | export let basefont = createStyleFactory('basefont');
 21 | export let big = createStyleFactory('big');
 22 | export let blink = createStyleFactory('blink');
 23 | export let blockquote = createStyleFactory('blockquote');
 24 | export let body = createStyleFactory('body');
 25 | export let br = createStyleFactory('br');
 26 | export let button = createStyleFactory('button');
 27 | export let canvas = createStyleFactory('canvas');
 28 | export let caption = createStyleFactory('caption');
 29 | export let center = createStyleFactory('center');
 30 | export let cite = createStyleFactory('cite');
 31 | export let code = createStyleFactory('code');
 32 | export let h1 = createStyleFactory('h1');
 33 | export let h2 = createStyleFactory('h2');
 34 | export let h3 = createStyleFactory('h3');
 35 | export let h4 = createStyleFactory('h4');
 36 | export let h5 = createStyleFactory('h5');
 37 | export let h6 = createStyleFactory('h6');
 38 | export let col = createStyleFactory('col');
 39 | export let colgroup = createStyleFactory('colgroup');
 40 | export let command = createStyleFactory('command');
 41 | export let content = createStyleFactory('content');
 42 | export let dd = createStyleFactory('dd');
 43 | export let del = createStyleFactory('del');
 44 | export let details = createStyleFactory('details');
 45 | export let dialog = createStyleFactory('dialog');
 46 | export let dir = createStyleFactory('dir');
 47 | export let div = createStyleFactory('div');
 48 | export let dl = createStyleFactory('dl');
 49 | export let dt = createStyleFactory('dt');
 50 | export let em = createStyleFactory('em');
 51 | export let fieldset = createStyleFactory('fieldset');
 52 | export let figcaption = createStyleFactory('figcaption');
 53 | export let figure = createStyleFactory('figure');
 54 | export let font = createStyleFactory('font');
 55 | export let footer = createStyleFactory('footer');
 56 | export let form = createStyleFactory('form');
 57 | export let frame = createStyleFactory('frame');
 58 | export let frameset = createStyleFactory('frameset');
 59 | export let head = createStyleFactory('head');
 60 | export let header = createStyleFactory('header');
 61 | export let hgroup = createStyleFactory('hgroup');
 62 | export let hr = createStyleFactory('hr');
 63 | export let html = createStyleFactory('html');
 64 | export let i = createStyleFactory('i');
 65 | export let iframe = createStyleFactory('iframe');
 66 | export let image = createStyleFactory('image');
 67 | export let img = createStyleFactory('img');
 68 | export let input = createStyleFactory('input');
 69 | export let ins = createStyleFactory('ins');
 70 | export let label = createStyleFactory('label');
 71 | export let legend = createStyleFactory('legend');
 72 | export let li = createStyleFactory('li');
 73 | export let link = createStyleFactory('link');
 74 | export let listing = createStyleFactory('listing');
 75 | export let main = createStyleFactory('main');
 76 | export let map = createStyleFactory('map');
 77 | export let mark = createStyleFactory('mark');
 78 | export let menu = createStyleFactory('menu');
 79 | export let menuitem = createStyleFactory('menuitem');
 80 | export let meter = createStyleFactory('meter');
 81 | export let multicol = createStyleFactory('multicol');
 82 | export let nav = createStyleFactory('nav');
 83 | export let ol = createStyleFactory('ol');
 84 | export let optgroup = createStyleFactory('optgroup');
 85 | export let option = createStyleFactory('option');
 86 | export let output = createStyleFactory('output');
 87 | export let p = createStyleFactory('p');
 88 | export let picture = createStyleFactory('picture');
 89 | export let pre = createStyleFactory('pre');
 90 | export let progress = createStyleFactory('progress');
 91 | export let q = createStyleFactory('q');
 92 | export let rp = createStyleFactory('rp');
 93 | export let rt = createStyleFactory('rt');
 94 | export let rtc = createStyleFactory('rtc');
 95 | export let s = createStyleFactory('s');
 96 | export let samp = createStyleFactory('samp');
 97 | export let section = createStyleFactory('section');
 98 | export let select = createStyleFactory('select');
 99 | export let small = createStyleFactory('small');
100 | export let span = createStyleFactory('span');
101 | export let strike = createStyleFactory('strike');
102 | export let strong = createStyleFactory('strong');
103 | export let sub = createStyleFactory('sub');
104 | export let summary = createStyleFactory('summary');
105 | export let sup = createStyleFactory('sup');
106 | export let table = createStyleFactory('table');
107 | export let tbody = createStyleFactory('tbody');
108 | export let td = createStyleFactory('td');
109 | export let textarea = createStyleFactory('textarea');
110 | export let tfoot = createStyleFactory('tfoot');
111 | export let th = createStyleFactory('th');
112 | export let thead = createStyleFactory('thead');
113 | export let time = createStyleFactory('time');
114 | export let title = createStyleFactory('title');
115 | export let tr = createStyleFactory('tr');
116 | export let tt = createStyleFactory('tt');
117 | export let u = createStyleFactory('u');
118 | export let ul = createStyleFactory('ul');
119 | 


--------------------------------------------------------------------------------
/src/__tests__/DOMStylesheet-test.js:
--------------------------------------------------------------------------------
  1 | /**
  2 |  * @copyright 2015 Prometheus Research, LLC
  3 |  */
  4 | 
  5 | import assert from 'power-assert';
  6 | import * as DOMStylesheet from '../DOMStylesheet';
  7 | 
  8 | function assertCSS(css, ...expectations) {
  9 |   css = css.split('\n');
 10 |   assert(css.length === expectations.length);
 11 |   expectations.forEach((expectation, idx) => {
 12 |     let pattern = new RegExp(`^${expectation.replace(/UNIQ/g, '\\d+')}$`);
 13 |     assert(pattern.exec(css[idx]));
 14 |   });
 15 | }
 16 | 
 17 | function assertClassName(className, ...expectations) {
 18 |   expectations = expectations.map(expectation =>
 19 |     expectation.replace(/UNIQ/g, '\\d+'));
 20 |   let pattern = new RegExp(`^${expectations.join(' ')}$`);
 21 |   assert(pattern.exec(className));
 22 | }
 23 | 
 24 | describe('DOMStylesheet', function() {
 25 | 
 26 |   it('compiles style representation to CSS', function() {
 27 |     let style = DOMStylesheet.create({
 28 |       width: 10,
 29 |       color: 'red',
 30 |     }, 'style');
 31 |     assertCSS(style.css,
 32 |       '.style--UNIQ { box-sizing:border-box;width:10px;color:red;-moz-box-sizing:border-box; }'
 33 |     );
 34 |     assertClassName(style.asClassName(),
 35 |       'style--UNIQ'
 36 |     );
 37 |   });
 38 | 
 39 |   it('allows custom ids', function() {
 40 |     let style = DOMStylesheet.create({
 41 |       color: 'red',
 42 |     }, 'button');
 43 |     assertCSS(style.css,
 44 |       '.button--UNIQ { box-sizing:border-box;color:red;-moz-box-sizing:border-box; }'
 45 |     );
 46 |     assertClassName(style.asClassName(),
 47 |       'button--UNIQ'
 48 |     );
 49 |   });
 50 | 
 51 | 
 52 |   it('lift values to CSS with toCSS() method call', function() {
 53 |     class Width {
 54 |       toCSS() {
 55 |         return 42;
 56 |       }
 57 |     }
 58 |     class Color {
 59 |       toCSS() {
 60 |         return 'white';
 61 |       }
 62 |     }
 63 |     assertCSS(
 64 |       DOMStylesheet.create({
 65 |         color: ['red', new Color()],
 66 |         width: new Width(),
 67 |       }, 'style').css,
 68 |       '.style--UNIQ { box-sizing:border-box;color:red;color:white;width:42px;-moz-box-sizing:border-box; }'
 69 |     );
 70 |   });
 71 | 
 72 |   it('autoprefixes', function() {
 73 |     assertCSS(
 74 |       DOMStylesheet.create({
 75 |         display: 'flex',
 76 |       }, 'style').css,
 77 |       '.style--UNIQ { box-sizing:border-box;display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:-webkit-flex;display:flex;-moz-box-sizing:border-box; }'
 78 |     );
 79 |   });
 80 | 
 81 |   it('compiles arrays into multiple values', function() {
 82 |     assertCSS(
 83 |       DOMStylesheet.create({
 84 |         color: ['red', 'white'],
 85 |         width: [1, 10],
 86 |       }, 'style').css,
 87 |       '.style--UNIQ { box-sizing:border-box;color:red;color:white;width:1px;width:10px;-moz-box-sizing:border-box; }'
 88 |     );
 89 |     assertCSS(
 90 |       DOMStylesheet.create({
 91 |         color: [],
 92 |         width: [1, 10],
 93 |       }, 'style').css,
 94 |       '.style--UNIQ { box-sizing:border-box;color:;width:1px;width:10px;-moz-box-sizing:border-box; }'
 95 |     );
 96 |   });
 97 | 
 98 |   it('compiles pseudo classes', function() {
 99 |     let style = DOMStylesheet.create({
100 |       focus: {
101 |         color: 'red',
102 |       }
103 |     }, 'style');
104 |     assertCSS(style.css,
105 |       '.style--UNIQ { box-sizing:border-box;-moz-box-sizing:border-box; }',
106 |       '.style--focus--UNIQ, .style--UNIQ:focus { color:red; }'
107 |     );
108 |     assertClassName(style.asClassName(),
109 |       'style--UNIQ',
110 |     );
111 |     assertClassName(style.asClassName({focus: true}),
112 |       'style--UNIQ',
113 |       'style--focus--UNIQ',
114 |     );
115 |     assertClassName(style.asClassName({focus: false}),
116 |       'style--UNIQ',
117 |     );
118 |   });
119 | 
120 |   it('compiles arbitrary variant classes', function() {
121 |     let style = DOMStylesheet.create({
122 |       x: {
123 |         color: 'red',
124 |       }
125 |     }, 'style');
126 |     assertCSS(style.css,
127 |       '.style--UNIQ { box-sizing:border-box;-moz-box-sizing:border-box; }',
128 |       '.style--x--UNIQ { color:red; }',
129 |     );
130 |     assertClassName(style.asClassName(),
131 |       'style--UNIQ',
132 |     );
133 |     assertClassName(style.asClassName({x: true}),
134 |       'style--UNIQ',
135 |       'style--x--UNIQ',
136 |     );
137 |   });
138 | 
139 |   it('compiles arbitrary variant classes with nested variants', function() {
140 |     let style = DOMStylesheet.create({
141 |       x: {
142 |         color: 'red',
143 |         y: {
144 |           color: 'white'
145 |         }
146 |       }
147 |     }, 'style');
148 |     assertCSS(style.css,
149 |       '.style--UNIQ { box-sizing:border-box;-moz-box-sizing:border-box; }',
150 |       '.style--x--UNIQ { color:red; }',
151 |       '.style--x--y--UNIQ { color:white; }',
152 |     );
153 |     assertClassName(style.asClassName(),
154 |       'style--UNIQ',
155 |     );
156 |     assertClassName(style.asClassName({x: true}),
157 |       'style--UNIQ',
158 |       'style--x--UNIQ',
159 |     );
160 |     assertClassName(style.asClassName({x: true, y: true}),
161 |       'style--UNIQ',
162 |       'style--x--UNIQ',
163 |       'style--x--y--UNIQ',
164 |     );
165 |     assertClassName(style.asClassName({y: true}),
166 |       'style--UNIQ',
167 |     );
168 |   });
169 | 
170 |   it('compiles nested pseudoclasses variants', function() {
171 |     let style = DOMStylesheet.create({
172 |       firstChild: {
173 |         color: 'red',
174 |         hover: {
175 |           color: 'white'
176 |         }
177 |       }
178 |     }, 'style');
179 |     assertCSS(style.css,
180 |       '.style--UNIQ { box-sizing:border-box;-moz-box-sizing:border-box; }',
181 |       '.style--firstChild--UNIQ, .style--UNIQ:first-child { color:red; }',
182 |       '.style--firstChild--hover--UNIQ, .style--UNIQ:first-child:hover, .style--firstChild--UNIQ:hover { color:white; }',
183 |     );
184 |     assertClassName(style.asClassName(),
185 |       'style--UNIQ'
186 |     );
187 |     assertClassName(style.asClassName({firstChild: true}),
188 |       'style--UNIQ',
189 |       'style--firstChild--UNIQ',
190 |     );
191 |     assertClassName(style.asClassName({firstChild: true, hover: true}),
192 |       'style--UNIQ',
193 |       'style--firstChild--UNIQ',
194 |       'style--firstChild--hover--UNIQ',
195 |     );
196 |     assertClassName(style.asClassName({y: true}),
197 |       'style--UNIQ',
198 |     );
199 |   });
200 | 
201 |   it('compiles arbitrary variant classes with pseudoclasses', function() {
202 |     let style = DOMStylesheet.create({
203 |       x: {
204 |         color: 'red',
205 |         hover: {
206 |           color: 'white'
207 |         }
208 |       }
209 |     }, 'style');
210 |     assertCSS(style.css,
211 |       '.style--UNIQ { box-sizing:border-box;-moz-box-sizing:border-box; }',
212 |       '.style--x--UNIQ { color:red; }',
213 |       '.style--x--hover--UNIQ, .style--x--UNIQ:hover { color:white; }',
214 |     );
215 |     assertClassName(style.asClassName(),
216 |       'style--UNIQ'
217 |     );
218 |     assertClassName(style.asClassName({x: true}),
219 |       'style--UNIQ',
220 |       'style--x--UNIQ',
221 |     );
222 |     assertClassName(style.asClassName({x: true, hover: true}),
223 |       'style--UNIQ',
224 |       'style--x--UNIQ',
225 |       'style--x--hover--UNIQ',
226 |     );
227 |     assertClassName(style.asClassName({hover: true}),
228 |       'style--UNIQ',
229 |     );
230 |   });
231 | 
232 |   it('can be overriden with style spec', function() {
233 |     let style = DOMStylesheet.create({
234 |       background: 'white',
235 |       color: 'black',
236 |       x: {
237 |         color: 'red',
238 |       },
239 |       y: {
240 |         color: 'white',
241 |       }
242 |     }, 'style');
243 | 
244 |     assertCSS(style.css,
245 |       '.style--UNIQ { box-sizing:border-box;background:white;color:black;-moz-box-sizing:border-box; }',
246 |       '.style--x--UNIQ { color:red; }',
247 |       '.style--y--UNIQ { color:white; }',
248 |     );
249 | 
250 |     let overriden = style.override({
251 |       color: 'yellow',
252 |       x: {
253 |         color: 'x',
254 |         fontSize: '12pt',
255 |       },
256 |       z: {
257 |         x: 12
258 |       },
259 |     }, 'style');
260 | 
261 |     assertCSS(overriden.css,
262 |       '.style--UNIQ { box-sizing:border-box;background:white;color:yellow;-moz-box-sizing:border-box; }',
263 |       '.style--x--UNIQ { color:x;font-size:12pt; }',
264 |       '.style--y--UNIQ { color:white; }',
265 |       '.style--z--UNIQ { x:12px; }',
266 |     );
267 |   });
268 | 
269 |   it('preserves id when doing an override', function() {
270 |     let style = DOMStylesheet.create({
271 |       background: 'white',
272 |     }, 's');
273 |     assertCSS(style.css,
274 |       '.s--UNIQ { box-sizing:border-box;background:white;-moz-box-sizing:border-box; }',
275 |     );
276 |     let overriden = style.override({
277 |       background: 'red',
278 |     });
279 |     assertCSS(overriden.css,
280 |       '.s--UNIQ { box-sizing:border-box;background:red;-moz-box-sizing:border-box; }',
281 |     );
282 |   });
283 | 
284 |   it('allows to customize id when doing an override', function() {
285 |     let style = DOMStylesheet.create({
286 |       background: 'white',
287 |     }, 's');
288 |     assertCSS(style.css,
289 |       '.s--UNIQ { box-sizing:border-box;background:white;-moz-box-sizing:border-box; }',
290 |     );
291 |     let overriden = style.override({
292 |       background: 'red',
293 |     }, 'x');
294 |     assertCSS(overriden.css,
295 |       '.x--UNIQ { box-sizing:border-box;background:red;-moz-box-sizing:border-box; }',
296 |     );
297 |   });
298 | 
299 | });
300 | 


--------------------------------------------------------------------------------
/src/DOMStylesheet.js:
--------------------------------------------------------------------------------
  1 | /**
  2 |  * @copyright 2015 Prometheus Research, LLC
  3 |  */
  4 | 
  5 | import addStyleToDOM from 'style-loader/addStyles';
  6 | import createHash from 'murmurhash-js/murmurhash3_gc';
  7 | import prefix from 'inline-style-prefix-all';
  8 | import CSSPropertyOperations from 'react-css-property-operations';
  9 | import isArray from 'lodash/isArray';
 10 | import toDashCase from 'lodash/kebabCase';
 11 | import isPlainObject from 'lodash/isPlainObject';
 12 | 
 13 | /**
 14 |  * Special key which designates the rules which should be applied even if no
 15 |  * variant is being active.
 16 |  */
 17 | const BASE = 'base';
 18 | 
 19 | /**
 20 |  * Special key which is used to store className in mapping.
 21 |  */
 22 | const CLASSNAME = 'className';
 23 | 
 24 | /**
 25 |  * Styles we want to be added to every CSS class.
 26 |  */
 27 | const DEFAULT_STYLE = {
 28 |   boxSizing: 'border-box'
 29 | };
 30 | 
 31 | /**
 32 |  * Variant names we want to see compiled as CSS pseudo classes.
 33 |  */
 34 | const SUPPORTED_PSEUDO_CLASSES = {
 35 |   focus: true,
 36 |   hover: true,
 37 |   active: true,
 38 |   checked: true,
 39 |   default: true,
 40 |   disabled: true,
 41 |   empty: true,
 42 |   enabled: true,
 43 |   firstChild: true,
 44 |   firstOfType: true,
 45 |   fullscreen: true,
 46 |   indeterminate: true,
 47 |   invalid: true,
 48 |   lastChild: true,
 49 |   left: true,
 50 |   link: true,
 51 |   onlyChild: true,
 52 |   optional: true,
 53 |   required: true,
 54 |   right: true,
 55 |   root: true,
 56 |   scope: true,
 57 |   target: true,
 58 |   valid: true,
 59 |   visited: true,
 60 | };
 61 | 
 62 | /**
 63 |  * Create a new stylesheet from stylesheet spec.
 64 |  */
 65 | export function create(spec, id = 'style') {
 66 |   return new DOMStylesheet(parseSpecToStyle(spec), id);
 67 | }
 68 | 
 69 | /**
 70 |  * Check if object is a valida stylesheet.
 71 |  */
 72 | export function isStylesheet(obj) {
 73 |   return obj instanceof DOMStylesheet;
 74 | }
 75 | 
 76 | /**
 77 |  * Produce a new stylesheet by overriding an existing one with a new stylesheet
 78 |  * spec.
 79 |  */
 80 | function overrideStylesheet(stylesheet, override, id) {
 81 |   override = isStylesheet(override) ?
 82 |     override.style :
 83 |     parseSpecToStyle(override);
 84 |   if (id == null) {
 85 |     id = stylesheet.id;
 86 |   }
 87 |   let style = overrideStyle(stylesheet.style, override);
 88 |   return new DOMStylesheet(style, id);
 89 | }
 90 | 
 91 | function overrideStyle(style, override) {
 92 |   let nextStyle = {...style};
 93 |   for (let key in override) {
 94 |     if (!override.hasOwnProperty(key)) {
 95 |       continue;
 96 |     }
 97 |     if (key === BASE) {
 98 |       nextStyle[key] = {...nextStyle[key], ...override[key]};
 99 |     } else {
100 |       nextStyle[key] = overrideStyle(nextStyle[key], override[key]);
101 |     }
102 |   }
103 |   return nextStyle;
104 | }
105 | 
106 | function sanitizeID(id) {
107 |   return id.replace(/[^0-9a-zA-Z\-_]/g, '_');
108 | }
109 | 
110 | /**
111 |  * DOM stylesheet is a collection of classes which are applied to a single DOM
112 |  * element.
113 |  */
114 | class DOMStylesheet {
115 | 
116 |   constructor(style, id) {
117 |     this.style = style;
118 |     this.id = sanitizeID(id);
119 |     this.hash = createHash(JSON.stringify(this.style), 42);
120 |     this.uid = `${this.id}--${this.hash}`;
121 | 
122 |     this._refs = 0;
123 |     this._remove = null;
124 |     this._disposePerform = this._disposePerform.bind(this);
125 |     this._disposeTimer = null;
126 |     this._compiled_memoized = null;
127 |   }
128 | 
129 |   get _compiled() {
130 |     if (this._compiled_memoized === null) {
131 |       let {css, mapping} = compileStyle(this.style, this.id, this.hash);
132 |       this._compiled_memoized = {css: css.join('\n'), mapping};
133 |     }
134 |     return this._compiled_memoized;
135 |   }
136 | 
137 |   get css() {
138 |     return this._compiled.css;
139 |   }
140 | 
141 |   get mapping() {
142 |     return this._compiled.mapping;
143 |   }
144 | 
145 |   asClassName(variant = {}) {
146 |     return resolveVariantToClassName(this.mapping, variant).join(' ');
147 |   }
148 | 
149 |   use() {
150 |     this._refs = this._refs + 1;
151 |     if (this._disposeTimer !== null) {
152 |       clearTimeout(this._disposeTimer);
153 |       this._disposeTimer = null;
154 |     }
155 |     if (this._remove === null) {
156 |       this._remove = addStyleToDOM([[this.uid, this.css]]);
157 |     }
158 |     return this;
159 |   }
160 | 
161 |   dispose() {
162 |     this._refs = this._refs - 1;
163 |     if (this._disposeTimer === null) {
164 |       this._disposeTimer = setTimeout(this._disposePerform, 0);
165 |     }
166 |     return this;
167 |   }
168 | 
169 |   _disposePerform() {
170 |     if (this._refs < 1) {
171 |       this._remove();
172 |       this._remove = null;
173 |     }
174 |   }
175 | 
176 |   override(spec, id) {
177 |     return overrideStylesheet(this, spec, id);
178 |   }
179 | 
180 | }
181 | 
182 | /**
183 |  * Resolve variant to CSS class name.
184 |  */
185 | function resolveVariantToClassName(mapping, variant) {
186 |   let classList = [];
187 | 
188 |   for (let key in mapping) {
189 |     if (key === CLASSNAME) {
190 |       classList.push(mapping[key]);
191 |     } else if (variant[key]) {
192 |       let subClassList = resolveVariantToClassName(mapping[key], variant);
193 |       for (let i = 0; i < subClassList.length; i++) {
194 |         classList.push(subClassList[i]);
195 |       }
196 |     }
197 |   }
198 | 
199 |   return classList;
200 | }
201 | 
202 | /**
203 |  * Parse style spec to style object.
204 |  */
205 | function parseSpecToStyle(spec, root = true) {
206 |   let styleBase = root ? {...DEFAULT_STYLE} : {};
207 |   let style = {[BASE]: styleBase};
208 |   for (let key in spec) {
209 |     if (!spec.hasOwnProperty(key)) {
210 |       continue;
211 |     }
212 |     let item = spec[key];
213 |     if (isPlainObject(item)) {
214 |       style[key] = parseSpecToStyle(item, false);
215 |     } else {
216 |       styleBase[key] = item; //compileValue(key, item);
217 |     }
218 |   }
219 | 
220 |   style[BASE] = prefix(style[BASE]);
221 | 
222 |   for (let key in style[BASE]) {
223 |     if (!style[BASE].hasOwnProperty(key)) {
224 |       continue;
225 |     }
226 |     style[BASE][key] = compileValue(key, style[BASE][key]);
227 |   }
228 | 
229 |   return style;
230 | }
231 | 
232 | /**
233 |  * Compile style into CSS string with mapping from variant names to CSS class
234 |  * names.
235 |  */
236 | function compileStyle(style, id, hash, variants = []) {
237 |   let mapping = {};
238 |   let css = [];
239 |   let variant = variants.length === 0 ? null : variants[variants.length - 1];
240 |   for (let key in style) {
241 |     if (!style.hasOwnProperty(key)) {
242 |       continue;
243 |     }
244 |     let value = style[key];
245 |     if (key === BASE) {
246 |       let selector = compileSelector(id, hash, variants);
247 |       let [className] = selector;
248 |       css.push(compileClass(selector, value));
249 | 
250 |       if (variant !== null) {
251 |         mapping[variant] = mapping[variant] || {};
252 |         mapping[variant][CLASSNAME] = className;
253 |       } else {
254 |         mapping[CLASSNAME] = className;
255 |       }
256 | 
257 |     } else {
258 |       let subResult = compileStyle(value, id, hash, variants.concat(key));
259 |       mapping[key] = subResult.mapping;
260 |       css = css.concat(subResult.css);
261 |     }
262 |   }
263 |   return {css, mapping};
264 | }
265 | 
266 | /**
267 |  * Compile class name and rule set into CSS class.
268 |  */
269 | function compileClass(selector, ruleSet) {
270 |   let css = `${selector.map(item => '.' + item).join(', ')} { ${CSSPropertyOperations.createMarkupForStyles(ruleSet)} }`;
271 |   return css;
272 | }
273 | 
274 | function compileSelector(id, hash, path) {
275 |   if (path.length === 0) {
276 |     return [`${id}--${hash}`];
277 |   }
278 | 
279 |   if (!SUPPORTED_PSEUDO_CLASSES[path[path.length - 1]]) {
280 |     return [`${id}--${path.join('--')}--${hash}`];
281 |   }
282 | 
283 |   let cutIndex = -1;
284 |   for (let i = path.length - 1; i >= 0; i--) {
285 |     if (!SUPPORTED_PSEUDO_CLASSES[path[i]]) {
286 |       cutIndex = i;
287 |       break;
288 |     }
289 |   }
290 | 
291 |   let staticPath = path.slice(0, cutIndex + 1);
292 |   staticPath.unshift(id);
293 |   let variantPath = path.slice(cutIndex + 1);
294 | 
295 |   let selector = [];
296 | 
297 |   selector.push(`${staticPath.concat(variantPath).join('--')}--${hash}`);
298 |   for (let i = 0; i < variantPath.length; i++) {
299 |     let variant = variantPath.slice(i).map(toDashCase).join(':');
300 |     selector.push(`${staticPath.join('--')}--${hash}:${variant}`);
301 |     staticPath.push(variantPath[i]);
302 |   }
303 | 
304 |   return selector;
305 | }
306 | 
307 | // TODO: This is inefficient but we only hit this when we encounter arrays in
308 | // values. Still this will be fixed when we port all packages which use
309 | // react-dom-stylesheet to react-stylesheet.
310 | function dangerousStyleValue(key, value) {
311 |   let markup = CSSPropertyOperations.createMarkupForStyles({[key]: value});
312 |   let [_key, styleValue] = markup.split(':');
313 |   return styleValue.slice(0, styleValue.length - 1);
314 | }
315 | 
316 | function compileValue(key, value) {
317 |   let compiled = '';
318 |   if (isArray(value)) {
319 |     for (let i = 0; i < value.length; i++) {
320 |       if (i === 0) {
321 |         compiled += dangerousStyleValue(key, liftValue(value[i]));
322 |       } else {
323 |         compiled += ';' + key + ':' + dangerousStyleValue(key, liftValue(value[i]));
324 |       }
325 |     }
326 |   } else {
327 |     compiled = liftValue(value);
328 |   }
329 |   return compiled;
330 | }
331 | 
332 | function liftValue(value) {
333 |   return value && value.toCSS ? value.toCSS() : value;
334 | }
335 | 


--------------------------------------------------------------------------------