react-with-styles-interface-aphrodite - npm Package Compare ...

lib/aphroditeInterfaceWithRTLFactory.js

lib/utils/generateDirectionalStyles.js

lib/utils/resolve.js

lib/utils/resolveWithRTL.js

lib/utils/separateStyles.js

lib/utils/withRTLExtension.js

lib/with-rtl.js

src/aphroditeInterfaceWithRTLFactory.js

src/utils/generateDirectionalStyles.js

src/utils/resolve.js

src/utils/resolveWithRTL.js

src/utils/separateStyles.js

src/utils/withRTLExtension.js

src/with-rtl.js

test/aphroditeInterfaceWithRTLFactory_test.js

test/no-important_test.js

test/utils/generateDirectionalStyles_test.js

test/utils/resolve_test.js

test/utils/resolveWithRTL_test.js

test/utils/withRTLExtension_test.js

test/with-rtl_test.js

with-rtl.js

3

CHANGELOG.md

		@@ -0,1 +1,4 @@
		## v3.0.0
		- Revert default export to v1 version and export `with-rtl` interface in addition

		## v2.0.1
		@@ -2,0 +5,0 @@ - Add RTL support for borderLeftWidth, translateX, translate, and translate3d

10

lib/aphroditeInterface.js

		@@ -7,3 +7,3 @@ Object.defineProperty(exports, "__esModule", {

		var aphrodite = _interopRequireWildcard(_aphrodite);
		var _aphrodite2 = _interopRequireDefault(_aphrodite);

		@@ -14,10 +14,4 @@ var _aphroditeInterfaceFactory = require('./aphroditeInterfaceFactory');

		var _withRTLExtension = require('./withRTLExtension');

		var _withRTLExtension2 = _interopRequireDefault(_withRTLExtension);

		function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }

		function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj['default'] = obj; return newObj; } }

		exports['default'] = (0, _aphroditeInterfaceFactory2['default'])((0, _withRTLExtension2['default'])(aphrodite));
		exports['default'] = (0, _aphroditeInterfaceFactory2['default'])(_aphrodite2['default']);

147

