Repository: FormidableLabs/radium
Branch: master
Commit: b8faaa0c1c4c
Files: 97
Total size: 305.1 KB

Directory structure:
gitextract_taxgn3kc/

├── .agignore
├── .babelrc
├── .editorconfig
├── .eslintignore
├── .eslintrc
├── .flowconfig
├── .gitignore
├── .npmignore.publishr
├── .prettierignore
├── .prettierrc
├── .travis.yml
├── CHANGELOG.md
├── CONTRIBUTING.md
├── LICENSE-examples.md
├── LICENSE.md
├── README.md
├── appveyor.yml
├── bower.json
├── docs/
│   ├── README.md
│   ├── api/
│   │   └── README.md
│   ├── faq/
│   │   └── README.md
│   └── guides/
│       ├── README.md
│       └── upgrade-v0.16.x.md
├── examples/
│   ├── app.js
│   ├── client.js
│   ├── common.styles.js
│   ├── components/
│   │   ├── button.js
│   │   └── computed-well.js
│   ├── index.html
│   ├── server.js
│   └── webpack.config.js
├── index.js
├── interfaces/
│   ├── hoist-non-react-statics.js
│   └── inline-style-prefixer.js
├── karma.conf.coverage.js
├── karma.conf.ie.js
├── karma.conf.js
├── package.json
├── scripts/
│   └── update-prefix-data.js
├── src/
│   ├── __mocks__/
│   │   ├── exenv.js
│   │   └── prefixer.js
│   ├── __tests__/
│   │   ├── camel-case-props-to-dash-case-test.js
│   │   ├── clean-state-key-test.js
│   │   ├── enhancer-test.js
│   │   ├── get-radium-style-state-test.js
│   │   ├── get-state-key-test.js
│   │   ├── get-state-test.js
│   │   ├── keyframes-test.js
│   │   ├── media-query-test.js
│   │   ├── radium-test.js
│   │   ├── remove-nested-styles-test.js
│   │   ├── resolve-styles-test.js
│   │   ├── style-component-test.js
│   │   └── visited-test.js
│   ├── append-important-to-each-value.js
│   ├── append-px-if-needed.js
│   ├── camel-case-props-to-dash-case.js
│   ├── clean-state-key.js
│   ├── components/
│   │   ├── style-root.js
│   │   ├── style-sheet.js
│   │   └── style.js
│   ├── config.js
│   ├── context.js
│   ├── css-rule-set-to-string.js
│   ├── enhancer.js
│   ├── get-radium-style-state.js
│   ├── get-state-key.js
│   ├── get-state.js
│   ├── hash.js
│   ├── index.js
│   ├── keyframes.js
│   ├── map-object.js
│   ├── merge-styles.js
│   ├── plugins/
│   │   ├── check-props-plugin.js
│   │   ├── index.js
│   │   ├── keyframes-plugin.js
│   │   ├── merge-style-array-plugin.js
│   │   ├── mouse-up-listener.js
│   │   ├── prefix-plugin.js
│   │   ├── remove-nested-styles-plugin.js
│   │   ├── resolve-interaction-styles-plugin.js
│   │   ├── resolve-media-queries-plugin.js
│   │   └── visited-plugin.js
│   ├── prefix-data/
│   │   ├── dynamic.js
│   │   └── static.js
│   ├── prefixer.js
│   ├── resolve-styles.js
│   ├── style-keeper.js
│   └── test-helpers.js
├── test/
│   ├── .eslintrc
│   ├── enhancer-test.js
│   ├── mocha.opts
│   ├── radium-test.js
│   ├── setup.js
│   └── utils.js
├── webpack.config.js
└── webpack.config.minified.js

================================================
FILE CONTENTS
================================================

================================================
FILE: .agignore
================================================
dist
lib


================================================
FILE: .babelrc
================================================
{
  "plugins": [
    "@babel/plugin-transform-destructuring",
    [
      "@babel/plugin-proposal-decorators",
      {
        "legacy": true
      }
    ],
    [
      "@babel/plugin-proposal-class-properties",
      {
        "loose": true,
      },
    ],
  ],
  "presets": [
    [
      "@babel/preset-env",
      {
        "modules": false
      }
    ],
    "@babel/preset-flow",
    "@babel/preset-react"
  ],
  "env": {
    "commonjs": {
      "plugins": [
        "@babel/plugin-transform-destructuring",
        [
          "@babel/plugin-proposal-decorators",
          {
            "legacy": true
          }
        ],
        [
          "@babel/plugin-proposal-class-properties",
          {
            "loose": true,
          },
        ],
      ],
      "presets": [
        [
          "@babel/preset-env",
          {
            "modules": "commonjs"
          }
        ],
        "@babel/preset-flow",
        "@babel/preset-react"
      ],
    }
  }
}


================================================
FILE: .editorconfig
================================================
# EditorConfig helps developers define and maintain consistent
# coding styles between different editors and IDEs
# editorconfig.org

root = true

[*]
indent_style = space
indent_size = 2

end_of_line = lf
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true

[*.md]
trim_trailing_whitespace = false


================================================
FILE: .eslintignore
================================================
dist
lib
es
coverage
examples/dist
node_modules


================================================
FILE: .eslintrc
================================================
parser: "babel-eslint"

parserOptions:
  ecmaVersion: 2018
  sourceType: "module"
  ecmaFeatures:
    jsx: true

plugins: ["react", "flowtype", "prettier", "react-hooks"]

settings:
  react:
    pragma: "React"
    version: "detect"

env:
    browser: true
    node: true
    amd: false
    mocha: true
    jasmine: false

globals:
    require: true
    module: true
    expect: true
    sinon: true
    ReactElement: true
    Reflect: true

rules:

    ###########################################################################
    #                                                                         #
    #   POSSIBLE ERRORS: these rules point out areas where you might have     #
    #   made mistakes.                                                        #
    #                                                                         #
    ###########################################################################


    no-cond-assign: 2          # disallow assignment in conditional expressions
    no-console: 2              # disallow use of console
    no-constant-condition: 2   # disallow use of constant expressions in conditions
    no-control-regex: 2        # disallow control characters in regular expressions
    no-debugger: 2             # disallow use of debugger
    no-dupe-keys: 2            # disallow duplicate keys when creating object literals
    no-empty: 2                # disallow empty statements
    no-empty-character-class: 2          # disallow the use of empty character classes in regular expressions
    no-ex-assign: 2            # disallow assigning to the exception in a catch block
    no-extra-boolean-cast: 2   # disallow double-negation boolean casts in a boolean context
    no-extra-parens: 0         # disallow unnecessary parentheses
                               # NOTE: Allow for `return (/* JSX STUFF*/);` situations
    no-extra-semi: 2           # disallow unnecessary semicolons
    no-func-assign: 2          # disallow overwriting functions written as function declarations
    no-inner-declarations: 2   # disallow function or variable declarations in nested blocks
    no-invalid-regexp: 2       # disallow invalid regular expression strings in the RegExp
                               #    constructor
    no-irregular-whitespace: 2 # disallow irregular whitespace outside of strings and comments
    no-negated-in-lhs: 2       # disallow negation of the left operand of an in expression
    no-obj-calls: 2            # disallow the use of object properties of the global object (Math
                               #    and JSON) as functions
    no-regex-spaces: 2         # disallow multiple spaces in a regular expression literal
    no-sparse-arrays: 2        # disallow sparse arrays
    no-unreachable: 2          # disallow unreachable statements after a return, throw, continue,
                               #    or break statement
    use-isnan: 2               # disallow comparisons with the value NaN
    valid-typeof: 2            # ensure that the results of typeof are compared against a
                               #    valid string

    valid-jsdoc:               # ensure JSDoc comments are valid
        [1, { "prefer": { "return": "returns" }, "requireReturn": false }]

    ###########################################################################
    #                                                                         #
    #   BEST PRACTICES: these rules are designed to prevent you from making   #
    #   mistakes. They either prescribe a better way of doing something or    #
    #   help you avoid pitfalls.                                              #
    #                                                                         #
    ###########################################################################

    block-scoped-var: 2       # treat var statements as if they were block scoped
    complexity: [2, 250]      # specify the maximum cyclomatic complexity allowed in a program
    consistent-return: 0      # require return statements to either always or never specify values
    curly: 2                  # specify curly brace conventions for all control statements
    default-case: 2           # require default case in switch statements
    dot-notation: 2           # encourages use of dot notation whenever possible
    eqeqeq: 2                 # require the use of === and !==
    guard-for-in: 2           # make sure for-in loops have an if statement
    no-alert: 2               # disallow the use of alert, confirm, and prompt
    no-caller: 2              # disallow use of arguments.caller or arguments.callee
    no-div-regex: 2           # disallow division operators explicitly at beginning of regular
                              #    expression
    no-else-return: 2         # disallow else after a return in an if
    no-eq-null: 2             # disallow comparisons to null without a type-checking operator
    no-eval: 2                # disallow use of eval()
    no-extend-native: 2       # disallow adding to native types
    no-extra-bind: 2          # disallow unnecessary function binding
    no-fallthrough: 2         # disallow fallthrough of case statements
    no-floating-decimal: 2    # disallow the use of leading or trailing decimal points in numeric
                              #    literals
    no-implied-eval: 2        # disallow use of eval()-like methods
    no-iterator: 2            # disallow usage of __iterator__ property
    no-labels: 2              # disallow use of labeled statements
    no-lone-blocks: 2         # disallow unnecessary nested blocks
    no-loop-func: 0           # disallow creation of functions within loops
    no-multi-spaces: 0        # disallow use of multiple spaces
    no-multi-str: 2           # disallow use of multiline strings
    no-native-reassign: 2     # disallow reassignments of native objects
    no-new: 2                 # disallow use of new operator when not part of the assignment or
                              #    comparison
    no-new-func: 2            # disallow use of new operator for Function object
    no-new-wrappers: 2        # disallows creating new instances of String,Number, and Boolean
    no-octal: 2               # disallow use of octal literals
    no-octal-escape: 2        # disallow use of octal escape sequences in string literals, such as
                              #    `var foo = "Copyright \251"`
    no-process-env: 0         # disallow use of process.env
    no-proto: 2               # disallow usage of __proto__ property
    no-redeclare: 2           # disallow declaring the same variable more then once
    no-return-assign: 0       # disallow use of assignment in return statement
    no-script-url: 2          # disallow use of javascript urls.
    no-self-compare: 2        # disallow comparisons where both sides are exactly the same
    no-sequences: 2           # disallow use of comma operator
    no-unused-expressions: 0  # disallow usage of expressions in statement position
    no-void: 2                # disallow use of void operator
    no-warning-comments: 0    # disallow usage of configurable warning terms in comments - e.g.
                              #     TODO or FIXME
    no-with: 2                # disallow use of the with statement
    radix: 2                  # require use of the second argument for parseInt()
    vars-on-top: 0            # requires to declare all vars on top of their containing scope
    wrap-iife: [2, "inside"]  # require immediate function invocation to be wrapped in parentheses
    yoda: [2, "never"]        # require or disallow Yoda conditions

    ###########################################################################
    #                                                                         #
    #   STRICT MODE: these rules relate to using strict mode.                 #
    #                                                                         #
    ###########################################################################

    strict: [2, "global"]     # require that all modules have use strict

    ###########################################################################
    #                                                                         #
    #   VARIABLES: these rules have to do with variable declarations.         #
    #                                                                         #
    ###########################################################################

    no-catch-shadow: 2                                 # disallow the catch clause parameter name being the same as a
                                                       #    variable in the outer scope
    no-delete-var: 2                                   # disallow deletion of variables
    no-label-var: 2                                    # disallow labels that share a name with a variable
    no-shadow: 2                                       # disallow declaration of variables already declared in the
                                                       #    outer scope
    no-shadow-restricted-names: 2                      # disallow shadowing of names such as arguments
    no-undef: 2                                        # disallow use of undeclared variables unless mentioned in a
                                                       #    /*global */ block
    no-undef-init: 2                                   # disallow use of undefined when initializing variables
    no-undefined: 0                                    # disallow use of undefined variable
    no-unused-vars: 2                                  # disallow declaration of variables that are not used in
                                                       #    the code
    no-use-before-define: [2, { "functions": false }]  # disallow use of variables before they are defined
    no-var: 2

    ###########################################################################
    #                                                                         #
    #   NODE: these rules relate to functionality provided in Node.js.        #
    #                                                                         #
    ###########################################################################

    handle-callback-err: 0        # enforces error handling in callbacks
    no-mixed-requires: [2, true]  # disallow mixing regular variable and require declarations
    no-new-require: 2             # disallow use of new operator with the require function
    no-path-concat: 2             # disallow string concatenation with __dirname and __filename
    no-process-exit: 0            # disallow process.exit()
    no-restricted-modules: 0      # restrict usage of specified node modules
    no-sync: 0                    # disallow use of synchronous methods

    ###########################################################################
    #                                                                         #
    #   STYLISTIC ISSUES: these rules are purely matters of style and,        #
    #   while valueable to enforce consistently across a project, are         #
    #   quite subjective.                                                     #
    #                                                                         #
    ###########################################################################

    brace-style:                   # enforce one true brace style
        [2, "1tbs", { "allowSingleLine": true }]
    camelcase:                     # require camel case names, except in properties
        [2, { "properties": "never" }]
    comma-spacing: 2               # enforce spacing before and after comma
    consistent-this: [2, "self"]   # enforces consistent naming when capturing the current execution context
    eol-last: 2                    # enforce newline at the end of file, with no multiple empty lines
    func-names: 0                  # require function expressions to have a name
    func-style: [0, "expression"] # enforces use of function expressions
    key-spacing: 2                 # enforces spacing between keys and values in object literal properties
    max-nested-callbacks: [2, 4]   # specify the maximum depth callbacks can be nested
    new-cap: 0                     # require a capital letter for constructors
    new-parens: 2                  # disallow the omission of parentheses when invoking a constructor with no arguments
    no-array-constructor: 2        # disallow use of the Array constructor
    no-lonely-if: 0                # disallow if as the only statement in an else block
    no-mixed-spaces-and-tabs: 2    # disallow mixed spaces and tabs for indentation
    no-nested-ternary: 2           # disallow nested ternary expressions
    no-new-object: 2               # disallow use of the Object constructor
    semi-spacing: 2        # disallow space before semicolon
    no-spaced-func: 2              # disallow space between function identifier and application
    no-ternary: 0                  # disallow the use of ternary operators

    no-trailing-spaces: 2          # disallow trailing whitespace at the end of lines
    no-multiple-empty-lines: 2     # disallow multiple empty lines
    no-underscore-dangle: 0        # disallow dangling underscores in identifiers
    one-var: 0                     # allow just one var statement per function
    padded-blocks: 0               # enforce padding within blocks
    quotes:                        # specify whether double or single quotes should be used
        [2, "single", "avoid-escape"]
    quote-props: 0                 # require quotes around object literal property names
    semi: [2, "always"]            # require or disallow use of semicolons instead of ASI
    sort-vars: 0                   # sort variables within the same declaration block
    keyword-spacing:               # require a space before and after certain keywords
      ["error", {"before": true, "after": true }]
    space-before-blocks: 2         # require or disallow space before blocks
    space-in-brackets: 0           # require or disallow spaces inside brackets
    space-in-parens: 0             # require or disallow spaces inside parentheses
    space-infix-ops: 2             # require spaces around operators
    spaced-comment: 2         # require or disallow a space immediately following
                                   #    the // in a line comment
    wrap-regex: 0                  # require regex literals to be wrapped in parentheses
    space-before-function-paren: [2, "never"]

    ###########################################################################
    #                                                                         #
    #   LEGACY: these rules are included for compatibility with JSHint and    #
    #   JSLint.  While the names of the rules may not match up with their     #
    #   JSHint/JSLint counterpart, the functionality is the same.             #
    #                                                                         #
    ###########################################################################

    max-depth: 0              # specify the maximum depth that blocks can be nested
    max-len: [2, 100, 4]      # specify the maximum length of a line in your program
    max-params: [2, 5]        # limits the number of parameters that can be used in the function
                              #    declaration
    max-statements: 0         # specify the maximum number of statement allowed in a function
    no-bitwise: 0             # disallow use of bitwise operators
    no-plusplus: 0            # disallow use of unary operators, ++ and --


    ###########################################################################
    #                                                                         #
    #   React JSX                                                             #
    #                                                                         #
    ###########################################################################

    jsx-quotes: 2
    react/jsx-boolean-value: 2
    react/jsx-no-undef: 2
    react/jsx-sort-props: 2
    react/jsx-uses-react: 2
    react/jsx-uses-vars: 2
    react/no-did-mount-set-state: 2
    react/no-did-update-set-state: 2
    react/no-multi-comp: 0
    react/no-unknown-property: 2
    react/prop-types: 0
    react/react-in-jsx-scope: 2
    react/self-closing-comp: 2
    react/sort-comp: 2
    react/sort-prop-types: 2
    react/jsx-wrap-multilines: 2

    ###########################################################################
    #                                                                         #
    #   Flowtype                                                             #
    #                                                                         #
    ###########################################################################
    flowtype/define-flow-type: 2
    flowtype/use-flow-type: 2


    ###########################################################################
    #                                                                         #
    #   Prettier                                                              #
    #                                                                         #
    ###########################################################################
    prettier/prettier: [
      "error",
      {
        "bracketSpacing": false,
        "singleQuote": true,
        "parser": "babylon"
      }
    ]


    ###########################################################################
    #                                                                         #
    #   React Hooks                                                           #
    #                                                                         #
    ###########################################################################
    react-hooks/rules-of-hooks: 2
    react-hooks/exhaustive-deps: 2


================================================
FILE: .flowconfig
================================================
[ignore]
.*/dist/.*
.*/lib/.*
.*/node_modules/.*/node_modules/.*
.*/node_modules/babel-core/.*
.*/node_modules/babel-loader/.*
.*/node_modules/babel-register/.*
.*/node_modules/config-chain/.*
.*/node_modules/flow-bin/.*
.*/node_modules/inline-style-prefixer/.*
.*/node_modules/invariant/.*
.*/node_modules/mkdirp/.*
.*/node_modules/nodemon/.*
.*/node_modules/npmconf/.*
.*/node_modules/react-hot-loader/.*
.*/node_modules/rimraf/.*
.*/node_modules/watchify/.*
.*/node_modules/webpack-dev-server/.*
.*/node_modules/webpack/.*
.*/node_modules/hoist-non-react-statics/.*

[include]
src

[libs]
interfaces

[options]
esproposal.class_static_fields=enable
esproposal.class_instance_fields=enable


================================================
FILE: .gitignore
================================================
### SublimeText ###
*.sublime-workspace

### OSX ###
.AppleDouble
.DS_Store
.LSOverride
Icon

# Thumbnails
._*

# Files that might appear on external disk
.Spotlight-V100
.Trashes

### Windows ###
# Windows image file caches
ehthumbs.db
Thumbs.db

# Folder config file
Desktop.ini

# Recycle Bin used on file shares
$RECYCLE.BIN/

# App specific
.tmp
.vscode
_site
coverage
dist
es
lib
node_modules
npm-debug.log*
yarn-error.log*
package-lock.json


================================================
FILE: .npmignore.publishr
================================================
/*
!/es
!/dist
!/docs
!/lib
!/src
!LICENSE.txt
!CHANGELOG.md
!README.md
!package.json


================================================
FILE: .prettierignore
================================================
dist
lib
es
coverage
examples/dist
node_modules

================================================
FILE: .prettierrc
================================================
{
  "bracketSpacing": false,
  "singleQuote": true
}


================================================
FILE: .travis.yml
================================================
dist: trusty

language: node_js

addons:
  chrome: stable

node_js:
  - "8"
  - "10"
  - "12"

# Use container-based Travis infrastructure.
sudo: false

before_install:
  # GUI for real browsers.
  - export DISPLAY=:99.0
  - sh -e /etc/init.d/xvfb start
  # Headless chrome
  - google-chrome-stable --headless --disable-gpu --remote-debugging-port=9222 http://localhost &

branches:
  only:
    - master

notifications:
  email:
    on_success: change
    on_failure: always

cache: yarn

script:
  # Output useful info for debugging.
  - node --version
  - yarn --version
  # Make sure we can actually build the examples.
  - yarn run build-examples
  # Run tests
  - yarn run lint
  - yarn run build
  - yarn run test-coverage
  # Upload to coveralls, but don't _fail_ if coveralls is down.
  - cat coverage/lcov.info | node_modules/.bin/coveralls || echo "Coveralls upload failed"


================================================
FILE: CHANGELOG.md
================================================
# Radium Changelog

## 0.26.2

- Update `peerDependencies` for React to include 17.

## 0.26.1 (September 29, 2020)

#### Dependency Upgrades

- Bump handlebars from 4.1.2 to 4.5.3 (#1035)
- Bump elliptic from 6.4.0 to 6.5.3 (#1045)
- Bump eslint-utils from 1.3.1 to 1.4.3 (#1039)
- Bump tree-kill from 1.2.0 to 1.2.2 (#1046)
- Bump websocket-extensions from 0.1.1 to 0.1.4 (#1044)
- Bump fstream from 1.0.11 to 1.0.12 (#1038)
- Bump sshpk from 1.11.0 to 1.16.1 (#1037)
- Bump webpack-dev-server from 2.11.1 to 3.1.11 (#1036)
- Bump is-my-json-valid from 2.16.0 to 2.20.5 (#1048)
- Bump http-proxy from 1.16.2 to 1.18.1 (#1047)

#### Bug Fixes

- Fix initial enhancer state for fn components (#1041)

## 0.26.0 (September 5, 2019)

#### Bug Fixes

- Add hook and forwardRef support (#1027)

#### Breaking Changes

- Radium now requires React@16.8.0+ (#1027)

## 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)
- Upgrade karma to 3.0 (#1003)
- Refactor enhancer for readability (#1004)
- Replace Isparta with Istanbul (#1011)
- Prettier (#1012)

## 0.25.0 (September 16, 2018)

- Use `Reflect` to construct es native classes in a way that preserves the value of `this` used in
  the constructor. (#999, #1001)
- 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)
- 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

### 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).
  - `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)
- Remove `rimraf` from prod `dependencies` in npm registry package.
- Remove `postinstall` from `scripts` in npm registry package. (#794)

## 0.19.1 (May 17, 2017)

### 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).

## 0.19.0 (May 15, 2017)

### Improvements

- Unreverts PropTypes-related diff, which is now a minor version instead of a patch

## 0.18.4 (May 15, 2017)

### Bug Fixes

- Reverts PropTypes-related diff, which should have been a minor version instead of a patch

## 0.18.3 (May 15, 2017)

### Improvements

- Update dependencies
- Update deprecated React syntax in examples
- Use React "prop-types" package

## 0.18.2 (March 15, 2017)

### Improvements

- Update `inline-style-prefixer` to v2.0.5 (#880).
- Use `React.PureComponent` to avoid unnecessary rendering (#868).
- Update all dependencies

## 0.18.1 (July 19, 2016)

### Bug Fixes

- Fix unused props warning when passing `radiumConfig` to `StyleRoot` (#787).

## 0.18.0 (July 15, 2016)

### Breaking Changes

- Revert `content` auto-quoting in `Style` component (#783).

### Bug Fixes

- Silence React 15.2 unused props deprecation warning (#782).

## 0.17.2 (July 12, 2016)

### Bug Fixes

- Fix `content` values in `Style` component (#719).
- Improve stateless component check to work with native arrow functions (#771).

### Improvements

- Add support for `:disabled` pseudo-class (#689).
- Add plugin to remove nested style objects and prevent `[Object object]` from rendering in the DOM (#703).

## 0.17.1 (March 30, 2016)

### Bug Fixes

- Remove babel modules accidentally published as dependencies.

### Improvements

- Add support for `scopeSelector` without nested selectors in `Style` component.

## 0.17.0 (March 24, 2016)

### 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`.

## 0.16.6 (February 9, 2016)

### Bug Fixes

- The `lib/` directory did not get built property in 0.16.6. `lib/` now contains all changes from 0.16.5.

## 0.16.5 (January 27, 2016)

### Bug Fixes

- Don't merge media query styles, fixes #550
- 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>
));
```

## 0.16.4 (January 23, 2016)

### Bug Fixes

- 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
- 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
- Forgot to add `-test` to the version
- See changelog for 0.16.4 instead

## 0.16.2 (January 8, 2016)

### Bug Fixes

- `<StyleSheet/> Component:`
  - Bind the private method \_onChange to the class instance
  - Wrap setState in setTimeout and keep track of isMounted, #500
  - Remove duplicate declaration of componentWillUnmount and move `this._isMounted = true` inside `componentDidMount`
- Clear up docs around StyleRoot props, clear up issues in #496
- Properly prefix keyframes: Use `inline-style-prefixer`’s `prefixedKeyframes`, #488
- Ensure unique classname is generated for media query rules (hash on query _and_ ruleCSS string)

## 0.16.1 (January 5, 2016)

### Bug Fixes

- `<StyleRoot>` no longer throws an error on unmount

## 0.16.0 (January 5, 2016)

### 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
- 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
- printStyles have been removed, in favor of '@media print' media queries, which are now rendered as CSS so they work correctly: https://github.com/FormidableLabs/radium/tree/master/docs/guides#media-queries

### Bug Fixes

- Don't add extra media query listeners
- 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)
- Better error on duplicate keys
- Upgrade to Babel 6
- `<Style>` adds the `scopeSelector` to comma separated selectors
- `<Style>` now accepts `radiumConfig` directly with the `userAgent` field

## 0.15.3 (November 16, 2015)

### Bug Fixes

- Fix `"files"` section in `package.json`, should fix `npm install issues`

## 0.15.2 (November 15, 2015)

### Bug Fixes

- IE vender prefix (ms) is now converted to dash-case correctly (-ms), thanks @PallasKatze, fixes #413
- Super getChildContext is no longer ignored, thanks @richardfickling, fixes #412
- Update to inline-style-prefixer v0.5.1 and changed the userAgent error to a console.warning

## 0.15.1 (November 11, 2015)

### Bug Fixes

- Fix bug where active styles on multiple elements in the same component were not being removed on mouse up, fixes #410

## 0.15.0 (November 11, 2015)

### New Features

- Radium now uses [inline-style-prefixer](https://github.com/rofrischmann/inline-style-prefixer) to do all prefixing. Because `inline-style-prefixer` relies on the userAgent (similar to autoprefixer), it produces the same prefixes on both the client and the server. This is a huge step in making Radium truly universal (see [example](https://github.com/FormidableLabs/radium/blob/master/examples/server.js)). Thanks much to @rofrischmann for putting up with my API suggestions and requests!
- Any Radium component can also be configured at render time via a [`radiumConfig`](https://github.com/FormidableLabs/radium/blob/master/docs/api/README.md#radium). This was mainly required for passing the `userAgent` during a server-side render.

### Breaking Changes

- Style component no longer supports the `prefix` prop. It automatically gets the correct userAgent to pass to the prefixer from `radiumConfig` context

### Bug Fixes

- Radium wrapper now replaces the `style` propType, if defined, with array or object, fixing #396
- Stateless components now support context, thanks @ThomWright
- Static fields on stateless components are now transferred to the Radium wrapper (`defualtProps`, `propTypes`, etc)

### Improvements

- Code has been ES2015-ified: const and let, import/export, fat arrows,
- Code has moved from `modules` to `src`

## 0.14.3 (October 19, 2015)

### Bug Fixes

- camelCasePropsToDashCase handles uppercase first character correctly, fixing #387

## 0.14.2 (October 17, 2015)

### Bug Fixes

- `:active` styles now triggered by space or enter
- Callback `ref`s are now ignored, fixing #346
- Heavy use of media queries no longer causes setState on an unmounted component, fixing #382

### New Features

- Stateless components (function taking props) are now supported

### Improvements

- Updated examples to for React 0.14.0
- Allow replacing the prefixer used by `Radium.keyframes` and `<Style>`

## 0.14.1 (September 15, 2015)

### Bug Fixes

- Don't require object-assign, which wasn't in normal dependencies

## 0.14.0 (September 15, 2015)

### Breaking Changes

- `Config.setMatchMedia` has been replaced by the `matchMedia` field in the config passed to `@Radium` ([see documentation](https://github.com/FormidableLabs/radium/tree/master/docs/api#configmatchmedia))

### New Features

- Plugin system, via the config passed to `@Radium` (see docs for [`config.plugins`](https://github.com/FormidableLabs/radium/tree/master/docs/api#configplugins) and the [plugin API](https://github.com/FormidableLabs/radium/tree/master/docs/api#plugins))

### Improvements

- Flatten nested arrays in `style`, #344, thanks @almost
- Universal/isomorphic example `npm run universal`, thanks @jurgob and @moret

### Bug Fixes

- Static properties are now copied again in IE < 10, #349, thanks @bobbyrenwick

## 0.13.8 (August 24, 2015)

### Bug Fixes

- Fix static class methods disappearing in IE10, #313
- Fix bug when using spread operator to pass props to a DOM element, #322

## 0.13.7 (August 5, 2015)

### Bug Fixes

- Fix double resolving bug on props.children, #307

## 0.13.6 (August 5, 2015)

### New Features

- Resolve styles on elements found in props and children as function, #298
- [&lt;PrintStyleSheet&gt;](https://github.com/FormidableLabs/radium/tree/master/docs/api#printstylesheet-component) component and `printStyles` property to add print styles to your components, #299, thanks @bobbyrenwick

### Improvements

- Show component name when warning in prefixer, #302, thanks @AnSavvides

### Bug Fixes

- Fix bug with \_radiumDidResolveStyles that was breaking in React 0.14.0-beta2
- Un-prefix values before checking isUnitlessNumber, #305, thanks @AnSavvides
- Prevent errors from getters that do not have setters as static props of React components, #306, thanks @rolandpoulter

## 0.13.5 (July 29, 2015)

### Improvements

- Support for old and tweener flexbox syntax, #279, thanks @sylvaingi
- Only calls console.warn during development, not in production

### Bug Fixes

- Don't call resolveStyles more than once on the same element, #293
- Allow null or undefined values in style, #263
- Remove redundant babel-core from dependencies
- Fix using numeric 0 as key to getState, #275
- Don't wrap display name with "Radium(...)", #271
- Fix older firefox missing `float` property, #277, thanks @bencao
- Don't warn when mixing `transform` properties, #272, thanks @MattHauglustaine
- Use for loop instead of Array prototype on the result of window.getComputedStyle, which was breaking Android web view, #267, thanks @bsbeeks
- Ignore functions as children instead of blowing up, #265, thanks @Cottin

### Misc

- Add `test-dev` command for faster test feedback during development

## 0.13.4 (July 14, 2015)

### Bug Fixes

- Fix regression with multiple states (tests were failing) from 0.13.3

## 0.13.3 (July 13, 2015)

### Bug Fixes

- Fix hotloading component methods, #255, thanks @bobbyrenwick
- Add displayName to shorthand warning, #253, thanks @bobbyrenwick
- Warn and ignore null/undefined values, #250, thanks @AnSavvides
- Don't warn when mixing border & borderRadius, and more shorthand warning updates, #246, thanks @nathanfriemel
- Remove react from peerDependencies so Radium can be used with the 0.14 beta, #242, thanks @dariocravero
- Fix transfering defaultProps and friends in IE <11, #241, thanks @bobbyrenwick
- Don't alias matchMedia, fixes IE <11 bug, #238
- Stop mutating style state, #237

### Misc

- Migrate tests to Karma, #240, thanks @exogen

## 0.13.2 (June 25, 2015)

### Bug Fixes

- Use `console.warn` instead of `console.warning` (duh)

## 0.13.1 (June 24, 2015)

### New Features

- [Radium.Config.setMatchMedia](https://github.com/FormidableLabs/radium/tree/master/docs/api#configsetmatchmedia) for server rendering

### Bug Fixes

- Don't resolve `style` prop of custom components, e.g. `<MyComponent style={...} />`, #202 (thanks @azazdeaz)
- Fix not using dash-case on server with Style, #207
- Fix server rendering when using fallback array of values (uses first one)
- Fix numeric fallbacks, #221

### Misc

- Update dependencies
- Warn when mixing longhand and shorthand

## 0.13.0 (June 7, 2015)

### Breaking Changes

- `Radium.wrap` and `Radium.Enhancer` have been merged and moved to `Radium()`. Just wrap your component, `Button = Radium(Button);`, or use the decorator `@Radium`
- `Style` component `rules` prop now takes an object instead of an array

### New Features

- Support fallback values (e.g. `#fff` for `rgba(...)`)

### Bug Fixes

- Fix react external in webpack config
- Fix keyframes throwing on IE9 (now does feature detection)
- Fix windows build
- `string` and `number` children are no longer wrapped in an extraneous `<span>`

## 0.12.2 (May 22, 2015)

### Breaking Changes

None

### New Features

- Support prefixing for old flexbox implementations

### Bug Fixes

- Stop using react internals `CSSPropertyOperations.createMarkupForStyles`, which further reduces the build size

## 0.12.1 (May 22, 2015)

### Bug Fixes

- Fix Enhancer (displayName, etc) #165
- Reduce size of distributed build
- Tests for prefixing, fix #161

## 0.12.0 (May 16, 2015)

### New Features

- Support for ES6 classes with Radium.Enhancer
- Vendor-prefixing
- Keyframes animation helper
- Radium.getState API

### Bug Fixes

- Fix errors during server-side rendering #141
- Fix passing a single child or string #139

## 0.11.1 (April 28, 2015)

### Bug Fixes

- Checked in updated `dist` files from `0.11.0`. Whoops!

## 0.11.0 (April 28, 2015)

### Breaking Changes

- Complete API rewrite.
  - Added new "Wrap" API.
  - Wrap React component config with `Radium.wrap()` to automatically add
    browser state handlers, media query behavior, and array-based style
    resolution.
- Removed all mixins.
- Removed context-based media query behavior.
  - Replaced with global media query handler.
- Removed modifiers, states, and media queries from style objects.
  - Replaced `modifiers` with array-based `style` prop resolution.
  - Replaced `states` object with inline state keys: `:hover`
  - Replaced `mediaQueries` object with inline queries:
    `@media (min-width: 200px)`

### New Features

- Apply separate browser state styles to multiple elements in the same
  component.


================================================
FILE: CONTRIBUTING.md
================================================
Thanks for contributing!

## Development

### Installing dependencies

```bash
npm install
```

You will find all building blocks that make up Radium in the [`src`](src) folder.

### Testing

For ease, we've wrapped up all our individual test commands into:

```sh
$ npm run build-lib OR watch-lib  # One time / watched src file build
$ npm run test                    # Single pass of all tests.
$ npm run test-dev                # Watch test file changes and rerun tests automatically.
```

#### Frontend

You will find tests for each module inside [`src/__tests__`](src/__tests__). Whenever making any changes, ensure that all existing tests pass by running `npm run test-frontend`. You can also have [`Karma`](http://karma-runner.github.io/) running in the background and run your tests every time you make a change by doing `npm run test-dev-frontend`.

If you are adding a new feature or some extra functionality, you should also make sure to accompany those changes with appropriate tests.

#### Backend

We have a small number of tests for SSR/Node.js usage in [`test`](test). Whenever making any relevant changes, ensure that all existing tests pass by running `npm run test-node`. You will need to have a babel watch running if you are changing source files since these tests rely on built files in `lib/`, which you can do easily with `npm run watch-lib` in a separate terminal.

To get watched test files automagically updated and run, use `npm run test-node-dev`.

### Linting

Before commiting any changes, be sure to do `npm run lint`; this will lint all relevant files using [ESLint](http://eslint.org/) and report on any changes that you need to make. You can also run `npm run fixlint` to fix most common lint errors automatically.

### Flow

- [Install flow](http://flowtype.org/docs/getting-started.html#installing-flow)
- Run `flow` to check for missing annotations and static type check failures

### Examples

You can run examples locally by simply doing `npm run examples`; this will start a webpack dev server (the config file is found at [examples/webpack.config.js](examples/webpack.config.js)) making Radium examples available at `http://localhost:8080`.

Please note that if you use `npm run test-dev` as above, Karma will use port `8080`. You can change the port used by the examples by running `npm run examples -- --port 8000`.

### Before submitting a PR...

Thanks for taking the time to help us make Radium even better! Before you go ahead and submit a PR, make sure that you have done the following:
- Run the tests (you did add tests, right?) using `npm run test-dev`.
- Run lint and flow using `npm run lint`

## Releasing a new version to NPM (only for project administrators):

1. Update `CHANGELOG.md`, following format for previous versions
2. Commit as "Changelog for version 0.XX.Y"
3. Run `npm version patch` (or `minor`, `major` as appropriate) to run tests and lint, build the `lib` ands `dist` directories, , then update `package.json` and add a git tag.
4. Run `npm publish` and publish to NPM if all is well.
5. Run `git push && git push --tags`

## Contributor Covenant Code of Conduct

### Our Pledge

In the interest of fostering an open and welcoming environment, we as
contributors and maintainers pledge to making participation in our project and
our community a harassment-free experience for everyone, regardless of age, body
size, disability, ethnicity, gender identity and expression, level of experience,
nationality, personal appearance, race, religion, or sexual identity and
orientation.

### Our Standards

Examples of behavior that contributes to creating a positive environment
include:

* Using welcoming and inclusive language
* Being respectful of differing viewpoints and experiences
* Gracefully accepting constructive criticism
* Focusing on what is best for the community
* Showing empathy towards other community members

Examples of unacceptable behavior by participants include:

* The use of sexualized language or imagery and unwelcome sexual attention or
advances
* Trolling, insulting/derogatory comments, and personal or political attacks
* Public or private harassment
* Publishing others' private information, such as a physical or electronic
  address, without explicit permission
* Other conduct which could reasonably be considered inappropriate in a
  professional setting

### Our Responsibilities

Project maintainers are responsible for clarifying the standards of acceptable
behavior and are expected to take appropriate and fair corrective action in
response to any instances of unacceptable behavior.

Project maintainers have the right and responsibility to remove, edit, or
reject comments, commits, code, wiki edits, issues, and other contributions
that are not aligned to this Code of Conduct, or to ban temporarily or
permanently any contributor for other behaviors that they deem inappropriate,
threatening, offensive, or harmful.

### Scope

This Code of Conduct applies both within project spaces and in public spaces
when an individual is representing the project or its community. Examples of
representing a project or community include using an official project e-mail
address, posting via an official social media account, or acting as an appointed
representative at an online or offline event. Representation of a project may be
further defined and clarified by project maintainers.

### Enforcement

Instances of abusive, harassing, or otherwise unacceptable behavior may be
reported by contacting the project team at lauren.eastridge@formidable.com. All
complaints will be reviewed and investigated and will result in a response that
is deemed necessary and appropriate to the circumstances. The project team is
obligated to maintain confidentiality with regard to the reporter of an incident.
Further details of specific enforcement policies may be posted separately.

Project maintainers who do not follow or enforce the Code of Conduct in good
faith may face temporary or permanent repercussions as determined by other
members of the project's leadership.

### Attribution

This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4,
available at [http://contributor-covenant.org/version/1/4][version]

[homepage]: http://contributor-covenant.org
[version]: http://contributor-covenant.org/version/1/4/
[version]: http://contributor-covenant.org/version/1/4/

### Architecture

#### Enhancer HOC (enhancer.js)

- Component is wrapped by `Radium` which runs it through `enhancer.js::enhanceWithRadium()`.
- A composed component is created
  - ES modules - `Reflect` is used to create enhanced component from prototype of original component
  - Stateless components - a simple wrapper component is created which calls the original component
  - Everything else - enhanced component is created by shallow copying the original component
- An enhanced component is created
  - static `_isRadiumEnhanced = true` property is added
  - `_radiumStyleState = {}` is added to component state
  - In render, `resolveStyles.js:resolveStyles` is called on the original rendered elements before they are returned. (see resolveStyles section)
  - in componentDidUpdate, unused state keys are removed if necessary
  - in componentWillUnmount, mouse and media query listeners are removed

#### Style Resolver `resolveStyles.js::resolveStyles`

- Called on the original rendered elements before they are returned. It iterates over the elements and children, rewriting props to add event handlers required to capture user interactions (e.g. mouse over). It also replaces the style prop because it adds in the various interaction styles (e.g. :hover).
- extraStateKeyMap is created by determining which state fields are no longer needed [?]
- If the rendered elements are an array, they are recursively mapped over with resolveStyles
- New children are resolved
  - Recurse into children and call `resolveStyles` on each one
- New props are resolved
  - Recurse through props and call `resolveStyles` on any React components in props. Otherwise return props as-is
- Plugins are run ONLY on simple ReactDOM elements that have a style prop
  - plugins are called with the component, its props and a bunch of helper functions
  - if the props were changed/added by any plugin, then return those
  - see plugins section for more
- If anything changed, clone the element and return that. Otherwise just return the element.

#### Plugins

- _merge-styles-array-plugin_ - If the component styles are an array, it deeply merges them. Otherwise, it returns them unmodified.
- _check-props-plugin_ - Recursively checks props and warns (in dev mode) if shorthand and longhand are mixed.
- _resolve-media-queries-plugin_ - Handles media query style entries (like '@media (...)': { ... }), applying them only when the appropriate media query is hit
- _resolve-interaction-styles-plugin_ - Handles `:hover`, `:active` and `:focus` styles by adding/wrapping mouse event listeners with functions that update radium's state.
- _keyframes-plugin_ - Handles keyframe styles
- _visited-plugin_ - Handles `:visited` styles
- _remove-nested-styles-plugin_ - Recursively flattens nested styles into a flat object
- _prefix-plugin_ - Uses browser detection and a mapping to add vendor prefixes to CSS properties and values as needed


================================================
FILE: LICENSE-examples.md
================================================
The examples provided by Formidable Labs are for non-commercial testing and evaluation purposes only. Formidable Labs reserves all rights not expressly
granted.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
FORMIDABLE LABS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN
AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.


================================================
FILE: LICENSE.md
================================================
The MIT License (MIT)

Copyright (c) 2015 Formidable Labs

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.


================================================
FILE: README.md
================================================
[![Maintenance Status][maintenance-image]](#maintenance-status)
[![Travis Status][trav_img]][trav_site]
[![AppVeyor Status][appveyor_img]][appveyor_site]
[![Coverage Status][cov_img]][cov_site]
[![NPM Package][npm_img]][npm_site]
[![Dependency Status][david_img]][david_site]
![gzipped size][size_img]

# Radium

```sh
yarn add radium
# or
npm install --save radium
```

Radium is a set of tools to manage inline styles on React elements. It gives you powerful styling capabilities without CSS.

_Inspired by_ <a href="https://speakerdeck.com/vjeux/react-css-in-js">React: CSS in JS</a>
by <a href="https://twitter.com/Vjeux">vjeux</a>.

## Maintenance Status

**Archived:** This project is no longer maintained by Formidable. We are no longer responding to issues or pull requests unless they relate to security concerns. We encourage interested developers to fork this project and make it their own!

## Overview

Eliminating CSS in favor of inline styles that are computed on the fly is a powerful approach, providing a number of benefits over traditional CSS:

- Scoped styles without selectors
- Avoids specificity conflicts
- Source order independence
- Dead code elimination
- Highly expressive

Despite that, there are some common CSS features and techniques that inline styles don't easily accommodate: media queries, browser states (:hover, :focus, :active) and modifiers (no more .btn-primary!). Radium offers a standard interface and abstractions for dealing with these problems.

When we say expressive, we mean it: math, concatenation, regex, conditionals, functions–JavaScript is at your disposal. Modern web applications demand that the display changes when data changes, and Radium is here to help.

For a short technical explanation, see [How does Radium work?](#how-does-radium-work).

## Features

- 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

## Docs

- [Overview][docs_guides]
- [API Docs][docs_api]
- [Frequently Asked Questions (FAQ)][docs_faq]

## Usage

Start by wrapping your component class with `Radium()`, like `export default Radium(Component)`, or `Component = Radium(Component)`, which works with classes, `createClass`, and stateless components (functions that take props and return a ReactElement). Then, write a style object as you normally would with inline styles, and add in styles for interactive states and media queries. Pass the style object to your component via `style={...}` and let Radium do the rest!

```jsx
<Button kind="primary">Radium Button</Button>
```

```jsx
import Radium from 'radium';
import React from 'react';
import color from 'color';

class Button extends React.Component {
  static propTypes = {
    kind: PropTypes.oneOf(['primary', 'warning']).isRequired
  };

  render() {
    // Radium extends the style attribute to accept an array. It will merge
    // the styles in order. We use this feature here to apply the primary
    // or warning styles depending on the value of the `kind` prop. Since its
    // all just JavaScript, you can use whatever logic you want to decide which
    // styles are applied (props, state, context, etc).
    return (
      <button style={[styles.base, styles[this.props.kind]]}>
        {this.props.children}
      </button>
    );
  }
}

Button = Radium(Button);

// You can create your style objects dynamically or share them for
// every instance of the component.
var styles = {
  base: {
    color: '#fff',

    // Adding interactive state couldn't be easier! Add a special key to your
    // style object (:hover, :focus, :active, or @media) with the additional rules.
    ':hover': {
      background: color('#0074d9')
        .lighten(0.2)
        .hexString()
    }
  },

  primary: {
    background: '#0074D9'
  },

  warning: {
    background: '#FF4136'
  }
};
```

## Importing Radium

As of `v0.22.x`, Radium is built as an ECMAScript Modules-first project. We now have a `package.json:module` entry pointing to our library files with `import|export` statements instead of CommonJS `require`s. We still support CommonJS `require`s with a special `package.json:main` entry pointing to root `index.js` to smooth over this transition. The basic takeaways are:

If you are using **ESM** with **webpack** or **`@std/esm`** with **Node.js**, imports like the following work fine without any gotchas:

```js
import Radium from 'radium';
import Radium, {Style} from 'radium';
```

If you are using **CommonJS** with **Node.js** or **webpack@1** requires work like normal:

```js
const Radium = require('radium');
const {Style} = require('radium');
```

If you are using **CommonJS** with **webpack@2+**, however, you must instead add `.default` to the root `Radium` object import:

```js
const Radium = require('radium').default; // CHANGED: Must add `.default`
const {Style} = require('radium'); // Works as per normal
```

If you cannot change the `require` statements directly (say Radium is included from a different library your project depends on) you can manually tweak the Radium import in your project's webpack configuration with the following:

```js
resolve: {
  alias: {
    radium: require.resolve('radium/index');
  }
}
```

which will allow `const Radium = require('radium');` to still work. The configuration effectively forces webpack to point to code from `package.json:main` (which points to `/index.js`) instead of what is in `package.json:module`.

_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.

## Examples

To see the universal examples:

```
npm install
npm run universal
```

To see local client-side only examples in action, do this:

```
npm install
npm run examples
```

## How does Radium work?

Following is a short technical explanation of Radium's inner workings:

- Wrap the `render` function
- Recurse into the result of the original `render`
- For each element:
  - Add handlers to props if interactive styles are specified, e.g. `onMouseEnter` for `:hover`, wrapping existing handlers if necessary
  - If any of the handlers are triggered, e.g. by hovering, Radium calls `setState` to update a Radium-specific field on the components state object
  - On re-render, resolve any interactive styles that apply, e.g. `:hover`, by looking up the element's key or ref in the Radium-specific state

## More with Radium

You can find a list of other tools, components, and frameworks to help you build with Radium on our [wiki](https://github.com/FormidableLabs/radium/wiki). Contributions welcome!

## Contributing

Please see [CONTRIBUTING](https://github.com/FormidableLabs/radium/blob/master/CONTRIBUTING.md)

[trav_img]: https://api.travis-ci.com/FormidableLabs/radium.svg
[trav_site]: https://travis-ci.com/FormidableLabs/radium
[cov_img]: https://img.shields.io/coveralls/FormidableLabs/radium.svg
[cov_site]: https://coveralls.io/r/FormidableLabs/radium
[npm_img]: https://img.shields.io/npm/v/radium.svg
[npm_site]: https://www.npmjs.org/package/radium
[david_img]: https://img.shields.io/david/FormidableLabs/radium.svg
[david_site]: https://david-dm.org/FormidableLabs/radium
[size_img]: https://badges.herokuapp.com/size/npm/radium/dist/radium.min.js?gzip=true&label=gzipped
[docs_guides]: https://github.com/FormidableLabs/radium/tree/master/docs/guides
[docs_api]: https://github.com/FormidableLabs/radium/tree/master/docs/api
[docs_faq]: https://github.com/FormidableLabs/radium/tree/master/docs/faq
[appveyor_img]: https://ci.appveyor.com/api/projects/status/github/formidablelabs/radium?branch=master&svg=true
[appveyor_site]: https://ci.appveyor.com/project/ryan-roemer/radium
[maintenance-image]: https://img.shields.io/badge/maintenance-archived-red.svg


================================================
FILE: appveyor.yml
================================================
# Test against this version of Node.js
environment:
  matrix:
    - nodejs_version: "8"
    - nodejs_version: "10"
    - nodejs_version: "12"

# Install scripts. (runs after repo cloning)
install:
  - ps: Install-Product node $env:nodejs_version
  - yarn install

# Post-install test scripts.
test_script:
  # Output useful info for debugging.
  - node --version
  - yarn --version
  # Run tests
  - yarn run build
  - yarn run test-ie


# Don't actually build.
build: off

matrix:
  fast_finish: true

cache:
 - node_modules
 - "%LOCALAPPDATA%/Yarn"


================================================
FILE: bower.json
================================================
{
  "name": "radium",
  "homepage": "https://github.com/FormidableLabs/radium",
  "description": "A set of tools to manage inline styles on React elements",
  "main": "dist/radium.js",
  "keywords": [
    "react",
    "style",
    "inline"
  ],
  "license": "MIT",
  "ignore": [
    "**/.*",
    "CHANGELOG.md",
    "CONTRIBUTING.md",
    "LICENSE.md",
    "README.md",
    "appveyor.yml",
    "coverage",
    "docs",
    "examples",
    "karma.conf.coverage.js",
    "karma.conf.js",
    "lib",
    "src",
    "es",
    "scripts",
    "node_modules",
    "package.json",
    "webpack.config.js",
    "webpack.config.minified.js"
  ]
}


