Comparing version 0.25.1 to 0.25.2
# Radium Changelog | ||
## 0.25.2 (June 7, 2019) | ||
#### Bug Fixes | ||
- Bump handlebars from 4.0.6 to 4.1.2 (#1026) | ||
- Fixed bug with undefined \_extraRadiumStateKeys (#1025) | ||
- Update unitless CSS property list and licensing (#1020) | ||
## 0.25.1 (December 16, 2018) | ||
#### Bug Fixes | ||
- Pass `snapshot` argument to `componentDidUpdate (#1013) | ||
#### Infra/Tooling | ||
- Fix console warnings when running examples (#1002) | ||
@@ -15,3 +26,4 @@ - Upgrade karma to 3.0 (#1003) | ||
## 0.25.0 (September 16, 2018) | ||
- Use `Reflect` to construct es native classes in a way that preserves the value of `this` used in | ||
- Use `Reflect` to construct es native classes in a way that preserves the value of `this` used in | ||
the constructor. (#999, #1001) | ||
@@ -21,5 +33,7 @@ - Handle multiple animationName props (#909) | ||
## 0.24.1 (July 9, 2018) | ||
- Make `<StyleSheet>` manually update `<style>` tag DOM, fixing media queries on component level flickering. (#626, #950) | ||
## 0.24.0 (March 29, 2018) | ||
- Fix `render` methods that return array of children or `React.Fragment`. (#950) | ||
@@ -29,27 +43,36 @@ - Upgrade tests to React 16.2 (for `Fragment` support) | ||
## 0.23.0 (March 15, 2018) | ||
- Support ES7 arrow functions for React class methods. (#738) | ||
## 0.22.1 (March 1, 2018) | ||
- Fix `keyframes` bug from prefixed inline styles. (#973) | ||
## 0.22.0 (February 9, 2018) | ||
### Breaking Changes | ||
- Radium now exports defaults as `.default`, so for runtimes like Node.js for all files in `lib/**`. We have changed `package.json:main` to point to `/index.js` instead of `/lib/index.js` as a convenience wrapper to expose mostly what was there before so behavior of `const Radium = require('radium');` works mostly as it did before. Caveats: | ||
- When using webpack2+ to build code with `require('radium')` in it you will need to change that to become `require('radium').default`. | ||
- Any imports of a default export from a file in lib like `const Enhancer = require('radium/lib/enhancer');` will need to be changed to `const Enhancer = require('radium/lib/enhancer').default;`. | ||
- We have a full examples repository of how imports work in all likely scenarios that should come up. https://github.com/FormidableLabs/radium-experiments-v0.22 | ||
- When using webpack2+ to build code with `require('radium')` in it you will need to change that to become `require('radium').default`. | ||
- Any imports of a default export from a file in lib like `const Enhancer = require('radium/lib/enhancer');` will need to be changed to `const Enhancer = require('radium/lib/enhancer').default;`. | ||
- We have a full examples repository of how imports work in all likely scenarios that should come up. https://github.com/FormidableLabs/radium-experiments-v0.22 | ||
### Features | ||
- Add `es` ESM module export files. | ||
### Fixes | ||
- Fix `package.json:scripts.postinstall` task to correctly work for git-based dependencies. | ||
## 0.21.2 (January 25, 2018) | ||
- Fix multiple-value prefixed inline styles. (#962, #958, #951) | ||
## 0.21.1 (January 18, 2018) | ||
- Call `componentDidUpdate()` inherited method (#957). | ||
## 0.21.0 (January 8, 2018) | ||
- Automatically clear browser state of elements when unmounting and remounting (#956). | ||
@@ -59,20 +82,27 @@ - `resolveStyles` returns `{ extraRadiumStateKeys, element }` instead of just `element`. | ||
## 0.20.1 (January 8, 2018) | ||
- Fix `v0.20.0` build. | ||
## 0.20.0 (January 8, 2018) | ||
- Upgrade `inline-style-prefixer` to version `^4.0.0`. | ||
## 0.19.6 (October 5, 2017) | ||
- Allow native ES classes to be used with the Radium enhancer. | ||
## 0.19.5 (October 5, 2017) | ||
- Enable React 16 in `peerDependencies` and update tests to React 16. | ||
## 0.19.4 (July 21, 2017) | ||
- Remove `.babelrc` from published npm registry package. | ||
## 0.19.3 (July 20, 2017) | ||
- Remove `publishr` from prod `dependencies` in npm registry package. | ||
## 0.19.2 (July 20, 2017) | ||
- Switch to `publishr` workflow. (#894, #731, #900) | ||
@@ -85,2 +115,3 @@ - Remove `rimraf` from prod `dependencies` in npm registry package. | ||
### Bug Fixes | ||
- Makes `prop-types` a `dependencies` instead of a `peerDependencies` in `package.json` per the `prop-types` [integration guide](https://github.com/facebook/prop-types#how-to-depend-on-this-package). | ||
@@ -91,2 +122,3 @@ | ||
### Improvements | ||
- Unreverts PropTypes-related diff, which is now a minor version instead of a patch | ||
@@ -97,2 +129,3 @@ | ||
### Bug Fixes | ||
- Reverts PropTypes-related diff, which should have been a minor version instead of a patch | ||
@@ -103,2 +136,3 @@ | ||
### Improvements | ||
- Update dependencies | ||
@@ -111,2 +145,3 @@ - Update deprecated React syntax in examples | ||
### Improvements | ||
- Update `inline-style-prefixer` to v2.0.5 (#880). | ||
@@ -119,2 +154,3 @@ - Use `React.PureComponent` to avoid unnecessary rendering (#868). | ||
### Bug Fixes | ||
- Fix unused props warning when passing `radiumConfig` to `StyleRoot` (#787). | ||
@@ -125,5 +161,7 @@ | ||
### Breaking Changes | ||
- Revert `content` auto-quoting in `Style` component (#783). | ||
### Bug Fixes | ||
- Silence React 15.2 unused props deprecation warning (#782). | ||
@@ -134,2 +172,3 @@ | ||
### Bug Fixes | ||
- Fix `content` values in `Style` component (#719). | ||
@@ -139,2 +178,3 @@ - Improve stateless component check to work with native arrow functions (#771). | ||
### Improvements | ||
- Add support for `:disabled` pseudo-class (#689). | ||
@@ -146,5 +186,7 @@ - Add plugin to remove nested style objects and prevent `[Object object]` from rendering in the DOM (#703). | ||
### Bug Fixes | ||
- Remove babel modules accidentally published as dependencies. | ||
### Improvements | ||
- Add support for `scopeSelector` without nested selectors in `Style` component. | ||
@@ -155,8 +197,11 @@ | ||
### Bug Fixes | ||
- Upgrade `inline-style-prefixer` to version `1.0.3` with a fix for `display` values being removed in IE10. | ||
### Improvements | ||
- Add `TestMode` for controlling internal Radium state and behavior during tests. | ||
### Breaking Changes | ||
- `inline-style-prefixer` has updated vendor prefixes, removing some outdated prefixes like `-moz-transform`. | ||
@@ -167,2 +212,3 @@ | ||
### Bug Fixes | ||
- The `lib/` directory did not get built property in 0.16.6. `lib/` now contains all changes from 0.16.5. | ||
@@ -173,2 +219,3 @@ | ||
### Bug Fixes | ||
- Don't merge media query styles, fixes #550 | ||
@@ -178,9 +225,13 @@ - Don't add className if empty, fixes #539 | ||
### Improvements | ||
- Passing `'all'` as the `userAgent` will add all prefixes, useful for caching server-rendered pages, thanks @oliviertassinari (this applies to inline styles and style rendered as CSS, but does not yet include adding all the prefixed versions of `keyframes`) | ||
- Add support for `:visited` styles: | ||
```jsx | ||
const url = 'https://github.com/formidablelabs/radium'; | ||
const VisitedLink = Radium(() => | ||
<a href={url} style={{color: 'gray', ':visited': {color: 'black'}}}>{url}</a> | ||
); | ||
const VisitedLink = Radium(() => ( | ||
<a href={url} style={{color: 'gray', ':visited': {color: 'black'}}}> | ||
{url} | ||
</a> | ||
)); | ||
``` | ||
@@ -191,6 +242,8 @@ | ||
### Bug Fixes | ||
- Add `px` suffix if needed *before* prefixing, since the list in `appendPxIfNeeded` does not include prefixed variants | ||
- Add `px` suffix if needed _before_ prefixing, since the list in `appendPxIfNeeded` does not include prefixed variants | ||
- Radium now calls `toString` on values itself, instead of relying on `inline-style-prefixer` or React to do so (they don't) | ||
### Improvements | ||
- Much lighter `npm install radium` by removing `babel` & co from `dependencies` before publishing | ||
@@ -200,2 +253,3 @@ - Radium now ignores children or props that are themselves Radium enhanced components, for a nice perf gain. Thanks @spacenick | ||
## 0.16.3 (January 21, 2016) | ||
- Published under the `test` tag, so not installable via npm latest | ||
@@ -208,4 +262,5 @@ - Forgot to add `-test` to the version | ||
### Bug Fixes | ||
- `<StyleSheet/> Component:` | ||
- Bind the private method _onChange to the class instance | ||
- Bind the private method \_onChange to the class instance | ||
- Wrap setState in setTimeout and keep track of isMounted, #500 | ||
@@ -220,2 +275,3 @@ - Remove duplicate declaration of componentWillUnmount and move `this._isMounted = true` inside `componentDidMount` | ||
### Bug Fixes | ||
- `<StyleRoot>` no longer throws an error on unmount | ||
@@ -226,5 +282,7 @@ | ||
### New Features | ||
- Server-side rendering for media queries and keyframes! | ||
### Breaking Changes | ||
- To use keyframes and media queries, you must wrap your components in the `<StyleRoot>` component, typically in `<App>`: https://github.com/FormidableLabs/radium/tree/master/docs/api#styleroot-component | ||
@@ -235,2 +293,3 @@ - The result of Radium.keyframes is the animation name, and should be assigned to the `animationName` prop: https://github.com/FormidableLabs/radium/tree/master/docs/api#keyframes | ||
### Bug Fixes | ||
- Don't add extra media query listeners | ||
@@ -240,2 +299,3 @@ - Append px to numeric values on properties that don't accept unitless values | ||
### Improvements | ||
- Upgrade `inline-style-prefixer` to version 0.6.2 (Edge support) | ||
@@ -363,3 +423,3 @@ - Better error on duplicate keys | ||
- Fix bug with _radiumDidResolveStyles that was breaking in React 0.14.0-beta2 | ||
- Fix bug with \_radiumDidResolveStyles that was breaking in React 0.14.0-beta2 | ||
- Un-prefix values before checking isUnitlessNumber, #305, thanks @AnSavvides | ||
@@ -366,0 +426,0 @@ - Prevent errors from getters that do not have setters as static props of React components, #306, thanks @rolandpoulter |
// Copied from https://github.com/facebook/react/blob/ | ||
// 102cd291899f9942a76c40a0e78920a6fe544dc1/ | ||
// src/renderers/dom/shared/CSSProperty.js | ||
// b87aabdfe1b7461e7331abb3601d9e6bb27544bc/ | ||
// packages/react-dom/src/shared/CSSProperty.js | ||
var isUnitlessNumber = { | ||
animationIterationCount: true, | ||
borderImageOutset: true, | ||
borderImageSlice: true, | ||
borderImageWidth: true, | ||
boxFlex: true, | ||
@@ -12,2 +15,3 @@ boxFlexGroup: true, | ||
columnCount: true, | ||
columns: true, | ||
flex: true, | ||
@@ -19,4 +23,11 @@ flexGrow: true, | ||
flexOrder: true, | ||
gridArea: true, | ||
gridRow: true, | ||
gridRowEnd: true, | ||
gridRowSpan: true, | ||
gridRowStart: true, | ||
gridColumn: true, | ||
gridColumnEnd: true, | ||
gridColumnSpan: true, | ||
gridColumnStart: true, | ||
fontWeight: true, | ||
@@ -35,4 +46,7 @@ lineClamp: true, | ||
fillOpacity: true, | ||
floodOpacity: true, | ||
stopOpacity: true, | ||
strokeDasharray: true, | ||
strokeDashoffset: true, | ||
strokeMiterlimit: true, | ||
strokeOpacity: true, | ||
@@ -39,0 +53,0 @@ strokeWidth: true |
@@ -169,3 +169,3 @@ var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; | ||
if (this._extraRadiumStateKeys.length > 0) { | ||
if (this._extraRadiumStateKeys && this._extraRadiumStateKeys.length > 0) { | ||
var trimmedRadiumState = this._extraRadiumStateKeys.reduce(function (state, key) { | ||
@@ -172,0 +172,0 @@ var extraStateKey = state[key], |
@@ -10,6 +10,9 @@ 'use strict'; | ||
// Copied from https://github.com/facebook/react/blob/ | ||
// 102cd291899f9942a76c40a0e78920a6fe544dc1/ | ||
// src/renderers/dom/shared/CSSProperty.js | ||
// b87aabdfe1b7461e7331abb3601d9e6bb27544bc/ | ||
// packages/react-dom/src/shared/CSSProperty.js | ||
var isUnitlessNumber = { | ||
animationIterationCount: true, | ||
borderImageOutset: true, | ||
borderImageSlice: true, | ||
borderImageWidth: true, | ||
boxFlex: true, | ||
@@ -19,2 +22,3 @@ boxFlexGroup: true, | ||
columnCount: true, | ||
columns: true, | ||
flex: true, | ||
@@ -26,4 +30,11 @@ flexGrow: true, | ||
flexOrder: true, | ||
gridArea: true, | ||
gridRow: true, | ||
gridRowEnd: true, | ||
gridRowSpan: true, | ||
gridRowStart: true, | ||
gridColumn: true, | ||
gridColumnEnd: true, | ||
gridColumnSpan: true, | ||
gridColumnStart: true, | ||
fontWeight: true, | ||
@@ -42,4 +53,7 @@ lineClamp: true, | ||
fillOpacity: true, | ||
floodOpacity: true, | ||
stopOpacity: true, | ||
strokeDasharray: true, | ||
strokeDashoffset: true, | ||
strokeMiterlimit: true, | ||
strokeOpacity: true, | ||
@@ -46,0 +60,0 @@ strokeWidth: true |
@@ -190,3 +190,3 @@ 'use strict'; | ||
if (this._extraRadiumStateKeys.length > 0) { | ||
if (this._extraRadiumStateKeys && this._extraRadiumStateKeys.length > 0) { | ||
var trimmedRadiumState = this._extraRadiumStateKeys.reduce(function (state, key) { | ||
@@ -193,0 +193,0 @@ var extraStateKey = state[key], |
{ | ||
"name": "radium", | ||
"version": "0.25.1", | ||
"version": "0.25.2", | ||
"description": "A set of tools to manage inline styles on React elements", | ||
@@ -5,0 +5,0 @@ "main": "index.js", |
@@ -7,8 +7,11 @@ [![Travis Status][trav_img]][trav_site] | ||
![gzipped size][size_img] | ||
[![Maintenance Status][maintenance-image]](#maintenance-status) | ||
# Radium | ||
```sh | ||
yarn add radium | ||
# or | ||
npm install --save radium | ||
``` | ||
npm install radium | ||
``` | ||
@@ -20,2 +23,8 @@ Radium is a set of tools to manage inline styles on React elements. It gives you powerful styling capabilities without CSS. | ||
## Maintenance Status | ||
**Stable:** Formidable is not planning to develop any new features for this project. We are still responding to bug reports and security concerns. We are still welcoming PRs for this project, but PRs that include new features should be small and easy to integrate and should not include breaking changes. | ||
For more about what this means for Radium, view our announcement [here](https://formidable.com/blog/2019/radium-maintenance/). | ||
## Overview | ||
@@ -39,8 +48,8 @@ | ||
* Conceptually simple extension of normal inline styles | ||
* Browser state styles to support `:hover`, `:focus`, and `:active` | ||
* Media queries | ||
* Automatic vendor prefixing | ||
* Keyframes animation helper | ||
* ES6 class and `createClass` support | ||
- Conceptually simple extension of normal inline styles | ||
- Browser state styles to support `:hover`, `:focus`, and `:active` | ||
- Media queries | ||
- Automatic vendor prefixing | ||
- Keyframes animation helper | ||
- ES6 class and `createClass` support | ||
@@ -78,7 +87,3 @@ ## Docs | ||
return ( | ||
<button | ||
style={[ | ||
styles.base, | ||
styles[this.props.kind] | ||
]}> | ||
<button style={[styles.base, styles[this.props.kind]]}> | ||
{this.props.children} | ||
@@ -101,3 +106,5 @@ </button> | ||
':hover': { | ||
background: color('#0074d9').lighten(0.2).hexString() | ||
background: color('#0074d9') | ||
.lighten(0.2) | ||
.hexString() | ||
} | ||
@@ -124,3 +131,3 @@ }, | ||
import Radium from 'radium'; | ||
import Radium, { Style } from 'radium'; | ||
import Radium, {Style} from 'radium'; | ||
``` | ||
@@ -132,3 +139,3 @@ | ||
const Radium = require('radium'); | ||
const { Style } = require('radium'); | ||
const {Style} = require('radium'); | ||
``` | ||
@@ -140,3 +147,3 @@ | ||
const Radium = require('radium').default; // CHANGED: Must add `.default` | ||
const { Style } = require('radium'); // Works as per normal | ||
const {Style} = require('radium'); // Works as per normal | ||
``` | ||
@@ -149,3 +156,3 @@ | ||
alias: { | ||
radium: require.resolve("radium/index") | ||
radium: require.resolve('radium/index'); | ||
} | ||
@@ -157,3 +164,3 @@ } | ||
*Note:* Radium uses `Reflect` which is not supported in IE11. You will need to bring in a polyfill like [CoreJs](https://github.com/zloirock/core-js#ecmascript-reflect) in order to support <IE11. | ||
_Note:_ Radium uses `Reflect` which is not supported in IE11. You will need to bring in a polyfill like [CoreJs](https://github.com/zloirock/core-js#ecmascript-reflect) in order to support <IE11. | ||
@@ -209,1 +216,2 @@ ## Examples | ||
[appveyor_site]: https://ci.appveyor.com/project/ryan-roemer/radium | ||
[maintenance-image]: https://img.shields.io/badge/maintenance-stable-blue.svg |
/* @flow */ | ||
// Copied from https://github.com/facebook/react/blob/ | ||
// 102cd291899f9942a76c40a0e78920a6fe544dc1/ | ||
// src/renderers/dom/shared/CSSProperty.js | ||
// b87aabdfe1b7461e7331abb3601d9e6bb27544bc/ | ||
// packages/react-dom/src/shared/CSSProperty.js | ||
const isUnitlessNumber = { | ||
animationIterationCount: true, | ||
borderImageOutset: true, | ||
borderImageSlice: true, | ||
borderImageWidth: true, | ||
boxFlex: true, | ||
@@ -12,2 +15,3 @@ boxFlexGroup: true, | ||
columnCount: true, | ||
columns: true, | ||
flex: true, | ||
@@ -19,4 +23,11 @@ flexGrow: true, | ||
flexOrder: true, | ||
gridArea: true, | ||
gridRow: true, | ||
gridRowEnd: true, | ||
gridRowSpan: true, | ||
gridRowStart: true, | ||
gridColumn: true, | ||
gridColumnEnd: true, | ||
gridColumnSpan: true, | ||
gridColumnStart: true, | ||
fontWeight: true, | ||
@@ -35,4 +46,7 @@ lineClamp: true, | ||
fillOpacity: true, | ||
floodOpacity: true, | ||
stopOpacity: true, | ||
strokeDasharray: true, | ||
strokeDashoffset: true, | ||
strokeMiterlimit: true, | ||
strokeOpacity: true, | ||
@@ -39,0 +53,0 @@ strokeWidth: true |
@@ -186,3 +186,3 @@ /* @flow */ | ||
if (this._extraRadiumStateKeys.length > 0) { | ||
if (this._extraRadiumStateKeys && this._extraRadiumStateKeys.length > 0) { | ||
const trimmedRadiumState = this._extraRadiumStateKeys.reduce( | ||
@@ -189,0 +189,0 @@ (state, key) => { |
Sorry, the diff of this file is too big to display
Sorry, the diff of this file is too big to display
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
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
735711
16023
207