styled-components - npm Package Compare versions

Comparing version 1.4.1 to 1.4.2

CHANGELOG.md

@@ -1,2 +0,2 @@
-# Change Log
+# Changelog
 
@@ -13,2 +13,8 @@ All notable changes to this project will be documented in this file. If a contribution does not have a mention next to it, [@geelen](https://github.com/geelen) or [@mxstbr](https://github.com/mxstbr) did it.
 
+## [v1.4.2] - 2017-01-28
+
+### Changed
+
+- Fix performance issue when using `@font-face` by creating a separate `style` tag for global styles, thanks to [@xcoderzach](https://github.com/xcoderzach). (see [#415](https://github.com/styled-components/styled-components/pull/415))
+
 ## [v1.4.1] - 2017-01-27
@@ -183,3 +189,4 @@
 
-[Unreleased]: https://github.com/styled-components/styled-components/compare/v1.4.1...master
+[Unreleased]: https://github.com/styled-components/styled-components/compare/v1.4.2...master
+[v1.4.2]: https://github.com/styled-components/styled-components/compare/v1.4.1...v1.4.2
 [v1.4.1]: https://github.com/styled-components/styled-components/compare/v1.4.0...v1.4.1
@@ -186,0 +193,0 @@ [v1.4.0]: https://github.com/styled-components/styled-components/compare/v1.3.1...v1.4.0

lib/constructors/test/injectGlobal.test.js

@@ -21,5 +21,5 @@ 'use strict';
 
-var _StyleSheet = require('../../models/StyleSheet');
+var _GlobalStyleSheet = require('../../models/GlobalStyleSheet');
 
-var _StyleSheet2 = _interopRequireDefault(_StyleSheet);
+var _GlobalStyleSheet2 = _interopRequireDefault(_GlobalStyleSheet);
 
@@ -39,3 +39,3 @@ var _utils = require('../../test/utils');
   beforeEach(function () {
-    (0, _utils.resetStyled)();
+    (0, _utils.resetStyled)(_GlobalStyleSheet2.default);
   });
@@ -45,3 +45,3 @@
     (0, _injectGlobal2.default)(_templateObject, rule1);
-    (0, _expect2.default)(_StyleSheet2.default.injected).toBe(true);
+    (0, _expect2.default)(_GlobalStyleSheet2.default.injected).toBe(true);
   });
@@ -53,6 +53,6 @@
     (0, _injectGlobal2.default)(_templateObject2, rule2);
-    (0, _utils.expectCSSMatches)('\n      html {\n        ' + rule1 + '\n      }\n      a {\n        ' + rule2 + '\n      }\n    ');
+    (0, _utils.expectCSSMatches)('\n      html {\n        ' + rule1 + '\n      }\n      a {\n        ' + rule2 + '\n      }\n    ', { styleSheet: _GlobalStyleSheet2.default });
   });
 
-  it('should non-destructively inject styles when called after a component', function () {
+  it('should inject styles in a separate sheet from a component', function () {
     var Comp = styled.div(_templateObject3, rule3);
@@ -62,5 +62,7 @@ (0, _enzyme.shallow)(_react2.default.createElement(Comp, null));
     (0, _injectGlobal2.default)(_templateObject, rule1);
-
-    (0, _utils.expectCSSMatches)('\n      .a {\n        ' + rule3 + '\n      }\n      html {\n        ' + rule1 + '\n      }\n    ');
+    // Test the component sheet
+    (0, _utils.expectCSSMatches)('\n      .a {\n        ' + rule3 + '\n      }\n    ');
+    // Test the global sheet
+    (0, _utils.expectCSSMatches)('\n      html {\n        ' + rule1 + '\n      }\n    ', { styleSheet: _GlobalStyleSheet2.default });
   });
 });

lib/constructors/test/keyframes.test.js

@@ -14,2 +14,6 @@ 'use strict';
 
+var _GlobalStyleSheet = require('../../models/GlobalStyleSheet');
+
+var _GlobalStyleSheet2 = _interopRequireDefault(_GlobalStyleSheet);
+
 var _utils = require('../../test/utils');
