Skip to content

Commit 6a8a0fb

Browse files
andreypoppandreypopp
committed
doc: add examples for css-extraction, sass and postcss
1 parent 8330402 commit 6a8a0fb

29 files changed

+4584
-0
lines changed

‎examples/webpack/.babelrc renamed to ‎examples/css-extraction/.babelrc

File renamed without changes.

‎examples/css-extraction/bundle/bundle.css

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
.X52OiYfywcpF7u3crcqcA {
2+
3+
padding: 10px;
4+
5+
font-family: Menlo
6+
}
7+
8+
.iJXrh1QPVfO1KYprwspQZ {
9+
10+
font-size: 200%;
11+
12+
font-weight: bold;
13+
14+
color: black
15+
}
16+
17+
.iJXrh1QPVfO1KYprwspQZ:hover,._1bO1SnI_oCI89WzsECLdV1 {
18+
19+
color: red
20+
}
21+
22+
.ndUcOSKzJtORy_Qc8PILK {
23+
24+
color: #444
25+
}

‎examples/css-extraction/bundle/bundle.js

Lines changed: 1064 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎examples/css-extraction/index.html

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
<link rel="stylesheet" href="bundle/bundle.css">
2+
<div id="main">
3+
<script src="bundle/bundle.js"></script>

‎examples/webpack/index.js renamed to ‎examples/css-extraction/index.js

File renamed without changes.

‎examples/css-extraction/package.json

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
{
2+
"name": "react-css-components-example-webpack",
3+
"version": "1.0.0",
4+
"main": "index.js",
5+
"scripts": {
6+
"build": "webpack",
7+
"watch": "webpack -w"
8+
},
9+
"dependencies": {
10+
"babel-loader": "^6.2.4",
11+
"css-loader": "^0.23.1",
12+
"extract-text-webpack-plugin": "^1.0.1",
13+
"react": "^15.0.0",
14+
"react-css-components": "../../",
15+
"react-dom": "^15.0.0",
16+
"style-loader": "^0.13.1",
17+
"webpack": "^1.12.14"
18+
}
19+
}

‎examples/webpack/styles.react.css renamed to ‎examples/css-extraction/styles.react.css

File renamed without changes.

‎examples/css-extraction/webpack.config.js

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
var common = require('../webpack.config');
2+
var ExtractTextPlugin = require('extract-text-webpack-plugin');
3+
4+
module.exports = Object.assign({}, common(__dirname), {
5+
module: {
6+
loaders: [
7+
{
8+
test: /\.react.css$/,
9+
loader: 'react-css-components',
10+
query: {
11+
loadCSS: ExtractTextPlugin.extract(
12+
'style-loader',
13+
'css-loader?modules'
14+
).split('!')
15+
}
16+
},
17+
{
18+
test: /\.js$/,
19+
exclude: /node_modules/,
20+
loader: 'babel-loader',
21+
}
22+
]
23+
},
24+
plugins: [
25+
new ExtractTextPlugin('bundle.css'),
26+
]
27+
});

‎examples/postcss/.babelrc

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"presets": ["prometheusresearch"]
3+
}

‎examples/postcss/bundle/bundle.js

Lines changed: 1082 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎examples/webpack/index.html renamed to ‎examples/postcss/index.html

File renamed without changes.

‎examples/postcss/index.js

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
import React from 'react';
2+
import ReactDOM from 'react-dom';
3+
import {Header, Content, Root} from './styles.react.css';
4+
5+
ReactDOM.render(
6+
<Root>
7+
<Header>Header</Header>
8+
<Content>Content</Content>
9+
</Root>,
10+
document.getElementById('main')
11+
);

‎examples/postcss/package.json

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
{
2+
"name": "react-css-components-example-webpack",
3+
"version": "1.0.0",
4+
"main": "index.js",
5+
"scripts": {
6+
"build": "webpack",
7+
"watch": "webpack -w"
8+
},
9+
"dependencies": {
10+
"autoprefixer": "^6.3.6",
11+
"babel-loader": "^6.2.4",
12+
"css-loader": "^0.23.1",
13+
"postcss-loader": "^0.9.1",
14+
"react": "^15.0.0",
15+
"react-css-components": "../../",
16+
"react-dom": "^15.0.0",
17+
"style-loader": "^0.13.1",
18+
"webpack": "^1.12.14"
19+
}
20+
}

‎examples/postcss/styles.react.css

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
Root {
2+
padding: 10px;
3+
font-family: Menlo;
4+
}
5+
6+
Header {
7+
user-select: none;
8+
font-size: 200%;
9+
font-weight: bold;
10+
color: black;
11+
12+
}
13+
14+
Header:hover {
15+
color: red;
16+
}
17+
18+
Content {
19+
color: #444;
20+
}

