emotion

👩‍🎤 CSS-in-JS library designed for high performance style composition

MIT License

Downloads
711.7M
Stars
17.3K
Committers
323

Bot releases are visible (Hide)

emotion - https://github.com/emotion-js/emotion/releases/tag/@emotion/[email protected]

Published by github-actions[bot] over 4 years ago

Patch Changes

emotion - https://github.com/emotion-js/emotion/releases/tag/@emotion/[email protected]

Published by github-actions[bot] over 4 years ago

Major Changes

  • 9e998e37 #1817 Thanks @Andarist! - The parser we use (Stylis) got upgraded. It fixes some long-standing parsing edge cases while being smaller and faster 🚀

    It has been completely rewritten and comes with some breaking changes. Most notable ones that might affect Emotion users are:

    • plugins written for the former Stylis v3 are not compatible with the new version. To learn more on how to write a plugin for Stylis v4 you can check out its README and the source code of core plugins.
    • vendor-prefixing was previously customizable using prefix option. This was always limited to turning off all of some of the prefixes as all available prefixes were on by default. The prefix option is gone and to customize which prefixes are applied you need to fork (copy-paste) the prefixer plugin and adjust it to your needs. While this being somewhat more problematic to setup at first we believe that the vast majority of users were not customizing this anyway. By not including the possibility to customize this through an extra option the final solution is more performant because there is no extra overhead of checking if a particular property should be prefixed or not.
    • Prefixer is now just a plugin which happens to be put in default stylisPlugins. If you plan to use custom stylisPlugins and you want to have your styles prefixed automatically you must include prefixer in your custom stylisPlugins. You can import prefixer from the stylis module to do that.
    • @import rules are no longer special-cased. The responsibility to put them first has been moved to the author of the styles. They also can't be nested within other rules now. It's only possible to write them at the top level of global styles.

Patch Changes

emotion - https://github.com/emotion-js/emotion/releases/tag/@emotion/[email protected]

Published by github-actions[bot] over 4 years ago

Major Changes

  • 9e998e37 #1817 Thanks @Andarist! - The parser we use (Stylis) got upgraded. It fixes some long-standing parsing edge cases while being smaller and faster 🚀

    It has been completely rewritten and comes with some breaking changes. Most notable ones that might affect Emotion users are:

    • plugins written for the former Stylis v3 are not compatible with the new version. To learn more on how to write a plugin for Stylis v4 you can check out its README and the source code of core plugins.
    • vendor-prefixing was previously customizable using prefix option. This was always limited to turning off all of some of the prefixes as all available prefixes were on by default. The prefix option is gone and to customize which prefixes are applied you need to fork (copy-paste) the prefixer plugin and adjust it to your needs. While this being somewhat more problematic to setup at first we believe that the vast majority of users were not customizing this anyway. By not including the possibility to customize this through an extra option the final solution is more performant because there is no extra overhead of checking if a particular property should be prefixed or not.
    • Prefixer is now just a plugin which happens to be put in default stylisPlugins. If you plan to use custom stylisPlugins and you want to have your styles prefixed automatically you must include prefixer in your custom stylisPlugins. You can import prefixer from the stylis module to do that.
    • @import rules are no longer special-cased. The responsibility to put them first has been moved to the author of the styles. They also can't be nested within other rules now. It's only possible to write them at the top level of global styles.

Patch Changes

emotion - https://github.com/emotion-js/emotion/releases/tag/@emotion/[email protected]

Published by github-actions[bot] over 4 years ago

Major Changes

  • 9e998e37 #1817 Thanks @Andarist! - insertStyles no longer calls cache.insert with a scoped class name as a selector when inserting keyframes. The change is internal and has no effect on Emotion users.
emotion - https://github.com/emotion-js/emotion/releases/tag/@emotion/[email protected]

Published by github-actions[bot] over 4 years ago

Patch Changes

emotion - https://github.com/emotion-js/emotion/releases/tag/@emotion/[email protected]

Published by github-actions[bot] over 4 years ago

Major Changes

  • 9e998e37 #1817 Thanks @Andarist! - The parser we use (Stylis) got upgraded. It fixes some long-standing parsing edge cases while being smaller and faster 🚀

    It has been completely rewritten and comes with some breaking changes. Most notable ones that might affect Emotion users are:

    • plugins written for the former Stylis v3 are not compatible with the new version. To learn more on how to write a plugin for Stylis v4 you can check out its README and the source code of core plugins.
    • vendor-prefixing was previously customizable using prefix option. This was always limited to turning off all of some of the prefixes as all available prefixes were on by default. The prefix option is gone and to customize which prefixes are applied you need to fork (copy-paste) the prefixer plugin and adjust it to your needs. While this being somewhat more problematic to setup at first we believe that the vast majority of users were not customizing this anyway. By not including the possibility to customize this through an extra option the final solution is more performant because there is no extra overhead of checking if a particular property should be prefixed or not.
    • Prefixer is now just a plugin which happens to be put in default stylisPlugins. If you plan to use custom stylisPlugins and you want to have your styles prefixed automatically you must include prefixer in your custom stylisPlugins. You can import prefixer from the stylis module to do that.
    • @import rules are no longer special-cased. The responsibility to put them first has been moved to the author of the styles. They also can't be nested within other rules now. It's only possible to write them at the top level of global styles.

