Important: This documentation covers Yarn 1 (Classic).
For Yarn 2+ docs and migration guide, see yarnpkg.com.

Package detail

@emotion/unitless

emotion-js53.2mMIT0.10.0TypeScript support: included

An object of css properties that don't accept values with units

readme

@emotion/unitless

An object of css properties that don't accept values with units

import unitless from '@emotion/unitless'

unitless.flex === 1

unitless.padding === undefined

changelog

New Changes

All new changes are now documented in CHANGELOG.md files in each package's directory.

v10.0.0 (2018-10-27)

Emotion 10 is a big change that we're really excited about with improvements to the css prop, a Global component for dynamic global styles, zero config SSR, lots of small fixes and improvements and more with an incremental adoption strategy. For a higher-level overview, read the Medium article on Emotion 10. For a migration guide, visit the migrating to Emotion 10 page on emotion.sh

:rocket: Enhancement

  • The css prop works without babel-plugin-emotion
    • The css prop receives the theme
    • Labels are added to the css prop without babel-plugin-emotion in some cases
  • Add the Global and ClassNames components
  • styled uses forwardRef
  • Add the as prop to styled
  • Providing options can be done via the CacheProvider
  • The autoLabel and sourceMap options are enabled in development with the Babel Macros
  • The autoLabel and sourceMap options are on by default in development in babel-plugin-emotion
  • Add warning for kebab-case css properties in objects
  • Add keyframes to snapshots with jest-emotion
  • Add codemod rules for Emotion 10
  • Fix SSR with _ in labels
  • Add warnings for unsafe pseudo classes

:boom: Breaking Change

  • create-emotion no longer accepts a global context object
  • Support for preact-emotion has been dropped(note that the emotion package still works with preact)
  • Emotion only supports react@>=16.3
  • The channel and createBroadcast exports from emotion-theming have been removed
  • The extractStatic option to babel-plugin-emotion has been removed
  • jest-emotion no longer accepts an emotion instance
  • create-emotion-server accepts a cache instead of an emotion instance
  • The css prop doesn't work via the babel plugin. jsx can be manually imported from @emotion/core(which can be automated with eslint-plugin-emotion) or babel-plugin-jsx-pragmatic can be used.
  • Functions in interpolations are stringified in css and cx calls(probably won't affect you very much, there's a warning about it in v9)
  • create-emotion doesn't return a caches property and instead returns a cache property which is the same return value as @emotion/cache
  • The importedNames option to babel-plugin-emotion is gone
  • The hoist option is gone, hoisting always happens

v9.2.7 (2018-07-29)

:rocket: Enhancement

Committers: 4

v9.2.6 (2018-07-15)

:rocket: Enhancement

  • create-emotion
    • #751 classnames also accept undefined as value. (@pasix)

:bug: Bug Fix

  • create-emotion, emotion
    • #695 Generate the same class names for server and client if source maps are different. (@mgroenhoff)

Committers: 2

v9.2.5 (2018-07-07)

:rocket: Enhancement

  • babel-plugin-emotion, @emotion/primitives

:bug: Bug Fix

  • create-emotion-styled, preact-emotion
  • create-emotion-styled, create-emotion, emotion, preact-emotion, react-emotion

:memo: Documentation

  • Other
  • babel-plugin-emotion, emotion-theming, emotion, jest-emotion, site
    • #720 Use emotion-next in the site, update to gatsby v2 and add Community page. (@emmatown)

:house: Internal

  • babel-plugin-emotion, create-emotion-server, create-emotion-styled, create-emotion, emotion-server, emotion-theming, emotion, eslint-plugin-emotion, jest-emotion, preact-emotion, react-emotion

Committers: 7

v9.2.4 (2018-06-22)

:rocket: Enhancement

  • babel-plugin-emotion, create-emotion
  • jest-emotion

:bug: Bug Fix

:house: Internal

  • create-emotion-server
  • emotion-theming

Committers: 6

v9.2.3 (2018-06-09)

:bug: Bug Fix

  • create-emotion-styled, emotion-server, emotion-theming, emotion, preact-emotion, react-emotion
    • #710 Remove allowSyntheticDefaultImports from typings. (@Ailrun)

Committers: 1

  • Junyoung Clare Jang (Ailrun)

