{"_id":"styled-jsx","_rev":"166-9842c0e7dc9a527aef0bed8d808cb90f","name":"styled-jsx","dist-tags":{"canary":"3.0.3-canary.0","alpha":"4.0.0-alpha.4","beta":"5.0.0-beta.7","latest":"5.1.7"},"versions":{"0.0.1":{"name":"styled-jsx","version":"0.0.1","license":"MIT","_id":"styled-jsx@0.0.1","maintainers":[{"name":"rauchg","email":"rauchg@gmail.com"}],"ava":{"require":["babel-register"]},"dist":{"shasum":"0a656e5dba5eddfb742dd97fa6ab08657102fd2e","tarball":"https://registry.npmjs.org/styled-jsx/-/styled-jsx-0.0.1.tgz","integrity":"sha512-4jel9o92FcgfvcMti8165MGUquQ4eWmC3YH/miozOKWIO7yh189WbS4RAIw/nwauQCz1dkBmH6YNlJp7H1BDVg==","signatures":[{"sig":"MEYCIQCFpKjTNwzLxpfJ5SSAd1Ft62+RvAs8zPH1eQazLd7PVwIhAK5o87UbR9Htvnz+71MinKqSX1CU5L3ISj1Z8ZGR4KYA","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"./flush.js","_from":".","babel":{"plugins":["transform-runtime"],"presets":["es2015","stage-3","react"]},"_shasum":"0a656e5dba5eddfb742dd97fa6ab08657102fd2e","gitHead":"bad9d0fa2ecf548f30b952c46daeba54408abd56","scripts":{"test":"ava test/styles.js"},"_npmUser":{"name":"rauchg","email":"rauchg@gmail.com"},"_npmVersion":"3.10.8","description":"Full, scoped and component-friendly CSS support for JSX (SSR+browser)","directories":{},"_nodeVersion":"7.0.0","dependencies":{"babel":"^6.5.2","babel-core":"^6.18.2","babel-plugin-syntax-jsx":"^6.18.0"},"devDependencies":{"ava":"^0.17.0","babel-cli":"^6.18.0","fs-promise":"^1.0.0","babel-register":"^6.18.0","babel-preset-react":"^6.16.0","babel-preset-es2015":"^6.16.0","babel-preset-stage-3":"^6.16.0","babel-plugin-transform-runtime":"^6.15.0"},"_npmOperationalInternal":{"tmp":"tmp/styled-jsx-0.0.1.tgz_1480948569431_0.07831603847444057","host":"packages-12-west.internal.npmjs.com"}},"0.0.2":{"name":"styled-jsx","version":"0.0.2","license":"MIT","_id":"styled-jsx@0.0.2","maintainers":[{"name":"leo","email":"leo@zeit.co"},{"name":"rauchg","email":"rauchg@gmail.com"}],"homepage":"https://github.com/zeit/styled-jsx#readme","bugs":{"url":"https://github.com/zeit/styled-jsx/issues"},"xo":{"envs":["node","browser"],"rules":{"new-cap":0,"import/no-unresolved":0},"space":true,"esnext":true,"ignores":["lib/**","test/fixtures/**"],"semicolon":false},"ava":{"require":["babel-register","babel-polyfill"]},"dist":{"shasum":"dda78e2886efa21a48a749815c32959107fb0541","tarball":"https://registry.npmjs.org/styled-jsx/-/styled-jsx-0.0.2.tgz","integrity":"sha512-vDb5r9dDnIcx36NwrIscni0eUS7ITOD1Tq9sh1HDAVUj7Wmn6ARUTZ4WClqKvesqHeXnxxOshjChT3H79Pc9lQ==","signatures":[{"sig":"MEUCIQDcuM2VB4Ja/x/NgX2O8IInV/J/vMCSH+L2L09KY/cbqQIgHiiVn84rqxYIZbPdS40EYzIjI+zZDR/9W5LwuIh442Y=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"./dist/flush.js","_from":".","babel":{"presets":["es2015","stage-3","react"]},"files":["dist","lib"],"_shasum":"dda78e2886efa21a48a749815c32959107fb0541","gitHead":"7b1ac68472a88fa3fcf5340b056563247e90440d","scripts":{"dev":"gulp","test":"xo && ava test/styles.js","prepublish":"gulp transpile"},"_npmUser":{"name":"leo","email":"leo@zeit.co"},"repository":{"url":"git+https://github.com/zeit/styled-jsx.git","type":"git"},"_npmVersion":"3.10.9","description":"[](https://travis-ci.org/zeit/styled-jsx) [](https://github.com/sindresorhus/xo) [](https://travis-ci.org/zeit/styled-jsx) [](https://github.com/sindresorhus/xo) [](https://travis-ci.org/zeit/styled-jsx) [](https://github.com/sindresorhus/xo) [](https://travis-ci.org/zeit/styled-jsx) [](https://github.com/sindresorhus/xo) [](https://travis-ci.org/zeit/styled-jsx) [](https://github.com/sindresorhus/xo) [](https://travis-ci.org/zeit/styled-jsx) [](https://github.com/sindresorhus/xo) [](https://github.com/vercel/styled-jsx/actions?query=branch%3Amain)\n\nFull, scoped and component-friendly CSS support for JSX (rendered on the server or the client).\n\nCode and docs are for v3 which we highly recommend you to try. Looking for styled-jsx v2? Switch to the [v2 branch](https://github.com/vercel/styled-jsx/tree/v2).\n\n- [Getting started](#getting-started)\n- [Configuration options](#configuration-options)\n - [`optimizeForSpeed`](#optimizeforspeed)\n - [`sourceMaps`](#sourcemaps)\n - [`styleModule`](#stylemodule)\n - [`vendorPrefixes`](#vendorprefixes)\n- [Features](#features)\n- [How It Works](#how-it-works)\n - [Why It Works Like This](#why-it-works-like-this)\n- [Targeting The Root](#targeting-the-root)\n- [Global styles](#global-styles)\n - [One-off global selectors](#one-off-global-selectors)\n- [Dynamic styles](#dynamic-styles)\n - [Via interpolated dynamic props](#via-interpolated-dynamic-props)\n - [Via `className` toggling](#via-classname-toggling)\n - [Via inline `style`](#via-inline-style)\n- [Constants](#constants)\n- [Server-Side Rendering](#server-side-rendering)\n- [External CSS and styles outside of the component](#external-css-and-styles-outside-of-the-component)\n - [External styles](#external-styles)\n - [Styles outside of components](#styles-outside-of-components)\n - [The `resolve` tag](#the-resolve-tag)\n - [Styles in regular CSS files](#styles-in-regular-css-files)\n- [CSS Preprocessing via Plugins](#css-preprocessing-via-plugins)\n - [Plugin options](#plugin-options)\n - [Example plugins](#example-plugins)\n- [Rendering in tests](#rendering-in-tests)\n- [FAQ](#faq)\n - [Warning: unknown `jsx` prop on <style> tag](#warning-unknown-jsx-prop-on-style-tag)\n - [Can I return an array of components when using React 16?](#can-i-return-an-array-of-components-when-using-react-16)\n - [Styling third parties / child components from the parent](#styling-third-parties--child-components-from-the-parent)\n - [Some styles are missing in production](https://github.com/vercel/styled-jsx/issues/319#issuecomment-349239326)\n - [Build a component library with styled-jsx](#build-a-component-library-with-styled-jsx)\n- [Syntax Highlighting](#syntax-highlighting)\n- [ESLint](#eslint)\n- [TypeScript](#typescript)\n- [Credits](#credits)\n\n## Getting started\n\nFirstly, install the package:\n\n```bash\nnpm install --save styled-jsx\n```\n\nNext, add `styled-jsx/babel` to `plugins` in your babel configuration:\n\n```json\n{\n \"plugins\": [\"styled-jsx/babel\"]\n}\n```\n\nNow add `\n \n)\n```\n\n## Configuration options\n\nThe following are optional settings for the babel plugin.\n\n#### `optimizeForSpeed`\n\nBlazing fast and optimized CSS rules injection system based on the CSSOM APIs.\n\n```json\n{\n \"plugins\": [[\"styled-jsx/babel\", { \"optimizeForSpeed\": true }]]\n}\n```\n\nWhen in production\\* this mode is automatically enabled.
\nBeware that when using this option source maps cannot be generated and styles cannot be edited via the devtools.\n\n\\* `process.env.NODE_ENV === 'production'`\n\n#### `sourceMaps`\n\nGenerates source maps (default: `false`)\n\n#### `styleModule`\n\nModule that the transpiled files should import (default: `styled-jsx/style`)\n\n#### `vendorPrefixes`\n\nTurn on/off automatic vendor prefixing (default: `true`)\n\n## Features\n\n- Full CSS support, no tradeoffs in power\n- Runtime size of just **3kb** (gzipped, from 12kb)\n- Complete isolation: Selectors, animations, keyframes\n- Built-in CSS vendor prefixing\n- Very fast, minimal and efficient transpilation (see below)\n- High-performance runtime-CSS-injection when not server-rendering\n- Future-proof: Equivalent to server-renderable \"Shadow CSS\"\n- Source maps support\n- Dynamic styles and themes support\n- CSS Preprocessing via Plugins\n\n## Using in Next.js\n\nNext.js automatically configures `styled-jsx` with babel or swc, you don't have to configure it manually.\n\n## How It Works\n\nThe example above transpiles to the following:\n\n```jsx\nimport _JSXStyle from 'styled-jsx/style'\n\nexport default () => (\n
only this paragraph will get the style :)
\n <_JSXStyle id=\"123\">{`p.jsx-123 {color: red;}`}\n