lib/aphroditeInterfaceFactory.js

		@@ -5,70 +5,10 @@ Object.defineProperty(exports, "__esModule", {

		var _object = require('object.assign');

		var _object2 = _interopRequireDefault(_object);

		var _inject = require('aphrodite/lib/inject');

		var _util = require('aphrodite/lib/util');
		var _resolve2 = require('./utils/resolve');

		var _arrayFlatten = require('array-flatten');
		var _resolve3 = _interopRequireDefault(_resolve2);

		var _has = require('has');

		var _has2 = _interopRequireDefault(_has);

		var _withRTLExtension = require('./withRTLExtension');

		var _generateRTLStyles = require('./generateRTLStyles');

		var _generateRTLStyles2 = _interopRequireDefault(_generateRTLStyles);

		function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }

		function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } else { return Array.from(arr); } }

		function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; } /* eslint-disable no-underscore-dangle */


		// This function takes the array of styles and separates them into styles that
		// are handled by Aphrodite and inline styles.
		function separateStyles(stylesArray) {
		var aphroditeStyles = [];

		// Since determining if an Object is empty requires collecting all of its
		// keys, and we want the best performance in this code because we are in the
		// render path, we are going to do a little bookkeeping ourselves.
		var hasInlineStyles = false;
		var inlineStyles = {};

		// This is run on potentially every node in the tree when rendering, where
		// performance is critical. Normally we would prefer using `forEach`, but
		// old-fashioned for loops are faster so that's what we have chosen here.
		for (var i = 0; i < stylesArray.length; i++) {
		// eslint-disable-line no-plusplus
		var style = stylesArray[i];

		// If this style is falsey, we just want to disregard it. This allows for
		// syntax like:
		//
		// css(isFoo && styles.foo)
		if (style) {
		if ((0, _has2['default'])(style, '_name') && (0, _has2['default'])(style, '_definition')) {
		// This looks like a reference to an Aphrodite style object, so that's
		// where it goes.
		aphroditeStyles.push(style);
		} else {
		(0, _object2['default'])(inlineStyles, style);
		hasInlineStyles = true;
		}
		}
		}

		return {
		aphroditeStyles: aphroditeStyles,
		hasInlineStyles: hasInlineStyles,
		inlineStyles: inlineStyles
		};
		}

		exports['default'] = function (_ref /* aphrodite */) {
		@@ -85,62 +25,5 @@ var StyleSheet = _ref.StyleSheet,
		}(),


		// Styles is an array of properties returned by `create()`, a POJO, or an
		// array thereof. POJOs are treated as inline styles. The default resolve
		// method makes an effort to flip CSS styles for an RTL context.
		// This function returns an object to be spread onto an element.
		resolve: function () {
		function resolve(styles) {
		var flattenedStyles = (0, _arrayFlatten.from)(styles);

		var _separateStyles = separateStyles(flattenedStyles),
		aphroditeStyles = _separateStyles.aphroditeStyles,
		hasInlineStyles = _separateStyles.hasInlineStyles,
		inlineStyles = _separateStyles.inlineStyles;

		var stylesWithDirection = aphroditeStyles.map(function (stylesObj) {
		var definition = stylesObj._definition;
		var rtlStyles = (0, _generateRTLStyles2['default'])(definition);

		if (rtlStyles) {
		// This applies the rtlStyles whenever dir="rtl" is set. This is because
		// the interface knows nothing about the current directional context.
		definition = (0, _object2['default'])({}, definition, _defineProperty({}, _withRTLExtension.RTL_SELECTOR, rtlStyles));
		}

		return (0, _object2['default'])({}, stylesObj, {
		_definition: definition
		});
		});

		var result = {};
		if (hasInlineStyles) {
		var inlineRTLStyles = (0, _generateRTLStyles2['default'])(inlineStyles);

		if (inlineRTLStyles) {
		// Because we know nothing about the current directional context, there
		// is no way to determine whether or not the inline styles should be
		// flipped. As a result, if there are inline styles to be flipped, we
		// do so by converting them to classnames and providing styles in both
		// an RTL and an LTR context.
		// This may not work for all situations! For instance, when using inline
		// styles to animate a component with react-motion or animated.js,
		// converting to classes is likely to be way too slow. For those and
		// other edge-cases, consumers should rely on the resolveNoRTL method
		// instead.
		var stylesDef = (0, _object2['default'])(inlineStyles, _defineProperty({}, _withRTLExtension.RTL_SELECTOR, inlineRTLStyles));
		stylesWithDirection.push({
		_name: 'inlineStyles_' + String((0, _util.hashObject)(stylesDef)),
		_definition: stylesDef
		});
		} else {
		result.style = inlineStyles;
		}
		}

		if (stylesWithDirection.length > 0) {
		result.className = css.apply(undefined, _toConsumableArray(stylesWithDirection));
		}

		return result;
		return (0, _resolve3['default'])(css, styles);
		}
		@@ -150,27 +33,5 @@
		}(),


		// Styles is an array of properties returned by `create()`, a POJO, or an
		// array thereof. POJOs are treated as inline styles. This version of the
		// resolve function explicitly does no work to flip styles for an RTL context.
		// This function returns an object to be spread onto an element.
		resolveNoRTL: function () {
		function resolveNoRTL(styles) {
		var flattenedStyles = (0, _arrayFlatten.from)(styles);

		var _separateStyles2 = separateStyles(flattenedStyles),
		aphroditeStyles = _separateStyles2.aphroditeStyles,
		hasInlineStyles = _separateStyles2.hasInlineStyles,
		inlineStyles = _separateStyles2.inlineStyles;

		var result = {};
		if (aphroditeStyles.length > 0) {
		result.className = css.apply(undefined, _toConsumableArray(aphroditeStyles));
		}

		if (hasInlineStyles) {
		result.style = inlineStyles;
		}

		return result;
		return (0, _resolve3['default'])(css, styles);
		}
		@@ -177,0 +38,0 @@

10

lib/no-important.js

		@@ -7,3 +7,3 @@ Object.defineProperty(exports, "__esModule", {

		var aphrodite = _interopRequireWildcard(_noImportant);
		var _noImportant2 = _interopRequireDefault(_noImportant);

		@@ -14,10 +14,4 @@ var _aphroditeInterfaceFactory = require('./aphroditeInterfaceFactory');

		var _withRTLExtension = require('./withRTLExtension');

		var _withRTLExtension2 = _interopRequireDefault(_withRTLExtension);

		function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }

		function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj['default'] = obj; return newObj; } }

		exports['default'] = (0, _aphroditeInterfaceFactory2['default'])((0, _withRTLExtension2['default'])(aphrodite));
		exports['default'] = (0, _aphroditeInterfaceFactory2['default'])(_noImportant2['default']);

