Permalink
Browse files

Merge branch 'v2' into v2-jest

Conflicts:
	src/test/basic.test.js
  • Loading branch information...
geelen committed Apr 7, 2017
2 parents d03d4dd + b38a9be commit dae4585d2742d20c9c148d06639aaa5fa610e11e
Showing with 1,918 additions and 1,283 deletions.
  1. +0 βˆ’9 .npmignore
  2. +8 βˆ’0 CHANGELOG.md
  3. +74 βˆ’0 CODE_OF_CONDUCT.md
  4. +38 βˆ’0 CONTRIBUTING.md
  5. +49 βˆ’42 README.md
  6. +2 βˆ’0 no-parser.js
  7. +14 βˆ’4 package.json
  8. +18 βˆ’16 src/constructors/constructWithOptions.js
  9. +7 βˆ’7 src/constructors/injectGlobal.js
  10. +2 βˆ’4 src/constructors/keyframes.js
  11. +1 βˆ’2 src/constructors/styled.js
  12. +7 βˆ’1 src/constructors/test/injectGlobal.test.js
  13. +5 βˆ’1 src/constructors/test/keyframes.test.js
  14. +16 βˆ’5 src/index.js
  15. +25 βˆ’12 src/models/ComponentStyle.js
  16. +19 βˆ’17 src/models/GlobalStyle.js
  17. +3 βˆ’0 src/models/StyleSheet.js
  18. +169 βˆ’99 src/models/StyledComponent.js
  19. +26 βˆ’23 src/models/StyledNativeComponent.js
  20. +8 βˆ’2 src/models/test/StyleSheet.test.js
  21. +2 βˆ’1 src/native/index.js
  22. +5 βˆ’0 src/no-parser/css.js
  23. +92 βˆ’0 src/no-parser/flatten.js
  24. +40 βˆ’0 src/no-parser/index.js
  25. +22 βˆ’0 src/no-parser/stringifyRules.js
  26. +25 βˆ’0 src/no-parser/test/basic.test.js
  27. +131 βˆ’0 src/no-parser/test/flatten.test.js
  28. +33 βˆ’0 src/no-parser/test/keyframes.test.js
  29. +20 βˆ’0 src/test/attrs.test.js
  30. +71 βˆ’12 src/test/basic.test.js
  31. +1 βˆ’10 src/test/css.test.js
  32. +18 βˆ’11 src/test/extending.test.js
  33. +29 βˆ’0 src/test/theme.test.js
  34. +26 βˆ’2 src/test/utils.js
  35. +57 βˆ’0 src/test/warnTooManyClasses.test.js
  36. +16 βˆ’1 src/types.js
  37. +29 βˆ’0 src/utils/createWarnTooManyClasses.js
  38. +13 βˆ’4 src/utils/generateAlphabeticName.js
  39. +9 βˆ’0 src/utils/isStyledComponent.js
  40. +28 βˆ’0 src/utils/stringifyRules.js
  41. +0 βˆ’3 src/utils/test/flatten.test.js
  42. +760 βˆ’995 yarn.lock
View

This file was deleted.

