jss-from-postcss - npm Package Compare versions

Comparing version 0.0.2 to 0.1.2

README.sc.md

+<a href="https://github.com/styled-components/styled-components">
+  <img alt="styled-components" src="./docs/assets/logo.png" height="150px" />
+</a>
+<br />
+
+Visual primitives for the component age. Use the best bits of ES6 and CSS to style your apps without stress 💅
+
+```
+npm install --save styled-components
+```
+
+[![npm](https://img.shields.io/npm/v/styled-components.svg)](https://www.npmjs.com/package/styled-components) [![Travis Build Status](https://travis-ci.org/styled-components/styled-components.svg?branch=master)](https://travis-ci.org/styled-components/styled-components) [![AppVeyor Build Status](https://ci.appveyor.com/api/projects/status/github/gruntjs/grunt?branch=master&svg=true)](https://ci.appveyor.com/project/mxstbr/styled-components) [![Supported by Thinkmill](https://thinkmill.github.io/badge/heart.svg)](http://thinkmill.com.au/?utm_source=github&utm_medium=badge&utm_campaign=styled-components)
+[![gitter](https://camo.githubusercontent.com/54dc79dc7da6b76b17bc8013342da9b4266d993c/68747470733a2f2f6261646765732e6769747465722e696d2f6d78737462722f72656163742d626f696c6572706c6174652e737667)](https://gitter.im/styled-components/styled-components)
+
+Utilising [tagged template literals](./docs/tagged-template-literals.md) (a recent addition to JavaScript) and the [power of CSS](./docs/css-we-support.md), `styled-components` allows you to write actual CSS code to style your components. It also removes the mapping between components and styles – using components as a low-level styling construct could not be easier!
+
+`styled-components` is compatible with both React (for web) and ReactNative – meaning it's the perfect choice even for truly universal apps! See the [ReactNative section](#react-native) for more information
+
+> **Note:** If you're not using `npm` as your package manager, aren't using a module bundler or aren't sure about either of those jump to [Alternative Installation Methods](#alternative-installation-methods).
+
+*Made by [Glen Maddern](https://twitter.com/glenmaddern) and [Max Stoiber](https://twitter.com/mxstbr), supported by [Front End Center](https://frontend.center) and [Thinkmill](http://thinkmill.com.au/). Thank you for making this project possible!*
+
+## Usage
+
+### Basic
+
+This creates two react components, `<Title>` and `<Wrapper>`:
+
+```JSX
+import React from 'react';
+
+import styled from 'styled-components';
+
+// Create a <Title> react component that renders an <h1> which is
+// centered, palevioletred and sized at 1.5em
+const Title = styled.h1`
+  font-size: 1.5em;
+  text-align: center;
+  color: palevioletred;
+`;
+
+// Create a <Wrapper> react component that renders a <section> with
+// some padding and a papayawhip background
+const Wrapper = styled.section`
+  padding: 4em;
+  background: papayawhip;
+`;
+```
+
+*(The CSS rules are automatically vendor prefixed, so you don't have to think about it!)*
+
+You render them like so:
+
+```JSX
+// Use them like any other React component – except they're styled!
+<Wrapper>
+  <Title>Hello World, this is my first styled component!</Title>
+</Wrapper>
+```
+
+<div align="center">
+  <a href="http://www.webpackbin.com/4kejp0ESz">
+    <img alt="Screenshot of the above code ran in a browser" src="http://i.imgur.com/wUJpcjY.jpg" />
+    <div><em>Live demo</em></div>
+  </a>
+</div>
+
+### Passed props
+
+Styled components pass on all their props. This is a styled `<input>`:
+
+```JS
+import React from 'react';
+import styled from 'styled-components';
+
+// Create an <Input> component that'll render an <input> tag with some styles
+const Input = styled.input`
+  font-size: 1.25em;
+  padding: 0.5em;
+  margin: 0.5em;
+  color: palevioletred;
+  background: papayawhip;
+  border: none;
+  border-radius: 3px;
+
+  &:hover {
+    box-shadow: inset 1px 1px 2px rgba(0,0,0,0.1);
+  }
+`;
+```
+
+You can just pass a `placeholder` prop into the `styled-component`. It will pass it on to the DOM node like any other react component:
+
+```JSX
+// Render a styled input with a placeholder of "@mxstbr"
+<Input placeholder="@mxstbr" type="text" />
+```
+
+Here is one input without any content showing the placeholder, and one with some content:
+
+<div align="center">
+  <a href="http://www.webpackbin.com/4k47p0VHG">
+    <img alt="Screenshot of the above code ran in a browser" src="http://imgur.com/QoQiSui.jpg" />
+    <div><em>Live demo</em></div>
+  </a>
+</div>
+
+### Adapting based on props
+
+This is a button component that has a `primary` state. By setting `primary` to `true` when rendering it we adjust the background and text color. *(see [tips and tricks](./docs/tips-and-tricks.md#component-adjustments) for more examples of this pattern!)*
+
+```JSX
+import styled from 'styled-components';
+
+const Button = styled.button`
+  /* Adapt the colors based on primary prop */
+  background: ${props => props.primary ? 'palevioletred' : 'white'};
+  color: ${props => props.primary ? 'white' : 'palevioletred'};
+
+  font-size: 1em;
+  margin: 1em;
+  padding: 0.25em 1em;
+  border: 2px solid palevioletred;
+  border-radius: 3px;
+`;
+
+export default Button;
+```
+
+```JSX
+<Button>Normal</Button>
+<Button primary>Primary</Button>
+```
+
+<div align="center">
+  <a href="http://www.webpackbin.com/Eyod0ANSM">
+    <img alt="Screenshot of the above code ran in a browser" src="http://imgur.com/4qlEdsx.jpg" />
+    <div><em>Live demo</em></div>
+  </a>
+</div>
+
+### Overriding component styles
+
+Taking the `Button` component from above and removing the primary rules, this is what we're left with – just a normal button:
+
+```JSX
+import styled from 'styled-components';
+
+const Button = styled.button`
+  background: white;
+  color: palevioletred;
+  font-size: 1em;
+  margin: 1em;
+  padding: 0.25em 1em;
+  border: 2px solid palevioletred;
+  border-radius: 3px;
+`;
+
+export default Button;
+```
+
+Let's say someplace else you want to use your button component, but just in this one case you want the color and border color to be `tomato` instead of `palevioletred`. Now you _could_ pass in an interpolated function and change them based on some props, but that's quite a lot of effort for overriding the styles once.
+
+To do this in an easier way you can call `styled` as a function and pass in the previous component. You style that like any other styled-component. It overrides duplicate styles from the initial component and keeps the others around:
+
+```JSX
+// Tomatobutton.js
+
+import React from 'react';
+import styled from 'styled-components';
+
+import Button from './Button';
+
+const TomatoButton = styled(Button)`
+  color: tomato;
+  border-color: tomato;
+`;
+
+export default TomatoButton;
+```
+
+This is what our `TomatoButton` looks like, even though we have only specified the `color` and the `border-color`. Instead of copy and pasting or factoring out the styles into a separate function we've now reused them.
+
+<div align="center">
+  <a href="http://www.webpackbin.com/4y-sCCVrM">
+    <img alt="Screenshot of the above code ran in a browser" src="http://imgur.com/LZZ3h5i.jpg" />
+    <div><em>Live demo</em></div>
+  </a>
+</div>
+
+<br />
+
+> **Note:** You can also pass tag names into the `styled()` call, like so: `styled('div')`. In fact, the styled.tagname helpers are just aliases of `styled('tagname')`!
+
+#### Third-party components
+
+The above also works perfectly for styling third-party components, like a `react-router` `<Link />`!
+
+```JS
+import styled from 'styled-components';
+import { Link } from 'react-router';
+
+const StyledLink = styled(Link)`
+  color: palevioletred;
+  display: block;
+  margin: 0.5em 0;
+  font-family: Helvetica, Arial, sans-serif;
+
+  &:hover {
+    text-decoration: underline;
+  }
+`;
+```
+
+```JSX
+<Link to="/">Standard, unstyled Link</Link>
+<StyledLink to="/">This Link is styled!</StyledLink>
+```
+
+<div align="center">
+  <a href="http://www.webpackbin.com/NJFAAC4SM">
+    <img alt="Screenshot of the above code ran in a browser" src="http://imgur.com/JJw4MdX.jpg" />
+    <div><em>Live demo</em></div>
+  </a>
+</div>
+
+> **Note:** `styled-components` generate a real stylesheet with classes. The class names are then passed to the react component (including third party components) via the `className` prop. For the styles to be applied, third-party components must attach the passed-in `className` prop to a DOM node. See [Using `styled-components` with existing CSS](./docs/existing-css.md) for more information!
+
+### Animations
+
+CSS animations with `@keyframes` aren't scoped to a single component but you still don't want them to be global. This is why we export a `keyframes` helper which will generate a unique name for your keyframes. You can then use that unique name throughout your app.
+
+This way, you get all the benefits of using JavaScript, are avoiding name clashes and get your keyframes like always:
+
+```JS
+import styled, { keyframes } from 'styled-components';
+
+// keyframes returns a unique name based on a hash of the contents of the keyframes
+const rotate360 = keyframes`
+  from {
+    transform: rotate(0deg);
+  }
+
+  to {
+    transform: rotate(360deg);
+  }
+`;
+
+// Here we create a component that will rotate everything we pass in over two seconds
+const Rotate = styled.div`
+  display: inline-block;
+  animation: ${rotate360} 2s linear infinite;
+`;
+```
+
+This will now rotate it's children over and over again, for example our logo:
+
+```JSX
+<Rotate>&lt; 💅 &gt;</Rotate>
+```
+
+<div align="center">
+  <a href="http://www.webpackbin.com/4k4WyJrSM">
+    <img alt="Animated GIF of the above code ran in a browser" height="100px" src="http://imgur.com/I7Sobjv.gif" />
+    <div><em>Live demo</em></div>
+  </a>
+</div>
+
+### React Native
+
+`styled-components` has a ReactNative mode that works _exactly_ the same, except you import the things from `styled-components/native`:
+
+```JSX
+import styled from 'styled-components/native';
+
+const StyledView = styled.View`
+  background-color: papayawhip;
+`;
+
+const StyledText = styled.Text`
+  color: palevioletred;
+`;
+
+class MyReactNativeComponent extends React.Component {
+  render() {
+    <StyledView>
+      <StyledText>Hello World!</StyledText>
+    </StyledView>
+  }
+}
+```
+
+We also support more complex styles (like `transform`), which would normally be an array, and shorthands (e.g. for `margin`) thanks to [`css-to-react-native`](https://github.com/styled-components/css-to-react-native)! Imagine how you'd write the property in ReactNative, guess how you'd transfer it to CSS and you're probably right:
+
+```JS
+const RotatedBox = styled.View`
+  transform: rotate(90deg);
+  text-shadow-offset: 10 5;
+  font-variant: small-caps;
+  margin: 5 7 2;
+`
+```
+
+> You cannot use the `keyframes` and `injectGlobal` helpers since ReactNative doesn't support keyframes or global styles. We will also log a warning if you use media queries or nesting in your CSS.
+
+### Theming
+
+`styled-components` has full theming support by exporting a wrapper `<ThemeProvider>` component. This component provides a theme to all react components underneath itself in the render tree, even multiple levels deep.
+
+To illustrate this, let's create a component that renders its children with a theme. We do so by wrapping all its children in a `ThemeProvider` that has a `theme`:
+
+```JSX
+import { ThemeProvider } from 'styled-components';
+
+const theme = {
+  main: 'mediumseagreen',
+};
+
+// Create a GreenSection component that renders its children wrapped in
+// a ThemeProvider with a green theme
+const GreenSection = (props) => {
+  return (
+    <ThemeProvider theme={theme}>
+      {props.children}
+    </ThemeProvider>
+  );
+}
+```
+
+Second, let's create a styled component that adapts to the theme.
+
+`styled-components` injects the current theme via `props.theme` into the components, which means you can adapt your component to the theme with interpolated functions.
+
+We'll create a `button` that adapts based on the `main` property of the theme:
+
+```JS
+// Button.js
+import styled from 'styled-components';
+
+const Button = styled.button`
+  /* Color the background and border with theme.main */
+  background: ${props => props.theme.main};
+  border: 2px solid ${props => props.theme.main};
+
+  /* …more styles here… */
+`;
+```
+
+Now, when we render the `Button` inside a `GreenSection`, it'll be green!
+
+```JSX
+<GreenSection>
+  {/* Notice how there's no code changes for the button, it just
+      adapts to the theme passed from GreenSection! */}
+  <Button>Green Button!</Button>
+  <div>
+    <div>
+      <div>
+        {/* This works unlimited levels deep within the component
+            tree since we use React's context to pass the theme down. */}
+        <Button>Another green button!</Button>
+      </div>
+    </div>
+  </div>
+</GreenSection>
+```
+
+<div align="center">
+  <a href="http://www.webpackbin.com/EJPNk1SSz">
+    <img alt="Screenshot of the above code ran in a browser" src="http://imgur.com/XfkzxqV.jpg" />
+    <div><em>Live demo</em></div>
+  </a>
+</div>
+
+See the [theming doc](./docs/theming.md) for more detailed instructions.
+
+> **Note:** Please make sure you sanitize user input if you accept custom themes from users! See the [security doc](./docs/security.md) for more information.
+
+#### Defaults
+
+The problem with the above code is that if the button is rendered outside a `ThemeProvider`, it won't have any background or border!
+
+There is an easy remedy though. Since `Button` is just a react component we can assign `defaultProps`, which will be used if no theme is provided:
+
+```JS
+// Button.js
+import styled from 'styled-components';
+
+const Button = styled.button`
+  /* Color the background and border with theme.main */
+  background: ${props => props.theme.main};
+  border: 2px solid ${props => props.theme.main};
+
+  /* …more styles here… */
+`;
+
+// Set the default theme, in our case main will be
+// palevioletred if no other theme is specified
+Button.defaultProps = {
+  theme: {
+    main: 'palevioletred',
+  },
+};
+```
+
+## Docs
+
+See [the documentation](./docs) for more information about using `styled-components`.
+
+### Table of Contents
+
+- [API Reference](./docs/api.md)
+- [Flow Support](./docs/flow-support.md)
+- [Tips and Tricks](./docs/tips-and-tricks.md)
+- [Tagged Template Literals](./docs/tagged-template-literals.md): How do they work?
+- [Using `styled-components` with existing CSS](./docs/existing-css.md): Some edge cases you should be aware of when using `styled-components` with an existing CSS codebase
+- [What CSS we support](./docs/css-we-support.md): What parts & extensions of CSS can you use within a component? *(Spoiler: all of CSS plus even more)*
+- [Theming](./docs/theming.md): How to work with themes
+- [FAQ](./docs/faq.md): Frequently Asked Questions
+
+## Linting
+
+There is (currently experimental) support for `stylelint` – meaning you can take advantage of 150 rules to make sure your `styled-components` CSS is solid!
+
+![Recording of stylelint correctly reporting errors in a styled components' CSS](http://imgur.com/br9zdHb.gif)
+
+See the [`stylelint-processor-styled-components`](https://github.com/styled-components/stylelint-processor-styled-components) repository for installation instructions.
+
+## Syntax highlighting
+
+The one thing you lose when writing CSS in template literals is syntax highlighting. We're working hard on making proper syntax highlighting happening in all editors. We currently have support for Atom, Visual Studio Code, and soon Sublime Text.
+
+This is what it looks like when properly highlighted:
+
+<img alt="Syntax highlighted styled component" src="http://imgur.com/k7h45c3.jpg" height="150px" />
+
+### Atom
+
+[**@gandm**](https://github.com/gandm), the creator of `language-babel`, has added support for `styled-components` in Atom!
+
+To get proper syntax highlighting, all you have to do is install and use the `language-babel` package for your JavaScript files!
+
+### Sublime Text
+
+There is an [open PR](https://github.com/babel/babel-sublime/pull/289) by [@garetmckinley](https://github.com/garetmckinley) to add support for `styled-components` to `babel-sublime`! (if you want the PR to land, feel free to 👍 the initial comment to let the maintainers know there's a need for this!)
+
+As soon as that PR is merged and a new version released, all you'll have to do is install and use `babel-sublime` to highlight your JavaScript files!
+
+### Visual Studio Code
+
+The [vscode-styled-components](https://github.com/styled-components/vscode-styled-components) extension provides syntax highlighting inside your Javascript files. You can install it as usual from the [Marketplace](https://marketplace.visualstudio.com/items?itemName=jpoissonnier.vscode-styled-components).
+
+### VIM / NeoVim
+The [`vim-styled-components`](https://github.com/fleischie/vim-styled-components) plugin gives you syntax highlighting inside your Javascript files. Install it with your usual plugin manager like [Plug](https://github.com/junegunn/vim-plug), [Vundle](https://github.com/VundleVim/Vundle.vim), [Pathogen](https://github.com/tpope/vim-pathogen), etc.
+
+Also if you're looking for an awesome javascript syntax package you can never go wrong with [YAJS.vim](https://github.com/othree/yajs.vim).
+
+### Other Editors
+
+We could use your help to get syntax highlighting support to other editors! If you want to start working on syntax highlighting for your editor, open an issue to let us know.
+
+## Built with `styled-components`
+
+- [`grid-styled`](https://github.com/jxnblk/grid-styled): Responsive grid system ([demo](http://jxnblk.com/grid-styled/))
+- [ARc](https://github.com/diegohaz/arc): Atomic React App boilerplate with styled components ([demo](https://diegohaz.github.io/arc))
+- [`react-aria-tooltip`](https://github.com/egoens/react-aria-tooltip): Simple & accessible ReactJS tooltip component
+- [`react-boilerplate`](https://github.com/mxstbr/react-boilerplate): A highly scalable, offline-first foundation with the best developer experience and a focus on performance and best practices
+- [PostCSS.parts](http://postcss.parts): A searchable catalog of PostCSS plugins
+- [Hedron](http://github.com/jsbros/hedron): A no-frills flex-box grid system.
+- [uiGradients](http://jsbros.github.io/uigradients): Generate beautiful background gradients from the [uigradients.com](http://uigradients.com) database.
+- [react-presents](https://bvaughn.github.io/react-presents/): Highly customizable React slideshow framework with syntaxt highlighting and mobile support.
+- [react-enhanced-form](https://github.com/xeonys/react-enhanced-form) : The best react form component, on earth 🌍. It makes form inputs easy, finally !
+- [react-teleportation](https://github.com/xeonys/react-teleportation) : Teleport your components to the foreground.
+- [reshake](https://github.com/elrumordelaluz/reshake) : CSShake as a React Functional Component ([demo](https://elrumordelaluz.github.io/reshake/))
+- [space-exp](https://github.com/caspg/space-exp) : Brings you each day a stunning picture of our universe, Astronomy Picture of the Day (APOD). Website: [spaceexperience.club](https://spaceexperience.club/)
+- [sachagreif.com](http://sachagreif.com): personal homepage built with [Gatsby](https://github.com/gatsbyjs/gatsby) ([source](https://github.com/SachaG/sg2017)).
+- [`Dirtyredz.com`](https://github.com/dirtyredz/dirtyredz.com): David McClain | Dirtyredz - About me, Latest projects and Contact ([Website](http://dirtyredz.com))
+
+*Built something with `styled-components`? Submit a PR and add it to this list!*
+
+## Further Reading
+
+These are some great articles and talks about related topics in case you're hungry for more:
+
+- [📝 "Scale" FUD and Style Components](https://medium.com/learnreact/scale-fud-and-style-components-c0ce87ec9772#.kzjba8lcg): Using components as low-level styling constructs
+- [🎙 The Future of Reusable CSS](https://www.youtube.com/watch?v=XR6eM_5pAb0): How component libraries should be styled, and why they're not yet
+- [📝 Rendering Khan Academy’s Learn Menu Wherever I Please](https://medium.com/@jdan/rendering-khan-academys-learn-menu-wherever-i-please-4b58d4a9432d#.w9nshye05): Documenting the move from the handlebars + less combo to react and inline styles
+- [🖥 Ryan's random thoughts about inline styles](https://www.youtube.com/watch?v=EkPcGS4TzdQ): Explaining some benefits of using styles in js
+
+## Alternative Installation Methods
+
+If you're not using a module bundler or not using `npm` as your package manager, we also have a global ("UMD") build!
+
+You can use that via the `unpkg` CDN to get `styled-components`, the URL is `https://unpkg.com/styled-components/dist/styled-components.min.js`.
+
+To install `styled-components` with bower you'd do:
+
+```
+bower install styled-components=https://unpkg.com/styled-components/dist/styled-components.min.js
+```
+
+To use it from your HTML, add this at the bottom of your `index.html`, and you'll have access to the global `window.styled` variable:
+
+```HTML
+<script src="https://unpkg.com/styled-components/dist/styled-components.min.js" type="text/javascript"></script>
+```
+
+## License
+
+Licensed under the MIT License, Copyright © 2016 Glen Maddern and Maximilian Stoiber.
+
+See [LICENSE](./LICENSE) for more information.
+
+## Acknowledgements
+
+This project builds on a long line of earlier work by clever folks all around the world. We'd like to thank Charlie Somerville, Nik Graf, Sunil Pai, Michael Chan, Andrey Popp, Jed Watson & Andrey Sitnik who contributed ideas, code or inspiration.
+
+Special thanks to [@okonet](https://github.com/okonet) for the fantastic logo.
+

CHANGELOG.md

 # Change Log
 
-All notable changes to this project will be documented in this file. If a contribution does not have a mention next to it, [@grigory-leonenko](https://github.com/grigory-leonenko) or [@DenisIzmaylov](https://github.com/DenisIzmaylov) did it.
+All notable changes to this project will be documented in this file. If a contribution does not have a mention next to it, [@geelen](https://github.com/geelen) or [@mxstbr](https://github.com/mxstbr) did it.
 
@@ -9,2 +9,8 @@ *The format is based on [Keep a Changelog](http://keepachangelog.com/) and this project adheres to [Semantic Versioning](http://semver.org/).*
 
+- Update stylis to latest version (see [#496](https://github.com/styled-components/styled-components/pull/496)).
+- Added per-component class names (see [#227](https://github.com/styled-components/styled-components/pull/227)).
+- Added the ability to override one component's styles from another.
+- Injecting an empty class for each instance of a component.
+- Added `attrs` constructor for passing extra attributes to the underlying element
+
 ## [Unreleased]
@@ -14,6 +20,162 @@
 
+- Added the alias of `styled.Button` for react native. (see [#322](https://github.com/styled-components/styled-components/pull/322))
 
 ### Changed
 
+- Converted to DangerJS - [@orta](https://github.com/orta)
+- Updated all dependencies to latest semver, thanks [@amilajack](https://github.com/amilajack). (see [#324](https://github.com/styled-components/styled-components/pull/324))
+- Fixed defaultProps theme overriding ThemeProvider theme, thanks to [@diegohaz](https://github.com/diegohaz). (see [#345](https://github.com/styled-components/styled-components/pull/345))
+- Removed custom flowtype supressor in favour of default $FlowFixMe [@relekang](https://github.com/relekang). (see [#335](https://github.com/styled-components/styled-components/pull/335))
+- Updated all demos to link to latest version [@relekang](https://github.com/relekang)
+- Fixed SSR when no `styled-components` are rendered [@kristojorg](https://github.com/kristojorg). (see [#124](https://github.com/styled-components/styled-components/issues/124))
 
-## [v1.0.0]
+## [v1.2.1]
+
+### Changed
+
+- Fixed flowtype errors and added flow check to CI, thanks to [@relekang](https://github.com/relekang). (see [#319](https://github.com/styled-components/styled-components/pull/319))
+
+## [v1.2.0]
+
+### Added
+
+- Added [`withTheme`](docs/api.md#withtheme) higher order component; thanks [@brunolemos](https://twitter.com/brunolemos). (see [#312] (https://github.com/styled-components/styled-components/pull/312))
+- Added support for media queries, pseudo selectors and nesting in styles-as-objects. (see [#280](https://github.com/styled-components/styled-components/pull/280))
+
+### Changed
+
+- Do not pass innerRef to the component, thanks [@mkhazov](https://github.com/mkhazov). (see [#310](https://github.com/styled-components/styled-components/pull/310))
+- Fixed prop changes not updating style on react native; thanks [@brunolemos](https://twitter.com/brunolemos). (see [#311](https://github.com/styled-components/styled-components/pull/311))
+- Extract DOM shorthands, thanks [@philpl](https://github.com/philpl). (see [#172](https://github.com/styled-components/styled-components/pull/172))
+
+## [v1.1.3]
+
+### Changed
+
+- Fixed theme changes in `ThemeProvider`s not re-rendering correctly, thanks [@k15a](https://github.com/k15a). (see [#264](https://github.com/styled-components/styled-components/pull/264))
+- Fixed overriding theme through props, thanks [@k15a](https://github.com/k15a). (see [#295](https://github.com/styled-components/styled-components/pull/295))
+- Removed `lodash` dependency in favor of small utility packages to knock down bundle size by ~0.5kB
+
+## [v1.1.2]
+
+### Added
+
+- Add `// @flow` to files missing them and fix ThemeProvider types, thanks to [@relekang](https://github.com/relekang). (see [#225](https://github.com/styled-components/styled-components/pull/225))
+
+### Changed
+
+- Fixed setting the default theme via `defaultProps` and theme changes not re-rendering components with new styles, thanks to [@michalkvasnicak](https://github.com/michalkvasnicak). (see [#253](https://github.com/styled-components/styled-components/pull/253))
+- Improve ReactNative style generation performance, thanks to [@sheepsteak](https://github.com/sheepsteak). (see [#171](https://github.com/styled-components/styled-components/pull/171))
+
+## [v1.1.1]
+
+### Changed
+
+- Bumped `css-to-react-native` to `v1.0.3` to avoid floating points number bug.
+
+## [v1.1.0]
+
+### Added
+
+- Expose API for Server Side rendering: `styleSheet.reset()` and `styleSheet.getCSS()`, thanks to [@thisguychris](https://github.com/thisguychris), (see [#214](https://github.com/styled-components/styled-components/pull/214)) fixes [#124](https://github.com/styled-components/styled-components/issues/124)
+- Added support for deeply nested styles in ReactNative (e.g. `transform`), thanks [@jacobp100](https://github.com/jacobp100). (see [#139](https://github.com/styled-components/styled-components/pull/139))
+- Added support for camelized style properties in ReactNative (e.g. `fontWeight`), thanks [@jacobp100](https://github.com/jacobp100). (see [#145](https://github.com/styled-components/styled-components/pull/145))
+- Properly expose `flow` typings by adding a `flow:build` step and `flow` support docs, thanks to [@ryyppy](https://github.com/ryyppy). (see [#219](https://github.com/styled-components/styled-components/pull/219))
+
+### Changed
+
+- Converted Object.assign to spread operator, thanks to [@thisguychris](https://github.com/thisguychris). (see [#201](https://github.com/styled-components/styled-components/pull/201))
+- Switched to using [inline-style-prefixer](https://github.com/rofrischmann/inline-style-prefixer) for our autoprefixing needs.
+- Fixed IE10 compatibility, thanks to [@thisguychris](https://github.com/thisguychris). (see [#217](https://github.com/styled-components/styled-components/pull/217))
+
+## [v1.0.11] - 2016-11-14
+
+### Added
+
+- Pass props to interpolated functions in React Native, thanks to [@haikyuu](https://github.com/haikyuu). (see [#190](https://github.com/styled-components/styled-components/pull/190))
+
+### Changed
+
+- Test coverage for `injectGlobal`, thanks to [@b_hough](https://github.com/bhough). (see [#36](https://github.com/styled-components/styled-components/issues/36))
+- Added stricter flow type annotations, thanks to [@relekang](https://github.com/relekang) and [@ryyppy](https://github.com/ryyppy). (see [#148](https://github.com/styled-components/styled-components/pull/148))
+
+## [v1.0.10] - 2016-10-28
+
+### Changed
+
+- Huge performance improvement by injecting styles outside of `render`, thanks to [@JamieDixon](https://github.com/JamieDixon). (see [#137](https://github.com/styled-components/styled-components/pull/137))
+
+## [v1.0.9] - 2016-10-26
+
+### Added
+
+- Added ability to get ref to the inner (DOM) node of the styled component via `innerRef` prop, thanks to [@freiksenet](https://github.com/freiksenet). (see [#122](https://github.com/styled-components/styled-components/pull/122))
+- Section in docs about the new `stylelint` support with [`stylelint-processor-styled-components`](https://github.com/styled-components/stylelint-processor-styled-components)
+
+### Changed
+
+- Fixed `theme` prop in `styledComponent` and `styledNativeComponent` so that it will properly inherit values for `theme` when `defaultProps` are set, thanks to [@bhough](https://github.com/bhough). (see [#136](https://github.com/styled-components/styled-components/pull/136))
+
+## [v1.0.8] - 2016-10-18
+
+### Added
+
+- IE10 support, thanks to [@didierfranc](https://github.com/didierfranc)! (see [#119](https://github.com/styled-components/styled-components/pull/119))
+
+### Changed
+
+- Fixed `<ThemeProvider>` component hot reloading
+
+## [v1.0.7] – 2016-10-18
+
+### Added
+
+- Documentation about integrating with an existing CSS codebase
+- Support for CSS custom variables
+
+### Changed
+
+- Move react from dependencies to `peer–` & `devDependencies`, thanks to [@sheepsteak](https://github.com/sheepsteak)! (see [#93](https://github.com/styled-components/styled-components/pull/93))
+- Fix cyclical dependency deadlock in `.es.js` bundle that forced us to revert v1.0.6, thanks to [@Rich-Harris](https://github.com/Rich-Harris)! (see [#100](https://github.com/styled-components/styled-components/pull/100))
+- Refactored and added to e2e test suite
+
+## [v1.0.6] - 2016-10-16 REVERTED
+
+### Added
+
+- `CHANGELOG.md` for tracking changes between versions
+- Support for Internet Explorer by removing `Symbol` from the transpiled output
+- `.es.js` bundle for Webpack v2 or Rollup users to take advantage of tree shaking, thanks to [@Rich-Harris](https://github.com/Rich-Harris)! (see [#96](https://github.com/styled-components/styled-components/pull/96))
+
+### Changed
+
+- Fixed inheritance of statics (like `defaultProps`) with `styled(StyledComponent)`, thanks to [@diegohaz](https://github.com/diegohaz)! (see [#90](https://github.com/styled-components/styled-components/pull/90))
+- UMD bundle is now built with Rollup, which means a 22% reduction in size and a 60% reducing in parse time, thanks to [@Rich-Harris](https://github.com/Rich-Harris)! (see [#96](https://github.com/styled-components/styled-components/pull/96))
+
+## [v1.0.5] - 2016-10-15
+
+### Changed
+
+- Fixed theming on ReactNative
+
+## [v1.0.4] - 2016-10-15
+
+### Changed
+
+- Fixed compatibility with other react-broadcast-based systems (like `react-router` v4)
+
+[Unreleased]: https://github.com/styled-components/styled-components/compare/v1.2.1...master
+[v1.2.1]: https://github.com/styled-components/styled-components/compare/v1.2.0...v1.2.1
+[v1.2.0]: https://github.com/styled-components/styled-components/compare/v1.1.3...v1.2.0
+[v1.1.3]: https://github.com/styled-components/styled-components/compare/v1.1.2...v1.1.3
+[v1.1.2]: https://github.com/styled-components/styled-components/compare/v1.1.1...v1.1.2
+[v1.1.1]: https://github.com/styled-components/styled-components/compare/v1.1.0...v1.1.1
+[v1.1.0]: https://github.com/styled-components/styled-components/compare/v1.0.11...v1.1.0
+[v1.0.11]: https://github.com/styled-components/styled-components/compare/v1.0.10...v1.0.11
+[v1.0.10]: https://github.com/styled-components/styled-components/compare/v1.0.9...v1.0.10
+[v1.0.9]: https://github.com/styled-components/styled-components/compare/v1.0.8...v1.0.9
+[v1.0.8]: https://github.com/styled-components/styled-components/compare/v1.0.7...v1.0.8
+[v1.0.7]: https://github.com/styled-components/styled-components/compare/v1.0.6...v1.0.7
+[v1.0.6]: https://github.com/styled-components/styled-components/compare/v1.0.5...v1.0.6
+[v1.0.5]: https://github.com/styled-components/styled-components/compare/v1.0.4...v1.0.5
+[v1.0.4]: https://github.com/styled-components/styled-components/compare/v1.0.3...v1.0.4

LICENSE

 MIT License
 
-Copyright (c) 2017 Axept
+Copyright (c) 2016 Glen Maddern and Maximilian Stoiber
 
@@ -5,0 +5,0 @@ Permission is hereby granted, free of charge, to any person obtaining a copy

package.json

 {
   "name": "jss-from-postcss",
-  "version": "0.0.2",
-  "description": "Empower your JSS styles by using PostCSS",
+  "version": "0.1.2",
+  "description": "Empower your JSS styles by using the best bits of PostCSS with all plugins and ecosystem",
   "main": "lib/index.js",
@@ -15,3 +15,3 @@ "scripts": {
     "type": "git",
-    "url": "git+https://github.com/axept/jss-from-css.git#postcss"
+    "url": "git+https://github.com/axept/jss-from-postcss.git"
   },
@@ -27,5 +27,5 @@ "keywords": [
   "bugs": {
-    "url": "https://github.com/axept/jss-from-css/issues"
+    "url": "https://github.com/axept/jss-from-postcss/issues"
   },
-  "homepage": "https://github.com/axept/jss-from-css/tree/postcss",
+  "homepage": "https://github.com/axept/jss-from-postcss",
   "dependencies": {
@@ -32,0 +32,0 @@ "css": "^2.2.1",

README.md

@@ -1,2 +0,2 @@
-# jss-from-postcss
+# jss-from-css
 
@@ -7,8 +7,6 @@ > No black boxes anymore.
 
-Use the best bits of PostCSS to work with your [JSS styles](https://github.com/cssinjs/jss).
+Use the best bits of ES6 and CSS to work with your [JSS styles](https://github.com/cssinjs/jss).
 
-Fast, predictable and fully customizable PostCSS to JSS "on-the-fly" adapter.
+Fast, predictable and fully customizable CSS to JSS "on-the-fly" adapter which support any custom CSS pre-processors including PostCSS, LESS, SCSS, Stylus and so on.
 
-Supports Serer-side Rendering (SSR) and run-time mode.
-
 This package could help you to migrate to JSS in up to 5x faster.
@@ -77,16 +75,7 @@
 
-At the moment [stylis.js](https://github.com/thysultan/stylis.js) and [reworkcss/css](https://github.com/reworkcss/css) are using to prepare and parse your CSS code. The both are small "one module" packages which are great for Client-side Applications.
+At the moment [stylis.js](https://github.com/thysultan/stylis.js) and [CSSJSON](https://github.com/aramk/CSSJSON) are using to prepare and parse your CSS code. But you can create any custom CSS adapter to override `prepare` and/or `parse` functions.
 
-According to [some benchmarks][https://github.com/postcss/benchmark], PostCSS could be faster. If you'd like to get PostCSS as default preprocessor and parser please use:
++ `prepare(CSS: string): string` is using for preparing pure CSS from you PostCSS, LESS, SCSS or Stylus code.
++ `parse(CSS: string): object` is using for converting pure CSS to JSS.
 
-+ [jss-from-postcss](https://www.npmjs.com/package/jss-from-postcss)
-+ [babel-plugin-jss-from-postcss](https://www.npmjs.com/package/babel-plugin-jss-from-postcss)
-
-### Customize
-
-You control everything. You can create any custom CSS adapter to override `prepare` and/or `parse` functions:
-
-+ `prepare(CSS: string): string` is using for preprocessing your PostCSS, LESS, SCSS or Stylus code to plain CSS.
-+ `parse(CSS: string): object` is using for converting plain CSSto JSS.
-
 Feel free to play with it:
@@ -148,1 +137,5 @@
 
+## Additional
+
+Originally based on [styled-component 2.0.0-4](https://github.com/styled-components/styled-components/commit/22531e2431229d1f678b7ff1d575745800b888ed)
+

No alert changes

Improved metrics

Total package byte prevSize

45288

222.4%

Number of package files

11

10%

Worsened metrics

Number of lines in readme file

139

-4.79%

No dependency changes