v9.2.1 (2018-06-07)

:bug: Bug Fix

  • create-emotion-styled, create-emotion, emotion-theming, emotion, preact-emotion, react-emotion

Committers: 1

v9.2.0 (2018-06-07)

:rocket: Enhancement

  • react-emotion
  • preact-emotion
  • create-emotion-styled, create-emotion
  • create-emotion-styled
  • jest-emotion
  • create-emotion-styled, react-emotion
  • emotion
  • create-emotion

:bug: Bug Fix

  • babel-plugin-emotion, create-emotion, emotion-server, emotion
    • #650 Remove comments from styles in babel-plugin-emotion. (@emmatown)
  • jest-emotion
    • #641 Fix jest-emotion in certain cases with nested selectors. (@emmatown)

:memo: Documentation

:house: Internal

  • create-emotion-server, emotion-server, emotion-theming, emotion, react-emotion
    • #692 Add Typescript definitions for 'create-emotion-server' and 'emotion-server'. (@mgroenhoff)
  • create-emotion
    • #698 Remove unused type in create-emotion typing. (@Ailrun)
  • create-emotion-styled, emotion-theming, preact-emotion, react-emotion
    • #694 Add react/preact as peer-dependencies to react-emotion/preact-emotion. (@mgroenhoff)
  • Other
  • babel-plugin-emotion, site
  • create-emotion, emotion
  • react-emotion

Committers: 12

v9.1.3 (2018-05-07)

:rocket: Enhancement

  • create-emotion, emotion

Committers: 2

v9.1.2 (2018-04-17)

:rocket: Enhancement

  • jest-emotion
    • #622 Add support to jest-emotion for printing DOM Elements (#619). (@rszewczyk)
  • emotion-theming
  • create-emotion-styled, react-emotion
    • #616 Support shouldForwardProp in styled's options. (@Andarist)

:house: Internal

  • babel-plugin-emotion, create-emotion-server, create-emotion-styled, create-emotion, emotion-utils, emotion, site
    • #628 Remove emotion-utils and use packages from emotion-js/next. (@emmatown)
  • create-emotion, emotion
  • create-emotion-styled, emotion-utils

Committers: 8

v9.1.1 (2018-04-04)

:rocket: Enhancement

  • create-emotion, emotion-server, emotion, react-emotion

:house: Internal

  • create-emotion-styled
    • #612 Use @emotion/is-prop-valid for checking valid props on string tags. (@emmatown)

Committers: 1

v9.1.0 (2018-03-24)

:rocket: Enhancement

:bug: Bug Fix

  • create-emotion
    • #605 Fix SSR with multiple createEmotion calls with the same context. (@emmatown)
  • emotion
  • react-emotion
  • create-emotion-styled, react-emotion
    • #589 Carry styles from flattened components with withComponent. (@emmatown)
  • babel-plugin-emotion
    • #584 Preserve existing options passed to styled calls. (@Andarist)

Committers: 8

v9.0.2 (2018-02-23)

:bug: Bug Fix

  • create-emotion

:memo: Documentation

  • Other
    • #577 Add Website Development to CONTRIBUTING.md. (@azizhk)
  • emotion, site

Committers: 2

v9.0.1 (2018-02-13)

:rocket: Enhancement

  • babel-plugin-emotion
    • #566 Add option for label formatting. (@sgal)

:bug: Bug Fix

  • create-emotion-styled, create-emotion, emotion
  • emotion-utils
    • #567 Line clamp property needs webkit vendor prefix. (@jschr)

Committers: 5

v9.0.0 (2018-02-04)

Emotion 9 introduces instances, jest-emotion, two new SSR methods, a bunch of fixes and a brand new website!! Instances allow you to customize prefixing options, run plugins during CSS processing, set nonces for CSP and they're totally optional so if you don't need instances keep on using emotion. jest-emotion offers a better out of the box experience and has the potential for more features in the future. emotion-server has new methods for inlining CSS in HTML right before it's needed and adds support for streaming.

:rocket: Enhancement

Migrating from Emotion 8

  1. Emotion no longer has fontFace, you can use injectGlobal to insert font faces instead.
-import { fontFace } from 'emotion'
+import { injectGlobal } from 'emotion'