8

package.json

		{
		"name": "react-with-styles-interface-aphrodite",
		"version": "2.1.0",
		"version": "3.0.0",
		"description": "react-with-styles interface for Aphrodite",
		@@ -43,3 +43,3 @@ "main": "lib/aphroditeInterface.js",
		"airbnb-js-shims": "^1.0.1",
		"aphrodite": "^1.2.0",
		"aphrodite": "^1.2.4",
		"babel-cli": "^6.18.0",
		@@ -61,3 +61,5 @@ "babel-plugin-transform-replace-object-assign": "^0.2.1",
		"rimraf": "^2.5.4",
		"safe-publish-latest": "^1.1.1"
		"safe-publish-latest": "^1.1.1",
		"sinon": "^3.2.1",
		"sinon-sandbox": "^1.0.2"
		},
		@@ -64,0 +66,0 @@ "peerDependencies": {

75

README.md

		@@ -42,6 +42,77 @@ # react-with-styles-interface-aphrodite <sup>[![Version Badge][npm-version-svg]][package-url]</sup>

		or when you want to support automatic style flipping for an RTL (right-to-left) language page
		```js
		import aphroditeInterface from 'react-with-styles-interface-aphrodite/with-rtl';
		```

		## Built-in RTL support

		`react-with-styles-interface-aphrodite` now has built-in RTL support. Specifically, it uses [rtl-css-js](https://github.com/kentcdodds/rtl-css-js) to automatically flip styles (`margin`, `padding`, `float`, `textAlign`, etc.) in a `dir="rtl"` context. We recommend using [react-with-direction](https://github.com/airbnb/react-with-direction)'s `DirectionProvider` at your top-level node to achieve best results.
		`react-with-styles-interface-aphrodite` now has built-in LTR/RTL context support in its `with-rtl` version. Specifically, it uses [rtl-css-js](https://github.com/kentcdodds/rtl-css-js) to automatically flip styles (`margin`, `padding`, `float`, `textAlign`, etc.) that were written for an LTR page when the `dir="rtl"` attribute is applied. We recommend using [react-with-direction](https://github.com/airbnb/react-with-direction)'s `DirectionProvider` at your top-level node to achieve best results.

		One caveat for this implementation is that it may cause some trouble when relying on inline styles explicitly. Due to some details of what is known at the time of style creation/resolution, inline styles are converted to classnames when there is a flippable style attribute. If you do not want this behavior or if this behavior breaks your usage, `react-with-styles-interface-aphrodite` exports a `resolveNoRTL` method which is exported by `react-with-styles` as `cssNoRTL`. This method matches the behavior in past versions (no automatic style flipping).
		For instance, if you were to write your styles as follows:
		```jsx
		import ThemedStyleSheet from 'react-with-styles/lib/ThemedStyleSheet';
		import aphroditeInterfaceWithRTL from 'react-with-styles-interface-aphrodite/with-rtl';

		ThemedStyleSheet.registerInterface(aphroditeInterfaceWithRTL);

		...

		import { withStyles, css } from react-with-styles`

		function MyComponent() {
		return <div {...css(styles.container)}>Hello World</div>;
		}

		export default withStyles(() => ({
		container: {
		background: '#fff',
		float: 'left',
		},
		}))(MyComponent);

		```

		The generated css would look like:
		```CSS
		.container_r5r4of {
		background: #fff !important;
		}

		[dir="ltr"] .container_r5r4of {
		float: left !important;
		}

		[dir="rtl"] .container_r5r4of {
		float: right !important;
		}
		```

		If you used an inline style instead:
		```jsx
		import { css } from react-with-styles`

		export default function MyComponent() {
		return <div {...css({ background: '#fff', float: 'left' })}>Hello World</div>;
		}
		```

		In the default case, this would map to a `style={{ background: '#fff', float: 'left' }}` on the div
		in question. However, in the withRTL case, we would convert these styles into a unique classname
		(`inlineStyles_emgbm1` in this instance) and generate the following css instead:
		```css
		.inlineStyles_emgbm1 {
		background: #fff !important;
		}

		[dir="ltr"] .inlineStyles_emgbm1 {
		float: left !important;
		}

		[dir="rtl"] .inlineStyles_emgbm1 {
		float: right !important;
		}

		```

		This behavior is due to some details of what is known at the time of style creation/resolution. Because of this, inline styles will always be converted to classnames when there is a flippable style. This may be slower than the default implementation and may be a poor choice if you are attempting to animate something using JS. If you do not want this behavior or if this behavior breaks your usage, `react-with-styles-interface-aphrodite/with-rtl` also exports a `resolveNoRTL` method which is exported by `react-with-styles` as `cssNoRTL`. `cssNoRTL` matches the behavior in the default implementation (no automatic style flipping).

5

src/aphroditeInterface.js

		@@ -1,5 +0,4 @@
		import * as aphrodite from 'aphrodite';
		import aphrodite from 'aphrodite';
		import aphroditeInterfaceFactory from './aphroditeInterfaceFactory';
		import withRTLExtension from './withRTLExtension';

		export default aphroditeInterfaceFactory(withRTLExtension(aphrodite));
		export default aphroditeInterfaceFactory(aphrodite);

132

src/aphroditeInterfaceFactory.js

		@@ -1,53 +0,5 @@
		/* eslint-disable no-underscore-dangle */
		import { flushToStyleTag } from 'aphrodite/lib/inject';
		import { hashObject } from 'aphrodite/lib/util';
		import { from as flatten } from 'array-flatten';
		import has from 'has';

		import { RTL_SELECTOR } from './withRTLExtension';
		import generateRTLStyles from './generateRTLStyles';
		import resolve from './utils/resolve';

		// This function takes the array of styles and separates them into styles that
		// are handled by Aphrodite and inline styles.
		function separateStyles(stylesArray) {
		const aphroditeStyles = [];

		// Since determining if an Object is empty requires collecting all of its
		// keys, and we want the best performance in this code because we are in the
		// render path, we are going to do a little bookkeeping ourselves.
		let hasInlineStyles = false;
		const inlineStyles = {};

		// This is run on potentially every node in the tree when rendering, where
		// performance is critical. Normally we would prefer using `forEach`, but
		// old-fashioned for loops are faster so that's what we have chosen here.
		for (let i = 0; i < stylesArray.length; i++) { // eslint-disable-line no-plusplus
		const style = stylesArray[i];

		// If this style is falsey, we just want to disregard it. This allows for
		// syntax like:
		//
		// css(isFoo && styles.foo)
		if (style) {
		if (
		has(style, '_name') &&
		has(style, '_definition')
		) {
		// This looks like a reference to an Aphrodite style object, so that's
		// where it goes.
		aphroditeStyles.push(style);
		} else {
		Object.assign(inlineStyles, style);
		hasInlineStyles = true;
		}
		}
		}

		return {
		aphroditeStyles,
		hasInlineStyles,
		inlineStyles,
		};
		}

		export default ({ StyleSheet, css }/* aphrodite */) => ({
		@@ -58,86 +10,8 @@ create(styleHash) {

		// Styles is an array of properties returned by `create()`, a POJO, or an
		// array thereof. POJOs are treated as inline styles. The default resolve
		// method makes an effort to flip CSS styles for an RTL context.
		// This function returns an object to be spread onto an element.
		resolve(styles) {
		const flattenedStyles = flatten(styles);

		const {
		aphroditeStyles,
		hasInlineStyles,
		inlineStyles,
		} = separateStyles(flattenedStyles);

		const stylesWithDirection = aphroditeStyles.map((stylesObj) => {
		let definition = stylesObj._definition;
		const rtlStyles = generateRTLStyles(definition);

		if (rtlStyles) {
		// This applies the rtlStyles whenever dir="rtl" is set. This is because
		// the interface knows nothing about the current directional context.
		definition = { ...definition, [RTL_SELECTOR]: rtlStyles };
		}

		return {
		...stylesObj,
		_definition: definition,
		};
		});

		const result = {};
		if (hasInlineStyles) {
		const inlineRTLStyles = generateRTLStyles(inlineStyles);

		if (inlineRTLStyles) {
		// Because we know nothing about the current directional context, there
		// is no way to determine whether or not the inline styles should be
		// flipped. As a result, if there are inline styles to be flipped, we
		// do so by converting them to classnames and providing styles in both
		// an RTL and an LTR context.
		// This may not work for all situations! For instance, when using inline
		// styles to animate a component with react-motion or animated.js,
		// converting to classes is likely to be way too slow. For those and
		// other edge-cases, consumers should rely on the resolveNoRTL method
		// instead.
		const stylesDef = Object.assign(inlineStyles, { [RTL_SELECTOR]: inlineRTLStyles });
		stylesWithDirection.push({
		_name: `inlineStyles_${hashObject(stylesDef)}`,
		_definition: stylesDef,
		});
		} else {
		result.style = inlineStyles;
		}
		}

		if (stylesWithDirection.length > 0) {
		result.className = css(...stylesWithDirection);
		}

		return result;
		return resolve(css, styles);
		},

		// Styles is an array of properties returned by `create()`, a POJO, or an
		// array thereof. POJOs are treated as inline styles. This version of the
		// resolve function explicitly does no work to flip styles for an RTL context.
		// This function returns an object to be spread onto an element.
		resolveNoRTL(styles) {
		const flattenedStyles = flatten(styles);

		const {
		aphroditeStyles,
		hasInlineStyles,
		inlineStyles,
		} = separateStyles(flattenedStyles);

		const result = {};
		if (aphroditeStyles.length > 0) {
		result.className = css(...aphroditeStyles);
		}

		if (hasInlineStyles) {
		result.style = inlineStyles;
		}

		return result;
		return resolve(css, styles);
		},
		@@ -144,0 +18,0 @@

5

src/no-important.js

		@@ -1,5 +0,4 @@
		import * as aphrodite from 'aphrodite/no-important';
		import aphrodite from 'aphrodite/no-important';
		import aphroditeInterfaceFactory from './aphroditeInterfaceFactory';
		import withRTLExtension from './withRTLExtension';

		export default aphroditeInterfaceFactory(withRTLExtension(aphrodite));
		export default aphroditeInterfaceFactory(aphrodite);

271

test/aphroditeInterfaceFactory_test.js

		import { expect } from 'chai';
		import * as aphrodite from 'aphrodite';
		import sinon from 'sinon-sandbox';
		import aphrodite from 'aphrodite';
		import aphroditeInterfaceFactory from '../src/aphroditeInterfaceFactory';

		import * as resolve from '../src/utils/resolve';

		describe('aphroditeInterfaceFactory', () => {
		const { StyleSheetTestUtils } = aphrodite;
		const aphroditeInterface = aphroditeInterfaceFactory(aphrodite);
		let resolveSpy;

		beforeEach(() => {
		StyleSheetTestUtils.suppressStyleInjection();
		resolveSpy = sinon.spy(resolve, 'default');
		});
		@@ -15,2 +20,3 @@
		StyleSheetTestUtils.clearBufferAndResumeStyleInjection();
		sinon.restore();
		});
		@@ -29,2 +35,3 @@
		},
		_len: 15,
		_name: 'foo_137u7ef',
		@@ -37,264 +44,14 @@ },
		describe('.resolve()', () => {
		it('turns a processed style into a className', () => {
		const styles = aphroditeInterface.create({
		foo: {
		color: 'red',
		},
		});

		expect(aphroditeInterface.resolve([styles.foo]))
		.to.eql({ className: 'foo_137u7ef' });
		it('calls resolve method', () => {
		aphroditeInterface.resolve([]);
		expect(resolveSpy.callCount).to.equal(1);
		});

		it('turns multiple processed styles into a className', () => {
		const styles = aphroditeInterface.create({
		foo: {
		color: 'red',
		},

		bar: {
		display: 'inline-block',
		},
		});

		expect(aphroditeInterface.resolve([styles.foo, styles.bar]))
		.to.eql({ className: 'foo_137u7ef-o_O-bar_36rlri' });
		});

		it('handles an object with inline styles', () => {
		const style = {
		color: 'red',
		};

		expect(aphroditeInterface.resolve([style]))
		.to.eql({
		style: {
		color: 'red',
		},
		});
		});

		it('handles multiple objects with inline styles', () => {
		const styleA = {
		color: 'red',
		};

		const styleB = {
		display: 'inline-block',
		};

		expect(aphroditeInterface.resolve([styleA, styleB]))
		.to.eql({
		style: {
		color: 'red',
		display: 'inline-block',
		},
		});
		});

		it('prefers inline styles from later arguments', () => {
		const styleA = {
		color: 'red',
		};

		const styleB = {
		color: 'blue',
		};

		expect(aphroditeInterface.resolve([styleA, styleB]))
		.to.eql({
		style: {
		color: 'blue',
		},
		});
		});

		it('handles a mix of Aphrodite and inline styles', () => {
		const styles = aphroditeInterface.create({
		foo: {
		color: 'red',
		},
		});

		const style = {
		display: 'inline-block',
		};

		expect(aphroditeInterface.resolve([styles.foo, style]))
		.to.eql({
		className: 'foo_137u7ef',
		style: {
		display: 'inline-block',
		},
		});
		});

		it('handles nested arrays', () => {
		const styles = aphroditeInterface.create({
		foo: {
		color: 'red',
		},
		});

		const styleA = {
		display: 'inline-block',
		};

		const styleB = {
		padding: 1,
		};

		expect(aphroditeInterface.resolve([[styles.foo], [[styleA, styleB]]]))
		.to.eql({
		className: 'foo_137u7ef',
		style: {
		display: 'inline-block',
		padding: 1,
		},
		});
		});

		it('converts inline styles to a className when there are RTL styles', () => {
		const style = {
		marginLeft: 10,
		};

		expect(aphroditeInterface.resolve([style]))
		.to.eql({ className: 'inlineStyles_15cjgmo' });
		});
		});

		describe('.resolveNoRTL()', () => {
		it('turns a processed style into a className', () => {
		const styles = aphroditeInterface.create({
		foo: {
		color: 'red',
		},
		});

		expect(aphroditeInterface.resolveNoRTL([styles.foo]))
		.to.eql({ className: 'foo_137u7ef' });
		it('calls resolve method', () => {
		aphroditeInterface.resolveNoRTL([]);
		expect(resolveSpy.callCount).to.equal(1);
		});

		it('turns multiple processed styles into a className', () => {
		const styles = aphroditeInterface.create({
		foo: {
		color: 'red',
		},

		bar: {
		display: 'inline-block',
		},
		});

		expect(aphroditeInterface.resolveNoRTL([styles.foo, styles.bar]))
		.to.eql({ className: 'foo_137u7ef-o_O-bar_36rlri' });
		});

		it('handles an object with inline styles', () => {
		const style = {
		color: 'red',
		};

		expect(aphroditeInterface.resolveNoRTL([style]))
		.to.eql({
		style: {
		color: 'red',
		},
		});
		});

		it('does not convert to className even for RTL-flippable inline styles', () => {
		const style = {
		marginLeft: 10,
		};

		expect(aphroditeInterface.resolveNoRTL([style]))
		.to.eql({
		style: {
		marginLeft: 10,
		},
		});
		});

		it('handles multiple objects with inline styles', () => {
		const styleA = {
		color: 'red',
		};

		const styleB = {
		display: 'inline-block',
		};

		expect(aphroditeInterface.resolveNoRTL([styleA, styleB]))
		.to.eql({
		style: {
		color: 'red',
		display: 'inline-block',
		},
		});
		});

		it('prefers inline styles from later arguments', () => {
		const styleA = {
		color: 'red',
		};

		const styleB = {
		color: 'blue',
		};

		expect(aphroditeInterface.resolveNoRTL([styleA, styleB]))
		.to.eql({
		style: {
		color: 'blue',
		},
		});
		});

		it('handles a mix of Aphrodite and inline styles', () => {
		const styles = aphroditeInterface.create({
		foo: {
		color: 'red',
		},
		});

		const style = {
		display: 'inline-block',
		};

		expect(aphroditeInterface.resolveNoRTL([styles.foo, style]))
		.to.eql({
		className: 'foo_137u7ef',
		style: {
		display: 'inline-block',
		},
		});
		});

		it('handles nested arrays', () => {
		const styles = aphroditeInterface.create({
		foo: {
		color: 'red',
		},
		});

		const styleA = {
		display: 'inline-block',
		};

		const styleB = {
		padding: 1,
		};

		expect(aphroditeInterface.resolveNoRTL([[styles.foo], [[styleA, styleB]]]))
		.to.eql({
		className: 'foo_137u7ef',
		style: {
		display: 'inline-block',
		padding: 1,
		},
		});
		});
		});
		});

lib/generateRTLStyles.js

lib/withRTLExtension.js

src/generateRTLStyles.js

src/withRTLExtension.js

test/generateRTLStyles_test.js

test/no-imporant_test.js

test/withRTLExtension_test.js

react-with-styles-interface-aphrodite - npm Package Compare versions

New alerts

Improved metrics

Worsened metrics