Patch Changes

emotion - https://github.com/emotion-js/emotion/releases/tag/@emotion/[email protected]

Published by github-actions[bot] over 4 years ago

Patch Changes

emotion - https://github.com/emotion-js/emotion/releases/tag/@emotion/[email protected]

Published by github-actions[bot] over 4 years ago

Patch Changes

emotion - https://github.com/emotion-js/emotion/releases/tag/@emotion/[email protected]

Published by github-actions[bot] over 4 years ago

Major Changes

  • ca599c5f #1901 Thanks @Andarist! - test & print are no longer exported as named exports. If you want to access the default serializer just access the default export. This means that @emotion/jest(previously jest-emotion) can't be used directly in the snapshotSerializers option, you should use @emotion/jest/serializer instead for this.

  • ca599c5f #1901 Thanks @Andarist! - Refactored to use new serializers API which has been introduced in Jest 21.

Minor Changes

Patch Changes

emotion - https://github.com/emotion-js/emotion/releases/tag/@emotion/[email protected]

Published by github-actions[bot] over 4 years ago

Minor Changes

  • 5e803106 #1893 Thanks @Andarist! - Added support for converting assignment expressions to labels in cases like this:

    styles = css``
    Timeline.Item = styled.li``
    Timeline.Item.Anchor = styled.a``
    

Patch Changes

  • 9e998e37 #1817 Thanks @Andarist! - Fixed an issue in our tagged template expressions minifier which has caused whitespace before nested orphaned pseudo selectors being incorrectly removed. In a selector like & :hover the whitespace before colon has a semantic meaning and needs to be preserved.

  • Updated dependencies []:

emotion - https://github.com/emotion-js/emotion/releases/tag/@emotion/[email protected]

Published by github-actions[bot] over 4 years ago

@emotion/css-prettifier

emotion - https://github.com/emotion-js/emotion/releases/tag/@emotion/[email protected]

Published by github-actions[bot] over 4 years ago

Major Changes

  • 9e998e37 #1817 Thanks @Andarist! - @import rules are no longer special-cased - they no longer are always inserted at the beginning of the stylesheet. The responsibility to put them first has been moved to a consumer of this package.

Patch Changes

  • 91046a8c #1900 Thanks @Andarist! - Renamed rehydrate method to hydrate to align naming to what is already used in Emotion and React itself.
emotion - https://github.com/emotion-js/emotion/releases/tag/[email protected]

Published by github-actions[bot] over 4 years ago

Patch Changes

  • b9f8ae3 #1829 Thanks @Andarist! - Skip appending source maps & labels to Babel-transpiled tagged template expressions.
emotion - https://github.com/emotion-js/emotion/releases/tag/@emotion/[email protected]

Published by github-actions[bot] over 4 years ago

Minor Changes

  • 5c7ec859 #1805 Thanks @Andarist! - Requirements for a label extraction have been relaxed. In certain situations it was previously required for a containing function to have a PascalCased name.

Patch Changes

emotion - https://github.com/emotion-js/emotion/releases/tag/@emotion/[email protected]

Published by github-actions[bot] over 4 years ago

Major Changes

  • 105de5c8 #1572 Thanks @Andarist! - [data-emotion] attribute on SSRed styled has changed. You should never rely on it though.

Patch Changes

emotion - https://github.com/emotion-js/emotion/releases/tag/@emotion/[email protected]

Published by github-actions[bot] over 4 years ago

Patch Changes

emotion - https://github.com/emotion-js/emotion/releases/tag/@emotion/[email protected]

Published by github-actions[bot] over 4 years ago

Patch Changes

emotion - https://github.com/emotion-js/emotion/releases/tag/@emotion/[email protected]

Published by github-actions[bot] over 4 years ago

Patch Changes

  • e3d7db87 #1732 Thanks @Andarist! - An additional semicolon is now inserted after interpolated arrays to cover cases when it doesn't have a trailing semi itself and thus breaking composition with styles coming after it.
emotion - https://github.com/emotion-js/emotion/releases/tag/@emotion/[email protected]

Published by github-actions[bot] over 4 years ago

Major Changes

  • 105de5c8 #1572 Thanks @Andarist! - From now on key option is required. Please make sure it's unique (and not equal to 'css') as it's used for linking styles to your cache. If multiple caches share the same key they might "fight" for each other's style elements.

Patch Changes

  • 105de5c8 #1572 Thanks @Andarist! - Fixed issue with SSRed styles causing a React rehydration mismatch between server & client when cache was created in render.
emotion - https://github.com/emotion-js/emotion/releases/tag/@emotion/[email protected]

Published by github-actions[bot] over 4 years ago

Major Changes

  • 105de5c8 #1572 Thanks @Andarist! - [data-emotion] attribute on SSRed styled has changed. You should never rely on it though.

Patch Changes

Package Rankings
Top 9.92% on Repo1.maven.org
Top 0.36% on Npmjs.org
Top 5.89% on Clojars.org
Top 8.17% on Proxy.golang.org
Badges
Extracted from project README
Backers on Open Collective Sponsors on Open Collective npm version Build Status codecov slack