-fontFace`
-  font-family: 'Oxygen';
-  font-style: normal;
-  font-weight: 400;
-  src: local('Oxygen Regular'), local('Oxygen-Regular'),
-    url(https://fonts.gstatic.com/s/oxygen/v6/qBSyz106i5ud7wkBU-FrPevvDin1pK8aKteLpeZ5c0A.woff2)
-      format('woff2');
-  unicode-range: U+0000-00ff, U+0131, U+0152-0153, U+02c6, U+02da, U+02dc,
-    U+2000-206f, U+2074, U+20ac, U+2212, U+2215;
-`
+injectGlobal`
+  @font-face {
+    font-family: 'Oxygen';
+    font-style: normal;
+    font-weight: 400;
+    src: local('Oxygen Regular'), local('Oxygen-Regular'),
+      url(https://fonts.gstatic.com/s/oxygen/v6/qBSyz106i5ud7wkBU-FrPevvDin1pK8aKteLpeZ5c0A.woff2)
+        format('woff2');
+    unicode-range: U+0000-00ff, U+0131, U+0152-0153, U+02c6, U+02da, U+02dc,
+      U+2000-206f, U+2074, U+20ac, U+2212, U+2215;
+  }
+`
  1. If you used jest-glamor-react in emotion 8, you can switch to jest-emotion by installing it and changing your test setup as shown below.
npm install --save jest-emotion
-import { sheet } from 'emotion'
-import serializer from 'jest-glamor-react'
+import * as emotion from 'emotion'
+import { createSerializer } from 'jest-emotion'

-expect.addSnapshotSerializer(serializer(sheet))
+expect.addSnapshotSerializer(createSerializer(emotion))
  1. Emotion doesn't automatically insert semicolons in styles now. We recommend using Prettier to ensure that your styles are formatted correctly.
  2. That's It!! You might want to check the more detailed list of breaking changes below just in case though.

