@emotion/sheet
Advanced tools
@emotion/sheet - npm Package Compare versions
Comparing version 1.0.0-next.2 to 1.0.0-next.3
| # @emotion/sheet | ||
| ## 1.0.0-next.3 | ||
| ### Patch Changes | ||
| - [`dc1a0c5e`](https://github.com/emotion-js/emotion/commit/dc1a0c5ed78b27fb7ce49b6296f2ca8631654cd1) [#1962](https://github.com/emotion-js/emotion/pull/1962) Thanks [@Andarist](https://github.com/Andarist)! - From now on an empty `<style/>` element gets inserted eagerly into the DOM in the constructor in non-production environments. This helps to grab used `key`s from the (JS)DOM even for sheets/caches that have not inserted any actual rules to the document yet. It allows `@emotion/jest` to find those and serialize Emotion classes properly in situations like this: | ||
| ```js | ||
| import styled from '@emotion/styled/macro' | ||
| import { render } from '@testing-library/react' | ||
| const Div = styled.div`` | ||
| test('foo', () => { | ||
| const { container } = render(<Div />) | ||
| expect(container).toMatchSnapshot() | ||
| }) | ||
| ``` | ||
| ## 1.0.0-next.2 | ||
@@ -4,0 +22,0 @@ |
@@ -45,2 +45,4 @@ 'use strict'; | ||
| var isBrowser = "object" !== 'undefined'; | ||
| function createStyleElement(options) { | ||
@@ -58,5 +60,3 @@ var tag = document.createElement('style'); | ||
| var StyleSheet = | ||
| /*#__PURE__*/ | ||
| function () { | ||
| var StyleSheet = /*#__PURE__*/function () { | ||
| function StyleSheet(options) { | ||
@@ -87,3 +87,19 @@ var _this = this; | ||
| this.prepend = options.prepend; | ||
| this.before = null; | ||
| this.before = null; // insert a single empty style eagerly in dev | ||
| // so @emotion/jest can grab `key` from the (JS)DOM for caches without any rules inserted yet | ||
| if (process.env.NODE_ENV !== 'production' && isBrowser) { | ||
| var tag = createStyleElement(this); | ||
| if (this.isSpeedy) { | ||
| // avoid extra style tag in speedy mode | ||
| // it's a harmless hack to make `this.insert` grab this tag created here instead of creating a new one | ||
| this.ctr++; | ||
| } else { | ||
| // non-speedy styles won't be reused, add this just for informational purposes and less surprising snapshots | ||
| tag.setAttribute('data-eager-key', 'true'); | ||
| } | ||
| this._insertTag(tag); | ||
| } | ||
| } | ||
@@ -90,0 +106,0 @@ |
@@ -41,2 +41,4 @@ /* | ||
| var isBrowser = "object" !== 'undefined'; | ||
| function createStyleElement(options) { | ||
@@ -54,5 +56,3 @@ var tag = document.createElement('style'); | ||
| var StyleSheet = | ||
| /*#__PURE__*/ | ||
| function () { | ||
| var StyleSheet = /*#__PURE__*/function () { | ||
| function StyleSheet(options) { | ||
@@ -83,3 +83,19 @@ var _this = this; | ||
| this.prepend = options.prepend; | ||
| this.before = null; | ||
| this.before = null; // insert a single empty style eagerly in dev | ||
| // so @emotion/jest can grab `key` from the (JS)DOM for caches without any rules inserted yet | ||
| if (process.env.NODE_ENV !== 'production' && isBrowser) { | ||
| var tag = createStyleElement(this); | ||
| if (this.isSpeedy) { | ||
| // avoid extra style tag in speedy mode | ||
| // it's a harmless hack to make `this.insert` grab this tag created here instead of creating a new one | ||
| this.ctr++; | ||
| } else { | ||
| // non-speedy styles won't be reused, add this just for informational purposes and less surprising snapshots | ||
| tag.setAttribute('data-eager-key', 'true'); | ||
| } | ||
| this._insertTag(tag); | ||
| } | ||
| } | ||
@@ -86,0 +102,0 @@ |
@@ -45,2 +45,4 @@ 'use strict'; | ||
| var isBrowser = typeof document !== 'undefined'; | ||
| function createStyleElement(options) { | ||
@@ -58,5 +60,3 @@ var tag = document.createElement('style'); | ||
| var StyleSheet = | ||
| /*#__PURE__*/ | ||
| function () { | ||
| var StyleSheet = /*#__PURE__*/function () { | ||
| function StyleSheet(options) { | ||
@@ -87,3 +87,19 @@ var _this = this; | ||
| this.prepend = options.prepend; | ||
| this.before = null; | ||
| this.before = null; // insert a single empty style eagerly in dev | ||
| // so @emotion/jest can grab `key` from the (JS)DOM for caches without any rules inserted yet | ||
| if (process.env.NODE_ENV !== 'production' && isBrowser) { | ||
| var tag = createStyleElement(this); | ||
| if (this.isSpeedy) { | ||
| // avoid extra style tag in speedy mode | ||
| // it's a harmless hack to make `this.insert` grab this tag created here instead of creating a new one | ||
| this.ctr++; | ||
| } else { | ||
| // non-speedy styles won't be reused, add this just for informational purposes and less surprising snapshots | ||
| tag.setAttribute('data-eager-key', 'true'); | ||
| } | ||
| this._insertTag(tag); | ||
| } | ||
| } | ||
@@ -90,0 +106,0 @@ |
@@ -41,2 +41,4 @@ /* | ||
| var isBrowser = typeof document !== 'undefined'; | ||
| function createStyleElement(options) { | ||
@@ -54,5 +56,3 @@ var tag = document.createElement('style'); | ||
| var StyleSheet = | ||
| /*#__PURE__*/ | ||
| function () { | ||
| var StyleSheet = /*#__PURE__*/function () { | ||
| function StyleSheet(options) { | ||
@@ -83,3 +83,19 @@ var _this = this; | ||
| this.prepend = options.prepend; | ||
| this.before = null; | ||
| this.before = null; // insert a single empty style eagerly in dev | ||
| // so @emotion/jest can grab `key` from the (JS)DOM for caches without any rules inserted yet | ||
| if (process.env.NODE_ENV !== 'production' && isBrowser) { | ||
| var tag = createStyleElement(this); | ||
| if (this.isSpeedy) { | ||
| // avoid extra style tag in speedy mode | ||
| // it's a harmless hack to make `this.insert` grab this tag created here instead of creating a new one | ||
| this.ctr++; | ||
| } else { | ||
| // non-speedy styles won't be reused, add this just for informational purposes and less surprising snapshots | ||
| tag.setAttribute('data-eager-key', 'true'); | ||
| } | ||
| this._insertTag(tag); | ||
| } | ||
| } | ||
@@ -86,0 +102,0 @@ |
| { | ||
| "name": "@emotion/sheet", | ||
| "version": "1.0.0-next.2", | ||
| "version": "1.0.0-next.3", | ||
| "description": "emotion's stylesheet", | ||
@@ -5,0 +5,0 @@ "main": "dist/sheet.cjs.js", |
@@ -50,2 +50,4 @@ // @flow | ||
| let isBrowser = typeof document !== 'undefined' | ||
| function createStyleElement(options: { | ||
@@ -86,2 +88,18 @@ key: string, | ||
| this.before = null | ||
| // insert a single empty style eagerly in dev | ||
| // so @emotion/jest can grab `key` from the (JS)DOM for caches without any rules inserted yet | ||
| if (process.env.NODE_ENV !== 'production' && isBrowser) { | ||
| const tag = createStyleElement(this) | ||
| if (this.isSpeedy) { | ||
| // avoid extra style tag in speedy mode | ||
| // it's a harmless hack to make `this.insert` grab this tag created here instead of creating a new one | ||
| this.ctr++ | ||
| } else { | ||
| // non-speedy styles won't be reused, add this just for informational purposes and less surprising snapshots | ||
| tag.setAttribute('data-eager-key', 'true') | ||
| } | ||
| this._insertTag(tag) | ||
| } | ||
| } | ||
@@ -88,0 +106,0 @@ |
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
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 by14.46%
35661
- Lines of code
- increased by9.53%
724
No dependency changes