Oops, something went wrong.
View
@@ -6,11 +6,19 @@ All notable changes to this project will be documented in this file. If a contri
## [Upcoming Major Release]
- Update css-to-react-native - you'll now need to add units to your React Native styles (see [css-to-react-native](https://github.com/styled-components/css-to-react-native/issues/20), [code mod](https://github.com/styled-components/styled-components-native-code-mod))
- 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
- Added warnings for components generating a lot of classes, thanks to [@vdanchenkov](https://github.com/vdanchenkov). (see [#268](https://github.com/styled-components/styled-components/pull/268))
- Standardised `styled(Comp)` to work the same in all cases, rather than a special extension case where `Comp` is another Styled Component. `Comp.extend` now covers that case. (see [#518](https://github.com/styled-components/styled-components/pull/518)).
- Added a separate `no-parser` entrypoint for preprocessed CSS, which doesn't depend on stylis. The preprocessing is part of our babel plugin. (see [babel-plugin-styled-components/#26](https://github.com/styled-components/babel-plugin-styled-components/pull/26))
- Fix defaultProps used instead of ThemeProvider on first render [@k15a](https://github.com/k15a), restored.
- Refactor StyledComponent for performance optimization.
- Prevent leakage of the `innerRef` prop to wrapped child; under the hood it is converted into a normal React `ref`. (see [#592](https://github.com/styled-components/styled-components/issues/592))
- Pass `innerRef` through to wrapped Styled Components, so that it refers to the actual DOM node. (see [#629](https://github.com/styled-components/styled-components/issues/629))
## [Unreleased]
View
@@ -0,0 +1,74 @@
# Contributor Covenant Code of Conduct
## Our Pledge
In the interest of fostering an open and welcoming environment, we as
contributors and maintainers pledge to making participation in our project and
our community a harassment-free experience for everyone, regardless of age, body
size, disability, ethnicity, gender identity and expression, level of experience,
nationality, personal appearance, race, religion, or sexual identity and
orientation.
## Our Standards
Examples of behavior that contributes to creating a positive environment
include:
* Using welcoming and inclusive language
* Being respectful of differing viewpoints and experiences
* Gracefully accepting constructive criticism
* Focusing on what is best for the community
* Showing empathy towards other community members
Examples of unacceptable behavior by participants include:
* The use of sexualized language or imagery and unwelcome sexual attention or
advances
* Trolling, insulting/derogatory comments, and personal or political attacks
* Public or private harassment
* Publishing others' private information, such as a physical or electronic
address, without explicit permission
* Other conduct which could reasonably be considered inappropriate in a
professional setting
## Our Responsibilities
Project maintainers are responsible for clarifying the standards of acceptable
behavior and are expected to take appropriate and fair corrective action in
response to any instances of unacceptable behavior.
Project maintainers have the right and responsibility to remove, edit, or
reject comments, commits, code, wiki edits, issues, and other contributions
that are not aligned to this Code of Conduct, or to ban temporarily or
permanently any contributor for other behaviors that they deem inappropriate,
threatening, offensive, or harmful.
## Scope
This Code of Conduct applies both within project spaces and in public spaces
when an individual is representing the project or its community. Examples of
representing a project or community include using an official project e-mail
address, posting via an official social media account, or acting as an appointed
representative at an online or offline event. Representation of a project may be
further defined and clarified by project maintainers.
## Enforcement
Instances of abusive, harassing, or otherwise unacceptable behavior may be
reported by contacting the project team at [INSERT EMAIL ADDRESS]. All
complaints will be reviewed and investigated and will result in a response that
is deemed necessary and appropriate to the circumstances. The project team is
obligated to maintain confidentiality with regard to the reporter of an incident.
Further details of specific enforcement policies may be posted separately.
Project maintainers who do not follow or enforce the Code of Conduct in good
faith may face temporary or permanent repercussions as determined by other
members of the project's leadership.
## Attribution
This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4,
available at [http://contributor-covenant.org/version/1/4][version]
[homepage]: http://contributor-covenant.org
[version]: http://contributor-covenant.org/version/1/4/
View
@@ -0,0 +1,38 @@
Thanks for giving this a read! We're always open to your contributions to styled-components.
This document will get you started on how to contribute and things you should know.
So please give it a thorough read.
Please also give the code of conduct a read.
## How do I contribute code?
1. Find some issue you're interested in, or a feature that you'd like to tackle.
Also make sure that no one else is already working on it. We don't want you to be
disappointed.
2. Fork, then clone: `git clone httpsL://github.com/YOUR_USERNAME/styled-components.git`
3. Create a branch with a meaningful name for the issue: `git checkout -b fix-something`
4. Make your changes and commit: `git add` and `git commit`
5. Make sure that the tests still pass: `npm test` and `npm run flow` (for the type checks)
6. Push your branch: `git push -u origin your-branch-name`
7. Submit a pull request to the upstream styled-components repository.
8. Choose a descriptive title and describe your changes briefly.
9. Wait for a maintainer to review your PR, make changes if it's being recommended, and get it merged.
10. Perform a celebratory dance! :dancer:
## How do I set up the project?
Run `npm install` and edit code in the `src/` folder. It's luckily very simple! :wink:
When you commit our pre-commit hook will run, which executes `lint-staged`. It will run
the linter automatically and warn you, if the code you've written doesn't comply with our
code style.
View
@@ -9,9 +9,16 @@ Visual primitives for the component age. Use the best bits of ES6 and CSS to sty
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)
[![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)
![gzip size](http://img.badgesize.io/https://unpkg.com/styled-components@next/dist/styled-components.min.js?compression=gzip&label=gzip%20size)
![size](http://img.badgesize.io/https://unpkg.com/styled-components@next/dist/styled-components.min.js?label=size)
![module formats: umd, cjs, esm](https://img.shields.io/badge/module%20formats-umd%2C%20cjs%2C%20esm-green.svg)
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
@@ -139,7 +146,43 @@ export default Button;
</a>
</div>
### Overriding component styles
#### Styling Components instead of Elements
`styled` also works perfectly for styling your own or 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!
>
> 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')`!
### Extending styles
Taking the `Button` component from above and removing the primary rules, this is what we're left with – just a normal button:
@@ -161,7 +204,7 @@ 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:
To do this in an easier way you can call `extend` on the component to generate another. You style it like any other styled-component. It overrides duplicate styles from the initial component and keeps the others around:
```JSX
// Tomatobutton.js
@@ -171,7 +214,7 @@ import styled from 'styled-components';
import Button from './Button';
const TomatoButton = styled(Button)`
const TomatoButton = Button.extend`
color: tomato;
border-color: tomato;
`;
@@ -190,42 +233,6 @@ This is what our `TomatoButton` looks like, even though we have only specified t
<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.
@@ -295,9 +302,9 @@ We also support more complex styles (like `transform`), which would normally be
```JS
const RotatedBox = styled.View`
transform: rotate(90deg);
text-shadow-offset: 10 5;
text-shadow-offset: 10px 5px;
font-variant: small-caps;
margin: 5 7 2;
margin: 5px 7px 2px;
`
```
View
@@ -0,0 +1,2 @@
/* eslint-disable */
module.exports = require('./lib/no-parser')
View
@@ -1,6 +1,6 @@
{
"name": "styled-components",
"version": "2.0.0-4",
"version": "2.0.0-14",
"description": "Visual primitives for the component age. Use the best bits of ES6 and CSS to style your apps without stress πŸ’…",
"main": "lib/index.js",
"jsnext:main": "dist/styled-components.es.js",
@@ -10,7 +10,6 @@
"prebuild:lib": "rm -rf lib/*",
"build:lib": "babel --out-dir lib src",
"build:flow": "flow-copy-source -v -i '{**/test/*.js,**/*.test.js}' src lib",
"prebuild:umd": "rm -rf dist/*",
"prebuild:dist": "rm -rf dist/*",
"build:dist": "rollup -c && rollup -c --environment PRODUCTION",
"build:watch": "npm run build:lib -- --watch",
@@ -27,6 +26,17 @@
"type": "git",
"url": "git+https://github.com/styled-components/styled-components.git"
},
"files": [
"native.js",
"no-parser.js",
"CONTRIBUTING.md",
"CODE_OF_CONDUCT.md",
"dist",
"docs",
"flow-typed",
"lib",
"src"
],
"keywords": [
"react",
"css",
@@ -40,13 +50,13 @@
"homepage": "https://styled-components.com",
"dependencies": {
"buffer": "^5.0.3",
"css-to-react-native": "^1.0.6",
"css-to-react-native": "2.0.1",
"fbjs": "^0.8.9",
"glamor": "^2.20.22",
"inline-style-prefixer": "^2.0.5",
"is-function": "^1.0.1",
"is-plain-object": "^2.0.1",
"stylis": "^1.1.3",
"stylis": "^2.0.0",
"supports-color": "^3.2.3"
},
"devDependencies": {
@@ -1,22 +1,24 @@
// @flow
import css from './css'
import type { Interpolation, Target } from '../types'
const constructWithOptions = (componentConstructor: Function,
tag: Target,
options: Object = {}) => {
/* This is callable directly as a template function */
const templateFunction =
(strings: Array<string>, ...interpolations: Array<Interpolation>) =>
componentConstructor(tag, options, css(strings, ...interpolations))
export default (css: Function) => {
const constructWithOptions = (componentConstructor: Function,
tag: Target,
options: Object = {}) => {
/* This is callable directly as a template function */
const templateFunction =
(strings: Array<string>, ...interpolations: Array<Interpolation>) =>
componentConstructor(tag, options, css(strings, ...interpolations), templateFunction)
/* If config methods are called, wrap up a new template function and merge options */
templateFunction.withConfig = config =>
constructWithOptions(componentConstructor, tag, { ...options, ...config })
templateFunction.attrs = attrs =>
constructWithOptions(componentConstructor, tag, { ...options, attrs })
/* If config methods are called, wrap up a new template function and merge options */
templateFunction.withConfig = config =>
constructWithOptions(componentConstructor, tag, { ...options, ...config })
templateFunction.attrs = attrs =>
constructWithOptions(componentConstructor, tag, { ...options,
attrs: { ...(options.attrs || {}), ...attrs } })
return templateFunction
}
return templateFunction
}
export default constructWithOptions
return constructWithOptions
}
@@ -1,11 +1,11 @@
// @flow
import css from './css'
import GlobalStyle from '../models/GlobalStyle'
import type { Interpolation } from '../types'
const injectGlobal = (strings: Array<string>, ...interpolations: Array<Interpolation>) => {
const globalStyle = new GlobalStyle(css(strings, ...interpolations))
globalStyle.generateAndInject()
}
export default (GlobalStyle: Function, css: Function) => {
const injectGlobal = (strings: Array<string>, ...interpolations: Array<Interpolation>) => {
const globalStyle = new GlobalStyle(css(strings, ...interpolations))
globalStyle.generateAndInject()
}
export default injectGlobal
return injectGlobal
}
Oops, something went wrong.

0 comments on commit dae4585

Please sign in to comment.