‎examples/postcss/webpack.config.js

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
var common = require('../webpack.config');
2+
3+
var autoprefixer = require('autoprefixer');
4+
5+
module.exports = Object.assign({}, common(__dirname), {
6+
module: {
7+
loaders: [
8+
{
9+
test: /\.react.css$/,
10+
loader: 'react-css-components',
11+
query: {
12+
loadCSS: [
13+
'style-loader',
14+
'css-loader?modules',
15+
'postcss-loader'
16+
]
17+
}
18+
},
19+
{
20+
test: /\.js$/,
21+
exclude: /node_modules/,
22+
loader: 'babel-loader',
23+
}
24+
]
25+
},
26+
postcss: function () {
27+
return [autoprefixer];
28+
}
29+
});

‎examples/sass/.babelrc

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"presets": ["prometheusresearch"]
3+
}

‎examples/sass/bundle/bundle.js

Lines changed: 1082 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎examples/sass/index.html

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
<div id="main">
2+
<script src="bundle/bundle.js"></script>

‎examples/sass/index.js

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
import React from 'react';
2+
import ReactDOM from 'react-dom';
3+
import {Header, Content, Root} from './styles.react.scss';
4+
5+
ReactDOM.render(
6+
<Root>
7+
<Header>Header</Header>
8+
<Content>Content</Content>
9+
</Root>,
10+
document.getElementById('main')
11+
);

‎examples/sass/package.json

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
{
2+
"name": "react-css-components-example-webpack",
3+
"version": "1.0.0",
4+
"main": "index.js",
5+
"scripts": {
6+
"build": "webpack",
7+
"watch": "webpack -w"
8+
},
9+
"dependencies": {
10+
"babel-loader": "^6.2.4",
11+
"css-loader": "^0.23.1",
12+
"node-sass": "^3.8.0",
13+
"react": "^15.0.0",
14+
"react-css-components": "../../",
15+
"react-dom": "^15.0.0",
16+
"sass-loader": "^3.2.0",
17+
"style-loader": "^0.13.1",
18+
"webpack": "^1.12.14"
19+
}
20+
}

‎examples/sass/styles.react.scss

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
$padding: 10px;
2+
$color: red;
3+
4+
Root {
5+
padding: $padding;
6+
font-family: Menlo;
7+
}
8+
9+
Header {
10+
font-size: 200%;
11+
font-weight: bold;
12+
color: black;
13+
14+
}
15+
16+
Header:hover {
17+
color: $color;
18+
}
19+
20+
Content {
21+
color: $color;
22+
}

‎examples/sass/webpack.config.js

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
var common = require('../webpack.config');
2+
3+
module.exports = Object.assign({}, common(__dirname), {
4+
module: {
5+
loaders: [
6+
{
7+
test: /\.react.scss/,
8+
loader: 'react-css-components',
9+
query: {
10+
loadCSS: [
11+
'style-loader',
12+
'css-loader?modules',
13+
'sass-loader',
14+
]
15+
}
16+
},
17+
{
18+
test: /\.js$/,
19+
exclude: /node_modules/,
20+
loader: 'babel-loader',
21+
}
22+
]
23+
}
24+
});

‎examples/simple/.babelrc

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"presets": ["prometheusresearch"]
3+
}

‎examples/simple/bundle/bundle.js

Lines changed: 1082 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎examples/simple/index.html

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
<div id="main">
2+
<script src="bundle/bundle.js"></script>

‎examples/simple/index.js

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
import React from 'react';
2+
import ReactDOM from 'react-dom';
3+
import {Header, Content, Root} from './styles.react.css';
4+
5+
ReactDOM.render(
6+
<Root>
7+
<Header>Header</Header>
8+
<Content>Content</Content>
9+
</Root>,
10+
document.getElementById('main')
11+
);

‎examples/webpack/package.json renamed to ‎examples/simple/package.json

File renamed without changes.

‎examples/simple/styles.react.css

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
Root {
2+
padding: 10px;
3+
font-family: Menlo;
4+
}
5+
6+
Header {
7+
font-size: 200%;
8+
font-weight: bold;
9+
color: black;
10+
11+
}
12+
13+
Header:hover {
14+
color: red;
15+
}
16+
17+
Content {
18+
color: #444;
19+
}

‎examples/webpack/webpack.config.js renamed to ‎examples/simple/webpack.config.js

File renamed without changes.

0 commit comments

Comments
 (0)