[
  {
    "path": ".agignore",
    "content": "dist\nlib\n"
  },
  {
    "path": ".babelrc",
    "content": "{\n  \"plugins\": [\n    \"@babel/plugin-transform-destructuring\",\n    [\n      \"@babel/plugin-proposal-decorators\",\n      {\n        \"legacy\": true\n      }\n    ],\n    [\n      \"@babel/plugin-proposal-class-properties\",\n      {\n        \"loose\": true,\n      },\n    ],\n  ],\n  \"presets\": [\n    [\n      \"@babel/preset-env\",\n      {\n        \"modules\": false\n      }\n    ],\n    \"@babel/preset-flow\",\n    \"@babel/preset-react\"\n  ],\n  \"env\": {\n    \"commonjs\": {\n      \"plugins\": [\n        \"@babel/plugin-transform-destructuring\",\n        [\n          \"@babel/plugin-proposal-decorators\",\n          {\n            \"legacy\": true\n          }\n        ],\n        [\n          \"@babel/plugin-proposal-class-properties\",\n          {\n            \"loose\": true,\n          },\n        ],\n      ],\n      \"presets\": [\n        [\n          \"@babel/preset-env\",\n          {\n            \"modules\": \"commonjs\"\n          }\n        ],\n        \"@babel/preset-flow\",\n        \"@babel/preset-react\"\n      ],\n    }\n  }\n}\n"
  },
  {
    "path": ".editorconfig",
    "content": "# EditorConfig helps developers define and maintain consistent\n# coding styles between different editors and IDEs\n# editorconfig.org\n\nroot = true\n\n[*]\nindent_style = space\nindent_size = 2\n\nend_of_line = lf\ncharset = utf-8\ntrim_trailing_whitespace = true\ninsert_final_newline = true\n\n[*.md]\ntrim_trailing_whitespace = false\n"
  },
  {
    "path": ".eslintignore",
    "content": "dist\nlib\nes\ncoverage\nexamples/dist\nnode_modules\n"
  },
  {
    "path": ".eslintrc",
    "content": "parser: \"babel-eslint\"\n\nparserOptions:\n  ecmaVersion: 2018\n  sourceType: \"module\"\n  ecmaFeatures:\n    jsx: true\n\nplugins: [\"react\", \"flowtype\", \"prettier\", \"react-hooks\"]\n\nsettings:\n  react:\n    pragma: \"React\"\n    version: \"detect\"\n\nenv:\n    browser: true\n    node: true\n    amd: false\n    mocha: true\n    jasmine: false\n\nglobals:\n    require: true\n    module: true\n    expect: true\n    sinon: true\n    ReactElement: true\n    Reflect: true\n\nrules:\n\n    ###########################################################################\n    #                                                                         #\n    #   POSSIBLE ERRORS: these rules point out areas where you might have     #\n    #   made mistakes.                                                        #\n    #                                                                         #\n    ###########################################################################\n\n\n    no-cond-assign: 2          # disallow assignment in conditional expressions\n    no-console: 2              # disallow use of console\n    no-constant-condition: 2   # disallow use of constant expressions in conditions\n    no-control-regex: 2        # disallow control characters in regular expressions\n    no-debugger: 2             # disallow use of debugger\n    no-dupe-keys: 2            # disallow duplicate keys when creating object literals\n    no-empty: 2                # disallow empty statements\n    no-empty-character-class: 2          # disallow the use of empty character classes in regular expressions\n    no-ex-assign: 2            # disallow assigning to the exception in a catch block\n    no-extra-boolean-cast: 2   # disallow double-negation boolean casts in a boolean context\n    no-extra-parens: 0         # disallow unnecessary parentheses\n                               # NOTE: Allow for `return (/* JSX STUFF*/);` situations\n    no-extra-semi: 2           # disallow unnecessary semicolons\n    no-func-assign: 2          # disallow overwriting functions written as function declarations\n    no-inner-declarations: 2   # disallow function or variable declarations in nested blocks\n    no-invalid-regexp: 2       # disallow invalid regular expression strings in the RegExp\n                               #    constructor\n    no-irregular-whitespace: 2 # disallow irregular whitespace outside of strings and comments\n    no-negated-in-lhs: 2       # disallow negation of the left operand of an in expression\n    no-obj-calls: 2            # disallow the use of object properties of the global object (Math\n                               #    and JSON) as functions\n    no-regex-spaces: 2         # disallow multiple spaces in a regular expression literal\n    no-sparse-arrays: 2        # disallow sparse arrays\n    no-unreachable: 2          # disallow unreachable statements after a return, throw, continue,\n                               #    or break statement\n    use-isnan: 2               # disallow comparisons with the value NaN\n    valid-typeof: 2            # ensure that the results of typeof are compared against a\n                               #    valid string\n\n    valid-jsdoc:               # ensure JSDoc comments are valid\n        [1, { \"prefer\": { \"return\": \"returns\" }, \"requireReturn\": false }]\n\n    ###########################################################################\n    #                                                                         #\n    #   BEST PRACTICES: these rules are designed to prevent you from making   #\n    #   mistakes. They either prescribe a better way of doing something or    #\n    #   help you avoid pitfalls.                                              #\n    #                                                                         #\n    ###########################################################################\n\n    block-scoped-var: 2       # treat var statements as if they were block scoped\n    complexity: [2, 250]      # specify the maximum cyclomatic complexity allowed in a program\n    consistent-return: 0      # require return statements to either always or never specify values\n    curly: 2                  # specify curly brace conventions for all control statements\n    default-case: 2           # require default case in switch statements\n    dot-notation: 2           # encourages use of dot notation whenever possible\n    eqeqeq: 2                 # require the use of === and !==\n    guard-for-in: 2           # make sure for-in loops have an if statement\n    no-alert: 2               # disallow the use of alert, confirm, and prompt\n    no-caller: 2              # disallow use of arguments.caller or arguments.callee\n    no-div-regex: 2           # disallow division operators explicitly at beginning of regular\n                              #    expression\n    no-else-return: 2         # disallow else after a return in an if\n    no-eq-null: 2             # disallow comparisons to null without a type-checking operator\n    no-eval: 2                # disallow use of eval()\n    no-extend-native: 2       # disallow adding to native types\n    no-extra-bind: 2          # disallow unnecessary function binding\n    no-fallthrough: 2         # disallow fallthrough of case statements\n    no-floating-decimal: 2    # disallow the use of leading or trailing decimal points in numeric\n                              #    literals\n    no-implied-eval: 2        # disallow use of eval()-like methods\n    no-iterator: 2            # disallow usage of __iterator__ property\n    no-labels: 2              # disallow use of labeled statements\n    no-lone-blocks: 2         # disallow unnecessary nested blocks\n    no-loop-func: 0           # disallow creation of functions within loops\n    no-multi-spaces: 0        # disallow use of multiple spaces\n    no-multi-str: 2           # disallow use of multiline strings\n    no-native-reassign: 2     # disallow reassignments of native objects\n    no-new: 2                 # disallow use of new operator when not part of the assignment or\n                              #    comparison\n    no-new-func: 2            # disallow use of new operator for Function object\n    no-new-wrappers: 2        # disallows creating new instances of String,Number, and Boolean\n    no-octal: 2               # disallow use of octal literals\n    no-octal-escape: 2        # disallow use of octal escape sequences in string literals, such as\n                              #    `var foo = \"Copyright \\251\"`\n    no-process-env: 0         # disallow use of process.env\n    no-proto: 2               # disallow usage of __proto__ property\n    no-redeclare: 2           # disallow declaring the same variable more then once\n    no-return-assign: 0       # disallow use of assignment in return statement\n    no-script-url: 2          # disallow use of javascript urls.\n    no-self-compare: 2        # disallow comparisons where both sides are exactly the same\n    no-sequences: 2           # disallow use of comma operator\n    no-unused-expressions: 0  # disallow usage of expressions in statement position\n    no-void: 2                # disallow use of void operator\n    no-warning-comments: 0    # disallow usage of configurable warning terms in comments - e.g.\n                              #     TODO or FIXME\n    no-with: 2                # disallow use of the with statement\n    radix: 2                  # require use of the second argument for parseInt()\n    vars-on-top: 0            # requires to declare all vars on top of their containing scope\n    wrap-iife: [2, \"inside\"]  # require immediate function invocation to be wrapped in parentheses\n    yoda: [2, \"never\"]        # require or disallow Yoda conditions\n\n    ###########################################################################\n    #                                                                         #\n    #   STRICT MODE: these rules relate to using strict mode.                 #\n    #                                                                         #\n    ###########################################################################\n\n    strict: [2, \"global\"]     # require that all modules have use strict\n\n    ###########################################################################\n    #                                                                         #\n    #   VARIABLES: these rules have to do with variable declarations.         #\n    #                                                                         #\n    ###########################################################################\n\n    no-catch-shadow: 2                                 # disallow the catch clause parameter name being the same as a\n                                                       #    variable in the outer scope\n    no-delete-var: 2                                   # disallow deletion of variables\n    no-label-var: 2                                    # disallow labels that share a name with a variable\n    no-shadow: 2                                       # disallow declaration of variables already declared in the\n                                                       #    outer scope\n    no-shadow-restricted-names: 2                      # disallow shadowing of names such as arguments\n    no-undef: 2                                        # disallow use of undeclared variables unless mentioned in a\n                                                       #    /*global */ block\n    no-undef-init: 2                                   # disallow use of undefined when initializing variables\n    no-undefined: 0                                    # disallow use of undefined variable\n    no-unused-vars: 2                                  # disallow declaration of variables that are not used in\n                                                       #    the code\n    no-use-before-define: [2, { \"functions\": false }]  # disallow use of variables before they are defined\n    no-var: 2\n\n    ###########################################################################\n    #                                                                         #\n    #   NODE: these rules relate to functionality provided in Node.js.        #\n    #                                                                         #\n    ###########################################################################\n\n    handle-callback-err: 0        # enforces error handling in callbacks\n    no-mixed-requires: [2, true]  # disallow mixing regular variable and require declarations\n    no-new-require: 2             # disallow use of new operator with the require function\n    no-path-concat: 2             # disallow string concatenation with __dirname and __filename\n    no-process-exit: 0            # disallow process.exit()\n    no-restricted-modules: 0      # restrict usage of specified node modules\n    no-sync: 0                    # disallow use of synchronous methods\n\n    ###########################################################################\n    #                                                                         #\n    #   STYLISTIC ISSUES: these rules are purely matters of style and,        #\n    #   while valueable to enforce consistently across a project, are         #\n    #   quite subjective.                                                     #\n    #                                                                         #\n    ###########################################################################\n\n    brace-style:                   # enforce one true brace style\n        [2, \"1tbs\", { \"allowSingleLine\": true }]\n    camelcase:                     # require camel case names, except in properties\n        [2, { \"properties\": \"never\" }]\n    comma-spacing: 2               # enforce spacing before and after comma\n    consistent-this: [2, \"self\"]   # enforces consistent naming when capturing the current execution context\n    eol-last: 2                    # enforce newline at the end of file, with no multiple empty lines\n    func-names: 0                  # require function expressions to have a name\n    func-style: [0, \"expression\"] # enforces use of function expressions\n    key-spacing: 2                 # enforces spacing between keys and values in object literal properties\n    max-nested-callbacks: [2, 4]   # specify the maximum depth callbacks can be nested\n    new-cap: 0                     # require a capital letter for constructors\n    new-parens: 2                  # disallow the omission of parentheses when invoking a constructor with no arguments\n    no-array-constructor: 2        # disallow use of the Array constructor\n    no-lonely-if: 0                # disallow if as the only statement in an else block\n    no-mixed-spaces-and-tabs: 2    # disallow mixed spaces and tabs for indentation\n    no-nested-ternary: 2           # disallow nested ternary expressions\n    no-new-object: 2               # disallow use of the Object constructor\n    semi-spacing: 2        # disallow space before semicolon\n    no-spaced-func: 2              # disallow space between function identifier and application\n    no-ternary: 0                  # disallow the use of ternary operators\n\n    no-trailing-spaces: 2          # disallow trailing whitespace at the end of lines\n    no-multiple-empty-lines: 2     # disallow multiple empty lines\n    no-underscore-dangle: 0        # disallow dangling underscores in identifiers\n    one-var: 0                     # allow just one var statement per function\n    padded-blocks: 0               # enforce padding within blocks\n    quotes:                        # specify whether double or single quotes should be used\n        [2, \"single\", \"avoid-escape\"]\n    quote-props: 0                 # require quotes around object literal property names\n    semi: [2, \"always\"]            # require or disallow use of semicolons instead of ASI\n    sort-vars: 0                   # sort variables within the same declaration block\n    keyword-spacing:               # require a space before and after certain keywords\n      [\"error\", {\"before\": true, \"after\": true }]\n    space-before-blocks: 2         # require or disallow space before blocks\n    space-in-brackets: 0           # require or disallow spaces inside brackets\n    space-in-parens: 0             # require or disallow spaces inside parentheses\n    space-infix-ops: 2             # require spaces around operators\n    spaced-comment: 2         # require or disallow a space immediately following\n                                   #    the // in a line comment\n    wrap-regex: 0                  # require regex literals to be wrapped in parentheses\n    space-before-function-paren: [2, \"never\"]\n\n    ###########################################################################\n    #                                                                         #\n    #   LEGACY: these rules are included for compatibility with JSHint and    #\n    #   JSLint.  While the names of the rules may not match up with their     #\n    #   JSHint/JSLint counterpart, the functionality is the same.             #\n    #                                                                         #\n    ###########################################################################\n\n    max-depth: 0              # specify the maximum depth that blocks can be nested\n    max-len: [2, 100, 4]      # specify the maximum length of a line in your program\n    max-params: [2, 5]        # limits the number of parameters that can be used in the function\n                              #    declaration\n    max-statements: 0         # specify the maximum number of statement allowed in a function\n    no-bitwise: 0             # disallow use of bitwise operators\n    no-plusplus: 0            # disallow use of unary operators, ++ and --\n\n\n    ###########################################################################\n    #                                                                         #\n    #   React JSX                                                             #\n    #                                                                         #\n    ###########################################################################\n\n    jsx-quotes: 2\n    react/jsx-boolean-value: 2\n    react/jsx-no-undef: 2\n    react/jsx-sort-props: 2\n    react/jsx-uses-react: 2\n    react/jsx-uses-vars: 2\n    react/no-did-mount-set-state: 2\n    react/no-did-update-set-state: 2\n    react/no-multi-comp: 0\n    react/no-unknown-property: 2\n    react/prop-types: 0\n    react/react-in-jsx-scope: 2\n    react/self-closing-comp: 2\n    react/sort-comp: 2\n    react/sort-prop-types: 2\n    react/jsx-wrap-multilines: 2\n\n    ###########################################################################\n    #                                                                         #\n    #   Flowtype                                                             #\n    #                                                                         #\n    ###########################################################################\n    flowtype/define-flow-type: 2\n    flowtype/use-flow-type: 2\n\n\n    ###########################################################################\n    #                                                                         #\n    #   Prettier                                                              #\n    #                                                                         #\n    ###########################################################################\n    prettier/prettier: [\n      \"error\",\n      {\n        \"bracketSpacing\": false,\n        \"singleQuote\": true,\n        \"parser\": \"babylon\"\n      }\n    ]\n\n\n    ###########################################################################\n    #                                                                         #\n    #   React Hooks                                                           #\n    #                                                                         #\n    ###########################################################################\n    react-hooks/rules-of-hooks: 2\n    react-hooks/exhaustive-deps: 2\n"
  },
  {
    "path": ".flowconfig",
    "content": "[ignore]\n.*/dist/.*\n.*/lib/.*\n.*/node_modules/.*/node_modules/.*\n.*/node_modules/babel-core/.*\n.*/node_modules/babel-loader/.*\n.*/node_modules/babel-register/.*\n.*/node_modules/config-chain/.*\n.*/node_modules/flow-bin/.*\n.*/node_modules/inline-style-prefixer/.*\n.*/node_modules/invariant/.*\n.*/node_modules/mkdirp/.*\n.*/node_modules/nodemon/.*\n.*/node_modules/npmconf/.*\n.*/node_modules/react-hot-loader/.*\n.*/node_modules/rimraf/.*\n.*/node_modules/watchify/.*\n.*/node_modules/webpack-dev-server/.*\n.*/node_modules/webpack/.*\n.*/node_modules/hoist-non-react-statics/.*\n\n[include]\nsrc\n\n[libs]\ninterfaces\n\n[options]\nesproposal.class_static_fields=enable\nesproposal.class_instance_fields=enable\n"
  },
  {
    "path": ".gitignore",
    "content": "### SublimeText ###\n*.sublime-workspace\n\n### OSX ###\n.AppleDouble\n.DS_Store\n.LSOverride\nIcon\n\n# Thumbnails\n._*\n\n# Files that might appear on external disk\n.Spotlight-V100\n.Trashes\n\n### Windows ###\n# Windows image file caches\nehthumbs.db\nThumbs.db\n\n# Folder config file\nDesktop.ini\n\n# Recycle Bin used on file shares\n$RECYCLE.BIN/\n\n# App specific\n.tmp\n.vscode\n_site\ncoverage\ndist\nes\nlib\nnode_modules\nnpm-debug.log*\nyarn-error.log*\npackage-lock.json\n"
  },
  {
    "path": ".npmignore.publishr",
    "content": "/*\n!/es\n!/dist\n!/docs\n!/lib\n!/src\n!LICENSE.txt\n!CHANGELOG.md\n!README.md\n!package.json\n"
  },
  {
    "path": ".prettierignore",
    "content": "dist\nlib\nes\ncoverage\nexamples/dist\nnode_modules"
  },
  {
    "path": ".prettierrc",
    "content": "{\n  \"bracketSpacing\": false,\n  \"singleQuote\": true\n}\n"
  },
  {
    "path": ".travis.yml",
    "content": "dist: trusty\n\nlanguage: node_js\n\naddons:\n  chrome: stable\n\nnode_js:\n  - \"8\"\n  - \"10\"\n  - \"12\"\n\n# Use container-based Travis infrastructure.\nsudo: false\n\nbefore_install:\n  # GUI for real browsers.\n  - export DISPLAY=:99.0\n  - sh -e /etc/init.d/xvfb start\n  # Headless chrome\n  - google-chrome-stable --headless --disable-gpu --remote-debugging-port=9222 http://localhost &\n\nbranches:\n  only:\n    - master\n\nnotifications:\n  email:\n    on_success: change\n    on_failure: always\n\ncache: yarn\n\nscript:\n  # Output useful info for debugging.\n  - node --version\n  - yarn --version\n  # Make sure we can actually build the examples.\n  - yarn run build-examples\n  # Run tests\n  - yarn run lint\n  - yarn run build\n  - yarn run test-coverage\n  # Upload to coveralls, but don't _fail_ if coveralls is down.\n  - cat coverage/lcov.info | node_modules/.bin/coveralls || echo \"Coveralls upload failed\"\n"
  },
  {
    "path": "CHANGELOG.md",
    "content": "# Radium Changelog\n\n## 0.26.2\n\n- Update `peerDependencies` for React to include 17.\n\n## 0.26.1 (September 29, 2020)\n\n#### Dependency Upgrades\n\n- Bump handlebars from 4.1.2 to 4.5.3 (#1035)\n- Bump elliptic from 6.4.0 to 6.5.3 (#1045)\n- Bump eslint-utils from 1.3.1 to 1.4.3 (#1039)\n- Bump tree-kill from 1.2.0 to 1.2.2 (#1046)\n- Bump websocket-extensions from 0.1.1 to 0.1.4 (#1044)\n- Bump fstream from 1.0.11 to 1.0.12 (#1038)\n- Bump sshpk from 1.11.0 to 1.16.1 (#1037)\n- Bump webpack-dev-server from 2.11.1 to 3.1.11 (#1036)\n- Bump is-my-json-valid from 2.16.0 to 2.20.5 (#1048)\n- Bump http-proxy from 1.16.2 to 1.18.1 (#1047)\n\n#### Bug Fixes\n\n- Fix initial enhancer state for fn components (#1041)\n\n## 0.26.0 (September 5, 2019)\n\n#### Bug Fixes\n\n- Add hook and forwardRef support (#1027)\n\n#### Breaking Changes\n\n- Radium now requires React@16.8.0+ (#1027)\n\n## 0.25.2 (June 7, 2019)\n\n#### Bug Fixes\n\n- Bump handlebars from 4.0.6 to 4.1.2 (#1026)\n- Fixed bug with undefined \\_extraRadiumStateKeys (#1025)\n- Update unitless CSS property list and licensing (#1020)\n\n## 0.25.1 (December 16, 2018)\n\n#### Bug Fixes\n\n- Pass `snapshot` argument to `componentDidUpdate (#1013)\n\n#### Infra/Tooling\n\n- Fix console warnings when running examples (#1002)\n- Upgrade karma to 3.0 (#1003)\n- Refactor enhancer for readability (#1004)\n- Replace Isparta with Istanbul (#1011)\n- Prettier (#1012)\n\n## 0.25.0 (September 16, 2018)\n\n- Use `Reflect` to construct es native classes in a way that preserves the value of `this` used in\n  the constructor. (#999, #1001)\n- Handle multiple animationName props (#909)\n\n## 0.24.1 (July 9, 2018)\n\n- Make `<StyleSheet>` manually update `<style>` tag DOM, fixing media queries on component level flickering. (#626, #950)\n\n## 0.24.0 (March 29, 2018)\n\n- Fix `render` methods that return array of children or `React.Fragment`. (#950)\n- Upgrade tests to React 16.2 (for `Fragment` support)\n\n## 0.23.0 (March 15, 2018)\n\n- Support ES7 arrow functions for React class methods. (#738)\n\n## 0.22.1 (March 1, 2018)\n\n- Fix `keyframes` bug from prefixed inline styles. (#973)\n\n## 0.22.0 (February 9, 2018)\n\n### Breaking Changes\n\n- 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:\n  - When using webpack2+ to build code with `require('radium')` in it you will need to change that to become `require('radium').default`.\n  - 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;`.\n  - 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\n\n### Features\n\n- Add `es` ESM module export files.\n\n### Fixes\n\n- Fix `package.json:scripts.postinstall` task to correctly work for git-based dependencies.\n\n## 0.21.2 (January 25, 2018)\n\n- Fix multiple-value prefixed inline styles. (#962, #958, #951)\n\n## 0.21.1 (January 18, 2018)\n\n- Call `componentDidUpdate()` inherited method (#957).\n\n## 0.21.0 (January 8, 2018)\n\n- Automatically clear browser state of elements when unmounting and remounting (#956).\n  - `resolveStyles` returns `{ extraRadiumStateKeys, element }` instead of just `element`.\n\n## 0.20.1 (January 8, 2018)\n\n- Fix `v0.20.0` build.\n\n## 0.20.0 (January 8, 2018)\n\n- Upgrade `inline-style-prefixer` to version `^4.0.0`.\n\n## 0.19.6 (October 5, 2017)\n\n- Allow native ES classes to be used with the Radium enhancer.\n\n## 0.19.5 (October 5, 2017)\n\n- Enable React 16 in `peerDependencies` and update tests to React 16.\n\n## 0.19.4 (July 21, 2017)\n\n- Remove `.babelrc` from published npm registry package.\n\n## 0.19.3 (July 20, 2017)\n\n- Remove `publishr` from prod `dependencies` in npm registry package.\n\n## 0.19.2 (July 20, 2017)\n\n- Switch to `publishr` workflow. (#894, #731, #900)\n- Remove `rimraf` from prod `dependencies` in npm registry package.\n- Remove `postinstall` from `scripts` in npm registry package. (#794)\n\n## 0.19.1 (May 17, 2017)\n\n### Bug Fixes\n\n- 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).\n\n## 0.19.0 (May 15, 2017)\n\n### Improvements\n\n- Unreverts PropTypes-related diff, which is now a minor version instead of a patch\n\n## 0.18.4 (May 15, 2017)\n\n### Bug Fixes\n\n- Reverts PropTypes-related diff, which should have been a minor version instead of a patch\n\n## 0.18.3 (May 15, 2017)\n\n### Improvements\n\n- Update dependencies\n- Update deprecated React syntax in examples\n- Use React \"prop-types\" package\n\n## 0.18.2 (March 15, 2017)\n\n### Improvements\n\n- Update `inline-style-prefixer` to v2.0.5 (#880).\n- Use `React.PureComponent` to avoid unnecessary rendering (#868).\n- Update all dependencies\n\n## 0.18.1 (July 19, 2016)\n\n### Bug Fixes\n\n- Fix unused props warning when passing `radiumConfig` to `StyleRoot` (#787).\n\n## 0.18.0 (July 15, 2016)\n\n### Breaking Changes\n\n- Revert `content` auto-quoting in `Style` component (#783).\n\n### Bug Fixes\n\n- Silence React 15.2 unused props deprecation warning (#782).\n\n## 0.17.2 (July 12, 2016)\n\n### Bug Fixes\n\n- Fix `content` values in `Style` component (#719).\n- Improve stateless component check to work with native arrow functions (#771).\n\n### Improvements\n\n- Add support for `:disabled` pseudo-class (#689).\n- Add plugin to remove nested style objects and prevent `[Object object]` from rendering in the DOM (#703).\n\n## 0.17.1 (March 30, 2016)\n\n### Bug Fixes\n\n- Remove babel modules accidentally published as dependencies.\n\n### Improvements\n\n- Add support for `scopeSelector` without nested selectors in `Style` component.\n\n## 0.17.0 (March 24, 2016)\n\n### Bug Fixes\n\n- Upgrade `inline-style-prefixer` to version `1.0.3` with a fix for `display` values being removed in IE10.\n\n### Improvements\n\n- Add `TestMode` for controlling internal Radium state and behavior during tests.\n\n### Breaking Changes\n\n- `inline-style-prefixer` has updated vendor prefixes, removing some outdated prefixes like `-moz-transform`.\n\n## 0.16.6 (February 9, 2016)\n\n### Bug Fixes\n\n- The `lib/` directory did not get built property in 0.16.6. `lib/` now contains all changes from 0.16.5.\n\n## 0.16.5 (January 27, 2016)\n\n### Bug Fixes\n\n- Don't merge media query styles, fixes #550\n- Don't add className if empty, fixes #539\n\n### Improvements\n\n- 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`)\n- Add support for `:visited` styles:\n\n```jsx\nconst url = 'https://github.com/formidablelabs/radium';\nconst VisitedLink = Radium(() => (\n  <a href={url} style={{color: 'gray', ':visited': {color: 'black'}}}>\n    {url}\n  </a>\n));\n```\n\n## 0.16.4 (January 23, 2016)\n\n### Bug Fixes\n\n- Add `px` suffix if needed _before_ prefixing, since the list in `appendPxIfNeeded` does not include prefixed variants\n- Radium now calls `toString` on values itself, instead of relying on `inline-style-prefixer` or React to do so (they don't)\n\n### Improvements\n\n- Much lighter `npm install radium` by removing `babel` & co from `dependencies` before publishing\n- Radium now ignores children or props that are themselves Radium enhanced components, for a nice perf gain. Thanks @spacenick\n\n## 0.16.3 (January 21, 2016)\n\n- Published under the `test` tag, so not installable via npm latest\n- Forgot to add `-test` to the version\n- See changelog for 0.16.4 instead\n\n## 0.16.2 (January 8, 2016)\n\n### Bug Fixes\n\n- `<StyleSheet/> Component:`\n  - Bind the private method \\_onChange to the class instance\n  - Wrap setState in setTimeout and keep track of isMounted, #500\n  - Remove duplicate declaration of componentWillUnmount and move `this._isMounted = true` inside `componentDidMount`\n- Clear up docs around StyleRoot props, clear up issues in #496\n- Properly prefix keyframes: Use `inline-style-prefixer`’s `prefixedKeyframes`, #488\n- Ensure unique classname is generated for media query rules (hash on query _and_ ruleCSS string)\n\n## 0.16.1 (January 5, 2016)\n\n### Bug Fixes\n\n- `<StyleRoot>` no longer throws an error on unmount\n\n## 0.16.0 (January 5, 2016)\n\n### New Features\n\n- Server-side rendering for media queries and keyframes!\n\n### Breaking Changes\n\n- 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\n- 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\n- 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\n\n### Bug Fixes\n\n- Don't add extra media query listeners\n- Append px to numeric values on properties that don't accept unitless values\n\n### Improvements\n\n- Upgrade `inline-style-prefixer` to version 0.6.2 (Edge support)\n- Better error on duplicate keys\n- Upgrade to Babel 6\n- `<Style>` adds the `scopeSelector` to comma separated selectors\n- `<Style>` now accepts `radiumConfig` directly with the `userAgent` field\n\n## 0.15.3 (November 16, 2015)\n\n### Bug Fixes\n\n- Fix `\"files\"` section in `package.json`, should fix `npm install issues`\n\n## 0.15.2 (November 15, 2015)\n\n### Bug Fixes\n\n- IE vender prefix (ms) is now converted to dash-case correctly (-ms), thanks @PallasKatze, fixes #413\n- Super getChildContext is no longer ignored, thanks @richardfickling, fixes #412\n- Update to inline-style-prefixer v0.5.1 and changed the userAgent error to a console.warning\n\n## 0.15.1 (November 11, 2015)\n\n### Bug Fixes\n\n- Fix bug where active styles on multiple elements in the same component were not being removed on mouse up, fixes #410\n\n## 0.15.0 (November 11, 2015)\n\n### New Features\n\n- 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!\n- 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.\n\n### Breaking Changes\n\n- Style component no longer supports the `prefix` prop. It automatically gets the correct userAgent to pass to the prefixer from `radiumConfig` context\n\n### Bug Fixes\n\n- Radium wrapper now replaces the `style` propType, if defined, with array or object, fixing #396\n- Stateless components now support context, thanks @ThomWright\n- Static fields on stateless components are now transferred to the Radium wrapper (`defualtProps`, `propTypes`, etc)\n\n### Improvements\n\n- Code has been ES2015-ified: const and let, import/export, fat arrows,\n- Code has moved from `modules` to `src`\n\n## 0.14.3 (October 19, 2015)\n\n### Bug Fixes\n\n- camelCasePropsToDashCase handles uppercase first character correctly, fixing #387\n\n## 0.14.2 (October 17, 2015)\n\n### Bug Fixes\n\n- `:active` styles now triggered by space or enter\n- Callback `ref`s are now ignored, fixing #346\n- Heavy use of media queries no longer causes setState on an unmounted component, fixing #382\n\n### New Features\n\n- Stateless components (function taking props) are now supported\n\n### Improvements\n\n- Updated examples to for React 0.14.0\n- Allow replacing the prefixer used by `Radium.keyframes` and `<Style>`\n\n## 0.14.1 (September 15, 2015)\n\n### Bug Fixes\n\n- Don't require object-assign, which wasn't in normal dependencies\n\n## 0.14.0 (September 15, 2015)\n\n### Breaking Changes\n\n- `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))\n\n### New Features\n\n- 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))\n\n### Improvements\n\n- Flatten nested arrays in `style`, #344, thanks @almost\n- Universal/isomorphic example `npm run universal`, thanks @jurgob and @moret\n\n### Bug Fixes\n\n- Static properties are now copied again in IE < 10, #349, thanks @bobbyrenwick\n\n## 0.13.8 (August 24, 2015)\n\n### Bug Fixes\n\n- Fix static class methods disappearing in IE10, #313\n- Fix bug when using spread operator to pass props to a DOM element, #322\n\n## 0.13.7 (August 5, 2015)\n\n### Bug Fixes\n\n- Fix double resolving bug on props.children, #307\n\n## 0.13.6 (August 5, 2015)\n\n### New Features\n\n- Resolve styles on elements found in props and children as function, #298\n- [&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\n\n### Improvements\n\n- Show component name when warning in prefixer, #302, thanks @AnSavvides\n\n### Bug Fixes\n\n- Fix bug with \\_radiumDidResolveStyles that was breaking in React 0.14.0-beta2\n- Un-prefix values before checking isUnitlessNumber, #305, thanks @AnSavvides\n- Prevent errors from getters that do not have setters as static props of React components, #306, thanks @rolandpoulter\n\n## 0.13.5 (July 29, 2015)\n\n### Improvements\n\n- Support for old and tweener flexbox syntax, #279, thanks @sylvaingi\n- Only calls console.warn during development, not in production\n\n### Bug Fixes\n\n- Don't call resolveStyles more than once on the same element, #293\n- Allow null or undefined values in style, #263\n- Remove redundant babel-core from dependencies\n- Fix using numeric 0 as key to getState, #275\n- Don't wrap display name with \"Radium(...)\", #271\n- Fix older firefox missing `float` property, #277, thanks @bencao\n- Don't warn when mixing `transform` properties, #272, thanks @MattHauglustaine\n- Use for loop instead of Array prototype on the result of window.getComputedStyle, which was breaking Android web view, #267, thanks @bsbeeks\n- Ignore functions as children instead of blowing up, #265, thanks @Cottin\n\n### Misc\n\n- Add `test-dev` command for faster test feedback during development\n\n## 0.13.4 (July 14, 2015)\n\n### Bug Fixes\n\n- Fix regression with multiple states (tests were failing) from 0.13.3\n\n## 0.13.3 (July 13, 2015)\n\n### Bug Fixes\n\n- Fix hotloading component methods, #255, thanks @bobbyrenwick\n- Add displayName to shorthand warning, #253, thanks @bobbyrenwick\n- Warn and ignore null/undefined values, #250, thanks @AnSavvides\n- Don't warn when mixing border & borderRadius, and more shorthand warning updates, #246, thanks @nathanfriemel\n- Remove react from peerDependencies so Radium can be used with the 0.14 beta, #242, thanks @dariocravero\n- Fix transfering defaultProps and friends in IE <11, #241, thanks @bobbyrenwick\n- Don't alias matchMedia, fixes IE <11 bug, #238\n- Stop mutating style state, #237\n\n### Misc\n\n- Migrate tests to Karma, #240, thanks @exogen\n\n## 0.13.2 (June 25, 2015)\n\n### Bug Fixes\n\n- Use `console.warn` instead of `console.warning` (duh)\n\n## 0.13.1 (June 24, 2015)\n\n### New Features\n\n- [Radium.Config.setMatchMedia](https://github.com/FormidableLabs/radium/tree/master/docs/api#configsetmatchmedia) for server rendering\n\n### Bug Fixes\n\n- Don't resolve `style` prop of custom components, e.g. `<MyComponent style={...} />`, #202 (thanks @azazdeaz)\n- Fix not using dash-case on server with Style, #207\n- Fix server rendering when using fallback array of values (uses first one)\n- Fix numeric fallbacks, #221\n\n### Misc\n\n- Update dependencies\n- Warn when mixing longhand and shorthand\n\n## 0.13.0 (June 7, 2015)\n\n### Breaking Changes\n\n- `Radium.wrap` and `Radium.Enhancer` have been merged and moved to `Radium()`. Just wrap your component, `Button = Radium(Button);`, or use the decorator `@Radium`\n- `Style` component `rules` prop now takes an object instead of an array\n\n### New Features\n\n- Support fallback values (e.g. `#fff` for `rgba(...)`)\n\n### Bug Fixes\n\n- Fix react external in webpack config\n- Fix keyframes throwing on IE9 (now does feature detection)\n- Fix windows build\n- `string` and `number` children are no longer wrapped in an extraneous `<span>`\n\n## 0.12.2 (May 22, 2015)\n\n### Breaking Changes\n\nNone\n\n### New Features\n\n- Support prefixing for old flexbox implementations\n\n### Bug Fixes\n\n- Stop using react internals `CSSPropertyOperations.createMarkupForStyles`, which further reduces the build size\n\n## 0.12.1 (May 22, 2015)\n\n### Bug Fixes\n\n- Fix Enhancer (displayName, etc) #165\n- Reduce size of distributed build\n- Tests for prefixing, fix #161\n\n## 0.12.0 (May 16, 2015)\n\n### New Features\n\n- Support for ES6 classes with Radium.Enhancer\n- Vendor-prefixing\n- Keyframes animation helper\n- Radium.getState API\n\n### Bug Fixes\n\n- Fix errors during server-side rendering #141\n- Fix passing a single child or string #139\n\n## 0.11.1 (April 28, 2015)\n\n### Bug Fixes\n\n- Checked in updated `dist` files from `0.11.0`. Whoops!\n\n## 0.11.0 (April 28, 2015)\n\n### Breaking Changes\n\n- Complete API rewrite.\n  - Added new \"Wrap\" API.\n  - Wrap React component config with `Radium.wrap()` to automatically add\n    browser state handlers, media query behavior, and array-based style\n    resolution.\n- Removed all mixins.\n- Removed context-based media query behavior.\n  - Replaced with global media query handler.\n- Removed modifiers, states, and media queries from style objects.\n  - Replaced `modifiers` with array-based `style` prop resolution.\n  - Replaced `states` object with inline state keys: `:hover`\n  - Replaced `mediaQueries` object with inline queries:\n    `@media (min-width: 200px)`\n\n### New Features\n\n- Apply separate browser state styles to multiple elements in the same\n  component.\n"
  },
  {
    "path": "CONTRIBUTING.md",
    "content": "Thanks for contributing!\n\n## Development\n\n### Installing dependencies\n\n```bash\nnpm install\n```\n\nYou will find all building blocks that make up Radium in the [`src`](src) folder.\n\n### Testing\n\nFor ease, we've wrapped up all our individual test commands into:\n\n```sh\n$ npm run build-lib OR watch-lib  # One time / watched src file build\n$ npm run test                    # Single pass of all tests.\n$ npm run test-dev                # Watch test file changes and rerun tests automatically.\n```\n\n#### Frontend\n\nYou 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`.\n\nIf you are adding a new feature or some extra functionality, you should also make sure to accompany those changes with appropriate tests.\n\n#### Backend\n\nWe 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.\n\nTo get watched test files automagically updated and run, use `npm run test-node-dev`.\n\n### Linting\n\nBefore 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.\n\n### Flow\n\n- [Install flow](http://flowtype.org/docs/getting-started.html#installing-flow)\n- Run `flow` to check for missing annotations and static type check failures\n\n### Examples\n\nYou 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`.\n\nPlease 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`.\n\n### Before submitting a PR...\n\nThanks 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:\n- Run the tests (you did add tests, right?) using `npm run test-dev`.\n- Run lint and flow using `npm run lint`\n\n## Releasing a new version to NPM (only for project administrators):\n\n1. Update `CHANGELOG.md`, following format for previous versions\n2. Commit as \"Changelog for version 0.XX.Y\"\n3. 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.\n4. Run `npm publish` and publish to NPM if all is well.\n5. Run `git push && git push --tags`\n\n## Contributor Covenant Code of Conduct\n\n### Our Pledge\n\nIn the interest of fostering an open and welcoming environment, we as\ncontributors and maintainers pledge to making participation in our project and\nour community a harassment-free experience for everyone, regardless of age, body\nsize, disability, ethnicity, gender identity and expression, level of experience,\nnationality, personal appearance, race, religion, or sexual identity and\norientation.\n\n### Our Standards\n\nExamples of behavior that contributes to creating a positive environment\ninclude:\n\n* Using welcoming and inclusive language\n* Being respectful of differing viewpoints and experiences\n* Gracefully accepting constructive criticism\n* Focusing on what is best for the community\n* Showing empathy towards other community members\n\nExamples of unacceptable behavior by participants include:\n\n* The use of sexualized language or imagery and unwelcome sexual attention or\nadvances\n* Trolling, insulting/derogatory comments, and personal or political attacks\n* Public or private harassment\n* Publishing others' private information, such as a physical or electronic\n  address, without explicit permission\n* Other conduct which could reasonably be considered inappropriate in a\n  professional setting\n\n### Our Responsibilities\n\nProject maintainers are responsible for clarifying the standards of acceptable\nbehavior and are expected to take appropriate and fair corrective action in\nresponse to any instances of unacceptable behavior.\n\nProject maintainers have the right and responsibility to remove, edit, or\nreject comments, commits, code, wiki edits, issues, and other contributions\nthat are not aligned to this Code of Conduct, or to ban temporarily or\npermanently any contributor for other behaviors that they deem inappropriate,\nthreatening, offensive, or harmful.\n\n### Scope\n\nThis Code of Conduct applies both within project spaces and in public spaces\nwhen an individual is representing the project or its community. Examples of\nrepresenting a project or community include using an official project e-mail\naddress, posting via an official social media account, or acting as an appointed\nrepresentative at an online or offline event. Representation of a project may be\nfurther defined and clarified by project maintainers.\n\n### Enforcement\n\nInstances of abusive, harassing, or otherwise unacceptable behavior may be\nreported by contacting the project team at lauren.eastridge@formidable.com. All\ncomplaints will be reviewed and investigated and will result in a response that\nis deemed necessary and appropriate to the circumstances. The project team is\nobligated to maintain confidentiality with regard to the reporter of an incident.\nFurther details of specific enforcement policies may be posted separately.\n\nProject maintainers who do not follow or enforce the Code of Conduct in good\nfaith may face temporary or permanent repercussions as determined by other\nmembers of the project's leadership.\n\n### Attribution\n\nThis Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4,\navailable at [http://contributor-covenant.org/version/1/4][version]\n\n[homepage]: http://contributor-covenant.org\n[version]: http://contributor-covenant.org/version/1/4/\n[version]: http://contributor-covenant.org/version/1/4/\n\n### Architecture\n\n#### Enhancer HOC (enhancer.js)\n\n- Component is wrapped by `Radium` which runs it through `enhancer.js::enhanceWithRadium()`.\n- A composed component is created\n  - ES modules - `Reflect` is used to create enhanced component from prototype of original component\n  - Stateless components - a simple wrapper component is created which calls the original component\n  - Everything else - enhanced component is created by shallow copying the original component\n- An enhanced component is created\n  - static `_isRadiumEnhanced = true` property is added\n  - `_radiumStyleState = {}` is added to component state\n  - In render, `resolveStyles.js:resolveStyles` is called on the original rendered elements before they are returned. (see resolveStyles section)\n  - in componentDidUpdate, unused state keys are removed if necessary\n  - in componentWillUnmount, mouse and media query listeners are removed\n\n#### Style Resolver `resolveStyles.js::resolveStyles`\n\n- 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).\n- extraStateKeyMap is created by determining which state fields are no longer needed [?]\n- If the rendered elements are an array, they are recursively mapped over with resolveStyles\n- New children are resolved\n  - Recurse into children and call `resolveStyles` on each one\n- New props are resolved\n  - Recurse through props and call `resolveStyles` on any React components in props. Otherwise return props as-is\n- Plugins are run ONLY on simple ReactDOM elements that have a style prop\n  - plugins are called with the component, its props and a bunch of helper functions\n  - if the props were changed/added by any plugin, then return those\n  - see plugins section for more\n- If anything changed, clone the element and return that. Otherwise just return the element.\n\n#### Plugins\n\n- _merge-styles-array-plugin_ - If the component styles are an array, it deeply merges them. Otherwise, it returns them unmodified.\n- _check-props-plugin_ - Recursively checks props and warns (in dev mode) if shorthand and longhand are mixed.\n- _resolve-media-queries-plugin_ - Handles media query style entries (like '@media (...)': { ... }), applying them only when the appropriate media query is hit\n- _resolve-interaction-styles-plugin_ - Handles `:hover`, `:active` and `:focus` styles by adding/wrapping mouse event listeners with functions that update radium's state.\n- _keyframes-plugin_ - Handles keyframe styles\n- _visited-plugin_ - Handles `:visited` styles\n- _remove-nested-styles-plugin_ - Recursively flattens nested styles into a flat object\n- _prefix-plugin_ - Uses browser detection and a mapping to add vendor prefixes to CSS properties and values as needed\n"
  },
  {
    "path": "LICENSE-examples.md",
    "content": "The examples provided by Formidable Labs are for non-commercial testing and evaluation purposes only. Formidable Labs reserves all rights not expressly\ngranted.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL\nFORMIDABLE LABS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN\nAN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION\nWITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.\n"
  },
  {
    "path": "LICENSE.md",
    "content": "The MIT License (MIT)\n\nCopyright (c) 2015 Formidable Labs\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.\n"
  },
  {
    "path": "README.md",
    "content": "[![Maintenance Status][maintenance-image]](#maintenance-status)\n[![Travis Status][trav_img]][trav_site]\n[![AppVeyor Status][appveyor_img]][appveyor_site]\n[![Coverage Status][cov_img]][cov_site]\n[![NPM Package][npm_img]][npm_site]\n[![Dependency Status][david_img]][david_site]\n![gzipped size][size_img]\n\n# Radium\n\n```sh\nyarn add radium\n# or\nnpm install --save radium\n```\n\nRadium is a set of tools to manage inline styles on React elements. It gives you powerful styling capabilities without CSS.\n\n_Inspired by_ <a href=\"https://speakerdeck.com/vjeux/react-css-in-js\">React: CSS in JS</a>\nby <a href=\"https://twitter.com/Vjeux\">vjeux</a>.\n\n## Maintenance Status\n\n**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!\n\n## Overview\n\nEliminating CSS in favor of inline styles that are computed on the fly is a powerful approach, providing a number of benefits over traditional CSS:\n\n- Scoped styles without selectors\n- Avoids specificity conflicts\n- Source order independence\n- Dead code elimination\n- Highly expressive\n\nDespite 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.\n\nWhen 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.\n\nFor a short technical explanation, see [How does Radium work?](#how-does-radium-work).\n\n## Features\n\n- Conceptually simple extension of normal inline styles\n- Browser state styles to support `:hover`, `:focus`, and `:active`\n- Media queries\n- Automatic vendor prefixing\n- Keyframes animation helper\n- ES6 class and `createClass` support\n\n## Docs\n\n- [Overview][docs_guides]\n- [API Docs][docs_api]\n- [Frequently Asked Questions (FAQ)][docs_faq]\n\n## Usage\n\nStart 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!\n\n```jsx\n<Button kind=\"primary\">Radium Button</Button>\n```\n\n```jsx\nimport Radium from 'radium';\nimport React from 'react';\nimport color from 'color';\n\nclass Button extends React.Component {\n  static propTypes = {\n    kind: PropTypes.oneOf(['primary', 'warning']).isRequired\n  };\n\n  render() {\n    // Radium extends the style attribute to accept an array. It will merge\n    // the styles in order. We use this feature here to apply the primary\n    // or warning styles depending on the value of the `kind` prop. Since its\n    // all just JavaScript, you can use whatever logic you want to decide which\n    // styles are applied (props, state, context, etc).\n    return (\n      <button style={[styles.base, styles[this.props.kind]]}>\n        {this.props.children}\n      </button>\n    );\n  }\n}\n\nButton = Radium(Button);\n\n// You can create your style objects dynamically or share them for\n// every instance of the component.\nvar styles = {\n  base: {\n    color: '#fff',\n\n    // Adding interactive state couldn't be easier! Add a special key to your\n    // style object (:hover, :focus, :active, or @media) with the additional rules.\n    ':hover': {\n      background: color('#0074d9')\n        .lighten(0.2)\n        .hexString()\n    }\n  },\n\n  primary: {\n    background: '#0074D9'\n  },\n\n  warning: {\n    background: '#FF4136'\n  }\n};\n```\n\n## Importing Radium\n\nAs 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:\n\nIf you are using **ESM** with **webpack** or **`@std/esm`** with **Node.js**, imports like the following work fine without any gotchas:\n\n```js\nimport Radium from 'radium';\nimport Radium, {Style} from 'radium';\n```\n\nIf you are using **CommonJS** with **Node.js** or **webpack@1** requires work like normal:\n\n```js\nconst Radium = require('radium');\nconst {Style} = require('radium');\n```\n\nIf you are using **CommonJS** with **webpack@2+**, however, you must instead add `.default` to the root `Radium` object import:\n\n```js\nconst Radium = require('radium').default; // CHANGED: Must add `.default`\nconst {Style} = require('radium'); // Works as per normal\n```\n\nIf 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:\n\n```js\nresolve: {\n  alias: {\n    radium: require.resolve('radium/index');\n  }\n}\n```\n\nwhich 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`.\n\n_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.\n\n## Examples\n\nTo see the universal examples:\n\n```\nnpm install\nnpm run universal\n```\n\nTo see local client-side only examples in action, do this:\n\n```\nnpm install\nnpm run examples\n```\n\n## How does Radium work?\n\nFollowing is a short technical explanation of Radium's inner workings:\n\n- Wrap the `render` function\n- Recurse into the result of the original `render`\n- For each element:\n  - Add handlers to props if interactive styles are specified, e.g. `onMouseEnter` for `:hover`, wrapping existing handlers if necessary\n  - 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\n  - 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\n\n## More with Radium\n\nYou 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!\n\n## Contributing\n\nPlease see [CONTRIBUTING](https://github.com/FormidableLabs/radium/blob/master/CONTRIBUTING.md)\n\n[trav_img]: https://api.travis-ci.com/FormidableLabs/radium.svg\n[trav_site]: https://travis-ci.com/FormidableLabs/radium\n[cov_img]: https://img.shields.io/coveralls/FormidableLabs/radium.svg\n[cov_site]: https://coveralls.io/r/FormidableLabs/radium\n[npm_img]: https://img.shields.io/npm/v/radium.svg\n[npm_site]: https://www.npmjs.org/package/radium\n[david_img]: https://img.shields.io/david/FormidableLabs/radium.svg\n[david_site]: https://david-dm.org/FormidableLabs/radium\n[size_img]: https://badges.herokuapp.com/size/npm/radium/dist/radium.min.js?gzip=true&label=gzipped\n[docs_guides]: https://github.com/FormidableLabs/radium/tree/master/docs/guides\n[docs_api]: https://github.com/FormidableLabs/radium/tree/master/docs/api\n[docs_faq]: https://github.com/FormidableLabs/radium/tree/master/docs/faq\n[appveyor_img]: https://ci.appveyor.com/api/projects/status/github/formidablelabs/radium?branch=master&svg=true\n[appveyor_site]: https://ci.appveyor.com/project/ryan-roemer/radium\n[maintenance-image]: https://img.shields.io/badge/maintenance-archived-red.svg\n"
  },
  {
    "path": "appveyor.yml",
    "content": "# Test against this version of Node.js\nenvironment:\n  matrix:\n    - nodejs_version: \"8\"\n    - nodejs_version: \"10\"\n    - nodejs_version: \"12\"\n\n# Install scripts. (runs after repo cloning)\ninstall:\n  - ps: Install-Product node $env:nodejs_version\n  - yarn install\n\n# Post-install test scripts.\ntest_script:\n  # Output useful info for debugging.\n  - node --version\n  - yarn --version\n  # Run tests\n  - yarn run build\n  - yarn run test-ie\n\n\n# Don't actually build.\nbuild: off\n\nmatrix:\n  fast_finish: true\n\ncache:\n - node_modules\n - \"%LOCALAPPDATA%/Yarn\"\n"
  },
  {
    "path": "bower.json",
    "content": "{\n  \"name\": \"radium\",\n  \"homepage\": \"https://github.com/FormidableLabs/radium\",\n  \"description\": \"A set of tools to manage inline styles on React elements\",\n  \"main\": \"dist/radium.js\",\n  \"keywords\": [\n    \"react\",\n    \"style\",\n    \"inline\"\n  ],\n  \"license\": \"MIT\",\n  \"ignore\": [\n    \"**/.*\",\n    \"CHANGELOG.md\",\n    \"CONTRIBUTING.md\",\n    \"LICENSE.md\",\n    \"README.md\",\n    \"appveyor.yml\",\n    \"coverage\",\n    \"docs\",\n    \"examples\",\n    \"karma.conf.coverage.js\",\n    \"karma.conf.js\",\n    \"lib\",\n    \"src\",\n    \"es\",\n    \"scripts\",\n    \"node_modules\",\n    \"package.json\",\n    \"webpack.config.js\",\n    \"webpack.config.minified.js\"\n  ]\n}\n"
  },
  {
    "path": "docs/README.md",
    "content": "### Overview\n\nThe `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.\n\n### Deployment\n\nSubmit 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.\n"
  },
  {
    "path": "docs/api/README.md",
    "content": "# Radium API\n\n**Table of Contents**\n\n- [Sample Style Object](#sample-style-object)\n- [Radium](#radium)\n  - [config.matchMedia](#configmatchmedia)\n  - [config.plugins](#configplugins)\n  - [config.userAgent](#configuseragent)\n- [getState](#getstate)\n- [keyframes](#keyframes)\n- [Plugins](#plugins)\n- [Style Component](#style-component)\n- [StyleRoot Component](#styleroot-component)\n- [TestMode](#testmode)\n\n\n## Sample Style Object\n\n```jsx\nvar styles = {\n  base: {\n    backgroundColor: '#0074d9',\n    border: 0,\n    borderRadius: '0.3em',\n    color: '#fff',\n    cursor: 'pointer',\n    fontSize: 16,\n    outline: 'none',\n    padding: '0.4em 1em',\n\n    ':hover': {\n      backgroundColor: '#0088FF'\n    },\n\n    ':focus': {\n      backgroundColor: '#0088FF'\n    },\n\n    ':active': {\n      backgroundColor: '#005299',\n      transform: 'translateY(2px)',\n    },\n\n    // Media queries must start with @media, and follow the same syntax as CSS\n    '@media (min-width: 992px)': {\n      padding: '0.6em 1.2em'\n    },\n\n    '@media (min-width: 1200px)': {\n      padding: '0.8em 1.5em',\n\n      // Media queries can also have nested :hover, :focus, or :active states\n      ':hover': {\n        backgroundColor: '#329FFF'\n      }\n    }\n  },\n\n  red: {\n    backgroundColor: '#d90000',\n\n    ':hover': {\n      backgroundColor: '#FF0000'\n    },\n\n    ':focus': {\n      backgroundColor: '#FF0000'\n    },\n\n    ':active': {\n      backgroundColor: '#990000'\n    }\n  }\n};\n```\n\n## Radium\n\n`Radium` itself is a higher-order component, whose job is to:\n- Provide initial state\n- Process the `style` attribute after `render()`\n- Clean up any resources when the component unmounts\n\nUsage with `class`:\n\n```jsx\nclass MyComponent extends React.Component { ... }\n\nMyComponent = Radium(MyComponent);\n```\n\nUsage with `createClass`:\n\n```jsx\nvar MyComponent = React.createClass({ ... });\nexport default Radium(MyComponent);\n```\n\n`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:\n- Merge arrays of styles passed as the `style` attribute\n- Automatically vendor prefix the `style` object\n\nYou can also pass a configuration object to `Radium`:\n\n```jsx\nclass MyComponent extends React.Component { ... }\n\nMyComponent = Radium({matchMedia: mockMatchMedia})(MyComponent);\n\n// or with createClass\n\nvar MyComponent = React.createClass({ ... });\nmodule.exports = Radium({matchMedia: mockMatchMedia})(MyComponent);\n```\n\nYou may want to have project-wide Radium settings. Simply create a function that\nwraps Radium, and use it instead of `Radium`:\n\n```jsx\nfunction ConfiguredRadium(component) {\n  return Radium(config)(component);\n}\n\n// Usage\nclass MyComponent extends React.Component { ... }\n\nMyComponent = ConfiguredRadium(MyComponent);\n```\n\nRadium can be called any number of times with a config object, and later configs\nwill be merged with and overwrite previous configs. That way, you can still\noverride settings on a per-component basis:\n\n```jsx\nclass MySpecialComponent extends React.Component { ... }\n\nMySpecialComponent = ConfiguredRadium(config)(MySpecialComponent);\n```\n\nAlternatively, 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:\n\n```jsx\n<App radiumConfig={{userAgent: req.headers['user-agent']}} />\n```\n\nThe 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.\n\nPossible configuration values:\n- [`matchMedia`](#configmatchmedia)\n- [`plugins`](#configplugins)\n- [`userAgent`](#configuseragent)\n\n### config.matchMedia\n\nAllows 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:\n\n**Server**\n\nYou can require `Radium` on the server / using CommonJS with:\n\n```jsx\nvar Radium = require('radium');\n```\n\n```jsx\nvar ConfiguredRadium = require('./configured-radium');\nvar matchMediaMock = require('match-media-mock').create();\nConfiguredRadium.setMatchMedia(matchMediaMock);\n\napp.get('/app/:width/:height', function(req, res) {\n  matchMediaMock.setConfig({\n    type: 'screen',\n    width: req.params.width,\n    height: req.params.height,\n  });\n\n  // Your application code uses `ConfiguredRadium` instead of `Radium`\n  var html = React.renderToString(<RadiumApp />);\n\n  res.end(html);\n});\n```\n\n**ConfiguredRadium.js**\n\n```jsx\nvar Radium = require('radium');\n\nvar _matchMedia = null;\n\nfunction ConfiguredRadium(component) {\n  return Radium({\n    matchMedia: _matchMedia\n  })(component);\n}\n\nConfiguredRadium.setMatchMedia = function (matchMedia) {\n  _matchMedia = matchMedia;\n};\n\nmodule.exports = ConfiguredRadium;\n```\n\n**MyComponent.js**\n\n```jsx\nvar ConfiguredRadium = require('./configured-radium');\n\nclass MyComponent extends React.Component { ... }\n\nMyComponent = ConfiguredRadium(MyComponent);\n```\n\nSee [#146](https://github.com/FormidableLabs/radium/pull/146) for more info.\n\n### config.plugins\n**Array&lt;Plugin&gt;**\n\nReplaces all plugins with the provided set. See [Plugins](#plugins) for more information.\n\nBecause 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:\n\n```jsx\nfunction styleLogger({componentName, style}) {\n  console.log('Name: ' + componentName, style);\n}\n\nfunction ConfiguredRadium(component) {\n  return Radium({\n    plugins: [\n      Radium.Plugins.mergeStyleArray,\n      Radium.Plugins.checkProps,\n      Radium.Plugins.resolveMediaQueries,\n      Radium.Plugins.resolveInteractionStyles,\n      Radium.Plugins.keyframes,\n      Radium.Plugins.visited,\n      Radium.Plugins.removeNestedStyles,\n      Radium.Plugins.prefix,\n      styleLogger,\n      Radium.Plugins.checkProps,\n    ],\n  })(component);\n}\n\n// Usage\nclass MyComponent extends React.Component { ... }\n\nMyComponent = ConfiguredRadium(MyComponent);\n```\n\nYou 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.\n\nYou 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.\n\n### config.userAgent\n**string**\n\nSet 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:\n\n```jsx\n<App radiumConfig={{userAgent: req.headers['user-agent']}} />\n```\n\nFor a complete example, see [examples/server.js](https://github.com/FormidableLabs/radium/blob/master/examples/server.js).\n\n## getState\n\n**Radium.getState(state, elementKey, value)**\n\n_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_\n\nQuery 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.\n\nNote 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': {}`.\n\nParameters:\n\n- **state** - you'll usually pass `this.state`, but sometimes you may want to pass a previous state, like in `shouldComponentUpdate`, `componentWillUpdate`, and `componentDidUpdate`\n- **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)\n- **value** - one of the following: `:active`, `:focus`, and `:hover`\n- **returns** `true` or `false`\n\nUsage:\n\n```jsx\nRadium.getState(this.state, 'button', ':hover')\n```\n\n## keyframes\n\n**Radium.keyframes(keyframes, [name])**\n\nCreate 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).\n\n`keyframes` takes an optional second parameter, a `name` to prepend to the animation's name to aid in debugging.\n\n```jsx\nclass Spinner extends React.Component {\n  render () {\n    return (\n      <div>\n        <div style={styles.inner} />\n      </div>\n    );\n  }\n}\n\nSpinner = Radium(Spinner);\n\nvar pulseKeyframes = Radium.keyframes({\n  '0%': {width: '10%'},\n  '50%': {width: '50%'},\n  '100%': {width: '10%'},\n}, 'pulse');\n\nvar styles = {\n  inner: {\n    // Use a placeholder animation name in `animation`\n    animation: 'x 3s ease 0s infinite',\n    // Assign the result of `keyframes` to `animationName`\n    animationName: pulseKeyframes,\n    background: 'blue',\n    height: '4px',\n    margin: '0 auto',\n  }\n};\n```\n\nMultiple keyframe animations can be chained together by passing an array of `keyframes` objects\nas the value of the `animationName` property. These keyframe animations timing and iteration count\ncan be managed with [traditional css rules for keyframe animations](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations)\n\n```jsx\n@Radium\nclass Spinner extends React.Component {\n  render () {\n    return (\n      <div>\n        <div style={styles.inner} />\n      </div>\n    );\n  }\n}\n\nconst pulseAnimation = Radium.keyframes(\n  {\n    '0%': {width: '10%'},\n    '50%': {width: '50%'},\n    '100%': {width: '10%'},\n  },\n  'pulse',\n);\n\nconst blendAnimation = Radium.keyframes(\n  {\n    '0%': {background: 'red'},\n    '25%': {background: 'yellow'},\n    '50%': {background: 'green'},\n    '75%': {background: 'blue'},\n    '100%': {background: 'red'},\n  },\n  'blend',\n);\n\nconst styles = {\n  inner: {\n    animationName: [pulseAnimation, blendAnimation],\n    animationDuration: '2.5s, 8s',\n    animationIterationCount: 'infinite, infinite',\n    animationTimingFunction: 'linear, cubic-bezier(0.1, 0.7, 1.0, 0.1)',\n    height: '4px',\n    margin: '0 auto',\n  },\n};\n```\n\n## Plugins\n\n### Built-in Plugins\n\nAlmost 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:\n\n- `mergeStyleArray` - If the `style` attribute is an array, intelligently merge each style object in the array. Deep merges nested style objects, such as `:hover`.\n- `checkProps` - Performs basic correctness checks, such as ensuring you do not mix longhand and shorthand properties.\n- `resolveMediaQueries` - Handles style entries like `'@media (...)': { ... }`, applying them only when the appropriate media query is hit. Can be configured using [config.matchMedia](#configmatchmedia).\n- `resolveInteractionStyles` - Handles `':hover'`, `':focus'`, and `':active'` styles.\n- `prefix` - Uses in-browser detection and a small mapping to add vendor prefixes to CSS properties and values.\n- `checkProps` - Same as above, just run after everything else.\n\n### Plugin Interface\n\nAll 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>;`.\n\n**PluginConfig**\n```jsx\ntype PluginConfig = {\n  // Adds a chunk of css to the root style sheet\n  addCSS: (css: string) => {remove: () => void},\n\n  // Helper function when adding CSS\n  appendImportantToEachValue: (style: Object) => Object;\n\n  // May not be readable if code has been minified\n  componentName: string,\n\n  // The Radium configuration\n  config: Config,\n\n  // Converts an object of CSS rules to a string, for use with addCSS\n  cssRuleSetToString: (\n    selector: string,\n    rules: Object,\n    userAgent: ?string,\n  ) => string,\n\n  // Retrieve the value of a field on the component\n  getComponentField: (key: string) => any,\n\n  // Retrieve the value of a field global to the Radium module\n  // Used so that tests can easily clear global state.\n  getGlobalState: (key: string) => any,\n\n  // Retrieve the value of some state specific to the rendered element.\n  // Requires the element to have a unique key or ref or for an element key\n  // to be passed in.\n  getState: (stateKey: string, elementKey?: string) => any,\n\n  // Helper function when adding CSS\n  hash: (data: string) => string,\n\n  // Returns true if the value is a nested style object\n  isNestedStyle: (value: any) => bool,\n\n  // Access to the mergeStyles utility\n  mergeStyles: (styles: Array<Object>) => Object,\n\n  // The props of the rendered element. This can be changed by each plugin,\n  // and successive plugins will see the result of previous plugins.\n  props: Object,\n\n  // Calls setState on the component with the given key and value.\n  // By default this is specific to the rendered element, but you can override\n  // by passing in the `elementKey` parameter.\n  setState: (stateKey: string, value: any, elementKey?: string) => void,\n\n  // The style prop of the rendered element. This can be changed by each plugin,\n  // and successive plugins will see the result of previous plugins. Kept\n  // separate from `props` for ease of use.\n  style: Object,\n\n  // uses the exenv npm module\n  ExecutionEnvironment: {\n    canUseEventListeners: bool,\n    canUseDOM: bool,\n  }\n};\n```\n\n**PluginResult**\n\n```jsx\ntype PluginResult = ?{\n  // Merged into the component directly. Useful for storing things for which you\n  // don't need to re-render, event subscriptions, for instance.\n  componentFields?: Object,\n\n  // Merged into a Radium controlled global state object. Use this instead of\n  // module level state for ease of clearing state between tests.\n  globalState?: Object,\n\n  // Merged into the rendered element's props.\n  props?: Object,\n\n  // Replaces (not merged into) the rendered element's style property.\n  style?: Object,\n};\n```\n\nIf 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'`:\n\n```jsx\n{\n  'type=success': {color: 'blue'},\n  'type=error': {color: 'red'},\n  'type=warning': {color: 'yellow'},\n}\n```\n\n`enumPropResolver` should then return an object with the style property equal to:\n\n```jsx\n{\n  color: 'red'\n}\n```\n\n## Style Component\n\nThe `<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.\n\nWithout 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.\n\nIf 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\n\n```jsx\n<Style\n  scopeSelector=\".scoping-class\"\n  rules={{\n    color: 'blue',\n    span: {\n      fontFamily: 'Lucida Console, Monaco, monospace'\n    }\n  }}\n/>\n```\n\nwill return:\n\n```html\n<style>\n.scoping-class {\n  color: 'blue';\n}\n.scoping-class span {\n  font-family: 'Lucida Console, Monaco, monospace';\n}\n</style>\n```\n\n### Props\n\n#### rules\n\nAn 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.\n\n```jsx\nvar Radium = require('radium');\nvar Style = Radium.Style;\n// or\nimport Radium, { Style } from 'radium';\n\n<Style rules={{\n  body: {\n    margin: 0,\n    fontFamily: 'Helvetica Neue, Helvetica, Arial, sans-serif'\n  },\n  html: {\n    background: '#ccc',\n    fontSize: '100%'\n  },\n  mediaQueries: {\n    '(min-width: 550px)': {\n      html:  {\n        fontSize: '120%'\n      }\n    },\n    '(min-width: 1200px)': {\n      html:  {\n        fontSize: '140%'\n      }\n    }\n  },\n  'h1, h2, h3': {\n    fontWeight: 'bold'\n  }\n}} />\n```\n\n\n#### scopeSelector\n\nA 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.\n\n```jsx\n<div className=\"TestClass\">\n  <Style\n    scopeSelector=\".TestClass\"\n    rules={{\n      h1: {\n        fontSize: '2em'\n      }\n    }}\n  />\n</div>\n```\n\n### Notes\n\nSome 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\nas strings in Radium style objects, you must explicitly add quotes to string value for these properties: `content: \"'Hello World!'\"`.\n\n## StyleRoot Component\n\n_Props: Accepts all props valid on `div` and optional `radiumConfig`_\n\nUsually 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.\n\nStyleRoot transfers all of its props to the rendered `div`, and is itself wrapped in Radium, so you can pass it inline styles or `radiumConfig`.\n\n```jsx\nimport {StyleRoot} from 'radium';\n\nclass App extends React.Component {\n  render() {\n    return (\n      <StyleRoot>\n        ... rest of your app ...\n      </StyleRoot>\n    );\n  }\n}\n```\n\n**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.\n\n```jsx\n// COUNTEREXAMPLE, DOES NOT WORK\n<StyleRoot>\n  <div style={{'@media print': {color: 'black'}}} />\n</StyleRoot>\n```\n\nYou'll have to break out that piece into a proper component:\n\n```jsx\nclass BodyText extends React.Component {\n  render() {\n    return <div style={{'@media print': {color: 'black'}}} />;\n  }\n}\n\nclass App extends React.Component {\n  render() {\n    return (\n      <StyleRoot>\n        <BodyText>...</BodyText>\n      </StyleRoot>\n    );\n  }\n}\n```\n\n## TestMode\n\nDirectly 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.\n\n- `Radium.TestMode.clearState()` - clears the global Radium state, currently only the cache of media query listeners.\n- `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.\n- `Radium.TestMode.disable()` - disables \"test mode\"\n"
  },
  {
    "path": "docs/faq/README.md",
    "content": "# Frequently Asked Questions\n\n- [How do I use pseudo-selectors like `:checked`, `:last`, `:before`, or `:after`?](#how-do-i-use-pseudo-selectors-like-checked-last-before-or-after)\n- [How can I use `ReactCSSTransitionGroup` without any classes?](#how-can-i-use-reactcsstransitiongroup-without-any-classes)\n- [How can I use Radium with jsbin?](#how-can-i-use-radium-with-jsbin)\n- [Can I use my favourite CSS/LESS/SASS syntax?](#can-i-use-my-favourite-csslesssass-syntax)\n- [Can I use Radium with Bootstrap?](#can-i-use-radium-with-bootstrap)\n- [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)\n- [How can I get rid of `userAgent` warnings in tests?](#how-can-i-get-rid-of-useragent-warnings-in-tests)\n- [Why do React warnings have the wrong component name?](#why-do-react-warnings-have-the-wrong-component-name)\n- [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)\n\n## How do I use pseudo-selectors like `:checked`, `:last`, `:before`, or `:after`?\n\nRadium 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:\n\n```jsx\nclass CheckForBold extends React.Component {\n  constructor() {\n    super();\n    this.state = {isChecked: false};\n  }\n\n  _onChange = () => {\n    this.setState({isChecked: !this.state.isChecked});\n  };\n\n  render() {\n    return (\n      <label style={{fontWeight: this.state.isChecked ? 'bold' : 'normal'}}>\n        <input\n          checked={this.state.isChecked}\n          onChange={this._onChange}\n          type=\"checkbox\"\n        />\n      {' '}Check for bold\n      </label>\n    );\n  }\n}\n```\n\nInstead 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).\n\n```jsx\nvar droids = [\n  'R2-D2',\n  'C-3PO',\n  'Huyang',\n  'Droideka',\n  'Probe Droid'\n];\n\nclass DroidList extends React.Component {\n  render() {\n    return (\n      <ul style={{padding: 0}}>\n        {droids.map((droid, index, arr) =>\n          <li key={index} style={{\n            borderColor: 'black',\n            borderRadius: index === 0 ? '12px 12px 0 0' :\n              index === (arr.length - 1) ? '0 0 12px 12px' : '',\n            borderStyle: 'solid',\n            borderWidth: index === (arr.length - 1) ? '1px' : '1px 1px 0 1px',\n            cursor: 'pointer',\n            listStyle: 'none',\n            padding: 12,\n            ':hover': {\n              background: '#eee'\n            }\n          }}>\n           {droid}\n          </li>\n        )}\n      </ul>\n    );\n  }\n}\n\nDroidList = Radium(DroidList);\n```\n\nInstead of `:before` and `:after`, add extra elements when rendering your HTML.\n\n## How can I use `ReactCSSTransitionGroup` without any classes?\n\nTry out the experimental [`ReactStyleTransitionGroup`](https://github.com/adambbecker/react-style-transition-group) instead.\n\n## How can I use Radium with jsbin?\n\nTo get the latest version, drop this into the HTML:\n\n```html\n<script src=\"https://unpkg.com/radium/dist/radium.js\"></script>\n```\n\nWe also recommend changing the JavaScript language to ES6/Babel.\n\n## Can I use my favourite CSS/LESS/SASS syntax?\n\nYes, 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).\n\nThe example from the main Readme (using regular CSS syntax)\n\n```jsx\n<Button kind=\"primary\">Radium Button</Button>\n```\n\n```jsx\nimport styler from 'react-styling/flat'\n\nclass Button extends React.Component {\n  static propTypes = {\n    kind: PropTypes.oneOf(['primary', 'warning']).isRequired\n  }\n\n  render() {\n    return (\n      <button style={style[`button_${this.props.kind}`]}>\n        {this.props.children}\n      </button>\n    )\n  }\n}\n\nButton = Radium(Button);\n\nconst style = styler`\n  .button {\n    color: #fff;\n\n    :hover {\n      background: ${color('#0074d9').lighten(0.2).hexString()};\n    }\n\n    &.primary {\n      background: #0074D9;\n    }\n\n    &.warning {\n      background: #FF4136;\n    }\n  }\n`\n```\n\nYou can find a more advanced example in the [react-styling readme](https://github.com/halt-hammerzeit/react-styling#radium).\n\n## Can I use Radium with Bootstrap?\n\nSee issue [#323](https://github.com/FormidableLabs/radium/issues/323) for discussion.\n\n## Why doesn't Radium work on react-router's Link, or react-bootstrap's Button, or SomeOtherComponent?\n\nRadium 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.\n\nA workaround is to wrap your custom component in Radium, even if you do not have the source, like this:\n\n```jsx\nvar Link = require('react-router').Link;\nLink = Radium(Link);\n```\n\nHuge thanks to [@mairh](https://github.com/mairh) for coming up with this idea in issue [#324](https://github.com/FormidableLabs/radium/issues/324).\n\nWe are also exploring adding a mechanism to bypass Radium's check, see issue [#258](https://github.com/FormidableLabs/radium/issues/258).\n\n## How can I get rid of `userAgent` warnings in tests?\n\nYou might see warnings like this when testing React components that use Radium:\n\n```\nRadium: userAgent should be supplied for server-side rendering. See https://github.com/FormidableLabs/radium/tree/master\n/docs/api#radium for more information.\nEither the global navigator was undefined or an invalid userAgent was provided. Using a valid userAgent? Please let us k\nnow and create an issue at https://github.com/rofrischmann/inline-style-prefixer/issues\n```\n\nThis 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:\n\n```jsx\nglobal.navigator = {userAgent: 'Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/49.0.2454.85 Safari/537.36'};\n```\n\nMake 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).\n\n## Why do React warnings have the wrong component name?\n\nYou 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`.\"\n\nYour 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.\n\n## Why does the browser state of a child element not reset after unmounting and remounting?\n\nIf 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.\n"
  },
  {
    "path": "docs/guides/README.md",
    "content": "# Using Radium\n\n**Table of Contents**\n\n- [How do I do it, then?](#how-do-i-do-it-then)\n- [Modifiers](#modifiers)\n- [Browser States](#browser-states)\n- [Media Queries](#media-queries)\n  - [Nested browser states](#nested-browser-states)\n  - [Known issues with media queries](#known-issues-with-media-queries)\n- [Styling Multiple Elements in a Single Component](#styling-multiple-elements-in-a-single-component)\n- [Styling one element depending on another's state](#styling-one-element-depending-on-anothers-state)\n- [Fallback Values](#fallback-values)\n- [Style Component](#style-component)\n\nRadium 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.\n\n## How do I do it, then?\n\nFirst, require or import Radium at the top of component file:\n\n```jsx\nimport Radium from 'radium';\n\n// If you want to use the <Style /> component you can do\nimport Radium, { Style } from 'radium';\n```\n\nLet'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.\n\n```jsx\nclass Button extends React.Component {\n  render() {\n    return (\n      <button>\n        {this.props.children}\n      </button>\n    );\n  }\n}\n```\n\nRadium is activated by wrapping your component:\n\n```jsx\nclass Button extends React.Component {\n  // ...\n}\nexport default Radium(Button);\n\n// or\nclass Button extends React.Component {\n  // ...\n}\nButton = Radium(Button);\n```\n\nRadium 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:\n\n```jsx\nvar baseStyles = {\n  background: 'blue',\n  border: 0,\n  borderRadius: 4,\n  color: 'white',\n  padding: '1.5em'\n};\n```\n\nWe usually nest styles inside a shared `styles` object for easy access:\n\n```jsx\nvar styles = {\n  base: {\n    background: 'blue',\n    border: 0,\n    borderRadius: 4,\n    color: 'white',\n    padding: '1.5em'\n  }\n};\n```\n\nNext, simply pass your styles to the `style` attribute of an element:\n\n```jsx\n// Inside render\nreturn (\n  <button style={styles.base}>\n    {this.props.children}\n  </button>\n);\n```\n\nFrom 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.\n\n## Modifiers\n\nRadium 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).\n\n```jsx\n<Button\n  size=\"large\"\n  block={true}>\n  Cool Button!\n</Button>\n```\n\nStart by adding another style to your `styles` object:\n\n```jsx\nvar styles = {\n  base: {\n    background: 'blue',\n    border: 0,\n    borderRadius: 4,\n    color: 'white',\n    padding: '1.5em'\n  },\n\n  block: {\n    display: 'block'\n  }\n};\n```\n\nThen, include that style object in the array passed to the `style` attribute if the conditions match:\n\n```jsx\n// Inside render\nreturn (\n  <button\n    style={[\n      styles.base,\n      this.props.block && styles.block\n    ]}>\n    {this.props.children}\n  </button>\n);\n```\n\nRadium 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`.\n\n## Browser States\n\nRadium supports styling for three browser states that are targeted with pseudo-selectors in normal CSS: `:hover`, `:focus`, and `:active`.\n\nTo 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:\n\n```jsx\nvar styles = {\n  base: {\n    background: 'blue',\n    border: 0,\n    borderRadius: 4,\n    color: 'white',\n    padding: '1.5em',\n\n    ':hover': {\n      backgroundColor: 'red'\n    },\n\n    ':focus': {\n      backgroundColor: 'green'\n    },\n\n    ':active': {\n      backgroundColor: 'yellow'\n    },\n  },\n\n  block: {\n    display: 'block',\n\n    ':hover': {\n      boxShadow: '0 3px 0 rgba(0,0,0,0.2)'\n    }\n  },\n};\n\nclass MyComponent extends Component {\n...\nrender() {\n  return (\n    <div key=\"1\" style={styles.base}>\n      <div key=\"2\" style={styles.block} />\n    </div>\n  );\n}\n...\n}\n\nexport default Radium(MyComponent);\n```\n\nRadium 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.\n\n## Media queries\n\nAdd 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:\n\n```jsx\nvar style = {\n  width: '25%',\n\n  '@media (min-width: 320px)': {\n    width: '100%'\n  }\n};\n```\n\nRadium 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.\n\n### Nested browser states\n\nMedia query styles can also contain nested browser states:\n\n```jsx\nvar style = {\n  width: '25%',\n\n  '@media (min-width: 320px)': {\n    width: '100%',\n\n    ':hover': {\n      background: 'white'\n    }\n  }\n};\n```\n\n### Known issues with media queries\n\n#### IE9 Support\n\nIE9 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/).\n\n## Styling multiple elements in a single component\n\nRadium 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:\n\n```jsx\n// Inside render\nreturn (\n  <div>\n    <div key=\"one\" style={[styles.both, styles.one]} />\n    <div key=\"two\" style={[styles.both, styles.two]} />\n  </div>\n);\n\nvar styles = {\n  both: {\n    background: 'black',\n    border: 'solid 1px white',\n    height: 100,\n    width: 100\n  },\n  one: {\n    ':hover': {\n      background: 'blue',\n    }\n  },\n  two: {\n    ':hover': {\n      background: 'red',\n    }\n  }\n};\n```\n\n## Styling one element depending on another's state\n\nYou 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.\n\n```jsx\n// Inside render\nreturn (\n  <div>\n    <button key=\"keyForButton\" style={[styles.button]}>Hover me!</button>\n    {Radium.getState(this.state, 'keyForButton', ':hover') ? (\n      <span>{' '}Hovering!</span>\n    ) : null}\n  </div>\n);\n\nvar styles = {\n  button: {\n    // Even though we don't have any special styles on the button, we need\n    // to add empty :hover styles here to tell Radium to track this element's\n    // state.\n    ':hover': {}\n  }\n};\n```\n\n## Fallback values\n\nSometimes 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:\n\n```jsx\nvar styles = {\n  button: {\n    background: ['rgba(255, 255, 255, .5)', '#fff']\n  }\n};\n```\n\nIs equivalent to the following CSS (note that the order is reversed):\n\n```css\n.button {\n  background: #fff;\n  background: rgba(255, 255, 255, .5);\n}\n```\n\n## `<Style>` component\n\nWant 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).\n"
  },
  {
    "path": "docs/guides/upgrade-v0.16.x.md",
    "content": "# v0.16.x Upgrade Guide\n\nVersion `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.\n\n## Keyframes and Media Queries with Server Side Rendering\n\nIf you're using keyframes or media queries, you will need to wrap the top-level component in a `<StyleRoot/>` component.\n\nYou 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\n\n### How to Make the Change\n\nOld syntax (`v0.15.x`)\n\n```jsx\nimport Radium from 'radium';\n\n@Radium\nclass App extends React.Component {\n  render() {\n    return (\n      <div>\n        ... rest of your app ...\n      </div>\n    );\n  }\n}\n```\n\nNew syntax (`v0.16.x`)\n\n```jsx\nimport {StyleRoot} from 'radium';\n\n// No need for @Radium decorator; StyleRoot is already wrapped.\nclass App extends React.Component {\n  render() {\n    return (\n      <StyleRoot>\n        ... rest of your app ...\n      </StyleRoot>\n    );\n  }\n}\n```\n\n## Keyframes\n\nWrap your root component in `<StyleRoot/>` (see above).\n\nThe result of Radium.keyframes is now a placeholder object that Radium processes at render time, and must be assigned to the animationName prop.\nhttps://github.com/FormidableLabs/radium/tree/master/docs/api#keyframes\n\n### How to Make the Change\n\nOld syntax (`v0.15.x`)\n\n```jsx\nimport Radium from 'radium';\n\n@Radium\nclass Spinner extends React.Component {\n  render() {\n    return (\n      <div>\n        <div style={styles.inner} />\n      </div>\n    );\n  }\n}\n\nvar pulseKeyframes = Radium.keyframes({\n  '0%': { width: '10%' },\n  '50%': { width: '50%' },\n  '100%': { width: '10%' },\n});\n\nvar styles = {\n  inner: {\n    animation: pulseKeyframes + ' 3s ease 0s infinite',\n    background: 'blue',\n    height: '4px',\n    margin: '0 auto',\n  }\n};\n```\n\nNew syntax (`v0.16.x`)\n\n```jsx\nimport Radium from 'radium';\n\n@Radium\nclass Spinner extends React.Component {\n  render () {\n    return (\n      <div>\n        <div style={styles.inner} />\n      </div>\n    );\n  }\n}\n\nvar pulseKeyframes = Radium.keyframes({\n  '0%': { width: '10%' },\n  '50%': { width: '50%' },\n  '100%': { width: '10%' },\n}, 'pulse');\n\nvar styles = {\n  inner: {\n    // Use a placeholder animation name (e.g. x) in `animation`\n    animation: 'x 3s ease 0s infinite',\n    // Assign the result of `keyframes` to `animationName`\n    animationName: pulseKeyframes,\n    background: 'blue',\n    height: '4px',\n    margin: '0 auto',\n  }\n};\n```\n\n## Print Styles\n\n`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\n\nIn any component you were declaring a static `printStyles` property before, you now define the print styles using media queries: `{'@media print': { ... }}`\n\n### How to Make the Change\n\nOld syntax (`v0.15.x`)\n\n```jsx\nimport {PrintStyleSheet} from 'radium';\n\n@Radium\nclass MyComponent extends React.Component {\n  static printStyles = {\n    wrapper: { background: 'white' },\n    text: { color: 'black' }\n  };\n\n  render() {\n    return (\n      <div className={this.printStyleClass.wrapper}>\n        <p className={this.printStyleClass.text}>Prints as black text on white background</p>\n      </div>\n    );\n  }\n}\n\nclass App extends React.Component {\n  render() {\n    return (\n      <div>\n        <PrintStyleSheet />\n        <MyComponent/>\n      </div>\n    );\n  }\n}\n```\n\nNew syntax (`v0.16.x`)\n\n```jsx\nimport {StyleRoot} from 'radium';\n\n@Radium\nclass MyComponent extends React.Component {\n  render() {\n    return (\n      <div style={{'@media print': { color: white }}}>\n        <p style={{'@media print': { color: black }}}>Prints as black text on white background</p>\n      </div>\n    );\n  }\n}\n\nclass App extends React.Component {\n  render() {\n    return (\n      <StyleRoot>\n        <MyComponent/>\n      </StyleRoot>\n    );\n  }\n}\n```\n"
  },
  {
    "path": "examples/app.js",
    "content": "/**\n * The examples provided by Formidable Labs are for non-commercial testing and\n * evaluation purposes only. Formidable Labs reserves all rights not expressly\n * granted.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL\n * FORMIDABLE LABS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER\n * IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN\n * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.\n */\n\n/* eslint-disable no-use-before-define */\n\nimport React from 'react';\n\nimport {resetListStyle, resetBoxModel} from './common.styles';\nimport Button from './components/button';\nimport ComputedWell from './components/computed-well';\nimport Radium, {getState, keyframes, Style, StyleRoot} from '../src';\n\n//\n// Radium with ES6 class syntax\n//\nclass HoverMessage extends React.Component {\n  render() {\n    return (\n      <div>\n        <button key=\"button\" style={{display: 'flex', ':hover': {}}}>\n          Hover me!\n        </button>\n        {getState(this.state, 'button', ':hover') ? (\n          <span> Hovering!</span>\n        ) : null}\n      </div>\n    );\n  }\n}\nHoverMessage = Radium(HoverMessage);\n\n//\n// Radium with ES7 decorator\n//\n@Radium\nclass TwoSquares extends React.Component {\n  render() {\n    return (\n      <div>\n        <div key=\"one\" style={[squareStyles.all, squareStyles.one]} />\n        <div key=\"two\" style={[squareStyles.all, squareStyles.two]} />\n        <div\n          disabled\n          key=\"three\"\n          style={[squareStyles.all, squareStyles.three]}\n        />\n        <div style={{clear: 'both'}} />\n      </div>\n    );\n  }\n}\n\nclass Spinner extends React.Component {\n  render() {\n    return (\n      <div>\n        <div\n          style={[spinnerStyles.inner, {'@media print': {height: '10px'}}]}\n        />\n      </div>\n    );\n  }\n}\n\nSpinner = Radium(Spinner);\n\nclass MultiSpinner extends React.Component {\n  render() {\n    return (\n      <div>\n        <div\n          style={[\n            multiAnimationStyles.inner,\n            {'@media print': {height: '10px'}}\n          ]}\n        />\n      </div>\n    );\n  }\n}\n\nMultiSpinner = Radium(MultiSpinner);\n\nconst VisitedLink = Radium(() => (\n  <a\n    href=\"https://github.com/formidablelabs/radium\"\n    style={{color: 'gray', ':visited': {color: 'black'}}}\n  >\n    https://github.com/formidablelabs/radium\n  </a>\n));\n\nclass App extends React.Component {\n  _remount() {\n    this.setState({shouldRenderNull: true});\n\n    setTimeout(\n      function() {\n        this.setState({shouldRenderNull: false});\n      }.bind(this),\n      100\n    );\n  }\n\n  render() {\n    if (this.state && this.state.shouldRenderNull) {\n      return null;\n    }\n\n    return (\n      <StyleRoot>\n        <VisitedLink />\n\n        <p />\n        <HoverMessage />\n\n        <p />\n        <TwoSquares />\n\n        <p />\n        <Spinner />\n\n        <p />\n        <MultiSpinner />\n\n        <p />\n        <Button onClick={this._remount.bind(this)}>Unmount and remount</Button>\n\n        <p />\n        <Button>Button</Button>\n\n        <p />\n        <Button color=\"red\">Button</Button>\n\n        <p />\n        <Button\n          style={{\n            fontSize: '1.5em',\n            borderRadius: 3\n          }}\n        >\n          Button\n        </Button>\n\n        <div style={{margin: '20px 0', width: 220}}>\n          {Array.apply(null, Array(100)).map(function(_, i) {\n            return <div key={'tile' + i} style={tileStyle} />;\n          })}\n          <div style={{clear: 'both'}} />\n        </div>\n\n        <ul style={listStyle}>\n          <li>\n            Create and use reusable rules with the help of spread operators.\n          </li>\n        </ul>\n\n        <Style\n          rules={{\n            body: {\n              margin: 0,\n              fontFamily: 'Helvetica Neue, Helvetica, Arial, sans-serif'\n            },\n            mediaQueries: {\n              '(max-width: 600px)': {\n                body: {\n                  background: 'gray'\n                }\n              },\n              '(max-width: 500px)': {\n                body: {\n                  background: 'blue'\n                },\n                'p, h1': {\n                  color: 'white'\n                }\n              }\n            }\n          }}\n        />\n\n        <ComputedWell>Click me!</ComputedWell>\n\n        <div className=\"scoping-class\">\n          <Style\n            rules={{\n              span: {\n                fontFamily: 'Lucida Console, Monaco, monospace'\n              },\n              color: 'blue'\n            }}\n            scopeSelector=\".scoping-class\"\n          />\n          <span>This content has scoped styles</span>\n        </div>\n      </StyleRoot>\n    );\n  }\n}\n\nApp = Radium(App);\n\nconst squareStyles = {\n  all: {\n    background: 'black',\n    border: 'solid 1px white',\n    float: 'left',\n    height: 100,\n    width: 100\n  },\n  one: {\n    ':hover': {\n      background: 'blue'\n    }\n  },\n  two: {\n    ':hover': {\n      background: 'red'\n    }\n  },\n  three: {\n    ':hover': {\n      background: 'yellow'\n    },\n    ':disabled': {\n      background: 'red'\n    }\n  }\n};\n\nconst tileStyle = {\n  display: 'block',\n  float: 'left',\n  background: '#ccc',\n  width: 20,\n  height: 20,\n  textAlign: 'center',\n  border: '1px solid white',\n  cursor: 'pointer',\n\n  ':hover': {\n    background: '#999'\n  }\n};\n\nconst pulseAnimation = keyframes(\n  {\n    '0%': {width: '10%'},\n    '50%': {width: '50%'},\n    '100%': {width: '10%'}\n  },\n  'pulse'\n);\n\nconst blendAnimation = Radium.keyframes(\n  {\n    '0%': {background: 'red'},\n    '25%': {background: 'yellow'},\n    '50%': {background: 'green'},\n    '75%': {background: 'blue'},\n    '100%': {background: 'red'}\n  },\n  'blend'\n);\n\nconst spinnerStyles = {\n  inner: {\n    animation: 'x 3s ease 0s infinite',\n    animationName: pulseAnimation,\n    background: 'blue',\n    height: '4px',\n    margin: '0 auto'\n  }\n};\n\nconst multiAnimationStyles = {\n  inner: {\n    animationName: [pulseAnimation, blendAnimation],\n    animationDuration: '2.5s, 8s',\n    animationIterationCount: 'infinite, infinite',\n    animationTimingFunction: 'linear, cubic-bezier(0.1, 0.7, 1.0, 0.1)',\n    height: '4px',\n    margin: '0 auto'\n  }\n};\n\nconst listStyle = {\n  ...resetListStyle,\n  ...resetBoxModel,\n  marginTop: 15,\n  marginBottom: 15,\n  marginLeft: 15,\n  marginRight: 15\n};\n\nexport default App;\n"
  },
  {
    "path": "examples/client.js",
    "content": "/**\n * The examples provided by Formidable Labs are for non-commercial testing and\n * evaluation purposes only. Formidable Labs reserves all rights not expressly\n * granted.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL\n * FORMIDABLE LABS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER\n * IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN\n * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.\n */\n\nimport React from 'react';\nimport ReactDOM from 'react-dom';\nimport App from './app';\n\nReactDOM.render(<App />, document.getElementById('app'));\n"
  },
  {
    "path": "examples/common.styles.js",
    "content": "export const resetListStyle = {\n  listStyle: 'none'\n};\n\nexport const resetBoxModel = {\n  marginTop: 0,\n  marginRight: 0,\n  marginBottom: 0,\n  marginLeft: 0,\n  paddingTop: 0,\n  paddingRight: 0,\n  paddingBottom: 0,\n  paddingLeft: 0\n};\n"
  },
  {
    "path": "examples/components/button.js",
    "content": "/**\n * The examples provided by Formidable Labs are for non-commercial testing and\n * evaluation purposes only. Formidable Labs reserves all rights not expressly\n * granted.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL\n * FORMIDABLE LABS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER\n * IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN\n * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.\n */\n\n/* eslint-disable no-use-before-define */\n\nimport React from 'react';\nimport PropTypes from 'prop-types';\nimport Radium from '../../src';\n\n@Radium\nclass Button extends React.Component {\n  render() {\n    return (\n      <button\n        onClick={this.props.onClick}\n        style={[\n          styles.base,\n          this.props.color === 'red' && styles.red,\n          this.props.style\n        ]}\n      >\n        {this.props.children}\n      </button>\n    );\n  }\n}\n\nButton.propTypes = {\n  color: PropTypes.string,\n  onClick: PropTypes.func\n};\n\nconst styles = {\n  base: {\n    fontSize: 16,\n    backgroundColor: '#0074d9',\n    color: '#fff',\n    border: 0,\n    borderRadius: '0.3em',\n    padding: '0.4em 1em',\n    cursor: 'pointer',\n    outline: 'none',\n\n    '@media (min-width: 992px)': {\n      padding: '0.6em 1.2em'\n    },\n\n    '@media (min-width: 1200px)': {\n      padding: '0.8em 1.5em'\n    },\n\n    ':hover': {\n      backgroundColor: '#0088FF'\n    },\n\n    ':focus': {\n      backgroundColor: '#0088FF'\n    },\n\n    ':active': {\n      backgroundColor: '#005299',\n      transform: 'translateY(2px)'\n    }\n  },\n\n  red: {\n    backgroundColor: '#d90000',\n\n    ':hover': {\n      backgroundColor: '#FF0000'\n    },\n    ':focus': {\n      backgroundColor: '#FF0000'\n    },\n    ':active': {\n      backgroundColor: '#990000'\n    }\n  }\n};\n\nexport default Button;\n"
  },
  {
    "path": "examples/components/computed-well.js",
    "content": "/**\n * The examples provided by Formidable Labs are for non-commercial testing and\n * evaluation purposes only. Formidable Labs reserves all rights not expressly\n * granted.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL\n * FORMIDABLE LABS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER\n * IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN\n * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.\n */\n\nimport React from 'react';\nimport ReactDOM from 'react-dom';\nimport Radium from '../../src';\n\nclass ComputedWell extends React.Component {\n  getInitialState() {\n    return {\n      dynamicBg: '#000'\n    };\n  }\n\n  getStyles() {\n    return {\n      padding: '1em',\n      borderRadius: 5,\n      background: this.state.dynamicBg\n    };\n  }\n\n  handleSubmit(ev) {\n    ev.preventDefault();\n\n    this.setState({\n      dynamicBg: ReactDOM.findDOMNode(this.refs.input).value\n    });\n  }\n\n  render() {\n    return (\n      <form onSubmit={this.handleSubmit.bind(this)} style={this.getStyles()}>\n        <input placeholder=\"black\" ref=\"input\" type=\"text\" />\n\n        <button>Change Background Color</button>\n      </form>\n    );\n  }\n}\n\nexport default Radium(ComputedWell);\n"
  },
  {
    "path": "examples/index.html",
    "content": "<!DOCTYPE html>\n<!--\nThe examples provided by Formidable Labs are for non-commercial testing and evaluation purposes only. Formidable Labs reserves all rights not expressly\ngranted.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL\nFORMIDABLE LABS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN\nAN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION\nWITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.\n-->\n<html>\n  <head>\n    <title>Radium Examples</title>\n  </head>\n  <body>\n    <h1>Radium Examples</h1>\n\n    <div id=\"app\"><!-- {{app}} --></div>\n\n    <script src=\"app.js\"></script>\n  </body>\n</html>\n"
  },
  {
    "path": "examples/server.js",
    "content": "/**\n * The examples provided by Formidable Labs are for non-commercial testing and\n * evaluation purposes only. Formidable Labs reserves all rights not expressly\n * granted.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL\n * FORMIDABLE LABS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER\n * IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN\n * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.\n */\n\nconst express = require('express');\nconst proxy = require('express-http-proxy');\nconst React = require('react');\nconst ReactDOMServer = require('react-dom/server');\nimport App from './app'; // Leave ESM import\nconst fs = require('fs');\nconst path = require('path');\n\nconst indexHTML = fs\n  .readFileSync(path.resolve(__dirname, 'index.html'))\n  .toString();\nconst app = express();\nconst host = 'localhost';\nconst port = 8000;\n\napp.use('/app.js', proxy('localhost:8080', {forwardPath: () => '/app.js'}));\n\napp.get('/', (req, res) => {\n  const appHtml = ReactDOMServer.renderToString(\n    <App radiumConfig={{userAgent: req.headers['user-agent']}} />\n  );\n  res.write(indexHTML.replace('<!-- {{app}} -->', appHtml));\n  res.end();\n});\n\napp.listen(port, host, () => {\n  // eslint-disable-next-line no-console\n  console.log('Access the universal app at http://%s:%d', host, port);\n});\n"
  },
  {
    "path": "examples/webpack.config.js",
    "content": "/**\n * The examples provided by Formidable Labs are for non-commercial testing and\n * evaluation purposes only. Formidable Labs reserves all rights not expressly\n * granted.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL\n * FORMIDABLE LABS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER\n * IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN\n * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.\n */\n\nvar path = require('path'); // eslint-disable-line no-var\n\nmodule.exports = {\n  cache: true,\n  entry: {\n    app: './examples/client.js'\n  },\n  output: {\n    path: path.join(__dirname, 'dist'),\n    publicPath: '/',\n    filename: '[name].js',\n    chunkFilename: '[chunkhash].js'\n  },\n  module: {\n    rules: [\n      {\n        test: /\\.js$/,\n        include: [__dirname, path.resolve(__dirname, '../src')],\n        loader: 'babel-loader'\n      }\n    ]\n  }\n};\n"
  },
  {
    "path": "index.js",
    "content": "module.exports = require('./lib').default;\nmodule.exports.default = module.exports;\n"
  },
  {
    "path": "interfaces/hoist-non-react-statics.js",
    "content": "declare module 'hoist-non-react-statics' {\n  /*\n    S - source component statics\n    TP - target component props\n    SP - additional source component props\n  */\n  declare module.exports: <TP, SP, S>(\n    target: React$ComponentType<TP>,\n    source: React$ComponentType<SP> & S,\n    blacklist?: {[key: $Keys<S>]: boolean}\n  ) => React$ComponentType<TP> & $Shape<S>;\n}\n"
  },
  {
    "path": "interfaces/inline-style-prefixer.js",
    "content": "declare class InlineStylePrefixer {\n  static prefixAll: typeof prefixAll;\n\n  prefixedKeyframes: string;\n\n  constructor(config: {\n    keepUnprefixed?: boolean,\n    userAgent?: ?string\n  }): void;\n\n  prefix(style: Object): Object;\n}\n\ndeclare function prefixAll(style: Object): Object;\n\ndeclare function createStaticPrefixer(browserData: Object): typeof prefixAll;\n\ndeclare function createDynamicPrefixer(\n  browserData: Object,\n  prefixAll: typeof prefixAll\n): typeof InlineStylePrefixer;\n\ndeclare module 'inline-style-prefixer' {\n  declare module.exports: typeof InlineStylePrefixer;\n}\n\ndeclare module 'inline-style-prefixer/static/createPrefixer' {\n  declare module.exports: typeof createStaticPrefixer;\n}\n\ndeclare module 'inline-style-prefixer/dynamic/createPrefixer' {\n  declare module.exports: typeof createDynamicPrefixer;\n}\n"
  },
  {
    "path": "karma.conf.coverage.js",
    "content": "module.exports = function(config) {\n  require('./karma.conf.js')(config);\n  config.set({\n    webpack: {\n      module: {\n        rules: config.webpack.module.rules.slice(1).concat([\n          {\n            test: /\\.js$/,\n            exclude: [/node_modules/],\n            use: {\n              loader: 'babel-loader',\n              options: {\n                plugins: ['istanbul']\n              }\n            }\n          }\n        ])\n      }\n    },\n    reporters: config.reporters.concat(['coverage']),\n    plugins: config.plugins.concat(['karma-coverage']),\n    coverageReporter: {\n      reporters: [\n        {\n          type: 'text'\n        },\n        {\n          type: 'lcovonly',\n          subdir: '.'\n        }\n      ]\n    }\n  });\n};\n"
  },
  {
    "path": "karma.conf.ie.js",
    "content": "module.exports = function(config) {\n  require('./karma.conf.js')(config);\n  config.set({\n    plugins: config.plugins.concat('karma-ie-launcher'),\n    browsers: ['IE9'],\n    customLaunchers: {\n      IE9: {\n        base: 'IE',\n        'x-ua-compatible': 'IE=EmulateIE9'\n      }\n    }\n  });\n};\n"
  },
  {
    "path": "karma.conf.js",
    "content": "const path = require('path');\n\nprocess.env.BABEL_ENV = 'commonjs';\n\nmodule.exports = function(config) {\n  config.set({\n    basePath: '',\n    frameworks: ['mocha', 'sinon-chai'],\n    files: [\n      // Polyfills for IE9 in React 16.\n      require.resolve('core-js/es6/map'),\n      require.resolve('core-js/es6/set'),\n      'src/__tests__/**/*.js'\n    ],\n    preprocessors: {\n      [path.join(\n        path.dirname(require.resolve('core-js/package.json')),\n        'es6/**/*.js' // eslint-disable-line prettier/prettier\n      )]: ['webpack'],\n      'src/__tests__/**/*.js': ['webpack']\n    },\n    webpack: {\n      cache: true,\n      module: {\n        rules: [\n          {\n            test: /\\.js$/,\n            enforce: 'pre',\n            include: path.resolve('src/'),\n            loader: 'babel-loader'\n          },\n          {\n            test: /\\.css$/,\n            loader: 'style-loader!css-loader'\n          }\n        ]\n      },\n      resolve: {\n        modules: [\n          path.join(__dirname, 'node_modules'),\n          path.join(__dirname, 'src')\n        ],\n        extensions: ['.js']\n      }\n    },\n    webpackServer: {\n      quiet: false,\n      noInfo: true,\n      stats: {\n        assets: false,\n        colors: true,\n        version: false,\n        hash: false,\n        timings: false,\n        chunks: false,\n        chunkModules: false\n      }\n    },\n    exclude: [],\n    port: 8080,\n    logLevel: config.LOG_INFO,\n    colors: true,\n    autoWatch: false,\n    // Run a customized instance of headless chrome for dev + Travis CI.\n    browsers: ['ChromeHeadlessCustom'],\n    customLaunchers: {\n      ChromeHeadlessCustom: {\n        base: 'ChromeHeadless',\n        // --no-sandbox for https://github.com/travis-ci/docs-travis-ci-com/pull/1671/files\n        flags: ['--no-sandbox']\n      }\n    },\n    reporters: ['mocha'],\n    browserNoActivityTimeout: 60000,\n    plugins: [\n      'karma-chrome-launcher',\n      'karma-mocha',\n      'karma-mocha-reporter',\n      'karma-sinon-chai',\n      'karma-webpack'\n    ],\n    browserConsoleLogOptions: {\n      level: 'log',\n      format: '%b %T: %m',\n      terminal: true\n    },\n    captureTimeout: 100000,\n    singleRun: true\n  });\n};\n"
  },
  {
    "path": "package.json",
    "content": "{\n  \"name\": \"radium\",\n  \"version\": \"0.26.2\",\n  \"description\": \"A set of tools to manage inline styles on React elements\",\n  \"main\": \"index.js\",\n  \"module\": \"es/index.js\",\n  \"jsnext:main\": \"es/index.js\",\n  \"sideEffects\": false,\n  \"repository\": {\n    \"type\": \"git\",\n    \"url\": \"https://github.com/formidablelabs/radium.git\"\n  },\n  \"homepage\": \"https://github.com/formidablelabs/radium\",\n  \"bugs\": \"https://github.com/formidablelabs/radium/issues\",\n  \"directories\": {\n    \"example\": \"examples\"\n  },\n  \"scripts\": {\n    \"postinstall\": \"cd lib || npm run build\",\n    \"preversion\": \"npm test && npm run lint\",\n    \"version\": \"npm run build\",\n    \"postversion\": \"publishr postversion -V\",\n    \"postpublish\": \"publishr postpublish -V\",\n    \"version-dry-run\": \"publishr dry-run -V\",\n    \"build\": \"npm run clean && builder concurrent --buffer build-lib build-dist build-es\",\n    \"build-babel\": \"babel src --ignore \\\"**/__tests__/*\\\",\\\"**/__mocks__/*\\\"\",\n    \"build-lib\": \"builder run --env \\\"{\\\\\\\"BABEL_ENV\\\\\\\":\\\\\\\"commonjs\\\\\\\"}\\\" build-babel -- -d lib --verbose\",\n    \"build-dist-dev\": \"webpack\",\n    \"build-dist-prod\": \"webpack --config=webpack.config.minified.js\",\n    \"build-dist\": \"builder concurrent --buffer build-dist-dev build-dist-prod\",\n    \"build-examples\": \"webpack --config examples/webpack.config.js\",\n    \"build-es\": \"builder run build-babel -- -d es\",\n    \"clean\": \"rimraf lib es dist\",\n    \"examples\": \"webpack-dev-server --config examples/webpack.config.js --no-info --content-base examples\",\n    \"examples-server\": \"babel-node examples/server.js\",\n    \"flow\": \"flow check\",\n    \"eslint\": \"eslint .\",\n    \"fixlint\": \"npm run eslint -- --fix\",\n    \"lint\": \"builder concurrent --buffer eslint flow\",\n    \"start\": \"builder run --env \\\"{\\\\\\\"BABEL_ENV\\\\\\\":\\\\\\\"commonjs\\\\\\\"}\\\" examples-server\",\n    \"test-node\": \"mocha \\\"test/**/*-test.js\\\"\",\n    \"test-node-dev\": \"mocha --watch \\\"test/**/*-test.js\\\"\",\n    \"test-frontend\": \"karma start\",\n    \"test-frontend-coverage\": \"karma start karma.conf.coverage.js\",\n    \"test-frontend-ie\": \"karma start karma.conf.ie.js\",\n    \"test-frontend-dev\": \"karma start --no-single-run --auto-watch\",\n    \"test\": \"npm run test-node && npm run test-frontend\",\n    \"test-coverage\": \"npm run test-node && npm run test-frontend-coverage\",\n    \"test-ie\": \"npm run test-node && npm run test-frontend-ie\",\n    \"test-dev\": \"builder concurrent test-node-dev test-frontend-dev\",\n    \"universal\": \"builder concurrent start examples\",\n    \"update-prefix-data\": \"babel-node scripts/update-prefix-data.js && eslint --fix src/prefix-data\",\n    \"watch-lib\": \"npm run build-lib -- --watch\"\n  },\n  \"license\": \"MIT\",\n  \"dependencies\": {\n    \"@babel/cli\": \"^7.0.0\",\n    \"@babel/core\": \"^7.0.0\",\n    \"@babel/plugin-proposal-class-properties\": \"^7.0.0\",\n    \"@babel/plugin-proposal-decorators\": \"^7.0.0\",\n    \"@babel/plugin-transform-destructuring\": \"^7.0.0\",\n    \"@babel/preset-env\": \"^7.0.0\",\n    \"@babel/preset-flow\": \"^7.0.0\",\n    \"@babel/preset-react\": \"^7.0.0\",\n    \"babel-loader\": \"^8.0.0\",\n    \"builder\": \"^3.2.3\",\n    \"exenv\": \"^1.2.1\",\n    \"hoist-non-react-statics\": \"3.3.0\",\n    \"inline-style-prefixer\": \"^4.0.0\",\n    \"prop-types\": \"^15.5.8\",\n    \"publishr\": \"^1.0.0\",\n    \"rimraf\": \"^2.6.1\",\n    \"webpack\": \"^3.10.0\"\n  },\n  \"peerDependencies\": {\n    \"react\": \"^16.8.0 || ^17.0.0\"\n  },\n  \"devDependencies\": {\n    \"@babel/node\": \"^7.0.0\",\n    \"babel-eslint\": \"^10.0.1\",\n    \"babel-plugin-istanbul\": \"^5.1.0\",\n    \"caniuse-api\": \"^2.0.0\",\n    \"chai\": \"^3.5.0\",\n    \"color\": \"^1.0.3\",\n    \"core-js\": \"^2.5.3\",\n    \"coveralls\": \"^2.12.0\",\n    \"enzyme\": \"^3.10.0\",\n    \"enzyme-adapter-react-16\": \"^1.14.0\",\n    \"eslint\": \"^5.16.0\",\n    \"eslint-plugin-flowtype\": \"3.9.1\",\n    \"eslint-plugin-prettier\": \"^3.1.0\",\n    \"eslint-plugin-react\": \"^7.13.0\",\n    \"eslint-plugin-react-hooks\": \"1.6.0\",\n    \"express\": \"^4.15.2\",\n    \"express-http-proxy\": \"^0.11.0\",\n    \"flow-bin\": \"^0.100.0\",\n    \"inject-loader\": \"^3.0.1\",\n    \"jsdom\": \"^12.0.0\",\n    \"jsdom-global\": \"^3.0.2\",\n    \"karma\": \"^3.0.0\",\n    \"karma-babel-preprocessor\": \"^6.0.1\",\n    \"karma-chrome-launcher\": \"^2.2.0\",\n    \"karma-coverage\": \"^1.1.1\",\n    \"karma-ie-launcher\": \"^1.0.0\",\n    \"karma-mocha\": \"^1.3.0\",\n    \"karma-mocha-reporter\": \"^2.2.2\",\n    \"karma-sinon-chai\": \"^1.2.4\",\n    \"karma-webpack\": \"^3.0.0\",\n    \"mocha\": \"^3.2.0\",\n    \"node-libs-browser\": \"^2.0.0\",\n    \"nodemon\": \"^1.11.0\",\n    \"object-assign\": \"^4.1.1\",\n    \"prettier\": \"^1.15.3\",\n    \"react\": \"^16.8.3\",\n    \"react-dom\": \"^16.8.3\",\n    \"react-test-renderer\": \"^16.8.3\",\n    \"sinon\": \"^1.17.7\",\n    \"sinon-chai\": \"^2.8.0\",\n    \"webpack-dev-server\": \"^3.1.11\"\n  },\n  \"publishr\": {\n    \"dependencies\": [\n      \"^babel-\",\n      \"^@babel/\",\n      \"^builder$\",\n      \"^publishr$\",\n      \"^rimraf$\",\n      \"^webpack\"\n    ],\n    \"files\": {\n      \".npmignore\": \".npmignore.publishr\"\n    },\n    \"scripts\": {\n      \"postinstall\": \"\"\n    }\n  }\n}\n"
  },
  {
    "path": "scripts/update-prefix-data.js",
    "content": "/**\n * Update the files in `src/prefix-data` to match the `browserList` below. Run\n * this if browser support changes or `inline-style-prefixer` gets fixes for the\n * supported browsers.\n *\n * **Note**: Not valid Node code (without std/esm). Use `babel-node` to exec.\n */\nimport path from 'path';\nimport generateData from 'inline-style-prefixer/generator';\n\nconst browserList = {\n  chrome: 30,\n  android: 4,\n  firefox: 25,\n  ios_saf: 6,\n  safari: 6,\n  ie: 9,\n  ie_mob: 9,\n  edge: 12,\n  opera: 13,\n  op_mini: 5,\n  and_uc: 9,\n  and_chr: 30\n};\n\ngenerateData(browserList, {\n  staticPath: path.join(__dirname, '../src/prefix-data/static.js'),\n  dynamicPath: path.join(__dirname, '../src/prefix-data/dynamic.js')\n});\n"
  },
  {
    "path": "src/__mocks__/exenv.js",
    "content": "export default {\n  canUseDOM: true,\n  canUseEventListeners: true\n};\n"
  },
  {
    "path": "src/__mocks__/prefixer.js",
    "content": "export default {\n  getPrefixedStyle: style => style\n};\n"
  },
  {
    "path": "src/__tests__/camel-case-props-to-dash-case-test.js",
    "content": "import camelCasePropsToDashCase from 'camel-case-props-to-dash-case';\n\ndescribe('camelCasePropsToDashCase', function() {\n  it('converts to dash case correctly', function() {\n    const result = camelCasePropsToDashCase({\n      borderLeft: '1px solid black',\n      WebkitBoxSizing: 'border-box',\n      msTransform: 'rotate(90deg)'\n    });\n\n    expect(result).to.deep.equal({\n      'border-left': '1px solid black',\n      '-webkit-box-sizing': 'border-box',\n      '-ms-transform': 'rotate(90deg)'\n    });\n  });\n});\n"
  },
  {
    "path": "src/__tests__/clean-state-key-test.js",
    "content": "import cleanStateKey from 'clean-state-key';\n\ndescribe('cleanStateKey', () => {\n  it('returns the key as a string', () => {\n    const key = 1;\n    expect(cleanStateKey(key)).to.equal('1');\n  });\n\n  it('returns main if no key is passed', () => {\n    expect(cleanStateKey()).to.equal('main');\n  });\n});\n"
  },
  {
    "path": "src/__tests__/enhancer-test.js",
    "content": "const {getElement, renderFcIntoDocument} = require('test-helpers');\nconst resolveStyles = sinon.spy(require('resolve-styles'), 'default');\nconst Enhancer = require('inject-loader!enhancer')({\n  './resolve-styles': resolveStyles\n}).default;\n\nimport React, {Component} from 'react';\n\ndescribe('Enhancer', () => {\n  it('sets up initial state', () => {\n    class Composed extends Component {\n      render() {\n        return <div />;\n      }\n    }\n    const Enhanced = Enhancer(Composed);\n\n    const ref = React.createRef();\n    renderFcIntoDocument(<Enhanced ref={ref} />);\n\n    expect(ref.current.state).to.deep.equal({_radiumStyleState: {}});\n  });\n\n  it('sets up initial state on a function component', () => {\n    // using plugin API to get state as state hooks keep things pretty private\n    // so we cannot just dive into the component instance like with the class example\n    const dummyPlugin = sinon.spy();\n    const Composed = props => <div {...props} />;\n    const Enhanced = Enhancer(Composed, {\n      plugins: [dummyPlugin]\n    });\n\n    renderFcIntoDocument(<Enhanced style={{color: 'red'}} />);\n\n    const pluginApi = dummyPlugin.getCall(0).args[0];\n\n    expect(pluginApi.getComponentField('state')).to.deep.equal({\n      _radiumStyleState: {}\n    });\n  });\n\n  it('merges with existing state', () => {\n    class Composed extends Component {\n      constructor(props) {\n        super(props);\n        this.state = {foo: 'bar'};\n      }\n      render() {\n        return <div />;\n      }\n    }\n    const Enhanced = Enhancer(Composed);\n\n    const ref = React.createRef();\n    renderFcIntoDocument(<Enhanced ref={ref} />);\n\n    expect(ref.current.state).to.deep.equal({\n      foo: 'bar',\n      _radiumStyleState: {}\n    });\n  });\n\n  it('receives the given props', () => {\n    class Composed extends Component {\n      constructor(props) {\n        super(props);\n      }\n      render() {\n        return <div />;\n      }\n    }\n    const Enhanced = Enhancer(Composed);\n\n    const output = renderFcIntoDocument(<Enhanced foo=\"bar\" />);\n\n    expect(output.props.children.props).to.deep.equal({foo: 'bar'});\n  });\n\n  it('calls existing render function, then resolveStyles', () => {\n    const renderMock = sinon.spy();\n    class Composed extends Component {\n      render() {\n        renderMock();\n        return null;\n      }\n    }\n    const Enhanced = Enhancer(Composed);\n\n    renderFcIntoDocument(<Enhanced />);\n\n    expect(renderMock).to.have.been.called;\n    expect(resolveStyles).to.have.been.called;\n  });\n\n  it('calls existing constructor only once', () => {\n    const constructorMock = sinon.spy();\n    class Composed extends Component {\n      constructor(props) {\n        super(props);\n        constructorMock();\n      }\n      render() {\n        return <div />;\n      }\n    }\n    const Enhanced = Enhancer(Composed);\n\n    renderFcIntoDocument(<Enhanced />);\n\n    expect(constructorMock).to.have.been.calledOnce;\n  });\n\n  it('uses the existing displayName', () => {\n    class Composed extends Component {\n      render() {\n        return <div />;\n      }\n    }\n    Composed.displayName = 'Composed';\n\n    const Enhanced = Enhancer(Composed);\n\n    const ref = React.createRef();\n    renderFcIntoDocument(<Enhanced ref={ref} />);\n\n    expect(ref.current.constructor.displayName).to.equal(Composed.displayName);\n  });\n\n  it('calls existing componentWillUnmount function', () => {\n    const existingComponentWillUnmount = sinon.spy();\n    class Composed extends Component {\n      componentWillUnmount() {\n        existingComponentWillUnmount();\n      }\n      render() {\n        return <div />;\n      }\n    }\n    const Enhanced = Enhancer(Composed);\n\n    const ref = React.createRef();\n    renderFcIntoDocument(<Enhanced ref={ref} />);\n    ref.current.componentWillUnmount();\n\n    expect(existingComponentWillUnmount).to.have.been.called;\n  });\n\n  it('removes mouse up listener on componentWillUnmount', () => {\n    const removeMouseUpListener = sinon.spy();\n    class Composed extends Component {\n      constructor(props) {\n        super(props);\n        this._radiumMouseUpListener = {remove: removeMouseUpListener};\n      }\n      render() {\n        return <div />;\n      }\n    }\n    const Enhanced = Enhancer(Composed);\n\n    const ref = React.createRef();\n    renderFcIntoDocument(<Enhanced ref={ref} />);\n    ref.current.componentWillUnmount();\n\n    expect(removeMouseUpListener).to.have.been.called;\n  });\n\n  it('removes media query listeners on componentWillUnmount', () => {\n    const mediaQueryListenersByQuery = {\n      '(min-width: 1000px)': {remove: sinon.spy()},\n      '(max-width: 600px)': {remove: sinon.spy()},\n      '(min-resolution: 2dppx)': {remove: sinon.spy()}\n    };\n    class Composed extends Component {\n      constructor(props) {\n        super(props);\n        this._radiumMediaQueryListenersByQuery = mediaQueryListenersByQuery;\n      }\n      render() {\n        return <div />;\n      }\n    }\n    const Enhanced = Enhancer(Composed);\n\n    const ref = React.createRef();\n    renderFcIntoDocument(<Enhanced ref={ref} />);\n    ref.current.componentWillUnmount();\n\n    Object.keys(mediaQueryListenersByQuery).forEach(key => {\n      expect(mediaQueryListenersByQuery[key].remove).to.have.been.called;\n    });\n  });\n\n  it('manually populates all static properties for IE <10', () => {\n    class Composed extends Component {\n      static staticMethod() {\n        return {bar: 'foo'};\n      }\n      render() {}\n    }\n\n    Composed.foo = 'bar';\n\n    const Enhanced = Enhancer(Composed);\n\n    expect(Enhanced.foo).to.equal('bar');\n    expect(Enhanced.staticMethod()).to.deep.equal({bar: 'foo'});\n  });\n\n  it('works with defaultProps', () => {\n    class Composed extends Component {\n      static defaultProps = {foo: 'bar'};\n\n      render() {\n        return <div>{this.props.foo}</div>;\n      }\n    }\n\n    const Enhanced = Enhancer(Composed);\n    const output = renderFcIntoDocument(<Enhanced />);\n\n    expect(getElement(output, 'div').textContent).to.equal('bar');\n  });\n\n  it('copies methods across to top level prototype', () => {\n    class Composed extends React.Component {\n      getStyles() {\n        return [{color: 'black'}];\n      }\n      render() {\n        return <div style={this.getStyles()}>Hello World!</div>;\n      }\n    }\n\n    const Enhanced = Enhancer(Composed);\n\n    Object.keys(Composed.prototype).forEach(key => {\n      expect(Enhanced.prototype.hasOwnProperty(key)).to.equal(true);\n    });\n  });\n});\n"
  },
  {
    "path": "src/__tests__/get-radium-style-state-test.js",
    "content": "import {Component} from 'react';\nimport getRadiumStyleState from 'get-radium-style-state';\n\ndescribe('getRadiumStyleState', () => {\n  it('gets the _lastRadiumState if available', () => {\n    const state = {someKey: true};\n    class Test extends Component {\n      _lastRadiumState = state;\n    }\n    const instance = new Test();\n    expect(getRadiumStyleState(instance)).to.deep.equal(state);\n  });\n\n  it('gets the _radiumStyleState if available', () => {\n    const state = {someKey: true};\n    class Test extends Component {\n      state = {_radiumStyleState: state};\n    }\n    const instance = new Test();\n    expect(getRadiumStyleState(instance)).to.deep.equal(state);\n  });\n\n  it('returns an empty object if nothing is available', () => {\n    class Test extends Component {}\n    const instance = new Test();\n    expect(getRadiumStyleState(instance)).to.deep.equal({});\n  });\n});\n"
  },
  {
    "path": "src/__tests__/get-state-key-test.js",
    "content": "import React from 'react';\nimport getStateKey from 'get-state-key';\nimport {getRenderOutput} from 'test-helpers';\n\ndescribe('getStateKey', () => {\n  it('gets the ref if it is a string', () => {\n    class Test extends React.Component {\n      render() {\n        return <div ref=\"myRef\" />;\n      }\n    }\n\n    const output = getRenderOutput(<Test />);\n\n    expect(getStateKey(output)).to.equal('myRef');\n  });\n\n  it('gets the key if the ref is not a string', () => {\n    class Test extends React.Component {\n      render() {\n        return <div key=\"myKey\" ref={ref => (this.ref = ref)} />;\n      }\n    }\n\n    const output = getRenderOutput(<Test />);\n\n    expect(getStateKey(output)).to.equal('myKey');\n  });\n\n  it('gets the key if there is no ref', () => {\n    class Test extends React.Component {\n      render() {\n        return <div key=\"myKey\" />;\n      }\n    }\n\n    const output = getRenderOutput(<Test />);\n\n    expect(getStateKey(output)).to.equal('myKey');\n  });\n});\n"
  },
  {
    "path": "src/__tests__/get-state-test.js",
    "content": "import getState from 'get-state';\n\ndescribe('getState', () => {\n  it('successfully gets the state if passed number zero', () => {\n    const result = getState(\n      {_radiumStyleState: {'0': {':hover': true}}},\n      0,\n      ':hover'\n    );\n    expect(result).to.equal(true);\n  });\n});\n"
  },
  {
    "path": "src/__tests__/keyframes-test.js",
    "content": "/* eslint-disable react/prop-types */\n\nimport Radium, {StyleRoot, keyframes} from 'index';\nimport {expectCSS, getElement, renderFcIntoDocument} from 'test-helpers';\nimport React, {Component} from 'react';\nimport TestUtils from 'react-dom/test-utils';\n\nconst CHROME_14_USER_AGENT =\n  'Mozilla/5.0 (Windows NT 6.1) AppleWebKit/535.1 ' +\n  '(KHTML, like Gecko) Chrome/14.0.812.0 Safari/535.1';\n\ndescribe('keyframes', () => {\n  it('adds prefix to keyframes when needed', () => {\n    const anim = keyframes({from: {left: 0}, to: {left: 100}}, 'slide');\n    class TestComponent extends Component {\n      render() {\n        return (\n          <StyleRoot\n            radiumConfig={{userAgent: CHROME_14_USER_AGENT}}\n            style={{animationName: anim}}\n          />\n        );\n      }\n    }\n\n    const output = TestUtils.renderIntoDocument(<TestComponent />);\n    const style = getElement(output, 'style');\n\n    expectCSS(\n      style,\n      `\n      @-webkit-keyframes slide-radium-animation-1bdcc98d {\n        from {left: 0;}\n        to {left: 100px;}\n      }\n    `\n    );\n  });\n\n  it('adds prefix to multiple keyframes when needed', () => {\n    const anim = keyframes({from: {left: 0}, to: {left: 100}}, 'slide');\n    const anim2 = keyframes({from: {top: 0}, to: {top: 100}}, 'slideTop');\n    class TestComponent extends Component {\n      render() {\n        return (\n          <StyleRoot\n            radiumConfig={{userAgent: CHROME_14_USER_AGENT}}\n            style={{animationName: [anim, anim2]}}\n          />\n        );\n      }\n    }\n\n    const output = TestUtils.renderIntoDocument(<TestComponent />);\n    const style = getElement(output, 'style');\n\n    expectCSS(\n      style,\n      `\n      @-webkit-keyframes slide-radium-animation-1bdcc98d {\n        from {left: 0;}\n        to {left: 100px;}\n      }\n      @-webkit-keyframes slideTop-radium-animation-c623736d {\n        from {top: 0;}\n        to {top: 100px;}\n      }\n    `\n    );\n  });\n\n  it('renders keyframes in root style component', () => {\n    const animation = keyframes(\n      {\n        from: {left: '-1000px'},\n        to: {left: 0}\n      },\n      'SlideFromLeft'\n    );\n\n    class TestComponent extends Component {\n      render() {\n        return <StyleRoot style={{animationName: animation}} />;\n      }\n    }\n\n    const output = TestUtils.renderIntoDocument(<TestComponent />);\n\n    const style = getElement(output, 'style');\n\n    expectCSS(\n      style,\n      `\n      @keyframes SlideFromLeft-radium-animation-1b668a10 {\n        from{\n          left: -1000px;\n        }\n        to{\n          left: 0;\n        }\n      }\n    `\n    );\n  });\n\n  it('renders multiple keyframes in root style component', () => {\n    const animation = keyframes(\n      {\n        from: {left: '-1000px'},\n        to: {left: 0}\n      },\n      'SlideFromLeft'\n    );\n    const animation2 = keyframes(\n      {\n        from: {top: '-1000px'},\n        to: {top: 0}\n      },\n      'SlideFromTop'\n    );\n\n    class TestComponent extends Component {\n      render() {\n        return <StyleRoot style={{animationName: [animation, animation2]}} />;\n      }\n    }\n\n    const output = TestUtils.renderIntoDocument(<TestComponent />);\n\n    const style = getElement(output, 'style');\n\n    expectCSS(\n      style,\n      `\n      @keyframes SlideFromLeft-radium-animation-1b668a10 {\n        from{\n          left: -1000px;\n        }\n        to{\n          left: 0;\n        }\n      }\n      @keyframes SlideFromTop-radium-animation-edccf130{\n        from{\n          top:-1000px;\n        }\n        to{\n          top:0;\n        }\n      }\n    `\n    );\n  });\n\n  it('adds px suffix when property is not unitless', () => {\n    const animation = keyframes(\n      {\n        from: {left: -1000},\n        to: {left: 10}\n      },\n      'SlideFromLeft'\n    );\n\n    class TestComponent extends Component {\n      render() {\n        return <StyleRoot style={{animationName: animation}} />;\n      }\n    }\n\n    const output = TestUtils.renderIntoDocument(<TestComponent />);\n\n    const style = getElement(output, 'style');\n\n    expectCSS(\n      style,\n      `\n      @keyframes SlideFromLeft-radium-animation-ab5ed129 {\n        from{\n          left: -1000px;\n        }\n        to{\n          left: 10px;\n        }\n      }\n    `\n    );\n  });\n\n  it('adds px suffix when property is not unitless to multiple keyframes', () => {\n    const animation = keyframes(\n      {\n        from: {left: -1000},\n        to: {left: 10}\n      },\n      'SlideFromLeft'\n    );\n    const animation2 = keyframes(\n      {\n        from: {top: -1000},\n        to: {top: 10}\n      },\n      'SlideFromTop'\n    );\n\n    class TestComponent extends Component {\n      render() {\n        return <StyleRoot style={{animationName: [animation, animation2]}} />;\n      }\n    }\n\n    const output = TestUtils.renderIntoDocument(<TestComponent />);\n\n    const style = getElement(output, 'style');\n\n    expectCSS(\n      style,\n      `\n      @keyframes SlideFromLeft-radium-animation-ab5ed129 {\n        from{\n          left: -1000px;\n        }\n        to{\n          left: 10px;\n        }\n      }\n      @keyframes SlideFromTop-radium-animation-3a6534c9 {\n        from{\n          top:-1000px;\n        }\n        to{\n          top: 10px;\n        }\n      }\n    `\n    );\n  });\n\n  it('renders keyframes from child component', () => {\n    const animation = keyframes(\n      {\n        from: {left: '-1000px'},\n        to: {left: 0}\n      },\n      'SlideFromLeft'\n    );\n\n    @Radium\n    class ChildComponent extends Component {\n      render() {\n        return <div style={{animationName: animation}} />;\n      }\n    }\n\n    class TestComponent extends Component {\n      render() {\n        return (\n          <StyleRoot>\n            <ChildComponent />\n          </StyleRoot>\n        );\n      }\n    }\n\n    const output = TestUtils.renderIntoDocument(<TestComponent />);\n\n    const style = getElement(output, 'style');\n\n    expectCSS(\n      style,\n      `\n      @keyframes SlideFromLeft-radium-animation-1b668a10 {\n        from{\n          left: -1000px;\n        }\n        to{\n          left: 0;\n        }\n      }\n    `\n    );\n  });\n\n  it('renders multiple keyframes from child component', () => {\n    const animation = keyframes(\n      {\n        from: {left: '-1000px'},\n        to: {left: 0}\n      },\n      'SlideFromLeft'\n    );\n    const animation2 = keyframes(\n      {\n        from: {top: -1000},\n        to: {top: 0}\n      },\n      'SlideFromTop'\n    );\n\n    @Radium\n    class ChildComponent extends Component {\n      render() {\n        return <div style={{animationName: [animation, animation2]}} />;\n      }\n    }\n\n    @Radium\n    class TestComponent extends Component {\n      render() {\n        return (\n          <StyleRoot>\n            <ChildComponent />\n          </StyleRoot>\n        );\n      }\n    }\n\n    const output = renderFcIntoDocument(<TestComponent />);\n\n    const style = getElement(output, 'style');\n\n    expectCSS(\n      style,\n      `\n      @keyframes SlideFromLeft-radium-animation-1b668a10 {\n        from{\n          left: -1000px;\n        }\n        to{\n          left: 0;\n        }\n      }\n      @keyframes SlideFromTop-radium-animation-edccf130 {\n        from{\n          top:-1000px;\n        }\n        to{\n          top: 0;\n        }\n      }\n    `\n    );\n  });\n});\n"
  },
  {
    "path": "src/__tests__/media-query-test.js",
    "content": "/* eslint-disable react/prop-types */\n\nimport Radium, {StyleRoot} from 'index';\nimport React, {Component} from 'react';\nimport ReactDOM from 'react-dom';\nimport TestUtils from 'react-dom/test-utils';\nimport {\n  expectColor,\n  expectCSS,\n  getElement,\n  renderFcIntoDocument\n} from 'test-helpers';\n\n// Win on at least ie9 _can't_ sinon.stub() window.onerror like normal.\n// So, we monkeypatch directly like savages.\nconst origWindowOnerror = window.onerror;\n\ndescribe('Media query tests', () => {\n  let sandbox;\n  let errorSpy;\n\n  beforeEach(() => {\n    sandbox = sinon.sandbox.create();\n    errorSpy = sinon.spy();\n    window.addEventListener('error', errorSpy);\n\n    Radium.TestMode.clearState();\n  });\n\n  afterEach(() => {\n    sandbox.restore();\n    window.removeEventListener('error', errorSpy);\n    window.onerror = origWindowOnerror;\n\n    Radium.TestMode.disable();\n  });\n\n  it('listens for media queries', () => {\n    const addListener = sinon.spy();\n    const matchMedia = sinon.spy(() => ({addListener}));\n\n    @Radium({matchMedia})\n    class TestComponent extends Component {\n      render() {\n        return (\n          <div\n            style={{\n              '@media (min-width: 600px)': {':hover': {color: 'blue'}}\n            }}\n          />\n        );\n      }\n    }\n\n    renderFcIntoDocument(<TestComponent />);\n\n    expect(matchMedia.lastCall.args[0]).to.equal('(min-width: 600px)');\n    expect(addListener.lastCall.args[0]).to.be.a('function');\n  });\n\n  it('only listens once per component across renders', () => {\n    const addListener = sinon.spy();\n    const matchMedia = sinon.spy(() => ({addListener}));\n\n    let renders = 0;\n\n    @Radium({matchMedia})\n    class TestComponent extends Component {\n      render() {\n        renders++;\n\n        return (\n          <div\n            style={{\n              '@media (min-width: 600px)': {':hover': {color: 'blue'}}\n            }}\n          />\n        );\n      }\n    }\n\n    const node = document.createElement('div');\n    ReactDOM.render(<TestComponent />, node);\n    ReactDOM.render(<TestComponent />, node);\n\n    expect(renders).to.equal(2);\n    expect(matchMedia).to.have.been.calledOnce;\n    expect(addListener).to.have.been.calledOnce;\n  });\n\n  it('listens once per component with same @media in multiple styles', () => {\n    const addListener = sinon.spy();\n    const matchMedia = sinon.spy(() => ({addListener}));\n\n    @Radium({matchMedia})\n    class TestComponent extends Component {\n      render() {\n        return (\n          <div>\n            <div\n              key=\"first\"\n              style={{\n                '@media (max-width: 400px)': {':hover': {color: 'blue'}}\n              }}\n            />\n            <div\n              key=\"second\"\n              style={{\n                '@media (max-width: 400px)': {':hover': {color: 'blue'}}\n              }}\n            />\n          </div>\n        );\n      }\n    }\n\n    renderFcIntoDocument(<TestComponent />);\n\n    expect(matchMedia).to.have.been.calledOnce;\n    expect(addListener).to.have.been.calledOnce;\n  });\n\n  it('applies nested styles inline when media query matches', () => {\n    const truthyMatchMedia = () => {\n      return {\n        matches: true,\n        addListener: () => {},\n        removeListener: () => {}\n      };\n    };\n\n    @Radium({matchMedia: truthyMatchMedia})\n    class TestComponent extends Component {\n      render() {\n        return (\n          <div\n            style={{\n              '@media (min-width: 600px)': {':hover': {color: 'blue'}}\n            }}\n          />\n        );\n      }\n    }\n\n    const output = renderFcIntoDocument(<TestComponent />);\n    const div = getElement(output, 'div');\n    TestUtils.SimulateNative.mouseOver(div);\n\n    expect(div.style.color).to.equal('blue');\n  });\n\n  it('merges nested pseudo styles', () => {\n    const truthyMatchMedia = () => {\n      return {\n        matches: true,\n        addListener: () => {},\n        removeListener: () => {}\n      };\n    };\n\n    @Radium({matchMedia: truthyMatchMedia})\n    class TestComponent extends Component {\n      render() {\n        return (\n          <div\n            style={[\n              {':hover': {background: 'green', color: 'green'}},\n              {\n                '@media (max-width: 400px)': {\n                  ':hover': {background: 'yellow'}\n                }\n              },\n              {'@media (max-width: 400px)': {':hover': {color: 'white'}}}\n            ]}\n          />\n        );\n      }\n    }\n\n    const output = renderFcIntoDocument(<TestComponent />);\n    const div = getElement(output, 'div');\n    TestUtils.SimulateNative.mouseOver(div);\n\n    expect(div.style.background).to.equal('yellow');\n    expect(div.style.color).to.equal('white');\n  });\n\n  it('calls component setState when media query changes', () => {\n    const listeners = [];\n    const addListener = sinon.spy(listener => listeners.push(listener));\n    const mql = {addListener, matches: true};\n    const matchMedia = sinon.spy(() => mql);\n\n    @Radium({matchMedia})\n    class TestComponent extends Component {\n      render() {\n        return (\n          <div\n            style={{\n              '@media (min-width: 600px)': {':hover': {color: 'blue'}}\n            }}\n          />\n        );\n      }\n    }\n\n    // First, render with matching media query and verify the hover color\n    const output = renderFcIntoDocument(<TestComponent />);\n    const div = getElement(output, 'div');\n    TestUtils.SimulateNative.mouseOver(div);\n\n    expect(div.style.color).to.equal('blue');\n\n    // Next, make the media query fail, and check again\n    mql.matches = false;\n    listeners.forEach(listener => listener(mql));\n\n    expect(div.style.color).to.equal('');\n  });\n\n  it('saves listeners on component for later removal', () => {\n    const mql = {addListener: sinon.spy(), removeListener: sinon.spy()};\n    const matchMedia = sinon.spy(() => mql);\n\n    @Radium({matchMedia})\n    class TestComponent extends Component {\n      render() {\n        return (\n          <div\n            style={{\n              '@media (min-width: 600px)': {':hover': {color: 'blue'}}\n            }}\n          />\n        );\n      }\n    }\n\n    const output = renderFcIntoDocument(<TestComponent />);\n    ReactDOM.unmountComponentAtNode(ReactDOM.findDOMNode(output).parentNode);\n\n    expect(mql.addListener).to.have.been.calledOnce;\n    expect(mql.removeListener).to.have.been.calledOnce;\n  });\n\n  it('renders top level print styles as CSS', () => {\n    const matchMedia = sinon.spy(() => ({\n      addListener: () => {},\n      matches: true\n    }));\n\n    const ChildComponent = Radium(() => (\n      <span style={{'@media print': {color: 'black'}}} />\n    ));\n\n    const TestComponent = Radium({matchMedia})(() => (\n      <StyleRoot>\n        <ChildComponent />\n      </StyleRoot>\n    ));\n\n    const output = renderFcIntoDocument(<TestComponent />);\n\n    const span = getElement(output, 'span');\n    expect(span.className).to.not.be.empty;\n\n    const style = getElement(output, 'style');\n    expectCSS(\n      style,\n      `\n      @media print{\n        .${span.className}{\n          color:black !important;\n        }\n      }\n    `\n    );\n  });\n\n  it(\"doesn't error on unmount\", () => {\n    const matchMedia = () => ({\n      addListener: () => {},\n      matches: true\n    });\n\n    const ChildComponent = Radium(() => (\n      <span style={{'@media print': {color: 'black'}}} />\n    ));\n\n    const TestComponent = Radium({matchMedia})(() => (\n      <StyleRoot>\n        <ChildComponent />\n      </StyleRoot>\n    ));\n\n    const output = renderFcIntoDocument(<TestComponent />);\n    ReactDOM.unmountComponentAtNode(ReactDOM.findDOMNode(output).parentNode);\n  });\n\n  it('respects ordering', () => {\n    // Use small values for media queries so they all pass.\n    const ChildComponent = Radium(() => (\n      <span\n        style={[\n          {\n            '@media (min-width: 10px)': {background: 'green'},\n            '@media (min-width: 20px)': {color: 'blue'}\n          },\n          {\n            '@media (min-width: 10px)': {color: 'white'}\n          }\n        ]}\n      />\n    ));\n\n    const TestComponent = Radium(() => (\n      <StyleRoot>\n        <ChildComponent />\n      </StyleRoot>\n    ));\n\n    const root = document.createElement('div');\n    document.body.appendChild(root);\n    ReactDOM.render(<TestComponent />, root);\n    const span = document.getElementsByTagName('span')[0];\n    const computedStyle = window.getComputedStyle(span);\n\n    expectColor(computedStyle.getPropertyValue('color'), 'white');\n  });\n\n  it(\"doesn't add className if no media styles\", () => {\n    const ChildComponent = Radium(() => <span style={{color: 'black'}} />);\n\n    const TestComponent = Radium(() => (\n      <StyleRoot>\n        <ChildComponent />\n      </StyleRoot>\n    ));\n\n    const output = renderFcIntoDocument(<TestComponent />);\n\n    const span = getElement(output, 'span');\n    expect(span.className).to.be.empty;\n  });\n\n  it('retains original className', () => {\n    const ChildComponent = Radium(() => (\n      <span className=\"original\" style={{'@media print': {color: 'black'}}} />\n    ));\n\n    const TestComponent = Radium(() => (\n      <StyleRoot>\n        <ChildComponent />\n      </StyleRoot>\n    ));\n\n    const output = renderFcIntoDocument(<TestComponent />);\n\n    const span = getElement(output, 'span');\n    expect(span.className).to.contain(' original');\n  });\n\n  it('throws without StyleRoot', () => {\n    const ChildComponent = Radium(() => (\n      <span style={{'@media (min-width: 10px)': {background: 'green'}}} />\n    ));\n\n    let error;\n\n    class ErrorBoundary extends React.Component {\n      componentDidCatch(e) {\n        error = e;\n      }\n\n      render() {\n        return this.props.children;\n      }\n    }\n\n    const TestComponent = () => (\n      <ErrorBoundary>\n        <ChildComponent />\n      </ErrorBoundary>\n    );\n\n    // React 16 - need to handle exceptions globally.\n    // In DEV (aka our tests), need to silence global error handlers and such.\n    // https://github.com/facebook/react/issues/10474#issuecomment-322909303\n    window.onerror = sinon.stub();\n    sandbox.stub(console, 'error');\n\n    renderFcIntoDocument(<TestComponent />);\n\n    expect(error.message).to.contain(\n      'please wrap your application in the StyleRoot component'\n    );\n  });\n\n  it(\"doesn't throw without StyleRoot when in test mode\", () => {\n    Radium.TestMode.enable();\n    const TestComponent = Radium(() => (\n      <div>\n        <span style={{'@media (min-width: 10px)': {background: 'green'}}} />\n      </div>\n    ));\n    expect(() => renderFcIntoDocument(<TestComponent />)).not.to.throw();\n  });\n\n  it(\"doesn't try to setState if not mounted\", () => {\n    sandbox.stub(console, 'error');\n    sandbox.stub(console, 'warn');\n\n    const addListener = sinon.spy();\n    const mockMatchMedia = function() {\n      return {\n        matches: true,\n        addListener: addListener,\n        removeListener() {}\n      };\n    };\n\n    @Radium({matchMedia: mockMatchMedia})\n    class TestComponent extends Component {\n      render() {\n        return (\n          <div\n            style={{\n              '@media (min-width: 600px)': {':hover': {color: 'blue'}}\n            }}\n          />\n        );\n      }\n    }\n\n    const output = renderFcIntoDocument(<TestComponent />);\n\n    expect(addListener).to.have.been.called;\n\n    ReactDOM.unmountComponentAtNode(ReactDOM.findDOMNode(output).parentNode);\n\n    const listener = addListener.lastCall.args[0];\n    listener(mockMatchMedia);\n\n    expect(console.error).not.to.have.been.called; // eslint-disable-line no-console\n    expect(console.warn).not.to.have.been.called; // eslint-disable-line no-console\n  });\n});\n"
  },
  {
    "path": "src/__tests__/radium-test.js",
    "content": "/* eslint-disable react/prop-types */\n\nimport Radium from 'index';\nimport React, {Component} from 'react';\nimport MouseUpListener from 'plugins/mouse-up-listener';\nimport PropTypes from 'prop-types';\nimport ReactDOM from 'react-dom';\nimport TestUtils from 'react-dom/test-utils';\nimport {getElement, getElements, renderFcIntoDocument} from 'test-helpers';\n\ndescribe('Radium blackbox tests', () => {\n  let sandbox;\n\n  beforeEach(() => {\n    sandbox = sinon.sandbox.create();\n  });\n\n  afterEach(() => {\n    sandbox.restore();\n  });\n\n  it('merges styles', () => {\n    @Radium\n    class TestComponent extends Component {\n      render() {\n        return <div style={[{color: 'blue'}, {background: 'red'}]} />;\n      }\n    }\n\n    const output = renderFcIntoDocument(<TestComponent />);\n    const div = getElement(output, 'div');\n\n    expect(div.style.color).to.equal('blue');\n    expect(div.style.background).to.equal('red');\n  });\n\n  it('merges nested styles', () => {\n    @Radium\n    class TestComponent extends Component {\n      render() {\n        return (\n          <div\n            style={[\n              [{color: 'blue'}, [{height: '2px', padding: '9px'}]],\n              {background: 'red'}\n            ]}\n          />\n        );\n      }\n    }\n\n    const output = renderFcIntoDocument(<TestComponent />);\n    const div = getElement(output, 'div');\n\n    expect(div.style.color).to.equal('blue');\n    expect(div.style.background).to.equal('red');\n    expect(div.style.height).to.equal('2px');\n    expect(div.style.padding).to.equal('9px');\n  });\n\n  it('merges nested styles in function components', () => {\n    const TestComponent = Radium(() => (\n      <div\n        style={[\n          [{color: 'blue'}, [{height: '2px', padding: '9px'}]],\n          {background: 'red'}\n        ]}\n      />\n    ));\n\n    const output = renderFcIntoDocument(<TestComponent />);\n    const div = getElement(output, 'div');\n\n    expect(div.style.color).to.equal('blue');\n    expect(div.style.background).to.equal('red');\n    expect(div.style.height).to.equal('2px');\n    expect(div.style.padding).to.equal('9px');\n  });\n\n  it('merges nested styles and forwards ref in function components with forwardRef', () => {\n    const TestComponent = Radium(\n      React.forwardRef((props, ref) => (\n        <div\n          ref={ref}\n          style={[\n            [{color: 'blue'}, [{height: '2px', padding: '9px'}]],\n            {background: 'red'}\n          ]}\n        />\n      ))\n    );\n\n    const testRef = React.createRef();\n    const output = renderFcIntoDocument(<TestComponent ref={testRef} />);\n    const div = getElement(output, 'div');\n\n    expect(testRef.current).to.equal(div);\n    expect(div.style.color).to.equal('blue');\n    expect(div.style.background).to.equal('red');\n    expect(div.style.height).to.equal('2px');\n    expect(div.style.padding).to.equal('9px');\n  });\n\n  it('resolves styles on props', () => {\n    class InnerComponent extends Component {\n      render() {\n        return this.props.header;\n      }\n    }\n\n    @Radium\n    class TestComponent extends Component {\n      render() {\n        return (\n          <InnerComponent\n            header={<div style={[{color: 'blue'}, {background: 'red'}]} />}\n          />\n        );\n      }\n    }\n\n    const output = renderFcIntoDocument(<TestComponent />);\n    const div = getElement(output, 'div');\n\n    expect(div.style.color).to.equal('blue');\n    expect(div.style.background).to.equal('red');\n  });\n\n  it('resolves styles on props', () => {\n    class InnerComponent extends Component {\n      render() {\n        return this.props.stuff;\n      }\n    }\n\n    @Radium\n    class TestComponent extends Component {\n      render() {\n        return (\n          <InnerComponent\n            stuff={\n              <div\n                style={[\n                  {color: 'blue'},\n                  {background: 'red', ':active': {color: 'green'}}\n                ]}\n              />\n            }\n          />\n        );\n      }\n    }\n\n    const output = renderFcIntoDocument(<TestComponent />);\n\n    const div = getElement(output, 'div');\n\n    expect(div.style.color).to.equal('blue');\n    expect(div.style.background).to.equal('red');\n\n    TestUtils.Simulate.mouseDown(div);\n\n    expect(div.style.color).to.equal('green');\n  });\n\n  it('resolves styles on functions', () => {\n    class InnerComponent extends Component {\n      render() {\n        return this.props.children('arg');\n      }\n    }\n\n    @Radium\n    class TestComponent extends Component {\n      render() {\n        return (\n          <InnerComponent>\n            {arg => (\n              <div\n                style={[\n                  {color: 'blue'},\n                  {background: 'red', ':active': {color: 'green'}}\n                ]}\n              >\n                {arg}\n              </div>\n            )}\n          </InnerComponent>\n        );\n      }\n    }\n\n    const output = renderFcIntoDocument(<TestComponent />);\n\n    const div = getElement(output, 'div');\n\n    expect(div.style.color).to.equal('blue');\n    expect(div.style.background).to.equal('red');\n    expect(div.textContent).to.equal('arg');\n\n    TestUtils.Simulate.mouseDown(div);\n\n    expect(div.style.color).to.equal('green');\n  });\n\n  it('adds hover styles', () => {\n    @Radium\n    class TestComponent extends Component {\n      render() {\n        return (\n          <div\n            style={{\n              background: 'red',\n              color: 'blue',\n              ':hover': {color: 'green'}\n            }}\n          />\n        );\n      }\n    }\n\n    const output = renderFcIntoDocument(<TestComponent />);\n\n    const div = getElement(output, 'div');\n\n    expect(div.style.color).to.equal('blue');\n    expect(div.style.background).to.equal('red');\n\n    TestUtils.SimulateNative.mouseOver(div);\n\n    expect(div.style.color).to.equal('green');\n  });\n\n  it('adds active styles', () => {\n    @Radium\n    class TestComponent extends Component {\n      render() {\n        return (\n          <div\n            style={{\n              background: 'red',\n              color: 'blue',\n              ':active': {color: 'green'}\n            }}\n          />\n        );\n      }\n    }\n\n    const output = renderFcIntoDocument(<TestComponent />);\n\n    const div = getElement(output, 'div');\n\n    expect(div.style.color).to.equal('blue');\n    expect(div.style.background).to.equal('red');\n\n    TestUtils.Simulate.mouseDown(div);\n\n    expect(div.style.color).to.equal('green');\n  });\n\n  it('removes active styles on mouseup', () => {\n    @Radium\n    class TestComponent extends Component {\n      render() {\n        return (\n          <div>\n            <span\n              key=\"a\"\n              style={{\n                background: 'red',\n                color: 'blue',\n                ':active': {color: 'green'}\n              }}\n            />\n            <button\n              key=\"b\"\n              style={{\n                background: 'red',\n                color: 'blue',\n                ':active': {color: 'green'}\n              }}\n            />\n            <nav\n              key=\"c\"\n              style={{\n                background: 'red',\n                color: 'blue',\n                ':active': {color: 'green'}\n              }}\n            />\n          </div>\n        );\n      }\n    }\n\n    const output = renderFcIntoDocument(<TestComponent />);\n\n    const span = getElement(output, 'span');\n    const button = getElement(output, 'button');\n    const nav = getElement(output, 'nav');\n\n    expect(span.style.color).to.equal('blue');\n    expect(button.style.color).to.equal('blue');\n    expect(nav.style.color).to.equal('blue');\n\n    TestUtils.Simulate.mouseDown(span);\n    expect(span.style.color).to.equal('green');\n    MouseUpListener.__triggerForTests();\n    expect(span.style.color).to.equal('blue');\n\n    TestUtils.Simulate.mouseDown(button);\n    expect(button.style.color).to.equal('green');\n    MouseUpListener.__triggerForTests();\n    expect(button.style.color).to.equal('blue');\n\n    TestUtils.Simulate.mouseDown(nav);\n    expect(nav.style.color).to.equal('green');\n    MouseUpListener.__triggerForTests();\n    expect(nav.style.color).to.equal('blue');\n  });\n\n  it('passes snapshot to the componentDidUpdate of the component, Issue #985', () => {\n    const SNAPSHOT = 'SNAPSHOT';\n\n    class SnapshotComp extends Component {\n      componentDidMount() {\n        this.forceUpdate();\n      }\n\n      getSnapshotBeforeUpdate() {\n        return SNAPSHOT;\n      }\n\n      componentDidUpdate(props, state, snapshot) {\n        expect(snapshot).to.equal(SNAPSHOT);\n      }\n\n      render() {\n        return null;\n      }\n    }\n\n    sinon.spy(SnapshotComp.prototype, 'componentDidUpdate');\n\n    const TestComponent = Radium(SnapshotComp);\n\n    renderFcIntoDocument(<TestComponent />);\n\n    expect(SnapshotComp.prototype.componentDidUpdate).to.have.been.calledOnce;\n  });\n\n  it('resets state for unmounted components, Issue #524', () => {\n    class TestComponent extends Component {\n      state = {showSpan: true};\n      render() {\n        return (\n          <div>\n            <button onClick={() => this.setState({showSpan: true})} />\n            {this.state.showSpan && (\n              <span\n                key=\"s\"\n                onClick={() => this.setState({showSpan: false})}\n                style={{\n                  color: 'blue',\n                  ':hover': {color: 'red'}\n                }}\n              />\n            )}\n          </div>\n        );\n      }\n    }\n    const WrappedTestComponent = Radium(TestComponent);\n\n    const output = renderFcIntoDocument(<WrappedTestComponent />);\n\n    let spans = getElements(output, 'span');\n    const button = getElement(output, 'button');\n    expect(spans[0].style.color).to.equal('blue');\n\n    TestUtils.Simulate.mouseEnter(spans[0]);\n    expect(spans[0].style.color).to.equal('red');\n\n    TestUtils.Simulate.click(spans[0]);\n    spans = getElements(output, 'span');\n    expect(spans).to.have.length(0);\n\n    TestUtils.Simulate.click(button);\n    spans = getElements(output, 'span');\n    expect(spans)\n      .to.have.length(1)\n      .and.to.have.deep.property('[0].style.color', 'blue');\n  });\n\n  it('resolves styles on multiple elements nested far down, Issue #307', () => {\n    @Radium\n    class TestComponent extends Component {\n      render() {\n        return (\n          <section>\n            <section>\n              <section>\n                <header\n                  key=\"header\"\n                  style={{\n                    color: 'yellow',\n                    ':hover': {color: 'blue'}\n                  }}\n                />\n                <footer\n                  key=\"footer\"\n                  style={{\n                    color: 'green',\n                    ':hover': {color: 'red'}\n                  }}\n                />\n              </section>\n            </section>\n          </section>\n        );\n      }\n    }\n\n    const output = renderFcIntoDocument(<TestComponent />);\n\n    const header = getElement(output, 'header');\n    expect(header.style.color).to.equal('yellow');\n\n    const footer = getElement(output, 'footer');\n    expect(footer.style.color).to.equal('green');\n\n    TestUtils.SimulateNative.mouseOver(header);\n    TestUtils.SimulateNative.mouseOver(footer);\n\n    expect(header.style.color).to.equal('blue');\n    expect(footer.style.color).to.equal('red');\n  });\n\n  it('resolves styles if an element has element children', () => {\n    @Radium\n    class Inner extends Component {\n      static propTypes = {children: PropTypes.node};\n      render() {\n        return (\n          <div style={[{color: 'blue'}, {background: 'red'}]}>\n            {this.props.children}\n          </div>\n        );\n      }\n    }\n\n    @Radium\n    class Outer extends Component {\n      render() {\n        return (\n          <Inner>\n            <span>We will break you.</span>\n          </Inner>\n        );\n      }\n    }\n\n    const output = renderFcIntoDocument(<Outer />);\n\n    const div = getElement(output, 'div');\n\n    expect(div.style.color).to.equal('blue');\n    expect(div.style.background).to.equal('red');\n  });\n\n  it('calls toString on object values', () => {\n    @Radium\n    class TestComponent extends Component {\n      render() {\n        return (\n          <div\n            style={{\n              background: {toString: () => 'red'}\n            }}\n          />\n        );\n      }\n    }\n\n    const output = renderFcIntoDocument(<TestComponent />);\n    const div = getElement(output, 'div');\n\n    expect(div.style.background).to.equal('red');\n  });\n\n  it('accepts a config', () => {\n    const truthyMatchMedia = function() {\n      return {\n        matches: true,\n        addListener: function() {},\n        removeListener: function() {}\n      };\n    };\n\n    @Radium({\n      matchMedia: truthyMatchMedia\n    })\n    class TestComponent extends Component {\n      render() {\n        return (\n          <div\n            style={{\n              '@media (min-width: 600px)': {':hover': {color: 'blue'}}\n            }}\n          />\n        );\n      }\n    }\n\n    const output = renderFcIntoDocument(<TestComponent />);\n    const div = getElement(output, 'div');\n    TestUtils.SimulateNative.mouseOver(div);\n\n    expect(div.style.color).to.equal('blue');\n  });\n\n  // this doesn't seem to actually work...\n  // https://github.com/FormidableLabs/radium/issues/862#issuecomment-340953580\n  xit('transforms fallback values', () => {\n    @Radium()\n    class TestComponent extends Component {\n      render() {\n        return (\n          <div\n            style={{\n              height: ['100%', '100vh']\n            }}\n          />\n        );\n      }\n    }\n\n    const output = renderFcIntoDocument(<TestComponent />);\n    const div = getElement(output, 'div');\n\n    expect({...div.style}).to.include({\n      height: '100%;height:100vh'\n    });\n  });\n\n  it('adds active styles on space', () => {\n    @Radium\n    class TestComponent extends Component {\n      render() {\n        return (\n          <div\n            style={{\n              background: 'red',\n              color: 'blue',\n              ':active': {color: 'green'}\n            }}\n          />\n        );\n      }\n    }\n\n    const output = renderFcIntoDocument(<TestComponent />);\n\n    const div = getElement(output, 'div');\n\n    expect(div.style.color).to.equal('blue');\n    expect(div.style.background).to.equal('red');\n\n    TestUtils.SimulateNative.keyDown(div, {key: ' '});\n\n    expect(div.style.color).to.equal('green');\n\n    TestUtils.SimulateNative.keyUp(div, {key: ' '});\n\n    expect(div.style.color).to.equal('blue');\n  });\n\n  it('works with children as keyed object ala React Router', () => {\n    @Radium\n    class TestComponent extends Component {\n      render() {\n        return (\n          <div>\n            {this.props.children.nav}\n            {this.props.children.main}\n          </div>\n        );\n      }\n    }\n\n    const output = renderFcIntoDocument(\n      <TestComponent>\n        {{\n          nav: <nav>nav</nav>,\n          main: <main>main</main>\n        }}\n      </TestComponent>\n    );\n\n    const nav = getElement(output, 'nav');\n    expect(nav.innerText).to.equal('nav');\n\n    const main = getElement(output, 'main');\n    expect(main.innerText).to.equal('main');\n  });\n\n  it('preserves array children as arrays', () => {\n    @Radium\n    class TestComponent extends Component {\n      render() {\n        expect(Array.isArray(this.props.children)).to.equal(true);\n        return <div>{this.props.children}</div>;\n      }\n    }\n\n    const output = renderFcIntoDocument(\n      <TestComponent>\n        {[<nav key=\"nav\">nav</nav>, <main key=\"main\">main</main>]}\n      </TestComponent>\n    );\n\n    const nav = getElement(output, 'nav');\n    expect(nav.innerText).to.equal('nav');\n\n    const main = getElement(output, 'main');\n    expect(main.innerText).to.equal('main');\n  });\n\n  it('calls existing onMouseEnter handler', () => {\n    const handleMouseEnter = sinon.spy();\n\n    @Radium\n    class TestComponent extends Component {\n      render() {\n        return (\n          <div\n            onMouseEnter={handleMouseEnter}\n            style={{':hover': {color: 'red'}}}\n          />\n        );\n      }\n    }\n\n    const output = renderFcIntoDocument(<TestComponent />);\n    const div = getElement(output, 'div');\n    TestUtils.SimulateNative.mouseOver(div);\n\n    expect(handleMouseEnter).to.have.been.called;\n  });\n\n  it('calls existing onMouseLeave handler', () => {\n    const handleMouseLeave = sinon.spy();\n\n    @Radium\n    class TestComponent extends Component {\n      render() {\n        return (\n          <div\n            onMouseLeave={handleMouseLeave}\n            style={{':hover': {color: 'red'}}}\n          />\n        );\n      }\n    }\n\n    const output = renderFcIntoDocument(<TestComponent />);\n    const div = getElement(output, 'div');\n    TestUtils.SimulateNative.mouseOut(div);\n\n    expect(handleMouseLeave).to.have.been.called;\n  });\n\n  it('calls existing onMouseDown handler', () => {\n    const handleMouseDown = sinon.spy();\n\n    @Radium\n    class TestComponent extends Component {\n      render() {\n        return (\n          <div\n            onMouseDown={handleMouseDown}\n            style={{':active': {color: 'red'}}}\n          />\n        );\n      }\n    }\n\n    const output = renderFcIntoDocument(<TestComponent />);\n    const div = getElement(output, 'div');\n    TestUtils.SimulateNative.mouseDown(div);\n\n    expect(handleMouseDown).to.have.been.called;\n  });\n\n  it('calls existing onFocus handler', () => {\n    const handleFocus = sinon.spy();\n\n    @Radium\n    class TestComponent extends Component {\n      render() {\n        return (\n          <input onFocus={handleFocus} style={{':focus': {color: 'red'}}} />\n        );\n      }\n    }\n\n    const output = renderFcIntoDocument(<TestComponent />);\n    const input = getElement(output, 'input');\n    TestUtils.SimulateNative.focus(input);\n\n    expect(handleFocus).to.have.been.called;\n  });\n\n  it('calls existing onBlur handler', () => {\n    const handleBlur = sinon.spy();\n\n    @Radium\n    class TestComponent extends Component {\n      render() {\n        return <input onBlur={handleBlur} style={{':focus': {color: 'red'}}} />;\n      }\n    }\n\n    const output = renderFcIntoDocument(<TestComponent />);\n    const input = getElement(output, 'input');\n    TestUtils.SimulateNative.blur(input);\n\n    expect(handleBlur).to.have.been.called;\n  });\n\n  it('ignores callback refs', () => {\n    @Radium\n    class TestComponent extends Component {\n      render() {\n        return (\n          <div>\n            <span key=\"a\" ref={() => {}} style={{':hover': {color: 'red'}}} />\n            <nav key=\"b\" ref={() => {}} style={{':hover': {color: 'red'}}} />\n          </div>\n        );\n      }\n    }\n\n    const output = renderFcIntoDocument(<TestComponent />);\n    const span = getElement(output, 'span');\n    const nav = getElement(output, 'nav');\n\n    TestUtils.SimulateNative.mouseOver(span);\n    expect(span.style.color).to.equal('red');\n    expect(nav.style.color).to.equal('');\n\n    TestUtils.SimulateNative.mouseOver(nav);\n    expect(nav.style.color).to.equal('red');\n  });\n\n  describe('plugins', () => {\n    it('runs a custom plugin', () => {\n      const makeItRedPlugin = () => ({style: {color: 'red'}});\n\n      @Radium\n      class TestComponent extends Component {\n        render() {\n          return <div style={{}} />;\n        }\n      }\n\n      const output = renderFcIntoDocument(\n        <TestComponent radiumConfig={{plugins: [makeItRedPlugin]}} />\n      );\n      const div = getElement(output, 'div');\n\n      expect(div.style.color).to.equal('red');\n    });\n  });\n\n  /* eslint-disable no-console */\n  it(\"doesn't try to setState if not mounted\", () => {\n    sandbox.stub(console, 'error');\n    sandbox.stub(console, 'warn');\n\n    let setStateCaptured;\n    const plugin = function({setState}) {\n      setStateCaptured = setState;\n    };\n\n    @Radium({plugins: [plugin]})\n    class TestComponent extends Component {\n      render() {\n        return <div style={{color: 'blue'}} />;\n      }\n    }\n\n    const output = renderFcIntoDocument(<TestComponent />);\n\n    ReactDOM.unmountComponentAtNode(ReactDOM.findDOMNode(output).parentNode);\n\n    setStateCaptured('whatever');\n\n    expect(console.error).not.to.have.been.called;\n    expect(console.warn).not.to.have.been.called;\n  });\n  /* eslint-enable no-console */\n\n  it('works with stateless components', () => {\n    let MyStatelessComponent = props => (\n      <div style={{color: 'blue', ':hover': {color: 'red'}}}>\n        {props.children}\n      </div>\n    );\n\n    // Babel is forced to use regular functions when defining arrow functions.\n    // Arrow functions should not technically have prototypes,\n    // so remove it here to make sure Radium doesn't fail with real arrow functions.\n    MyStatelessComponent.prototype = undefined;\n    MyStatelessComponent = Radium(MyStatelessComponent);\n\n    const output = renderFcIntoDocument(\n      <MyStatelessComponent>hello world</MyStatelessComponent>\n    );\n    const div = getElement(output, 'div');\n\n    expect(div.style.color).to.equal('blue');\n    expect(div.innerText).to.equal('hello world');\n\n    TestUtils.SimulateNative.mouseOver(div);\n\n    expect(div.style.color).to.equal('red');\n  });\n\n  // Regression test: https://github.com/FormidableLabs/radium/issues/738\n  it('works with arrow-based render methods in components', () => {\n    class TestComponent extends Component {\n      render = () => {\n        return (\n          <div style={{color: 'blue', ':hover': {color: 'red'}}}>\n            {this.props.children}\n          </div>\n        );\n      };\n    }\n\n    const Wrapped = Radium(TestComponent);\n    const output = renderFcIntoDocument(<Wrapped>hello world</Wrapped>);\n\n    // Check prototype is not mutated.\n    expect(TestComponent.prototype).to.not.have.property('render');\n\n    const div = getElement(output, 'div');\n\n    expect(div.style.color).to.equal('blue');\n    expect(div.innerText).to.equal('hello world');\n\n    TestUtils.SimulateNative.mouseOver(div);\n\n    expect(div.style.color).to.equal('red');\n  });\n\n  // Regression test: https://github.com/FormidableLabs/radium/issues/738\n  it('works with arrow-based render methods in components with complex inheritence', () => {\n    class First extends Component {}\n    class Second extends First {}\n    class TestComponent extends Second {\n      render = () => {\n        return (\n          <div style={{color: 'blue', ':hover': {color: 'red'}}}>\n            {this.props.children}\n          </div>\n        );\n      };\n    }\n\n    const Wrapped = Radium(TestComponent);\n    const output = renderFcIntoDocument(<Wrapped>hello world</Wrapped>);\n\n    // Check prototypes are not mutated.\n    expect(First.prototype).to.not.have.property('render');\n    expect(Second.prototype).to.not.have.property('render');\n    expect(TestComponent.prototype).to.not.have.property('render');\n\n    const div = getElement(output, 'div');\n\n    expect(div.style.color).to.equal('blue');\n    expect(div.innerText).to.equal('hello world');\n\n    TestUtils.SimulateNative.mouseOver(div);\n\n    expect(div.style.color).to.equal('red');\n  });\n\n  // Regression test: https://github.com/FormidableLabs/radium/issues/950\n  it('works with array children', () => {\n    class TestComponent extends Component {\n      render = () => {\n        return [\n          <div key=\"key0\" style={{color: 'blue', ':hover': {color: 'red'}}}>\n            {this.props.children}\n          </div>,\n          <div key=\"key1\" style={{color: 'yellow', ':hover': {color: 'green'}}}>\n            two\n          </div>\n        ];\n      };\n    }\n\n    const Wrapped = Radium(TestComponent);\n    const output = renderFcIntoDocument(<Wrapped>hello world</Wrapped>);\n\n    const divs = getElements(output, 'div');\n\n    expect(divs[0].style.color).to.equal('blue');\n    expect(divs[0].getAttribute('data-radium')).to.equal('true');\n    expect(divs[0].innerText).to.equal('hello world');\n    TestUtils.SimulateNative.mouseOver(divs[0]);\n    expect(divs[0].style.color).to.equal('red');\n\n    expect(divs[1].style.color).to.equal('yellow');\n    expect(divs[1].innerText).to.equal('two');\n    TestUtils.SimulateNative.mouseOver(divs[1]);\n    expect(divs[1].style.color).to.equal('green');\n  });\n\n  it('works with Fragments', () => {\n    class TestComponent extends Component {\n      render = () => {\n        return (\n          <React.Fragment>\n            <div key=\"key0\" style={{color: 'blue', ':hover': {color: 'red'}}}>\n              {this.props.children}\n            </div>\n            <div\n              key=\"key1\"\n              style={{color: 'yellow', ':hover': {color: 'green'}}}\n            >\n              two\n            </div>\n          </React.Fragment>\n        );\n      };\n    }\n\n    const Wrapped = Radium(TestComponent);\n    const output = renderFcIntoDocument(<Wrapped>hello world</Wrapped>);\n\n    const divs = getElements(output, 'div');\n\n    expect(divs[0].style.color).to.equal('blue');\n    expect(divs[0].getAttribute('data-radium')).to.equal('true');\n    expect(divs[0].innerText).to.equal('hello world');\n    TestUtils.SimulateNative.mouseOver(divs[0]);\n    expect(divs[0].style.color).to.equal('red');\n\n    expect(divs[1].style.color).to.equal('yellow');\n    expect(divs[1].innerText).to.equal('two');\n    TestUtils.SimulateNative.mouseOver(divs[1]);\n    expect(divs[1].style.color).to.equal('green');\n  });\n\n  it('works fine if passing null, undefined, or false in style', () => {\n    const TestComponent = Radium(() => (\n      <div style={{background: undefined, border: false, color: null}} />\n    ));\n    const output = renderFcIntoDocument(<TestComponent />);\n    const div = getElement(output, 'div');\n\n    expect(div.style.background).to.equal('');\n    expect(div.style.border).to.equal('');\n    expect(div.style.color).to.equal('');\n  });\n\n  it('transfers defaultProps for stateless components', () => {\n    const defaultProps = {foo: PropTypes.string};\n\n    let MyStatelessComponent = () => <div />;\n    MyStatelessComponent.defaultProps = defaultProps;\n    MyStatelessComponent = Radium(MyStatelessComponent);\n\n    expect(MyStatelessComponent.defaultProps).to.equal(defaultProps);\n  });\n\n  /* eslint-disable no-console */\n  it('replaces style propType with array or object', () => {\n    sandbox.stub(console, 'error');\n    sandbox.stub(console, 'warn');\n\n    class TestComponent extends Component {\n      render() {\n        return <div style={this.props.style} />;\n      }\n    }\n    TestComponent.propTypes = {style: PropTypes.object};\n    TestComponent = Radium(TestComponent);\n\n    renderFcIntoDocument(<TestComponent style={[]} />);\n\n    expect(console.error).not.to.have.been.called;\n    expect(console.warn).not.to.have.been.called;\n  });\n  /* eslint-enable no-console */\n\n  describe('config', () => {\n    it('receives config from radiumConfig prop', () => {\n      const plugin = sinon.spy();\n\n      @Radium\n      class TestComponent extends Component {\n        render() {\n          return <div style={{}} />;\n        }\n      }\n\n      renderFcIntoDocument(\n        <TestComponent radiumConfig={{plugins: [plugin]}} />\n      );\n\n      expect(plugin).to.have.been.called;\n    });\n\n    it('receives config from context', () => {\n      const plugin = sinon.spy();\n\n      @Radium\n      class ParentComponent extends Component {\n        render() {\n          return (\n            <div style={{}}>\n              <ChildComponent />\n            </div>\n          );\n        }\n      }\n\n      @Radium\n      class ChildComponent extends Component {\n        render() {\n          return <div style={{}} />;\n        }\n      }\n\n      renderFcIntoDocument(\n        <ParentComponent radiumConfig={{plugins: [plugin]}} />\n      );\n\n      expect(plugin).to.have.callCount(2);\n    });\n  });\n\n  describe('inline prefixes', () => {\n    let TestComponent;\n\n    beforeEach(() => {\n      class Composed extends Component {\n        render() {\n          return React.createElement('div', {\n            style: {\n              color: 'red',\n              display: 'flex'\n            }\n          });\n        }\n      }\n\n      TestComponent = Composed;\n    });\n\n    // Regression test: https://github.com/FormidableLabs/radium/issues/958\n    it('handles no user agent', () => {\n      const userAgent = '';\n      const Wrapped = Radium({userAgent})(TestComponent);\n      const output = renderFcIntoDocument(<Wrapped />);\n      const div = getElement(output, 'div');\n\n      expect(div.style.color).to.equal('red');\n      expect(div.style.display).to.equal('flex');\n    });\n\n    // Regression test: https://github.com/FormidableLabs/radium/issues/958s\n    it('handles non-matching user agent', () => {\n      const userAgent = 'testy-mctestface';\n      const Wrapped = Radium({userAgent})(TestComponent);\n      const output = renderFcIntoDocument(<Wrapped />);\n      const div = getElement(output, 'div');\n\n      expect(div.style.color).to.equal('red');\n      expect(div.style.display).to.equal('flex');\n    });\n\n    it('handles matching user agent', () => {\n      const iOSChrome47 =\n        'Mozilla/5.0 (iPad; CPU OS 8_0_0 like Mac OS X) AppleWebKit/600.1.4 ' +\n        '(KHTML, like Gecko) CriOS/47.0.2526.107 Mobile/12H321 Safari/600.1.4';\n      const webkitFlex = '-webkit-flex';\n\n      // Check if we _can_ even have the expected value. (Can't on IE9).\n      class FlexCanary extends Component {\n        render() {\n          return React.createElement('div', {\n            style: {\n              display: webkitFlex\n            }\n          });\n        }\n      }\n      const canary = renderFcIntoDocument(<FlexCanary />);\n      const expectedDisplay = getElement(canary, 'div').style.display;\n\n      const Wrapped = Radium({userAgent: iOSChrome47})(TestComponent);\n      const output = renderFcIntoDocument(<Wrapped />);\n      const div = getElement(output, 'div');\n\n      expect(div.style.color).to.equal('red');\n      expect(div.style.display).to.equal(expectedDisplay);\n    });\n  });\n});\n"
  },
  {
    "path": "src/__tests__/remove-nested-styles-test.js",
    "content": "/* eslint-disable react/prop-types */\n\nimport Radium, {StyleRoot} from 'index';\nimport React from 'react';\nimport {getElement, renderFcIntoDocument} from 'test-helpers';\n\ndescribe('removeNestedStyles plugin tests', () => {\n  it('removes nested style objects', () => {\n    const ChildComponent = Radium(() => (\n      <span style={{color: 'red', foo: {color: 'blue'}}} />\n    ));\n\n    const TestComponent = Radium(() => (\n      <StyleRoot>\n        <ChildComponent />\n      </StyleRoot>\n    ));\n\n    const output = renderFcIntoDocument(<TestComponent />);\n    const span = getElement(output, 'span');\n    expect(span.style.foo).to.not.exist;\n  });\n\n  it('should not remove style objects that have a toString function defined', () => {\n    const styleObject = {color: 'blue'};\n    styleObject.toString = () => 'bar';\n    const ChildComponent = Radium(() => (\n      <span style={{color: 'red', foo: styleObject}} />\n    ));\n\n    const TestComponent = Radium(() => (\n      <StyleRoot>\n        <ChildComponent />\n      </StyleRoot>\n    ));\n\n    const output = renderFcIntoDocument(<TestComponent />);\n    const span = getElement(output, 'span');\n    expect(span.style.foo).to.equal('bar');\n  });\n});\n"
  },
  {
    "path": "src/__tests__/resolve-styles-test.js",
    "content": "import React from 'react';\nimport MouseUpListener from 'plugins/mouse-up-listener';\nimport objectAssign from 'object-assign';\nconst resolveStyles = require('inject-loader!resolve-styles')({\n  exenv: require('__mocks__/exenv')\n}).default;\n\nconst genComponent = function(initialState = {}) {\n  return {\n    setState: sinon.spy(function(newState) {\n      objectAssign(this.state, newState);\n    }),\n    state: initialState,\n    _radiumIsMounted: true\n  };\n};\n\n// http://stackoverflow.com/a/25395068/13932\nconst permutate = function(arr) {\n  const permutations = [];\n  if (arr.length === 1) {\n    return [arr];\n  }\n\n  for (let i = 0; i < arr.length; i++) {\n    const subPerms = permutate(arr.slice(0, i).concat(arr.slice(i + 1)));\n    for (let j = 0; j < subPerms.length; j++) {\n      subPerms[j].unshift(arr[i]);\n      permutations.push(subPerms[j]);\n    }\n  }\n\n  return permutations;\n};\n\nconst getChildrenArray = function(children) {\n  const childrenArray = [];\n  React.Children.forEach(children, function(child) {\n    childrenArray.push(child);\n  });\n  return childrenArray;\n};\n\ndescribe('resolveStyles', () => {\n  beforeEach(() => {\n    MouseUpListener.subscribe = sinon.spy();\n  });\n\n  describe('no-op behavior', () => {\n    it('handles null rendered element', () => {\n      const component = genComponent();\n\n      resolveStyles(component, null);\n    });\n\n    it(\"doesn't explode\", () => {\n      const component = genComponent();\n      const renderedElement = <div />;\n\n      const result = resolveStyles(component, renderedElement).element;\n\n      expect(result).to.equal(renderedElement);\n      expect(result.props).to.equal(renderedElement.props);\n    });\n\n    it('passes through normal style objects', () => {\n      const component = genComponent();\n      const renderedElement = <div style={{color: 'blue'}} />;\n\n      const result = resolveStyles(component, renderedElement).element;\n\n      expect(result.props.style).to.deep.equal(renderedElement.props.style);\n    });\n\n    it('passes through normal style objects of children', () => {\n      const component = genComponent();\n      const style = {color: 'blue'};\n      const renderedElement = (\n        <div>\n          <div style={style} />\n        </div>\n      );\n\n      const result = resolveStyles(component, renderedElement).element;\n      const children = getChildrenArray(result.props.children);\n      expect(children[0].props.style).to.deep.equal(style);\n    });\n\n    it(\"doesn't wrap string children in spans\", () => {\n      const component = genComponent();\n      const renderedElement = <div>Hello</div>;\n\n      const result = resolveStyles(component, renderedElement).element;\n      expect(result.props.children).to.equal('Hello');\n    });\n\n    it(\"doesn't wrap number children in spans\", () => {\n      const component = genComponent();\n      const renderedElement = <div>{88347}</div>;\n\n      const result = resolveStyles(component, renderedElement).element;\n      expect(result.props.children).to.equal(88347);\n    });\n\n    it('ignores invalid children', () => {\n      const component = genComponent();\n\n      // JSX won't let this through, so do it with a plain object instead\n      const renderedElement = {\n        props: {\n          children: [null]\n        }\n      };\n\n      const result = resolveStyles(component, renderedElement).element;\n      const children = getChildrenArray(result.props.children);\n\n      expect(children[0]).to.be.undefined;\n    });\n\n    it('only processes an element once', () => {\n      sinon.spy(React, 'cloneElement');\n\n      const component = genComponent();\n      const renderedElement = (\n        <div style={[{background: 'white'}, {color: 'blue'}]} />\n      );\n\n      let result = resolveStyles(component, renderedElement).element;\n      result = resolveStyles(component, result).element;\n\n      expect(result.props.style).to.deep.equal({\n        background: 'white',\n        color: 'blue'\n      });\n\n      expect(React.cloneElement).to.have.been.calledOnce;\n\n      React.cloneElement.restore();\n    });\n  });\n\n  describe('style array', () => {\n    it('merges an array of style objects', () => {\n      const component = genComponent();\n      const renderedElement = (\n        <div style={[{background: 'white'}, {color: 'blue'}]} />\n      );\n\n      const result = resolveStyles(component, renderedElement).element;\n\n      expect(result.props.style).to.deep.equal({\n        background: 'white',\n        color: 'blue'\n      });\n    });\n\n    it('skips falsy and non-object entries', () => {\n      const component = genComponent();\n      const renderedElement = (\n        <div\n          style={[\n            {background: 'white'},\n            false,\n            null,\n            ''.someUndefinedVar,\n            '',\n            [1, 2, 3],\n            {color: 'blue'}\n          ]}\n        />\n      );\n\n      const result = resolveStyles(component, renderedElement).element;\n\n      expect(result.props.style).to.deep.equal({\n        background: 'white',\n        color: 'blue'\n      });\n    });\n\n    it('overwrites earlier styles with later ones', () => {\n      const component = genComponent();\n      const renderedElement = (\n        <div style={[{background: 'white'}, {background: 'blue'}]} />\n      );\n\n      const result = resolveStyles(component, renderedElement).element;\n\n      expect(result.props.style).to.deep.equal({\n        background: 'blue'\n      });\n    });\n\n    it('merges nested special styles', () => {\n      const component = genComponent();\n      const renderedElement = (\n        <div\n          style={[\n            {':hover': {background: 'white'}},\n            {':hover': {color: 'blue'}}\n          ]}\n        />\n      );\n\n      let result = resolveStyles(component, renderedElement).element;\n      result.props.onMouseEnter();\n      result = resolveStyles(component, renderedElement).element;\n\n      expect(result.props.style).to.deep.equal({\n        background: 'white',\n        color: 'blue'\n      });\n    });\n  });\n\n  const createPseduoStyleTests = function(\n    pseudo,\n    onHandlerName,\n    offHandlerName\n  ) {\n    it('strips special styles if not applied', () => {\n      const component = genComponent();\n      const style = {background: 'blue'};\n      style[':' + pseudo] = {background: 'red'};\n      const renderedElement = <div style={style} />;\n\n      const result = resolveStyles(component, renderedElement).element;\n\n      expect(result.props.style).to.deep.equal({background: 'blue'});\n    });\n\n    it('adds appropriate handlers for ' + pseudo + ' styles', () => {\n      const component = genComponent();\n      const style = {background: 'blue'};\n      style[':' + pseudo] = {background: 'red'};\n      const renderedElement = <div style={style} />;\n\n      const result = resolveStyles(component, renderedElement).element;\n\n      expect(typeof result.props[onHandlerName]).to.equal('function');\n      if (offHandlerName) {\n        expect(typeof result.props[offHandlerName]).to.equal('function');\n      }\n    });\n\n    it('adds ' + pseudo + ' styles ' + onHandlerName, () => {\n      const component = genComponent();\n      const style = {background: 'blue'};\n      style[':' + pseudo] = {background: 'red'};\n      const renderedElement = <div style={style} />;\n\n      let result = resolveStyles(component, renderedElement).element;\n      expect(result.props.style.background).to.equal('blue');\n\n      result.props[onHandlerName]();\n\n      expect(component.setState).to.have.been.called;\n\n      // Must create a new renderedElement each time, same as React, since\n      // resolveStyles mutates\n      result = resolveStyles(component, renderedElement).element;\n      expect(result.props.style.background).to.equal('red');\n    });\n\n    it('throws if multiple elements have the same key', () => {\n      const component = genComponent();\n      const style = {background: 'blue'};\n      style[':' + pseudo] = {background: 'red'};\n\n      // Use ref instead of key here because React.Children.map will discard\n      // the duplicate keyed element.\n      const renderedElement = (\n        <div>\n          <div ref=\"foo\" style={style} />\n          <div ref=\"foo\" style={style} />\n        </div>\n      );\n\n      expect(() => {\n        resolveStyles(component, renderedElement);\n      }).to.throw();\n    });\n\n    it('throws if multiple elements have no key', () => {\n      const component = genComponent();\n      const style = {background: 'blue'};\n      style[':' + pseudo] = {background: 'red'};\n\n      const renderedElement = (\n        <div>\n          <div style={style} />\n          <div style={style} />\n        </div>\n      );\n\n      expect(() => {\n        resolveStyles(component, renderedElement);\n      }).to.throw();\n    });\n\n    it('adds ' + pseudo + ' styles to correct element by key', () => {\n      const component = genComponent();\n      const style = {background: 'blue'};\n      style[':' + pseudo] = {background: 'red'};\n\n      const renderedElement = (\n        <div>\n          <div key=\"foo\" />\n          <div key=\"bar\" style={style} />\n        </div>\n      );\n\n      let result = resolveStyles(component, renderedElement).element;\n      let children = getChildrenArray(result.props.children);\n      expect(children[0].props.style).to.be.undefined;\n      expect(children[1].props.style.background).to.equal('blue');\n\n      children[1].props[onHandlerName]();\n\n      result = resolveStyles(component, renderedElement).element;\n      children = getChildrenArray(result.props.children);\n      expect(children[0].props.style).to.be.undefined;\n      expect(children[1].props.style.background).to.equal('red');\n    });\n\n    it('adds ' + pseudo + ' styles to correct element by ref', () => {\n      const component = genComponent();\n      const style = {background: 'blue'};\n      style[':' + pseudo] = {background: 'red'};\n\n      const renderedElement = (\n        <div>\n          <div ref=\"foo\" />\n          <div ref=\"bar\" style={style} />\n        </div>\n      );\n\n      let result = resolveStyles(component, renderedElement).element;\n      let children = getChildrenArray(result.props.children);\n      expect(children[0].props.style).to.be.undefined;\n      expect(children[1].props.style.background).to.equal('blue');\n\n      children[1].props[onHandlerName]();\n\n      result = resolveStyles(component, renderedElement).element;\n      children = getChildrenArray(result.props.children);\n      expect(children[0].props.style).to.be.undefined;\n      expect(children[1].props.style.background).to.equal('red');\n    });\n\n    if (offHandlerName) {\n      it('removes ' + pseudo + ' styles ' + offHandlerName, () => {\n        const component = genComponent();\n        const style = {background: 'blue'};\n        style[':' + pseudo] = {background: 'red'};\n        const renderedElement = <div style={style} />;\n\n        let result = resolveStyles(component, renderedElement).element;\n\n        result.props[onHandlerName]();\n\n        result = resolveStyles(component, renderedElement).element;\n        expect(result.props.style.background).to.equal('red');\n\n        result.props[offHandlerName]();\n\n        expect(component.setState).to.have.been.called;\n\n        result = resolveStyles(component, renderedElement).element;\n        expect(result.props.style.background).to.equal('blue');\n      });\n\n      it(\"doesn't mutate state\", () => {\n        const component = genComponent();\n        const style = {background: 'blue'};\n        style[':' + pseudo] = {background: 'red'};\n        const renderedElement = <div style={style} />;\n\n        let result = resolveStyles(component, renderedElement).element;\n\n        // Capturing a reference to the existing state is enough, since Radium\n        // MUST return a new copy for shouldComponentUpdate.\n        let previousState = component.state._radiumStyleState;\n        result.props[onHandlerName]();\n        // If they are still equal here, that means we mutated the existing\n        // state, which will break shouldComponentUpdate.\n        expect(component.state._radiumStyleState).not.to.equal(previousState);\n\n        result = resolveStyles(component, renderedElement).element;\n\n        previousState = component.state._radiumStyleState;\n        result.props[offHandlerName]();\n        expect(component.state._radiumStyleState).not.to.equal(previousState);\n      });\n    }\n  };\n\n  describe(':hover', () => {\n    createPseduoStyleTests('hover', 'onMouseEnter', 'onMouseLeave');\n  });\n\n  describe(':focus', () => {\n    createPseduoStyleTests('focus', 'onFocus', 'onBlur');\n  });\n\n  describe(':active', () => {\n    createPseduoStyleTests('active', 'onMouseDown');\n\n    it('subscribes to mouse up listener', () => {\n      const component = genComponent();\n      const renderedElement = <div style={{':active': {background: 'red'}}} />;\n\n      resolveStyles(component, renderedElement);\n\n      expect(MouseUpListener.subscribe).to.have.been.called;\n    });\n\n    it('adds active styles on mouse down', () => {\n      const component = genComponent();\n      const style = {\n        background: 'blue',\n        ':active': {background: 'red'}\n      };\n      const renderedElement = <div style={style} />;\n\n      let result = resolveStyles(component, renderedElement).element;\n      expect(result.props.style.background).to.equal('blue');\n\n      result.props.onMouseDown();\n\n      result = resolveStyles(component, renderedElement).element;\n      expect(result.props.style.background).to.equal('red');\n    });\n\n    it('removes active styles on mouse up', () => {\n      const component = genComponent();\n      const style = {\n        background: 'blue',\n        ':active': {background: 'red'}\n      };\n      const renderedElement = <div style={style} />;\n\n      let result = resolveStyles(component, renderedElement).element;\n\n      result.props.onMouseDown();\n\n      result = resolveStyles(component, renderedElement).element;\n      expect(result.props.style.background).to.equal('red');\n\n      // tigger global mouseup handler\n      MouseUpListener.subscribe.firstCall.args[0]();\n\n      result = resolveStyles(component, renderedElement).element;\n      expect(result.props.style.background).to.equal('blue');\n    });\n\n    it('ignores mouse up if no active styles', () => {\n      const component = genComponent();\n      const style = {\n        background: 'blue',\n        ':active': {background: 'red'}\n      };\n      const renderedElement = <div style={style} />;\n\n      let result = resolveStyles(component, renderedElement).element;\n\n      result.props.onMouseDown();\n\n      // tigger global mouseup handler\n      MouseUpListener.subscribe.firstCall.args[0]();\n      MouseUpListener.subscribe.firstCall.args[0]();\n\n      result = resolveStyles(component, renderedElement).element;\n      expect(result.props.style.background).to.equal('blue');\n    });\n\n    it('calls existing onMouseDown handler', () => {\n      const component = genComponent();\n      const style = {\n        background: 'blue',\n        ':active': {background: 'red'}\n      };\n      const originalOnMouseDown = sinon.spy();\n      const renderedElement = (\n        <div onMouseDown={originalOnMouseDown} style={style} />\n      );\n\n      let result = resolveStyles(component, renderedElement).element;\n\n      result.props.onMouseDown();\n\n      expect(originalOnMouseDown).to.have.been.called;\n\n      result = resolveStyles(component, renderedElement).element;\n      expect(result.props.style.background).to.equal('red');\n    });\n  });\n\n  describe('multiple states triggered at once', () => {\n    describe('applies pseudo styles in the defined order', () => {\n      const component = genComponent();\n      const stylePermutations = permutate([\n        {name: ':active', style: {background: 'red'}},\n        {name: ':focus', style: {background: 'yellow'}},\n        {name: ':hover', style: {background: 'blue'}}\n      ]);\n      const onHandlerPermutations = permutate([\n        'onFocus',\n        'onMouseDown',\n        'onMouseEnter'\n      ]);\n\n      const createMultiPseudoTest = function(pseudoStyles, onHandlers) {\n        const name =\n          'applies pseudo styles in the defined order: ' +\n          pseudoStyles.map(pseudo => pseudo.name).join(', ') +\n          ' when handlers called in order: ' +\n          onHandlers.join(', ');\n        it(name, () => {\n          const style = {};\n          pseudoStyles.forEach(pseudo => {\n            style[pseudo.name] = pseudo.style;\n          });\n          const renderedElement = <div style={style} />;\n\n          let result = resolveStyles(component, renderedElement).element;\n\n          onHandlers.forEach(onHandler => {\n            result.props[onHandler]();\n          });\n\n          result = resolveStyles(component, renderedElement).element;\n\n          expect(result.props.style.background).to.equal(\n            pseudoStyles[pseudoStyles.length - 1].style.background\n          );\n        });\n      };\n\n      stylePermutations.forEach(pseudoStyles => {\n        onHandlerPermutations.forEach(onHandlers => {\n          createMultiPseudoTest(pseudoStyles, onHandlers);\n        });\n      });\n    });\n  });\n\n  describe('when elements are unmounted', () => {\n    it('returns an extraStateKeyMap with keys of unmounted elements', () => {\n      const initialState = {\n        _radiumStyleState: {\n          mountedDiv: {},\n          unmountedDiv: {}\n        }\n      };\n      const component = genComponent(initialState);\n      const renderedElement = (\n        <div>\n          <div ref=\"mountedDiv\" />\n        </div>\n      );\n\n      const result = resolveStyles(component, renderedElement).extraStateKeyMap;\n\n      expect(result).to.deep.equal({unmountedDiv: true});\n    });\n  });\n\n  describe('React.Children.only', () => {\n    it(\"doesn't break React.Children.only\", () => {\n      const component = genComponent();\n      const renderedElement = (\n        <div>\n          <span />\n        </div>\n      );\n\n      const result = resolveStyles(component, renderedElement).element;\n\n      expect(React.Children.only(result.props.children)).to.be.ok;\n    });\n\n    it(\"doesn't break when only child isn't ReactElement\", () => {\n      const component = genComponent();\n      const renderedElement = <div>Foo</div>;\n\n      resolveStyles(component, renderedElement);\n    });\n  });\n\n  describe('ReactComponentElement children', () => {\n    it(\"doesn't resolve ReactComponentElement children\", () => {\n      const component = genComponent();\n      class CustomComponent extends React.Component {}\n      const style = {':hover': {}};\n      const renderedElement = (\n        <div>\n          <CustomComponent style={style} />\n        </div>\n      );\n\n      const result = resolveStyles(component, renderedElement).element;\n      const children = getChildrenArray(result.props.children);\n      expect(children[0].props.style).to.deep.equal(style);\n    });\n\n    it('resolves ReactDOMElement children of ReactComponentElements', () => {\n      const component = genComponent();\n      class CustomComponent extends React.Component {}\n      const style = [{background: 'white'}, {color: 'blue'}];\n      const renderedElement = (\n        <div style={style}>\n          <CustomComponent style={style}>\n            <div style={style} />\n          </CustomComponent>\n        </div>\n      );\n\n      const result = resolveStyles(component, renderedElement).element;\n      expect(result.props.style).to.deep.equal({\n        background: 'white',\n        color: 'blue'\n      });\n\n      const children = getChildrenArray(result.props.children);\n      expect(children[0].props.style).to.deep.equal(style);\n\n      const componentChildren = getChildrenArray(children[0].props.children);\n      expect(componentChildren[0].props.style).to.deep.equal({\n        background: 'white',\n        color: 'blue'\n      });\n    });\n  });\n\n  describe('disabled', () => {\n    it('discards interaction styles if element is disabled', () => {\n      const component = genComponent();\n      const style = {background: 'blue'};\n      style[':hover'] = {background: 'red'};\n\n      const renderedElement = (\n        <div>\n          <div ref=\"foo\" />\n          <div disabled ref=\"bar\" style={style} />\n        </div>\n      );\n\n      let result = resolveStyles(component, renderedElement).element;\n      let children = getChildrenArray(result.props.children);\n      expect(children[0].props.style).to.be.undefined;\n      expect(children[1].props.style.background).to.equal('blue');\n\n      children[1].props.onMouseEnter();\n\n      result = resolveStyles(component, renderedElement).element;\n      children = getChildrenArray(result.props.children);\n      expect(children[0].props.style).to.be.undefined;\n      expect(children[1].props.style.background).to.equal('blue');\n    });\n\n    it('styles according to :disabled style if element is disabled', () => {\n      const component = genComponent();\n      const style = {background: 'blue'};\n      style[':hover'] = {background: 'red'};\n      style[':disabled'] = {background: 'yellow'};\n\n      const renderedElement = (\n        <div>\n          <div ref=\"foo\" />\n          <div disabled ref=\"bar\" style={style} />\n        </div>\n      );\n\n      let result = resolveStyles(component, renderedElement).element;\n      let children = getChildrenArray(result.props.children);\n      expect(children[0].props.style).to.be.undefined;\n      expect(children[1].props.style.background).to.equal('yellow');\n\n      children[1].props.onMouseEnter();\n\n      result = resolveStyles(component, renderedElement).element;\n      children = getChildrenArray(result.props.children);\n      expect(children[0].props.style).to.be.undefined;\n      expect(children[1].props.style.background).to.equal('yellow');\n    });\n  });\n\n  /* eslint-disable no-console */\n  describe('warnings', () => {\n    beforeEach(() => {\n      sinon.stub(console, 'warn');\n    });\n\n    afterEach(() => {\n      console.warn.restore();\n      process.env.NODE_ENV = null;\n    });\n\n    it('warns when mixing longhand and shorthand properties', () => {\n      const component = genComponent();\n      const renderedElement = (\n        <div\n          style={{\n            border: '1px solid black',\n            borderWidth: '0 1px 1px 1px'\n          }}\n        />\n      );\n\n      resolveStyles(component, renderedElement);\n\n      expect(console.warn).to.have.been.called;\n      expect(\n        console.warn.firstCall.args[0].indexOf('border')\n      ).to.be.greaterThan(0);\n    });\n\n    it('warns when mixing longhand and shorthand properties in nested styles', () => {\n      const component = genComponent();\n      const renderedElement = (\n        <div\n          style={{\n            ':hover': {\n              border: '1px solid black',\n              borderWidth: '0 1px 1px 1px'\n            }\n          }}\n        />\n      );\n\n      resolveStyles(component, renderedElement);\n\n      expect(console.warn).to.have.been.called;\n      expect(\n        console.warn.firstCall.args[0].indexOf('border')\n      ).to.be.greaterThan(0);\n    });\n\n    it('does not warn when mixing border and borderRadius', () => {\n      const component = genComponent();\n      const renderedElement = (\n        <div\n          style={{\n            border: '1px solid black',\n            borderRadius: '5px'\n          }}\n        />\n      );\n\n      resolveStyles(component, renderedElement);\n\n      expect(console.warn).to.not.have.been.called;\n    });\n\n    it('does not throw when passed a falsy entry value', () => {\n      const component = genComponent();\n      const renderedElement = <div style={{height: null}} />;\n\n      expect(() => {\n        resolveStyles(component, renderedElement);\n      }).to.not.throw();\n    });\n  });\n  /* eslint-enable no-console */\n});\n"
  },
  {
    "path": "src/__tests__/style-component-test.js",
    "content": "/* eslint-disable react/prop-types */\n\nimport {Style} from 'index';\nimport React from 'react';\nimport {expectCSS, getElement, renderFcIntoDocument} from 'test-helpers';\nconst MSIE9_USER_AGENT =\n  'Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 7.1; Trident/5.0)';\n\ndescribe('<Style> component', () => {\n  it(\"adds px suffix to properties that don't accept unitless values\", () => {\n    const output = renderFcIntoDocument(<Style rules={{div: {height: 10}}} />);\n\n    const style = getElement(output, 'style');\n    expectCSS(\n      style,\n      `\n      div {\n        height: 10px;\n      }\n    `\n    );\n  });\n\n  it(\"doesn't add px suffix to properties that accept unitless values\", () => {\n    const output = renderFcIntoDocument(<Style rules={{div: {zIndex: 10}}} />);\n\n    const style = getElement(output, 'style');\n    expectCSS(\n      style,\n      `\n      div {\n        z-index: 10;\n      }\n    `\n    );\n  });\n\n  it('can be configured standalone', () => {\n    const output = renderFcIntoDocument(\n      <Style\n        radiumConfig={{userAgent: MSIE9_USER_AGENT}}\n        rules={{div: {transform: 'rotate(90)'}}}\n      />\n    );\n\n    const style = getElement(output, 'style');\n    expectCSS(\n      style,\n      `\n      div {\n        -ms-transform: rotate(90);\n      }\n    `\n    );\n  });\n\n  it('add all the prefixes when we ask for', () => {\n    const output = renderFcIntoDocument(\n      <Style\n        radiumConfig={{userAgent: 'all'}}\n        rules={{div: {transform: 'rotate(90)'}}}\n      />\n    );\n\n    const style = getElement(output, 'style');\n    expectCSS(\n      style,\n      `\n      div{\n        -webkit-transform:rotate(90);\n        -ms-transform:rotate(90);\n        transform:rotate(90);\n      }\n    `\n    );\n  });\n\n  it('adds scopeSelector to each selector', () => {\n    const output = renderFcIntoDocument(\n      <Style\n        rules={{\n          div: {color: 'red'},\n          span: {color: 'blue'}\n        }}\n        scopeSelector=\".scope\"\n      />\n    );\n\n    const style = getElement(output, 'style');\n    expectCSS(\n      style,\n      `\n      .scope div {\n        color: red;\n      }\n      .scope span {\n        color: blue;\n      }\n    `\n    );\n  });\n\n  it('adds scopeSelector to multiple selectors in a single ruleset', () => {\n    const output = renderFcIntoDocument(\n      <Style rules={{'div, span': {color: 'red'}}} scopeSelector=\".scope\" />\n    );\n\n    const style = getElement(output, 'style');\n    expectCSS(\n      style,\n      `\n      .scope div, .scope span {\n        color: red;\n      }\n    `\n    );\n  });\n\n  it('adds scopeSelector if no selectors are present', () => {\n    const output = renderFcIntoDocument(\n      <Style\n        rules={{\n          color: 'red',\n          backgroundColor: 'white',\n          div: {\n            color: 'blue',\n            backgroundColor: 'black'\n          }\n        }}\n        scopeSelector=\".scope\"\n      />\n    );\n\n    const style = getElement(output, 'style');\n    expectCSS(\n      style,\n      `\n      .scope {\n        color: red;\n        background-color: white;\n      }\n      .scope div {\n        color: blue;\n        background-color: black;\n      }\n    `\n    );\n  });\n});\n"
  },
  {
    "path": "src/__tests__/visited-test.js",
    "content": "/* eslint-disable react/prop-types */\n\nimport Radium, {StyleRoot} from 'index';\nimport React from 'react';\nimport {expectCSS, getElement, renderFcIntoDocument} from 'test-helpers';\n\ndescribe('visited plugin tests', () => {\n  it('renders visited styles as css', () => {\n    const ChildComponent = Radium(() => (\n      <span style={{':visited': {color: 'purple'}}} />\n    ));\n\n    const TestComponent = Radium(() => (\n      <StyleRoot>\n        <ChildComponent />\n      </StyleRoot>\n    ));\n\n    const output = renderFcIntoDocument(<TestComponent />);\n\n    const span = getElement(output, 'span');\n    expect(span.className).to.not.be.empty;\n\n    const style = getElement(output, 'style');\n    expectCSS(\n      style,\n      `\n      .${span.className}:visited {\n        color: purple !important;\n      }\n    `\n    );\n  });\n\n  it('retains original className', () => {\n    const ChildComponent = Radium(() => (\n      <span className=\"original\" style={{':visited': {color: 'purple'}}} />\n    ));\n\n    const TestComponent = Radium(() => (\n      <StyleRoot>\n        <ChildComponent />\n      </StyleRoot>\n    ));\n\n    const output = renderFcIntoDocument(<TestComponent />);\n\n    const span = getElement(output, 'span');\n    expect(span.className).to.contain('original ');\n  });\n});\n"
  },
  {
    "path": "src/append-important-to-each-value.js",
    "content": "/* @flow */\n\nimport appendPxIfNeeded from './append-px-if-needed';\nimport mapObject from './map-object';\n\nexport default function appendImportantToEachValue(style: Object): Object {\n  return mapObject(\n    style,\n    (result, key) => appendPxIfNeeded(key, style[key]) + ' !important'\n  );\n}\n"
  },
  {
    "path": "src/append-px-if-needed.js",
    "content": "/* @flow */\n\n// Copied from https://github.com/facebook/react/blob/\n// b87aabdfe1b7461e7331abb3601d9e6bb27544bc/\n// packages/react-dom/src/shared/CSSProperty.js\nconst isUnitlessNumber = {\n  animationIterationCount: true,\n  borderImageOutset: true,\n  borderImageSlice: true,\n  borderImageWidth: true,\n  boxFlex: true,\n  boxFlexGroup: true,\n  boxOrdinalGroup: true,\n  columnCount: true,\n  columns: true,\n  flex: true,\n  flexGrow: true,\n  flexPositive: true,\n  flexShrink: true,\n  flexNegative: true,\n  flexOrder: true,\n  gridArea: true,\n  gridRow: true,\n  gridRowEnd: true,\n  gridRowSpan: true,\n  gridRowStart: true,\n  gridColumn: true,\n  gridColumnEnd: true,\n  gridColumnSpan: true,\n  gridColumnStart: true,\n  fontWeight: true,\n  lineClamp: true,\n  lineHeight: true,\n  opacity: true,\n  order: true,\n  orphans: true,\n  tabSize: true,\n  widows: true,\n  zIndex: true,\n  zoom: true,\n\n  // SVG-related properties\n  fillOpacity: true,\n  floodOpacity: true,\n  stopOpacity: true,\n  strokeDasharray: true,\n  strokeDashoffset: true,\n  strokeMiterlimit: true,\n  strokeOpacity: true,\n  strokeWidth: true\n};\n\nexport default function appendPxIfNeeded(\n  propertyName: string,\n  value: any\n): string {\n  const needsPxSuffix =\n    !isUnitlessNumber[propertyName] && typeof value === 'number' && value !== 0;\n  return needsPxSuffix ? value + 'px' : value;\n}\n"
  },
  {
    "path": "src/camel-case-props-to-dash-case.js",
    "content": "/* @flow */\n\nconst _camelCaseRegex = /([a-z])?([A-Z])/g;\n\nconst _camelCaseReplacer = function(match, p1, p2) {\n  return (p1 || '') + '-' + p2.toLowerCase();\n};\n\nexport const camelCaseToDashCase = function(s: string): string {\n  return s.replace(_camelCaseRegex, _camelCaseReplacer);\n};\n\nconst camelCasePropsToDashCase = function(prefixedStyle: Object): Object {\n  // Since prefix is expected to work on inline style objects, we must\n  // translate the keys to dash case for rendering to CSS.\n  return Object.keys(prefixedStyle).reduce((result, key) => {\n    let dashCaseKey = camelCaseToDashCase(key);\n\n    // Fix IE vendor prefix\n    if (/^ms-/.test(dashCaseKey)) {\n      dashCaseKey = `-${dashCaseKey}`;\n    }\n\n    result[dashCaseKey] = prefixedStyle[key];\n    return result;\n  }, {});\n};\n\nexport default camelCasePropsToDashCase;\n"
  },
  {
    "path": "src/clean-state-key.js",
    "content": "/* flow */\n\nconst cleanStateKey = key => {\n  return key === null || typeof key === 'undefined' ? 'main' : key.toString();\n};\n\nexport default cleanStateKey;\n"
  },
  {
    "path": "src/components/style-root.js",
    "content": "/* @flow */\n\nimport React, {useContext, useRef} from 'react';\nimport type {Node} from 'react';\n\nimport Enhancer from '../enhancer';\nimport StyleKeeper from '../style-keeper';\nimport StyleSheet from './style-sheet';\nimport type {Config} from '../config';\nimport {StyleKeeperContext, RadiumConfigContext} from '../context';\n\nfunction getStyleKeeper(\n  configProp: Config,\n  configContext?: Config\n): StyleKeeper {\n  const userAgent =\n    (configProp && configProp.userAgent) ||\n    (configContext && configContext.userAgent);\n\n  return new StyleKeeper(userAgent);\n}\n\ntype StyleRootProps = {\n  radiumConfig: Config,\n  children: Node\n};\n\nconst StyleRootInner = Enhancer(({children, ...otherProps}: StyleRootProps) => (\n  <div {...otherProps}>\n    {children}\n    <StyleSheet />\n  </div>\n));\n\nconst StyleRoot = (props: StyleRootProps) => {\n  /* eslint-disable no-unused-vars */\n  // Pass down all props except config to the rendered div.\n  /* eslint-enable no-unused-vars */\n  const {radiumConfig} = props;\n\n  const configContext = useContext(RadiumConfigContext);\n  const styleKeeper = useRef<StyleKeeper>(\n    getStyleKeeper(radiumConfig, configContext)\n  );\n\n  return (\n    <StyleKeeperContext.Provider value={styleKeeper.current}>\n      <StyleRootInner {...props} />\n    </StyleKeeperContext.Provider>\n  );\n};\n\nexport default StyleRoot;\n"
  },
  {
    "path": "src/components/style-sheet.js",
    "content": "/* @flow */\n\nimport React, {Component} from 'react';\n\nimport StyleKeeper from '../style-keeper';\nimport {withRadiumContexts, type WithRadiumContextsProps} from '../context';\n\nclass StyleSheet extends Component<WithRadiumContextsProps> {\n  // eslint-disable-next-line react/sort-comp\n  styleKeeper: StyleKeeper;\n\n  constructor() {\n    super(...arguments);\n\n    if (!this.props.styleKeeperContext) {\n      throw new Error('StyleRoot is required to use StyleSheet');\n    }\n\n    this.styleKeeper = this.props.styleKeeperContext;\n    this._css = this.styleKeeper.getCSS();\n  }\n\n  componentDidMount() {\n    this._subscription = this.styleKeeper.subscribe(this._onChange);\n    this._onChange();\n  }\n\n  shouldComponentUpdate() {\n    return false;\n  }\n\n  componentWillUnmount() {\n    if (this._subscription) {\n      this._subscription.remove();\n    }\n  }\n\n  _subscription: ?{remove: () => void};\n  _root: ?HTMLElement;\n  _css: string;\n\n  _onChange = () => {\n    const nextCSS = this.styleKeeper.getCSS();\n\n    if (nextCSS !== this._css) {\n      if (this._root) {\n        this._root.innerHTML = nextCSS;\n      } else {\n        throw new Error(\n          'No root style object found, even after StyleSheet mount.'\n        );\n      }\n      this._css = nextCSS;\n    }\n  };\n\n  render() {\n    return (\n      <style\n        dangerouslySetInnerHTML={{__html: this._css}}\n        ref={c => {\n          this._root = c;\n        }}\n      />\n    );\n  }\n}\n\nexport default withRadiumContexts(StyleSheet);\n"
  },
  {
    "path": "src/components/style.js",
    "content": "/* @flow */\n\nimport cssRuleSetToString from '../css-rule-set-to-string';\n\nimport React, {type Node, PureComponent} from 'react';\nimport PropTypes from 'prop-types';\nimport type {Config} from '../config';\nimport {withRadiumContexts} from '../context';\n\ntype StyleProps = {\n  radiumConfig: Config,\n  radiumConfigContext?: Config,\n  rules: {},\n  scopeSelector: string\n};\n\nclass Style extends PureComponent<StyleProps> {\n  static propTypes = {\n    radiumConfig: PropTypes.object,\n    rules: PropTypes.object,\n    scopeSelector: PropTypes.string\n  };\n\n  static defaultProps: {scopeSelector: string} = {\n    scopeSelector: ''\n  };\n\n  _buildStyles(styles: Object): string {\n    const userAgent =\n      (this.props.radiumConfig && this.props.radiumConfig.userAgent) ||\n      (this.props.radiumConfigContext &&\n        this.props.radiumConfigContext.userAgent);\n\n    const {scopeSelector} = this.props;\n    const rootRules = Object.keys(styles).reduce((accumulator, selector) => {\n      if (typeof styles[selector] !== 'object') {\n        accumulator[selector] = styles[selector];\n      }\n\n      return accumulator;\n    }, {});\n    const rootStyles = Object.keys(rootRules).length\n      ? cssRuleSetToString(scopeSelector || '', rootRules, userAgent)\n      : '';\n\n    return (\n      rootStyles +\n      Object.keys(styles).reduce((accumulator, selector) => {\n        const rules = styles[selector];\n\n        if (selector === 'mediaQueries') {\n          accumulator += this._buildMediaQueryString(rules);\n        } else if (typeof styles[selector] === 'object') {\n          const completeSelector = scopeSelector\n            ? selector\n                .split(',')\n                .map(part => scopeSelector + ' ' + part.trim())\n                .join(',')\n            : selector;\n\n          accumulator += cssRuleSetToString(completeSelector, rules, userAgent);\n        }\n\n        return accumulator;\n      }, '')\n    );\n  }\n\n  _buildMediaQueryString(stylesByMediaQuery: {\n    [mediaQuery: string]: Object\n  }): string {\n    let mediaQueryString = '';\n\n    Object.keys(stylesByMediaQuery).forEach(query => {\n      mediaQueryString +=\n        '@media ' +\n        query +\n        '{' +\n        this._buildStyles(stylesByMediaQuery[query]) +\n        '}';\n    });\n\n    return mediaQueryString;\n  }\n\n  render(): Node {\n    if (!this.props.rules) {\n      return null;\n    }\n\n    const styles = this._buildStyles(this.props.rules);\n\n    return <style dangerouslySetInnerHTML={{__html: styles}} />;\n  }\n}\n\nexport default withRadiumContexts(Style);\n"
  },
  {
    "path": "src/config.js",
    "content": "/** @flow */\n/* eslint-disable no-use-before-define, block-scoped-const */\n\nimport type {PluginConfig, PluginResult} from './plugins';\n\ntype MediaQueryListListener = (mql: MediaQueryList) => void;\n\ntype MediaQueryList = {\n  matches: boolean,\n  addListener(listener: MediaQueryListListener): void,\n  removeListener(listener: MediaQueryListListener): void\n};\n\nexport type Plugin = (pluginConfig: PluginConfig) => PluginResult;\nexport type MatchMediaType = (mediaQueryString: string) => MediaQueryList;\n\nexport type Config = {\n  matchMedia?: MatchMediaType,\n  plugins?: Array<Plugin>,\n  userAgent?: string\n};\n"
  },
  {
    "path": "src/context.js",
    "content": "/* @flow */\nimport React, {type Context, type ComponentType, useContext} from 'react';\nimport hoistStatics from 'hoist-non-react-statics';\nimport StyleKeeper from './style-keeper';\nimport type {Config} from './config';\n\nexport const StyleKeeperContext: Context<StyleKeeper | void> = React.createContext(\n  undefined\n);\nexport const RadiumConfigContext: Context<Config | void> = React.createContext(\n  undefined\n);\n\nexport type WithRadiumContextsProps = {\n  styleKeeperContext?: StyleKeeper,\n  radiumConfigContext?: Config\n};\n\nexport function withRadiumContexts<P: {}>(\n  WrappedComponent: ComponentType<P>\n): ComponentType<$Diff<P, WithRadiumContextsProps>> {\n  const WithRadiumContexts = React.forwardRef(\n    (props: $Diff<P, WithRadiumContextsProps>, ref) => {\n      const radiumConfigContext = useContext(RadiumConfigContext);\n      const styleKeeperContext = useContext(StyleKeeperContext);\n\n      return (\n        <WrappedComponent\n          ref={ref}\n          {...props}\n          radiumConfigContext={radiumConfigContext}\n          styleKeeperContext={styleKeeperContext}\n        />\n      );\n    }\n  );\n\n  WithRadiumContexts.displayName = `withRadiumContexts(${WrappedComponent.displayName ||\n    WrappedComponent.name ||\n    'Component'})`;\n\n  return hoistStatics(WithRadiumContexts, WrappedComponent);\n}\n"
  },
  {
    "path": "src/css-rule-set-to-string.js",
    "content": "/* @flow */\n\nimport appendPxIfNeeded from './append-px-if-needed';\nimport camelCasePropsToDashCase from './camel-case-props-to-dash-case';\nimport mapObject from './map-object';\nimport {getPrefixedStyle} from './prefixer';\n\nfunction createMarkupForStyles(style: Object): string {\n  return Object.keys(style)\n    .map(property => {\n      return property + ': ' + style[property] + ';';\n    })\n    .join('\\n');\n}\n\nexport default function cssRuleSetToString(\n  selector: string,\n  rules: Object,\n  userAgent: ?string\n): string {\n  if (!rules) {\n    return '';\n  }\n\n  const rulesWithPx = mapObject(rules, (value, key) =>\n    appendPxIfNeeded(key, value)\n  );\n  const prefixedRules = getPrefixedStyle(rulesWithPx, userAgent);\n  const cssPrefixedRules = camelCasePropsToDashCase(prefixedRules);\n  const serializedRules = createMarkupForStyles(cssPrefixedRules);\n  return selector + '{' + serializedRules + '}';\n}\n"
  },
  {
    "path": "src/enhancer.js",
    "content": "/* @flow */\n\nimport React, {\n  useState,\n  useContext,\n  useRef,\n  useEffect,\n  forwardRef\n} from 'react';\nimport PropTypes from 'prop-types';\nimport hoistStatics from 'hoist-non-react-statics';\n\nimport resolveStyles, {type EnhancerApi} from './resolve-styles';\nimport getRadiumStyleState from './get-radium-style-state';\nimport {RadiumConfigContext, withRadiumContexts} from './context';\nimport {StyleKeeperContext} from './context';\nimport type {Config} from './config';\n\nconst KEYS_TO_IGNORE_WHEN_COPYING_PROPERTIES = [\n  'arguments',\n  'callee',\n  'caller',\n  'length',\n  'name',\n  'prototype',\n  'type'\n];\n\nlet RADIUM_PROTO: Object;\nlet RADIUM_METHODS;\n\nfunction copyProperties(source, target) {\n  Object.getOwnPropertyNames(source).forEach(key => {\n    if (\n      KEYS_TO_IGNORE_WHEN_COPYING_PROPERTIES.indexOf(key) < 0 &&\n      !target.hasOwnProperty(key)\n    ) {\n      const descriptor = Object.getOwnPropertyDescriptor(source, key);\n      descriptor && Object.defineProperty(target, key, descriptor);\n    }\n  });\n}\n\n// Handle scenarios of:\n// - Inherit from `React.Component` in any fashion\n//   See: https://github.com/FormidableLabs/radium/issues/738\n// - There's an explicit `render` field defined\nfunction isStateless(component: Function): boolean {\n  const proto = component.prototype || {};\n\n  return (\n    !component.isReactComponent &&\n    !proto.isReactComponent &&\n    !component.render &&\n    !proto.render\n  );\n}\n\n// Check if value is a real ES class in Native / Node code.\n// See: https://stackoverflow.com/a/30760236\nfunction isNativeClass(component: Function): boolean {\n  return (\n    typeof component === 'function' && /^\\s*class\\s+/.test(component.toString())\n  );\n}\n\n// Handle es7 arrow functions on React class method names by detecting\n// and transfering the instance method to original class prototype.\n// (Using a copy of the class).\n// See: https://github.com/FormidableLabs/radium/issues/738\nfunction copyArrowFuncs(enhancedSelf: Object, ComposedComponent: constructor) {\n  RADIUM_METHODS.forEach(name => {\n    const thisDesc = Object.getOwnPropertyDescriptor(enhancedSelf, name);\n    const thisMethod = (thisDesc || {}).value;\n    // Only care if have instance method.\n    if (!thisMethod) {\n      return;\n    }\n    const radiumDesc = Object.getOwnPropertyDescriptor(RADIUM_PROTO, name);\n    const radiumProtoMethod = (radiumDesc || {}).value;\n    const superProtoMethod = ComposedComponent.prototype[name];\n    // Allow transfer when:\n    // 1. have an instance method\n    // 2. the super class prototype doesn't have any method\n    // 3. it is not already the radium prototype's\n    if (!superProtoMethod && thisMethod !== radiumProtoMethod) {\n      // Transfer dynamic render component to Component prototype (copy).\n      thisDesc &&\n        Object.defineProperty(ComposedComponent.prototype, name, thisDesc);\n      // Remove instance property, leaving us to have a contrived\n      // inheritance chain of (1) radium, (2) superclass.\n      delete enhancedSelf[name];\n    }\n  });\n}\n\nfunction trimRadiumState(enhancer: EnhancerApi) {\n  if (\n    enhancer._extraRadiumStateKeys &&\n    enhancer._extraRadiumStateKeys.length > 0\n  ) {\n    const trimmedRadiumState = enhancer._extraRadiumStateKeys.reduce(\n      (state, key) => {\n        // eslint-disable-next-line no-unused-vars\n        const {[key]: extraStateKey, ...remainingState} = state;\n        return remainingState;\n      },\n      getRadiumStyleState(enhancer)\n    );\n\n    enhancer._lastRadiumState = trimmedRadiumState;\n    enhancer.setState({_radiumStyleState: trimmedRadiumState});\n  }\n}\n\nfunction cleanUpEnhancer(enhancer: EnhancerApi) {\n  const {_radiumMouseUpListener, _radiumMediaQueryListenersByQuery} = enhancer;\n\n  enhancer._radiumIsMounted = false;\n\n  if (_radiumMouseUpListener) {\n    _radiumMouseUpListener.remove();\n  }\n\n  if (_radiumMediaQueryListenersByQuery) {\n    Object.keys(_radiumMediaQueryListenersByQuery).forEach(query => {\n      _radiumMediaQueryListenersByQuery[query].remove();\n    }, enhancer);\n  }\n}\n\nfunction resolveConfig(\n  propConfig?: Config,\n  contextConfig?: Config,\n  hocConfig?: Config\n) {\n  let config = propConfig || contextConfig || hocConfig;\n\n  if (hocConfig && config !== hocConfig) {\n    config = {\n      ...hocConfig,\n      ...config\n    };\n  }\n\n  return config;\n}\n\nfunction renderRadiumComponent(\n  enhancer: EnhancerApi,\n  renderedElement: any,\n  resolvedConfig?: Config,\n  propConfig?: Config\n) {\n  const {extraStateKeyMap, element} = resolveStyles(\n    enhancer,\n    renderedElement,\n    resolvedConfig\n  );\n  enhancer._extraRadiumStateKeys = Object.keys(extraStateKeyMap);\n\n  if (propConfig) {\n    return (\n      <RadiumConfigContext.Provider value={propConfig}>\n        {element}\n      </RadiumConfigContext.Provider>\n    );\n  }\n\n  return element;\n}\n\nfunction createEnhancedFunctionComponent(\n  origComponent: Function,\n  config?: Object\n) {\n  const RadiumEnhancer = React.forwardRef((props, ref) => {\n    const {radiumConfig, ...otherProps} = props;\n    const radiumConfigContext = useContext(RadiumConfigContext);\n    const styleKeeperContext = useContext(StyleKeeperContext);\n    const [state, setState] = useState({_radiumStyleState: {}});\n\n    const enhancerApi = useRef<EnhancerApi>({\n      state,\n      setState,\n      _radiumMediaQueryListenersByQuery: undefined,\n      _radiumMouseUpListener: undefined,\n      _radiumIsMounted: true,\n      _lastRadiumState: undefined,\n      _extraRadiumStateKeys: undefined,\n      _radiumStyleKeeper: styleKeeperContext\n    }).current;\n\n    // result of useRef is never recreated and is designed to be mutable\n    // we need to make sure the latest state is attached to it\n    enhancerApi.state = state;\n\n    useEffect(\n      () => {\n        return () => {\n          cleanUpEnhancer(enhancerApi);\n        };\n      },\n      [enhancerApi]\n    );\n\n    const hasExtraStateKeys =\n      enhancerApi._extraRadiumStateKeys &&\n      enhancerApi._extraRadiumStateKeys.length > 0;\n\n    useEffect(\n      () => {\n        trimRadiumState(enhancerApi);\n      },\n      [hasExtraStateKeys, enhancerApi]\n    );\n\n    const renderedElement = origComponent(otherProps, ref);\n\n    const currentConfig = resolveConfig(\n      radiumConfig,\n      radiumConfigContext,\n      config\n    );\n\n    return renderRadiumComponent(\n      enhancerApi,\n      renderedElement,\n      currentConfig,\n      radiumConfig\n    );\n  });\n\n  (RadiumEnhancer: Object)._isRadiumEnhanced = true;\n  (RadiumEnhancer: Object).defaultProps = origComponent.defaultProps;\n\n  return hoistStatics(RadiumEnhancer, origComponent);\n}\n\nfunction createEnhancedClassComponent(\n  origComponent: Function,\n  ComposedComponent: constructor,\n  config?: Object\n) {\n  class RadiumEnhancer extends ComposedComponent {\n    static _isRadiumEnhanced = true;\n\n    // need to attempt to assign to this.state in case\n    // super component is setting state on construction,\n    // otherwise class properties reinitialize to undefined\n    state: Object = this.state || {};\n\n    _radiumStyleKeeper = this.props.styleKeeperContext;\n\n    // need to assign the following methods to this.xxx as\n    // tests attempt to set this on the original component\n    _radiumMediaQueryListenersByQuery: {\n      [query: string]: {remove: () => void}\n    } | void = this._radiumMediaQueryListenersByQuery;\n    _radiumMouseUpListener: {remove: () => void} | void = this\n      ._radiumMouseUpListener;\n    _radiumIsMounted: boolean = true;\n    _lastRadiumState: Object;\n    _extraRadiumStateKeys: any;\n\n    constructor() {\n      super(...arguments);\n      this.state._radiumStyleState = {};\n\n      const self: Object = this;\n\n      // Handle es7 arrow functions on React class method\n      copyArrowFuncs(self, ComposedComponent);\n    }\n\n    componentDidUpdate(prevProps, prevState, snapshot) {\n      if (super.componentDidUpdate) {\n        super.componentDidUpdate.call(this, prevProps, prevState, snapshot);\n      }\n\n      trimRadiumState(this);\n    }\n\n    componentWillUnmount() {\n      if (super.componentWillUnmount) {\n        super.componentWillUnmount();\n      }\n\n      cleanUpEnhancer(this);\n    }\n\n    render() {\n      const renderedElement = super.render();\n\n      const currentConfig = resolveConfig(\n        this.props.radiumConfig,\n        this.props.radiumConfigContext,\n        config\n      );\n\n      return renderRadiumComponent(\n        this,\n        renderedElement,\n        currentConfig,\n        this.props.radiumConfig\n      );\n    }\n  }\n\n  // Lazy infer the method names of the Enhancer.\n  RADIUM_PROTO = RadiumEnhancer.prototype;\n  RADIUM_METHODS = Object.getOwnPropertyNames(RADIUM_PROTO).filter(\n    n => n !== 'constructor' && typeof RADIUM_PROTO[n] === 'function'\n  );\n\n  // Class inheritance uses Object.create and because of __proto__ issues\n  // with IE <10 any static properties of the superclass aren't inherited and\n  // so need to be manually populated.\n  // See http://babeljs.io/docs/advanced/caveats/#classes-10-and-below-\n  copyProperties(origComponent, RadiumEnhancer);\n\n  if (process.env.NODE_ENV !== 'production') {\n    // This also fixes React Hot Loader by exposing the original components top\n    // level prototype methods on the Radium enhanced prototype as discussed in\n    // https://github.com/FormidableLabs/radium/issues/219.\n    copyProperties(ComposedComponent.prototype, RadiumEnhancer.prototype);\n  }\n\n  // add Radium propTypes to enhanced component's propTypes\n  if (RadiumEnhancer.propTypes && RadiumEnhancer.propTypes.style) {\n    RadiumEnhancer.propTypes = {\n      ...RadiumEnhancer.propTypes,\n      style: PropTypes.oneOfType([PropTypes.array, PropTypes.object])\n    };\n  }\n\n  // copy display name to enhanced component\n  RadiumEnhancer.displayName =\n    origComponent.displayName || origComponent.name || 'Component';\n\n  return withRadiumContexts(RadiumEnhancer);\n}\n\nfunction createComposedFromNativeClass(ComposedComponent: constructor) {\n  ComposedComponent = (function(OrigComponent): constructor {\n    function NewComponent() {\n      // Use Reflect.construct to simulate 'new'\n      const obj = Reflect.construct(OrigComponent, arguments, this.constructor);\n      return obj;\n    }\n    // $FlowFixMe\n    Reflect.setPrototypeOf(NewComponent.prototype, OrigComponent.prototype);\n    // $FlowFixMe\n    Reflect.setPrototypeOf(NewComponent, OrigComponent);\n    return NewComponent;\n  })(ComposedComponent);\n  return ComposedComponent;\n}\n\nconst ReactForwardRefSymbol = (forwardRef(() => null): any).$$typeof;\n\nexport default function enhanceWithRadium(\n  configOrComposedComponent: Class<any> | constructor | Function | Object,\n  config?: Object = {}\n): constructor {\n  if (\n    ReactForwardRefSymbol &&\n    configOrComposedComponent.$$typeof === ReactForwardRefSymbol\n  ) {\n    return createEnhancedFunctionComponent(\n      configOrComposedComponent.render,\n      config\n    );\n  }\n\n  if (typeof configOrComposedComponent !== 'function') {\n    return createFactoryFromConfig(config, configOrComposedComponent);\n  }\n\n  const origComponent: Function = configOrComposedComponent;\n\n  // Handle stateless components\n  if (isStateless(origComponent)) {\n    return createEnhancedFunctionComponent(origComponent, config);\n  }\n\n  let ComposedComponent: constructor = origComponent;\n\n  // Radium is transpiled in npm, so it isn't really using es6 classes at\n  // runtime.  However, the user of Radium might be.  In this case we have\n  // to maintain forward compatibility with native es classes.\n  if (isNativeClass(ComposedComponent)) {\n    ComposedComponent = createComposedFromNativeClass(ComposedComponent);\n  }\n\n  // Shallow copy composed if still original (we may mutate later).\n  if (ComposedComponent === origComponent) {\n    ComposedComponent = class extends ComposedComponent {};\n  }\n\n  return createEnhancedClassComponent(origComponent, ComposedComponent, config);\n}\n\nfunction createFactoryFromConfig(\n  config: Object,\n  configOrComposedComponent: Object\n) {\n  const newConfig = {...config, ...configOrComposedComponent};\n  return function(configOrComponent) {\n    return enhanceWithRadium(configOrComponent, newConfig);\n  };\n}\n"
  },
  {
    "path": "src/get-radium-style-state.js",
    "content": "/* @flow */\n\nconst getRadiumStyleState = function(component: any) {\n  return (\n    component._lastRadiumState ||\n    (component.state && component.state._radiumStyleState) ||\n    {}\n  );\n};\n\nexport default getRadiumStyleState;\n"
  },
  {
    "path": "src/get-state-key.js",
    "content": "/* @flow */\n\nconst getStateKey = function(renderedElement: any): string {\n  return typeof renderedElement.ref === 'string'\n    ? renderedElement.ref\n    : renderedElement.key;\n};\n\nexport default getStateKey;\n"
  },
  {
    "path": "src/get-state.js",
    "content": "/* @flow */\n\nimport cleanStateKey from './clean-state-key';\n\nconst getState = function(\n  state: {_radiumStyleState: {[key: string]: {[value: string]: boolean}}},\n  elementKey: string,\n  value: string\n): any {\n  const key = cleanStateKey(elementKey);\n\n  return (\n    !!state &&\n    !!state._radiumStyleState &&\n    !!state._radiumStyleState[key] &&\n    state._radiumStyleState[key][value]\n  );\n};\n\nexport default getState;\n"
  },
  {
    "path": "src/hash.js",
    "content": "/* @flow */\n\n// a simple djb2 hash based on hash-string:\n// https://github.com/MatthewBarker/hash-string/blob/master/source/hash-string.js\n// returns a hex-encoded hash\nexport default function hash(text: string): string {\n  if (!text) {\n    return '';\n  }\n\n  let hashValue = 5381;\n  let index = text.length - 1;\n\n  while (index) {\n    hashValue = (hashValue * 33) ^ text.charCodeAt(index);\n    index -= 1;\n  }\n\n  return (hashValue >>> 0).toString(16);\n}\n"
  },
  {
    "path": "src/index.js",
    "content": "import Enhancer from './enhancer';\nimport Plugins from './plugins';\nimport Style from './components/style';\nimport StyleRoot from './components/style-root';\nimport getState from './get-state';\nimport keyframes from './keyframes';\nimport resolveStyles from './resolve-styles';\n\nfunction Radium(ComposedComponent: constructor) {\n  return Enhancer(ComposedComponent);\n}\n\n// Legacy object support.\n//\n// Normally it would be disfavored to attach these to the `Radium` object\n// because it defeats tree-shaking, using instead the ESM exports. But,\n// the `Radium` `Enhancer` uses **all** of these, so there's no extra \"cost\"\n// to them being explicitly on the `Radium` object.\nRadium.Plugins = Plugins;\nRadium.Style = Style;\nRadium.StyleRoot = StyleRoot;\nRadium.getState = getState;\nRadium.keyframes = keyframes;\n\nif (process.env.NODE_ENV !== 'production') {\n  Radium.TestMode = {\n    clearState: resolveStyles.__clearStateForTests,\n    disable: resolveStyles.__setTestMode.bind(null, false),\n    enable: resolveStyles.__setTestMode.bind(null, true)\n  };\n}\n\nexport default Radium;\n\n// ESM re-exports\nexport {Plugins, Style, StyleRoot, getState, keyframes};\n"
  },
  {
    "path": "src/keyframes.js",
    "content": "/* @flow */\n\nimport cssRuleSetToString from './css-rule-set-to-string';\nimport hash from './hash';\nimport {getPrefixedKeyframes} from './prefixer';\n\nexport type Keyframes = {\n  __radiumKeyframes: boolean,\n  __process(userAgent?: string): {animationName: string, css: string}\n};\n\nexport default function keyframes(\n  keyframeRules: {[percentage: string]: {[key: string]: string | number}},\n  name?: string\n): Keyframes {\n  return {\n    __radiumKeyframes: true,\n    __process(userAgent) {\n      const keyframesPrefixed = getPrefixedKeyframes(userAgent);\n      const rules = Object.keys(keyframeRules)\n        .map(percentage =>\n          cssRuleSetToString(percentage, keyframeRules[percentage], userAgent)\n        )\n        .join('\\n');\n      const animationName =\n        (name ? name + '-' : '') + 'radium-animation-' + hash(rules);\n      const css =\n        '@' +\n        keyframesPrefixed +\n        ' ' +\n        animationName +\n        ' {\\n' +\n        rules +\n        '\\n}\\n';\n      return {css, animationName};\n    }\n  };\n}\n"
  },
  {
    "path": "src/map-object.js",
    "content": "/* @flow */\n\nexport default function mapObject<TValue, TNext>(\n  object: {[key: string]: TValue},\n  mapper: (value: TValue, key: string) => TNext\n): {[key: string]: TNext} {\n  return Object.keys(object).reduce((result, key) => {\n    result[key] = mapper(object[key], key);\n    return result;\n  }, {});\n}\n"
  },
  {
    "path": "src/merge-styles.js",
    "content": "export function isNestedStyle(value) {\n  // Don't merge objects overriding toString, since they should be converted\n  // to string values.\n  return (\n    value &&\n    value.constructor === Object &&\n    value.toString === Object.prototype.toString\n  );\n}\n\n// Merge style objects. Deep merge plain object values.\nexport function mergeStyles(styles) {\n  const result = {};\n\n  styles.forEach(style => {\n    if (!style || typeof style !== 'object') {\n      return;\n    }\n\n    if (Array.isArray(style)) {\n      style = mergeStyles(style);\n    }\n\n    Object.keys(style).forEach(key => {\n      // Simple case, nothing nested\n      if (!isNestedStyle(style[key]) || !isNestedStyle(result[key])) {\n        result[key] = style[key];\n        return;\n      }\n\n      // If nested media, don't merge the nested styles, append a space to the\n      // end (benign when converted to CSS). This way we don't end up merging\n      // media queries that appear later in the chain with those that appear\n      // earlier.\n      if (key.indexOf('@media') === 0) {\n        let newKey = key;\n        // eslint-disable-next-line no-constant-condition\n        while (true) {\n          newKey += ' ';\n          if (!result[newKey]) {\n            result[newKey] = style[key];\n            return;\n          }\n        }\n      }\n\n      // Merge all other nested styles recursively\n      result[key] = mergeStyles([result[key], style[key]]);\n    });\n  });\n\n  return result;\n}\n"
  },
  {
    "path": "src/plugins/check-props-plugin.js",
    "content": "/* @flow */\n\nimport type {PluginConfig, PluginResult} from './index';\n\nlet checkProps = (() => {}: any);\n\nif (process.env.NODE_ENV !== 'production') {\n  // Warn if you use longhand and shorthand properties in the same style\n  // object.\n  // https://developer.mozilla.org/en-US/docs/Web/CSS/Shorthand_properties\n\n  const shorthandPropertyExpansions = {\n    background: [\n      'backgroundAttachment',\n      'backgroundBlendMode',\n      'backgroundClip',\n      'backgroundColor',\n      'backgroundImage',\n      'backgroundOrigin',\n      'backgroundPosition',\n      'backgroundPositionX',\n      'backgroundPositionY',\n      'backgroundRepeat',\n      'backgroundRepeatX',\n      'backgroundRepeatY',\n      'backgroundSize'\n    ],\n    border: [\n      'borderBottom',\n      'borderBottomColor',\n      'borderBottomStyle',\n      'borderBottomWidth',\n      'borderColor',\n      'borderLeft',\n      'borderLeftColor',\n      'borderLeftStyle',\n      'borderLeftWidth',\n      'borderRight',\n      'borderRightColor',\n      'borderRightStyle',\n      'borderRightWidth',\n      'borderStyle',\n      'borderTop',\n      'borderTopColor',\n      'borderTopStyle',\n      'borderTopWidth',\n      'borderWidth'\n    ],\n    borderImage: [\n      'borderImageOutset',\n      'borderImageRepeat',\n      'borderImageSlice',\n      'borderImageSource',\n      'borderImageWidth'\n    ],\n    borderRadius: [\n      'borderBottomLeftRadius',\n      'borderBottomRightRadius',\n      'borderTopLeftRadius',\n      'borderTopRightRadius'\n    ],\n    font: [\n      'fontFamily',\n      'fontKerning',\n      'fontSize',\n      'fontStretch',\n      'fontStyle',\n      'fontVariant',\n      'fontVariantLigatures',\n      'fontWeight',\n      'lineHeight'\n    ],\n    listStyle: ['listStyleImage', 'listStylePosition', 'listStyleType'],\n    margin: ['marginBottom', 'marginLeft', 'marginRight', 'marginTop'],\n    padding: ['paddingBottom', 'paddingLeft', 'paddingRight', 'paddingTop'],\n    transition: [\n      'transitionDelay',\n      'transitionDuration',\n      'transitionProperty',\n      'transitionTimingFunction'\n    ]\n  };\n\n  checkProps = function(config: PluginConfig): PluginResult {\n    const {componentName, style} = config;\n    if (typeof style !== 'object' || !style) {\n      return;\n    }\n\n    const styleKeys = Object.keys(style);\n    styleKeys.forEach(styleKey => {\n      if (\n        Array.isArray(shorthandPropertyExpansions[styleKey]) &&\n        shorthandPropertyExpansions[styleKey].some(\n          sp => styleKeys.indexOf(sp) !== -1\n        )\n      ) {\n        if (process.env.NODE_ENV !== 'production') {\n          /* eslint-disable no-console */\n          console.warn(\n            'Radium: property \"' + styleKey + '\" in style object',\n            style,\n            ': do not mix longhand and ' +\n              'shorthand properties in the same style object. Check the render ' +\n              'method of ' +\n              componentName +\n              '.',\n            'See https://github.com/FormidableLabs/radium/issues/95 for more ' +\n              'information.'\n          );\n          /* eslint-enable no-console */\n        }\n      }\n    });\n\n    styleKeys.forEach(k => checkProps({...config, style: style[k]}));\n    return;\n  };\n}\n\nexport default checkProps;\n"
  },
  {
    "path": "src/plugins/index.js",
    "content": "/** @flow */\n/* eslint-disable block-scoped-const */\n\nimport type {Config} from '../config';\n\nimport checkPropsPlugin from './check-props-plugin';\nimport keyframesPlugin from './keyframes-plugin';\nimport mergeStyleArrayPlugin from './merge-style-array-plugin';\nimport prefixPlugin from './prefix-plugin';\nimport removeNestedStylesPlugin from './remove-nested-styles-plugin';\nimport resolveInteractionStylesPlugin from './resolve-interaction-styles-plugin';\nimport resolveMediaQueriesPlugin from './resolve-media-queries-plugin';\nimport visitedPlugin from './visited-plugin';\n\nexport type PluginConfig = {\n  // Adds a chunk of css to the root style sheet\n  addCSS: (css: string) => {remove: () => void},\n\n  // Helper function when adding CSS\n  appendImportantToEachValue: (style: Object) => Object,\n\n  // May not be readable if code has been minified\n  componentName: string,\n\n  // The Radium configuration\n  config: Config,\n\n  // Converts an object of CSS rules to a string, for use with addCSS\n  cssRuleSetToString: (\n    selector: string,\n    rules: Object,\n    userAgent: ?string\n  ) => string,\n\n  // Retrieve the value of a field on the component\n  getComponentField: (key: string) => any,\n\n  // Retrieve the value of a field global to the Radium module\n  // Used so that tests can easily clear global state.\n  getGlobalState: (key: string) => any,\n\n  // Retrieve the value of some state specific to the rendered element.\n  // Requires the element to have a unique key or ref or for an element key\n  // to be passed in.\n  getState: (stateKey: string, elementKey?: string) => any,\n\n  // Helper function when adding CSS\n  hash: (data: string) => string,\n\n  // Returns true if the value is a nested style object\n  isNestedStyle: (value: any) => boolean,\n\n  // Access to the mergeStyles utility\n  mergeStyles: (styles: Array<Object>) => Object,\n\n  // The props of the rendered element. This can be changed by each plugin,\n  // and successive plugins will see the result of previous plugins.\n  props: Object,\n\n  // Calls setState on the component with the given key and value.\n  // By default this is specific to the rendered element, but you can override\n  // by passing in the `elementKey` parameter.\n  setState: (stateKey: string, value: any, elementKey?: string) => void,\n\n  // The style prop of the rendered element. This can be changed by each plugin,\n  // and successive plugins will see the result of previous plugins. Kept\n  // separate from `props` for ease of use.\n  style: Object,\n\n  // uses the exenv npm module\n  ExecutionEnvironment: {\n    canUseEventListeners: boolean,\n    canUseDOM: boolean\n  }\n};\n\nexport type PluginResult = ?{\n  // Merged into the component directly. Useful for storing things for which you\n  // don't need to re-render, event subscriptions, for instance.\n  componentFields?: ?Object,\n\n  // Merged into a Radium controlled global state object. Use this instead of\n  // module level state for ease of clearing state between tests.\n  globalState?: ?Object,\n\n  // Merged into the rendered element's props.\n  props?: ?Object,\n\n  // Replaces (not merged into) the rendered element's style property.\n  style?: ?Object\n};\n\nexport default {\n  checkProps: checkPropsPlugin,\n  keyframes: keyframesPlugin,\n  mergeStyleArray: mergeStyleArrayPlugin,\n  prefix: prefixPlugin,\n  removeNestedStyles: removeNestedStylesPlugin,\n  resolveInteractionStyles: resolveInteractionStylesPlugin,\n  resolveMediaQueries: resolveMediaQueriesPlugin,\n  visited: visitedPlugin\n};\n"
  },
  {
    "path": "src/plugins/keyframes-plugin.js",
    "content": "/* @flow */\n\nimport type {PluginConfig, PluginResult} from './index';\nimport type {Keyframes} from '../keyframes';\n\nexport default function keyframesPlugin(\n  {addCSS, config, style}: PluginConfig // eslint-disable-line no-shadow\n): PluginResult {\n  const processKeyframeStyle = value => {\n    const keyframesValue = (value: Keyframes);\n    const {animationName, css} = keyframesValue.__process(config.userAgent);\n    addCSS(css);\n    return animationName;\n  };\n\n  const newStyle = Object.keys(style).reduce((newStyleInProgress, key) => {\n    let value = style[key];\n    const isKeyframeArray = Array.isArray(value);\n\n    if (\n      key === 'animationName' &&\n      value &&\n      (value.__radiumKeyframes || isKeyframeArray)\n    ) {\n      if (isKeyframeArray) {\n        value = value.map(processKeyframeStyle).join(', ');\n      } else {\n        value = processKeyframeStyle(value);\n      }\n    }\n\n    newStyleInProgress[key] = value;\n    return newStyleInProgress;\n  }, {});\n  return {style: newStyle};\n}\n"
  },
  {
    "path": "src/plugins/merge-style-array-plugin.js",
    "content": "/* @flow */\n\nimport type {PluginConfig, PluginResult} from './index';\n\n// Convenient syntax for multiple styles: `style={[style1, style2, etc]}`\n// Ignores non-objects, so you can do `this.state.isCool && styles.cool`.\nconst mergeStyleArrayPlugin = function({\n  style,\n  mergeStyles\n}: PluginConfig): PluginResult {\n  // eslint-disable-line no-shadow\n  const newStyle = Array.isArray(style) ? mergeStyles(style) : style;\n  return {style: newStyle};\n};\n\nexport default mergeStyleArrayPlugin;\n"
  },
  {
    "path": "src/plugins/mouse-up-listener.js",
    "content": "/* @flow */\n\nconst _callbacks = [];\nlet _mouseUpListenerIsActive = false;\n\nfunction _handleMouseUp() {\n  _callbacks.forEach(callback => {\n    callback();\n  });\n}\n\nconst subscribe = function(callback: () => void): {remove: () => void} {\n  if (_callbacks.indexOf(callback) === -1) {\n    _callbacks.push(callback);\n  }\n\n  if (!_mouseUpListenerIsActive) {\n    window.addEventListener('mouseup', _handleMouseUp);\n    _mouseUpListenerIsActive = true;\n  }\n\n  return {\n    remove: function() {\n      const index = _callbacks.indexOf(callback);\n      _callbacks.splice(index, 1);\n\n      if (_callbacks.length === 0 && _mouseUpListenerIsActive) {\n        window.removeEventListener('mouseup', _handleMouseUp);\n        _mouseUpListenerIsActive = false;\n      }\n    }\n  };\n};\n\nexport default {\n  subscribe: subscribe,\n  __triggerForTests: _handleMouseUp\n};\n"
  },
  {
    "path": "src/plugins/prefix-plugin.js",
    "content": "/* @flow */\n\nimport type {PluginConfig, PluginResult} from './index';\n\nimport {getPrefixedStyle} from '../prefixer';\n\nexport default function prefixPlugin(\n  {config, style}: PluginConfig // eslint-disable-line no-shadow\n): PluginResult {\n  const newStyle = getPrefixedStyle(style, config.userAgent);\n  return {style: newStyle};\n}\n"
  },
  {
    "path": "src/plugins/remove-nested-styles-plugin.js",
    "content": "/** @flow */\n\nimport type {PluginConfig, PluginResult} from './index';\n\nexport default function removeNestedStyles({\n  isNestedStyle,\n  style\n}: PluginConfig): PluginResult {\n  // eslint-disable-line no-shadow\n  const newStyle = Object.keys(style).reduce((newStyleInProgress, key) => {\n    const value = style[key];\n    if (!isNestedStyle(value)) {\n      newStyleInProgress[key] = value;\n    }\n    return newStyleInProgress;\n  }, {});\n\n  return {\n    style: newStyle\n  };\n}\n"
  },
  {
    "path": "src/plugins/resolve-interaction-styles-plugin.js",
    "content": "/** @flow */\n\nimport type {PluginConfig, PluginResult} from './index';\n\nimport MouseUpListener from './mouse-up-listener';\n\nconst _isInteractiveStyleField = function(styleFieldName) {\n  return (\n    styleFieldName === ':hover' ||\n    styleFieldName === ':active' ||\n    styleFieldName === ':focus'\n  );\n};\n\nconst resolveInteractionStyles = function(config: PluginConfig): PluginResult {\n  const {\n    ExecutionEnvironment,\n    getComponentField,\n    getState,\n    mergeStyles,\n    props,\n    setState,\n    style\n  } = config;\n\n  const newComponentFields = {};\n  const newProps = {};\n\n  // Only add handlers if necessary\n  if (style[':hover']) {\n    // Always call the existing handler if one is already defined.\n    // This code, and the very similar ones below, could be abstracted a bit\n    // more, but it hurts readability IMO.\n    const existingOnMouseEnter = props.onMouseEnter;\n    newProps.onMouseEnter = function(e) {\n      existingOnMouseEnter && existingOnMouseEnter(e);\n      setState(':hover', true);\n    };\n\n    const existingOnMouseLeave = props.onMouseLeave;\n    newProps.onMouseLeave = function(e) {\n      existingOnMouseLeave && existingOnMouseLeave(e);\n      setState(':hover', false);\n    };\n  }\n\n  if (style[':active']) {\n    const existingOnMouseDown = props.onMouseDown;\n    newProps.onMouseDown = function(e) {\n      existingOnMouseDown && existingOnMouseDown(e);\n      newComponentFields._lastMouseDown = Date.now();\n      setState(':active', 'viamousedown');\n    };\n\n    const existingOnKeyDown = props.onKeyDown;\n    newProps.onKeyDown = function(e) {\n      existingOnKeyDown && existingOnKeyDown(e);\n      if (e.key === ' ' || e.key === 'Enter') {\n        setState(':active', 'viakeydown');\n      }\n    };\n\n    const existingOnKeyUp = props.onKeyUp;\n    newProps.onKeyUp = function(e) {\n      existingOnKeyUp && existingOnKeyUp(e);\n      if (e.key === ' ' || e.key === 'Enter') {\n        setState(':active', false);\n      }\n    };\n  }\n\n  if (style[':focus']) {\n    const existingOnFocus = props.onFocus;\n    newProps.onFocus = function(e) {\n      existingOnFocus && existingOnFocus(e);\n      setState(':focus', true);\n    };\n\n    const existingOnBlur = props.onBlur;\n    newProps.onBlur = function(e) {\n      existingOnBlur && existingOnBlur(e);\n      setState(':focus', false);\n    };\n  }\n\n  if (\n    style[':active'] &&\n    !getComponentField('_radiumMouseUpListener') &&\n    ExecutionEnvironment.canUseEventListeners\n  ) {\n    newComponentFields._radiumMouseUpListener = MouseUpListener.subscribe(\n      () => {\n        Object.keys(getComponentField('state')._radiumStyleState).forEach(\n          key => {\n            if (getState(':active', key) === 'viamousedown') {\n              setState(':active', false, key);\n            }\n          }\n        );\n      }\n    );\n  }\n\n  // Merge the styles in the order they were defined\n  const interactionStyles = props.disabled\n    ? [style[':disabled']]\n    : Object.keys(style)\n        .filter(name => _isInteractiveStyleField(name) && getState(name))\n        .map(name => style[name]);\n\n  let newStyle = mergeStyles([style].concat(interactionStyles));\n\n  // Remove interactive styles\n  newStyle = Object.keys(newStyle).reduce((styleWithoutInteractions, name) => {\n    if (!_isInteractiveStyleField(name) && name !== ':disabled') {\n      styleWithoutInteractions[name] = newStyle[name];\n    }\n    return styleWithoutInteractions;\n  }, {});\n\n  return {\n    componentFields: newComponentFields,\n    props: newProps,\n    style: newStyle\n  };\n};\n\nexport default resolveInteractionStyles;\n"
  },
  {
    "path": "src/plugins/resolve-media-queries-plugin.js",
    "content": "/** @flow */\n\nimport type {MatchMediaType} from '../config';\nimport type {PluginConfig, PluginResult} from './index';\n\nlet _windowMatchMedia;\nfunction _getWindowMatchMedia(ExecutionEnvironment) {\n  if (_windowMatchMedia === undefined) {\n    _windowMatchMedia =\n      (!!ExecutionEnvironment.canUseDOM &&\n        !!window &&\n        !!window.matchMedia &&\n        (mediaQueryString => window.matchMedia(mediaQueryString))) ||\n      null;\n  }\n  return _windowMatchMedia;\n}\n\nfunction _filterObject(\n  obj: Object,\n  predicate: (value: any, key: string) => boolean\n): Object {\n  return Object.keys(obj)\n    .filter(key => predicate(obj[key], key))\n    .reduce((result, key) => {\n      result[key] = obj[key];\n      return result;\n    }, {});\n}\n\nfunction _removeMediaQueries(style) {\n  return Object.keys(style).reduce((styleWithoutMedia, key) => {\n    if (key.indexOf('@media') !== 0) {\n      styleWithoutMedia[key] = style[key];\n    }\n    return styleWithoutMedia;\n  }, {});\n}\n\nfunction _topLevelRulesToCSS({\n  addCSS,\n  appendImportantToEachValue,\n  cssRuleSetToString,\n  hash,\n  isNestedStyle,\n  style,\n  userAgent\n}) {\n  let className = '';\n  Object.keys(style)\n    .filter(name => name.indexOf('@media') === 0)\n    .map(query => {\n      const topLevelRules = appendImportantToEachValue(\n        _filterObject(style[query], value => !isNestedStyle(value))\n      );\n\n      if (!Object.keys(topLevelRules).length) {\n        return;\n      }\n\n      const ruleCSS = cssRuleSetToString('', topLevelRules, userAgent);\n\n      // CSS classes cannot start with a number\n      const mediaQueryClassName = 'rmq-' + hash(query + ruleCSS);\n      const css = query + '{ .' + mediaQueryClassName + ruleCSS + '}';\n\n      addCSS(css);\n\n      className += (className ? ' ' : '') + mediaQueryClassName;\n    });\n  return className;\n}\n\nfunction _subscribeToMediaQuery({\n  listener,\n  listenersByQuery,\n  matchMedia,\n  mediaQueryListsByQuery,\n  query\n}) {\n  query = query.replace('@media ', '');\n\n  let mql = mediaQueryListsByQuery[query];\n  if (!mql && matchMedia) {\n    mediaQueryListsByQuery[query] = mql = matchMedia(query);\n  }\n\n  if (!listenersByQuery || !listenersByQuery[query]) {\n    mql.addListener(listener);\n\n    listenersByQuery[query] = {\n      remove() {\n        mql.removeListener(listener);\n      }\n    };\n  }\n  return mql;\n}\n\nexport default function resolveMediaQueries({\n  ExecutionEnvironment,\n  addCSS,\n  appendImportantToEachValue,\n  config,\n  cssRuleSetToString,\n  getComponentField,\n  getGlobalState,\n  hash,\n  isNestedStyle,\n  mergeStyles,\n  props,\n  setState,\n  style\n}: PluginConfig): PluginResult {\n  // eslint-disable-line no-shadow\n  let newStyle = _removeMediaQueries(style);\n  const mediaQueryClassNames = _topLevelRulesToCSS({\n    addCSS,\n    appendImportantToEachValue,\n    cssRuleSetToString,\n    hash,\n    isNestedStyle,\n    style,\n    userAgent: config.userAgent\n  });\n\n  const newProps = mediaQueryClassNames\n    ? {\n        className:\n          mediaQueryClassNames + (props.className ? ' ' + props.className : '')\n      }\n    : null;\n\n  const matchMedia: ?MatchMediaType =\n    config.matchMedia || _getWindowMatchMedia(ExecutionEnvironment);\n\n  if (!matchMedia) {\n    return {\n      props: newProps,\n      style: newStyle\n    };\n  }\n\n  const listenersByQuery = {\n    ...getComponentField('_radiumMediaQueryListenersByQuery')\n  };\n  const mediaQueryListsByQuery = getGlobalState('mediaQueryListsByQuery') || {};\n\n  Object.keys(style)\n    .filter(name => name.indexOf('@media') === 0)\n    .map(query => {\n      const nestedRules = _filterObject(style[query], isNestedStyle);\n\n      if (!Object.keys(nestedRules).length) {\n        return;\n      }\n\n      const mql = _subscribeToMediaQuery({\n        listener: () => setState(query, mql.matches, '_all'),\n        listenersByQuery,\n        matchMedia,\n        mediaQueryListsByQuery,\n        query\n      });\n\n      // Apply media query states\n      if (mql.matches) {\n        newStyle = mergeStyles([newStyle, nestedRules]);\n      }\n    });\n\n  return {\n    componentFields: {\n      _radiumMediaQueryListenersByQuery: listenersByQuery\n    },\n    globalState: {mediaQueryListsByQuery},\n    props: newProps,\n    style: newStyle\n  };\n}\n"
  },
  {
    "path": "src/plugins/visited-plugin.js",
    "content": "/** @flow */\n\nimport type {PluginConfig, PluginResult} from './index';\n\nexport default function visited({\n  addCSS,\n  appendImportantToEachValue,\n  config,\n  cssRuleSetToString,\n  hash,\n  props,\n  style\n}: PluginConfig): PluginResult {\n  // eslint-disable-line no-shadow\n  let className = props.className;\n\n  const newStyle = Object.keys(style).reduce((newStyleInProgress, key) => {\n    let value = style[key];\n    if (key === ':visited') {\n      value = appendImportantToEachValue(value);\n      const ruleCSS = cssRuleSetToString('', value, config.userAgent);\n      const visitedClassName = 'rad-' + hash(ruleCSS);\n      const css = '.' + visitedClassName + ':visited' + ruleCSS;\n\n      addCSS(css);\n      className = (className ? className + ' ' : '') + visitedClassName;\n    } else {\n      newStyleInProgress[key] = value;\n    }\n\n    return newStyleInProgress;\n  }, {});\n\n  return {\n    props: className === props.className ? null : {className},\n    style: newStyle\n  };\n}\n"
  },
  {
    "path": "src/prefix-data/dynamic.js",
    "content": "import calc from 'inline-style-prefixer/dynamic/plugins/calc';\nimport crossFade from 'inline-style-prefixer/dynamic/plugins/crossFade';\nimport cursor from 'inline-style-prefixer/dynamic/plugins/cursor';\nimport filter from 'inline-style-prefixer/dynamic/plugins/filter';\nimport flex from 'inline-style-prefixer/dynamic/plugins/flex';\nimport flexboxIE from 'inline-style-prefixer/dynamic/plugins/flexboxIE';\nimport flexboxOld from 'inline-style-prefixer/dynamic/plugins/flexboxOld';\nimport gradient from 'inline-style-prefixer/dynamic/plugins/gradient';\nimport imageSet from 'inline-style-prefixer/dynamic/plugins/imageSet';\nimport position from 'inline-style-prefixer/dynamic/plugins/position';\nimport sizing from 'inline-style-prefixer/dynamic/plugins/sizing';\nimport transition from 'inline-style-prefixer/dynamic/plugins/transition';\n\nexport default {\n  plugins: [\n    calc,\n    crossFade,\n    cursor,\n    filter,\n    flex,\n    flexboxIE,\n    flexboxOld,\n    gradient,\n    imageSet,\n    position,\n    sizing,\n    transition\n  ],\n  prefixMap: {\n    chrome: {\n      transform: 35,\n      transformOrigin: 35,\n      transformOriginX: 35,\n      transformOriginY: 35,\n      backfaceVisibility: 35,\n      perspective: 35,\n      perspectiveOrigin: 35,\n      transformStyle: 35,\n      transformOriginZ: 35,\n      animation: 42,\n      animationDelay: 42,\n      animationDirection: 42,\n      animationFillMode: 42,\n      animationDuration: 42,\n      animationIterationCount: 42,\n      animationName: 42,\n      animationPlayState: 42,\n      animationTimingFunction: 42,\n      appearance: 66,\n      userSelect: 53,\n      fontKerning: 32,\n      textEmphasisPosition: 66,\n      textEmphasis: 66,\n      textEmphasisStyle: 66,\n      textEmphasisColor: 66,\n      boxDecorationBreak: 66,\n      clipPath: 54,\n      maskImage: 66,\n      maskMode: 66,\n      maskRepeat: 66,\n      maskPosition: 66,\n      maskClip: 66,\n      maskOrigin: 66,\n      maskSize: 66,\n      maskComposite: 66,\n      mask: 66,\n      maskBorderSource: 66,\n      maskBorderMode: 66,\n      maskBorderSlice: 66,\n      maskBorderWidth: 66,\n      maskBorderOutset: 66,\n      maskBorderRepeat: 66,\n      maskBorder: 66,\n      maskType: 66,\n      textDecorationStyle: 56,\n      textDecorationSkip: 56,\n      textDecorationLine: 56,\n      textDecorationColor: 56,\n      filter: 52,\n      fontFeatureSettings: 47,\n      breakAfter: 49,\n      breakBefore: 49,\n      breakInside: 49,\n      columnCount: 49,\n      columnFill: 49,\n      columnGap: 49,\n      columnRule: 49,\n      columnRuleColor: 49,\n      columnRuleStyle: 49,\n      columnRuleWidth: 49,\n      columns: 49,\n      columnSpan: 49,\n      columnWidth: 49,\n      writingMode: 47\n    },\n    safari: {\n      flex: 8,\n      flexBasis: 8,\n      flexDirection: 8,\n      flexGrow: 8,\n      flexFlow: 8,\n      flexShrink: 8,\n      flexWrap: 8,\n      alignContent: 8,\n      alignItems: 8,\n      alignSelf: 8,\n      justifyContent: 8,\n      order: 8,\n      transition: 6,\n      transitionDelay: 6,\n      transitionDuration: 6,\n      transitionProperty: 6,\n      transitionTimingFunction: 6,\n      transform: 8,\n      transformOrigin: 8,\n      transformOriginX: 8,\n      transformOriginY: 8,\n      backfaceVisibility: 8,\n      perspective: 8,\n      perspectiveOrigin: 8,\n      transformStyle: 8,\n      transformOriginZ: 8,\n      animation: 8,\n      animationDelay: 8,\n      animationDirection: 8,\n      animationFillMode: 8,\n      animationDuration: 8,\n      animationIterationCount: 8,\n      animationName: 8,\n      animationPlayState: 8,\n      animationTimingFunction: 8,\n      appearance: 11,\n      userSelect: 11,\n      backdropFilter: 11,\n      fontKerning: 9,\n      scrollSnapType: 10.1,\n      scrollSnapPointsX: 10.1,\n      scrollSnapPointsY: 10.1,\n      scrollSnapDestination: 10.1,\n      scrollSnapCoordinate: 10.1,\n      textEmphasisPosition: 7,\n      textEmphasis: 7,\n      textEmphasisStyle: 7,\n      textEmphasisColor: 7,\n      boxDecorationBreak: 11,\n      clipPath: 11,\n      maskImage: 11,\n      maskMode: 11,\n      maskRepeat: 11,\n      maskPosition: 11,\n      maskClip: 11,\n      maskOrigin: 11,\n      maskSize: 11,\n      maskComposite: 11,\n      mask: 11,\n      maskBorderSource: 11,\n      maskBorderMode: 11,\n      maskBorderSlice: 11,\n      maskBorderWidth: 11,\n      maskBorderOutset: 11,\n      maskBorderRepeat: 11,\n      maskBorder: 11,\n      maskType: 11,\n      textDecorationStyle: 11,\n      textDecorationSkip: 11,\n      textDecorationLine: 11,\n      textDecorationColor: 11,\n      shapeImageThreshold: 10,\n      shapeImageMargin: 10,\n      shapeImageOutside: 10,\n      filter: 9,\n      hyphens: 11,\n      flowInto: 11,\n      flowFrom: 11,\n      breakBefore: 8,\n      breakAfter: 8,\n      breakInside: 8,\n      regionFragment: 11,\n      columnCount: 8,\n      columnFill: 8,\n      columnGap: 8,\n      columnRule: 8,\n      columnRuleColor: 8,\n      columnRuleStyle: 8,\n      columnRuleWidth: 8,\n      columns: 8,\n      columnSpan: 8,\n      columnWidth: 8,\n      writingMode: 10.1\n    },\n    firefox: {\n      appearance: 60,\n      userSelect: 60,\n      boxSizing: 28,\n      textAlignLast: 48,\n      textDecorationStyle: 35,\n      textDecorationSkip: 35,\n      textDecorationLine: 35,\n      textDecorationColor: 35,\n      tabSize: 60,\n      hyphens: 42,\n      fontFeatureSettings: 33,\n      breakAfter: 51,\n      breakBefore: 51,\n      breakInside: 51,\n      columnCount: 51,\n      columnFill: 51,\n      columnGap: 51,\n      columnRule: 51,\n      columnRuleColor: 51,\n      columnRuleStyle: 51,\n      columnRuleWidth: 51,\n      columns: 51,\n      columnSpan: 51,\n      columnWidth: 51\n    },\n    opera: {\n      flex: 16,\n      flexBasis: 16,\n      flexDirection: 16,\n      flexGrow: 16,\n      flexFlow: 16,\n      flexShrink: 16,\n      flexWrap: 16,\n      alignContent: 16,\n      alignItems: 16,\n      alignSelf: 16,\n      justifyContent: 16,\n      order: 16,\n      transform: 22,\n      transformOrigin: 22,\n      transformOriginX: 22,\n      transformOriginY: 22,\n      backfaceVisibility: 22,\n      perspective: 22,\n      perspectiveOrigin: 22,\n      transformStyle: 22,\n      transformOriginZ: 22,\n      animation: 29,\n      animationDelay: 29,\n      animationDirection: 29,\n      animationFillMode: 29,\n      animationDuration: 29,\n      animationIterationCount: 29,\n      animationName: 29,\n      animationPlayState: 29,\n      animationTimingFunction: 29,\n      appearance: 50,\n      userSelect: 40,\n      fontKerning: 19,\n      textEmphasisPosition: 50,\n      textEmphasis: 50,\n      textEmphasisStyle: 50,\n      textEmphasisColor: 50,\n      boxDecorationBreak: 50,\n      clipPath: 41,\n      maskImage: 50,\n      maskMode: 50,\n      maskRepeat: 50,\n      maskPosition: 50,\n      maskClip: 50,\n      maskOrigin: 50,\n      maskSize: 50,\n      maskComposite: 50,\n      mask: 50,\n      maskBorderSource: 50,\n      maskBorderMode: 50,\n      maskBorderSlice: 50,\n      maskBorderWidth: 50,\n      maskBorderOutset: 50,\n      maskBorderRepeat: 50,\n      maskBorder: 50,\n      maskType: 50,\n      textDecorationStyle: 43,\n      textDecorationSkip: 43,\n      textDecorationLine: 43,\n      textDecorationColor: 43,\n      filter: 39,\n      fontFeatureSettings: 34,\n      breakAfter: 36,\n      breakBefore: 36,\n      breakInside: 36,\n      columnCount: 36,\n      columnFill: 36,\n      columnGap: 36,\n      columnRule: 36,\n      columnRuleColor: 36,\n      columnRuleStyle: 36,\n      columnRuleWidth: 36,\n      columns: 36,\n      columnSpan: 36,\n      columnWidth: 36,\n      writingMode: 34\n    },\n    ie: {\n      flex: 10,\n      flexDirection: 10,\n      flexFlow: 10,\n      flexWrap: 10,\n      transform: 9,\n      transformOrigin: 9,\n      transformOriginX: 9,\n      transformOriginY: 9,\n      userSelect: 11,\n      wrapFlow: 11,\n      wrapThrough: 11,\n      wrapMargin: 11,\n      scrollSnapType: 11,\n      scrollSnapPointsX: 11,\n      scrollSnapPointsY: 11,\n      scrollSnapDestination: 11,\n      scrollSnapCoordinate: 11,\n      touchAction: 10,\n      hyphens: 11,\n      flowInto: 11,\n      flowFrom: 11,\n      breakBefore: 11,\n      breakAfter: 11,\n      breakInside: 11,\n      regionFragment: 11,\n      gridTemplateColumns: 11,\n      gridTemplateRows: 11,\n      gridTemplateAreas: 11,\n      gridTemplate: 11,\n      gridAutoColumns: 11,\n      gridAutoRows: 11,\n      gridAutoFlow: 11,\n      grid: 11,\n      gridRowStart: 11,\n      gridColumnStart: 11,\n      gridRowEnd: 11,\n      gridRow: 11,\n      gridColumn: 11,\n      gridColumnEnd: 11,\n      gridColumnGap: 11,\n      gridRowGap: 11,\n      gridArea: 11,\n      gridGap: 11,\n      textSizeAdjust: 11,\n      writingMode: 11\n    },\n    edge: {\n      userSelect: 17,\n      wrapFlow: 17,\n      wrapThrough: 17,\n      wrapMargin: 17,\n      scrollSnapType: 17,\n      scrollSnapPointsX: 17,\n      scrollSnapPointsY: 17,\n      scrollSnapDestination: 17,\n      scrollSnapCoordinate: 17,\n      hyphens: 17,\n      flowInto: 17,\n      flowFrom: 17,\n      breakBefore: 17,\n      breakAfter: 17,\n      breakInside: 17,\n      regionFragment: 17,\n      gridTemplateColumns: 15,\n      gridTemplateRows: 15,\n      gridTemplateAreas: 15,\n      gridTemplate: 15,\n      gridAutoColumns: 15,\n      gridAutoRows: 15,\n      gridAutoFlow: 15,\n      grid: 15,\n      gridRowStart: 15,\n      gridColumnStart: 15,\n      gridRowEnd: 15,\n      gridRow: 15,\n      gridColumn: 15,\n      gridColumnEnd: 15,\n      gridColumnGap: 15,\n      gridRowGap: 15,\n      gridArea: 15,\n      gridGap: 15\n    },\n    ios_saf: {\n      flex: 8.1,\n      flexBasis: 8.1,\n      flexDirection: 8.1,\n      flexGrow: 8.1,\n      flexFlow: 8.1,\n      flexShrink: 8.1,\n      flexWrap: 8.1,\n      alignContent: 8.1,\n      alignItems: 8.1,\n      alignSelf: 8.1,\n      justifyContent: 8.1,\n      order: 8.1,\n      transition: 6,\n      transitionDelay: 6,\n      transitionDuration: 6,\n      transitionProperty: 6,\n      transitionTimingFunction: 6,\n      transform: 8.1,\n      transformOrigin: 8.1,\n      transformOriginX: 8.1,\n      transformOriginY: 8.1,\n      backfaceVisibility: 8.1,\n      perspective: 8.1,\n      perspectiveOrigin: 8.1,\n      transformStyle: 8.1,\n      transformOriginZ: 8.1,\n      animation: 8.1,\n      animationDelay: 8.1,\n      animationDirection: 8.1,\n      animationFillMode: 8.1,\n      animationDuration: 8.1,\n      animationIterationCount: 8.1,\n      animationName: 8.1,\n      animationPlayState: 8.1,\n      animationTimingFunction: 8.1,\n      appearance: 11,\n      userSelect: 11,\n      backdropFilter: 11,\n      fontKerning: 11,\n      scrollSnapType: 10.3,\n      scrollSnapPointsX: 10.3,\n      scrollSnapPointsY: 10.3,\n      scrollSnapDestination: 10.3,\n      scrollSnapCoordinate: 10.3,\n      boxDecorationBreak: 11,\n      clipPath: 11,\n      maskImage: 11,\n      maskMode: 11,\n      maskRepeat: 11,\n      maskPosition: 11,\n      maskClip: 11,\n      maskOrigin: 11,\n      maskSize: 11,\n      maskComposite: 11,\n      mask: 11,\n      maskBorderSource: 11,\n      maskBorderMode: 11,\n      maskBorderSlice: 11,\n      maskBorderWidth: 11,\n      maskBorderOutset: 11,\n      maskBorderRepeat: 11,\n      maskBorder: 11,\n      maskType: 11,\n      textSizeAdjust: 11,\n      textDecorationStyle: 11,\n      textDecorationSkip: 11,\n      textDecorationLine: 11,\n      textDecorationColor: 11,\n      shapeImageThreshold: 10,\n      shapeImageMargin: 10,\n      shapeImageOutside: 10,\n      filter: 9,\n      hyphens: 11,\n      flowInto: 11,\n      flowFrom: 11,\n      breakBefore: 8.1,\n      breakAfter: 8.1,\n      breakInside: 8.1,\n      regionFragment: 11,\n      columnCount: 8.1,\n      columnFill: 8.1,\n      columnGap: 8.1,\n      columnRule: 8.1,\n      columnRuleColor: 8.1,\n      columnRuleStyle: 8.1,\n      columnRuleWidth: 8.1,\n      columns: 8.1,\n      columnSpan: 8.1,\n      columnWidth: 8.1,\n      writingMode: 10.3\n    },\n    android: {\n      borderImage: 4.2,\n      borderImageOutset: 4.2,\n      borderImageRepeat: 4.2,\n      borderImageSlice: 4.2,\n      borderImageSource: 4.2,\n      borderImageWidth: 4.2,\n      flex: 4.2,\n      flexBasis: 4.2,\n      flexDirection: 4.2,\n      flexGrow: 4.2,\n      flexFlow: 4.2,\n      flexShrink: 4.2,\n      flexWrap: 4.2,\n      alignContent: 4.2,\n      alignItems: 4.2,\n      alignSelf: 4.2,\n      justifyContent: 4.2,\n      order: 4.2,\n      transition: 4.2,\n      transitionDelay: 4.2,\n      transitionDuration: 4.2,\n      transitionProperty: 4.2,\n      transitionTimingFunction: 4.2,\n      transform: 4.4,\n      transformOrigin: 4.4,\n      transformOriginX: 4.4,\n      transformOriginY: 4.4,\n      backfaceVisibility: 4.4,\n      perspective: 4.4,\n      perspectiveOrigin: 4.4,\n      transformStyle: 4.4,\n      transformOriginZ: 4.4,\n      animation: 4.4,\n      animationDelay: 4.4,\n      animationDirection: 4.4,\n      animationFillMode: 4.4,\n      animationDuration: 4.4,\n      animationIterationCount: 4.4,\n      animationName: 4.4,\n      animationPlayState: 4.4,\n      animationTimingFunction: 4.4,\n      appearance: 62,\n      userSelect: 4.4,\n      fontKerning: 4.4,\n      textEmphasisPosition: 62,\n      textEmphasis: 62,\n      textEmphasisStyle: 62,\n      textEmphasisColor: 62,\n      boxDecorationBreak: 62,\n      clipPath: 4.4,\n      maskImage: 62,\n      maskMode: 62,\n      maskRepeat: 62,\n      maskPosition: 62,\n      maskClip: 62,\n      maskOrigin: 62,\n      maskSize: 62,\n      maskComposite: 62,\n      mask: 62,\n      maskBorderSource: 62,\n      maskBorderMode: 62,\n      maskBorderSlice: 62,\n      maskBorderWidth: 62,\n      maskBorderOutset: 62,\n      maskBorderRepeat: 62,\n      maskBorder: 62,\n      maskType: 62,\n      filter: 4.4,\n      fontFeatureSettings: 4.4,\n      breakAfter: 4.4,\n      breakBefore: 4.4,\n      breakInside: 4.4,\n      columnCount: 4.4,\n      columnFill: 4.4,\n      columnGap: 4.4,\n      columnRule: 4.4,\n      columnRuleColor: 4.4,\n      columnRuleStyle: 4.4,\n      columnRuleWidth: 4.4,\n      columns: 4.4,\n      columnSpan: 4.4,\n      columnWidth: 4.4,\n      writingMode: 4.4\n    },\n    and_chr: {\n      appearance: 62,\n      textEmphasisPosition: 62,\n      textEmphasis: 62,\n      textEmphasisStyle: 62,\n      textEmphasisColor: 62,\n      boxDecorationBreak: 62,\n      maskImage: 62,\n      maskMode: 62,\n      maskRepeat: 62,\n      maskPosition: 62,\n      maskClip: 62,\n      maskOrigin: 62,\n      maskSize: 62,\n      maskComposite: 62,\n      mask: 62,\n      maskBorderSource: 62,\n      maskBorderMode: 62,\n      maskBorderSlice: 62,\n      maskBorderWidth: 62,\n      maskBorderOutset: 62,\n      maskBorderRepeat: 62,\n      maskBorder: 62,\n      maskType: 62\n    },\n    and_uc: {\n      flex: 11.4,\n      flexBasis: 11.4,\n      flexDirection: 11.4,\n      flexGrow: 11.4,\n      flexFlow: 11.4,\n      flexShrink: 11.4,\n      flexWrap: 11.4,\n      alignContent: 11.4,\n      alignItems: 11.4,\n      alignSelf: 11.4,\n      justifyContent: 11.4,\n      order: 11.4,\n      transform: 11.4,\n      transformOrigin: 11.4,\n      transformOriginX: 11.4,\n      transformOriginY: 11.4,\n      backfaceVisibility: 11.4,\n      perspective: 11.4,\n      perspectiveOrigin: 11.4,\n      transformStyle: 11.4,\n      transformOriginZ: 11.4,\n      animation: 11.4,\n      animationDelay: 11.4,\n      animationDirection: 11.4,\n      animationFillMode: 11.4,\n      animationDuration: 11.4,\n      animationIterationCount: 11.4,\n      animationName: 11.4,\n      animationPlayState: 11.4,\n      animationTimingFunction: 11.4,\n      appearance: 11.4,\n      userSelect: 11.4,\n      textEmphasisPosition: 11.4,\n      textEmphasis: 11.4,\n      textEmphasisStyle: 11.4,\n      textEmphasisColor: 11.4,\n      clipPath: 11.4,\n      maskImage: 11.4,\n      maskMode: 11.4,\n      maskRepeat: 11.4,\n      maskPosition: 11.4,\n      maskClip: 11.4,\n      maskOrigin: 11.4,\n      maskSize: 11.4,\n      maskComposite: 11.4,\n      mask: 11.4,\n      maskBorderSource: 11.4,\n      maskBorderMode: 11.4,\n      maskBorderSlice: 11.4,\n      maskBorderWidth: 11.4,\n      maskBorderOutset: 11.4,\n      maskBorderRepeat: 11.4,\n      maskBorder: 11.4,\n      maskType: 11.4,\n      textSizeAdjust: 11.4,\n      filter: 11.4,\n      hyphens: 11.4,\n      fontFeatureSettings: 11.4,\n      breakAfter: 11.4,\n      breakBefore: 11.4,\n      breakInside: 11.4,\n      columnCount: 11.4,\n      columnFill: 11.4,\n      columnGap: 11.4,\n      columnRule: 11.4,\n      columnRuleColor: 11.4,\n      columnRuleStyle: 11.4,\n      columnRuleWidth: 11.4,\n      columns: 11.4,\n      columnSpan: 11.4,\n      columnWidth: 11.4,\n      writingMode: 11.4\n    },\n    op_mini: {}\n  }\n};\n"
  },
  {
    "path": "src/prefix-data/static.js",
    "content": "import calc from 'inline-style-prefixer/static/plugins/calc';\nimport crossFade from 'inline-style-prefixer/static/plugins/crossFade';\nimport cursor from 'inline-style-prefixer/static/plugins/cursor';\nimport filter from 'inline-style-prefixer/static/plugins/filter';\nimport flex from 'inline-style-prefixer/static/plugins/flex';\nimport flexboxIE from 'inline-style-prefixer/static/plugins/flexboxIE';\nimport flexboxOld from 'inline-style-prefixer/static/plugins/flexboxOld';\nimport gradient from 'inline-style-prefixer/static/plugins/gradient';\nimport imageSet from 'inline-style-prefixer/static/plugins/imageSet';\nimport position from 'inline-style-prefixer/static/plugins/position';\nimport sizing from 'inline-style-prefixer/static/plugins/sizing';\nimport transition from 'inline-style-prefixer/static/plugins/transition';\nlet w = ['Webkit'];\nlet m = ['Moz'];\nlet ms = ['ms'];\nlet wm = ['Webkit', 'Moz'];\nlet wms = ['Webkit', 'ms'];\nlet wmms = ['Webkit', 'Moz', 'ms'];\n\nexport default {\n  plugins: [\n    calc,\n    crossFade,\n    cursor,\n    filter,\n    flex,\n    flexboxIE,\n    flexboxOld,\n    gradient,\n    imageSet,\n    position,\n    sizing,\n    transition\n  ],\n  prefixMap: {\n    transform: wms,\n    transformOrigin: wms,\n    transformOriginX: wms,\n    transformOriginY: wms,\n    backfaceVisibility: w,\n    perspective: w,\n    perspectiveOrigin: w,\n    transformStyle: w,\n    transformOriginZ: w,\n    animation: w,\n    animationDelay: w,\n    animationDirection: w,\n    animationFillMode: w,\n    animationDuration: w,\n    animationIterationCount: w,\n    animationName: w,\n    animationPlayState: w,\n    animationTimingFunction: w,\n    appearance: wm,\n    userSelect: wmms,\n    fontKerning: w,\n    textEmphasisPosition: w,\n    textEmphasis: w,\n    textEmphasisStyle: w,\n    textEmphasisColor: w,\n    boxDecorationBreak: w,\n    clipPath: w,\n    maskImage: w,\n    maskMode: w,\n    maskRepeat: w,\n    maskPosition: w,\n    maskClip: w,\n    maskOrigin: w,\n    maskSize: w,\n    maskComposite: w,\n    mask: w,\n    maskBorderSource: w,\n    maskBorderMode: w,\n    maskBorderSlice: w,\n    maskBorderWidth: w,\n    maskBorderOutset: w,\n    maskBorderRepeat: w,\n    maskBorder: w,\n    maskType: w,\n    textDecorationStyle: wm,\n    textDecorationSkip: wm,\n    textDecorationLine: wm,\n    textDecorationColor: wm,\n    filter: w,\n    fontFeatureSettings: wm,\n    breakAfter: wmms,\n    breakBefore: wmms,\n    breakInside: wmms,\n    columnCount: wm,\n    columnFill: wm,\n    columnGap: wm,\n    columnRule: wm,\n    columnRuleColor: wm,\n    columnRuleStyle: wm,\n    columnRuleWidth: wm,\n    columns: wm,\n    columnSpan: wm,\n    columnWidth: wm,\n    writingMode: wms,\n    flex: wms,\n    flexBasis: w,\n    flexDirection: wms,\n    flexGrow: w,\n    flexFlow: wms,\n    flexShrink: w,\n    flexWrap: wms,\n    alignContent: w,\n    alignItems: w,\n    alignSelf: w,\n    justifyContent: w,\n    order: w,\n    transitionDelay: w,\n    transitionDuration: w,\n    transitionProperty: w,\n    transitionTimingFunction: w,\n    backdropFilter: w,\n    scrollSnapType: wms,\n    scrollSnapPointsX: wms,\n    scrollSnapPointsY: wms,\n    scrollSnapDestination: wms,\n    scrollSnapCoordinate: wms,\n    shapeImageThreshold: w,\n    shapeImageMargin: w,\n    shapeImageOutside: w,\n    hyphens: wmms,\n    flowInto: wms,\n    flowFrom: wms,\n    regionFragment: wms,\n    boxSizing: m,\n    textAlignLast: m,\n    tabSize: m,\n    wrapFlow: ms,\n    wrapThrough: ms,\n    wrapMargin: ms,\n    touchAction: ms,\n    gridTemplateColumns: ms,\n    gridTemplateRows: ms,\n    gridTemplateAreas: ms,\n    gridTemplate: ms,\n    gridAutoColumns: ms,\n    gridAutoRows: ms,\n    gridAutoFlow: ms,\n    grid: ms,\n    gridRowStart: ms,\n    gridColumnStart: ms,\n    gridRowEnd: ms,\n    gridRow: ms,\n    gridColumn: ms,\n    gridColumnEnd: ms,\n    gridColumnGap: ms,\n    gridRowGap: ms,\n    gridArea: ms,\n    gridGap: ms,\n    textSizeAdjust: wms,\n    borderImage: w,\n    borderImageOutset: w,\n    borderImageRepeat: w,\n    borderImageSlice: w,\n    borderImageSource: w,\n    borderImageWidth: w\n  }\n};\n"
  },
  {
    "path": "src/prefixer.js",
    "content": "/**\n * Based on https://github.com/jsstyles/css-vendor, but without having to\n * convert between different cases all the time.\n *\n * @flow\n */\n\nimport createStaticPrefixer from 'inline-style-prefixer/static/createPrefixer';\nimport createDynamicPrefixer from 'inline-style-prefixer/dynamic/createPrefixer';\nimport ExecutionEnvironment from 'exenv';\n\nimport staticData from './prefix-data/static';\nimport dynamicData from './prefix-data/dynamic';\n\nimport {camelCaseToDashCase} from './camel-case-props-to-dash-case';\n\nconst prefixAll: (style: Object) => Object = createStaticPrefixer(staticData);\nconst InlineStylePrefixer = createDynamicPrefixer(dynamicData, prefixAll);\n\nfunction transformValues(style) {\n  return Object.keys(style).reduce((newStyle, key) => {\n    let value = style[key];\n    if (Array.isArray(value)) {\n      value = value.join(';' + key + ':');\n    } else if (\n      value &&\n      typeof value === 'object' &&\n      typeof value.toString === 'function'\n    ) {\n      value = value.toString();\n    }\n\n    newStyle[key] = value;\n    return newStyle;\n  }, {});\n}\n\n// Flatten prefixed values that are arrays to strings.\n//\n// We get prefixed styles back in the form of:\n// - `display: \"flex\"` OR\n// - `display: \"-webkit-flex\"` OR\n// - `display: [/* ... */, \"-webkit-flex\", \"flex\"]\n//\n// The last form is problematic for eventual use in the browser and server\n// render. More confusingly, we have to do **different** things on the\n// browser and server (noted inline below).\n//\n// https://github.com/FormidableLabs/radium/issues/958\nfunction flattenStyleValues(style) {\n  return Object.keys(style).reduce((newStyle, key) => {\n    let val = style[key];\n    if (Array.isArray(val)) {\n      if (ExecutionEnvironment.canUseDOM) {\n        // For the **browser**, when faced with multiple values, we just take\n        // the **last** one, which is the original passed in value before\n        // prefixing. This _should_ work, because `inline-style-prefixer`\n        // we're just passing through what would happen without ISP.\n\n        val = val[val.length - 1].toString();\n      } else {\n        // For the **server**, we just concatenate things together and convert\n        // the style object values into a hacked-up string of like `display:\n        // \"-webkit-flex;display:flex\"` that will SSR render correctly to like\n        // `\"display:-webkit-flex;display:flex\"` but would otherwise be\n        // totally invalid values.\n\n        // We convert keys to dash-case only for the serialize values and\n        // leave the real key camel-cased so it's as expected to React and\n        // other parts of the processing chain.\n        val = val.join(`;${camelCaseToDashCase(key)}:`);\n      }\n    }\n\n    newStyle[key] = val;\n    return newStyle;\n  }, {});\n}\n\nlet _hasWarnedAboutUserAgent = false;\nlet _lastUserAgent;\nlet _cachedPrefixer;\n\nfunction getPrefixer(\n  userAgent: ?string\n): {\n  +prefix: (style: Object) => Object,\n  prefixedKeyframes: string\n} {\n  const actualUserAgent =\n    userAgent || (global && global.navigator && global.navigator.userAgent);\n\n  if (process.env.NODE_ENV !== 'production') {\n    if (!actualUserAgent && !_hasWarnedAboutUserAgent) {\n      /* eslint-disable no-console */\n      console.warn(\n        'Radium: userAgent should be supplied for server-side rendering. See ' +\n          'https://github.com/FormidableLabs/radium/tree/master/docs/api#radium ' +\n          'for more information.'\n      );\n      /* eslint-enable no-console */\n      _hasWarnedAboutUserAgent = true;\n    }\n  }\n\n  if (\n    process.env.NODE_ENV === 'test' ||\n    (!_cachedPrefixer || actualUserAgent !== _lastUserAgent)\n  ) {\n    if (actualUserAgent === 'all') {\n      _cachedPrefixer = {\n        prefix: prefixAll,\n        prefixedKeyframes: 'keyframes'\n      };\n    } else {\n      _cachedPrefixer = new InlineStylePrefixer({userAgent: actualUserAgent});\n    }\n    _lastUserAgent = actualUserAgent;\n  }\n\n  return _cachedPrefixer;\n}\n\nexport function getPrefixedKeyframes(userAgent?: ?string): string {\n  return getPrefixer(userAgent).prefixedKeyframes || 'keyframes';\n}\n\n// Returns a new style object with vendor prefixes added to property names and\n// values.\nexport function getPrefixedStyle(style: Object, userAgent?: ?string): Object {\n  const styleWithFallbacks = transformValues(style);\n  const prefixer = getPrefixer(userAgent);\n  const prefixedStyle = prefixer.prefix(styleWithFallbacks);\n  const flattenedStyle = flattenStyleValues(prefixedStyle);\n  return flattenedStyle;\n}\n"
  },
  {
    "path": "src/resolve-styles.js",
    "content": "/* @flow */\n\nimport type {Config} from './config';\n\nimport appendImportantToEachValue from './append-important-to-each-value';\nimport cssRuleSetToString from './css-rule-set-to-string';\nimport getState from './get-state';\nimport getStateKey from './get-state-key';\nimport cleanStateKey from './clean-state-key';\nimport getRadiumStyleState from './get-radium-style-state';\nimport hash from './hash';\nimport {isNestedStyle, mergeStyles} from './merge-styles';\nimport Plugins from './plugins/';\n\nimport ExecutionEnvironment from 'exenv';\nimport React from 'react';\nimport StyleKeeper from './style-keeper';\n\nconst DEFAULT_CONFIG = {\n  plugins: [\n    Plugins.mergeStyleArray,\n    Plugins.checkProps,\n    Plugins.resolveMediaQueries,\n    Plugins.resolveInteractionStyles,\n    Plugins.keyframes,\n    Plugins.visited,\n    Plugins.removeNestedStyles,\n    Plugins.prefix,\n    Plugins.checkProps\n  ]\n};\n\n// Gross\nlet globalState = {};\n\n// Only for use by tests\nlet __isTestModeEnabled = false;\n\nexport type EnhancerApi = {\n  state: Object,\n  setState: Function,\n  _radiumMediaQueryListenersByQuery?: {\n    [query: string]: {remove: () => void}\n  },\n  _radiumMouseUpListener?: {remove: () => void},\n  _radiumIsMounted: boolean,\n  _lastRadiumState: Object,\n  _extraRadiumStateKeys: any,\n  _radiumStyleKeeper?: StyleKeeper\n};\n\ntype ResolvedStyles = {\n  extraStateKeyMap: {[key: string]: boolean},\n  element: any\n};\n\n// Declare early for recursive helpers.\nlet resolveStyles = ((null: any): (\n  component: any, // ReactComponent, flow+eslint complaining\n  renderedElement: any,\n  config: Config,\n  existingKeyMap: {[key: string]: boolean},\n  shouldCheckBeforeResolve: boolean,\n  extraStateKeyMap?: {[key: string]: boolean}\n) => ResolvedStyles);\n\nconst _shouldResolveStyles = function(component) {\n  return component.type && !component.type._isRadiumEnhanced;\n};\n\nconst _resolveChildren = function({\n  children,\n  component,\n  config,\n  existingKeyMap,\n  extraStateKeyMap\n}) {\n  if (!children) {\n    return children;\n  }\n\n  const childrenType = typeof children;\n\n  if (childrenType === 'string' || childrenType === 'number') {\n    // Don't do anything with a single primitive child\n    return children;\n  }\n\n  if (childrenType === 'function') {\n    // Wrap the function, resolving styles on the result\n    return function() {\n      const result = children.apply(this, arguments);\n\n      if (React.isValidElement(result)) {\n        const key = getStateKey(result);\n        delete extraStateKeyMap[key];\n        const {element} = resolveStyles(\n          component,\n          result,\n          config,\n          existingKeyMap,\n          true,\n          extraStateKeyMap\n        );\n        return element;\n      }\n\n      return result;\n    };\n  }\n\n  if (React.Children.count(children) === 1 && children.type) {\n    // If a React Element is an only child, don't wrap it in an array for\n    // React.Children.map() for React.Children.only() compatibility.\n    const onlyChild = React.Children.only(children);\n    const key = getStateKey(onlyChild);\n    delete extraStateKeyMap[key];\n    const {element} = resolveStyles(\n      component,\n      onlyChild,\n      config,\n      existingKeyMap,\n      true,\n      extraStateKeyMap\n    );\n    return element;\n  }\n\n  return React.Children.map(children, function(child) {\n    if (React.isValidElement(child)) {\n      const key = getStateKey(child);\n      delete extraStateKeyMap[key];\n      const {element} = resolveStyles(\n        component,\n        child,\n        config,\n        existingKeyMap,\n        true,\n        extraStateKeyMap\n      );\n      return element;\n    }\n\n    return child;\n  });\n};\n\n// Recurse over props, just like children\nconst _resolveProps = function({\n  component,\n  config,\n  existingKeyMap,\n  props,\n  extraStateKeyMap\n}) {\n  let newProps = props;\n\n  Object.keys(props).forEach(prop => {\n    // We already recurse over children above\n    if (prop === 'children') {\n      return;\n    }\n\n    const propValue = props[prop];\n    if (React.isValidElement(propValue)) {\n      const key = getStateKey(propValue);\n      delete extraStateKeyMap[key];\n      newProps = {...newProps};\n      const {element} = resolveStyles(\n        component,\n        propValue,\n        config,\n        existingKeyMap,\n        true,\n        extraStateKeyMap\n      );\n      newProps[prop] = element;\n    }\n  });\n\n  return newProps;\n};\n\nconst _buildGetKey = function({\n  componentName,\n  existingKeyMap,\n  renderedElement\n}) {\n  // We need a unique key to correlate state changes due to user interaction\n  // with the rendered element, so we know to apply the proper interactive\n  // styles.\n  const originalKey = getStateKey(renderedElement);\n  const key = cleanStateKey(originalKey);\n\n  let alreadyGotKey = false;\n  const getKey = function() {\n    if (alreadyGotKey) {\n      return key;\n    }\n\n    alreadyGotKey = true;\n\n    if (existingKeyMap[key]) {\n      let elementName;\n      if (typeof renderedElement.type === 'string') {\n        elementName = renderedElement.type;\n      } else if (renderedElement.type.constructor) {\n        elementName =\n          renderedElement.type.constructor.displayName ||\n          renderedElement.type.constructor.name;\n      }\n\n      throw new Error(\n        'Radium requires each element with interactive styles to have a unique ' +\n          'key, set using either the ref or key prop. ' +\n          (originalKey\n            ? 'Key \"' + originalKey + '\" is a duplicate.'\n            : 'Multiple elements have no key specified.') +\n          ' ' +\n          'Component: \"' +\n          componentName +\n          '\". ' +\n          (elementName ? 'Element: \"' + elementName + '\".' : '')\n      );\n    }\n\n    existingKeyMap[key] = true;\n\n    return key;\n  };\n\n  return getKey;\n};\n\nconst _setStyleState = function(component, key, stateKey, value) {\n  if (!component._radiumIsMounted) {\n    return;\n  }\n\n  const existing = getRadiumStyleState(component);\n  const state = {_radiumStyleState: {...existing}};\n\n  state._radiumStyleState[key] = {...state._radiumStyleState[key]};\n  state._radiumStyleState[key][stateKey] = value;\n\n  component._lastRadiumState = state._radiumStyleState;\n  component.setState(state);\n};\n\nconst _runPlugins = function({\n  component,\n  config,\n  existingKeyMap,\n  props,\n  renderedElement\n}) {\n  // Don't run plugins if renderedElement is not a simple ReactDOMElement or has\n  // no style.\n  if (\n    !React.isValidElement(renderedElement) ||\n    typeof renderedElement.type !== 'string' ||\n    !props.style\n  ) {\n    return props;\n  }\n\n  let newProps = props;\n\n  const plugins = config.plugins || DEFAULT_CONFIG.plugins;\n\n  const componentName =\n    component.constructor.displayName || component.constructor.name;\n  const getKey = _buildGetKey({\n    renderedElement,\n    existingKeyMap,\n    componentName\n  });\n  const getComponentField = key => component[key];\n  const getGlobalState = key => globalState[key];\n  const componentGetState = (stateKey, elementKey) =>\n    getState(component.state, elementKey || getKey(), stateKey);\n  const setState = (stateKey, value, elementKey) =>\n    _setStyleState(component, elementKey || getKey(), stateKey, value);\n\n  const addCSS = css => {\n    const styleKeeper = component._radiumStyleKeeper;\n    if (!styleKeeper) {\n      if (__isTestModeEnabled) {\n        return {remove() {}};\n      }\n\n      throw new Error(\n        'To use plugins requiring `addCSS` (e.g. keyframes, media queries), ' +\n          'please wrap your application in the StyleRoot component. Component ' +\n          'name: `' +\n          componentName +\n          '`.'\n      );\n    }\n\n    return styleKeeper.addCSS(css);\n  };\n\n  let newStyle = props.style;\n\n  plugins.forEach(plugin => {\n    const result =\n      plugin({\n        ExecutionEnvironment,\n        addCSS,\n        appendImportantToEachValue,\n        componentName,\n        config,\n        cssRuleSetToString,\n        getComponentField,\n        getGlobalState,\n        getState: componentGetState,\n        hash,\n        mergeStyles,\n        props: newProps,\n        setState,\n        isNestedStyle,\n        style: newStyle\n      }) || {};\n\n    newStyle = result.style || newStyle;\n\n    newProps =\n      result.props && Object.keys(result.props).length\n        ? {...newProps, ...result.props}\n        : newProps;\n\n    const newComponentFields = result.componentFields || {};\n    Object.keys(newComponentFields).forEach(fieldName => {\n      component[fieldName] = newComponentFields[fieldName];\n    });\n\n    const newGlobalState = result.globalState || {};\n    Object.keys(newGlobalState).forEach(key => {\n      globalState[key] = newGlobalState[key];\n    });\n  });\n\n  if (newStyle !== props.style) {\n    newProps = {...newProps, style: newStyle};\n  }\n\n  return newProps;\n};\n\n// Wrapper around React.cloneElement. To avoid processing the same element\n// twice, whenever we clone an element add a special prop to make sure we don't\n// process this element again.\nconst _cloneElement = function(renderedElement, newProps, newChildren) {\n  // Only add flag if this is a normal DOM element\n  if (typeof renderedElement.type === 'string') {\n    newProps = {...newProps, 'data-radium': true};\n  }\n\n  return React.cloneElement(renderedElement, newProps, newChildren);\n};\n\n//\n// The nucleus of Radium. resolveStyles is called on the rendered elements\n// before they are returned in render. It iterates over the elements and\n// children, rewriting props to add event handlers required to capture user\n// interactions (e.g. mouse over). It also replaces the style prop because it\n// adds in the various interaction styles (e.g. :hover).\n//\n/* eslint-disable max-params */\nresolveStyles = function(\n  component: EnhancerApi,\n  renderedElement: any, // ReactElement\n  config: Config = DEFAULT_CONFIG,\n  existingKeyMap: {[key: string]: boolean} = {},\n  shouldCheckBeforeResolve: boolean = false,\n  extraStateKeyMap?: {[key: string]: boolean}\n): ResolvedStyles {\n  // The extraStateKeyMap is for determining which keys should be erased from\n  // the state (i.e. which child components are unmounted and should no longer\n  // have a style state).\n  if (!extraStateKeyMap) {\n    const state = getRadiumStyleState(component);\n    extraStateKeyMap = Object.keys(state).reduce((acc, key) => {\n      // 'main' is the auto-generated key when there is only one element with\n      // interactive styles and if a custom key is not assigned. Because of\n      // this, it is impossible to know which child is 'main', so we won't\n      // count this key when generating our extraStateKeyMap.\n      if (key !== 'main') {\n        acc[key] = true;\n      }\n      return acc;\n    }, {});\n  }\n\n  if (Array.isArray(renderedElement) && !renderedElement.props) {\n    const elements = renderedElement.map(element => {\n      // element is in-use, so remove from the extraStateKeyMap\n      if (extraStateKeyMap) {\n        const key = getStateKey(element);\n        delete extraStateKeyMap[key];\n      }\n\n      // this element is an array of elements,\n      // so return an array of elements with resolved styles\n      return resolveStyles(\n        component,\n        element,\n        config,\n        existingKeyMap,\n        shouldCheckBeforeResolve,\n        extraStateKeyMap\n      ).element;\n    });\n    return {\n      extraStateKeyMap,\n      element: elements\n    };\n  }\n\n  // ReactElement\n  if (\n    !renderedElement ||\n    // Bail if we've already processed this element. This ensures that only the\n    // owner of an element processes that element, since the owner's render\n    // function will be called first (which will always be the case, since you\n    // can't know what else to render until you render the parent component).\n    (renderedElement.props && renderedElement.props['data-radium']) ||\n    // Bail if this element is a radium enhanced element, because if it is,\n    // then it will take care of resolving its own styles.\n    (shouldCheckBeforeResolve && !_shouldResolveStyles(renderedElement))\n  ) {\n    return {extraStateKeyMap, element: renderedElement};\n  }\n  const children = renderedElement.props.children;\n\n  const newChildren = _resolveChildren({\n    children,\n    component,\n    config,\n    existingKeyMap,\n    extraStateKeyMap\n  });\n\n  let newProps = _resolveProps({\n    component,\n    config,\n    existingKeyMap,\n    extraStateKeyMap,\n    props: renderedElement.props\n  });\n\n  newProps = _runPlugins({\n    component,\n    config,\n    existingKeyMap,\n    props: newProps,\n    renderedElement\n  });\n\n  // If nothing changed, don't bother cloning the element. Might be a bit\n  // wasteful, as we add the sentinel to stop double-processing when we clone.\n  // Assume benign double-processing is better than unneeded cloning.\n  if (newChildren === children && newProps === renderedElement.props) {\n    return {extraStateKeyMap, element: renderedElement};\n  }\n\n  const element = _cloneElement(\n    renderedElement,\n    newProps !== renderedElement.props ? newProps : {},\n    newChildren\n  );\n\n  return {extraStateKeyMap, element};\n};\n/* eslint-enable max-params */\n\n// Only for use by tests\nif (process.env.NODE_ENV !== 'production') {\n  resolveStyles.__clearStateForTests = function() {\n    globalState = {};\n  };\n  resolveStyles.__setTestMode = function(isEnabled) {\n    __isTestModeEnabled = isEnabled;\n  };\n}\n\nexport default resolveStyles;\n"
  },
  {
    "path": "src/style-keeper.js",
    "content": "/* @flow */\n\nexport default class StyleKeeper {\n  _userAgent: string | typeof undefined;\n  _listeners: Array<() => void>;\n  _cssSet: {[id: string]: boolean};\n\n  constructor(userAgent?: string) {\n    this._userAgent = userAgent;\n    this._listeners = [];\n    this._cssSet = {};\n  }\n\n  subscribe(listener: () => void): {remove: () => void} {\n    if (this._listeners.indexOf(listener) === -1) {\n      this._listeners.push(listener);\n    }\n\n    return {\n      // Must be fat arrow to capture `this`\n      remove: () => {\n        const listenerIndex = this._listeners.indexOf(listener);\n        if (listenerIndex > -1) {\n          this._listeners.splice(listenerIndex, 1);\n        }\n      }\n    };\n  }\n\n  addCSS(css: string): {remove: () => void} {\n    if (!this._cssSet[css]) {\n      this._cssSet[css] = true;\n      this._emitChange();\n    }\n\n    return {\n      // Must be fat arrow to capture `this`\n      remove: () => {\n        delete this._cssSet[css];\n        this._emitChange();\n      }\n    };\n  }\n\n  getCSS(): string {\n    return Object.keys(this._cssSet).join('\\n');\n  }\n\n  _emitChange() {\n    this._listeners.forEach(listener => listener());\n  }\n}\n"
  },
  {
    "path": "src/test-helpers.js",
    "content": "import Color from 'color';\nimport React, {Component} from 'react';\nimport ReactDOM from 'react-dom';\nimport ShallowRenderer from 'react-test-renderer/shallow';\nimport TestUtils from 'react-dom/test-utils';\n\nexport function getRenderOutput(element) {\n  const renderer = new ShallowRenderer();\n  renderer.render(element);\n  return renderer.getRenderOutput();\n}\n\nclass Wrapper extends Component {\n  render() {\n    return this.props.children;\n  }\n}\n\nexport function renderFcIntoDocument(element) {\n  return TestUtils.renderIntoDocument(<Wrapper>{element}</Wrapper>);\n}\n\nexport function getElement(output, tagName) {\n  return ReactDOM.findDOMNode(\n    TestUtils.findRenderedDOMComponentWithTag(output, tagName)\n  );\n}\n\nexport function getElements(output, tagName) {\n  return TestUtils.scryRenderedDOMComponentsWithTag(output, tagName).map(\n    component => ReactDOM.findDOMNode(component)\n  );\n}\n\nfunction cleanCSS(css) {\n  return css.replace(/\\s*\\n\\s*/g, '').replace(/\\s*([{};:,])\\s*/g, '$1');\n}\n\nexport function expectCSS(styleElement, css) {\n  // strip newlines and excess whitespace from both to normalize browsers.\n  // IE9, for instance, does not include new lines in innerText.\n  // Also allows us to write our expected CSS cleanly, without worring about the\n  // format of the actual output.\n  expect(cleanCSS(styleElement.innerText)).to.equal(cleanCSS(css));\n}\n\nexport function expectColor(actual, expected) {\n  expect(Color(actual).hex()).to.equal(Color(expected).hex());\n}\n\nexport function createEsClass(renderFn) {\n  class Composed extends Component {\n    render() {\n      return renderFn() || <div />;\n    }\n  }\n\n  return Composed;\n}\n"
  },
  {
    "path": "test/.eslintrc",
    "content": "parserOptions:\n  sourceType: \"script\"\n"
  },
  {
    "path": "test/enhancer-test.js",
    "content": "'use strict';\n\nconst React = require('react');\n\nconst Enhancer = require('../lib/enhancer').default;\nconst createEsClass = require('../lib/test-helpers').createEsClass;\nconst render = require('./utils').render;\n\n// Full assertion wrapper\nconst assertValidEnhancedComponent = Composed => {\n  const Enhanced = Enhancer(Composed);\n  const rendered = render(Enhanced);\n\n  expect(render(Composed)).to.not.equal(rendered);\n  expect(rendered)\n    .to.contain('data-radium=\"true\"')\n    .and.to.contain('style=\"background:red;color:white\"');\n};\n\ndescribe('Enhancer', () => {\n  let testElement;\n\n  beforeEach(() => {\n    testElement = React.createElement('div', {\n      style: [{background: 'red'}, {color: 'white'}]\n    });\n  });\n\n  it('handles arrow functions', () => {\n    const Composed = () => testElement;\n\n    assertValidEnhancedComponent(Composed);\n  });\n\n  it('handles real functions', () => {\n    const Composed = function() {\n      return testElement;\n    };\n\n    assertValidEnhancedComponent(Composed);\n  });\n\n  it('handles babel-ified ES classes', () => {\n    const Composed = createEsClass(() => testElement);\n\n    assertValidEnhancedComponent(Composed);\n  });\n\n  // Regression test - `Radium wrapping not compatible with native classes?`\n  // https://github.com/FormidableLabs/radium/issues/576\n  it('handles native ES classes', () => {\n    class Composed extends React.Component {\n      render() {\n        return testElement;\n      }\n    }\n\n    assertValidEnhancedComponent(Composed);\n  });\n\n  it('handles native ES classes with bound methods', () => {\n    class TestComponent extends React.Component {\n      constructor() {\n        super(...arguments);\n        this.checkProp = this.checkProp.bind(this);\n        this.checkState = this.checkState.bind(this);\n        this.state = {v: 1};\n      }\n\n      componentWillReceiveProps() {\n        this.setState(state => ({v: state.v + 1}));\n      }\n\n      checkProp() {\n        return this.props.flag;\n      }\n\n      checkState() {\n        return this.state.v;\n      }\n\n      touchState() {\n        this.state.v += 1;\n      }\n\n      render() {\n        return React.createElement('p', {}, [\n          String(this.props.flag),\n          ' == ',\n          String(this.checkProp()),\n          ', ',\n          String(this.state.v),\n          ' == ',\n          String(this.checkState())\n        ]);\n      }\n    }\n\n    const cleanup = require('jsdom-global')();\n    try {\n      const Enhanced = Enhancer(TestComponent);\n      const elt = React.createElement(Enhanced, {flag: true});\n      const {configure, mount} = require('enzyme');\n      const Adapter = require('enzyme-adapter-react-16');\n      configure({adapter: new Adapter()});\n      const wrapper = mount(elt);\n      expect(wrapper.html()).is.equal(\n        '<p data-radium=\"true\">true == true, 1 == 1</p>'\n      );\n      wrapper.setProps({flag: false});\n      expect(wrapper.html()).is.equal(\n        '<p data-radium=\"true\">false == false, 2 == 2</p>'\n      );\n      wrapper.setProps({flag: true});\n      expect(wrapper.html()).is.equal(\n        '<p data-radium=\"true\">true == true, 3 == 3</p>'\n      );\n    } finally {\n      cleanup();\n    }\n  }).timeout(10000);\n\n  it('works with hooks', () => {\n    const Composed = function() {\n      // eslint-disable-next-line no-unused-vars\n      const [counter, setCount] = React.useState(0);\n\n      return testElement;\n    };\n\n    assertValidEnhancedComponent(Composed);\n  });\n});\n"
  },
  {
    "path": "test/mocha.opts",
    "content": "--require test/setup.js\n--recursive\n"
  },
  {
    "path": "test/radium-test.js",
    "content": "'use strict';\n\nconst React = require('react');\n\nconst Radium = require('..');\nconst render = require('./utils').render;\n\ndescribe('Radium blackbox SSR tests', () => {\n  describe('inline prefixes', () => {\n    let Wrapped;\n\n    beforeEach(() => {\n      class Composed extends React.Component {\n        render() {\n          return React.createElement('div', {\n            style: {\n              display: 'flex'\n            }\n          });\n        }\n      }\n\n      Wrapped = Radium(Composed);\n    });\n\n    // Regression test: https://github.com/FormidableLabs/radium/issues/958\n    it('handles no user agent', () => {\n      const rendered = render(Wrapped);\n      expect(rendered).to.contain(\n        'style=\"display:-webkit-box;display:-moz-box;display:-ms-flexbox;' +\n          'display:-webkit-flex;display:flex\"'\n      );\n    });\n\n    // Regression test: https://github.com/FormidableLabs/radium/issues/958\n    it('handles non-matching user agent', () => {\n      const rendered = render(Wrapped, {\n        userAgent: 'testy-mctestface'\n      });\n      expect(rendered).to.contain(\n        'style=\"display:-webkit-box;display:-moz-box;display:-ms-flexbox;' +\n          'display:-webkit-flex;display:flex\"'\n      );\n    });\n\n    it('handles matching user agent', () => {\n      const rendered = render(Wrapped, {\n        userAgent:\n          'Mozilla/5.0 (iPad; CPU OS 8_0_0 like Mac OS X) AppleWebKit/600.1.4' +\n          ' (KHTML, like Gecko) CriOS/47.0.2526.107 Mobile/12H321 Safari/600.1.4'\n      });\n      expect(rendered).to.contain('style=\"display:-webkit-flex\"');\n    });\n  });\n\n  describe('keyframes', () => {\n    let getComponent;\n\n    beforeEach(() => {\n      const testKeyFrames = Radium.keyframes(\n        {\n          '0%': {width: '10%'},\n          '50%': {width: '50%'},\n          '100%': {width: '10%'}\n        },\n        'test'\n      );\n\n      const style = {\n        animation: 'x 3s ease 0s infinite',\n        animationName: testKeyFrames,\n        background: 'blue'\n      };\n\n      getComponent = radiumConfig => {\n        class Component extends React.Component {\n          render() {\n            return React.createElement(\n              Radium.StyleRoot,\n              {radiumConfig},\n              React.createElement('div', {\n                style\n              })\n            );\n          }\n        }\n\n        return Component;\n      };\n    });\n\n    // Regression test: https://github.com/FormidableLabs/radium/issues/973\n    it('handles no user agent', () => {\n      const rendered = render(getComponent());\n      expect(rendered).to.contain('<style>@keyframes test-radium-animation-');\n    });\n\n    // Regression test: https://github.com/FormidableLabs/radium/issues/973\n    it('handles non-matching user agent', () => {\n      const rendered = render(\n        getComponent({\n          userAgent: 'testy-mctestface'\n        })\n      );\n\n      expect(rendered).to.contain('<style>@keyframes test-radium-animation-');\n    });\n\n    it('handles matching user agent', () => {\n      const rendered = render(\n        getComponent({\n          userAgent:\n            'Mozilla/5.0 (iPad; CPU OS 8_0_0 like Mac OS X) AppleWebKit/600.1.4' +\n            ' (KHTML, like Gecko) CriOS/47.0.2526.107 Mobile/12H321 Safari/600.1.4'\n        })\n      );\n      expect(rendered).to.contain(\n        '<style>@-webkit-keyframes test-radium-animation-'\n      );\n    });\n  });\n\n  describe('render scenarios', () => {\n    // Regression test: https://github.com/FormidableLabs/radium/issues/950\n    it('handles rendered child array', () => {\n      class Composed extends React.Component {\n        render() {\n          return [\n            React.createElement('div', {\n              key: 0,\n              style: {\n                color: 'blue'\n              }\n            }),\n            React.createElement('div', {\n              key: 1,\n              style: {\n                color: 'red'\n              }\n            })\n          ];\n        }\n      }\n\n      const rendered = render(Radium(Composed));\n      expect(rendered).to.contain(\n        '<div style=\"color:blue\" data-radium=\"true\"></div>' +\n          '<div style=\"color:red\" data-radium=\"true\"></div>'\n      );\n    });\n\n    it('handles rendered Fragments', () => {\n      class Composed extends React.Component {\n        render() {\n          return React.createElement(React.Fragment, {\n            children: [\n              React.createElement('div', {\n                key: 0,\n                style: {\n                  color: 'blue'\n                }\n              }),\n              React.createElement('div', {\n                key: 1,\n                style: {\n                  color: 'red'\n                }\n              })\n            ]\n          });\n        }\n      }\n\n      const rendered = render(Radium(Composed));\n      expect(rendered).to.contain(\n        '<div style=\"color:blue\" data-radium=\"true\"></div>' +\n          '<div style=\"color:red\" data-radium=\"true\"></div>'\n      );\n    });\n  });\n});\n"
  },
  {
    "path": "test/setup.js",
    "content": "'use strict';\n\nconst chai = require('chai');\nconst sinonChai = require('sinon-chai');\n\n// Add chai plugins.\nchai.use(sinonChai);\n\n// Add test lib globals.\nglobal.expect = chai.expect;\n\n// Force NODE_ENV. Some things like caches behave differently.\nprocess.env.NODE_ENV = process.env.NODE_ENV || 'test';\n"
  },
  {
    "path": "test/utils.js",
    "content": "'use strict';\n\nconst React = require('react');\nconst renderToString = require('react-dom/server').renderToString;\n\nconst render = (Component, opts) => {\n  opts = opts || {};\n  return renderToString(\n    React.createElement(Component, {\n      radiumConfig: {\n        userAgent: opts.userAgent\n      }\n    })\n  );\n};\n\nmodule.exports = {\n  render\n};\n"
  },
  {
    "path": "webpack.config.js",
    "content": "const path = require('path');\n\nmodule.exports = {\n  cache: true,\n  entry: path.join(__dirname, 'src/index.js'),\n  externals: [\n    {\n      react: {\n        root: 'React',\n        commonjs2: 'react',\n        commonjs: 'react',\n        amd: 'react'\n      }\n    }\n  ],\n  output: {\n    path: path.join(__dirname, 'dist'),\n    filename: 'radium.js',\n    library: 'Radium',\n    libraryTarget: 'umd',\n    libraryExport: 'default'\n  },\n  module: {\n    rules: [\n      {\n        test: /\\.js$/,\n        include: [path.join(__dirname, 'src')],\n        loader: 'babel-loader'\n      }\n    ]\n  }\n};\n"
  },
  {
    "path": "webpack.config.minified.js",
    "content": "const webpack = require('webpack');\nconst base = require('./webpack.config');\n\nmodule.exports = Object.assign({}, base, {\n  output: Object.assign({}, base.output, {\n    filename: 'radium.min.js'\n  }),\n  plugins: [].concat(base.plugins || [], [\n    new webpack.optimize.UglifyJsPlugin({\n      compress: {\n        warnings: false\n      }\n    }),\n    new webpack.DefinePlugin({\n      'process.env': {\n        // Signal production mode for React JS and other libs.\n        NODE_ENV: JSON.stringify('production')\n      }\n    })\n  ])\n});\n"
  }
]