Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/andreypopp/react-css-components
Define React presentational components with CSS
https://github.com/andreypopp/react-css-components
css-in-js css-modules react webpack
Last synced: 2 days ago
JSON representation
Define React presentational components with CSS
- Host: GitHub
- URL: https://github.com/andreypopp/react-css-components
- Owner: andreypopp
- Created: 2016-04-09T20:27:38.000Z (almost 9 years ago)
- Default Branch: master
- Last Pushed: 2017-03-16T10:36:21.000Z (almost 8 years ago)
- Last Synced: 2025-01-03T19:12:25.835Z (9 days ago)
- Topics: css-in-js, css-modules, react, webpack
- Language: JavaScript
- Homepage:
- Size: 507 KB
- Stars: 676
- Watchers: 9
- Forks: 14
- Open Issues: 6
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
Awesome Lists containing this project
- awesome-react-components-all - react-css-components - Define React presentational components with CSS. (Uncategorized / Uncategorized)
- awesome-list - react-css-components - Define React presentational components with CSS. (Code Design / CSS / Style)
README
# React CSS components
[](https://gitter.im/andreypopp/react-css-components)
[](https://travis-ci.org/andreypopp/react-css-components)
[](https://www.npmjs.com/package/react-css-components)
**Table of Contents**
- [Motivation](#motivation)
- [Installation & Usage](#installation-&-usage)
- [Base components](#base-components)
- [DOM components](#dom-components)
- [Composite components](#composite-components)
- [Variants](#variants)
- [Named variants](#named-variants)
- [JavaScript expressions](#javascript-expressions)
- [Customizing CSS loading](#customizing-css-loading)
- [CSS extraction](#css-extraction)
- [Using with SASS/SCSS/LESS/Stylus/...](#using-with-sassscsslessstylus)
- [Using with PostCSS (including autoprefixer)](#using-with-postcss-including-autoprefixer)
## Motivation
Define React presentational components with CSS (or even SASS or Less if you
like).
The implementation is based on [CSS modules][]. In fact React CSS Components is
just a thin API on top of CSS modules.
**NOTE:** The current implementation is based on Webpack but everything is ready
to be ported onto other build systems (generic API is here just not yet
documented). Raise an issue or better submit a PR if you have some ideas.
## Installation & Usage
Install from npm:
% npm install react-css-components style-loader css-loader
Configure in `webpack.config.js`:
```js
module.exports = {
...
module: {
loaders: [
{
test: /\.react.css$/,
loader: 'react-css-components',
}
]
}
...
}
```
Now you can author React components in `Styles.react.css`:
```css
Label {
color: red;
}
Label:hover {
color: white;
}
```
And consume them like regular React components:
```js
import {Label} from './styles.react.css'
// =>
...
```
## Base components
### DOM components
By default React CSS Components produces styled `
` components. You can
change that by defining `base:` property:
```css
FancyButton {
base: button;
color: red;
}
```
Now `` renders into ``:
```js
import {FancyButton} from './styles.react.css'
// => ...
```
### Composite components
In fact any React component which accepts `className` props can be used as a
base. That means that React CSS Components can be used as theming tool for any
UI library.
Example:
```css
DangerButton {
base: react-ui-library/components/Button;
color: red;
}
```
## Variants
Variants is a mechanism which allows defining component styling variants.
### Named variants
You can define additional styling variants for your components:
```css
Label {
color: red;
}
Label:emphasis {
font-weight: bold;
}
```
They are compiled as CSS classes which then can be controlled from JS via
`variant` prop:
```js
// sets both classes with `color` and `font-weight`
```
### JavaScript expressions
You can define variants which are conditionally applied if JS expression against
props evaluates to a truthy value.
Example:
```css
Label {
color: red;
}
Label:prop(mode == "emphasis") {
font-weight: bold;
}
```
Note that any free variable references a member of `props`, thus in JS `mode`
becomes `props.mode` in the example above.
They are compiled as CSS classes as well. JS expressions within `prop(..)` are
used to determine if corresponding CSS classes should be applied to DOM:
```js
// sets both classes with `color` and `font-weight`
```
## Customizing CSS loading
By default React CSS components loads CSS using `style-loader!css-loader` loader
chain. That could be configured differently using `loadCSS` loader parameter.
This could be used to enable features such as *CSS extraction*, processing
stylesheets with *PostCSS/Autoprefixer* or even authoring stylesheets with
*SASS* or *LESS*.
### CSS extraction
See the [complete example](./examples/css-extraction/webpack.config.js) which
configures
[`extract-text-webpack-plugin`](https://github.com/webpack/extract-text-webpack-plugin)
to extract stylesheets to a separate chunk.
### Using with SASS/SCSS/LESS/Stylus/...
See the [complete example](./examples/sass/webpack.config.js) which
uses SASS/SCSS to create React components.
### Using with PostCSS (including autoprefixer)
See the [complete example](./examples/postcss//webpack.config.js) which
configures PostCSS with Autoprefixer to automatically add vendor prefixes to
stylesheets.
[CSS modules]: https://github.com/css-modules/css-modules