Skip to content
This repository has been archived by the owner on Aug 19, 2022. It is now read-only.

Commit

Permalink
Allow <Style> to be configured standalone
Browse files Browse the repository at this point in the history
Closes #463
  • Loading branch information
ianobermiller committed Jan 5, 2016
1 parent cc89d15 commit 4ea58fe
Showing 2 changed files with 34 additions and 10 deletions.
19 changes: 19 additions & 0 deletions src/__tests__/style-component-test.js
Original file line number Diff line number Diff line change
@@ -4,6 +4,8 @@ import {Style} from 'index';
import React from 'react';
import TestUtils from 'react-addons-test-utils';
import {expectCSS, getElement} from 'test-helpers';
const MSIE9_USER_AGENT =
'Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 7.1; Trident/5.0)';

describe('<Style> component', () => {
it('adds px suffix to properties that don\'t accept unitless values', () => {
@@ -18,6 +20,7 @@ describe('<Style> component', () => {
}
`);
});

it('doesn\'t add px suffix to properties that accept unitless values', () => {
const output = TestUtils.renderIntoDocument(
<Style rules={{div: {zIndex: 10}}} />
@@ -30,4 +33,20 @@ describe('<Style> component', () => {
}
`);
});

it('can be configured standalone', () => {
const output = TestUtils.renderIntoDocument(
<Style
radiumConfig={{userAgent: MSIE9_USER_AGENT}}
rules={{div: {transform: 'rotate(90)'}}}
/>
);

const style = getElement(output, 'style');
expectCSS(style, `
div {
-ms-transform: rotate(90);
}
`);
});
});
25 changes: 15 additions & 10 deletions src/components/style.js
Original file line number Diff line number Diff line change
@@ -2,16 +2,17 @@

import cssRuleSetToString from '../css-rule-set-to-string';

import React from 'react';
import React, {PropTypes} from 'react';

const Style = React.createClass({
propTypes: {
rules: React.PropTypes.object,
scopeSelector: React.PropTypes.string
radiumConfig: PropTypes.object,
rules: PropTypes.object,
scopeSelector: PropTypes.string
},

contextTypes: {
_radiumConfig: React.PropTypes.object
_radiumConfig: PropTypes.object
},

getDefaultProps(): {scopeSelector: string} {
@@ -21,6 +22,14 @@ const Style = React.createClass({
},

_buildStyles(styles: Object): string {
const userAgent = (
this.props.radiumConfig && this.props.radiumConfig.userAgent
) || (
this.context &&
this.context._radiumConfig &&
this.context._radiumConfig.userAgent
);

return Object.keys(styles).reduce((accumulator, selector) => {
const rules = styles[selector];

@@ -32,12 +41,8 @@ const Style = React.createClass({
this.props.scopeSelector + ' ' :
''
) + selector;
accumulator += cssRuleSetToString(
completeSelector,
rules,
this.context && this.context._radiumConfig &&
this.context._radiumConfig.userAgent
);

accumulator += cssRuleSetToString(completeSelector, rules, userAgent);
}

return accumulator;

0 comments on commit 4ea58fe

Please sign in to comment.