:boom: Breaking Change

  • emotion
    • fontFace is gone, it can be replaced with injectGlobal with a regular css @font-face rule.
    • The registered and inserted caches are no longer exports of emotion (they're now on the caches object which is exported by emotion) but these aren't documented and should never be relied on externally so this shouldn't cause a problem.
    • Semicolons are not automatically added in style blocks.
    • StyleSheet is no longer used for SSR, this is completely internal(except that emotion exports an instance of this as sheet) so it shouldn't cause any problems.
  • emotion-server
    • extractCritical no longer returns a rules property, this was never documented so it shouldn't cause any problems.

:boom: Breaking Change

  • babel-plugin-emotion, create-emotion-server, create-emotion-styled, create-emotion, emotion-server, emotion-theming, emotion-utils, emotion, jest-emotion, preact-emotion, react-emotion, site

:rocket: Enhancement

  • babel-plugin-emotion, emotion, react-emotion
    • #503 [babel-plugin-emotion][react-emotion] Adds Support for Components as Selectors Using the Object Syntax #501. (@smlmrkhlms)

:bug: Bug Fix

  • emotion
    • #500 Fix styles getting injected in the classname (#492). (@pimmey)
  • emotion-theming
    • #497 Fixed nested themes not being republished on outer theme changes. (@Andarist)
  • jest-emotion

:house: Internal

  • emotion
    • #502 Pass converted arguments as array directly to the underlaying classnames helper. (@Andarist)
  • babel-plugin-emotion, emotion-server, emotion, react-emotion
    • #498 used a simpler hashing strategy when a file system is available. (@probablyup)
  • create-emotion
  • emotion-utils

Committers: 12

v9.0.0-3 (2018-02-03)

:bug: Bug Fix

  • create-emotion-styled, emotion, site
    • #540 Fix create-emotion-styled proxy with react-hot-loader and add appearance: none to search input. (@emmatown)

:house: Internal

Committers: 3

v9.0.0-2 (2018-01-17)

:rocket: Enhancement

  • create-emotion-styled, create-emotion, emotion-utils, emotion, react-emotion
    • #516 Throw a nice error when using the styled shorthand without babel-plugin-emotion and remove duplication in component selector code. (@emmatown)

:bug: Bug Fix

  • create-emotion, emotion

:memo: Documentation

:house: Internal

  • create-emotion-styled, create-emotion, emotion-server, emotion, site
  • babel-plugin-emotion, benchmarks, emotion
  • Other
    • #507 Use lerna-alias for rollup config + fixed rollup plugins order. (@Andarist)
    • #506 Added lerna-alias dep to automate creating jest aliases. (@Andarist)

Committers: 9

v9.0.0-1 (2017-12-23)

:bug: Bug Fix

  • babel-plugin-emotion, create-emotion, emotion-theming, emotion, jest-emotion, react-emotion

Committers: 1

v9.0.0-0 (2017-12-23)

:boom: Breaking Change

  • babel-plugin-emotion, create-emotion-server, create-emotion-styled, create-emotion, emotion-server, emotion-theming, emotion-utils, emotion, jest-emotion, preact-emotion, react-emotion, site

:rocket: Enhancement

  • babel-plugin-emotion, emotion, react-emotion
    • #503 [babel-plugin-emotion][react-emotion] Adds Support for Components as Selectors Using the Object Syntax #501. (@smlmrkhlms)

:bug: Bug Fix

  • emotion
    • #500 Fix styles getting injected in the classname (#492). (@pimmey)
  • emotion-theming
    • #497 Fixed nested themes not being republished on outer theme changes. (@Andarist)

:house: Internal

  • emotion
    • #502 Pass converted arguments as array directly to the underlaying classnames helper. (@Andarist)
  • babel-plugin-emotion, emotion-server, emotion, react-emotion
    • #498 used a simpler hashing strategy when a file system is available. (@probablyup)

Committers: 5

v8.0.12 (2017-12-01)

:rocket: Enhancement

  • babel-plugin-emotion, emotion-server, emotion-theming, emotion-utils, emotion, react-emotion, site

:bug: Bug Fix

  • babel-plugin-emotion
    • #483 Fix css prop in babel 7 with module transformer and fix source maps in latest babel 7 beta. (@emmatown)
  • emotion

Committers: 3

v8.0.11 (2017-11-24)

:bug: Bug Fix

  • babel-plugin-emotion, emotion, react-emotion
  • babel-plugin-emotion, emotion
    • #458 Fix source maps without a semicolon or newline after the last declaration. (@emmatown)

:house: Internal

  • emotion-theming
  • emotion-theming, emotion-utils, emotion, preact-emotion, react-emotion

Committers: 2

v8.0.10 (2017-11-07)

:rocket: Enhancement

  • react-emotion
    • #443 Don't filter props on string tags started with Uppercase letter. (@asvetliakov)
  • babel-plugin-emotion, emotion-server, emotion, react-emotion
    • #375 Add label property and autoLabel option for babel-plugin-emotion. (@tkh44)

:bug: Bug Fix

  • babel-plugin-emotion, benchmarks, emotion-server, emotion-theming, emotion-utils, emotion, preact-emotion, react-emotion, site

:memo: Documentation

:house: Internal

  • emotion-theming, emotion, react-emotion
    • #421 Switched to using dtslint from just running tsc --noEmit for typescript tests. (@cameron-martin)

Committers: 12

v8.0.9 (2017-10-23)

:rocket: Enhancement

:bug: Bug Fix

  • babel-plugin-emotion, emotion
    • #428 Fix editing styles in devtools with source maps. (@emmatown)

:memo: Documentation

:house: Internal

  • babel-plugin-emotion, benchmarks, emotion-server, emotion-theming, emotion-utils, emotion, preact-emotion, react-emotion, site
  • react-emotion
  • emotion-theming, react-emotion
    • #419 Typescript typings: Added emotion-theming typings and fixed react-emotion typings. (@asvetliakov)
  • emotion

Committers: 7

v8.0.8 (2017-10-16)

:rocket: Enhancement

  • emotion
    • #397 Add a basic cx api so that users can merge emotion and custom classes. (@tkh44)

:memo: Documentation

Committers: 2

v8.0.7 (2017-10-16)

:rocket: Enhancement

  • emotion
    • #338 change "DO-NOT-USE" to "emotion.umd" in umd file names. (@tkh44)
  • react-emotion

:memo: Documentation

  • emotion-theming, emotion
  • Other

Committers: 5

v8.0.6 (2017-10-14)

:rocket: Enhancement

:house: Internal

  • babel-plugin-emotion, emotion, react-emotion, stylis-plugin-emotion
    • #406 Remove stylis-plugin-emotion and use stylis-rule-sheet. (@emmatown)
  • emotion

Committers: 4

v8.0.5 (2017-10-07)

:memo: Documentation

:house: Internal

  • emotion, stylis-plugin-emotion
    • #391 Extract insertion plugin into stylis-plugin-emotion. (@tkh44)

Committers: 2

v8.0.4 (2017-10-07)

:house: Internal

  • emotion, react-emotion

Committers: 1

v8.0.3 (2017-10-06)

:rocket: Enhancement

  • emotion
    • #377 Add isBrowser as a property of sheet so that it can be manually set.. (@tkh44)

:bug: Bug Fix

  • babel-plugin-emotion, emotion, react-emotion

:memo: Documentation

:house: Internal

Committers: 2

v8.0.2 (2017-10-01)

:bug: Bug Fix

  • react-emotion

Committers: 1

v8.0.2-13 (2017-10-01)

:bug: Bug Fix

  • react-emotion

Committers: 1

v8.0.2-12 (2017-10-01)

:rocket: Enhancement

  • emotion, react-emotion
    • #363 Recursively call functions in styled with props. (@emmatown)

Committers: 1

v8.0.2-11 (2017-09-30)

:rocket: Enhancement

  • babel-plugin-emotion, emotion-theming, react-emotion
    • #361 Add more context to the styled component displayName. (@tkh44)

:bug: Bug Fix

:house: Internal

  • emotion, react-emotion

Committers: 2

v8.0.2-10 (2017-09-29)

:rocket: Enhancement

  • babel-plugin-emotion, emotion-theming, react-emotion, site

Committers: 2

v8.0.2-9 (2017-09-27)

:bug: Bug Fix

  • emotion, react-emotion
    • #352 Check for null when evaluating input strings in createStyles. (@tkh44)

Committers: 1

  • Kye Hohenberger (tkh44)

v8.0.2-8 (2017-09-27)

:rocket: Enhancement

:memo: Documentation

  • #348 Document CSS prop incompatibility with babel-plugin-transform-react-inline-elements. (@apostolos)

Committers: 2

v8.0.2-7 (2017-09-25)

:rocket: Enhancement

  • emotion, react-emotion
    • #346 Allow interpolation return value to be a function. . (@tkh44)
    • #327 Use cross-env to pass env vars across platforms. (@apostolos)

:memo: Documentation

  • #345 Add /docs folder README and CodeSandbox.io links. (@tkh44)

Committers: 2

v8.0.2-6 (2017-09-25)

:boom: Breaking Change

  • babel-plugin-emotion, emotion-server, emotion, react-emotion

:rocket: Enhancement

  • react-emotion, site
  • emotion
    • #335 Add a WeakMap cache to createStringFromObject. (@emmatown)
  • babel-plugin-emotion, emotion, site
    • #332 Add support for object arguments in css prop with source maps. (@tkh44)

:house: Internal

  • emotion
  • Other
    • #333 Run benchmarks and tests in parallel and cache packages node_modules. (@emmatown)

Committers: 3

v8.0.2-5 (2017-09-24)

:rocket: Enhancement

  • babel-plugin-emotion, emotion-server, emotion, site

:bug: Bug Fix

:house: Internal

Committers: 2

v8.0.2-4 (2017-09-22)

:bug: Bug Fix

  • emotion
    • #324 Fix multiple nested selectors in media queries. (@emmatown)

Committers: 1

v8.0.2-3 (2017-09-22)

:boom: Breaking Change

  • babel-plugin-emotion, emotion-server, emotion-utils, emotion, preact-emotion, react-emotion

:bug: Bug Fix

  • babel-plugin-emotion, emotion-server, emotion-utils, emotion, preact-emotion, react-emotion

Committers: 1

v8.0.2-2 (2017-09-22)

:bug: Bug Fix

  • babel-plugin-emotion, emotion-server, emotion, react-emotion
    • #321 Ensure proper insert order of nested rules & atRules. (@tkh44)

Committers: 2

v8.0.2-1 (2017-09-21)

:bug: Bug Fix

  • babel-plugin-emotion, emotion

Committers: 1

v8.0.2-0 (2017-09-20)

:bug: Bug Fix

  • emotion
    • #316 Handle null value in array of styles.. (@tkh44)

Committers: 1

  • Kye Hohenberger (tkh44)

v8.0.0-0 (2017-09-14)

(This is a WIP changelog)

:boom: Breaking Change

  • composes is gone and replaced with random interpolations (there's a codemod)
  • Nested class selectors default to & .class instead of &.class if the & is omitted

:rocket: Enhancement

  • Better performance

:bug: Bug Fix

  • All edge cases with prefixing are gone
  • css prop specificity (#308)

:house: Internal

  • Don't convert tagged template literals to objects

Committers: 2

v7.3.2 (2017-09-14)

:rocket: Enhancement

  • babel-plugin-emotion

Committers: 1

v7.3.0 (2017-09-13)

:rocket: Enhancement

:house: Internal

  • babel-plugin-emotion, emotion, react-emotion
    • #304 Use babel-plugin-codegen to generate props regex. (@emmatown)
  • babel-plugin-emotion

Committers: 3

v7.2.1 (2017-09-05)

:memo: Documentation

:house: Internal

  • Other
    • #294 Add module name mapping for emotion-utils to .flowconfig. (@bigslycat)
  • babel-plugin-emotion
  • babel-plugin-emotion, emotion-utils, emotion, preact-emotion, react-emotion
  • babel-plugin-emotion, emotion-server, emotion-utils, emotion, preact-emotion, react-emotion
    • #276 chore: update packages to deeplink into their respective directories. (@probablyup)

Committers: 6

v7.2.0 (2017-08-20)

:rocket: Enhancement

Committers: 1

v7.1.1 (2017-08-20)

:bug: Bug Fix

  • react-emotion
    • #268 Add missing macro.js to react-emotion package. (@silvenon)

:memo: Documentation

Commiteters: 2

v7.1.0 (2017-08-18)

:rocket: Enhancement

  • babel-plugin-emotion, emotion-server, emotion
    • #265 Fix nested interpolated media queries and support random interpolations in injectGlobal. (@emmatown)
  • babel-plugin-emotion, emotion-server, emotion-utils, emotion, react-emotion
    • #259 Split everything into its own package with Lerna. (@emmatown)
  • Other

:bug: Bug Fix

  • #256 Fix nested selectors without parent declaration. (@emmatown)

:memo: Documentation

Committers: 2

v7.0.12 (2017-08-09)

:bug: Bug Fix

:memo: Documentation

:house: Internal

Committers: 3

v7.0.11 (2017-08-05)

:house: Internal

Committers: 1

v7.0.10 (2017-08-04)

:memo: Documentation

Committers: 1

v7.0.9 (2017-08-04)

:rocket: Enhancement

Committers: 2

v7.0.7 (2017-08-02)

:rocket: Enhancement

:bug: Bug Fix

  • #224 Handle case where css float property is converted to cssFloat by autoprefixer camelCase function. (@tkh44)
  • #223 Small fix for #221. (@tkh44)

Committers: 2

v7.0.6 (2017-08-01)

:rocket: Enhancement

  • #213 Allow random expressions as long as they result in a className that begins with css. (@tkh44)

Committers: 1

  • Kye Hohenberger (tkh44)

v7.0.5 (2017-08-01)

:bug: Bug Fix

Committers: 2

v7.0.4 (2017-07-30)

:bug: Bug Fix

  • #205 Fix prefixed selectors in objects. (@emmatown)
  • #204 Fix shorthand property syntax in object styles and use spread syntax instead of transform in tests. (@emmatown)
  • #203 Component as selector fix. (@emmatown)

:memo: Documentation

Committers: 2

v7.0.3 (2017-07-28)

:rocket: Enhancement

  • #202 Render fewer components when composing components. (@emmatown)

Committers: 1

v7.0.2 (2017-07-28)

:rocket: Enhancement

:bug: Bug Fix

  • #192 Use postcss-nested and postcss-safe-parser instead of styled-components fork and pass filename to postcss. (@emmatown)

:house: Internal

Committers: 3

v7.0.1 (2017-07-27)

:bug: Bug Fix

:house: Internal

Committers: 3