================================================
FILE: docs/README.md
================================================
### Overview

The `radium-docs` [documentation site](http://formidable.com/open-source/radium/) source lives here in `/docs`. The `docs/**/docs.js` components are imported into `radium-docs` and deployed from there.

### Deployment

Submit a pull request to `master`. Once it is merged you will need to run `update-project` from within `radium-docs` and merge into `master`. A new push to `master` in `radium-docs` will trigger a deployment.


================================================
FILE: docs/api/README.md
================================================
# Radium API

**Table of Contents**

- [Sample Style Object](#sample-style-object)
- [Radium](#radium)
  - [config.matchMedia](#configmatchmedia)
  - [config.plugins](#configplugins)
  - [config.userAgent](#configuseragent)
- [getState](#getstate)
- [keyframes](#keyframes)
- [Plugins](#plugins)
- [Style Component](#style-component)
- [StyleRoot Component](#styleroot-component)
- [TestMode](#testmode)


## Sample Style Object

```jsx
var styles = {
  base: {
    backgroundColor: '#0074d9',
    border: 0,
    borderRadius: '0.3em',
    color: '#fff',
    cursor: 'pointer',
    fontSize: 16,
    outline: 'none',
    padding: '0.4em 1em',

    ':hover': {
      backgroundColor: '#0088FF'
    },

    ':focus': {
      backgroundColor: '#0088FF'
    },

    ':active': {
      backgroundColor: '#005299',
      transform: 'translateY(2px)',
    },

    // Media queries must start with @media, and follow the same syntax as CSS
    '@media (min-width: 992px)': {
      padding: '0.6em 1.2em'
    },

    '@media (min-width: 1200px)': {
      padding: '0.8em 1.5em',

      // Media queries can also have nested :hover, :focus, or :active states
      ':hover': {
        backgroundColor: '#329FFF'
      }
    }
  },

  red: {
    backgroundColor: '#d90000',

    ':hover': {
      backgroundColor: '#FF0000'
    },

    ':focus': {
      backgroundColor: '#FF0000'
    },

    ':active': {
      backgroundColor: '#990000'
    }
  }
};
```

## Radium

`Radium` itself is a higher-order component, whose job is to:
- Provide initial state
- Process the `style` attribute after `render()`
- Clean up any resources when the component unmounts

Usage with `class`:

```jsx
class MyComponent extends React.Component { ... }

MyComponent = Radium(MyComponent);
```

Usage with `createClass`:

```jsx
var MyComponent = React.createClass({ ... });
export default Radium(MyComponent);
```

`Radium`'s primary job is to apply interactive or media query styles, but even if you are not using any special styles, the higher order component will still:
- Merge arrays of styles passed as the `style` attribute
- Automatically vendor prefix the `style` object

You can also pass a configuration object to `Radium`:

```jsx
class MyComponent extends React.Component { ... }

MyComponent = Radium({matchMedia: mockMatchMedia})(MyComponent);

// or with createClass

var MyComponent = React.createClass({ ... });
module.exports = Radium({matchMedia: mockMatchMedia})(MyComponent);
```

You may want to have project-wide Radium settings. Simply create a function that
wraps Radium, and use it instead of `Radium`:

```jsx
function ConfiguredRadium(component) {
  return Radium(config)(component);
}

// Usage
class MyComponent extends React.Component { ... }

MyComponent = ConfiguredRadium(MyComponent);
```

Radium can be called any number of times with a config object, and later configs
will be merged with and overwrite previous configs. That way, you can still
override settings on a per-component basis:

```jsx
class MySpecialComponent extends React.Component { ... }

MySpecialComponent = ConfiguredRadium(config)(MySpecialComponent);
```

Alternatively, if the config value can change every time the component is rendered (userAgent, for example), you can pass configuration to any component wrapped in `Radium` using the `radiumConfig` prop:

```jsx
<App radiumConfig={{userAgent: req.headers['user-agent']}} />
```

The config will be passed down via [context](https://facebook.github.io/react/docs/context.html) to all child components. Fields in the `radiumConfig` prop or context will override those passed into the `Radium()` function.

Possible configuration values:
- [`matchMedia`](#configmatchmedia)
- [`plugins`](#configplugins)
- [`userAgent`](#configuseragent)

### config.matchMedia

Allows you to replace the `matchMedia` function that Radium uses. The default is `window.matchMedia`, and the primary use case for replacing it is to use media queries on the server. You'll have to send the width and height of the page to the server somehow, and then use a [mock for match media](https://github.com/azazdeaz/match-media-mock) that implements the [`window.matchMedia` API](https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia). Your code could look like this:

**Server**

You can require `Radium` on the server / using CommonJS with:

```jsx
var Radium = require('radium');
```

```jsx
var ConfiguredRadium = require('./configured-radium');
var matchMediaMock = require('match-media-mock').create();
ConfiguredRadium.setMatchMedia(matchMediaMock);

app.get('/app/:width/:height', function(req, res) {
  matchMediaMock.setConfig({
    type: 'screen',
    width: req.params.width,
    height: req.params.height,
  });

  // Your application code uses `ConfiguredRadium` instead of `Radium`
  var html = React.renderToString(<RadiumApp />);

  res.end(html);
});
```

**ConfiguredRadium.js**

```jsx
var Radium = require('radium');

var _matchMedia = null;

function ConfiguredRadium(component) {
  return Radium({
    matchMedia: _matchMedia
  })(component);
}

ConfiguredRadium.setMatchMedia = function (matchMedia) {
  _matchMedia = matchMedia;
};

module.exports = ConfiguredRadium;
```

**MyComponent.js**

```jsx
var ConfiguredRadium = require('./configured-radium');

class MyComponent extends React.Component { ... }

MyComponent = ConfiguredRadium(MyComponent);
```

See [#146](https://github.com/FormidableLabs/radium/pull/146) for more info.

### config.plugins
**Array&lt;Plugin&gt;**

Replaces all plugins with the provided set. See [Plugins](#plugins) for more information.

Because the `plugins` config replaces all plugins, you have to provide the built-ins if you want to keep the default Radium functionality. A simple example of creating and adding a `styleLogger` plugin:

```jsx
function styleLogger({componentName, style}) {
  console.log('Name: ' + componentName, style);
}

function ConfiguredRadium(component) {
  return Radium({
    plugins: [
      Radium.Plugins.mergeStyleArray,
      Radium.Plugins.checkProps,
      Radium.Plugins.resolveMediaQueries,
      Radium.Plugins.resolveInteractionStyles,
      Radium.Plugins.keyframes,
      Radium.Plugins.visited,
      Radium.Plugins.removeNestedStyles,
      Radium.Plugins.prefix,
      styleLogger,
      Radium.Plugins.checkProps,
    ],
  })(component);
}

// Usage
class MyComponent extends React.Component { ... }

MyComponent = ConfiguredRadium(MyComponent);
```

You will typically want to put plugins before the final `checkProps` so that you can still benefit from the checks it provides. If your plugin might produce other pseudo-style blocks, like `@media` consumed by `resolveMediaQueries` or `:hover` consumed by `resolveInteractionStyles`, you would want to have your plugin run before those plugins.

You can of course omit any or all of the built-in plugins, and replace them with your own version. For example, you may want to omit `Radium.Plugins.prefix` entirely if you aren't using vendor prefixes or are using a [compile-time solution](https://github.com/UXtemple/babel-plugin-react-autoprefix) instead.

### config.userAgent
**string**

Set the user agent passed to [inline-style-prefixer](https://github.com/rofrischmann/inline-style-prefixer) to perform prefixing on style objects. Mainly used during server rendering, passed in via the `radiumConfig` prop. Using express:

```jsx
<App radiumConfig={{userAgent: req.headers['user-agent']}} />
```

For a complete example, see [examples/server.js](https://github.com/FormidableLabs/radium/blob/master/examples/server.js).

## getState

**Radium.getState(state, elementKey, value)**

_Note: `getState` will not work in a stateless component, because even though Radium maintains the state internally, the stateless component does not have access to it, by definition_

Query Radium's knowledge of the browser state for a given element key. This is particularly useful if you would like to set styles for one element when another element is in a particular state, e.g. show a message when a button is hovered.

Note that the target element specified by `elementKey` must have the state you'd like to check defined in its style object so that Radium knows to add the handlers. It can be empty, e.g. `':hover': {}`.

Parameters:

- **state** - you'll usually pass `this.state`, but sometimes you may want to pass a previous state, like in `shouldComponentUpdate`, `componentWillUpdate`, and `componentDidUpdate`
- **elementKey** - if you used multiple elements, pass the same `key=""` or `ref=""`. If you only have one element, you can leave it blank (`'main'` will be inferred)
- **value** - one of the following: `:active`, `:focus`, and `:hover`
- **returns** `true` or `false`

Usage:

```jsx
Radium.getState(this.state, 'button', ':hover')
```

## keyframes

**Radium.keyframes(keyframes, [name])**

Create a keyframes animation for use in an inline style. `keyframes` returns an opaque object you must assign to the `animationName` property. `Plugins.keyframes` detects the object and adds CSS to the Radium root's style sheet. Radium will automatically apply vendor prefixing to keyframe styles. In order to use `keyframes`, you must wrap your application in the [`StyleRoot component`](#styleroot-component).

`keyframes` takes an optional second parameter, a `name` to prepend to the animation's name to aid in debugging.

```jsx
class Spinner extends React.Component {
  render () {
    return (
      <div>
        <div style={styles.inner} />
      </div>
    );
  }
}

Spinner = Radium(Spinner);

var pulseKeyframes = Radium.keyframes({
  '0%': {width: '10%'},
  '50%': {width: '50%'},
  '100%': {width: '10%'},
}, 'pulse');

var styles = {
  inner: {
    // Use a placeholder animation name in `animation`
    animation: 'x 3s ease 0s infinite',
    // Assign the result of `keyframes` to `animationName`
    animationName: pulseKeyframes,
    background: 'blue',
    height: '4px',
    margin: '0 auto',
  }
};
```

Multiple keyframe animations can be chained together by passing an array of `keyframes` objects
as the value of the `animationName` property. These keyframe animations timing and iteration count
can be managed with [traditional css rules for keyframe animations](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations)

```jsx
@Radium
class Spinner extends React.Component {
  render () {
    return (
      <div>
        <div style={styles.inner} />
      </div>
    );
  }
}

const pulseAnimation = Radium.keyframes(
  {
    '0%': {width: '10%'},
    '50%': {width: '50%'},
    '100%': {width: '10%'},
  },
  'pulse',
);

const blendAnimation = Radium.keyframes(
  {
    '0%': {background: 'red'},
    '25%': {background: 'yellow'},
    '50%': {background: 'green'},
    '75%': {background: 'blue'},
    '100%': {background: 'red'},
  },
  'blend',
);

const styles = {
  inner: {
    animationName: [pulseAnimation, blendAnimation],
    animationDuration: '2.5s, 8s',
    animationIterationCount: 'infinite, infinite',
    animationTimingFunction: 'linear, cubic-bezier(0.1, 0.7, 1.0, 0.1)',
    height: '4px',
    margin: '0 auto',
  },
};
```

## Plugins

### Built-in Plugins

Almost everything that Radium does, except iteration, is implemented as a plugin. Radium ships with a base set of plugins, all of which can be accessed via `Radium.Plugins.pluginName`. They are called in the following order:

- `mergeStyleArray` - If the `style` attribute is an array, intelligently merge each style object in the array. Deep merges nested style objects, such as `:hover`.
- `checkProps` - Performs basic correctness checks, such as ensuring you do not mix longhand and shorthand properties.
- `resolveMediaQueries` - Handles style entries like `'@media (...)': { ... }`, applying them only when the appropriate media query is hit. Can be configured using [config.matchMedia](#configmatchmedia).
- `resolveInteractionStyles` - Handles `':hover'`, `':focus'`, and `':active'` styles.
- `prefix` - Uses in-browser detection and a small mapping to add vendor prefixes to CSS properties and values.
- `checkProps` - Same as above, just run after everything else.

### Plugin Interface

All plugins are functions accept a PluginConfig, and return a PluginResult. The annotated flow types follow. A plugin is called once for every *rendered element* that has a `style` attribute, for example the `div` and `span` in `return <div style={...}><span style={...} /></div>;`.

**PluginConfig**
```jsx
type PluginConfig = {
  // Adds a chunk of css to the root style sheet
  addCSS: (css: string) => {remove: () => void},

  // Helper function when adding CSS
  appendImportantToEachValue: (style: Object) => Object;

  // May not be readable if code has been minified
  componentName: string,

  // The Radium configuration
  config: Config,

  // Converts an object of CSS rules to a string, for use with addCSS
  cssRuleSetToString: (
    selector: string,
    rules: Object,
    userAgent: ?string,
  ) => string,

  // Retrieve the value of a field on the component
  getComponentField: (key: string) => any,

  // Retrieve the value of a field global to the Radium module
  // Used so that tests can easily clear global state.
  getGlobalState: (key: string) => any,

  // Retrieve the value of some state specific to the rendered element.
  // Requires the element to have a unique key or ref or for an element key
  // to be passed in.
  getState: (stateKey: string, elementKey?: string) => any,

  // Helper function when adding CSS
  hash: (data: string) => string,

  // Returns true if the value is a nested style object
  isNestedStyle: (value: any) => bool,

  // Access to the mergeStyles utility
  mergeStyles: (styles: Array<Object>) => Object,

  // The props of the rendered element. This can be changed by each plugin,
  // and successive plugins will see the result of previous plugins.
  props: Object,

  // Calls setState on the component with the given key and value.
  // By default this is specific to the rendered element, but you can override
  // by passing in the `elementKey` parameter.
  setState: (stateKey: string, value: any, elementKey?: string) => void,

  // The style prop of the rendered element. This can be changed by each plugin,
  // and successive plugins will see the result of previous plugins. Kept
  // separate from `props` for ease of use.
  style: Object,

  // uses the exenv npm module
  ExecutionEnvironment: {
    canUseEventListeners: bool,
    canUseDOM: bool,
  }
};
```

**PluginResult**

```jsx
type PluginResult = ?{
  // Merged into the component directly. Useful for storing things for which you
  // don't need to re-render, event subscriptions, for instance.
  componentFields?: Object,

  // Merged into a Radium controlled global state object. Use this instead of
  // module level state for ease of clearing state between tests.
  globalState?: Object,

  // Merged into the rendered element's props.
  props?: Object,

  // Replaces (not merged into) the rendered element's style property.
  style?: Object,
};
```

If your plugin consumes custom style blocks, it should merge any applicable style blocks and strip any others out of the style object before returning to avoid errors farther down. For example, a hypothetical `enumPropResolver` might know how to resolve keys of the form `'propName=value'`, such that if `this.props.propName === 'value'`, it will merge in that style object. `enumPropResolver` should then also strip any other keys that will not be merged. Thus, if this style object is passed to `enumPropResolver`, and `this.props.type === 'error'`:

```jsx
{
  'type=success': {color: 'blue'},
  'type=error': {color: 'red'},
  'type=warning': {color: 'yellow'},
}
```

`enumPropResolver` should then return an object with the style property equal to:

```jsx
{
  color: 'red'
}
```

## Style Component

The `<Style>` component renders an HTML `<style>` tag containing a set of CSS rules. Using it, you can define an optional `scopeSelector` that all selectors in the resulting `<style>` element will include.

Without the `<Style>` component, it is prohibitively difficult to write a `<style>` element in React. To write a normal `<style>` element, you need to write your CSS as a multiline string inside of the element. `<Style>` simplifies this process, and adds prefixing and the ability to scope selectors.

If you include a `scopeSelector`, you can include CSS rules that should apply to that selector as well as any nested selectors. For example, the following

```jsx
<Style
  scopeSelector=".scoping-class"
  rules={{
    color: 'blue',
    span: {
      fontFamily: 'Lucida Console, Monaco, monospace'
    }
  }}
/>
```

will return:

```html
<style>
.scoping-class {
  color: 'blue';
}
.scoping-class span {
  font-family: 'Lucida Console, Monaco, monospace';
}
</style>
```

### Props

#### rules

An object of CSS rules to render. Each key of the rules object is a CSS selector and the value is an object of styles. If rules is empty, the component will render nothing.

```jsx
var Radium = require('radium');
var Style = Radium.Style;
// or
import Radium, { Style } from 'radium';

<Style rules={{
  body: {
    margin: 0,
    fontFamily: 'Helvetica Neue, Helvetica, Arial, sans-serif'
  },
  html: {
    background: '#ccc',
    fontSize: '100%'
  },
  mediaQueries: {
    '(min-width: 550px)': {
      html:  {
        fontSize: '120%'
      }
    },
    '(min-width: 1200px)': {
      html:  {
        fontSize: '140%'
      }
    }
  },
  'h1, h2, h3': {
    fontWeight: 'bold'
  }
}} />
```


#### scopeSelector

A string that any included selectors in `rules` will be appended to. Use to scope styles in the component to a particular element. A good use case might be to generate a unique ID for a component to scope any styles to the particular component that owns the `<Style>` component instance.

```jsx
<div className="TestClass">
  <Style
    scopeSelector=".TestClass"
    rules={{
      h1: {
        fontSize: '2em'
      }
    }}
  />
</div>
```

### Notes

Some style properties, like [`content`](https://developer.mozilla.org/en-US/docs/Web/CSS/content), allow quoted strings or keywords as values. Because all non-numerical property values are written
as strings in Radium style objects, you must explicitly add quotes to string value for these properties: `content: "'Hello World!'"`.

## StyleRoot Component

_Props: Accepts all props valid on `div` and optional `radiumConfig`_

Usually wrapped around your top-level App component. StyleRoot wraps its children in a plain div followed by the root style sheet. Radium plugins, like keyframes and media queries, use this style sheet to inject CSS at runtime. Because the style sheet appears after your rendered elements, it is populated correctly during a server render.

StyleRoot transfers all of its props to the rendered `div`, and is itself wrapped in Radium, so you can pass it inline styles or `radiumConfig`.

```jsx
import {StyleRoot} from 'radium';

class App extends React.Component {
  render() {
    return (
      <StyleRoot>
        ... rest of your app ...
      </StyleRoot>
    );
  }
}
```

**Note:** StyleRoot passes the style-keeper (the object where styles are collected) down to other Radium components via context. Because of this, you cannot use keyframes or media queries in *direct children* of the `<StyleRoot>`, e.g.

```jsx
// COUNTEREXAMPLE, DOES NOT WORK
<StyleRoot>
  <div style={{'@media print': {color: 'black'}}} />
</StyleRoot>
```

You'll have to break out that piece into a proper component:

```jsx
class BodyText extends React.Component {
  render() {
    return <div style={{'@media print': {color: 'black'}}} />;
  }
}

class App extends React.Component {
  render() {
    return (
      <StyleRoot>
        <BodyText>...</BodyText>
      </StyleRoot>
    );
  }
}
```

## TestMode

Directly off the main Radium object you can access `TestMode`, used to control internal Radium state and behavior during tests. It is only available in non-production builds.

- `Radium.TestMode.clearState()` - clears the global Radium state, currently only the cache of media query listeners.
- `Radium.TestMode.enable()` - enables "test mode", which doesn’t throw or warn as much. Currently it just doesn’t throw when using addCSS without StyleRoot.
- `Radium.TestMode.disable()` - disables "test mode"


================================================
FILE: docs/faq/README.md
================================================
# Frequently Asked Questions

- [How do I use pseudo-selectors like `:checked`, `:last`, `:before`, or `:after`?](#how-do-i-use-pseudo-selectors-like-checked-last-before-or-after)
- [How can I use `ReactCSSTransitionGroup` without any classes?](#how-can-i-use-reactcsstransitiongroup-without-any-classes)
- [How can I use Radium with jsbin?](#how-can-i-use-radium-with-jsbin)
- [Can I use my favourite CSS/LESS/SASS syntax?](#can-i-use-my-favourite-csslesssass-syntax)
- [Can I use Radium with Bootstrap?](#can-i-use-radium-with-bootstrap)
- [Why doesn't Radium work on react-router's Link, or react-bootstrap's Button, or SomeOtherComponent?](#why-doesnt-radium-work-on-react-routers-link-or-react-bootstraps-button-or-someothercomponent)
- [How can I get rid of `userAgent` warnings in tests?](#how-can-i-get-rid-of-useragent-warnings-in-tests)
- [Why do React warnings have the wrong component name?](#why-do-react-warnings-have-the-wrong-component-name)
- [Why does the browser state of a child element not reset after unmounting and remounting?](#why-does-the-browser-state-of-a-child-element-not-reset-after-unmounting-and-remounting)

## How do I use pseudo-selectors like `:checked`, `:last`, `:before`, or `:after`?

Radium only provides the interactivity pseudo-selectors `:hover`, `:active`, and `:focus`. You need to use JavaScript logic to implement the others. To implement `:checked` for example:

```jsx
class CheckForBold extends React.Component {
  constructor() {
    super();
    this.state = {isChecked: false};
  }

  _onChange = () => {
    this.setState({isChecked: !this.state.isChecked});
  };

  render() {
    return (
      <label style={{fontWeight: this.state.isChecked ? 'bold' : 'normal'}}>
        <input
          checked={this.state.isChecked}
          onChange={this._onChange}
          type="checkbox"
        />
      {' '}Check for bold
      </label>
    );
  }
}
```

Instead of `:first` and `:last`, change behavior during array iteration. Note that the border property is broken down into parts to avoid complications as in issue [#95](https://github.com/FormidableLabs/radium/issues/95).

```jsx
var droids = [
  'R2-D2',
  'C-3PO',
  'Huyang',
  'Droideka',
  'Probe Droid'
];

class DroidList extends React.Component {
  render() {
    return (
      <ul style={{padding: 0}}>
        {droids.map((droid, index, arr) =>
          <li key={index} style={{
            borderColor: 'black',
            borderRadius: index === 0 ? '12px 12px 0 0' :
              index === (arr.length - 1) ? '0 0 12px 12px' : '',
            borderStyle: 'solid',
            borderWidth: index === (arr.length - 1) ? '1px' : '1px 1px 0 1px',
            cursor: 'pointer',
            listStyle: 'none',
            padding: 12,
            ':hover': {
              background: '#eee'
            }
          }}>
           {droid}
          </li>
        )}
      </ul>
    );
  }
}

DroidList = Radium(DroidList);
```

Instead of `:before` and `:after`, add extra elements when rendering your HTML.

## How can I use `ReactCSSTransitionGroup` without any classes?

Try out the experimental [`ReactStyleTransitionGroup`](https://github.com/adambbecker/react-style-transition-group) instead.

## How can I use Radium with jsbin?

To get the latest version, drop this into the HTML:

```html
<script src="https://unpkg.com/radium/dist/radium.js"></script>
```

We also recommend changing the JavaScript language to ES6/Babel.

## Can I use my favourite CSS/LESS/SASS syntax?

Yes, with the help of the [react-styling](https://github.com/halt-hammerzeit/react-styling) module, which requires [template strings](https://babeljs.io/docs/learn-es2015/#template-strings). Using react-styling you can write your styles in any syntax you like (curly braces or tabs, CSS, LESS/SASS, anything will do).

The example from the main Readme (using regular CSS syntax)

```jsx
<Button kind="primary">Radium Button</Button>
```

```jsx
import styler from 'react-styling/flat'

class Button extends React.Component {
  static propTypes = {
    kind: PropTypes.oneOf(['primary', 'warning']).isRequired
  }

  render() {
    return (
      <button style={style[`button_${this.props.kind}`]}>
        {this.props.children}
      </button>
    )
  }
}

Button = Radium(Button);

const style = styler`
  .button {
    color: #fff;

    :hover {
      background: ${color('#0074d9').lighten(0.2).hexString()};
    }

    &.primary {
      background: #0074D9;
    }

    &.warning {
      background: #FF4136;
    }
  }
`
```

You can find a more advanced example in the [react-styling readme](https://github.com/halt-hammerzeit/react-styling#radium).

## Can I use Radium with Bootstrap?

See issue [#323](https://github.com/FormidableLabs/radium/issues/323) for discussion.

## Why doesn't Radium work on react-router's Link, or react-bootstrap's Button, or SomeOtherComponent?

Radium doesn't mess with the `style` prop of non-DOM elements. This includes thin wrappers like `react-router`'s `Link` component. We can't assume that a custom component will use `style` the same way DOM elements do. For instance, it could be a string enum to select a specific style. In order for resolving `style` on a custom element to work, that element needs to actually pass that `style` prop to the DOM element underneath, in addition to passing down all the event handlers (`onMouseEnter`, etc). Since Radium has no control over the implementation of other components, resolving styles on them is not safe.

A workaround is to wrap your custom component in Radium, even if you do not have the source, like this:

```jsx
var Link = require('react-router').Link;
Link = Radium(Link);
```

Huge thanks to [@mairh](https://github.com/mairh) for coming up with this idea in issue [#324](https://github.com/FormidableLabs/radium/issues/324).

We are also exploring adding a mechanism to bypass Radium's check, see issue [#258](https://github.com/FormidableLabs/radium/issues/258).

## How can I get rid of `userAgent` warnings in tests?

You might see warnings like this when testing React components that use Radium:

```
Radium: userAgent should be supplied for server-side rendering. See https://github.com/FormidableLabs/radium/tree/master
/docs/api#radium for more information.
Either the global navigator was undefined or an invalid userAgent was provided. Using a valid userAgent? Please let us k
now and create an issue at https://github.com/rofrischmann/inline-style-prefixer/issues
```

This isn't an issue if you run your tests in a browser-like environment such as jsdom or PhantomJS, but if you just run them in Node, there will be no userAgent defined. In your test setup, you can define one:

```jsx
global.navigator = {userAgent: 'Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/49.0.2454.85 Safari/537.36'};
```

Make sure it is a real user agent that `inline-style-prefixer` recognizes, or you'll still get the second error. The above UA is [Chrome 49 from the `inline-style-prefixer` tests](https://github.com/rofrischmann/inline-style-prefixer/blob/master/test/prefixer-test.js).

## Why do React warnings have the wrong component name?

You may see the name "Constructor" instead of your component name, for example: "Warning: Failed propType: Invalid prop `onClick` of type `function` supplied to `Constructor`, expected `string`." or "Warning: Each child in an array or iterator should have a unique "key" prop. Check the render method of `Constructor`."

Your transpiler is probably not able to set the `displayName` property of the component correctly, which can happen if you wrap `React.createClass` immediately with `Radium`, e.g. `var Button = Radium(React.createClass({ ... }));`. Instead, wrap your component afterward, ex. `Button = Radium(Button);`,  or when exporting, ex. `export default Radium(Button);`, or set `displayName` manually.

## Why does the browser state of a child element not reset after unmounting and remounting?

If you have an element that takes a browser state (e.g. `:active`, `:hover`, `:focus`), you need to give it a unique `key` prop. There is a case where if you only have a single element in your component that takes an interactive style, you do not need to provide a `key`; however, if you remove the element and show it again, it will maintain it's state, which is usually unexpected behavior. To fix this, simply give it a custom `key` prop.


================================================
FILE: docs/guides/README.md
================================================
# Using Radium

**Table of Contents**

- [How do I do it, then?](#how-do-i-do-it-then)
- [Modifiers](#modifiers)
- [Browser States](#browser-states)
- [Media Queries](#media-queries)
  - [Nested browser states](#nested-browser-states)
  - [Known issues with media queries](#known-issues-with-media-queries)
- [Styling Multiple Elements in a Single Component](#styling-multiple-elements-in-a-single-component)
- [Styling one element depending on another's state](#styling-one-element-depending-on-anothers-state)
- [Fallback Values](#fallback-values)
- [Style Component](#style-component)

Radium is a toolset for easily writing React component styles. It resolves browser states and media queries to apply the correct styles to your components, all without selectors, specificity, or source order dependence.

## How do I do it, then?

First, require or import Radium at the top of component file:

```jsx
import Radium from 'radium';

// If you want to use the <Style /> component you can do
import Radium, { Style } from 'radium';
```

Let's create a fictional `<Button>` component. It will have a set of default styles, will adjust its appearance based on modifiers, and will include hover, focus, and active states.

```jsx
class Button extends React.Component {
  render() {
    return (
      <button>
        {this.props.children}
      </button>
    );
  }
}
```

Radium is activated by wrapping your component:

```jsx
class Button extends React.Component {
  // ...
}
export default Radium(Button);

// or
class Button extends React.Component {
  // ...
}
Button = Radium(Button);
```

Radium resolves nested style objects into a flat object that can be applied directly to a React element. If you're not familiar with handling inline styles in React, see the React guide to the subject [here](https://reactjs.org/docs/dom-elements.html#style). A basic style object looks like this:

```jsx
var baseStyles = {
  background: 'blue',
  border: 0,
  borderRadius: 4,
  color: 'white',
  padding: '1.5em'
};
```

We usually nest styles inside a shared `styles` object for easy access:

```jsx
var styles = {
  base: {
    background: 'blue',
    border: 0,
    borderRadius: 4,
    color: 'white',
    padding: '1.5em'
  }
};
```

Next, simply pass your styles to the `style` attribute of an element:

```jsx
// Inside render
return (
  <button style={styles.base}>
    {this.props.children}
  </button>
);
```

From there, React will apply our styles to the `button` element. This is not very exciting. In fact, React does this by default, without the extra step of using Radium. Radium becomes useful when you need to do more complex things, like handling modifiers, states, and media queries. But, even without those complex things, Radium will still merge an array of styles and automatically apply vendor prefixes for you.

## Modifiers

Radium provides one shorthand for dealing with styles that are modified by your props or state. You can pass an array of style objects to the `style` attribute, and they will be merged together intelligently (`:hover` states, for instance, will merge instead of overwrite). This works the same way as it does in [React Native](https://facebook.github.io/react-native/docs/style.html#using-styles).

```jsx
<Button
  size="large"
  block={true}>
  Cool Button!
</Button>
```

Start by adding another style to your `styles` object:

```jsx
var styles = {
  base: {
    background: 'blue',
    border: 0,
    borderRadius: 4,
    color: 'white',
    padding: '1.5em'
  },

  block: {
    display: 'block'
  }
};
```

Then, include that style object in the array passed to the `style` attribute if the conditions match:

```jsx
// Inside render
return (
  <button
    style={[
      styles.base,
      this.props.block && styles.block
    ]}>
    {this.props.children}
  </button>
);
```

Radium will ignore any elements of the array that aren't objects, such as the result of `this.props.block && styles.block` when `this.props.block` is `false` or `undefined`.

## Browser States

Radium supports styling for three browser states that are targeted with pseudo-selectors in normal CSS: `:hover`, `:focus`, and `:active`.

To add styles for these states, add a special key to your style object with the additional rules. Additionally, you will need to add a unique `key` prop to the elements that take these styles:

```jsx
var styles = {
  base: {
    background: 'blue',
    border: 0,
    borderRadius: 4,
    color: 'white',
    padding: '1.5em',

    ':hover': {
      backgroundColor: 'red'
    },

    ':focus': {
      backgroundColor: 'green'
    },

    ':active': {
      backgroundColor: 'yellow'
    },
  },

  block: {
    display: 'block',

    ':hover': {
      boxShadow: '0 3px 0 rgba(0,0,0,0.2)'
    }
  },
};

class MyComponent extends Component {
...
render() {
  return (
    <div key="1" style={styles.base}>
      <div key="2" style={styles.block} />
    </div>
  );
}
...
}

export default Radium(MyComponent);
```

Radium will merge styles for any active states when your component is rendered. If you are having trouble with browser states, check out [this section](https://github.com/FormidableLabs/radium/tree/master/docs/faq#why-does-the-browser-state-of-a-child-element-not-reset-after-unmounting-and-remounting) of the FAQ.

## Media queries

Add media queries to your style objects the same way as you would add browser state modifiers like  `:hover`. The key must start with `@media`, and the [syntax](https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries) is identical to CSS:

```jsx
var style = {
  width: '25%',

  '@media (min-width: 320px)': {
    width: '100%'
  }
};
```

Radium will apply the correct styles for the currently active media queries. Top level CSS rules in your media queries will be converted to CSS and rendered in an actual `<style>` element with `!important` appended instead of being applied inline so they will work with server-side rendering. Note that you must wrap your top-level component in the `<StyleRoot>` component to render the Radium stylesheet. Print styles will also work as normal, since they are rendered to CSS.

### Nested browser states

Media query styles can also contain nested browser states:

```jsx
var style = {
  width: '25%',

  '@media (min-width: 320px)': {
    width: '100%',

    ':hover': {
      background: 'white'
    }
  }
};
```

### Known issues with media queries

#### IE9 Support

IE9 supports CSS media queries, but doesn't support the `matchMedia` API. You'll need a [polyfill that includes addListener](https://github.com/paulirish/matchMedia.js/).

## Styling multiple elements in a single component

Radium allows you to style multiple elements in the same component. You just have to give each element that has browser state modifiers like :hover or media queries a unique `key` or `ref` attribute:

```jsx
// Inside render
return (
  <div>
    <div key="one" style={[styles.both, styles.one]} />
    <div key="two" style={[styles.both, styles.two]} />
  </div>
);

var styles = {
  both: {
    background: 'black',
    border: 'solid 1px white',
    height: 100,
    width: 100
  },
  one: {
    ':hover': {
      background: 'blue',
    }
  },
  two: {
    ':hover': {
      background: 'red',
    }
  }
};
```

## Styling one element depending on another's state

You can query Radium's state using `Radium.getState`. This allows you to style or render one element based on the state of another, e.g. showing a message when a button is hovered.

```jsx
// Inside render
return (
  <div>
    <button key="keyForButton" style={[styles.button]}>Hover me!</button>
    {Radium.getState(this.state, 'keyForButton', ':hover') ? (
      <span>{' '}Hovering!</span>
    ) : null}
  </div>
);

var styles = {
  button: {
    // Even though we don't have any special styles on the button, we need
    // to add empty :hover styles here to tell Radium to track this element's
    // state.
    ':hover': {}
  }
};
```

## Fallback values

Sometimes you need to provide an additional value for a single CSS property in case the first one isn't applied successfully. Simply pass an array of values, and Radium will test them and apply the first one that works:

```jsx
var styles = {
  button: {
    background: ['rgba(255, 255, 255, .5)', '#fff']
  }
};
```

Is equivalent to the following CSS (note that the order is reversed):

```css
.button {
  background: #fff;
  background: rgba(255, 255, 255, .5);
}
```

## `<Style>` component

Want to add a style selector within your component? Need to pass properties to the `html` and `body` elements or group selectors (e.g. `h1, h2, h3`) that share properties? Radium has you covered with the `<Style />` component - read how to use it [here](https://github.com/FormidableLabs/radium/tree/master/docs/api#style-component).


================================================
FILE: docs/guides/upgrade-v0.16.x.md
================================================
# v0.16.x Upgrade Guide

Version `0.16.x` brought a handful of [breaking, but really good changes](https://github.com/FormidableLabs/radium/blob/master/CHANGELOG.md#breaking-changes). Here's how you upgrade your app.

## Keyframes and Media Queries with Server Side Rendering

If you're using keyframes or media queries, you will need to wrap the top-level component in a `<StyleRoot/>` component.

You can't use keyframes or media queries in the direct children of `<StyleRoot/>`. See the docs for more details: https://github.com/FormidableLabs/radium/tree/master/docs/api#styleroot-component

### How to Make the Change

Old syntax (`v0.15.x`)

```jsx
import Radium from 'radium';

@Radium
class App extends React.Component {
  render() {
    return (
      <div>
        ... rest of your app ...
      </div>
    );
  }
}
```

New syntax (`v0.16.x`)

```jsx
import {StyleRoot} from 'radium';

// No need for @Radium decorator; StyleRoot is already wrapped.
class App extends React.Component {
  render() {
    return (
      <StyleRoot>
        ... rest of your app ...
      </StyleRoot>
    );
  }
}
```

## Keyframes

Wrap your root component in `<StyleRoot/>` (see above).

The result of Radium.keyframes is now a placeholder object that Radium processes at render time, and must be assigned to the animationName prop.
https://github.com/FormidableLabs/radium/tree/master/docs/api#keyframes

### How to Make the Change

Old syntax (`v0.15.x`)

```jsx
import Radium from 'radium';

@Radium
class Spinner extends React.Component {
  render() {
    return (
      <div>
        <div style={styles.inner} />
      </div>
    );
  }
}

var pulseKeyframes = Radium.keyframes({
  '0%': { width: '10%' },
  '50%': { width: '50%' },
  '100%': { width: '10%' },
});

var styles = {
  inner: {
    animation: pulseKeyframes + ' 3s ease 0s infinite',
    background: 'blue',
    height: '4px',
    margin: '0 auto',
  }
};
```

New syntax (`v0.16.x`)

```jsx
import Radium from 'radium';

@Radium
class Spinner extends React.Component {
  render () {
    return (
      <div>
        <div style={styles.inner} />
      </div>
    );
  }
}

var pulseKeyframes = Radium.keyframes({
  '0%': { width: '10%' },
  '50%': { width: '50%' },
  '100%': { width: '10%' },
}, 'pulse');

var styles = {
  inner: {
    // Use a placeholder animation name (e.g. x) in `animation`
    animation: 'x 3s ease 0s infinite',
    // Assign the result of `keyframes` to `animationName`
    animationName: pulseKeyframes,
    background: 'blue',
    height: '4px',
    margin: '0 auto',
  }
};
```

## Print Styles

`printStyles` have been removed, in favor of `@media print` media queries, which are now rendered as CSS so they work correctly: https://github.com/FormidableLabs/radium/tree/master/docs/guides#media-queries

In any component you were declaring a static `printStyles` property before, you now define the print styles using media queries: `{'@media print': { ... }}`

### How to Make the Change

Old syntax (`v0.15.x`)

```jsx
import {PrintStyleSheet} from 'radium';

@Radium
class MyComponent extends React.Component {
  static printStyles = {
    wrapper: { background: 'white' },
    text: { color: 'black' }
  };

  render() {
    return (
      <div className={this.printStyleClass.wrapper}>
        <p className={this.printStyleClass.text}>Prints as black text on white background</p>
      </div>
    );
  }
}

class App extends React.Component {
  render() {
    return (
      <div>
        <PrintStyleSheet />
        <MyComponent/>
      </div>
    );
  }
}
```

New syntax (`v0.16.x`)

```jsx
import {StyleRoot} from 'radium';

@Radium
class MyComponent extends React.Component {
  render() {
    return (
      <div style={{'@media print': { color: white }}}>
        <p style={{'@media print': { color: black }}}>Prints as black text on white background</p>
      </div>
    );
  }
}

class App extends React.Component {
  render() {
    return (
      <StyleRoot>
        <MyComponent/>
      </StyleRoot>
    );
  }
}
```


================================================
FILE: examples/app.js
================================================
/**
 * The examples provided by Formidable Labs are for non-commercial testing and
 * evaluation purposes only. Formidable Labs reserves all rights not expressly
 * granted.
 *
 * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
 * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
 * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
 * FORMIDABLE LABS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
 * IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
 * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 */

/* eslint-disable no-use-before-define */

import React from 'react';

import {resetListStyle, resetBoxModel} from './common.styles';
import Button from './components/button';
import ComputedWell from './components/computed-well';
import Radium, {getState, keyframes, Style, StyleRoot} from '../src';

//
// Radium with ES6 class syntax
//
class HoverMessage extends React.Component {
  render() {
    return (
      <div>
        <button key="button" style={{display: 'flex', ':hover': {}}}>
          Hover me!
        </button>
        {getState(this.state, 'button', ':hover') ? (
          <span> Hovering!</span>
        ) : null}
      </div>
    );
  }
}
HoverMessage = Radium(HoverMessage);

//
// Radium with ES7 decorator
//
@Radium
class TwoSquares extends React.Component {
  render() {
    return (
      <div>
        <div key="one" style={[squareStyles.all, squareStyles.one]} />
        <div key="two" style={[squareStyles.all, squareStyles.two]} />
        <div
          disabled
          key="three"
          style={[squareStyles.all, squareStyles.three]}
        />
        <div style={{clear: 'both'}} />
      </div>
    );
  }
}

class Spinner extends React.Component {
  render() {
    return (
      <div>
        <div
          style={[spinnerStyles.inner, {'@media print': {height: '10px'}}]}
        />
      </div>
    );
  }
}

Spinner = Radium(Spinner);

class MultiSpinner extends React.Component {
  render() {
    return (
      <div>
        <div
          style={[
            multiAnimationStyles.inner,
            {'@media print': {height: '10px'}}
          ]}
        />
      </div>
    );
  }
}

MultiSpinner = Radium(MultiSpinner);

const VisitedLink = Radium(() => (
  <a
    href="https://github.com/formidablelabs/radium"
    style={{color: 'gray', ':visited': {color: 'black'}}}
  >
    https://github.com/formidablelabs/radium
  </a>
));

class App extends React.Component {
  _remount() {
    this.setState({shouldRenderNull: true});

    setTimeout(
      function() {
        this.setState({shouldRenderNull: false});
      }.bind(this),
      100
    );
  }

  render() {
    if (this.state && this.state.shouldRenderNull) {
      return null;
    }

    return (
      <StyleRoot>
        <VisitedLink />

        <p />
        <HoverMessage />

        <p />
        <TwoSquares />

        <p />
        <Spinner />

        <p />
        <MultiSpinner />

        <p />
        <Button onClick={this._remount.bind(this)}>Unmount and remount</Button>

        <p />
        <Button>Button</Button>

        <p />
        <Button color="red">Button</Button>

        <p />
        <Button
          style={{
            fontSize: '1.5em',
            borderRadius: 3
          }}
        >
          Button
        </Button>

        <div style={{margin: '20px 0', width: 220}}>
          {Array.apply(null, Array(100)).map(function(_, i) {
            return <div key={'tile' + i} style={tileStyle} />;
          })}
          <div style={{clear: 'both'}} />
        </div>

        <ul style={listStyle}>
          <li>
            Create and use reusable rules with the help of spread operators.
          </li>
        </ul>

        <Style
          rules={{
            body: {
              margin: 0,
              fontFamily: 'Helvetica Neue, Helvetica, Arial, sans-serif'
            },
            mediaQueries: {
              '(max-width: 600px)': {
                body: {
                  background: 'gray'
                }
              },
              '(max-width: 500px)': {
                body: {
                  background: 'blue'
                },
                'p, h1': {
                  color: 'white'
                }
              }
            }
          }}
        />

        <ComputedWell>Click me!</ComputedWell>

        <div className="scoping-class">
          <Style
            rules={{
              span: {
                fontFamily: 'Lucida Console, Monaco, monospace'
              },
              color: 'blue'
            }}
            scopeSelector=".scoping-class"
          />
          <span>This content has scoped styles</span>
        </div>
      </StyleRoot>
    );
  }
}

App = Radium(App);

const squareStyles = {
  all: {
    background: 'black',
    border: 'solid 1px white',
    float: 'left',
    height: 100,
    width: 100
  },
  one: {
    ':hover': {
      background: 'blue'
    }
  },
  two: {
    ':hover': {
      background: 'red'
    }
  },
  three: {
    ':hover': {
      background: 'yellow'
    },
    ':disabled': {
      background: 'red'
    }
  }
};

const tileStyle = {
  display: 'block',
  float: 'left',
  background: '#ccc',
  width: 20,
  height: 20,
  textAlign: 'center',
  border: '1px solid white',
  cursor: 'pointer',

  ':hover': {
    background: '#999'
  }
};

const pulseAnimation = keyframes(
  {
    '0%': {width: '10%'},
    '50%': {width: '50%'},
    '100%': {width: '10%'}
  },
  'pulse'
);

const blendAnimation = Radium.keyframes(
  {
    '0%': {background: 'red'},
    '25%': {background: 'yellow'},
    '50%': {background: 'green'},
    '75%': {background: 'blue'},
    '100%': {background: 'red'}
  },
  'blend'
);

const spinnerStyles = {
  inner: {
    animation: 'x 3s ease 0s infinite',
    animationName: pulseAnimation,
    background: 'blue',
    height: '4px',
    margin: '0 auto'
  }
};

const multiAnimationStyles = {
  inner: {
    animationName: [pulseAnimation, blendAnimation],
    animationDuration: '2.5s, 8s',
    animationIterationCount: 'infinite, infinite',
    animationTimingFunction: 'linear, cubic-bezier(0.1, 0.7, 1.0, 0.1)',
    height: '4px',
    margin: '0 auto'
  }
};

const listStyle = {
  ...resetListStyle,
  ...resetBoxModel,
  marginTop: 15,
  marginBottom: 15,
  marginLeft: 15,
  marginRight: 15
};

export default App;


================================================
FILE: examples/client.js
================================================
/**
 * The examples provided by Formidable Labs are for non-commercial testing and
 * evaluation purposes only. Formidable Labs reserves all rights not expressly
 * granted.
 *
 * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
 * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
 * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
 * FORMIDABLE LABS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
 * IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
 * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 */

import React from 'react';
import ReactDOM from 'react-dom';
import App from './app';

ReactDOM.render(<App />, document.getElementById('app'));


================================================
FILE: examples/common.styles.js
================================================
export const resetListStyle = {
  listStyle: 'none'
};

export const resetBoxModel = {
  marginTop: 0,
  marginRight: 0,
  marginBottom: 0,
  marginLeft: 0,
  paddingTop: 0,
  paddingRight: 0,
  paddingBottom: 0,
  paddingLeft: 0
};


================================================
FILE: examples/components/button.js
================================================
/**
 * The examples provided by Formidable Labs are for non-commercial testing and
 * evaluation purposes only. Formidable Labs reserves all rights not expressly
 * granted.
 *
 * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
 * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
 * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
 * FORMIDABLE LABS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
 * IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
 * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 */

/* eslint-disable no-use-before-define */

import React from 'react';
import PropTypes from 'prop-types';
import Radium from '../../src';

@Radium
class Button extends React.Component {
  render() {
    return (
      <button
        onClick={this.props.onClick}
        style={[
          styles.base,
          this.props.color === 'red' && styles.red,
          this.props.style
        ]}
      >
        {this.props.children}
      </button>
    );
  }
}

Button.propTypes = {
  color: PropTypes.string,
  onClick: PropTypes.func
};

const styles = {
  base: {
    fontSize: 16,
    backgroundColor: '#0074d9',
    color: '#fff',
    border: 0,
    borderRadius: '0.3em',
    padding: '0.4em 1em',
    cursor: 'pointer',
    outline: 'none',

    '@media (min-width: 992px)': {
      padding: '0.6em 1.2em'
    },

    '@media (min-width: 1200px)': {
      padding: '0.8em 1.5em'
    },

    ':hover': {
      backgroundColor: '#0088FF'
    },

    ':focus': {
      backgroundColor: '#0088FF'
    },

    ':active': {
      backgroundColor: '#005299',
      transform: 'translateY(2px)'
    }
  },

  red: {
    backgroundColor: '#d90000',

    ':hover': {
      backgroundColor: '#FF0000'
    },
    ':focus': {
      backgroundColor: '#FF0000'
    },
    ':active': {
      backgroundColor: '#990000'
    }
  }
};

export default Button;


================================================
FILE: examples/components/computed-well.js
================================================
/**
 * The examples provided by Formidable Labs are for non-commercial testing and
 * evaluation purposes only. Formidable Labs reserves all rights not expressly
 * granted.
 *
 * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
 * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
 * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
 * FORMIDABLE LABS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
 * IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
 * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 */

import React from 'react';
import ReactDOM from 'react-dom';
import Radium from '../../src';

class ComputedWell extends React.Component {
  getInitialState() {
    return {
      dynamicBg: '#000'
    };
  }

  getStyles() {
    return {
      padding: '1em',
      borderRadius: 5,
      background: this.state.dynamicBg
    };
  }

  handleSubmit(ev) {
    ev.preventDefault();

    this.setState({
      dynamicBg: ReactDOM.findDOMNode(this.refs.input).value
    });
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit.bind(this)} style={this.getStyles()}>
        <input placeholder="black" ref="input" type="text" />

        <button>Change Background Color</button>
      </form>
    );
  }
}

export default Radium(ComputedWell);


================================================
FILE: examples/index.html
================================================
<!DOCTYPE html>
<!--
The examples provided by Formidable Labs are for non-commercial testing and evaluation purposes only. Formidable Labs reserves all rights not expressly
granted.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
FORMIDABLE LABS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN
AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
-->
<html>
  <head>
    <title>Radium Examples</title>
  </head>
  <body>
    <h1>Radium Examples</h1>

    <div id="app"><!-- {{app}} --></div>

    <script src="app.js"></script>
  </body>
</html>


================================================
FILE: examples/server.js
================================================
/**
 * The examples provided by Formidable Labs are for non-commercial testing and
 * evaluation purposes only. Formidable Labs reserves all rights not expressly
 * granted.
 *
 * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
 * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
 * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
 * FORMIDABLE LABS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
 * IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
 * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 */

const express = require('express');
const proxy = require('express-http-proxy');
const React = require('react');
const ReactDOMServer = require('react-dom/server');
import App from './app'; // Leave ESM import
const fs = require('fs');
const path = require('path');

const indexHTML = fs
  .readFileSync(path.resolve(__dirname, 'index.html'))
  .toString();
const app = express();
const host = 'localhost';
const port = 8000;

app.use('/app.js', proxy('localhost:8080', {forwardPath: () => '/app.js'}));

app.get('/', (req, res) => {
  const appHtml = ReactDOMServer.renderToString(
    <App radiumConfig={{userAgent: req.headers['user-agent']}} />
  );
  res.write(indexHTML.replace('<!-- {{app}} -->', appHtml));
  res.end();
});

app.listen(port, host, () => {
  // eslint-disable-next-line no-console
  console.log('Access the universal app at http://%s:%d', host, port);
});


================================================
FILE: examples/webpack.config.js
================================================
/**
 * The examples provided by Formidable Labs are for non-commercial testing and
 * evaluation purposes only. Formidable Labs reserves all rights not expressly
 * granted.
 *
 * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
 * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
 * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
 * FORMIDABLE LABS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
 * IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
 * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 */

var path = require('path'); // eslint-disable-line no-var

module.exports = {
  cache: true,
  entry: {
    app: './examples/client.js'
  },
  output: {
    path: path.join(__dirname, 'dist'),
    publicPath: '/',
    filename: '[name].js',
    chunkFilename: '[chunkhash].js'
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        include: [__dirname, path.resolve(__dirname, '../src')],
        loader: 'babel-loader'
      }
    ]
  }
};


================================================
FILE: index.js
================================================
module.exports = require('./lib').default;
module.exports.default = module.exports;


================================================
FILE: interfaces/hoist-non-react-statics.js
================================================
declare module 'hoist-non-react-statics' {
  /*
    S - source component statics
    TP - target component props
    SP - additional source component props
  */
  declare module.exports: <TP, SP, S>(
    target: React$ComponentType<TP>,
    source: React$ComponentType<SP> & S,
    blacklist?: {[key: $Keys<S>]: boolean}
  ) => React$ComponentType<TP> & $Shape<S>;
}


================================================
FILE: interfaces/inline-style-prefixer.js
================================================
declare class InlineStylePrefixer {
  static prefixAll: typeof prefixAll;

  prefixedKeyframes: string;

  constructor(config: {
    keepUnprefixed?: boolean,
    userAgent?: ?string
  }): void;

  prefix(style: Object): Object;
}

declare function prefixAll(style: Object): Object;

declare function createStaticPrefixer(browserData: Object): typeof prefixAll;

declare function createDynamicPrefixer(
  browserData: Object,
  prefixAll: typeof prefixAll
): typeof InlineStylePrefixer;

declare module 'inline-style-prefixer' {
  declare module.exports: typeof InlineStylePrefixer;
}

declare module 'inline-style-prefixer/static/createPrefixer' {
  declare module.exports: typeof createStaticPrefixer;
}

declare module 'inline-style-prefixer/dynamic/createPrefixer' {
  declare module.exports: typeof createDynamicPrefixer;
}


================================================
FILE: karma.conf.coverage.js
================================================
module.exports = function(config) {
  require('./karma.conf.js')(config);
  config.set({
    webpack: {
      module: {
        rules: config.webpack.module.rules.slice(1).concat([
          {
            test: /\.js$/,
            exclude: [/node_modules/],
            use: {
              loader: 'babel-loader',
              options: {
                plugins: ['istanbul']
              }
            }
          }
        ])
      }
    },
    reporters: config.reporters.concat(['coverage']),
    plugins: config.plugins.concat(['karma-coverage']),
    coverageReporter: {
      reporters: [
        {
          type: 'text'
        },
        {
          type: 'lcovonly',
          subdir: '.'
        }
      ]
    }
  });
};


================================================
FILE: karma.conf.ie.js
================================================
module.exports = function(config) {
  require('./karma.conf.js')(config);
  config.set({
    plugins: config.plugins.concat('karma-ie-launcher'),
    browsers: ['IE9'],
    customLaunchers: {
      IE9: {
        base: 'IE',
        'x-ua-compatible': 'IE=EmulateIE9'
      }
    }
  });
};


================================================
FILE: karma.conf.js
================================================
const path = require('path');

process.env.BABEL_ENV = 'commonjs';

module.exports = function(config) {
  config.set({
    basePath: '',
    frameworks: ['mocha', 'sinon-chai'],
    files: [
      // Polyfills for IE9 in React 16.
      require.resolve('core-js/es6/map'),
      require.resolve('core-js/es6/set'),
      'src/__tests__/**/*.js'
    ],
    preprocessors: {
      [path.join(
        path.dirname(require.resolve('core-js/package.json')),
        'es6/**/*.js' // eslint-disable-line prettier/prettier
      )]: ['webpack'],
      'src/__tests__/**/*.js': ['webpack']
    },
    webpack: {
      cache: true,
      module: {
        rules: [
          {
            test: /\.js$/,
            enforce: 'pre',
            include: path.resolve('src/'),
            loader: 'babel-loader'
          },
          {
            test: /\.css$/,
            loader: 'style-loader!css-loader'
          }
        ]
      },
      resolve: {
        modules: [
          path.join(__dirname, 'node_modules'),
          path.join(__dirname, 'src')
        ],
        extensions: ['.js']
      }
    },
    webpackServer: {
      quiet: false,
      noInfo: true,
      stats: {
        assets: false,
        colors: true,
        version: false,
        hash: false,
        timings: false,
        chunks: false,
        chunkModules: false
      }
    },
    exclude: [],
    port: 8080,
    logLevel: config.LOG_INFO,
    colors: true,
    autoWatch: false,
    // Run a customized instance of headless chrome for dev + Travis CI.
    browsers: ['ChromeHeadlessCustom'],
    customLaunchers: {
      ChromeHeadlessCustom: {
        base: 'ChromeHeadless',
        // --no-sandbox for https://github.com/travis-ci/docs-travis-ci-com/pull/1671/files
        flags: ['--no-sandbox']
      }
    },
    reporters: ['mocha'],
    browserNoActivityTimeout: 60000,
    plugins: [
      'karma-chrome-launcher',
      'karma-mocha',
      'karma-mocha-reporter',
      'karma-sinon-chai',
      'karma-webpack'
    ],
    browserConsoleLogOptions: {
      level: 'log',
      format: '%b %T: %m',
      terminal: true
    },
    captureTimeout: 100000,
    singleRun: true
  });
};


================================================
FILE: package.json
================================================
{
  "name": "radium",
  "version": "0.26.2",
  "description": "A set of tools to manage inline styles on React elements",
  "main": "index.js",
  "module": "es/index.js",
  "jsnext:main": "es/index.js",
  "sideEffects": false,
  "repository": {
    "type": "git",
    "url": "https://github.com/formidablelabs/radium.git"
  },
  "homepage": "https://github.com/formidablelabs/radium",
  "bugs": "https://github.com/formidablelabs/radium/issues",
  "directories": {
    "example": "examples"
  },
  "scripts": {
    "postinstall": "cd lib || npm run build",
    "preversion": "npm test && npm run lint",
    "version": "npm run build",
    "postversion": "publishr postversion -V",
    "postpublish": "publishr postpublish -V",
    "version-dry-run": "publishr dry-run -V",
    "build": "npm run clean && builder concurrent --buffer build-lib build-dist build-es",
    "build-babel": "babel src --ignore \"**/__tests__/*\",\"**/__mocks__/*\"",
    "build-lib": "builder run --env \"{\\\"BABEL_ENV\\\":\\\"commonjs\\\"}\" build-babel -- -d lib --verbose",
    "build-dist-dev": "webpack",
    "build-dist-prod": "webpack --config=webpack.config.minified.js",
    "build-dist": "builder concurrent --buffer build-dist-dev build-dist-prod",
    "build-examples": "webpack --config examples/webpack.config.js",
    "build-es": "builder run build-babel -- -d es",
    "clean": "rimraf lib es dist",
    "examples": "webpack-dev-server --config examples/webpack.config.js --no-info --content-base examples",
    "examples-server": "babel-node examples/server.js",
    "flow": "flow check",
    "eslint": "eslint .",
    "fixlint": "npm run eslint -- --fix",
    "lint": "builder concurrent --buffer eslint flow",
    "start": "builder run --env \"{\\\"BABEL_ENV\\\":\\\"commonjs\\\"}\" examples-server",
    "test-node": "mocha \"test/**/*-test.js\"",
    "test-node-dev": "mocha --watch \"test/**/*-test.js\"",
    "test-frontend": "karma start",
    "test-frontend-coverage": "karma start karma.conf.coverage.js",
    "test-frontend-ie": "karma start karma.conf.ie.js",
    "test-frontend-dev": "karma start --no-single-run --auto-watch",
    "test": "npm run test-node && npm run test-frontend",
    "test-coverage": "npm run test-node && npm run test-frontend-coverage",
    "test-ie": "npm run test-node && npm run test-frontend-ie",
    "test-dev": "builder concurrent test-node-dev test-frontend-dev",
    "universal": "builder concurrent start examples",
    "update-prefix-data": "babel-node scripts/update-prefix-data.js && eslint --fix src/prefix-data",
    "watch-lib": "npm run build-lib -- --watch"
  },
  "license": "MIT",
  "dependencies": {
    "@babel/cli": "^7.0.0",
    "@babel/core": "^7.0.0",
    "@babel/plugin-proposal-class-properties": "^7.0.0",
    "@babel/plugin-proposal-decorators": "^7.0.0",
    "@babel/plugin-transform-destructuring": "^7.0.0",
    "@babel/preset-env": "^7.0.0",
    "@babel/preset-flow": "^7.0.0",
    "@babel/preset-react": "^7.0.0",
    "babel-loader": "^8.0.0",
    "builder": "^3.2.3",
    "exenv": "^1.2.1",
    "hoist-non-react-statics": "3.3.0",
    "inline-style-prefixer": "^4.0.0",
    "prop-types": "^15.5.8",
    "publishr": "^1.0.0",
    "rimraf": "^2.6.1",
    "webpack": "^3.10.0"
  },
  "peerDependencies": {
    "react": "^16.8.0 || ^17.0.0"
  },
  "devDependencies": {
    "@babel/node": "^7.0.0",
    "babel-eslint": "^10.0.1",
    "babel-plugin-istanbul": "^5.1.0",
    "caniuse-api": "^2.0.0",
    "chai": "^3.5.0",
    "color": "^1.0.3",
    "core-js": "^2.5.3",
    "coveralls": "^2.12.0",
    "enzyme": "^3.10.0",
    "enzyme-adapter-react-16": "^1.14.0",
    "eslint": "^5.16.0",
    "eslint-plugin-flowtype": "3.9.1",
    "eslint-plugin-prettier": "^3.1.0",
    "eslint-plugin-react": "^7.13.0",
    "eslint-plugin-react-hooks": "1.6.0",
    "express": "^4.15.2",
    "express-http-proxy": "^0.11.0",
    "flow-bin": "^0.100.0",
    "inject-loader": "^3.0.1",
    "jsdom": "^12.0.0",
    "jsdom-global": "^3.0.2",
    "karma": "^3.0.0",
    "karma-babel-preprocessor": "^6.0.1",
    "karma-chrome-launcher": "^2.2.0",
    "karma-coverage": "^1.1.1",
    "karma-ie-launcher": "^1.0.0",
    "karma-mocha": "^1.3.0",
    "karma-mocha-reporter": "^2.2.2",
    "karma-sinon-chai": "^1.2.4",
    "karma-webpack": "^3.0.0",
    "mocha": "^3.2.0",
    "node-libs-browser": "^2.0.0",
    "nodemon": "^1.11.0",
    "object-assign": "^4.1.1",
    "prettier": "^1.15.3",
    "react": "^16.8.3",
    "react-dom": "^16.8.3",
    "react-test-renderer": "^16.8.3",
    "sinon": "^1.17.7",
    "sinon-chai": "^2.8.0",
    "webpack-dev-server": "^3.1.11"
  },
  "publishr": {
    "dependencies": [
      "^babel-",
      "^@babel/",
      "^builder$",
      "^publishr$",
      "^rimraf$",
      "^webpack"
    ],
    "files": {
      ".npmignore": ".npmignore.publishr"
    },
    "scripts": {
      "postinstall": ""
    }
  }
}


================================================
FILE: scripts/update-prefix-data.js
================================================
/**
 * Update the files in `src/prefix-data` to match the `browserList` below. Run
 * this if browser support changes or `inline-style-prefixer` gets fixes for the
 * supported browsers.
 *
 * **Note**: Not valid Node code (without std/esm). Use `babel-node` to exec.
 */
import path from 'path';
import generateData from 'inline-style-prefixer/generator';

const browserList = {
  chrome: 30,
  android: 4,
  firefox: 25,
  ios_saf: 6,
  safari: 6,
  ie: 9,
  ie_mob: 9,
  edge: 12,
  opera: 13,
  op_mini: 5,
  and_uc: 9,
  and_chr: 30
};

generateData(browserList, {
  staticPath: path.join(__dirname, '../src/prefix-data/static.js'),
  dynamicPath: path.join(__dirname, '../src/prefix-data/dynamic.js')
});


================================================
FILE: src/__mocks__/exenv.js
================================================
export default {
  canUseDOM: true,
  canUseEventListeners: true
};


================================================
FILE: src/__mocks__/prefixer.js
================================================
export default {
  getPrefixedStyle: style => style
};


================================================
FILE: src/__tests__/camel-case-props-to-dash-case-test.js
================================================
import camelCasePropsToDashCase from 'camel-case-props-to-dash-case';

describe('camelCasePropsToDashCase', function() {
  it('converts to dash case correctly', function() {
    const result = camelCasePropsToDashCase({
      borderLeft: '1px solid black',
      WebkitBoxSizing: 'border-box',
      msTransform: 'rotate(90deg)'
    });

    expect(result).to.deep.equal({
      'border-left': '1px solid black',
      '-webkit-box-sizing': 'border-box',
      '-ms-transform': 'rotate(90deg)'
    });
  });
});


================================================
FILE: src/__tests__/clean-state-key-test.js
================================================
import cleanStateKey from 'clean-state-key';

describe('cleanStateKey', () => {
  it('returns the key as a string', () => {
    const key = 1;
    expect(cleanStateKey(key)).to.equal('1');
  });

  it('returns main if no key is passed', () => {
    expect(cleanStateKey()).to.equal('main');
  });
});


================================================
FILE: src/__tests__/enhancer-test.js
================================================
const {getElement, renderFcIntoDocument} = require('test-helpers');
const resolveStyles = sinon.spy(require('resolve-styles'), 'default');
const Enhancer = require('inject-loader!enhancer')({
  './resolve-styles': resolveStyles
}).default;

import React, {Component} from 'react';

describe('Enhancer', () => {
  it('sets up initial state', () => {
    class Composed extends Component {
      render() {
        return <div />;
      }
    }
    const Enhanced = Enhancer(Composed);

    const ref = React.createRef();
    renderFcIntoDocument(<Enhanced ref={ref} />);

    expect(ref.current.state).to.deep.equal({_radiumStyleState: {}});
  });

  it('sets up initial state on a function component', () => {
    // using plugin API to get state as state hooks keep things pretty private
    // so we cannot just dive into the component instance like with the class example
    const dummyPlugin = sinon.spy();
    const Composed = props => <div {...props} />;
    const Enhanced = Enhancer(Composed, {
      plugins: [dummyPlugin]
    });

    renderFcIntoDocument(<Enhanced style={{color: 'red'}} />);

    const pluginApi = dummyPlugin.getCall(0).args[0];

    expect(pluginApi.getComponentField('state')).to.deep.equal({
      _radiumStyleState: {}
    });
  });

  it('merges with existing state', () => {
    class Composed extends Component {
      constructor(props) {
        super(props);
        this.state = {foo: 'bar'};
      }
      render() {
        return <div />;
      }
    }
    const Enhanced = Enhancer(Composed);

    const ref = React.createRef();
    renderFcIntoDocument(<Enhanced ref={ref} />);

    expect(ref.current.state).to.deep.equal({
      foo: 'bar',
      _radiumStyleState: {}
    });
  });

  it('receives the given props', () => {
    class Composed extends Component {
      constructor(props) {
        super(props);
      }
      render() {
        return <div />;
      }
    }
    const Enhanced = Enhancer(Composed);

    const output = renderFcIntoDocument(<Enhanced foo="bar" />);

    expect(output.props.children.props).to.deep.equal({foo: 'bar'});
  });

  it('calls existing render function, then resolveStyles', () => {
    const renderMock = sinon.spy();
    class Composed extends Component {
      render() {
        renderMock();
        return null;
      }
    }
    const Enhanced = Enhancer(Composed);

    renderFcIntoDocument(<Enhanced />);

    expect(renderMock).to.have.been.called;
    expect(resolveStyles).to.have.been.called;
  });

  it('calls existing constructor only once', () => {
    const constructorMock = sinon.spy();
    class Composed extends Component {
      constructor(props) {
        super(props);
        constructorMock();
      }
      render() {
        return <div />;
      }
    }
    const Enhanced = Enhancer(Composed);

    renderFcIntoDocument(<Enhanced />);

    expect(constructorMock).to.have.been.calledOnce;
  });

  it('uses the existing displayName', () => {
    class Composed extends Component {
      render() {
        return <div />;
      }
    }
    Composed.displayName = 'Composed';

    const Enhanced = Enhancer(Composed);

    const ref = React.createRef();
    renderFcIntoDocument(<Enhanced ref={ref} />);

    expect(ref.current.constructor.displayName).to.equal(Composed.displayName);
  });

  it('calls existing componentWillUnmount function', () => {
    const existingComponentWillUnmount = sinon.spy();
    class Composed extends Component {
      componentWillUnmount() {
        existingComponentWillUnmount();
      }
      render() {
        return <div />;
      }
    }
    const Enhanced = Enhancer(Composed);

    const ref = React.createRef();
    renderFcIntoDocument(<Enhanced ref={ref} />);
    ref.current.componentWillUnmount();

    expect(existingComponentWillUnmount).to.have.been.called;
  });

  it('removes mouse up listener on componentWillUnmount', () => {
    const removeMouseUpListener = sinon.spy();
    class Composed extends Component {
      constructor(props) {
        super(props);
        this._radiumMouseUpListener = {remove: removeMouseUpListener};
      }
      render() {
        return <div />;
      }
    }
    const Enhanced = Enhancer(Composed);

    const ref = React.createRef();
    renderFcIntoDocument(<Enhanced ref={ref} />);
    ref.current.componentWillUnmount();

    expect(removeMouseUpListener).to.have.been.called;
  });

  it('removes media query listeners on componentWillUnmount', () => {
    const mediaQueryListenersByQuery = {
      '(min-width: 1000px)': {remove: sinon.spy()},
      '(max-width: 600px)': {remove: sinon.spy()},
      '(min-resolution: 2dppx)': {remove: sinon.spy()}
    };
    class Composed extends Component {
      constructor(props) {
        super(props);
        this._radiumMediaQueryListenersByQuery = mediaQueryListenersByQuery;
      }
      render() {
        return <div />;
      }
    }
    const Enhanced = Enhancer(Composed);

    const ref = React.createRef();
    renderFcIntoDocument(<Enhanced ref={ref} />);
    ref.current.componentWillUnmount();

    Object.keys(mediaQueryListenersByQuery).forEach(key => {
      expect(mediaQueryListenersByQuery[key].remove).to.have.been.called;
    });
  });

  it('manually populates all static properties for IE <10', () => {
    class Composed extends Component {
      static staticMethod() {
        return {bar: 'foo'};
      }
      render() {}
    }

    Composed.foo = 'bar';

    const Enhanced = Enhancer(Composed);

    expect(Enhanced.foo).to.equal('bar');
    expect(Enhanced.staticMethod()).to.deep.equal({bar: 'foo'});
  });

  it('works with defaultProps', () => {
    class Composed extends Component {
      static defaultProps = {foo: 'bar'};

      render() {
        return <div>{this.props.foo}</div>;
      }
    }

    const Enhanced = Enhancer(Composed);
    const output = renderFcIntoDocument(<Enhanced />);

    expect(getElement(output, 'div').textContent).to.equal('bar');
  });

  it('copies methods across to top level prototype', () => {
    class Composed extends React.Component {
      getStyles() {
        return [{color: 'black'}];
      }
      render() {
        return <div style={this.getStyles()}>Hello World!</div>;
      }
    }

    const Enhanced = Enhancer(Composed);

    Object.keys(Composed.prototype).forEach(key => {
      expect(Enhanced.prototype.hasOwnProperty(key)).to.equal(true);
    });
  });
});


================================================
FILE: src/__tests__/get-radium-style-state-test.js
================================================
import {Component} from 'react';
import getRadiumStyleState from 'get-radium-style-state';

describe('getRadiumStyleState', () => {
  it('gets the _lastRadiumState if available', () => {
    const state = {someKey: true};
    class Test extends Component {
      _lastRadiumState = state;
    }
    const instance = new Test();
    expect(getRadiumStyleState(instance)).to.deep.equal(state);
  });

  it('gets the _radiumStyleState if available', () => {
    const state = {someKey: true};
    class Test extends Component {
      state = {_radiumStyleState: state};
    }
    const instance = new Test();
    expect(getRadiumStyleState(instance)).to.deep.equal(state);
  });

  it('returns an empty object if nothing is available', () => {
    class Test extends Component {}
    const instance = new Test();
    expect(getRadiumStyleState(instance)).to.deep.equal({});
  });
});


================================================
FILE: src/__tests__/get-state-key-test.js
================================================
import React from 'react';
import getStateKey from 'get-state-key';
import {getRenderOutput} from 'test-helpers';

describe('getStateKey', () => {
  it('gets the ref if it is a string', () => {
    class Test extends React.Component {
      render() {
        return <div ref="myRef" />;
      }
    }

    const output = getRenderOutput(<Test />);

    expect(getStateKey(output)).to.equal('myRef');
  });

  it('gets the key if the ref is not a string', () => {
    class Test extends React.Component {
      render() {
        return <div key="myKey" ref={ref => (this.ref = ref)} />;
      }
    }

    const output = getRenderOutput(<Test />);

    expect(getStateKey(output)).to.equal('myKey');
  });

  it('gets the key if there is no ref', () => {
    class Test extends React.Component {
      render() {
        return <div key="myKey" />;
      }
    }

    const output = getRenderOutput(<Test />);

    expect(getStateKey(output)).to.equal('myKey');
  });
});


================================================
FILE: src/__tests__/get-state-test.js
================================================
import getState from 'get-state';

describe('getState', () => {
  it('successfully gets the state if passed number zero', () => {
    const result = getState(
      {_radiumStyleState: {'0': {':hover': true}}},
      0,
      ':hover'
    );
    expect(result).to.equal(true);
  });
});


================================================
FILE: src/__tests__/keyframes-test.js
================================================
/* eslint-disable react/prop-types */

import Radium, {StyleRoot, keyframes} from 'index';
import {expectCSS, getElement, renderFcIntoDocument} from 'test-helpers';
import React, {Component} from 'react';
import TestUtils from 'react-dom/test-utils';

const CHROME_14_USER_AGENT =
  'Mozilla/5.0 (Windows NT 6.1) AppleWebKit/535.1 ' +
  '(KHTML, like Gecko) Chrome/14.0.812.0 Safari/535.1';

describe('keyframes', () => {
  it('adds prefix to keyframes when needed', () => {
    const anim = keyframes({from: {left: 0}, to: {left: 100}}, 'slide');
    class TestComponent extends Component {
      render() {
        return (
          <StyleRoot
            radiumConfig={{userAgent: CHROME_14_USER_AGENT}}
            style={{animationName: anim}}
          />
        );
      }
    }

    const output = TestUtils.renderIntoDocument(<TestComponent />);
    const style = getElement(output, 'style');

    expectCSS(
      style,
      `
      @-webkit-keyframes slide-radium-animation-1bdcc98d {
        from {left: 0;}
        to {left: 100px;}
      }
    `
    );
  });

  it('adds prefix to multiple keyframes when needed', () => {
    const anim = keyframes({from: {left: 0}, to: {left: 100}}, 'slide');
    const anim2 = keyframes({from: {top: 0}, to: {top: 100}}, 'slideTop');
    class TestComponent extends Component {
      render() {
        return (
          <StyleRoot
            radiumConfig={{userAgent: CHROME_14_USER_AGENT}}
            style={{animationName: [anim, anim2]}}
          />
        );
      }
    }

    const output = TestUtils.renderIntoDocument(<TestComponent />);
    const style = getElement(output, 'style');

    expectCSS(
      style,
      `
      @-webkit-keyframes slide-radium-animation-1bdcc98d {
        from {left: 0;}
        to {left: 100px;}
      }
      @-webkit-keyframes slideTop-radium-animation-c623736d {
        from {top: 0;}
        to {top: 100px;}
      }
    `
    );
  });

  it('renders keyframes in root style component', () => {
    const animation = keyframes(
      {
        from: {left: '-1000px'},
        to: {left: 0}
      },
      'SlideFromLeft'
    );

    class TestComponent extends Component {
      render() {
        return <StyleRoot style={{animationName: animation}} />;
      }
    }

    const output = TestUtils.renderIntoDocument(<TestComponent />);

    const style = getElement(output, 'style');

    expectCSS(
      style,
      `
      @keyframes SlideFromLeft-radium-animation-1b668a10 {
        from{
          left: -1000px;
        }
        to{
          left: 0;
        }
      }
    `
    );
  });

  it('renders multiple keyframes in root style component', () => {
    const animation = keyframes(
      {
        from: {left: '-1000px'},
        to: {left: 0}
      },
      'SlideFromLeft'
    );
    const animation2 = keyframes(
      {
        from: {top: '-1000px'},
        to: {top: 0}
      },
      'SlideFromTop'
    );

    class TestComponent extends Component {
      render() {
        return <StyleRoot style={{animationName: [animation, animation2]}} />;
      }
    }

    const output = TestUtils.renderIntoDocument(<TestComponent />);

    const style = getElement(output, 'style');

    expectCSS(
      style,
      `
      @keyframes SlideFromLeft-radium-animation-1b668a10 {
        from{
          left: -1000px;
        }
        to{
          left: 0;
        }
      }
      @keyframes SlideFromTop-radium-animation-edccf130{
        from{
          top:-1000px;
        }
        to{
          top:0;
        }
      }
    `
    );
  });

  it('adds px suffix when property is not unitless', () => {
    const animation = keyframes(
      {
        from: {left: -1000},
        to: {left: 10}
      },
      'SlideFromLeft'
    );

    class TestComponent extends Component {
      render() {
        return <StyleRoot style={{animationName: animation}} />;
      }
    }

    const output = TestUtils.renderIntoDocument(<TestComponent />);

    const style = getElement(output, 'style');

    expectCSS(
      style,
      `
      @keyframes SlideFromLeft-radium-animation-ab5ed129 {
        from{
          left: -1000px;
        }
        to{
          left: 10px;
        }
      }
    `
    );
  });

  it('adds px suffix when property is not unitless to multiple keyframes', () => {
    const animation = keyframes(
      {
        from: {left: -1000},
        to: {left: 10}
      },
      'SlideFromLeft'
    );
    const animation2 = keyframes(
      {
        from: {top: -1000},
        to: {top: 10}
      },
      'SlideFromTop'
    );

    class TestComponent extends Component {
      render() {
        return <StyleRoot style={{animationName: [animation, animation2]}} />;
      }
    }

    const output = TestUtils.renderIntoDocument(<TestComponent />);

    const style = getElement(output, 'style');

    expectCSS(
      style,
      `
      @keyframes SlideFromLeft-radium-animation-ab5ed129 {
        from{
          left: -1000px;
        }
        to{
          left: 10px;
        }
      }
      @keyframes SlideFromTop-radium-animation-3a6534c9 {
        from{
          top:-1000px;
        }
        to{
          top: 10px;
        }
      }
    `
    );
  });

  it('renders keyframes from child component', () => {
    const animation = keyframes(
      {
        from: {left: '-1000px'},
        to: {left: 0}
      },
      'SlideFromLeft'
    );

    @Radium
    class ChildComponent extends Component {
      render() {
        return <div style={{animationName: animation}} />;
      }
    }

    class TestComponent extends Component {
      render() {
        return (
          <StyleRoot>
            <ChildComponent />
          </StyleRoot>
        );
      }
    }

    const output = TestUtils.renderIntoDocument(<TestComponent />);

    const style = getElement(output, 'style');

    expectCSS(
      style,
      `
      @keyframes SlideFromLeft-radium-animation-1b668a10 {
        from{
          left: -1000px;
        }
        to{
          left: 0;
        }
      }
    `
    );
  });

  it('renders multiple keyframes from child component', () => {
    const animation = keyframes(
      {
        from: {left: '-1000px'},
        to: {left: 0}
      },
      'SlideFromLeft'
    );
    const animation2 = keyframes(
      {
        from: {top: -1000},
        to: {top: 0}
      },
      'SlideFromTop'
    );

    @Radium
    class ChildComponent extends Component {
      render() {
        return <div style={{animationName: [animation, animation2]}} />;
      }
    }

    @Radium
    class TestComponent extends Component {
      render() {
        return (
          <StyleRoot>
            <ChildComponent />
          </StyleRoot>
        );
      }
    }

    const output = renderFcIntoDocument(<TestComponent />);

    const style = getElement(output, 'style');

    expectCSS(
      style,
      `
      @keyframes SlideFromLeft-radium-animation-1b668a10 {
        from{
          left: -1000px;
        }
        to{
          left: 0;
        }
      }
      @keyframes SlideFromTop-radium-animation-edccf130 {
        from{
          top:-1000px;
        }
        to{
          top: 0;
        }
      }
    `
    );
  });
});


================================================
FILE: src/__tests__/media-query-test.js
================================================
/* eslint-disable react/prop-types */

import Radium, {StyleRoot} from 'index';
import React, {Component} from 'react';
import ReactDOM from 'react-dom';
import TestUtils from 'react-dom/test-utils';
import {
  expectColor,
  expectCSS,
  getElement,
  renderFcIntoDocument
} from 'test-helpers';

// Win on at least ie9 _can't_ sinon.stub() window.onerror like normal.
// So, we monkeypatch directly like savages.
const origWindowOnerror = window.onerror;

describe('Media query tests', () => {
  let sandbox;
  let errorSpy;

  beforeEach(() => {
    sandbox = sinon.sandbox.create();
    errorSpy = sinon.spy();
    window.addEventListener('error', errorSpy);

    Radium.TestMode.clearState();
  });

  afterEach(() => {
    sandbox.restore();
    window.removeEventListener('error', errorSpy);
    window.onerror = origWindowOnerror;

    Radium.TestMode.disable();
  });

  it('listens for media queries', () => {
    const addListener = sinon.spy();
    const matchMedia = sinon.spy(() => ({addListener}));

    @Radium({matchMedia})
    class TestComponent extends Component {
      render() {
        return (
          <div
            style={{
              '@media (min-width: 600px)': {':hover': {color: 'blue'}}
            }}
          />
        );
      }
    }

    renderFcIntoDocument(<TestComponent />);

    expect(matchMedia.lastCall.args[0]).to.equal('(min-width: 600px)');
    expect(addListener.lastCall.args[0]).to.be.a('function');
  });

  it('only listens once per component across renders', () => {
    const addListener = sinon.spy();
    const matchMedia = sinon.spy(() => ({addListener}));

    let renders = 0;

    @Radium({matchMedia})
    class TestComponent extends Component {
      render() {
        renders++;

        return (
          <div
            style={{
              '@media (min-width: 600px)': {':hover': {color: 'blue'}}
            }}
          />
        );
      }
    }

    const node = document.createElement('div');
    ReactDOM.render(<TestComponent />, node);
    ReactDOM.render(<TestComponent />, node);

    expect(renders).to.equal(2);
    expect(matchMedia).to.have.been.calledOnce;
    expect(addListener).to.have.been.calledOnce;
  });

  it('listens once per component with same @media in multiple styles', () => {
    const addListener = sinon.spy();
    const matchMedia = sinon.spy(() => ({addListener}));

    @Radium({matchMedia})
    class TestComponent extends Component {
      render() {
        return (
          <div>
            <div
              key="first"
              style={{
                '@media (max-width: 400px)': {':hover': {color: 'blue'}}
              }}
            />
            <div
              key="second"
              style={{
                '@media (max-width: 400px)': {':hover': {color: 'blue'}}
              }}
            />
          </div>
        );
      }
    }

    renderFcIntoDocument(<TestComponent />);

    expect(matchMedia).to.have.been.calledOnce;
    expect(addListener).to.have.been.calledOnce;
  });

  it('applies nested styles inline when media query matches', () => {
    const truthyMatchMedia = () => {
      return {
        matches: true,
        addListener: () => {},
        removeListener: () => {}
      };
    };

    @Radium({matchMedia: truthyMatchMedia})
    class TestComponent extends Component {
      render() {
        return (
          <div
            style={{
              '@media (min-width: 600px)': {':hover': {color: 'blue'}}
            }}
          />
        );
      }
    }

    const output = renderFcIntoDocument(<TestComponent />);
    const div = getElement(output, 'div');
    TestUtils.SimulateNative.mouseOver(div);

    expect(div.style.color).to.equal('blue');
  });

  it('merges nested pseudo styles', () => {
    const truthyMatchMedia = () => {
      return {
        matches: true,
        addListener: () => {},
        removeListener: () => {}
      };
    };

    @Radium({matchMedia: truthyMatchMedia})
    class TestComponent extends Component {
      render() {
        return (
          <div
            style={[
              {':hover': {background: 'green', color: 'green'}},
              {
                '@media (max-width: 400px)': {
                  ':hover': {background: 'yellow'}
                }
              },
              {'@media (max-width: 400px)': {':hover': {color: 'white'}}}
            ]}
          />
        );
      }
    }

    const output = renderFcIntoDocument(<TestComponent />);
    const div = getElement(output, 'div');
    TestUtils.SimulateNative.mouseOver(div);

    expect(div.style.background).to.equal('yellow');
    expect(div.style.color).to.equal('white');
  });

  it('calls component setState when media query changes', () => {
    const listeners = [];
    const addListener = sinon.spy(listener => listeners.push(listener));
    const mql = {addListener, matches: true};
    const matchMedia = sinon.spy(() => mql);

    @Radium({matchMedia})
    class TestComponent extends Component {
      render() {
        return (
          <div
            style={{
              '@media (min-width: 600px)': {':hover': {color: 'blue'}}
            }}
          />
        );
      }
    }

    // First, render with matching media query and verify the hover color
    const output = renderFcIntoDocument(<TestComponent />);
    const div = getElement(output, 'div');
    TestUtils.SimulateNative.mouseOver(div);

    expect(div.style.color).to.equal('blue');

    // Next, make the media query fail, and check again
    mql.matches = false;
    listeners.forEach(listener => listener(mql));

    expect(div.style.color).to.equal('');
  });

  it('saves listeners on component for later removal', () => {
    const mql = {addListener: sinon.spy(), removeListener: sinon.spy()};
    const matchMedia = sinon.spy(() => mql);

    @Radium({matchMedia})
    class TestComponent extends Component {
      render() {
        return (
          <div
            style={{
              '@media (min-width: 600px)': {':hover': {color: 'blue'}}
            }}
          />
        );
      }
    }

    const output = renderFcIntoDocument(<TestComponent />);
    ReactDOM.unmountComponentAtNode(ReactDOM.findDOMNode(output).parentNode);

    expect(mql.addListener).to.have.been.calledOnce;
    expect(mql.removeListener).to.have.been.calledOnce;
  });

  it('renders top level print styles as CSS', () => {
    const matchMedia = sinon.spy(() => ({
      addListener: () => {},
      matches: true
    }));

    const ChildComponent = Radium(() => (
      <span style={{'@media print': {color: 'black'}}} />
    ));

    const TestComponent = Radium({matchMedia})(() => (
      <StyleRoot>
        <ChildComponent />
      </StyleRoot>
    ));

    const output = renderFcIntoDocument(<TestComponent />);

    const span = getElement(output, 'span');
    expect(span.className).to.not.be.empty;

    const style = getElement(output, 'style');
    expectCSS(
      style,
      `
      @media print{
        .${span.className}{
          color:black !important;
        }
      }
    `
    );
  });

  it("doesn't error on unmount", () => {
    const matchMedia = () => ({
      addListener: () => {},
      matches: true
    });

    const ChildComponent = Radium(() => (
      <span style={{'@media print': {color: 'black'}}} />
    ));

    const TestComponent = Radium({matchMedia})(() => (
      <StyleRoot>
        <ChildComponent />
      </StyleRoot>
    ));

    const output = renderFcIntoDocument(<TestComponent />);
    ReactDOM.unmountComponentAtNode(ReactDOM.findDOMNode(output).parentNode);
  });

  it('respects ordering', () => {
    // Use small values for media queries so they all pass.
    const ChildComponent = Radium(() => (
      <span
        style={[
          {
            '@media (min-width: 10px)': {background: 'green'},
            '@media (min-width: 20px)': {color: 'blue'}
          },
          {
            '@media (min-width: 10px)': {color: 'white'}
          }
        ]}
      />
    ));

    const TestComponent = Radium(() => (
      <StyleRoot>
        <ChildComponent />
      </StyleRoot>
    ));

    const root = document.createElement('div');
    document.body.appendChild(root);
    ReactDOM.render(<TestComponent />, root);
    const span = document.getElementsByTagName('span')[0];
    const computedStyle = window.getComputedStyle(span);

    expectColor(computedStyle.getPropertyValue('color'), 'white');
  });

  it("doesn't add className if no media styles", () => {
    const ChildComponent = Radium(() => <span style={{color: 'black'}} />);

    const TestComponent = Radium(() => (
      <StyleRoot>
        <ChildComponent />
      </StyleRoot>
    ));

    const output = renderFcIntoDocument(<TestComponent />);

    const span = getElement(output, 'span');
    expect(span.className).to.be.empty;
  });

  it('retains original className', () => {
    const ChildComponent = Radium(() => (
      <span className="original" style={{'@media print': {color: 'black'}}} />
    ));

    const TestComponent = Radium(() => (
      <StyleRoot>
        <ChildComponent />
      </StyleRoot>
    ));

    const output = renderFcIntoDocument(<TestComponent />);

    const span = getElement(output, 'span');
    expect(span.className).to.contain(' original');
  });

  it('throws without StyleRoot', () => {
    const ChildComponent = Radium(() => (
      <span style={{'@media (min-width: 10px)': {background: 'green'}}} />
    ));

    let error;

    class ErrorBoundary extends React.Component {
      componentDidCatch(e) {
        error = e;
      }

      render() {
        return this.props.children;
      }
    }

    const TestComponent = () => (
      <ErrorBoundary>
        <ChildComponent />
      </ErrorBoundary>
    );

    // React 16 - need to handle exceptions globally.
    // In DEV (aka our tests), need to silence global error handlers and such.
    // https://github.com/facebook/react/issues/10474#issuecomment-322909303
    window.onerror = sinon.stub();
    sandbox.stub(console, 'error');

    renderFcIntoDocument(<TestComponent />);

    expect(error.message).to.contain(
      'please wrap your application in the StyleRoot component'
    );
  });

  it("doesn't throw without StyleRoot when in test mode", () => {
    Radium.TestMode.enable();
    const TestComponent = Radium(() => (
      <div>
        <span style={{'@media (min-width: 10px)': {background: 'green'}}} />
      </div>
    ));
    expect(() => renderFcIntoDocument(<TestComponent />)).not.to.throw();
  });

  it("doesn't try to setState if not mounted", () => {
    sandbox.stub(console, 'error');
    sandbox.stub(console, 'warn');

    const addListener = sinon.spy();
    const mockMatchMedia = function() {
      return {
        matches: true,
        addListener: addListener,
        removeListener() {}
      };
    };

    @Radium({matchMedia: mockMatchMedia})
    class TestComponent extends Component {
      render() {
        return (
          <div
            style={{
              '@media (min-width: 600px)': {':hover': {color: 'blue'}}
            }}
          />
        );
      }
    }

    const output = renderFcIntoDocument(<TestComponent />);

    expect(addListener).to.have.been.called;

    ReactDOM.unmountComponentAtNode(ReactDOM.findDOMNode(output).parentNode);

    const listener = addListener.lastCall.args[0];
    listener(mockMatchMedia);

    expect(console.error).not.to.have.been.called; // eslint-disable-line no-console
    expect(console.warn).not.to.have.been.called; // eslint-disable-line no-console
  });
});


================================================
FILE: src/__tests__/radium-test.js
================================================
/* eslint-disable react/prop-types */

import Radium from 'index';
import React, {Component} from 'react';
import MouseUpListener from 'plugins/mouse-up-listener';
import PropTypes from 'prop-types';
import ReactDOM from 'react-dom';
import TestUtils from 'react-dom/test-utils';
import {getElement, getElements, renderFcIntoDocument} from 'test-helpers';

describe('Radium blackbox tests', () => {
  let sandbox;

  beforeEach(() => {
    sandbox = sinon.sandbox.create();
  });

  afterEach(() => {
    sandbox.restore();
  });

  it('merges styles', () => {
    @Radium
    class TestComponent extends Component {
      render() {
        return <div style={[{color: 'blue'}, {background: 'red'}]} />;
      }
    }

    const output = renderFcIntoDocument(<TestComponent />);
    const div = getElement(output, 'div');

    expect(div.style.color).to.equal('blue');
    expect(div.style.background).to.equal('red');
  });

  it('merges nested styles', () => {
    @Radium
    class TestComponent extends Component {
      render() {
        return (
          <div
            style={[
              [{color: 'blue'}, [{height: '2px', padding: '9px'}]],
              {background: 'red'}
            ]}
          />
        );
      }
    }

    const output = renderFcIntoDocument(<TestComponent />);
    const div = getElement(output, 'div');

    expect(div.style.color).to.equal('blue');
    expect(div.style.background).to.equal('red');
    expect(div.style.height).to.equal('2px');
    expect(div.style.padding).to.equal('9px');
  });

  it('merges nested styles in function components', () => {
    const TestComponent = Radium(() => (
      <div
        style={[
          [{color: 'blue'}, [{height: '2px', padding: '9px'}]],
          {background: 'red'}
        ]}
      />
    ));

    const output = renderFcIntoDocument(<TestComponent />);
    const div = getElement(output, 'div');

    expect(div.style.color).to.equal('blue');
    expect(div.style.background).to.equal('red');
    expect(div.style.height).to.equal('2px');
    expect(div.style.padding).to.equal('9px');
  });

  it('merges nested styles and forwards ref in function components with forwardRef', () => {
    const TestComponent = Radium(
      React.forwardRef((props, ref) => (
        <div
          ref={ref}
          style={[
            [{color: 'blue'}, [{height: '2px', padding: '9px'}]],
            {background: 'red'}
          ]}
        />
      ))
    );

    const testRef = React.createRef();
    const output = renderFcIntoDocument(<TestComponent ref={testRef} />);
    const div = getElement(output, 'div');

    expect(testRef.current).to.equal(div);
    expect(div.style.color).to.equal('blue');
    expect(div.style.background).to.equal('red');
    expect(div.style.height).to.equal('2px');
    expect(div.style.padding).to.equal('9px');
  });

  it('resolves styles on props', () => {
    class InnerComponent extends Component {
      render() {
        return this.props.header;
      }
    }

    @Radium
    class TestComponent extends Component {
      render() {
        return (
          <InnerComponent
            header={<div style={[{color: 'blue'}, {background: 'red'}]} />}
          />
        );
      }
    }

    const output = renderFcIntoDocument(<TestComponent />);
    const div = getElement(output, 'div');

    expect(div.style.color).to.equal('blue');
    expect(div.style.background).to.equal('red');
  });

  it('resolves styles on props', () => {
    class InnerComponent extends Component {
      render() {
        return this.props.stuff;
      }
    }

    @Radium
    class TestComponent extends Component {
      render() {
        return (
          <InnerComponent
            stuff={
              <div
                style={[
                  {color: 'blue'},
                  {background: 'red', ':active': {color: 'green'}}
                ]}
              />
            }
          />
        );
      }
    }

    const output = renderFcIntoDocument(<TestComponent />);

    const div = getElement(output, 'div');

    expect(div.style.color).to.equal('blue');
    expect(div.style.background).to.equal('red');

    TestUtils.Simulate.mouseDown(div);

    expect(div.style.color).to.equal('green');
  });

  it('resolves styles on functions', () => {
    class InnerComponent extends Component {
      render() {
        return this.props.children('arg');
      }
    }

    @Radium
    class TestComponent extends Component {
      render() {
        return (
          <InnerComponent>
            {arg => (
              <div
                style={[
                  {color: 'blue'},
                  {background: 'red', ':active': {color: 'green'}}
                ]}
              >
                {arg}
              </div>
            )}
          </InnerComponent>
        );
      }
    }

    const output = renderFcIntoDocument(<TestComponent />);

    const div = getElement(output, 'div');

    expect(div.style.color).to.equal('blue');
    expect(div.style.background).to.equal('red');
    expect(div.textContent).to.equal('arg');

    TestUtils.Simulate.mouseDown(div);

    expect(div.style.color).to.equal('green');
  });

  it('adds hover styles', () => {
    @Radium
    class TestComponent extends Component {
      render() {
        return (
          <div
            style={{
              background: 'red',
              color: 'blue',
              ':hover': {color: 'green'}
            }}
          />
        );
      }
    }

    const output = renderFcIntoDocument(<TestComponent />);

    const div = getElement(output, 'div');

    expect(div.style.color).to.equal('blue');
    expect(div.style.background).to.equal('red');

    TestUtils.SimulateNative.mouseOver(div);

    expect(div.style.color).to.equal('green');
  });

  it('adds active styles', () => {
    @Radium
    class TestComponent extends Component {
      render() {
        return (
          <div
            style={{
              background: 'red',
              color: 'blue',
              ':active': {color: 'green'}
            }}
          />
        );
      }
    }

    const output = renderFcIntoDocument(<TestComponent />);

    const div = getElement(output, 'div');

    expect(div.style.color).to.equal('blue');
    expect(div.style.background).to.equal('red');

    TestUtils.Simulate.mouseDown(div);

    expect(div.style.color).to.equal('green');
  });

  it('removes active styles on mouseup', () => {
    @Radium
    class TestComponent extends Component {
      render() {
        return (
          <div>
            <span
              key="a"
              style={{
                background: 'red',
                color: 'blue',
                ':active': {color: 'green'}
              }}
            />
            <button
              key="b"
              style={{
                background: 'red',
                color: 'blue',
                ':active': {color: 'green'}
              }}
            />
            <nav
              key="c"
              style={{
                background: 'red',
                color: 'blue',
                ':active': {color: 'green'}
              }}
            />
          </div>
        );
      }
    }

    const output = renderFcIntoDocument(<TestComponent />);

    const span = getElement(output, 'span');
    const button = getElement(output, 'button');
    const nav = getElement(output, 'nav');

    expect(span.style.color).to.equal('blue');
    expect(button.style.color).to.equal('blue');
    expect(nav.style.color).to.equal('blue');

    TestUtils.Simulate.mouseDown(span);
    expect(span.style.color).to.equal('green');
    MouseUpListener.__triggerForTests();
    expect(span.style.color).to.equal('blue');

    TestUtils.Simulate.mouseDown(button);
    expect(button.style.color).to.equal('green');
    MouseUpListener.__triggerForTests();
    expect(button.style.color).to.equal('blue');

    TestUtils.Simulate.mouseDown(nav);
    expect(nav.style.color).to.equal('green');
    MouseUpListener.__triggerForTests();
    expect(nav.style.color).to.equal('blue');
  });

  it('passes snapshot to the componentDidUpdate of the component, Issue #985', () => {
    const SNAPSHOT = 'SNAPSHOT';

    class SnapshotComp extends Component {
      componentDidMount() {
        this.forceUpdate();
      }

      getSnapshotBeforeUpdate() {
        return SNAPSHOT;
      }

      componentDidUpdate(props, state, snapshot) {
        expect(snapshot).to.equal(SNAPSHOT);
      }

      render() {
        return null;
      }
    }

    sinon.spy(SnapshotComp.prototype, 'componentDidUpdate');

    const TestComponent = Radium(SnapshotComp);

    renderFcIntoDocument(<TestComponent />);

    expect(SnapshotComp.prototype.componentDidUpdate).to.have.been.calledOnce;
  });

  it('resets state for unmounted components, Issue #524', () => {
    class TestComponent extends Component {
      state = {showSpan: true};
      render() {
        return (
          <div>
            <button onClick={() => this.setState({showSpan: true})} />
            {this.state.showSpan && (
              <span
                key="s"
                onClick={() => this.setState({showSpan: false})}
                style={{
                  color: 'blue',
                  ':hover': {color: 'red'}
                }}
              />
            )}
          </div>
        );
      }
    }
    const WrappedTestComponent = Radium(TestComponent);

    const output = renderFcIntoDocument(<WrappedTestComponent />);

    let spans = getElements(output, 'span');
    const button = getElement(output, 'button');
    expect(spans[0].style.color).to.equal('blue');

    TestUtils.Simulate.mouseEnter(spans[0]);
    expect(spans[0].style.color).to.equal('red');

    TestUtils.Simulate.click(spans[0]);
    spans = getElements(output, 'span');
    expect(spans).to.have.length(0);

    TestUtils.Simulate.click(button);
    spans = getElements(output, 'span');
    expect(spans)
      .to.have.length(1)
      .and.to.have.deep.property('[0].style.color', 'blue');
  });

  it('resolves styles on multiple elements nested far down, Issue #307', () => {
    @Radium
    class TestComponent extends Component {
      render() {
        return (
          <section>
            <section>
              <section>
                <header
                  key="header"
                  style={{
                    color: 'yellow',
                    ':hover': {color: 'blue'}
                  }}
                />
                <footer
                  key="footer"
                  style={{
                    color: 'green',
                    ':hover': {color: 'red'}
                  }}
                />
              </section>
            </section>
          </section>
        );
      }
    }

    const output = renderFcIntoDocument(<TestComponent />);

    const header = getElement(output, 'header');
    expect(header.style.color).to.equal('yellow');

    const footer = getElement(output, 'footer');
    expect(footer.style.color).to.equal('green');

    TestUtils.SimulateNative.mouseOver(header);
    TestUtils.SimulateNative.mouseOver(footer);

    expect(header.style.color).to.equal('blue');
    expect(footer.style.color).to.equal('red');
  });

  it('resolves styles if an element has element children', () => {
    @Radium
    class Inner extends Component {
      static propTypes = {children: PropTypes.node};
      render() {
        return (
          <div style={[{color: 'blue'}, {background: 'red'}]}>
            {this.props.children}
          </div>
        );
      }
    }

    @Radium
    class Outer extends Component {
      render() {
        return (
          <Inner>
            <span>We will break you.</span>
          </Inner>
        );
      }
    }

    const output = renderFcIntoDocument(<Outer />);

    const div = getElement(output, 'div');

    expect(div.style.color).to.equal('blue');
    expect(div.style.background).to.equal('red');
  });

  it('calls toString on object values', () => {
    @Radium
    class TestComponent extends Component {
      render() {
        return (
          <div
            style={{
              background: {toString: () => 'red'}
            }}
          />
        );
      }
    }

    const output = renderFcIntoDocument(<TestComponent />);
    const div = getElement(output, 'div');

    expect(div.style.background).to.equal('red');
  });

  it('accepts a config', () => {
    const truthyMatchMedia = function() {
      return {
        matches: true,
        addListener: function() {},
        removeListener: function() {}
      };
    };

    @Radium({
      matchMedia: truthyMatchMedia
    })
    class TestComponent extends Component {
      render() {
        return (
          <div
            style={{
              '@media (min-width: 600px)': {':hover': {color: 'blue'}}
            }}
          />
        );
      }
    }

    const output = renderFcIntoDocument(<TestComponent />);
    const div = getElement(output, 'div');
    TestUtils.SimulateNative.mouseOver(div);

    expect(div.style.color).to.equal('blue');
  });

  // this doesn't seem to actually work...
  // https://github.com/FormidableLabs/radium/issues/862#issuecomment-340953580
  xit('transforms fallback values', () => {
    @Radium()
    class TestComponent extends Component {
      render() {
        return (
          <div
            style={{
              height: ['100%', '100vh']
            }}
          />
        );
      }
    }

    const output = renderFcIntoDocument(<TestComponent />);
    const div = getElement(output, 'div');

    expect({...div.style}).to.include({
      height: '100%;height:100vh'
    });
  });

  it('adds active styles on space', () => {
    @Radium
    class TestComponent extends Component {
      render() {
        return (
          <div
            style={{
              background: 'red',
              color: 'blue',
              ':active': {color: 'green'}
            }}
          />
        );
      }
    }

    const output = renderFcIntoDocument(<TestComponent />);

    const div = getElement(output, 'div');

    expect(div.style.color).to.equal('blue');
    expect(div.style.background).to.equal('red');

    TestUtils.SimulateNative.keyDown(div, {key: ' '});

    expect(div.style.color).to.equal('green');

    TestUtils.SimulateNative.keyUp(div, {key: ' '});

    expect(div.style.color).to.equal('blue');
  });

  it('works with children as keyed object ala React Router', () => {
    @Radium
    class TestComponent extends Component {
      render() {
        return (
          <div>
            {this.props.children.nav}
            {this.props.children.main}
          </div>
        );
      }
    }

    const output = renderFcIntoDocument(
      <TestComponent>
        {{
          nav: <nav>nav</nav>,
          main: <main>main</main>
        }}
      </TestComponent>
    );

    const nav = getElement(output, 'nav');
    expect(nav.innerText).to.equal('nav');

    const main = getElement(output, 'main');
    expect(main.innerText).to.equal('main');
  });

  it('preserves array children as arrays', () => {
    @Radium
    class TestComponent extends Component {
      render() {
        expect(Array.isArray(this.props.children)).to.equal(true);
        return <div>{this.props.children}</div>;
      }
    }

    const output = renderFcIntoDocument(
      <TestComponent>
        {[<nav key="nav">nav</nav>, <main key="main">main</main>]}
      </TestComponent>
    );

    const nav = getElement(output, 'nav');
    expect(nav.innerText).to.equal('nav');

    const main = getElement(output, 'main');
    expect(main.innerText).to.equal('main');
  });

  it('calls existing onMouseEnter handler', () => {
    const handleMouseEnter = sinon.spy();

    @Radium
    class TestComponent extends Component {
      render() {
        return (
          <div
            onMouseEnter={handleMouseEnter}
            style={{':hover': {color: 'red'}}}
          />
        );
      }
    }

    const output = renderFcIntoDocument(<TestComponent />);
    const div = getElement(output, 'div');
    TestUtils.SimulateNative.mouseOver(div);

    expect(handleMouseEnter).to.have.been.called;
  });

  it('calls existing onMouseLeave handler', () => {
    const handleMouseLeave = sinon.spy();

    @Radium
    class TestComponent extends Component {
      render() {
        return (
          <div
            onMouseLeave={handleMouseLeave}
            style={{':hover': {color: 'red'}}}
          />
        );
      }
    }

    const output = renderFcIntoDocument(<TestComponent />);
    const div = getElement(output, 'div');
    TestUtils.SimulateNative.mouseOut(div);

    expect(handleMouseLeave).to.have.been.called;
  });

  it('calls existing onMouseDown handler', () => {
    const handleMouseDown = sinon.spy();

    @Radium
    class TestComponent extends Component {
      render() {
        return (
          <div
            onMouseDown={handleMouseDown}
            style={{':active': {color: 'red'}}}
          />
        );
      }
    }

    const output = renderFcIntoDocument(<TestComponent />);
    const div = getElement(output, 'div');
    TestUtils.SimulateNative.mouseDown(div);

    expect(handleMouseDown).to.have.been.called;
  });

  it('calls existing onFocus handler', () => {
    const handleFocus = sinon.spy();

    @Radium
    class TestComponent extends Component {
      render() {
        return (
          <input onFocus={handleFocus} style={{':focus': {color: 'red'}}} />
        );
      }
    }

    const output = renderFcIntoDocument(<TestComponent />);
    const input = getElement(output, 'input');
    TestUtils.SimulateNative.focus(input);

    expect(handleFocus).to.have.been.called;
  });

  it('calls existing onBlur handler', () => {
    const handleBlur = sinon.spy();

    @Radium
    class TestComponent extends Component {
      render() {
        return <input onBlur={handleBlur} style={{':focus': {color: 'red'}}} />;
      }
    }

    const output = renderFcIntoDocument(<TestComponent />);
    const input = getElement(output, 'input');
    TestUtils.SimulateNative.blur(input);

    expect(handleBlur).to.have.been.called;
  });

  it('ignores callback refs', () => {
    @Radium
    class TestComponent extends Component {
      render() {
        return (
          <div>
            <span key="a" ref={() => {}} style={{':hover': {color: 'red'}}} />
            <nav key="b" ref={() => {}} style={{':hover': {color: 'red'}}} />
          </div>
        );
      }
    }

    const output = renderFcIntoDocument(<TestComponent />);
    const span = getElement(output, 'span');
    const nav = getElement(output, 'nav');

    TestUtils.SimulateNative.mouseOver(span);
    expect(span.style.color).to.equal('red');
    expect(nav.style.color).to.equal('');

    TestUtils.SimulateNative.mouseOver(nav);
    expect(nav.style.color).to.equal('red');
  });

  describe('plugins', () => {
    it('runs a custom plugin', () => {
      const makeItRedPlugin = () => ({style: {color: 'red'}});

      @Radium
      class TestComponent extends Component {
        render() {
          return <div style={{}} />;
        }
      }

      const output = renderFcIntoDocument(
        <TestComponent radiumConfig={{plugins: [makeItRedPlugin]}} />
      );
      const div = getElement(output, 'div');

      expect(div.style.color).to.equal('red');
    });
  });

  /* eslint-disable no-console */
  it("doesn't try to setState if not mounted", () => {
    sandbox.stub(console, 'error');
    sandbox.stub(console, 'warn');

    let setStateCaptured;
    const plugin = function({setState}) {
      setStateCaptured = setState;
    };

    @Radium({plugins: [plugin]})
    class TestComponent extends Component {
      render() {
        return <div style={{color: 'blue'}} />;
      }
    }

    const output = renderFcIntoDocument(<TestComponent />);

    ReactDOM.unmountComponentAtNode(ReactDOM.findDOMNode(output).parentNode);

    setStateCaptured('whatever');

    expect(console.error).not.to.have.been.called;
    expect(console.warn).not.to.have.been.called;
  });
  /* eslint-enable no-console */

  it('works with stateless components', () => {
    let MyStatelessComponent = props => (
      <div style={{color: 'blue', ':hover': {color: 'red'}}}>
        {props.children}
      </div>
    );

    // Babel is forced to use regular functions when defining arrow functions.
    // Arrow functions should not technically have prototypes,
    // so remove it here to make sure Radium doesn't fail with real arrow functions.
    MyStatelessComponent.prototype = undefined;
    MyStatelessComponent = Radium(MyStatelessComponent);

    const output = renderFcIntoDocument(
      <MyStatelessComponent>hello world</MyStatelessComponent>
    );
    const div = getElement(output, 'div');

    expect(div.style.color).to.equal('blue');
    expect(div.innerText).to.equal('hello world');

    TestUtils.SimulateNative.mouseOver(div);

    expect(div.style.color).to.equal('red');
  });

  // Regression test: https://github.com/FormidableLabs/radium/issues/738
  it('works with arrow-based render methods in components', () => {
    class TestComponent extends Component {
      render = () => {
        return (
          <div style={{color: 'blue', ':hover': {color: 'red'}}}>
            {this.props.children}
          </div>
        );
      };
    }

    const Wrapped = Radium(TestComponent);
    const output = renderFcIntoDocument(<Wrapped>hello world</Wrapped>);

    // Check prototype is not mutated.
    expect(TestComponent.prototype).to.not.have.property('render');

    const div = getElement(output, 'div');

    expect(div.style.color).to.equal('blue');
    expect(div.innerText).to.equal('hello world');

    TestUtils.SimulateNative.mouseOver(div);

    expect(div.style.color).to.equal('red');
  });

  // Regression test: https://github.com/FormidableLabs/radium/issues/738
  it('works with arrow-based render methods in components with complex inheritence', () => {
    class First extends Component {}
    class Second extends First {}
    class TestComponent extends Second {
      render = () => {
        return (
          <div style={{color: 'blue', ':hover': {color: 'red'}}}>
            {this.props.children}
          </div>
        );
      };
    }

    const Wrapped = Radium(TestComponent);
    const output = renderFcIntoDocument(<Wrapped>hello world</Wrapped>);

    // Check prototypes are not mutated.
    expect(First.prototype).to.not.have.property('render');
    expect(Second.prototype).to.not.have.property('render');
    expect(TestComponent.prototype).to.not.have.property('render');

    const div = getElement(output, 'div');

    expect(div.style.color).to.equal('blue');
    expect(div.innerText).to.equal('hello world');

    TestUtils.SimulateNative.mouseOver(div);

    expect(div.style.color).to.equal('red');
  });

  // Regression test: https://github.com/FormidableLabs/radium/issues/950
  it('works with array children', () => {
    class TestComponent extends Component {
      render = () => {
        return [
          <div key="key0" style={{color: 'blue', ':hover': {color: 'red'}}}>
            {this.props.children}
          </div>,
          <div key="key1" style={{color: 'yellow', ':hover': {color: 'green'}}}>
            two
          </div>
        ];
      };
    }

    const Wrapped = Radium(TestComponent);
    const output = renderFcIntoDocument(<Wrapped>hello world</Wrapped>);

    const divs = getElements(output, 'div');

    expect(divs[0].style.color).to.equal('blue');
    expect(divs[0].getAttribute('data-radium')).to.equal('true');
    expect(divs[0].innerText).to.equal('hello world');
    TestUtils.SimulateNative.mouseOver(divs[0]);
    expect(divs[0].style.color).to.equal('red');

    expect(divs[1].style.color).to.equal('yellow');
    expect(divs[1].innerText).to.equal('two');
    TestUtils.SimulateNative.mouseOver(divs[1]);
    expect(divs[1].style.color).to.equal('green');
  });

  it('works with Fragments', () => {
    class TestComponent extends Component {
      render = () => {
        return (
          <React.Fragment>
            <div key="key0" style={{color: 'blue', ':hover': {color: 'red'}}}>
              {this.props.children}
            </div>
            <div
              key="key1"
              style={{color: 'yellow', ':hover': {color: 'green'}}}
            >
              two
            </div>
          </React.Fragment>
        );
      };
    }

    const Wrapped = Radium(TestComponent);
    const output = renderFcIntoDocument(<Wrapped>hello world</Wrapped>);

    const divs = getElements(output, 'div');

    expect(divs[0].style.color).to.equal('blue');
    expect(divs[0].getAttribute('data-radium')).to.equal('true');
    expect(divs[0].innerText).to.equal('hello world');
    TestUtils.SimulateNative.mouseOver(divs[0]);
    expect(divs[0].style.color).to.equal('red');

    expect(divs[1].style.color).to.equal('yellow');
    expect(divs[1].innerText).to.equal('two');
    TestUtils.SimulateNative.mouseOver(divs[1]);
    expect(divs[1].style.color).to.equal('green');
  });

  it('works fine if passing null, undefined, or false in style', () => {
    const TestComponent = Radium(() => (
      <div style={{background: undefined, border: false, color: null}} />
    ));
    const output = renderFcIntoDocument(<TestComponent />);
    const div = getElement(output, 'div');

    expect(div.style.background).to.equal('');
    expect(div.style.border).to.equal('');
    expect(div.style.color).to.equal('');
  });

  it('transfers defaultProps for stateless components', () => {
    const defaultProps = {foo: PropTypes.string};

    let MyStatelessComponent = () => <div />;
    MyStatelessComponent.defaultProps = defaultProps;
    MyStatelessComponent = Radium(MyStatelessComponent);

    expect(MyStatelessComponent.defaultProps).to.equal(defaultProps);
  });

  /* eslint-disable no-console */
  it('replaces style propType with array or object', () => {
    sandbox.stub(console, 'error');
    sandbox.stub(console, 'warn');

    class TestComponent extends Component {
      render() {
        return <div style={this.props.style} />;
      }
    }
    TestComponent.propTypes = {style: PropTypes.object};
    TestComponent = Radium(TestComponent);

    renderFcIntoDocument(<TestComponent style={[]} />);

    expect(console.error).not.to.have.been.called;
    expect(console.warn).not.to.have.been.called;
  });
  /* eslint-enable no-console */

  describe('config', () => {
    it('receives config from radiumConfig prop', () => {
      const plugin = sinon.spy();

      @Radium
      class TestComponent extends Component {
        render() {
          return <div style={{}} />;
        }
      }

      renderFcIntoDocument(
        <TestComponent radiumConfig={{plugins: [plugin]}} />
      );

      expect(plugin).to.have.been.called;
    });

    it('receives config from context', () => {
      const plugin = sinon.spy();

      @Radium
      class ParentComponent extends Component {
        render() {
          return (
            <div style={{}}>
              <ChildComponent />
            </div>
          );
        }
      }

      @Radium
      class ChildComponent extends Component {
        render() {
          return <div style={{}} />;
        }
      }

      renderFcIntoDocument(
        <ParentComponent radiumConfig={{plugins: [plugin]}} />
      );

      expect(plugin).to.have.callCount(2);
    });
  });

  describe('inline prefixes', () => {
    let TestComponent;

    beforeEach(() => {
      class Composed extends Component {
        render() {
          return React.createElement('div', {
            style: {
              color: 'red',
              display: 'flex'
            }
          });
        }
      }

      TestComponent = Composed;
    });

    // Regression test: https://github.com/FormidableLabs/radium/issues/958
    it('handles no user agent', () => {
      const userAgent = '';
      const Wrapped = Radium({userAgent})(TestComponent);
      const output = renderFcIntoDocument(<Wrapped />);
      const div = getElement(output, 'div');

      expect(div.style.color).to.equal('red');
      expect(div.style.display).to.equal('flex');
    });

    // Regression test: https://github.com/FormidableLabs/radium/issues/958s
    it('handles non-matching user agent', () => {
      const userAgent = 'testy-mctestface';
      const Wrapped = Radium({userAgent})(TestComponent);
      const output = renderFcIntoDocument(<Wrapped />);
      const div = getElement(output, 'div');

      expect(div.style.color).to.equal('red');
      expect(div.style.display).to.equal('flex');
    });

    it('handles matching user agent', () => {
      const iOSChrome47 =
        'Mozilla/5.0 (iPad; CPU OS 8_0_0 like Mac OS X) AppleWebKit/600.1.4 ' +
        '(KHTML, like Gecko) CriOS/47.0.2526.107 Mobile/12H321 Safari/600.1.4';
      const webkitFlex = '-webkit-flex';

      // Check if we _can_ even have the expected value. (Can't on IE9).
      class FlexCanary extends Component {
        render() {
          return React.createElement('div', {
            style: {
              display: webkitFlex
            }
          });
        }
      }
      const canary = renderFcIntoDocument(<FlexCanary />);
      const expectedDisplay = getElement(canary, 'div').style.display;

      const Wrapped = Radium({userAgent: iOSChrome47})(TestComponent);
      const output = renderFcIntoDocument(<Wrapped />);
      const div = getElement(output, 'div');

      expect(div.style.color).to.equal('red');
      expect(div.style.display).to.equal(expectedDisplay);
    });
  });
});


================================================
FILE: src/__tests__/remove-nested-styles-test.js
================================================
/* eslint-disable react/prop-types */

import Radium, {StyleRoot} from 'index';
import React from 'react';
import {getElement, renderFcIntoDocument} from 'test-helpers';

describe('removeNestedStyles plugin tests', () => {
  it('removes nested style objects', () => {
    const ChildComponent = Radium(() => (
      <span style={{color: 'red', foo: {color: 'blue'}}} />
    ));

    const TestComponent = Radium(() => (
      <StyleRoot>
        <ChildComponent />
      </StyleRoot>
    ));

    const output = renderFcIntoDocument(<TestComponent />);
    const span = getElement(output, 'span');
    expect(span.style.foo).to.not.exist;
  });

  it('should not remove style objects that have a toString function defined', () => {
    const styleObject = {color: 'blue'};
    styleObject.toString = () => 'bar';
    const ChildComponent = Radium(() => (
      <span style={{color: 'red', foo: styleObject}} />
    ));

    const TestComponent = Radium(() => (
      <StyleRoot>
        <ChildComponent />
      </StyleRoot>
    ));

    const output = renderFcIntoDocument(<TestComponent />);
    const span = getElement(output, 'span');
    expect(span.style.foo).to.equal('bar');
  });
});


================================================
FILE: src/__tests__/resolve-styles-test.js
================================================
import React from 'react';
import MouseUpListener from 'plugins/mouse-up-listener';
import objectAssign from 'object-assign';
const resolveStyles = require('inject-loader!resolve-styles')({
  exenv: require('__mocks__/exenv')
}).default;

const genComponent = function(initialState = {}) {
  return {
    setState: sinon.spy(function(newState) {
      objectAssign(this.state, newState);
    }),
    state: initialState,
    _radiumIsMounted: true
  };
};

// http://stackoverflow.com/a/25395068/13932
const permutate = function(arr) {
  const permutations = [];
  if (arr.length === 1) {
    return [arr];
  }

  for (let i = 0; i < arr.length; i++) {
    const subPerms = permutate(arr.slice(0, i).concat(arr.slice(i + 1)));
    for (let j = 0; j < subPerms.length; j++) {
      subPerms[j].unshift(arr[i]);
      permutations.push(subPerms[j]);
    }
  }

  return permutations;
};

const getChildrenArray = function(children) {
  const childrenArray = [];
  React.Children.forEach(children, function(child) {
    childrenArray.push(child);
  });
  return childrenArray;
};

describe('resolveStyles', () => {
  beforeEach(() => {
    MouseUpListener.subscribe = sinon.spy();
  });

  describe('no-op behavior', () => {
    it('handles null rendered element', () => {
      const component = genComponent();

      resolveStyles(component, null);
    });

    it("doesn't explode", () => {
      const component = genComponent();
      const renderedElement = <div />;

      const result = resolveStyles(component, renderedElement).element;

      expect(result).to.equal(renderedElement);
      expect(result.props).to.equal(renderedElement.props);
    });

    it('passes through normal style objects', () => {
      const component = genComponent();
      const renderedElement = <div style={{color: 'blue'}} />;

      const result = resolveStyles(component, renderedElement).element;

      expect(result.props.style).to.deep.equal(renderedElement.props.style);
    });

    it('passes through normal style objects of children', () => {
      const component = genComponent();
      const style = {color: 'blue'};
      const renderedElement = (
        <div>
          <div style={style} />
        </div>
      );

      const result = resolveStyles(component, renderedElement).element;
      const children = getChildrenArray(result.props.children);
      expect(children[0].props.style).to.deep.equal(style);
    });

    it("doesn't wrap string children in spans", () => {
      const component = genComponent();
      const renderedElement = <div>Hello</div>;

      const result = resolveStyles(component, renderedElement).element;
      expect(result.props.children).to.equal('Hello');
    });

    it("doesn't wrap number children in spans", () => {
      const component = genComponent();
      const renderedElement = <div>{88347}</div>;

      const result = resolveStyles(component, renderedElement).element;
      expect(result.props.children).to.equal(88347);
    });

    it('ignores invalid children', () => {
      const component = genComponent();

      // JSX won't let this through, so do it with a plain object instead
      const renderedElement = {
        props: {
          children: [null]
        }
      };

      const result = resolveStyles(component, renderedElement).element;
      const children = getChildrenArray(result.props.children);

      expect(children[0]).to.be.undefined;
    });

    it('only processes an element once', () => {
      sinon.spy(React, 'cloneElement');

      const component = genComponent();
      const renderedElement = (
        <div style={[{background: 'white'}, {color: 'blue'}]} />
      );

      let result = resolveStyles(component, renderedElement).element;
      result = resolveStyles(component, result).element;

      expect(result.props.style).to.deep.equal({
        background: 'white',
        color: 'blue'
      });

      expect(React.cloneElement).to.have.been.calledOnce;

      React.cloneElement.restore();
    });
  });

  describe('style array', () => {
    it('merges an array of style objects', () => {
      const component = genComponent();
      const renderedElement = (
        <div style={[{background: 'white'}, {color: 'blue'}]} />
      );

      const result = resolveStyles(component, renderedElement).element;

      expect(result.props.style).to.deep.equal({
        background: 'white',
        color: 'blue'
      });
    });

    it('skips falsy and non-object entries', () => {
      const component = genComponent();
      const renderedElement = (
        <div
          style={[
            {background: 'white'},
            false,
            null,
            ''.someUndefinedVar,
            '',
            [1, 2, 3],
            {color: 'blue'}
          ]}
        />
      );

      const result = resolveStyles(component, renderedElement).element;

      expect(result.props.style).to.deep.equal({
        background: 'white',
        color: 'blue'
      });
    });

    it('overwrites earlier styles with later ones', () => {
      const component = genComponent();
      const renderedElement = (
        <div style={[{background: 'white'}, {background: 'blue'}]} />
      );

      const result = resolveStyles(component, renderedElement).element;

      expect(result.props.style).to.deep.equal({
        background: 'blue'
      });
    });

    it('merges nested special styles', () => {
      const component = genComponent();
      const renderedElement = (
        <div
          style={[
            {':hover': {background: 'white'}},
            {':hover': {color: 'blue'}}
          ]}
        />
      );

      let result = resolveStyles(component, renderedElement).element;
      result.props.onMouseEnter();
      result = resolveStyles(component, renderedElement).element;

      expect(result.props.style).to.deep.equal({
        background: 'white',
        color: 'blue'
      });
    });
  });

  const createPseduoStyleTests = function(
    pseudo,
    onHandlerName,
    offHandlerName
  ) {
    it('strips special styles if not applied', () => {
      const component = genComponent();
      const style = {background: 'blue'};
      style[':' + pseudo] = {background: 'red'};
      const renderedElement = <div style={style} />;

      const result = resolveStyles(component, renderedElement).element;

      expect(result.props.style).to.deep.equal({background: 'blue'});
    });

    it('adds appropriate handlers for ' + pseudo + ' styles', () => {
      const component = genComponent();
      const style = {background: 'blue'};
      style[':' + pseudo] = {background: 'red'};
      const renderedElement = <div style={style} />;

      const result = resolveStyles(component, renderedElement).element;

      expect(typeof result.props[onHandlerName]).to.equal('function');
      if (offHandlerName) {
        expect(typeof result.props[offHandlerName]).to.equal('function');
      }
    });

    it('adds ' + pseudo + ' styles ' + onHandlerName, () => {
      const component = genComponent();
      const style = {background: 'blue'};
      style[':' + pseudo] = {background: 'red'};
      const renderedElement = <div style={style} />;

      let result = resolveStyles(component, renderedElement).element;
      expect(result.props.style.background).to.equal('blue');

      result.props[onHandlerName]();

      expect(component.setState).to.have.been.called;

      // Must create a new renderedElement each time, same as React, since
      // resolveStyles mutates
      result = resolveStyles(component, renderedElement).element;
      expect(result.props.style.background).to.equal('red');
    });

    it('throws if multiple elements have the same key', () => {
      const component = genComponent();
      const style = {background: 'blue'};
      style[':' + pseudo] = {background: 'red'};

      // Use ref instead of key here because React.Children.map will discard
      // the duplicate keyed element.
      const renderedElement = (
        <div>
          <div ref="foo" style={style} />
          <div ref="foo" style={style} />
        </div>
      );

      expect(() => {
        resolveStyles(component, renderedElement);
      }).to.throw();
    });

    it('throws if multiple elements have no key', () => {
      const component = genComponent();
      const style = {background: 'blue'};
      style[':' + pseudo] = {background: 'red'};

      const renderedElement = (
        <div>
          <div style={style} />
          <div style={style} />
        </div>
      );

      expect(() => {
        resolveStyles(component, renderedElement);
      }).to.throw();
    });

    it('adds ' + pseudo + ' styles to correct element by key', () => {
      const component = genComponent();
      const style = {background: 'blue'};
      style[':' + pseudo] = {background: 'red'};

      const renderedElement = (
        <div>
          <div key="foo" />
          <div key="bar" style={style} />
        </div>
      );

      let result = resolveStyles(component, renderedElement).element;
      let children = getChildrenArray(result.props.children);
      expect(children[0].props.style).to.be.undefined;
      expect(children[1].props.style.background).to.equal('blue');

      children[1].props[onHandlerName]();

      result = resolveStyles(component, renderedElement).element;
      children = getChildrenArray(result.props.children);
      expect(children[0].props.style).to.be.undefined;
      expect(children[1].props.style.background).to.equal('red');
    });

    it('adds ' + pseudo + ' styles to correct element by ref', () => {
      const component = genComponent();
      const style = {background: 'blue'};
      style[':' + pseudo] = {background: 'red'};

      const renderedElement = (
        <div>
          <div ref="foo" />
          <div ref="bar" style={style} />
        </div>
      );

      let result = resolveStyles(component, renderedElement).element;
      let children = getChildrenArray(result.props.children);
      expect(children[0].props.style).to.be.undefined;
      expect(children[1].props.style.background).to.equal('blue');

      children[1].props[onHandlerName]();

      result = resolveStyles(component, renderedElement).element;
      children = getChildrenArray(result.props.children);
      expect(children[0].props.style).to.be.undefined;
      expect(children[1].props.style.background).to.equal('red');
    });

    if (offHandlerName) {
      it('removes ' + pseudo + ' styles ' + offHandlerName, () => {
        const component = genComponent();
        const style = {background: 'blue'};
        style[':' + pseudo] = {background: 'red'};
        const renderedElement = <div style={style} />;

        let result = resolveStyles(component, renderedElement).element;

        result.props[onHandlerName]();

        result = resolveStyles(component, renderedElement).element;
        expect(result.props.style.background).to.equal('red');

        result.props[offHandlerName]();

        expect(component.setState).to.have.been.called;

        result = resolveStyles(component, renderedElement).element;
        expect(result.props.style.background).to.equal('blue');
      });

      it("doesn't mutate state", () => {
        const component = genComponent();
        const style = {background: 'blue'};
        style[':' + pseudo] = {background: 'red'};
        const renderedElement = <div style={style} />;

        let result = resolveStyles(component, renderedElement).element;

        // Capturing a reference to the existing state is enough, since Radium
        // MUST return a new copy for shouldComponentUpdate.
        let previousState = component.state._radiumStyleState;
        result.props[onHandlerName]();
        // If they are still equal here, that means we mutated the existing
        // state, which will break shouldComponentUpdate.
        expect(component.state._radiumStyleState).not.to.equal(previousState);

        result = resolveStyles(component, renderedElement).element;

        previousState = component.state._radiumStyleState;
        result.props[offHandlerName]();
        expect(component.state._radiumStyleState).not.to.equal(previousState);
      });
    }
  };

  describe(':hover', () => {
    createPseduoStyleTests('hover', 'onMouseEnter', 'onMouseLeave');
  });

  describe(':focus', () => {
    createPseduoStyleTests('focus', 'onFocus', 'onBlur');
  });

  describe(':active', () => {
    createPseduoStyleTests('active', 'onMouseDown');

    it('subscribes to mouse up listener', () => {
      const component = genComponent();
      const renderedElement = <div style={{':active': {background: 'red'}}} />;

      resolveStyles(component, renderedElement);

      expect(MouseUpListener.subscribe).to.have.been.called;
    });

    it('adds active styles on mouse down', () => {
      const component = genComponent();
      const style = {
        background: 'blue',
        ':active': {background: 'red'}
      };
      const renderedElement = <div style={style} />;

      let result = resolveStyles(component, renderedElement).element;
      expect(result.props.style.background).to.equal('blue');

      result.props.onMouseDown();

      result = resolveStyles(component, renderedElement).element;
      expect(result.props.style.background).to.equal('red');
    });

    it('removes active styles on mouse up', () => {
      const component = genComponent();
      const style = {
        background: 'blue',
        ':active': {background: 'red'}
      };
      const renderedElement = <div style={style} />;

      let result = resolveStyles(component, renderedElement).element;

      result.props.onMouseDown();

      result = resolveStyles(component, renderedElement).element;
      expect(result.props.style.background).to.equal('red');

      // tigger global mouseup handler
      MouseUpListener.subscribe.firstCall.args[0]();

      result = resolveStyles(component, renderedElement).element;
      expect(result.props.style.background).to.equal('blue');
    });

    it('ignores mouse up if no active styles', () => {
      const component = genComponent();
      const style = {
        background: 'blue',
        ':active': {background: 'red'}
      };
      const renderedElement = <div style={style} />;

      let result = resolveStyles(component, renderedElement).element;

      result.props.onMouseDown();

      // tigger global mouseup handler
      MouseUpListener.subscribe.firstCall.args[0]();
      MouseUpListener.subscribe.firstCall.args[0]();

      result = resolveStyles(component, renderedElement).element;
      expect(result.props.style.background).to.equal('blue');
    });

    it('calls existing onMouseDown handler', () => {
      const component = genComponent();
      const style = {
        background: 'blue',
        ':active': {background: 'red'}
      };
      const originalOnMouseDown = sinon.spy();
      const renderedElement = (
        <div onMouseDown={originalOnMouseDown} style={style} />
      );

      let result = resolveStyles(component, renderedElement).element;

      result.props.onMouseDown();

      expect(originalOnMouseDown).to.have.been.called;

      result = resolveStyles(component, renderedElement).element;
      expect(result.props.style.background).to.equal('red');
    });
  });

  describe('multiple states triggered at once', () => {
    describe('applies pseudo styles in the defined order', () => {
      const component = genComponent();
      const stylePermutations = permutate([
        {name: ':active', style: {background: 'red'}},
        {name: ':focus', style: {background: 'yellow'}},
        {name: ':hover', style: {background: 'blue'}}
      ]);
      const onHandlerPermutations = permutate([
        'onFocus',
        'onMouseDown',
        'onMouseEnter'
      ]);

      const createMultiPseudoTest = function(pseudoStyles, onHandlers) {
        const name =
          'applies pseudo styles in the defined order: ' +
          pseudoStyles.map(pseudo => pseudo.name).join(', ') +
          ' when handlers called in order: ' +
          onHandlers.join(', ');
        it(name, () => {
          const style = {};
          pseudoStyles.forEach(pseudo => {
            style[pseudo.name] = pseudo.style;
          });
          const renderedElement = <div style={style} />;

          let result = resolveStyles(component, renderedElement).element;

          onHandlers.forEach(onHandler => {
            result.props[onHandler]();
          });

          result = resolveStyles(component, renderedElement).element;

          expect(result.props.style.background).to.equal(
            pseudoStyles[pseudoStyles.length - 1].style.background
          );
        });
      };

      stylePermutations.forEach(pseudoStyles => {
        onHandlerPermutations.forEach(onHandlers => {
          createMultiPseudoTest(pseudoStyles, onHandlers);
        });
      });
    });
  });

  describe('when elements are unmounted', () => {
    it('returns an extraStateKeyMap with keys of unmounted elements', () => {
      const initialState = {
        _radiumStyleState: {
          mountedDiv: {},
          unmountedDiv: {}
        }
      };
      const component = genComponent(initialState);
      const renderedElement = (
        <div>
          <div ref="mountedDiv" />
        </div>
      );

      const result = resolveStyles(component, renderedElement).extraStateKeyMap;

      expect(result).to.deep.equal({unmountedDiv: true});
    });
  });

  describe('React.Children.only', () => {
    it("doesn't break React.Children.only", () => {
      const component = genComponent();
      const renderedElement = (
        <div>
          <span />
        </div>
      );

      const result = resolveStyles(component, renderedElement).element;

      expect(React.Children.only(result.props.children)).to.be.ok;
    });

    it("doesn't break when only child isn't ReactElement", () => {
      const component = genComponent();
      const renderedElement = <div>Foo</div>;

      resolveStyles(component, renderedElement);
    });
  });

  describe('ReactComponentElement children', () => {
    it("doesn't resolve ReactComponentElement children", () => {
      const component = genComponent();
      class CustomComponent extends React.Component {}
      const style = {':hover': {}};
      const renderedElement = (
        <div>
          <CustomComponent style={style} />
        </div>
      );

      const result = resolveStyles(component, renderedElement).element;
      const children = getChildrenArray(result.props.children);
      expect(children[0].props.style).to.deep.equal(style);
    });

    it('resolves ReactDOMElement children of ReactComponentElements', () => {
      const component = genComponent();
      class CustomComponent extends React.Component {}
      const style = [{background: 'white'}, {color: 'blue'}];
      const renderedElement = (
        <div style={style}>
          <CustomComponent style={style}>
            <div style={style} />
          </CustomComponent>
        </div>
      );

      const result = resolveStyles(component, renderedElement).element;
      expect(result.props.style).to.deep.equal({
        background: 'white',
        color: 'blue'
      });

      const children = getChildrenArray(result.props.children);
      expect(children[0].props.style).to.deep.equal(style);

      const componentChildren = getChildrenArray(children[0].props.children);
      expect(componentChildren[0].props.style).to.deep.equal({
        background: 'white',
        color: 'blue'
      });
    });
  });

  describe('disabled', () => {
    it('discards interaction styles if element is disabled', () => {
      const component = genComponent();
      const style = {background: 'blue'};
      style[':hover'] = {background: 'red'};

      const renderedElement = (
        <div>
          <div ref="foo" />
          <div disabled ref="bar" style={style} />
        </div>
      );

      let result = resolveStyles(component, renderedElement).element;
      let children = getChildrenArray(result.props.children);
      expect(children[0].props.style).to.be.undefined;
      expect(children[1].props.style.background).to.equal('blue');

      children[1].props.onMouseEnter();

      result = resolveStyles(component, renderedElement).element;
      children = getChildrenArray(result.props.children);
      expect(children[0].props.style).to.be.undefined;
      expect(children[1].props.style.background).to.equal('blue');
    });

    it('styles according to :disabled style if element is disabled', () => {
      const component = genComponent();
      const style = {background: 'blue'};
      style[':hover'] = {background: 'red'};
      style[':disabled'] = {background: 'yellow'};

      const renderedElement = (
        <div>
          <div ref="foo" />
          <div disabled ref="bar" style={style} />
        </div>
      );

      let result = resolveStyles(component, renderedElement).element;
      let children = getChildrenArray(result.props.children);
      expect(children[0].props.style).to.be.undefined;
      expect(children[1].props.style.background).to.equal('yellow');

      children[1].props.onMouseEnter();

      result = resolveStyles(component, renderedElement).element;
      children = getChildrenArray(result.props.children);
      expect(children[0].props.style).to.be.undefined;
      expect(children[1].props.style.background).to.equal('yellow');
    });
  });

  /* eslint-disable no-console */
  describe('warnings', () => {
    beforeEach(() => {
      sinon.stub(console, 'warn');
    });

    afterEach(() => {
      console.warn.restore();
      process.env.NODE_ENV = null;
    });

    it('warns when mixing longhand and shorthand properties', () => {
      const component = genComponent();
      const renderedElement = (
        <div
          style={{
            border: '1px solid black',
            borderWidth: '0 1px 1px 1px'
          }}
        />
      );

      resolveStyles(component, renderedElement);

      expect(console.warn).to.have.been.called;
      expect(
        console.warn.firstCall.args[0].indexOf('border')
      ).to.be.greaterThan(0);
    });

    it('warns when mixing longhand and shorthand properties in nested styles', () => {
      const component = genComponent();
      const renderedElement = (
        <div
          style={{
            ':hover': {
              border: '1px solid black',
              borderWidth: '0 1px 1px 1px'
            }
          }}
        />
      );

      resolveStyles(component, renderedElement);

      expect(console.warn).to.have.been.called;
      expect(
        console.warn.firstCall.args[0].indexOf('border')
      ).to.be.greaterThan(0);
    });

    it('does not warn when mixing border and borderRadius', () => {
      const component = genComponent();
      const renderedElement = (
        <div
          style={{
            border: '1px solid black',
            borderRadius: '5px'
          }}
        />
      );

      resolveStyles(component, renderedElement);

      expect(console.warn).to.not.have.been.called;
    });

    it('does not throw when passed a falsy entry value', () => {
      const component = genComponent();
      const renderedElement = <div style={{height: null}} />;

      expect(() => {
        resolveStyles(component, renderedElement);
      }).to.not.throw();
    });
  });
  /* eslint-enable no-console */
});


================================================
FILE: src/__tests__/style-component-test.js
================================================
/* eslint-disable react/prop-types */

import {Style} from 'index';
import React from 'react';
import {expectCSS, getElement, renderFcIntoDocument} from 'test-helpers';
const MSIE9_USER_AGENT =
  'Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 7.1; Trident/5.0)';

describe('<Style> component', () => {
  it("adds px suffix to properties that don't accept unitless values", () => {
    const output = renderFcIntoDocument(<Style rules={{div: {height: 10}}} />);

    const style = getElement(output, 'style');
    expectCSS(
      style,
      `
      div {
        height: 10px;
      }
    `
    );
  });

  it("doesn't add px suffix to properties that accept unitless values", () => {
    const output = renderFcIntoDocument(<Style rules={{div: {zIndex: 10}}} />);

    const style = getElement(output, 'style');
    expectCSS(
      style,
      `
      div {
        z-index: 10;
      }
    `
    );
  });

  it('can be configured standalone', () => {
    const output = renderFcIntoDocument(
      <Style
        radiumConfig={{userAgent: MSIE9_USER_AGENT}}
        rules={{div: {transform: 'rotate(90)'}}}
      />
    );

    const style = getElement(output, 'style');
    expectCSS(
      style,
      `
      div {
        -ms-transform: rotate(90);
      }
    `
    );
  });

  it('add all the prefixes when we ask for', () => {
    const output = renderFcIntoDocument(
      <Style
        radiumConfig={{userAgent: 'all'}}
        rules={{div: {transform: 'rotate(90)'}}}
      />
    );

    const style = getElement(output, 'style');
    expectCSS(
      style,
      `
      div{
        -webkit-transform:rotate(90);
        -ms-transform:rotate(90);
        transform:rotate(90);
      }
    `
    );
  });

  it('adds scopeSelector to each selector', () => {
    const output = renderFcIntoDocument(
      <Style
        rules={{
          div: {color: 'red'},
          span: {color: 'blue'}
        }}
        scopeSelector=".scope"
      />
    );

    const style = getElement(output, 'style');
    expectCSS(
      style,
      `
      .scope div {
        color: red;
      }
      .scope span {
        color: blue;
      }
    `
    );
  });

  it('adds scopeSelector to multiple selectors in a single ruleset', () => {
    const output = renderFcIntoDocument(
      <Style rules={{'div, span': {color: 'red'}}} scopeSelector=".scope" />
    );

    const style = getElement(output, 'style');
    expectCSS(
      style,
      `
      .scope div, .scope span {
        color: red;
      }
    `
    );
  });

  it('adds scopeSelector if no selectors are present', () => {
    const output = renderFcIntoDocument(
      <Style
        rules={{
          color: 'red',
          backgroundColor: 'white',
          div: {
            color: 'blue',
            backgroundColor: 'black'
          }
        }}
        scopeSelector=".scope"
      />
    );

    const style = getElement(output, 'style');
    expectCSS(
      style,
      `
      .scope {
        color: red;
        background-color: white;
      }
      .scope div {
        color: blue;
        background-color: black;
      }
    `
    );
  });
});


================================================
FILE: src/__tests__/visited-test.js
================================================
/* eslint-disable react/prop-types */

import Radium, {StyleRoot} from 'index';
import React from 'react';
import {expectCSS, getElement, renderFcIntoDocument} from 'test-helpers';

describe('visited plugin tests', () => {
  it('renders visited styles as css', () => {
    const ChildComponent = Radium(() => (
      <span style={{':visited': {color: 'purple'}}} />
    ));

    const TestComponent = Radium(() => (
      <StyleRoot>
        <ChildComponent />
      </StyleRoot>
    ));

    const output = renderFcIntoDocument(<TestComponent />);

    const span = getElement(output, 'span');
    expect(span.className).to.not.be.empty;

    const style = getElement(output, 'style');
    expectCSS(
      style,
      `
      .${span.className}:visited {
        color: purple !important;
      }
    `
    );
  });

  it('retains original className', () => {
    const ChildComponent = Radium(() => (
      <span className="original" style={{':visited': {color: 'purple'}}} />
    ));

    const TestComponent = Radium(() => (
      <StyleRoot>
        <ChildComponent />
      </StyleRoot>
    ));

    const output = renderFcIntoDocument(<TestComponent />);

    const span = getElement(output, 'span');
    expect(span.className).to.contain('original ');
  });
});


================================================
FILE: src/append-important-to-each-value.js
================================================
/* @flow */

import appendPxIfNeeded from './append-px-if-needed';
import mapObject from './map-object';

export default function appendImportantToEachValue(style: Object): Object {
  return mapObject(
    style,
    (result, key) => appendPxIfNeeded(key, style[key]) + ' !important'
  );
}


================================================
FILE: src/append-px-if-needed.js
================================================
/* @flow */

// Copied from https://github.com/facebook/react/blob/
// b87aabdfe1b7461e7331abb3601d9e6bb27544bc/
// packages/react-dom/src/shared/CSSProperty.js
const isUnitlessNumber = {
  animationIterationCount: true,
  borderImageOutset: true,
  borderImageSlice: true,
  borderImageWidth: true,
  boxFlex: true,
  boxFlexGroup: true,
  boxOrdinalGroup: true,
  columnCount: true,
  columns: true,
  flex: true,
  flexGrow: true,
  flexPositive: true,
  flexShrink: true,
  flexNegative: true,
  flexOrder: true,
  gridArea: true,
  gridRow: true,
  gridRowEnd: true,
  gridRowSpan: true,
  gridRowStart: true,
  gridColumn: true,
  gridColumnEnd: true,
  gridColumnSpan: true,
  gridColumnStart: true,
  fontWeight: true,
  lineClamp: true,
  lineHeight: true,
  opacity: true,
  order: true,
  orphans: true,
  tabSize: true,
  widows: true,
  zIndex: true,
  zoom: true,

  // SVG-related properties
  fillOpacity: true,
  floodOpacity: true,
  stopOpacity: true,
  strokeDasharray: true,
  strokeDashoffset: true,
  strokeMiterlimit: true,
  strokeOpacity: true,
  strokeWidth: true
};

export default function appendPxIfNeeded(
  propertyName: string,
  value: any
): string {
  const needsPxSuffix =
    !isUnitlessNumber[propertyName] && typeof value === 'number' && value !== 0;
  return needsPxSuffix ? value + 'px' : value;
}


================================================
FILE: src/camel-case-props-to-dash-case.js
================================================
/* @flow */

const _camelCaseRegex = /([a-z])?([A-Z])/g;

const _camelCaseReplacer = function(match, p1, p2) {
  return (p1 || '') + '-' + p2.toLowerCase();
};

export const camelCaseToDashCase = function(s: string): string {
  return s.replace(_camelCaseRegex, _camelCaseReplacer);
};

const camelCasePropsToDashCase = function(prefixedStyle: Object): Object {
  // Since prefix is expected to work on inline style objects, we must
  // translate the keys to dash case for rendering to CSS.
  return Object.keys(prefixedStyle).reduce((result, key) => {
    let dashCaseKey = camelCaseToDashCase(key);

    // Fix IE vendor prefix
    if (/^ms-/.test(dashCaseKey)) {
      dashCaseKey = `-${dashCaseKey}`;
    }

    result[dashCaseKey] = prefixedStyle[key];
    return result;
  }, {});
};

export default camelCasePropsToDashCase;


================================================
FILE: src/clean-state-key.js
================================================
/* flow */

const cleanStateKey = key => {
  return key === null || typeof key === 'undefined' ? 'main' : key.toString();
};

export default cleanStateKey;


================================================
FILE: src/components/style-root.js
================================================
/* @flow */

import React, {useContext, useRef} from 'react';
import type {Node} from 'react';

import Enhancer from '../enhancer';
import StyleKeeper from '../style-keeper';
import StyleSheet from './style-sheet';
import type {Config} from '../config';
import {StyleKeeperContext, RadiumConfigContext} from '../context';

function getStyleKeeper(
  configProp: Config,
  configContext?: Config
): StyleKeeper {
  const userAgent =
    (configProp && configProp.userAgent) ||
    (configContext && configContext.userAgent);

  return new StyleKeeper(userAgent);
}

type StyleRootProps = {
  radiumConfig: Config,
  children: Node
};

const StyleRootInner = Enhancer(({children, ...otherProps}: StyleRootProps) => (
  <div {...otherProps}>
    {children}
    <StyleSheet />
  </div>
));

const StyleRoot = (props: StyleRootProps) => {
  /* eslint-disable no-unused-vars */
  // Pass down all props except config to the rendered div.
  /* eslint-enable no-unused-vars */
  const {radiumConfig} = props;

  const configContext = useContext(RadiumConfigContext);
  const styleKeeper = useRef<StyleKeeper>(
    getStyleKeeper(radiumConfig, configContext)
  );

  return (
    <StyleKeeperContext.Provider value={styleKeeper.current}>
      <StyleRootInner {...props} />
    </StyleKeeperContext.Provider>
  );
};

export default StyleRoot;


================================================
FILE: src/components/style-sheet.js
================================================
/* @flow */

import React, {Component} from 'react';

import StyleKeeper from '../style-keeper';
import {withRadiumContexts, type WithRadiumContextsProps} from '../context';

class StyleSheet extends Component<WithRadiumContextsProps> {
  // eslint-disable-next-line react/sort-comp
  styleKeeper: StyleKeeper;

  constructor() {
    super(...arguments);

    if (!this.props.styleKeeperContext) {
      throw new Error('StyleRoot is required to use StyleSheet');
    }

    this.styleKeeper = this.props.styleKeeperContext;
    this._css = this.styleKeeper.getCSS();
  }

  componentDidMount() {
    this._subscription = this.styleKeeper.subscribe(this._onChange);
    this._onChange();
  }

  shouldComponentUpdate() {
    return false;
  }

  componentWillUnmount() {
    if (this._subscription) {
      this._subscription.remove();
    }
  }

  _subscription: ?{remove: () => void};
  _root: ?HTMLElement;
  _css: string;

  _onChange = () => {
    const nextCSS = this.styleKeeper.getCSS();

    if (nextCSS !== this._css) {
      if (this._root) {
        this._root.innerHTML = nextCSS;
      } else {
        throw new Error(
          'No root style object found, even after StyleSheet mount.'
        );
      }
      this._css = nextCSS;
    }
  };

  render() {
    return (
      <style
        dangerouslySetInnerHTML={{__html: this._css}}
        ref={c => {
          this._root = c;
        }}
      />
    );
  }
}

export default withRadiumContexts(StyleSheet);


================================================
FILE: src/components/style.js
================================================
/* @flow */

import cssRuleSetToString from '../css-rule-set-to-string';

import React, {type Node, PureComponent} from 'react';
import PropTypes from 'prop-types';
import type {Config} from '../config';
import {withRadiumContexts} from '../context';

type StyleProps = {
  radiumConfig: Config,
  radiumConfigContext?: Config,
  rules: {},
  scopeSelector: string
};

class Style extends PureComponent<StyleProps> {
  static propTypes = {
    radiumConfig: PropTypes.object,
    rules: PropTypes.object,
    scopeSelector: PropTypes.string
  };

  static defaultProps: {scopeSelector: string} = {
    scopeSelector: ''
  };

  _buildStyles(styles: Object): string {
    const userAgent =
      (this.props.radiumConfig && this.props.radiumConfig.userAgent) ||
      (this.props.radiumConfigContext &&
        this.props.radiumConfigContext.userAgent);

    const {scopeSelector} = this.props;
    const rootRules = Object.keys(styles).reduce((accumulator, selector) => {
      if (typeof styles[selector] !== 'object') {
        accumulator[selector] = styles[selector];
      }

      return accumulator;
    }, {});
    const rootStyles = Object.keys(rootRules).length
      ? cssRuleSetToString(scopeSelector || '', rootRules, userAgent)
      : '';

    return (
      rootStyles +
      Object.keys(styles).reduce((accumulator, selector) => {
        const rules = styles[selector];

        if (selector === 'mediaQueries') {
          accumulator += this._buildMediaQueryString(rules);
        } else if (typeof styles[selector] === 'object') {
          const completeSelector = scopeSelector
            ? selector
                .split(',')
                .map(part => scopeSelector + ' ' + part.trim())
                .join(',')
            : selector;

          accumulator += cssRuleSetToString(completeSelector, rules, userAgent);
        }

        return accumulator;
      }, '')
    );
  }

  _buildMediaQueryString(stylesByMediaQuery: {
    [mediaQuery: string]: Object
  }): string {
    let mediaQueryString = '';

    Object.keys(stylesByMediaQuery).forEach(query => {
      mediaQueryString +=
        '@media ' +
        query +
        '{' +
        this._buildStyles(stylesByMediaQuery[query]) +
        '}';
    });

    return mediaQueryString;
  }

  render(): Node {
    if (!this.props.rules) {
      return null;
    }

    const styles = this._buildStyles(this.props.rules);

    return <style dangerouslySetInnerHTML={{__html: styles}} />;
  }
}

export default withRadiumContexts(Style);


================================================
FILE: src/config.js
================================================
/** @flow */
/* eslint-disable no-use-before-define, block-scoped-const */

import type {PluginConfig, PluginResult} from './plugins';

type MediaQueryListListener = (mql: MediaQueryList) => void;

type MediaQueryList = {
  matches: boolean,
  addListener(listener: MediaQueryListListener): void,
  removeListener(listener: MediaQueryListListener): void
};

export type Plugin = (pluginConfig: PluginConfig) => PluginResult;
export type MatchMediaType = (mediaQueryString: string) => MediaQueryList;

export type Config = {
  matchMedia?: MatchMediaType,
  plugins?: Array<Plugin>,
  userAgent?: string
};


================================================
FILE: src/context.js
================================================
/* @flow */
import React, {type Context, type ComponentType, useContext} from 'react';
import hoistStatics from 'hoist-non-react-statics';
import StyleKeeper from './style-keeper';
import type {Config} from './config';

export const StyleKeeperContext: Context<StyleKeeper | void> = React.createContext(
  undefined
);
export const RadiumConfigContext: Context<Config | void> = React.createContext(
  undefined
);

export type WithRadiumContextsProps = {
  styleKeeperContext?: StyleKeeper,
  radiumConfigContext?: Config
};

export function withRadiumContexts<P: {}>(
  WrappedComponent: ComponentType<P>
): ComponentType<$Diff<P, WithRadiumContextsProps>> {
  const WithRadiumContexts = React.forwardRef(
    (props: $Diff<P, WithRadiumContextsProps>, ref) => {
      const radiumConfigContext = useContext(RadiumConfigContext);
      const styleKeeperContext = useContext(StyleKeeperContext);

      return (
        <WrappedComponent
          ref={ref}
          {...props}
          radiumConfigContext={radiumConfigContext}
          styleKeeperContext={styleKeeperContext}
        />
      );
    }
  );

  WithRadiumContexts.displayName = `withRadiumContexts(${WrappedComponent.displayName ||
    WrappedComponent.name ||
    'Component'})`;

  return hoistStatics(WithRadiumContexts, WrappedComponent);
}


================================================
FILE: src/css-rule-set-to-string.js
================================================
/* @flow */

import appendPxIfNeeded from './append-px-if-needed';
import camelCasePropsToDashCase from './camel-case-props-to-dash-case';
import mapObject from './map-object';
import {getPrefixedStyle} from './prefixer';

function createMarkupForStyles(style: Object): string {
  return Object.keys(style)
    .map(property => {
      return property + ': ' + style[property] + ';';
    })
    .join('\n');
}

export default function cssRuleSetToString(
  selector: string,
  rules: Object,
  userAgent: ?string
): string {
  if (!rules) {
    return '';
  }

  const rulesWithPx = mapObject(rules, (value, key) =>
    appendPxIfNeeded(key, value)
  );
  const prefixedRules = getPrefixedStyle(rulesWithPx, userAgent);
  const cssPrefixedRules = camelCasePropsToDashCase(prefixedRules);
  const serializedRules = createMarkupForStyles(cssPrefixedRules);
  return selector + '{' + serializedRules + '}';
}


================================================
FILE: src/enhancer.js
================================================
/* @flow */

import React, {
  useState,
  useContext,
  useRef,
  useEffect,
  forwardRef
} from 'react';
import PropTypes from 'prop-types';
import hoistStatics from 'hoist-non-react-statics';

import resolveStyles, {type EnhancerApi} from './resolve-styles';
import getRadiumStyleState from './get-radium-style-state';
import {RadiumConfigContext, withRadiumContexts} from './context';
import {StyleKeeperContext} from './context';
import type {Config} from './config';

const KEYS_TO_IGNORE_WHEN_COPYING_PROPERTIES = [
  'arguments',
  'callee',
  'caller',
  'length',
  'name',
  'prototype',
  'type'
];

let RADIUM_PROTO: Object;
let RADIUM_METHODS;

function copyProperties(source, target) {
  Object.getOwnPropertyNames(source).forEach(key => {
    if (
      KEYS_TO_IGNORE_WHEN_COPYING_PROPERTIES.indexOf(key) < 0 &&
      !target.hasOwnProperty(key)
    ) {
      const descriptor = Object.getOwnPropertyDescriptor(source, key);
      descriptor && Object.defineProperty(target, key, descriptor);
    }
  });
}

// Handle scenarios of:
// - Inherit from `React.Component` in any fashion
//   See: https://github.com/FormidableLabs/radium/issues/738
// - There's an explicit `render` field defined
function isStateless(component: Function): boolean {
  const proto = component.prototype || {};

  return (
    !component.isReactComponent &&
    !proto.isReactComponent &&
    !component.render &&
    !proto.render
  );
}

// Check if value is a real ES class in Native / Node code.
// See: https://stackoverflow.com/a/30760236
function isNativeClass(component: Function): boolean {
  return (
    typeof component === 'function' && /^\s*class\s+/.test(component.toString())
  );
}

// Handle es7 arrow functions on React class method names by detecting
// and transfering the instance method to original class prototype.
// (Using a copy of the class).
// See: https://github.com/FormidableLabs/radium/issues/738
function copyArrowFuncs(enhancedSelf: Object, ComposedComponent: constructor) {
  RADIUM_METHODS.forEach(name => {
    const thisDesc = Object.getOwnPropertyDescriptor(enhancedSelf, name);
    const thisMethod = (thisDesc || {}).value;
    // Only care if have instance method.
    if (!thisMethod) {
      return;
    }
    const radiumDesc = Object.getOwnPropertyDescriptor(RADIUM_PROTO, name);
    const radiumProtoMethod = (radiumDesc || {}).value;
    const superProtoMethod = ComposedComponent.prototype[name];
    // Allow transfer when:
    // 1. have an instance method
    // 2. the super class prototype doesn't have any method
    // 3. it is not already the radium prototype's
    if (!superProtoMethod && thisMethod !== radiumProtoMethod) {
      // Transfer dynamic render component to Component prototype (copy).
      thisDesc &&
        Object.defineProperty(ComposedComponent.prototype, name, thisDesc);
      // Remove instance property, leaving us to have a contrived
      // inheritance chain of (1) radium, (2) superclass.
      delete enhancedSelf[name];
    }
  });
}

function trimRadiumState(enhancer: EnhancerApi) {
  if (
    enhancer._extraRadiumStateKeys &&
    enhancer._extraRadiumStateKeys.length > 0
  ) {
    const trimmedRadiumState = enhancer._extraRadiumStateKeys.reduce(
      (state, key) => {
        // eslint-disable-next-line no-unused-vars
        const {[key]: extraStateKey, ...remainingState} = state;
        return remainingState;
      },
      getRadiumStyleState(enhancer)
    );

    enhancer._lastRadiumState = trimmedRadiumState;
    enhancer.setState({_radiumStyleState: trimmedRadiumState});
  }
}

function cleanUpEnhancer(enhancer: EnhancerApi) {
  const {_radiumMouseUpListener, _radiumMediaQueryListenersByQuery} = enhancer;

  enhancer._radiumIsMounted = false;

  if (_radiumMouseUpListener) {
    _radiumMouseUpListener.remove();
  }

  if (_radiumMediaQueryListenersByQuery) {
    Object.keys(_radiumMediaQueryListenersByQuery).forEach(query => {
      _radiumMediaQueryListenersByQuery[query].remove();
    }, enhancer);
  }
}

function resolveConfig(
  propConfig?: Config,
  contextConfig?: Config,
  hocConfig?: Config
) {
  let config = propConfig || contextConfig || hocConfig;

  if (hocConfig && config !== hocConfig) {
    config = {
      ...hocConfig,
      ...config
    };
  }

  return config;
}

function renderRadiumComponent(
  enhancer: EnhancerApi,
  renderedElement: any,
  resolvedConfig?: Config,
  propConfig?: Config
) {
  const {extraStateKeyMap, element} = resolveStyles(
    enhancer,
    renderedElement,
    resolvedConfig
  );
  enhancer._extraRadiumStateKeys = Object.keys(extraStateKeyMap);

  if (propConfig) {
    return (
      <RadiumConfigContext.Provider value={propConfig}>
        {element}
      </RadiumConfigContext.Provider>
    );
  }

  return element;
}

function createEnhancedFunctionComponent(
  origComponent: Function,
  config?: Object
) {
  const RadiumEnhancer = React.forwardRef((props, ref) => {
    const {radiumConfig, ...otherProps} = props;
    const radiumConfigContext = useContext(RadiumConfigContext);
    const styleKeeperContext = useContext(StyleKeeperContext);
    const [state, setState] = useState({_radiumStyleState: {}});

    const enhancerApi = useRef<EnhancerApi>({
      state,
      setState,
      _radiumMediaQueryListenersByQuery: undefined,
      _radiumMouseUpListener: undefined,
      _radiumIsMounted: true,
      _lastRadiumState: undefined,
      _extraRadiumStateKeys: undefined,
      _radiumStyleKeeper: styleKeeperContext
    }).current;

    // result of useRef is never recreated and is designed to be mutable
    // we need to make sure the latest state is attached to it
    enhancerApi.state = state;

    useEffect(
      () => {
        return () => {
          cleanUpEnhancer(enhancerApi);
        };
      },
      [enhancerApi]
    );

    const hasExtraStateKeys =
      enhancerApi._extraRadiumStateKeys &&
      enhancerApi._extraRadiumStateKeys.length > 0;

    useEffect(
      () => {
        trimRadiumState(enhancerApi);
      },
      [hasExtraStateKeys, enhancerApi]
    );

    const renderedElement = origComponent(otherProps, ref);

    const currentConfig = resolveConfig(
      radiumConfig,
      radiumConfigContext,
      config
    );

    return renderRadiumComponent(
      enhancerApi,
      renderedElement,
      currentConfig,
      radiumConfig
    );
  });

  (RadiumEnhancer: Object)._isRadiumEnhanced = true;
  (RadiumEnhancer: Object).defaultProps = origComponent.defaultProps;

  return hoistStatics(RadiumEnhancer, origComponent);
}

function createEnhancedClassComponent(
  origComponent: Function,
  ComposedComponent: constructor,
  config?: Object
) {
  class RadiumEnhancer extends ComposedComponent {
    static _isRadiumEnhanced = true;

    // need to attempt to assign to this.state in case
    // super component is setting state on construction,
    // otherwise class properties reinitialize to undefined
    state: Object = this.state || {};

    _radiumStyleKeeper = this.props.styleKeeperContext;

    // need to assign the following methods to this.xxx as
    // tests attempt to set this on the original component
    _radiumMediaQueryListenersByQuery: {
      [query: string]: {remove: () => void}
    } | void = this._radiumMediaQueryListenersByQuery;
    _radiumMouseUpListener: {remove: () => void} | void = this
      ._radiumMouseUpListener;
    _radiumIsMounted: boolean = true;
    _lastRadiumState: Object;
    _extraRadiumStateKeys: any;

    constructor() {
      super(...arguments);
      this.state._radiumStyleState = {};

      const self: Object = this;

      // Handle es7 arrow functions on React class method
      copyArrowFuncs(self, ComposedComponent);
    }

    componentDidUpdate(prevProps, prevState, snapshot) {
      if (super.componentDidUpdate) {
        super.componentDidUpdate.call(this, prevProps, prevState, snapshot);
      }

      trimRadiumState(this);
    }

    componentWillUnmount() {
      if (super.componentWillUnmount) {
        super.componentWillUnmount();
      }

      cleanUpEnhancer(this);
    }

    render() {
      const renderedElement = super.render();

      const currentConfig = resolveConfig(
        this.props.radiumConfig,
        this.props.radiumConfigContext,
        config
      );

      return renderRadiumComponent(
        this,
        renderedElement,
        currentConfig,
        this.props.radiumConfig
      );
    }
  }

  // Lazy infer the method names of the Enhancer.
  RADIUM_PROTO = RadiumEnhancer.prototype;
  RADIUM_METHODS = Object.getOwnPropertyNames(RADIUM_PROTO).filter(
    n => n !== 'constructor' && typeof RADIUM_PROTO[n] === 'function'
  );

  // Class inheritance uses Object.create and because of __proto__ issues
  // with IE <10 any static properties of the superclass aren't inherited and
  // so need to be manually populated.
  // See http://babeljs.io/docs/advanced/caveats/#classes-10-and-below-
  copyProperties(origComponent, RadiumEnhancer);

  if (process.env.NODE_ENV !== 'production') {
    // This also fixes React Hot Loader by exposing the original components top
    // level prototype methods on the Radium enhanced prototype as discussed in
    // https://github.com/FormidableLabs/radium/issues/219.
    copyProperties(ComposedComponent.prototype, RadiumEnhancer.prototype);
  }

  // add Radium propTypes to enhanced component's propTypes
  if (RadiumEnhancer.propTypes && RadiumEnhancer.propTypes.style) {
    RadiumEnhancer.propTypes = {
      ...RadiumEnhancer.propTypes,
      style: PropTypes.oneOfType([PropTypes.array, PropTypes.object])
    };
  }

  // copy display name to enhanced component
  RadiumEnhancer.displayName =
    origComponent.displayName || origComponent.name || 'Component';

  return withRadiumContexts(RadiumEnhancer);
}

function createComposedFromNativeClass(ComposedComponent: constructor) {
  ComposedComponent = (function(OrigComponent): constructor {
    function NewComponent() {
      // Use Reflect.construct to simulate 'new'
      const obj = Reflect.construct(OrigComponent, arguments, this.constructor);
      return obj;
    }
    // $FlowFixMe
    Reflect.setPrototypeOf(NewComponent.prototype, OrigComponent.prototype);
    // $FlowFixMe
    Reflect.setPrototypeOf(NewComponent, OrigComponent);
    return NewComponent;
  })(ComposedComponent);
  return ComposedComponent;
}

const ReactForwardRefSymbol = (forwardRef(() => null): any).$$typeof;

export default function enhanceWithRadium(
  configOrComposedComponent: Class<any> | constructor | Function | Object,
  config?: Object = {}
): constructor {
  if (
    ReactForwardRefSymbol &&
    configOrComposedComponent.$$typeof === ReactForwardRefSymbol
  ) {
    return createEnhancedFunctionComponent(
      configOrComposedComponent.render,
      config
    );
  }

  if (typeof configOrComposedComponent !== 'function') {
    return createFactoryFromConfig(config, configOrComposedComponent);
  }

  const origComponent: Function = configOrComposedComponent;

  // Handle stateless components
  if (isStateless(origComponent)) {
    return createEnhancedFunctionComponent(origComponent, config);
  }

  let ComposedComponent: constructor = origComponent;

  // Radium is transpiled in npm, so it isn't really using es6 classes at
  // runtime.  However, the user of Radium might be.  In this case we have
  // to maintain forward compatibility with native es classes.
  if (isNativeClass(ComposedComponent)) {
    ComposedComponent = createComposedFromNativeClass(ComposedComponent);
  }

  // Shallow copy composed if still original (we may mutate later).
  if (ComposedComponent === origComponent) {
    ComposedComponent = class extends ComposedComponent {};
  }

  return createEnhancedClassComponent(origComponent, ComposedComponent, config);
}

function createFactoryFromConfig(
  config: Object,
  configOrComposedComponent: Object
) {
  const newConfig = {...config, ...configOrComposedComponent};
  return function(configOrComponent) {
    return enhanceWithRadium(configOrComponent, newConfig);
  };
}


================================================
FILE: src/get-radium-style-state.js
================================================
/* @flow */

const getRadiumStyleState = function(component: any) {
  return (
    component._lastRadiumState ||
    (component.state && component.state._radiumStyleState) ||
    {}
  );
};

export default getRadiumStyleState;


================================================
FILE: src/get-state-key.js
================================================
/* @flow */

const getStateKey = function(renderedElement: any): string {
  return typeof renderedElement.ref === 'string'
    ? renderedElement.ref
    : renderedElement.key;
};

export default getStateKey;


================================================
FILE: src/get-state.js
================================================
/* @flow */

import cleanStateKey from './clean-state-key';

const getState = function(
  state: {_radiumStyleState: {[key: string]: {[value: string]: boolean}}},
  elementKey: string,
  value: string
): any {
  const key = cleanStateKey(elementKey);

  return (
    !!state &&
    !!state._radiumStyleState &&
    !!state._radiumStyleState[key] &&
    state._radiumStyleState[key][value]
  );
};

export default getState;


================================================
FILE: src/hash.js
================================================
/* @flow */

// a simple djb2 hash based on hash-string:
// https://github.com/MatthewBarker/hash-string/blob/master/source/hash-string.js
// returns a hex-encoded hash
export default function hash(text: string): string {
  if (!text) {
    return '';
  }

  let hashValue = 5381;
  let index = text.length - 1;

  while (index) {
    hashValue = (hashValue * 33) ^ text.charCodeAt(index);
    index -= 1;
  }

  return (hashValue >>> 0).toString(16);
}


================================================
FILE: src/index.js
================================================
import Enhancer from './enhancer';
import Plugins from './plugins';
import Style from './components/style';
import StyleRoot from './components/style-root';
import getState from './get-state';
import keyframes from './keyframes';
import resolveStyles from './resolve-styles';

function Radium(ComposedComponent: constructor) {
  return Enhancer(ComposedComponent);
}

// Legacy object support.
//
// Normally it would be disfavored to attach these to the `Radium` object
// because it defeats tree-shaking, using instead the ESM exports. But,
// the `Radium` `Enhancer` uses **all** of these, so there's no extra "cost"
// to them being explicitly on the `Radium` object.
Radium.Plugins = Plugins;
Radium.Style = Style;
Radium.StyleRoot = StyleRoot;
Radium.getState = getState;
Radium.keyframes = keyframes;

if (process.env.NODE_ENV !== 'production') {
  Radium.TestMode = {
    clearState: resolveStyles.__clearStateForTests,
    disable: resolveStyles.__setTestMode.bind(null, false),
    enable: resolveStyles.__setTestMode.bind(null, true)
  };
}

export default Radium;

// ESM re-exports
export {Plugins, Style, StyleRoot, getState, keyframes};


================================================
FILE: src/keyframes.js
================================================
/* @flow */

import cssRuleSetToString from './css-rule-set-to-string';
import hash from './hash';
import {getPrefixedKeyframes} from './prefixer';

export type Keyframes = {
  __radiumKeyframes: boolean,
  __process(userAgent?: string): {animationName: string, css: string}
};

export default function keyframes(
  keyframeRules: {[percentage: string]: {[key: string]: string | number}},
  name?: string
): Keyframes {
  return {
    __radiumKeyframes: true,
    __process(userAgent) {
      const keyframesPrefixed = getPrefixedKeyframes(userAgent);
      const rules = Object.keys(keyframeRules)
        .map(percentage =>
          cssRuleSetToString(percentage, keyframeRules[percentage], userAgent)
        )
        .join('\n');
      const animationName =
        (name ? name + '-' : '') + 'radium-animation-' + hash(rules);
      const css =
        '@' +
        keyframesPrefixed +
        ' ' +
        animationName +
        ' {\n' +
        rules +
        '\n}\n';
      return {css, animationName};
    }
  };
}


================================================
FILE: src/map-object.js
================================================
/* @flow */

export default function mapObject<TValue, TNext>(
  object: {[key: string]: TValue},
  mapper: (value: TValue, key: string) => TNext
): {[key: string]: TNext} {
  return Object.keys(object).reduce((result, key) => {
    result[key] = mapper(object[key], key);
    return result;
  }, {});
}


================================================
FILE: src/merge-styles.js
================================================
export function isNestedStyle(value) {
  // Don't merge objects overriding toString, since they should be converted
  // to string values.
  return (
    value &&
    value.constructor === Object &&
    value.toString === Object.prototype.toString
  );
}

// Merge style objects. Deep merge plain object values.
export function mergeStyles(styles) {
  const result = {};

  styles.forEach(style => {
    if (!style || typeof style !== 'object') {
      return;
    }

    if (Array.isArray(style)) {
      style = mergeStyles(style);
    }

    Object.keys(style).forEach(key => {
      // Simple case, nothing nested
      if (!isNestedStyle(style[key]) || !isNestedStyle(result[key])) {
        result[key] = style[key];
        return;
      }

      // If nested media, don't merge the nested styles, append a space to the
      // end (benign when converted to CSS). This way we don't end up merging
      // media queries that appear later in the chain with those that appear
      // earlier.
      if (key.indexOf('@media') === 0) {
        let newKey = key;
        // eslint-disable-next-line no-constant-condition
        while (true) {
          newKey += ' ';
          if (!result[newKey]) {
            result[newKey] = style[key];
            return;
          }
        }
      }

      // Merge all other nested styles recursively
      result[key] = mergeStyles([result[key], style[key]]);
    });
  });

  return result;
}


================================================
FILE: src/plugins/check-props-plugin.js
================================================
/* @flow */

import type {PluginConfig, PluginResult} from './index';

let checkProps = (() => {}: any);

if (process.env.NODE_ENV !== 'production') {
  // Warn if you use longhand and shorthand properties in the same style
  // object.
  // https://developer.mozilla.org/en-US/docs/Web/CSS/Shorthand_properties

  const shorthandPropertyExpansions = {
    background: [
      'backgroundAttachment',
      'backgroundBlendMode',
      'backgroundClip',
      'backgroundColor',
      'backgroundImage',
      'backgroundOrigin',
      'backgroundPosition',
      'backgroundPositionX',
      'backgroundPositionY',
      'backgroundRepeat',
      'backgroundRepeatX',
      'backgroundRepeatY',
      'backgroundSize'
    ],
    border: [
      'borderBottom',
      'borderBottomColor',
      'borderBottomStyle',
      'borderBottomWidth',
      'borderColor',
      'borderLeft',
      'borderLeftColor',
      'borderLeftStyle',
      'borderLeftWidth',
      'borderRight',
      'borderRightColor',
      'borderRightStyle',
      'borderRightWidth',
      'borderStyle',
      'borderTop',
      'borderTopColor',
      'borderTopStyle',
      'borderTopWidth',
      'borderWidth'
    ],
    borderImage: [
      'borderImageOutset',
      'borderImageRepeat',
      'borderImageSlice',
      'borderImageSource',
      'borderImageWidth'
    ],
    borderRadius: [
      'borderBottomLeftRadius',
      'borderBottomRightRadius',
      'borderTopLeftRadius',
      'borderTopRightRadius'
    ],
    font: [
      'fontFamily',
      'fontKerning',
      'fontSize',
      'fontStretch',
      'fontStyle',
      'fontVariant',
      'fontVariantLigatures',
      'fontWeight',
      'lineHeight'
    ],
    listStyle: ['listStyleImage', 'listStylePosition', 'listStyleType'],
    margin: ['marginBottom', 'marginLeft', 'marginRight', 'marginTop'],
    padding: ['paddingBottom', 'paddingLeft', 'paddingRight', 'paddingTop'],
    transition: [
      'transitionDelay',
      'transitionDuration',
      'transitionProperty',
      'transitionTimingFunction'
    ]
  };

  checkProps = function(config: PluginConfig): PluginResult {
    const {componentName, style} = config;
    if (typeof style !== 'object' || !style) {
      return;
    }

    const styleKeys = Object.keys(style);
    styleKeys.forEach(styleKey => {
      if (
        Array.isArray(shorthandPropertyExpansions[styleKey]) &&
        shorthandPropertyExpansions[styleKey].some(
          sp => styleKeys.indexOf(sp) !== -1
        )
      ) {
        if (process.env.NODE_ENV !== 'production') {
          /* eslint-disable no-console */
          console.warn(
            'Radium: property "' + styleKey + '" in style object',
            style,
            ': do not mix longhand and ' +
              'shorthand properties in the same style object. Check the render ' +
              'method of ' +
              componentName +
              '.',
            'See https://github.com/FormidableLabs/radium/issues/95 for more ' +
              'information.'
          );
          /* eslint-enable no-console */
        }
      }
    });

    styleKeys.forEach(k => checkProps({...config, style: style[k]}));
    return;
  };
}

export default checkProps;


================================================
FILE: src/plugins/index.js
================================================
/** @flow */
/* eslint-disable block-scoped-const */

import type {Config} from '../config';

import checkPropsPlugin from './check-props-plugin';
import keyframesPlugin from './keyframes-plugin';
import mergeStyleArrayPlugin from './merge-style-array-plugin';
import prefixPlugin from './prefix-plugin';
import removeNestedStylesPlugin from './remove-nested-styles-plugin';
import resolveInteractionStylesPlugin from './resolve-interaction-styles-plugin';
import resolveMediaQueriesPlugin from './resolve-media-queries-plugin';
import visitedPlugin from './visited-plugin';

export type PluginConfig = {
  // Adds a chunk of css to the root style sheet
  addCSS: (css: string) => {remove: () => void},

  // Helper function when adding CSS
  appendImportantToEachValue: (style: Object) => Object,

  // May not be readable if code has been minified
  componentName: string,

  // The Radium configuration
  config: Config,

  // Converts an object of CSS rules to a string, for use with addCSS
  cssRuleSetToString: (
    selector: string,
    rules: Object,
    userAgent: ?string
  ) => string,

  // Retrieve the value of a field on the component
  getComponentField: (key: string) => any,

  // Retrieve the value of a field global to the Radium module
  // Used so that tests can easily clear global state.
  getGlobalState: (key: string) => any,

  // Retrieve the value of some state specific to the rendered element.
  // Requires the element to have a unique key or ref or for an element key
  // to be passed in.
  getState: (stateKey: string, elementKey?: string) => any,

  // Helper function when adding CSS
  hash: (data: string) => string,

  // Returns true if the value is a nested style object
  isNestedStyle: (value: any) => boolean,

  // Access to the mergeStyles utility
  mergeStyles: (styles: Array<Object>) => Object,

  // The props of the rendered element. This can be changed by each plugin,
  // and successive plugins will see the result of previous plugins.
  props: Object,

  // Calls setState on the component with the given key and value.
  // By default this is specific to the rendered element, but you can override
  // by passing in the `elementKey` parameter.
  setState: (stateKey: string, value: any, elementKey?: string) => void,

  // The style prop of the rendered element. This can be changed by each plugin,
  // and successive plugins will see the result of previous plugins. Kept
  // separate from `props` for ease of use.
  style: Object,

  // uses the exenv npm module
  ExecutionEnvironment: {
    canUseEventListeners: boolean,
    canUseDOM: boolean
  }
};

export type PluginResult = ?{
  // Merged into the component directly. Useful for storing things for which you
  // don't need to re-render, event subscriptions, for instance.
  componentFields?: ?Object,

  // Merged into a Radium controlled global state object. Use this instead of
  // module level state for ease of clearing state between tests.
  globalState?: ?Object,

  // Merged into the rendered element's props.
  props?: ?Object,

  // Replaces (not merged into) the rendered element's style property.
  style?: ?Object
};

export default {
  checkProps: checkPropsPlugin,
  keyframes: keyframesPlugin,
  mergeStyleArray: mergeStyleArrayPlugin,
  prefix: prefixPlugin,
  removeNestedStyles: removeNestedStylesPlugin,
  resolveInteractionStyles: resolveInteractionStylesPlugin,
  resolveMediaQueries: resolveMediaQueriesPlugin,
  visited: visitedPlugin
};


================================================
FILE: src/plugins/keyframes-plugin.js
================================================
/* @flow */

import type {PluginConfig, PluginResult} from './index';
import type {Keyframes} from '../keyframes';

export default function keyframesPlugin(
  {addCSS, config, style}: PluginConfig // eslint-disable-line no-shadow
): PluginResult {
  const processKeyframeStyle = value => {
    const keyframesValue = (value: Keyframes);
    const {animationName, css} = keyframesValue.__process(config.userAgent);
    addCSS(css);
    return animationName;
  };

  const newStyle = Object.keys(style).reduce((newStyleInProgress, key) => {
    let value = style[key];
    const isKeyframeArray = Array.isArray(value);

    if (
      key === 'animationName' &&
      value &&
      (value.__radiumKeyframes || isKeyframeArray)
    ) {
      if (isKeyframeArray) {
        value = value.map(processKeyframeStyle).join(', ');
      } else {
        value = processKeyframeStyle(value);
      }
    }

    newStyleInProgress[key] = value;
    return newStyleInProgress;
  }, {});
  return {style: newStyle};
}


================================================
FILE: src/plugins/merge-style-array-plugin.js
================================================
/* @flow */

import type {PluginConfig, PluginResult} from './index';

// Convenient syntax for multiple styles: `style={[style1, style2, etc]}`
// Ignores non-objects, so you can do `this.state.isCool && styles.cool`.
const mergeStyleArrayPlugin = function({
  style,
  mergeStyles
}: PluginConfig): PluginResult {
  // eslint-disable-line no-shadow
  const newStyle = Array.isArray(style) ? mergeStyles(style) : style;
  return {style: newStyle};
};

export default mergeStyleArrayPlugin;


================================================
FILE: src/plugins/mouse-up-listener.js
================================================
/* @flow */

const _callbacks = [];
let _mouseUpListenerIsActive = false;

function _handleMouseUp() {
  _callbacks.forEach(callback => {
    callback();
  });
}

const subscribe = function(callback: () => void): {remove: () => void} {
  if (_callbacks.indexOf(callback) === -1) {
    _callbacks.push(callback);
  }

  if (!_mouseUpListenerIsActive) {
    window.addEventListener('mouseup', _handleMouseUp);
    _mouseUpListenerIsActive = true;
  }

  return {
    remove: function() {
      const index = _callbacks.indexOf(callback);
      _callbacks.splice(index, 1);

      if (_callbacks.length === 0 && _mouseUpListenerIsActive) {
        window.removeEventListener('mouseup', _handleMouseUp);
        _mouseUpListenerIsActive = false;
      }
    }
  };
};

export default {
  subscribe: subscribe,
  __triggerForTests: _handleMouseUp
};


================================================
FILE: src/plugins/prefix-plugin.js
================================================
/* @flow */

import type {PluginConfig, PluginResult} from './index';

import {getPrefixedStyle} from '../prefixer';

export default function prefixPlugin(
  {config, style}: PluginConfig // eslint-disable-line no-shadow
): PluginResult {
  const newStyle = getPrefixedStyle(style, config.userAgent);
  return {style: newStyle};
}


================================================
FILE: src/plugins/remove-nested-styles-plugin.js
================================================
/** @flow */

import type {PluginConfig, PluginResult} from './index';

export default function removeNestedStyles({
  isNestedStyle,
  style
}: PluginConfig): PluginResult {
  // eslint-disable-line no-shadow
  const newStyle = Object.keys(style).reduce((newStyleInProgress, key) => {
    const value = style[key];
    if (!isNestedStyle(value)) {
      newStyleInProgress[key] = value;
    }
    return newStyleInProgress;
  }, {});

  return {
    style: newStyle
  };
}


================================================
FILE: src/plugins/resolve-interaction-styles-plugin.js
================================================
/** @flow */

import type {PluginConfig, PluginResult} from './index';

import MouseUpListener from './mouse-up-listener';

const _isInteractiveStyleField = function(styleFieldName) {
  return (
    styleFieldName === ':hover' ||
    styleFieldName === ':active' ||
    styleFieldName === ':focus'
  );
};

const resolveInteractionStyles = function(config: PluginConfig): PluginResult {
  const {
    ExecutionEnvironment,
    getComponentField,
    getState,
    mergeStyles,
    props,
    setState,
    style
  } = config;

  const newComponentFields = {};
  const newProps = {};

  // Only add handlers if necessary
  if (style[':hover']) {
    // Always call the existing handler if one is already defined.
    // This code, and the very similar ones below, could be abstracted a bit
    // more, but it hurts readability IMO.
    const existingOnMouseEnter = props.onMouseEnter;
    newProps.onMouseEnter = function(e) {
      existingOnMouseEnter && existingOnMouseEnter(e);
      setState(':hover', true);
    };

    const existingOnMouseLeave = props.onMouseLeave;
    newProps.onMouseLeave = function(e) {
      existingOnMouseLeave && existingOnMouseLeave(e);
      setState(':hover', false);
    };
  }

  if (style[':active']) {
    const existingOnMouseDown = props.onMouseDown;
    newProps.onMouseDown = function(e) {
      existingOnMouseDown && existingOnMouseDown(e);
      newComponentFields._lastMouseDown = Date.now();
      setState(':active', 'viamousedown');
    };

    const existingOnKeyDown = props.onKeyDown;
    newProps.onKeyDown = function(e) {
      existingOnKeyDown && existingOnKeyDown(e);
      if (e.key === ' ' || e.key === 'Enter') {
        setState(':active', 'viakeydown');
      }
    };

    const existingOnKeyUp = props.onKeyUp;
    newProps.onKeyUp = function(e) {
      existingOnKeyUp && existingOnKeyUp(e);
      if (e.key === ' ' || e.key === 'Enter') {
        setState(':active', false);
      }
    };
  }

  if (style[':focus']) {
    const existingOnFocus = props.onFocus;
    newProps.onFocus = function(e) {
      existingOnFocus && existingOnFocus(e);
      setState(':focus', true);
    };

    const existingOnBlur = props.onBlur;
    newProps.onBlur = function(e) {
      existingOnBlur && existingOnBlur(e);
      setState(':focus', false);
    };
  }

  if (
    style[':active'] &&
    !getComponentField('_radiumMouseUpListener') &&
    ExecutionEnvironment.canUseEventListeners
  ) {
    newComponentFields._radiumMouseUpListener = MouseUpListener.subscribe(
      () => {
        Object.keys(getComponentField('state')._radiumStyleState).forEach(
          key => {
            if (getState(':active', key) === 'viamousedown') {
              setState(':active', false, key);
            }
          }
        );
      }
    );
  }

  // Merge the styles in the order they were defined
  const interactionStyles = props.disabled
    ? [style[':disabled']]
    : Object.keys(style)
        .filter(name => _isInteractiveStyleField(name) && getState(name))
        .map(name => style[name]);

  let newStyle = mergeStyles([style].concat(interactionStyles));

  // Remove interactive styles
  newStyle = Object.keys(newStyle).reduce((styleWithoutInteractions, name) => {
    if (!_isInteractiveStyleField(name) && name !== ':disabled') {
      styleWithoutInteractions[name] = newStyle[name];
    }
    return styleWithoutInteractions;
  }, {});

  return {
    componentFields: newComponentFields,
    props: newProps,
    style: newStyle
  };
};

export default resolveInteractionStyles;


================================================
FILE: src/plugins/resolve-media-queries-plugin.js
================================================
/** @flow */

import type {MatchMediaType} from '../config';
import type {PluginConfig, PluginResult} from './index';

let _windowMatchMedia;
function _getWindowMatchMedia(ExecutionEnvironment) {
  if (_windowMatchMedia === undefined) {
    _windowMatchMedia =
      (!!ExecutionEnvironment.canUseDOM &&
        !!window &&
        !!window.matchMedia &&
        (mediaQueryString => window.matchMedia(mediaQueryString))) ||
      null;
  }
  return _windowMatchMedia;
}

function _filterObject(
  obj: Object,
  predicate: (value: any, key: string) => boolean
): Object {
  return Object.keys(obj)
    .filter(key => predicate(obj[key], key))
    .reduce((result, key) => {
      result[key] = obj[key];
      return result;
    }, {});
}

function _removeMediaQueries(style) {
  return Object.keys(style).reduce((styleWithoutMedia, key) => {
    if (key.indexOf('@media') !== 0) {
      styleWithoutMedia[key] = style[key];
    }
    return styleWithoutMedia;
  }, {});
}

function _topLevelRulesToCSS({
  addCSS,
  appendImportantToEachValue,
  cssRuleSetToString,
  hash,
  isNestedStyle,
  style,
  userAgent
}) {
  let className = '';
  Object.keys(style)
    .filter(name => name.indexOf('@media') === 0)
    .map(query => {
      const topLevelRules = appendImportantToEachValue(
        _filterObject(style[query], value => !isNestedStyle(value))
      );

      if (!Object.keys(topLevelRules).length) {
        return;
      }

      const ruleCSS = cssRuleSetToString('', topLevelRules, userAgent);

      // CSS classes cannot start with a number
      const mediaQueryClassName = 'rmq-' + hash(query + ruleCSS);
      const css = query + '{ .' + mediaQueryClassName + ruleCSS + '}';

      addCSS(css);

      className += (className ? ' ' : '') + mediaQueryClassName;
    });
  return className;
}

function _subscribeToMediaQuery({
  listener,
  listenersByQuery,
  matchMedia,
  mediaQueryListsByQuery,
  query
}) {
  query = query.replace('@media ', '');

  let mql = mediaQueryListsByQuery[query];
  if (!mql && matchMedia) {
    mediaQueryListsByQuery[query] = mql = matchMedia(query);
  }

  if (!listenersByQuery || !listenersByQuery[query]) {
    mql.addListener(listener);

    listenersByQuery[query] = {
      remove() {
        mql.removeListener(listener);
      }
    };
  }
  return mql;
}

export default function resolveMediaQueries({
  ExecutionEnvironment,
  addCSS,
  appendImportantToEachValue,
  config,
  cssRuleSetToString,
  getComponentField,
  getGlobalState,
  hash,
  isNestedStyle,
  mergeStyles,
  props,
  setState,
  style
}: PluginConfig): PluginResult {
  // eslint-disable-line no-shadow
  let newStyle = _removeMediaQueries(style);
  const mediaQueryClassNames = _topLevelRulesToCSS({
    addCSS,
    appendImportantToEachValue,
    cssRuleSetToString,
    hash,
    isNestedStyle,
    style,
    userAgent: config.userAgent
  });

  const newProps = mediaQueryClassNames
    ? {
        className:
          mediaQueryClassNames + (props.className ? ' ' + props.className : '')
      }
    : null;

  const matchMedia: ?MatchMediaType =
    config.matchMedia || _getWindowMatchMedia(ExecutionEnvironment);

  if (!matchMedia) {
    return {
      props: newProps,
      style: newStyle
    };
  }

  const listenersByQuery = {
    ...getComponentField('_radiumMediaQueryListenersByQuery')
  };
  const mediaQueryListsByQuery = getGlobalState('mediaQueryListsByQuery') || {};

  Object.keys(style)
    .filter(name => name.indexOf('@media') === 0)
    .map(query => {
      const nestedRules = _filterObject(style[query], isNestedStyle);

      if (!Object.keys(nestedRules).length) {
        return;
      }

      const mql = _subscribeToMediaQuery({
        listener: () => setState(query, mql.matches, '_all'),
        listenersByQuery,
        matchMedia,
        mediaQueryListsByQuery,
        query
      });

      // Apply media query states
      if (mql.matches) {
        newStyle = mergeStyles([newStyle, nestedRules]);
      }
    });

  return {
    componentFields: {
      _radiumMediaQueryListenersByQuery: listenersByQuery
    },
    globalState: {mediaQueryListsByQuery},
    props: newProps,
    style: newStyle
  };
}


================================================
FILE: src/plugins/visited-plugin.js
================================================
/** @flow */

import type {PluginConfig, PluginResult} from './index';

export default function visited({
  addCSS,
  appendImportantToEachValue,
  config,
  cssRuleSetToString,
  hash,
  props,
  style
}: PluginConfig): PluginResult {
  // eslint-disable-line no-shadow
  let className = props.className;

  const newStyle = Object.keys(style).reduce((newStyleInProgress, key) => {
    let value = style[key];
    if (key === ':visited') {
      value = appendImportantToEachValue(value);
      const ruleCSS = cssRuleSetToString('', value, config.userAgent);
      const visitedClassName = 'rad-' + hash(ruleCSS);
      const css = '.' + visitedClassName + ':visited' + ruleCSS;

      addCSS(css);
      className = (className ? className + ' ' : '') + visitedClassName;
    } else {
      newStyleInProgress[key] = value;
    }

    return newStyleInProgress;
  }, {});

  return {
    props: className === props.className ? null : {className},
    style: newStyle
  };
}


================================================
FILE: src/prefix-data/dynamic.js
================================================
import calc from 'inline-style-prefixer/dynamic/plugins/calc';
import crossFade from 'inline-style-prefixer/dynamic/plugins/crossFade';
import cursor from 'inline-style-prefixer/dynamic/plugins/cursor';
import filter from 'inline-style-prefixer/dynamic/plugins/filter';
import flex from 'inline-style-prefixer/dynamic/plugins/flex';
import flexboxIE from 'inline-style-prefixer/dynamic/plugins/flexboxIE';
import flexboxOld from 'inline-style-prefixer/dynamic/plugins/flexboxOld';
import gradient from 'inline-style-prefixer/dynamic/plugins/gradient';
import imageSet from 'inline-style-prefixer/dynamic/plugins/imageSet';
import position from 'inline-style-prefixer/dynamic/plugins/position';
import sizing from 'inline-style-prefixer/dynamic/plugins/sizing';
import transition from 'inline-style-prefixer/dynamic/plugins/transition';

export default {
  plugins: [
    calc,
    crossFade,
    cursor,
    filter,
    flex,
    flexboxIE,
    flexboxOld,
    gradient,
    imageSet,
    position,
    sizing,
    transition
  ],
  prefixMap: {
    chrome: {
      transform: 35,
      transformOrigin: 35,
      transformOriginX: 35,
      transformOriginY: 35,
      backfaceVisibility: 35,
      perspective: 35,
      perspectiveOrigin: 35,
      transformStyle: 35,
      transformOriginZ: 35,
      animation: 42,
      animationDelay: 42,
      animationDirection: 42,
      animationFillMode: 42,
      animationDuration: 42,
      animationIterationCount: 42,
      animationName: 42,
      animationPlayState: 42,
      animationTimingFunction: 42,
      appearance: 66,
      userSelect: 53,
      fontKerning: 32,
      textEmphasisPosition: 66,
      textEmphasis: 66,
      textEmphasisStyle: 66,
      textEmphasisColor: 66,
      boxDecorationBreak: 66,
      clipPath: 54,
      maskImage: 66,
      maskMode: 66,
      maskRepeat: 66,
      maskPosition: 66,
      maskClip: 66,
      maskOrigin: 66,
      maskSize: 66,
      maskComposite: 66,
      mask: 66,
      maskBorderSource: 66,
      maskBorderMode: 66,
      maskBorderSlice: 66,
      maskBorderWidth: 66,
      maskBorderOutset: 66,
      maskBorderRepeat: 66,
      maskBorder: 66,
      maskType: 66,
      textDecorationStyle: 56,
      textDecorationSkip: 56,
      textDecorationLine: 56,
      textDecorationColor: 56,
      filter: 52,
      fontFeatureSettings: 47,
      breakAfter: 49,
      breakBefore: 49,
      breakInside: 49,
      columnCount: 49,
      columnFill: 49,
      columnGap: 49,
      columnRule: 49,
      columnRuleColor: 49,
      columnRuleStyle: 49,
      columnRuleWidth: 49,
      columns: 49,
      columnSpan: 49,
      columnWidth: 49,
      writingMode: 47
    },
    safari: {
      flex: 8,
      flexBasis: 8,
      flexDirection: 8,
      flexGrow: 8,
      flexFlow: 8,
      flexShrink: 8,
      flexWrap: 8,
      alignContent: 8,
      alignItems: 8,
      alignSelf: 8,
      justifyContent: 8,
      order: 8,
      transition: 6,
      transitionDelay: 6,
      transitionDuration: 6,
      transitionProperty: 6,
      transitionTimingFunction: 6,
      transform: 8,
      transformOrigin: 8,
      transformOriginX: 8,
      transformOriginY: 8,
      backfaceVisibility: 8,
      perspective: 8,
      perspectiveOrigin: 8,
      transformStyle: 8,
      transformOriginZ: 8,
      animation: 8,
      animationDelay: 8,
      animationDirection: 8,
      animationFillMode: 8,
      animationDuration: 8,
      animationIterationCount: 8,
      animationName: 8,
      animationPlayState: 8,
      animationTimingFunction: 8,
      appearance: 11,
      userSelect: 11,
      backdropFilter: 11,
      fontKerning: 9,
      scrollSnapType: 10.1,
      scrollSnapPointsX: 10.1,
      scrollSnapPointsY: 10.1,
      scrollSnapDestination: 10.1,
      scrollSnapCoordinate: 10.1,
      textEmphasisPosition: 7,
      textEmphasis: 7,
      textEmphasisStyle: 7,
      textEmphasisColor: 7,
      boxDecorationBreak: 11,
      clipPath: 11,
      maskImage: 11,
      maskMode: 11,
      maskRepeat: 11,
      maskPosition: 11,
      maskClip: 11,
      maskOrigin: 11,
      maskSize: 11,
      maskComposite: 11,
      mask: 11,
      maskBorderSource: 11,
      maskBorderMode: 11,
      maskBorderSlice: 11,
      maskBorderWidth: 11,
      maskBorderOutset: 11,
      maskBorderRepeat: 11,
      maskBorder: 11,
      maskType: 11,
      textDecorationStyle: 11,
      textDecorationSkip: 11,
      textDecorationLine: 11,
      textDecorationColor: 11,
      shapeImageThreshold: 10,
      shapeImageMargin: 10,
      shapeImageOutside: 10,
      filter: 9,
      hyphens: 11,
      flowInto: 11,
      flowFrom: 11,
      breakBefore: 8,
      breakAfter: 8,
      breakInside: 8,
      regionFragment: 11,
      columnCount: 8,
      columnFill: 8,
      columnGap: 8,
      columnRule: 8,
      columnRuleColor: 8,
      columnRuleStyle: 8,
      columnRuleWidth: 8,
      columns: 8,
      columnSpan: 8,
      columnWidth: 8,
      writingMode: 10.1
    },
    firefox: {
      appearance: 60,
      userSelect: 60,
      boxSizing: 28,
      textAlignLast: 48,
      textDecorationStyle: 35,
      textDecorationSkip: 35,
      textDecorationLine: 35,
      textDecorationColor: 35,
      tabSize: 60,
      hyphens: 42,
      fontFeatureSettings: 33,
      breakAfter: 51,
      breakBefore: 51,
      breakInside: 51,
      columnCount: 51,
      columnFill: 51,
      columnGap: 51,
      columnRule: 51,
      columnRuleColor: 51,
      columnRuleStyle: 51,
      columnRuleWidth: 51,
      columns: 51,
      columnSpan: 51,
      columnWidth: 51
    },
    opera: {
      flex: 16,
      flexBasis: 16,
      flexDirection: 16,
      flexGrow: 16,
      flexFlow: 16,
      flexShrink: 16,
      flexWrap: 16,
      alignContent: 16,
      alignItems: 16,
      alignSelf: 16,
      justifyContent: 16,
      order: 16,
      transform: 22,
      transformOrigin: 22,
      transformOriginX: 22,
      transformOriginY: 22,
      backfaceVisibility: 22,
      perspective: 22,
      perspectiveOrigin: 22,
      transformStyle: 22,
      transformOriginZ: 22,
      animation: 29,
      animationDelay: 29,
      animationDirection: 29,
      animationFillMode: 29,
      animationDuration: 29,
      animationIterationCount: 29,
      animationName: 29,
      animationPlayState: 29,
      animationTimingFunction: 29,
      appearance: 50,
      userSelect: 40,
      fontKerning: 19,
      textEmphasisPosition: 50,
      textEmphasis: 50,
      textEmphasisStyle: 50,
      textEmphasisColor: 50,
      boxDecorationBreak: 50,
      clipPath: 41,
      maskImage: 50,
      maskMode: 50,
      maskRepeat: 50,
      maskPosition: 50,
      maskClip: 50,
      maskOrigin: 50,
      maskSize: 50,
      maskComposite: 50,
      mask: 50,
      maskBorderSource: 50,
      maskBorderMode: 50,
      maskBorderSlice: 50,
      maskBorderWidth: 50,
      maskBorderOutset: 50,
      maskBorderRepeat: 50,
      maskBorder: 50,
      maskType: 50,
      textDecorationStyle: 43,
      textDecorationSkip: 43,
      textDecorationLine: 43,
      textDecorationColor: 43,
      filter: 39,
      fontFeatureSettings: 34,
      breakAfter: 36,
      breakBefore: 36,
      breakInside: 36,
      columnCount: 36,
      columnFill: 36,
      columnGap: 36,
      columnRule: 36,
      columnRuleColor: 36,
      columnRuleStyle: 36,
      columnRuleWidth: 36,
      columns: 36,
      columnSpan: 36,
      columnWidth: 36,
      writingMode: 34
    },
    ie: {
      flex: 10,
      flexDirection: 10,
      flexFlow: 10,
      flexWrap: 10,
      transform: 9,
      transformOrigin: 9,
      transformOriginX: 9,
      transformOriginY: 9,
      userSelect: 11,
      wrapFlow: 11,
      wrapThrough: 11,
      wrapMargin: 11,
      scrollSnapType: 11,
      scrollSnapPointsX: 11,
      scrollSnapPointsY: 11,
      scrollSnapDestination: 11,
      scrollSnapCoordinate: 11,
      touchAction: 10,
      hyphens: 11,
      flowInto: 11,
      flowFrom: 11,
      breakBefore: 11,
      breakAfter: 11,
      breakInside: 11,
      regionFragment: 11,
      gridTemplateColumns: 11,
      gridTemplateRows: 11,
      gridTemplateAreas: 11,
      gridTemplate: 11,
      gridAutoColumns: 11,
      gridAutoRows: 11,
      gridAutoFlow: 11,
      grid: 11,
      gridRowStart: 11,
      gridColumnStart: 11,
      gridRowEnd: 11,
      gridRow: 11,
      gridColumn: 11,
      gridColumnEnd: 11,
      gridColumnGap: 11,
      gridRowGap: 11,
      gridArea: 11,
      gridGap: 11,
      textSizeAdjust: 11,
      writingMode: 11
    },
    edge: {
      userSelect: 17,
      wrapFlow: 17,
      wrapThrough: 17,
      wrapMargin: 17,
      scrollSnapType: 17,
      scrollSnapPointsX: 17,
      scrollSnapPointsY: 17,
      scrollSnapDestination: 17,
      scrollSnapCoordinate: 17,
      hyphens: 17,
      flowInto: 17,
      flowFrom: 17,
      breakBefore: 17,
      breakAfter: 17,
      breakInside: 17,
      regionFragment: 17,
      gridTemplateColumns: 15,
      gridTemplateRows: 15,
      gridTemplateAreas: 15,
      gridTemplate: 15,
      gridAutoColumns: 15,
      gridAutoRows: 15,
      gridAutoFlow: 15,
      grid: 15,
      gridRowStart: 15,
      gridColumnStart: 15,
      gridRowEnd: 15,
      gridRow: 15,
      gridColumn: 15,
      gridColumnEnd: 15,
      gridColumnGap: 15,
      gridRowGap: 15,
      gridArea: 15,
      gridGap: 15
    },
    ios_saf: {
      flex: 8.1,
      flexBasis: 8.1,
      flexDirection: 8.1,
      flexGrow: 8.1,
      flexFlow: 8.1,
      flexShrink: 8.1,
      flexWrap: 8.1,
      alignContent: 8.1,
      alignItems: 8.1,
      alignSelf: 8.1,
      justifyContent: 8.1,
      order: 8.1,
      transition: 6,
      transitionDelay: 6,
      transitionDuration: 6,
      transitionProperty: 6,
      transitionTimingFunction: 6,
      transform: 8.1,
      transformOrigin: 8.1,
      transformOriginX: 8.1,
      transformOriginY: 8.1,
      backfaceVisibility: 8.1,
      perspective: 8.1,
      perspectiveOrigin: 8.1,
      transformStyle: 8.1,
      transformOriginZ: 8.1,
      animation: 8.1,
      animationDelay: 8.1,
      animationDirection: 8.1,
      animationFillMode: 8.1,
      animationDuration: 8.1,
      animationIterationCount: 8.1,
      animationName: 8.1,
      animationPlayState: 8.1,
      animationTimingFunction: 8.1,
      appearance: 11,
      userSelect: 11,
      backdropFilter: 11,
      fontKerning: 11,
      scrollSnapType: 10.3,
      scrollSnapPointsX: 10.3,
      scrollSnapPointsY: 10.3,
      scrollSnapDestination: 10.3,
      scrollSnapCoordinate: 10.3,
      boxDecorationBreak: 11,
      clipPath: 11,
      maskImage: 11,
      maskMode: 11,
      maskRepeat: 11,
      maskPosition: 11,
      maskClip: 11,
      maskOrigin: 11,
      maskSize: 11,
      maskComposite: 11,
      mask: 11,
      maskBorderSource: 11,
      maskBorderMode: 11,
      maskBorderSlice: 11,
      maskBorderWidth: 11,
      maskBorderOutset: 11,
      maskBorderRepeat: 11,
      maskBorder: 11,
      maskType: 11,
      textSizeAdjust: 11,
      textDecorationStyle: 11,
      textDecorationSkip: 11,
      textDecorationLine: 11,
      textDecorationColor: 11,
      shapeImageThreshold: 10,
      shapeImageMargin: 10,
      shapeImageOutside: 10,
      filter: 9,
      hyphens: 11,
      flowInto: 11,
      flowFrom: 11,
      breakBefore: 8.1,
      breakAfter: 8.1,
      breakInside: 8.1,
      regionFragment: 11,
      columnCount: 8.1,
      columnFill: 8.1,
      columnGap: 8.1,
      columnRule: 8.1,
      columnRuleColor: 8.1,
      columnRuleStyle: 8.1,
      columnRuleWidth: 8.1,
      columns: 8.1,
      columnSpan: 8.1,
      columnWidth: 8.1,
      writingMode: 10.3
    },
    android: {
      borderImage: 4.2,
      borderImageOutset: 4.2,
      borderImageRepeat: 4.2,
      borderImageSlice: 4.2,
      borderImageSource: 4.2,
      borderImageWidth: 4.2,
      flex: 4.2,
      flexBasis: 4.2,
      flexDirection: 4.2,
      flexGrow: 4.2,
      flexFlow: 4.2,
      flexShrink: 4.2,
      flexWrap: 4.2,
      alignContent: 4.2,
      alignItems: 4.2,
      alignSelf: 4.2,
      justifyContent: 4.2,
      order: 4.2,
      transition: 4.2,
      transitionDelay: 4.2,
      transitionDuration: 4.2,
      transitionProperty: 4.2,
      transitionTimingFunction: 4.2,
      transform: 4.4,
      transformOrigin: 4.4,
      transformOriginX: 4.4,
      transformOriginY: 4.4,
      backfaceVisibility: 4.4,
      perspective: 4.4,
      perspectiveOrigin: 4.4,
      transformStyle: 4.4,
      transformOriginZ: 4.4,
      animation: 4.4,
      animationDelay: 4.4,
      animationDirection: 4.4,
      animationFillMode: 4.4,
      animationDuration: 4.4,
      animationIterationCount: 4.4,
      animationName: 4.4,
      animationPlayState: 4.4,
      animationTimingFunction: 4.4,
      appearance: 62,
      userSelect: 4.4,
      fontKerning: 4.4,
      textEmphasisPosition: 62,
      textEmphasis: 62,
      textEmphasisStyle: 62,
      textEmphasisColor: 62,
      boxDecorationBreak: 62,
      clipPath: 4.4,
      maskImage: 62,
      maskMode: 62,
      maskRepeat: 62,
      maskPosition: 62,
      maskClip: 62,
      maskOrigin: 62,
      maskSize: 62,
      maskComposite: 62,
      mask: 62,
      maskBorderSource: 62,
      maskBorderMode: 62,
      maskBorderSlice: 62,
      maskBorderWidth: 62,
      maskBorderOutset: 62,
      maskBorderRepeat: 62,
      maskBorder: 62,
      maskType: 62,
      filter: 4.4,
      fontFeatureSettings: 4.4,
      breakAfter: 4.4,
      breakBefore: 4.4,
      breakInside: 4.4,
      columnCount: 4.4,
      columnFill: 4.4,
      columnGap: 4.4,
      columnRule: 4.4,
      columnRuleColor: 4.4,
      columnRuleStyle: 4.4,
      columnRuleWidth: 4.4,
      columns: 4.4,
      columnSpan: 4.4,
      columnWidth: 4.4,
      writingMode: 4.4
    },
    and_chr: {
      appearance: 62,
      textEmphasisPosition: 62,
      textEmphasis: 62,
      textEmphasisStyle: 62,
      textEmphasisColor: 62,
      boxDecorationBreak: 62,
      maskImage: 62,
      maskMode: 62,
      maskRepeat: 62,
      maskPosition: 62,
      maskClip: 62,
      maskOrigin: 62,
      maskSize: 62,
      maskComposite: 62,
      mask: 62,
      maskBorderSource: 62,
      maskBorderMode: 62,
      maskBorderSlice: 62,
      maskBorderWidth: 62,
      maskBorderOutset: 62,
      maskBorderRepeat: 62,
      maskBorder: 62,
      maskType: 62
    },
    and_uc: {
      flex: 11.4,
      flexBasis: 11.4,
      flexDirection: 11.4,
      flexGrow: 11.4,
      flexFlow: 11.4,
      flexShrink: 11.4,
      flexWrap: 11.4,
      alignContent: 11.4,
      alignItems: 11.4,
      alignSelf: 11.4,
      justifyContent: 11.4,
      order: 11.4,
      transform: 11.4,
      transformOrigin: 11.4,
      transformOriginX: 11.4,
      transformOriginY: 11.4,
      backfaceVisibility: 11.4,
      perspective: 11.4,
      perspectiveOrigin: 11.4,
      transformStyle: 11.4,
      transformOriginZ: 11.4,
      animation: 11.4,
      animationDelay: 11.4,
      animationDirection: 11.4,
      animationFillMode: 11.4,
      animationDuration: 11.4,
      animationIterationCount: 11.4,
      animationName: 11.4,
      animationPlayState: 11.4,
      animationTimingFunction: 11.4,
      appearance: 11.4,
      userSelect: 11.4,
      textEmphasisPosition: 11.4,
      textEmphasis: 11.4,
      textEmphasisStyle: 11.4,
      textEmphasisColor: 11.4,
      clipPath: 11.4,
      maskImage: 11.4,
      maskMode: 11.4,
      maskRepeat: 11.4,
      maskPosition: 11.4,
      maskClip: 11.4,
      maskOrigin: 11.4,
      maskSize: 11.4,
      maskComposite: 11.4,
      mask: 11.4,
      maskBorderSource: 11.4,
      maskBorderMode: 11.4,
      maskBorderSlice: 11.4,
      maskBorderWidth: 11.4,
      maskBorderOutset: 11.4,
      maskBorderRepeat: 11.4,
      maskBorder: 11.4,
      maskType: 11.4,
      textSizeAdjust: 11.4,
      filter: 11.4,
      hyphens: 11.4,
      fontFeatureSettings: 11.4,
      breakAfter: 11.4,
      breakBefore: 11.4,
      breakInside: 11.4,
      columnCount: 11.4,
      columnFill: 11.4,
      columnGap: 11.4,
      columnRule: 11.4,
      columnRuleColor: 11.4,
      columnRuleStyle: 11.4,
      columnRuleWidth: 11.4,
      columns: 11.4,
      columnSpan: 11.4,
      columnWidth: 11.4,
      writingMode: 11.4
    },
    op_mini: {}
  }
};


================================================
FILE: src/prefix-data/static.js
================================================
import calc from 'inline-style-prefixer/static/plugins/calc';
import crossFade from 'inline-style-prefixer/static/plugins/crossFade';
import cursor from 'inline-style-prefixer/static/plugins/cursor';
import filter from 'inline-style-prefixer/static/plugins/filter';
import flex from 'inline-style-prefixer/static/plugins/flex';
import flexboxIE from 'inline-style-prefixer/static/plugins/flexboxIE';
import flexboxOld from 'inline-style-prefixer/static/plugins/flexboxOld';
import gradient from 'inline-style-prefixer/static/plugins/gradient';
import imageSet from 'inline-style-prefixer/static/plugins/imageSet';
import position from 'inline-style-prefixer/static/plugins/position';
import sizing from 'inline-style-prefixer/static/plugins/sizing';
import transition from 'inline-style-prefixer/static/plugins/transition';
let w = ['Webkit'];
let m = ['Moz'];
let ms = ['ms'];
let wm = ['Webkit', 'Moz'];
let wms = ['Webkit', 'ms'];
let wmms = ['Webkit', 'Moz', 'ms'];

export default {
  plugins: [
    calc,
    crossFade,
    cursor,
    filter,
    flex,
    flexboxIE,
    flexboxOld,
    gradient,
    imageSet,
    position,
    sizing,
    transition
  ],
  prefixMap: {
    transform: wms,
    transformOrigin: wms,
    transformOriginX: wms,
    transformOriginY: wms,
    backfaceVisibility: w,
    perspective: w,
    perspectiveOrigin: w,
    transformStyle: w,
    transformOriginZ: w,
    animation: w,
    animationDelay: w,
    animationDirection: w,
    animationFillMode: w,
    animationDuration: w,
    animationIterationCount: w,
    animationName: w,
    animationPlayState: w,
    animationTimingFunction: w,
    appearance: wm,
    userSelect: wmms,
    fontKerning: w,
    textEmphasisPosition: w,
    textEmphasis: w,
    textEmphasisStyle: w,
    textEmphasisColor: w,
    boxDecorationBreak: w,
    clipPath: w,
    maskImage: w,
    maskMode: w,
    maskRepeat: w,
    maskPosition: w,
    maskClip: w,
    maskOrigin: w,
    maskSize: w,
    maskComposite: w,
    mask: w,
    maskBorderSource: w,
    maskBorderMode: w,
    maskBorderSlice: w,
    maskBorderWidth: w,
    maskBorderOutset: w,
    maskBorderRepeat: w,
    maskBorder: w,
    maskType: w,
    textDecorationStyle: wm,
    textDecorationSkip: wm,
    textDecorationLine: wm,
    textDecorationColor: wm,
    filter: w,
    fontFeatureSettings: wm,
    breakAfter: wmms,
    breakBefore: wmms,
    breakInside: wmms,
    columnCount: wm,
    columnFill: wm,
    columnGap: wm,
    columnRule: wm,
    columnRuleColor: wm,
    columnRuleStyle: wm,
    columnRuleWidth: wm,
    columns: wm,
    columnSpan: wm,
    columnWidth: wm,
    writingMode: wms,
    flex: wms,
    flexBasis: w,
    flexDirection: wms,
    flexGrow: w,
    flexFlow: wms,
    flexShrink: w,
    flexWrap: wms,
    alignContent: w,
    alignItems: w,
    alignSelf: w,
    justifyContent: w,
    order: w,
    transitionDelay: w,
    transitionDuration: w,
    transitionProperty: w,
    transitionTimingFunction: w,
    backdropFilter: w,
    scrollSnapType: wms,
    scrollSnapPointsX: wms,
    scrollSnapPointsY: wms,
    scrollSnapDestination: wms,
    scrollSnapCoordinate: wms,
    shapeImageThreshold: w,
    shapeImageMargin: w,
    shapeImageOutside: w,
    hyphens: wmms,
    flowInto: wms,
    flowFrom: wms,
    regionFragment: wms,
    boxSizing: m,
    textAlignLast: m,
    tabSize: m,
    wrapFlow: ms,
    wrapThrough: ms,
    wrapMargin: ms,
    touchAction: ms,
    gridTemplateColumns: ms,
    gridTemplateRows: ms,
    gridTemplateAreas: ms,
    gridTemplate: ms,
    gridAutoColumns: ms,
    gridAutoRows: ms,
    gridAutoFlow: ms,
    grid: ms,
    gridRowStart: ms,
    gridColumnStart: ms,
    gridRowEnd: ms,
    gridRow: ms,
    gridColumn: ms,
    gridColumnEnd: ms,
    gridColumnGap: ms,
    gridRowGap: ms,
    gridArea: ms,
    gridGap: ms,
    textSizeAdjust: wms,
    borderImage: w,
    borderImageOutset: w,
    borderImageRepeat: w,
    borderImageSlice: w,
    borderImageSource: w,
    borderImageWidth: w
  }
};


================================================
FILE: src/prefixer.js
================================================
/**
 * Based on https://github.com/jsstyles/css-vendor, but without having to
 * convert between different cases all the time.
 *
 * @flow
 */

import createStaticPrefixer from 'inline-style-prefixer/static/createPrefixer';
import createDynamicPrefixer from 'inline-style-prefixer/dynamic/createPrefixer';
import ExecutionEnvironment from 'exenv';

import staticData from './prefix-data/static';
import dynamicData from './prefix-data/dynamic';

import {camelCaseToDashCase} from './camel-case-props-to-dash-case';

const prefixAll: (style: Object) => Object = createStaticPrefixer(staticData);
const InlineStylePrefixer = createDynamicPrefixer(dynamicData, prefixAll);

function transformValues(style) {
  return Object.keys(style).reduce((newStyle, key) => {
    let value = style[key];
    if (Array.isArray(value)) {
      value = value.join(';' + key + ':');
    } else if (
      value &&
      typeof value === 'object' &&
      typeof value.toString === 'function'
    ) {
      value = value.toString();
    }

    newStyle[key] = value;
    return newStyle;
  }, {});
}

// Flatten prefixed values that are arrays to strings.
//
// We get prefixed styles back in the form of:
// - `display: "flex"` OR
// - `display: "-webkit-flex"` OR
// - `display: [/* ... */, "-webkit-flex", "flex"]
//
// The last form is problematic for eventual use in the browser and server
// render. More confusingly, we have to do **different** things on the
// browser and server (noted inline below).
//
// https://github.com/FormidableLabs/radium/issues/958
function flattenStyleValues(style) {
  return Object.keys(style).reduce((newStyle, key) => {
    let val = style[key];
    if (Array.isArray(val)) {
      if (ExecutionEnvironment.canUseDOM) {
        // For the **browser**, when faced with multiple values, we just take
        // the **last** one, which is the original passed in value before
        // prefixing. This _should_ work, because `inline-style-prefixer`
        // we're just passing through what would happen without ISP.

        val = val[val.length - 1].toString();
      } else {
        // For the **server**, we just concatenate things together and convert
        // the style object values into a hacked-up string of like `display:
        // "-webkit-flex;display:flex"` that will SSR render correctly to like
        // `"display:-webkit-flex;display:flex"` but would otherwise be
        // totally invalid values.

        // We convert keys to dash-case only for the serialize values and
        // leave the real key camel-cased so it's as expected to React and
        // other parts of the processing chain.
        val = val.join(`;${camelCaseToDashCase(key)}:`);
      }
    }

    newStyle[key] = val;
    return newStyle;
  }, {});
}

let _hasWarnedAboutUserAgent = false;
let _lastUserAgent;
let _cachedPrefixer;

function getPrefixer(
  userAgent: ?string
): {
  +prefix: (style: Object) => Object,
  prefixedKeyframes: string
} {
  const actualUserAgent =
    userAgent || (global && global.navigator && global.navigator.userAgent);

  if (process.env.NODE_ENV !== 'production') {
    if (!actualUserAgent && !_hasWarnedAboutUserAgent) {
      /* eslint-disable no-console */
      console.warn(
        'Radium: userAgent should be supplied for server-side rendering. See ' +
          'https://github.com/FormidableLabs/radium/tree/master/docs/api#radium ' +
          'for more information.'
      );
      /* eslint-enable no-console */
      _hasWarnedAboutUserAgent = true;
    }
  }

  if (
    process.env.NODE_ENV === 'test' ||
    (!_cachedPrefixer || actualUserAgent !== _lastUserAgent)
  ) {
    if (actualUserAgent === 'all') {
      _cachedPrefixer = {
        prefix: prefixAll,
        prefixedKeyframes: 'keyframes'
      };
    } else {
      _cachedPrefixer = new InlineStylePrefixer({userAgent: actualUserAgent});
    }
    _lastUserAgent = actualUserAgent;
  }

  return _cachedPrefixer;
}

export function getPrefixedKeyframes(userAgent?: ?string): string {
  return getPrefixer(userAgent).prefixedKeyframes || 'keyframes';
}

// Returns a new style object with vendor prefixes added to property names and
// values.
export function getPrefixedStyle(style: Object, userAgent?: ?string): Object {
  const styleWithFallbacks = transformValues(style);
  const prefixer = getPrefixer(userAgent);
  const prefixedStyle = prefixer.prefix(styleWithFallbacks);
  const flattenedStyle = flattenStyleValues(prefixedStyle);
  return flattenedStyle;
}


================================================
FILE: src/resolve-styles.js
================================================
/* @flow */

import type {Config} from './config';

import appendImportantToEachValue from './append-important-to-each-value';
import cssRuleSetToString from './css-rule-set-to-string';
import getState from './get-state';
import getStateKey from './get-state-key';
import cleanStateKey from './clean-state-key';
import getRadiumStyleState from './get-radium-style-state';
import hash from './hash';
import {isNestedStyle, mergeStyles} from './merge-styles';
import Plugins from './plugins/';

import ExecutionEnvironment from 'exenv';
import React from 'react';
import StyleKeeper from './style-keeper';

const DEFAULT_CONFIG = {
  plugins: [
    Plugins.mergeStyleArray,
    Plugins.checkProps,
    Plugins.resolveMediaQueries,
    Plugins.resolveInteractionStyles,
    Plugins.keyframes,
    Plugins.visited,
    Plugins.removeNestedStyles,
    Plugins.prefix,
    Plugins.checkProps
  ]
};

// Gross
let globalState = {};

// Only for use by tests
let __isTestModeEnabled = false;

export type EnhancerApi = {
  state: Object,
  setState: Function,
  _radiumMediaQueryListenersByQuery?: {
    [query: string]: {remove: () => void}
  },
  _radiumMouseUpListener?: {remove: () => void},
  _radiumIsMounted: boolean,
  _lastRadiumState: Object,
  _extraRadiumStateKeys: any,
  _radiumStyleKeeper?: StyleKeeper
};

type ResolvedStyles = {
  extraStateKeyMap: {[key: string]: boolean},
  element: any
};

// Declare early for recursive helpers.
let resolveStyles = ((null: any): (
  component: any, // ReactComponent, flow+eslint complaining
  renderedElement: any,
  config: Config,
  existingKeyMap: {[key: string]: boolean},
  shouldCheckBeforeResolve: boolean,
  extraStateKeyMap?: {[key: string]: boolean}
) => ResolvedStyles);

const _shouldResolveStyles = function(component) {
  return component.type && !component.type._isRadiumEnhanced;
};

const _resolveChildren = function({
  children,
  component,
  config,
  existingKeyMap,
  extraStateKeyMap
}) {
  if (!children) {
    return children;
  }

  const childrenType = typeof children;

  if (childrenType === 'string' || childrenType === 'number') {
    // Don't do anything with a single primitive child
    return children;
  }

  if (childrenType === 'function') {
    // Wrap the function, resolving styles on the result
    return function() {
      const result = children.apply(this, arguments);

      if (React.isValidElement(result)) {
        const key = getStateKey(result);
        delete extraStateKeyMap[key];
        const {element} = resolveStyles(
          component,
          result,
          config,
          existingKeyMap,
          true,
          extraStateKeyMap
        );
        return element;
      }

      return result;
    };
  }

  if (React.Children.count(children) === 1 && children.type) {
    // If a React Element is an only child, don't wrap it in an array for
    // React.Children.map() for React.Children.only() compatibility.
    const onlyChild = React.Children.only(children);
    const key = getStateKey(onlyChild);
    delete extraStateKeyMap[key];
    const {element} = resolveStyles(
      component,
      onlyChild,
      config,
      existingKeyMap,
      true,
      extraStateKeyMap
    );
    return element;
  }

  return React.Children.map(children, function(child) {
    if (React.isValidElement(child)) {
      const key = getStateKey(child);
      delete extraStateKeyMap[key];
      const {element} = resolveStyles(
        component,
        child,
        config,
        existingKeyMap,
        true,
        extraStateKeyMap
      );
      return element;
    }

    return child;
  });
};

// Recurse over props, just like children
const _resolveProps = function({
  component,
  config,
  existingKeyMap,
  props,
  extraStateKeyMap
}) {
  let newProps = props;

  Object.keys(props).forEach(prop => {
    // We already recurse over children above
    if (prop === 'children') {
      return;
    }

    const propValue = props[prop];
    if (React.isValidElement(propValue)) {
      const key = getStateKey(propValue);
      delete extraStateKeyMap[key];
      newProps = {...newProps};
      const {element} = resolveStyles(
        component,
        propValue,
        config,
        existingKeyMap,
        true,
        extraStateKeyMap
      );
      newProps[prop] = element;
    }
  });

  return newProps;
};

const _buildGetKey = function({
  componentName,
  existingKeyMap,
  renderedElement
}) {
  // We need a unique key to correlate state changes due to user interaction
  // with the rendered element, so we know to apply the proper interactive
  // styles.
  const originalKey = getStateKey(renderedElement);
  const key = cleanStateKey(originalKey);

  let alreadyGotKey = false;
  const getKey = function() {
    if (alreadyGotKey) {
      return key;
    }

    alreadyGotKey = true;

    if (existingKeyMap[key]) {
      let elementName;
      if (typeof renderedElement.type === 'string') {
        elementName = renderedElement.type;
      } else if (renderedElement.type.constructor) {
        elementName =
          renderedElement.type.constructor.displayName ||
          renderedElement.type.constructor.name;
      }

      throw new Error(
        'Radium requires each element with interactive styles to have a unique ' +
          'key, set using either the ref or key prop. ' +
          (originalKey
            ? 'Key "' + originalKey + '" is a duplicate.'
            : 'Multiple elements have no key specified.') +
          ' ' +
          'Component: "' +
          componentName +
          '". ' +
          (elementName ? 'Element: "' + elementName + '".' : '')
      );
    }

    existingKeyMap[key] = true;

    return key;
  };

  return getKey;
};

const _setStyleState = function(component, key, stateKey, value) {
  if (!component._radiumIsMounted) {
    return;
  }

  const existing = getRadiumStyleState(component);
  const state = {_radiumStyleState: {...existing}};

  state._radiumStyleState[key] = {...state._radiumStyleState[key]};
  state._radiumStyleState[key][stateKey] = value;

  component._lastRadiumState = state._radiumStyleState;
  component.setState(state);
};

const _runPlugins = function({
  component,
  config,
  existingKeyMap,
  props,
  renderedElement
}) {
  // Don't run plugins if renderedElement is not a simple ReactDOMElement or has
  // no style.
  if (
    !React.isValidElement(renderedElement) ||
    typeof renderedElement.type !== 'string' ||
    !props.style
  ) {
    return props;
  }

  let newProps = props;

  const plugins = config.plugins || DEFAULT_CONFIG.plugins;

  const componentName =
    component.constructor.displayName || component.constructor.name;
  const getKey = _buildGetKey({
    renderedElement,
    existingKeyMap,
    componentName
  });
  const getComponentField = key => component[key];
  const getGlobalState = key => globalState[key];
  const componentGetState = (stateKey, elementKey) =>
    getState(component.state, elementKey || getKey(), stateKey);
  const setState = (stateKey, value, elementKey) =>
    _setStyleState(component, elementKey || getKey(), stateKey, value);

  const addCSS = css => {
    const styleKeeper = component._radiumStyleKeeper;
    if (!styleKeeper) {
      if (__isTestModeEnabled) {
        return {remove() {}};
      }

      throw new Error(
        'To use plugins requiring `addCSS` (e.g. keyframes, media queries), ' +
          'please wrap your application in the StyleRoot component. Component ' +
          'name: `' +
          componentName +
          '`.'
      );
    }

    return styleKeeper.addCSS(css);
  };

  let newStyle = props.style;

  plugins.forEach(plugin => {
    const result =
      plugin({
        ExecutionEnvironment,
        addCSS,
        appendImportantToEachValue,
        componentName,
        config,
        cssRuleSetToString,
        getComponentField,
        getGlobalState,
        getState: componentGetState,
        hash,
        mergeStyles,
        props: newProps,
        setState,
        isNestedStyle,
        style: newStyle
      }) || {};

    newStyle = result.style || newStyle;

    newProps =
      result.props && Object.keys(result.props).length
        ? {...newProps, ...result.props}
        : newProps;

    const newComponentFields = result.componentFields || {};
    Object.keys(newComponentFields).forEach(fieldName => {
      component[fieldName] = newComponentFields[fieldName];
    });

    const newGlobalState = result.globalState || {};
    Object.keys(newGlobalState).forEach(key => {
      globalState[key] = newGlobalState[key];
    });
  });

  if (newStyle !== props.style) {
    newProps = {...newProps, style: newStyle};
  }

  return newProps;
};

// Wrapper around React.cloneElement. To avoid processing the same element
// twice, whenever we clone an element add a special prop to make sure we don't
// process this element again.
const _cloneElement = function(renderedElement, newProps, newChildren) {
  // Only add flag if this is a normal DOM element
  if (typeof renderedElement.type === 'string') {
    newProps = {...newProps, 'data-radium': true};
  }

  return React.cloneElement(renderedElement, newProps, newChildren);
};

//
// The nucleus of Radium. resolveStyles is called on the rendered elements
// before they are returned in render. It iterates over the elements and
// children, rewriting props to add event handlers required to capture user
// interactions (e.g. mouse over). It also replaces the style prop because it
// adds in the various interaction styles (e.g. :hover).
//
/* eslint-disable max-params */
resolveStyles = function(
  component: EnhancerApi,
  renderedElement: any, // ReactElement
  config: Config = DEFAULT_CONFIG,
  existingKeyMap: {[key: string]: boolean} = {},
  shouldCheckBeforeResolve: boolean = false,
  extraStateKeyMap?: {[key: string]: boolean}
): ResolvedStyles {
  // The extraStateKeyMap is for determining which keys should be erased from
  // the state (i.e. which child components are unmounted and should no longer
  // have a style state).
  if (!extraStateKeyMap) {
    const state = getRadiumStyleState(component);
    extraStateKeyMap = Object.keys(state).reduce((acc, key) => {
      // 'main' is the auto-generated key when there is only one element with
      // interactive styles and if a custom key is not assigned. Because of
      // this, it is impossible to know which child is 'main', so we won't
      // count this key when generating our extraStateKeyMap.
      if (key !== 'main') {
        acc[key] = true;
      }
      return acc;
    }, {});
  }

  if (Array.isArray(renderedElement) && !renderedElement.props) {
    const elements = renderedElement.map(element => {
      // element is in-use, so remove from the extraStateKeyMap
      if (extraStateKeyMap) {
        const key = getStateKey(element);
        delete extraStateKeyMap[key];
      }

      // this element is an array of elements,
      // so return an array of elements with resolved styles
      return resolveStyles(
        component,
        element,
        config,
        existingKeyMap,
        shouldCheckBeforeResolve,
        extraStateKeyMap
      ).element;
    });
    return {
      extraStateKeyMap,
      element: elements
    };
  }

  // ReactElement
  if (
    !renderedElement ||
    // Bail if we've already processed this element. This ensures that only the
    // owner of an element processes that element, since the owner's render
    // function will be called first (which will always be the case, since you
    // can't know what else to render until you render the parent component).
    (renderedElement.props && renderedElement.props['data-radium']) ||
    // Bail if this element is a radium enhanced element, because if it is,
    // then it will take care of resolving its own styles.
    (shouldCheckBeforeResolve && !_shouldResolveStyles(renderedElement))
  ) {
    return {extraStateKeyMap, element: renderedElement};
  }
  const children = renderedElement.props.children;

  const newChildren = _resolveChildren({
    children,
    component,
    config,
    existingKeyMap,
    extraStateKeyMap
  });

  let newProps = _resolveProps({
    component,
    config,
    existingKeyMap,
    extraStateKeyMap,
    props: renderedElement.props
  });

  newProps = _runPlugins({
    component,
    config,
    existingKeyMap,
    props: newProps,
    renderedElement
  });

  // If nothing changed, don't bother cloning the element. Might be a bit
  // wasteful, as we add the sentinel to stop double-processing when we clone.
  // Assume benign double-processing is better than unneeded cloning.
  if (newChildren === children && newProps === renderedElement.props) {
    return {extraStateKeyMap, element: renderedElement};
  }

  const element = _cloneElement(
    renderedElement,
    newProps !== renderedElement.props ? newProps : {},
    newChildren
  );

  return {extraStateKeyMap, element};
};
/* eslint-enable max-params */

// Only for use by tests
if (process.env.NODE_ENV !== 'production') {
  resolveStyles.__clearStateForTests = function() {
    globalState = {};
  };
  resolveStyles.__setTestMode = function(isEnabled) {
    __isTestModeEnabled = isEnabled;
  };
}

export default resolveStyles;


================================================
FILE: src/style-keeper.js
================================================
/* @flow */

export default class StyleKeeper {
  _userAgent: string | typeof undefined;
  _listeners: Array<() => void>;
  _cssSet: {[id: string]: boolean};

  constructor(userAgent?: string) {
    this._userAgent = userAgent;
    this._listeners = [];
    this._cssSet = {};
  }

  subscribe(listener: () => void): {remove: () => void} {
    if (this._listeners.indexOf(listener) === -1) {
      this._listeners.push(listener);
    }

    return {
      // Must be fat arrow to capture `this`
      remove: () => {
        const listenerIndex = this._listeners.indexOf(listener);
        if (listenerIndex > -1) {
          this._listeners.splice(listenerIndex, 1);
        }
      }
    };
  }

  addCSS(css: string): {remove: () => void} {
    if (!this._cssSet[css]) {
      this._cssSet[css] = true;
      this._emitChange();
    }

    return {
      // Must be fat arrow to capture `this`
      remove: () => {
        delete this._cssSet[css];
        this._emitChange();
      }
    };
  }

  getCSS(): string {
    return Object.keys(this._cssSet).join('\n');
  }

  _emitChange() {
    this._listeners.forEach(listener => listener());
  }
}


================================================
FILE: src/test-helpers.js
================================================
import Color from 'color';
import React, {Component} from 'react';
import ReactDOM from 'react-dom';
import ShallowRenderer from 'react-test-renderer/shallow';
import TestUtils from 'react-dom/test-utils';

export function getRenderOutput(element) {
  const renderer = new ShallowRenderer();
  renderer.render(element);
  return renderer.getRenderOutput();
}

class Wrapper extends Component {
  render() {
    return this.props.children;
  }
}

export function renderFcIntoDocument(element) {
  return TestUtils.renderIntoDocument(<Wrapper>{element}</Wrapper>);
}

export function getElement(output, tagName) {
  return ReactDOM.findDOMNode(
    TestUtils.findRenderedDOMComponentWithTag(output, tagName)
  );
}

export function getElements(output, tagName) {
  return TestUtils.scryRenderedDOMComponentsWithTag(output, tagName).map(
    component => ReactDOM.findDOMNode(component)
  );
}

function cleanCSS(css) {
  return css.replace(/\s*\n\s*/g, '').replace(/\s*([{};:,])\s*/g, '$1');
}

export function expectCSS(styleElement, css) {
  // strip newlines and excess whitespace from both to normalize browsers.
  // IE9, for instance, does not include new lines in innerText.
  // Also allows us to write our expected CSS cleanly, without worring about the
  // format of the actual output.
  expect(cleanCSS(styleElement.innerText)).to.equal(cleanCSS(css));
}

export function expectColor(actual, expected) {
  expect(Color(actual).hex()).to.equal(Color(expected).hex());
}

export function createEsClass(renderFn) {
  class Composed extends Component {
    render() {
      return renderFn() || <div />;
    }
  }

  return Composed;
}


================================================
FILE: test/.eslintrc
================================================
parserOptions:
  sourceType: "script"


================================================
FILE: test/enhancer-test.js
================================================
'use strict';

const React = require('react');

const Enhancer = require('../lib/enhancer').default;
const createEsClass = require('../lib/test-helpers').createEsClass;
const render = require('./utils').render;

// Full assertion wrapper
const assertValidEnhancedComponent = Composed => {
  const Enhanced = Enhancer(Composed);
  const rendered = render(Enhanced);

  expect(render(Composed)).to.not.equal(rendered);
  expect(rendered)
    .to.contain('data-radium="true"')
    .and.to.contain('style="background:red;color:white"');
};

describe('Enhancer', () => {
  let testElement;

  beforeEach(() => {
    testElement = React.createElement('div', {
      style: [{background: 'red'}, {color: 'white'}]
    });
  });

  it('handles arrow functions', () => {
    const Composed = () => testElement;

    assertValidEnhancedComponent(Composed);
  });

  it('handles real functions', () => {
    const Composed = function() {
      return testElement;
    };

    assertValidEnhancedComponent(Composed);
  });

  it('handles babel-ified ES classes', () => {
    const Composed = createEsClass(() => testElement);

    assertValidEnhancedComponent(Composed);
  });

  // Regression test - `Radium wrapping not compatible with native classes?`
  // https://github.com/FormidableLabs/radium/issues/576
  it('handles native ES classes', () => {
    class Composed extends React.Component {
      render() {
        return testElement;
      }
    }

    assertValidEnhancedComponent(Composed);
  });

  it('handles native ES classes with bound methods', () => {
    class TestComponent extends React.Component {
      constructor() {
        super(...arguments);
        this.checkProp = this.checkProp.bind(this);
        this.checkState = this.checkState.bind(this);
        this.state = {v: 1};
      }

      componentWillReceiveProps() {
        this.setState(state => ({v: state.v + 1}));
      }

      checkProp() {
        return this.props.flag;
      }

      checkState() {
        return this.state.v;
      }

      touchState() {
        this.state.v += 1;
      }

      render() {
        return React.createElement('p', {}, [
          String(this.props.flag),
          ' == ',
          String(this.checkProp()),
          ', ',
          String(this.state.v),
          ' == ',
          String(this.checkState())
        ]);
      }
    }

    const cleanup = require('jsdom-global')();
    try {
      const Enhanced = Enhancer(TestComponent);
      const elt = React.createElement(Enhanced, {flag: true});
      const {configure, mount} = require('enzyme');
      const Adapter = require('enzyme-adapter-react-16');
      configure({adapter: new Adapter()});
      const wrapper = mount(elt);
      expect(wrapper.html()).is.equal(
        '<p data-radium="true">true == true, 1 == 1</p>'
      );
      wrapper.setProps({flag: false});
      expect(wrapper.html()).is.equal(
        '<p data-radium="true">false == false, 2 == 2</p>'
      );
      wrapper.setProps({flag: true});
      expect(wrapper.html()).is.equal(
        '<p data-radium="true">true == true, 3 == 3</p>'
      );
    } finally {
      cleanup();
    }
  }).timeout(10000);

  it('works with hooks', () => {
    const Composed = function() {
      // eslint-disable-next-line no-unused-vars
      const [counter, setCount] = React.useState(0);

      return testElement;
    };

    assertValidEnhancedComponent(Composed);
  });
});


================================================
FILE: test/mocha.opts
================================================
--require test/setup.js
--recursive


================================================
FILE: test/radium-test.js
================================================
'use strict';

const React = require('react');

const Radium = require('..');
const render = require('./utils').render;

describe('Radium blackbox SSR tests', () => {
  describe('inline prefixes', () => {
    let Wrapped;

    beforeEach(() => {
      class Composed extends React.Component {
        render() {
          return React.createElement('div', {
            style: {
              display: 'flex'
            }
          });
        }
      }

      Wrapped = Radium(Composed);
    });

    // Regression test: https://github.com/FormidableLabs/radium/issues/958
    it('handles no user agent', () => {
      const rendered = render(Wrapped);
      expect(rendered).to.contain(
        'style="display:-webkit-box;display:-moz-box;display:-ms-flexbox;' +
          'display:-webkit-flex;display:flex"'
      );
    });

    // Regression test: https://github.com/FormidableLabs/radium/issues/958
    it('handles non-matching user agent', () => {
      const rendered = render(Wrapped, {
        userAgent: 'testy-mctestface'
      });
      expect(rendered).to.contain(
        'style="display:-webkit-box;display:-moz-box;display:-ms-flexbox;' +
          'display:-webkit-flex;display:flex"'
      );
    });

    it('handles matching user agent', () => {
      const rendered = render(Wrapped, {
        userAgent:
          'Mozilla/5.0 (iPad; CPU OS 8_0_0 like Mac OS X) AppleWebKit/600.1.4' +
          ' (KHTML, like Gecko) CriOS/47.0.2526.107 Mobile/12H321 Safari/600.1.4'
      });
      expect(rendered).to.contain('style="display:-webkit-flex"');
    });
  });

  describe('keyframes', () => {
    let getComponent;

    beforeEach(() => {
      const testKeyFrames = Radium.keyframes(
        {
          '0%': {width: '10%'},
          '50%': {width: '50%'},
          '100%': {width: '10%'}
        },
        'test'
      );

      const style = {
        animation: 'x 3s ease 0s infinite',
        animationName: testKeyFrames,
        background: 'blue'
      };

      getComponent = radiumConfig => {
        class Component extends React.Component {
          render() {
            return React.createElement(
              Radium.StyleRoot,
              {radiumConfig},
              React.createElement('div', {
                style
              })
            );
          }
        }

        return Component;
      };
    });

    // Regression test: https://github.com/FormidableLabs/radium/issues/973
    it('handles no user agent', () => {
      const rendered = render(getComponent());
      expect(rendered).to.contain('<style>@keyframes test-radium-animation-');
    });

    // Regression test: https://github.com/FormidableLabs/radium/issues/973
    it('handles non-matching user agent', () => {
      const rendered = render(
        getComponent({
          userAgent: 'testy-mctestface'
        })
      );

      expect(rendered).to.contain('<style>@keyframes test-radium-animation-');
    });

    it('handles matching user agent', () => {
      const rendered = render(
        getComponent({
          userAgent:
            'Mozilla/5.0 (iPad; CPU OS 8_0_0 like Mac OS X) AppleWebKit/600.1.4' +
            ' (KHTML, like Gecko) CriOS/47.0.2526.107 Mobile/12H321 Safari/600.1.4'
        })
      );
      expect(rendered).to.contain(
        '<style>@-webkit-keyframes test-radium-animation-'
      );
    });
  });

  describe('render scenarios', () => {
    // Regression test: https://github.com/FormidableLabs/radium/issues/950
    it('handles rendered child array', () => {
      class Composed extends React.Component {
        render() {
          return [
            React.createElement('div', {
              key: 0,
              style: {
                color: 'blue'
              }
            }),
            React.createElement('div', {
              key: 1,
              style: {
                color: 'red'
              }
            })
          ];
        }
      }

      const rendered = render(Radium(Composed));
      expect(rendered).to.contain(
        '<div style="color:blue" data-radium="true"></div>' +
          '<div style="color:red" data-radium="true"></div>'
      );
    });

    it('handles rendered Fragments', () => {
      class Composed extends React.Component {
        render() {
          return React.createElement(React.Fragment, {
            children: [
              React.createElement('div', {
                key: 0,
                style: {
                  color: 'blue'
                }
              }),
              React.createElement('div', {
                key: 1,
                style: {
                  color: 'red'
                }
              })
            ]
          });
        }
      }

      const rendered = render(Radium(Composed));
      expect(rendered).to.contain(
        '<div style="color:blue" data-radium="true"></div>' +
          '<div style="color:red" data-radium="true"></div>'
      );
    });
  });
});


================================================
FILE: test/setup.js
================================================
'use strict';

const chai = require('chai');
const sinonChai = require('sinon-chai');

// Add chai plugins.
chai.use(sinonChai);

// Add test lib globals.
global.expect = chai.expect;

// Force NODE_ENV. Some things like caches behave differently.
process.env.NODE_ENV = process.env.NODE_ENV || 'test';


================================================
FILE: test/utils.js
================================================
'use strict';

const React = require('react');
const renderToString = require('react-dom/server').renderToString;

const render = (Component, opts) => {
  opts = opts || {};
  return renderToString(
    React.createElement(Component, {
      radiumConfig: {
        userAgent: opts.userAgent
      }
    })
  );
};

module.exports = {
  render
};


================================================
FILE: webpack.config.js
================================================
const path = require('path');

module.exports = {
  cache: true,
  entry: path.join(__dirname, 'src/index.js'),
  externals: [
    {
      react: {
        root: 'React',
        commonjs2: 'react',
        commonjs: 'react',
        amd: 'react'
      }
    }
  ],
  output: {
    path: path.join(__dirname, 'dist'),
    filename: 'radium.js',
    library: 'Radium',
    libraryTarget: 'umd',
    libraryExport: 'default'
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        include: [path.join(__dirname, 'src')],
        loader: 'babel-loader'
      }
    ]
  }
};


================================================
FILE: webpack.config.minified.js
================================================
const webpack = require('webpack');
const base = require('./webpack.config');

module.exports = Object.assign({}, base, {
  output: Object.assign({}, base.output, {
    filename: 'radium.min.js'
  }),
  plugins: [].concat(base.plugins || [], [
    new webpack.optimize.UglifyJsPlugin({
      compress: {
        warnings: false
      }
    }),
    new webpack.DefinePlugin({
      'process.env': {
        // Signal production mode for React JS and other libs.
        NODE_ENV: JSON.stringify('production')
      }
    })
  ])
});