Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
react-with-styles-interface-aphrodite
Advanced tools
react-with-styles-interface-aphrodite - npm Package Compare versions
Comparing version 1.1.1 to 1.2.0
@@ -0,1 +1,6 @@ | ||
| ## v1.2.0 | ||
| - Add support for using Aphrodite in no-important mode, which disables adding | ||
| `!important` to every style. | ||
| ## v1.1.1 | ||
@@ -2,0 +7,0 @@ |
@@ -7,102 +7,12 @@ Object.defineProperty(exports, "__esModule", { | ||
| var _inject = require('aphrodite/lib/inject'); | ||
| var aphrodite = _interopRequireWildcard(_aphrodite); | ||
| var _arrayFlatten = require('array-flatten'); | ||
| var _aphroditeInterfaceFactory = require('./aphroditeInterfaceFactory'); | ||
| var _has = require('has'); | ||
| var _aphroditeInterfaceFactory2 = _interopRequireDefault(_aphroditeInterfaceFactory); | ||
| var _has2 = _interopRequireDefault(_has); | ||
| 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 _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; } } | ||
| // 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++) { | ||
| 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 { | ||
| Object.assign(inlineStyles, style); | ||
| hasInlineStyles = true; | ||
| } | ||
| } | ||
| } | ||
| return { | ||
| aphroditeStyles: aphroditeStyles, | ||
| hasInlineStyles: hasInlineStyles, | ||
| inlineStyles: inlineStyles | ||
| }; | ||
| } | ||
| exports['default'] = { | ||
| create: function () { | ||
| function create(styleHash) { | ||
| return _aphrodite.StyleSheet.create(styleHash); | ||
| } | ||
| return create; | ||
| }(), | ||
| // Styles is an array of properties returned by `create()`, a POJO, or an | ||
| // array thereof. POJOs are treated as inline styles. | ||
| // 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); | ||
| var aphroditeStyles = _separateStyles.aphroditeStyles; | ||
| var hasInlineStyles = _separateStyles.hasInlineStyles; | ||
| var inlineStyles = _separateStyles.inlineStyles; | ||
| var result = {}; | ||
| if (aphroditeStyles.length > 0) { | ||
| result.className = _aphrodite.css.apply(undefined, _toConsumableArray(aphroditeStyles)); | ||
| } | ||
| if (hasInlineStyles) { | ||
| result.style = inlineStyles; | ||
| } | ||
| return result; | ||
| } | ||
| return resolve; | ||
| }(), | ||
| // Flushes all buffered styles to a style tag. Required for components | ||
| // that depend upon previous styles in the component tree (i.e. | ||
| // for calculating container width, including padding/margin). | ||
| flush: function () { | ||
| function flush() { | ||
| (0, _inject.flushToStyleTag)(); | ||
| } | ||
| return flush; | ||
| }() | ||
| }; | ||
| exports['default'] = (0, _aphroditeInterfaceFactory2['default'])(aphrodite); |
| { | ||
| "name": "react-with-styles-interface-aphrodite", | ||
| "version": "1.1.1", | ||
| "version": "1.2.0", | ||
| "description": "react-with-styles interface for Aphrodite", | ||
@@ -44,13 +44,15 @@ "main": "lib/aphroditeInterface.js", | ||
| "aphrodite": "^0.5.0", | ||
| "babel-cli": "^6.11.4", | ||
| "babel-preset-airbnb": "^2.0.0", | ||
| "babel-register": "^6.11.6", | ||
| "babel-cli": "^6.18.0", | ||
| "babel-preset-airbnb": "^2.1.1", | ||
| "babel-register": "^6.18.0", | ||
| "chai": "^3.5.0", | ||
| "eslint": "^3.3.1", | ||
| "eslint-config-airbnb-base": "^5.0.3", | ||
| "eslint-plugin-import": "^1.14.0", | ||
| "eslint": "^3.13.1", | ||
| "eslint-config-airbnb-base": "^11.0.1", | ||
| "eslint-plugin-import": "^2.2.0", | ||
| "in-publish": "^2.0.0", | ||
| "mocha": "^3.0.2", | ||
| "mocha": "^3.2.0", | ||
| "react": "^15.4.2", | ||
| "react-dom": "^15.4.2", | ||
| "rimraf": "^2.5.4", | ||
| "safe-publish-latest": "^1.0.1" | ||
| "safe-publish-latest": "^1.1.1" | ||
| }, | ||
@@ -57,0 +59,0 @@ "peerDependencies": { |
@@ -29,1 +29,13 @@ # react-with-styles-interface-aphrodite <sup>[![Version Badge][npm-version-svg]][package-url]</sup> | ||
| [aphrodite]: https://github.com/khan/aphrodite | ||
| ## Import | ||
| ```js | ||
| import aphroditeInterface from 'react-with-styles-interface-aphrodite'; | ||
| ``` | ||
| or when you need to [disable `!important`](https://github.com/Khan/aphrodite#disabling-important): | ||
| ```js | ||
| import aphroditeInterface from 'react-with-styles-interface-aphrodite/no-important'; | ||
| ``` |
@@ -1,82 +0,4 @@ | ||
| import { StyleSheet, css } from 'aphrodite'; | ||
| import { flushToStyleTag } from 'aphrodite/lib/inject'; | ||
| import { from as flatten } from 'array-flatten'; | ||
| import has from 'has'; | ||
| import * as aphrodite from 'aphrodite'; | ||
| import aphroditeInterfaceFactory from './aphroditeInterfaceFactory'; | ||
| // 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++) { | ||
| 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 { | ||
| create(styleHash) { | ||
| return StyleSheet.create(styleHash); | ||
| }, | ||
| // Styles is an array of properties returned by `create()`, a POJO, or an | ||
| // array thereof. POJOs are treated as inline styles. | ||
| // This function returns an object to be spread onto an element. | ||
| resolve(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; | ||
| }, | ||
| // Flushes all buffered styles to a style tag. Required for components | ||
| // that depend upon previous styles in the component tree (i.e. | ||
| // for calculating container width, including padding/margin). | ||
| flush() { | ||
| flushToStyleTag(); | ||
| }, | ||
| }; | ||
| export default aphroditeInterfaceFactory(aphrodite); |
| import { expect } from 'chai'; | ||
| import { StyleSheetTestUtils } from 'aphrodite'; | ||
| import React from 'react'; | ||
| import { css, StyleSheetServer, StyleSheetTestUtils } from 'aphrodite'; | ||
| import ReactDOMServer from 'react-dom/server'; | ||
| import aphroditeInterface from '../src/aphroditeInterface'; | ||
@@ -15,139 +16,18 @@ | ||
| describe('.create()', () => { | ||
| it('processes the styles with Aphrodite', () => { | ||
| expect(aphroditeInterface.create({ | ||
| foo: { | ||
| color: 'red', | ||
| }, | ||
| })).to.eql({ | ||
| foo: { | ||
| _definition: { | ||
| color: 'red', | ||
| }, | ||
| _name: 'foo_im3wl1', | ||
| }, | ||
| }); | ||
| }); | ||
| it('is an interface', () => { | ||
| expect(typeof aphroditeInterface.create).to.equal('function'); | ||
| expect(typeof aphroditeInterface.resolve).to.equal('function'); | ||
| }); | ||
| 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_im3wl1' }); | ||
| }); | ||
| 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_im3wl1-o_O-bar_cm9r68' }); | ||
| }); | ||
| it('handles an object with inline styles', () => { | ||
| const style = { | ||
| it('uses !important', () => { | ||
| const styles = aphroditeInterface.create({ | ||
| foo: { | ||
| 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_im3wl1', | ||
| 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_im3wl1', | ||
| style: { | ||
| display: 'inline-block', | ||
| padding: 1, | ||
| }, | ||
| }); | ||
| }); | ||
| const result = StyleSheetServer.renderStatic(() => ( | ||
| ReactDOMServer.renderToString(React.createElement('div', { className: css(styles.foo) })) | ||
| )); | ||
| expect(result.css.content.includes('!important')).to.equal(true); | ||
| }); | ||
| }); |
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Major refactor
Supply chain riskPackage has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by30.47%
20357
- Number of package files
- increased by53.85%
20
- Lines of code
- increased by30.5%
368
- Number of lines in readme file
- increased by41.38%
41
Worsened metrics
- Dev dependency count
- increased by15.38%
15
- Number of medium supply chain risk alerts
- increased byInfinity%
1
No dependency changes