@@ -31,3 +35,3 @@
   beforeEach(function () {
-    (0, _utils.resetStyled)();
+    (0, _utils.resetStyled)(_GlobalStyleSheet2.default);
     index = 0;
@@ -44,4 +48,4 @@ });
     var name = keyframes(_templateObject2, rules);
-    (0, _utils.expectCSSMatches)('\n      @keyframes keyframe_0 {\n        0% {\n          opacity: 0;\n        }\n        100% {\n          opacity: 1;\n        }\n      }\n    ');
+    (0, _utils.expectCSSMatches)('\n      @keyframes keyframe_0 {\n        0% {\n          opacity: 0;\n        }\n        100% {\n          opacity: 1;\n        }\n      }\n    ', { styleSheet: _GlobalStyleSheet2.default });
   });
 });

lib/models/GlobalStyle.js

@@ -21,5 +21,5 @@ 'use strict';
 
-var _StyleSheet = require('./StyleSheet');
+var _GlobalStyleSheet = require('./GlobalStyleSheet');
 
-var _StyleSheet2 = _interopRequireDefault(_StyleSheet);
+var _GlobalStyleSheet2 = _interopRequireDefault(_GlobalStyleSheet);
 
@@ -43,3 +43,3 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
     value: function generateAndInject() {
-      if (!_StyleSheet2.default.injected) _StyleSheet2.default.inject();
+      if (!_GlobalStyleSheet2.default.injected) _GlobalStyleSheet2.default.inject();
       var flatCSS = (0, _flatten2.default)(this.rules).join('');
@@ -51,3 +51,3 @@ if (this.selector) {
       (0, _postcssNested2.default)(root);
-      _StyleSheet2.default.insert(root.toResult().css);
+      _GlobalStyleSheet2.default.insert(root.toResult().css);
     }
@@ -54,0 +54,0 @@ }]);

lib/models/StyleSheet.js

@@ -11,5 +11,5 @@ 'use strict';
 
-/* Wraps glamor's stylesheet and exports a singleton for the rest
-*  of the app to use. */
+/* Wraps glamor's stylesheet and exports a singleton for styled components
+to use. */
 
 module.exports = exports['default'];

lib/test/utils.js

