Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
create-emotion
Advanced tools
create-emotion - npm Package Compare versions
Comparing version 10.0.0-beta.0 to 10.0.0-beta.1
| { | ||
| "name": "create-emotion", | ||
| "version": "10.0.0-beta.0", | ||
| "version": "10.0.0-beta.1", | ||
| "description": "The Next Generation of CSS-in-JS.", | ||
@@ -17,4 +17,4 @@ "main": "dist/index.cjs.js", | ||
| "dependencies": { | ||
| "@emotion/cache": "^10.0.0-beta.0", | ||
| "@emotion/css": "^10.0.0-beta.0", | ||
| "@emotion/cache": "^10.0.0-beta.1", | ||
| "@emotion/css": "^10.0.0-beta.1", | ||
| "@emotion/hash": "^0.7.0", | ||
@@ -21,0 +21,0 @@ "@emotion/memoize": "^0.7.0", |
@@ -5,3 +5,3 @@ # create-emotion | ||
| The main [emotion](https://github.com/emotion-js/emotion/tree/master/packages/emotion) repo can be thought of as a call to `createEmotion` with sensible defaults for most applications. | ||
| The main [emotion](https://github.com/emotion-js/emotion/tree/master/packages/emotion) package can be thought of as a call to `createEmotion` with sensible defaults for most applications. | ||
@@ -23,3 +23,3 @@ ```javascript | ||
| sheet, | ||
| caches | ||
| cache | ||
| } = createEmotion(context) | ||
@@ -30,53 +30,24 @@ ``` | ||
| * Calling it directly will allow for some low level customization. | ||
| - Calling it directly will allow for some low level customization. | ||
| * Create custom names for emotion APIs to help with migration from other, similar libraries. | ||
| - Create custom names for emotion APIs to help with migration from other, similar libraries. | ||
| * Could set custom `key` to `👩🎤`, `🥞`, `⚛️`, `👩🎨` | ||
| - Could set custom `key` to something other than `css` | ||
| ### Downside | ||
| * Introduces some amount of complexity to your application that can vary depending on developer experience. | ||
| - Introduces some amount of complexity to your application that can vary depending on developer experience. | ||
| * Required to keep up with changes in the repo and API at a lower level than if using `emotion` directly | ||
| - Required to keep up with changes in the repo and API at a lower level than if using `emotion` directly | ||
| ### Primary use cases | ||
| * Using emotion in embedded contexts such as an `<iframe/>` | ||
| - Using emotion in embedded contexts such as an `<iframe/>` | ||
| * Setting a [nonce]() on any `<style/>` tag emotion creates for security purposes | ||
| - Setting a [nonce]() on any `<style/>` tag emotion creates for security purposes | ||
| * Use emotion with a developer defined `<style/>` tag | ||
| - Use emotion with a developer defined `<style/>` tag | ||
| * Using emotion with custom stylis plugins | ||
| - Using emotion with custom stylis plugins | ||
| ### Advanced use cases | ||
| * Using emotion in component libraries to sync up multiple intances of emotion together | ||
| ```jsx | ||
| import createEmotion from 'create-emotion' | ||
| const context = typeof global !== 'undefined' ? global : {} | ||
| export const { | ||
| flush, | ||
| hydrate, | ||
| cx, | ||
| merge, | ||
| getRegisteredStyles, | ||
| injectGlobal, | ||
| keyframes, | ||
| css, | ||
| sheet, | ||
| caches | ||
| } = createEmotion(context) | ||
| ``` | ||
| `create-emotion` accepts a `context` and a set of options. | ||
| ## Context | ||
| `emotion` requires a global object for server-side rendering to ensure that even if a module is calling an emotion instance from two paths(e.g. the same emotion instance in multiple node_modules, this can happen often with linking [#349](https://github.com/emotion-js/emotion/issues/349)) they'll still both work with SSR. If you aren't using SSR, `context` can be an empty object. This isn't required in the browser because your bundler should deduplicate modules. | ||
| ## Multiple instances in a single app example | ||
@@ -87,8 +58,2 @@ | ||
| const context = typeof global !== 'undefined' ? global : {} | ||
| if (context.__MY_EMOTION_INSTANCE__ === undefined) { | ||
| context.__MY_EMOTION_INSTANCE__ = {} | ||
| } | ||
| export const { | ||
@@ -104,4 +69,4 @@ flush, | ||
| sheet, | ||
| caches | ||
| } = createEmotion(context.__MY_EMOTION_INSTANCE__, { | ||
| cache | ||
| } = createEmotion({ | ||
| // The key option is required when there will be multiple instances in a single app | ||
@@ -112,4 +77,2 @@ key: 'some-key' | ||
| **Note**: calling `createEmotion` twice with the same `context` will use the same instance, so options provided in another call of `createEmotion` with the same context will be ignored. | ||
| ## Options | ||
@@ -116,0 +79,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
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
Improved metrics
- Number of medium supply chain risk alerts
- decreased by-100%
0
Worsened metrics
- Total package byte prevSize
- decreased by-1.14%
114271
- Number of lines in readme file
- decreased by-28.46%
93
Dependency changes
Updated@emotion/css@^10.0.0-beta.1