@@ -42,3 +42,5 @@ 'use strict';
 var resetStyled = exports.resetStyled = function resetStyled() {
-  if (_StyleSheet2.default.sheet) _StyleSheet2.default.flush();
+  var styleSheet = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : _StyleSheet2.default;
+
+  if (styleSheet.sheet) styleSheet.flush();
   index = 0;
@@ -52,8 +54,12 @@ return (0, _styled3.default)((0, _StyledComponent2.default)((0, _ComponentStyle3.default)(classNames)));
 var expectCSSMatches = exports.expectCSSMatches = function expectCSSMatches(expectation) {
-  var opts = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : { ignoreWhitespace: true };
+  var opts = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+  var _opts$ignoreWhitespac = opts.ignoreWhitespace,
+      ignoreWhitespace = _opts$ignoreWhitespac === undefined ? true : _opts$ignoreWhitespac,
+      _opts$styleSheet = opts.styleSheet,
+      styleSheet = _opts$styleSheet === undefined ? _StyleSheet2.default : _opts$styleSheet;
 
-  var css = _StyleSheet2.default.rules().map(function (rule) {
+  var css = styleSheet.rules().map(function (rule) {
     return rule.cssText;
   }).join('\n');
-  if (opts.ignoreWhitespace) {
+  if (ignoreWhitespace) {
     (0, _expect2.default)(stripWhitespace(css)).toEqual(stripWhitespace(expectation));
@@ -60,0 +66,0 @@ } else {

package.json

 {
   "name": "styled-components",
-  "version": "1.4.1",
+  "version": "1.4.2",
   "description": "Visual primitives for the component age. Use the best bits of ES6 and CSS to style your apps without stress 💅",
@@ -5,0 +5,0 @@ "main": "lib/index.js",

README.md

@@ -481,2 +481,3 @@ <a href="https://github.com/styled-components/styled-components">
 - [Reactiflux](https://www.reactiflux.com): Reactiflux community home build with [Gatsby](https://github.com/gatsbyjs/gatsby) ([source](https://github.com/reactiflux/reactiflux.com)).
+- [react-styled-flexboxgrid](https://github.com/LoicMahieu/react-styled-flexboxgrid): Grid system based on Flexbox ([demo](https://loicmahieu.github.io/react-styled-flexboxgrid/demo/index.html))
 
@@ -483,0 +484,0 @@ *Built something with `styled-components`? Submit a PR and add it to this list!*

src/constructors/test/injectGlobal.test.js

@@ -7,3 +7,3 @@ // @flow
 import injectGlobal from '../injectGlobal'
-import styleSheet from '../../models/StyleSheet'
+import styleSheet from '../../models/GlobalStyleSheet'
 import { expectCSSMatches, resetStyled } from '../../test/utils'
@@ -18,3 +18,3 @@
   beforeEach(() => {
-    resetStyled()
+    resetStyled(styleSheet)
   })
@@ -50,6 +50,6 @@
       }
-    `)
+    `, { styleSheet })
   })
 
-  it(`should non-destructively inject styles when called after a component`, () => {
+  it(`should inject styles in a separate sheet from a component`, () => {
     const Comp = styled.div`
@@ -65,3 +65,3 @@ ${rule3}
     `
-
+    // Test the component sheet
     expectCSSMatches(`
@@ -71,7 +71,10 @@ .a {
       }
+    `)
+    // Test the global sheet
+    expectCSSMatches(`
       html {
         ${rule1}
       }
-    `)
+    `, { styleSheet })
   })
 });

src/constructors/test/keyframes.test.js

@@ -5,2 +5,3 @@ // @flow
 import _keyframes from '../keyframes'
+import styleSheet from '../../models/GlobalStyleSheet'
 import { expectCSSMatches, resetStyled } from '../../test/utils'
@@ -16,3 +17,3 @@
   beforeEach(() => {
-    resetStyled()
+    resetStyled(styleSheet)
     index = 0
@@ -52,4 +53,4 @@ })
       }
-    `)
+    `, { styleSheet })
   })
 })

src/models/GlobalStyle.js

@@ -7,4 +7,5 @@ // @flow
 import flatten from '../utils/flatten'
-import styleSheet from './StyleSheet'
 
+import styleSheet from './GlobalStyleSheet'
+
 export default class ComponentStyle {
@@ -11,0 +12,0 @@ rules: RuleSet;

src/models/StyleSheet.js

 // @flow
 
-/* Wraps glamor's stylesheet and exports a singleton for the rest
-*  of the app to use. */
+/* Wraps glamor's stylesheet and exports a singleton for styled components
+to use. */
 
@@ -6,0 +6,0 @@ import { StyleSheet } from '../vendor/glamor/sheet'

src/test/utils.js

@@ -9,3 +9,3 @@ // @flow
 import _styled from '../constructors/styled'
-import styleSheet from '../models/StyleSheet'
+import componentStyleSheet from '../models/StyleSheet'
 import _styledComponent from '../models/StyledComponent'
@@ -18,3 +18,3 @@ import _ComponentStyle from '../models/ComponentStyle'
 
-export const resetStyled = () => {
+export const resetStyled = (styleSheet: Object = componentStyleSheet) => {
   if (styleSheet.sheet) styleSheet.flush()
@@ -28,6 +28,7 @@ index = 0
   expectation: string,
-  opts: { ignoreWhitespace: boolean } = { ignoreWhitespace: true }
+  opts: { ignoreWhitespace?: boolean, styleSheet?: Object } = {}
 ) => {
+  const { ignoreWhitespace = true, styleSheet = componentStyleSheet } = opts
   const css = styleSheet.rules().map(rule => rule.cssText).join('\n')
-  if (opts.ignoreWhitespace) {
+  if (ignoreWhitespace) {
     expect(stripWhitespace(css)).toEqual(stripWhitespace(expectation))
@@ -34,0 +35,0 @@ } else {

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This 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

2107083

increased by0.16%

Number of package files

280

increased by1.08%

Lines of code

39159

increased by0.1%

Number of lines in readme file

523

increased by0.19%

No dependency changes