Skip to content

Commit 6ce4f40

Browse files
committed
using react components copied from webpack-demo
1 parent a27073c commit 6ce4f40

30 files changed

+426
-127
lines changed

README.md

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,8 @@
44

55
A working demo of [CSS Modules](https://github.com/css-modules/css-modules), using [css-modulesify](https://github.com/css-modules/css-modulesify).
66

7+
Brazenly plagiarized from <https://github.com/css-modules/webpack-demo>
8+
79
**Please note that this is still highly experimental.**
810

911
## Run the example
@@ -13,6 +15,10 @@ $ npm install
1315
$ npm start
1416
```
1517

18+
## Acknowledgements
19+
20+
Special thanks to [@markdalgleish](https://github.com/markdalgleish) for <https://github.com/css-modules/webpack-demo>
21+
1622
## License
1723

1824
MIT

package.json

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -6,11 +6,11 @@
66
"scripts": {
77
"test": "npm run build",
88
"clean": "rm -rf dist && mkdir dist",
9-
"browserify": "browserify -p [css-modulesify -o dist/main.css] -o dist/index.js src/index.js",
10-
"watchify": "watchify -v -p [css-modulesify -o dist/main.css] -o dist/index.js src/index.js",
11-
"copy": "cp src/index.html dist/index.html",
9+
"browserify": "browserify -t babelify -t brfs -p [css-modulesify -o dist/main.css] -o dist/index.js src/index.js",
10+
"watchify": "watchify -v -t babelify -t brfs -p [css-modulesify -o dist/main.css] -o dist/index.js src/index.js",
11+
"copy": "cp src/index.html dist/index.html && cp src/components/0-Logo/logo.svg dist/logo.svg",
1212
"build": "npm run clean && npm run copy && npm run browserify",
13-
"budo": "budo src/index.js:index.js --dir=dist -- -p [css-modulesify -o dist/main.css] | opnr | garnish",
13+
"budo": "budo src/index.js:index.js --dir=dist -- -t babelify -t brfs -p [css-modulesify -o dist/main.css] | opnr | garnish",
1414
"start": "npm run clean && npm run copy && npm run budo",
1515
"deploy": "npm run build && gh-pages -d dist -m \"Updates --skip-ci\""
1616
},
@@ -25,13 +25,16 @@
2525
},
2626
"homepage": "https://github.com/css-modules/browserify-demo",
2727
"devDependencies": {
28+
"babelify": "^6.1.2",
29+
"brfs": "^1.4.0",
2830
"browserify": "^10.2.3",
2931
"budo": "^4.0.0",
3032
"css-modulesify": "^0.2.4",
3133
"garnish": "^2.1.3",
3234
"gh-pages": "git://github.com/markdalgleish/gh-pages#cli-message",
3335
"hyperscript": "^1.4.6",
3436
"opnr": "^1.0.4",
37+
"react": "^0.13.3",
3538
"watchify": "^3.2.2"
3639
}
3740
}

src/components/0-Logo/Logo.css

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
.logo {
2+
/* todo: fix rewriteUrl error and use url(./logo.svg) */
3+
background-size: 200px 200px;
4+
width: 200px;
5+
height: 200px;
6+
}

src/components/0-Logo/Logo.js

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
import styles from './Logo.css';
2+
3+
import React, { Component } from 'react';
4+
5+
export default class Logo extends Component {
6+
7+
// todo: fix rewriteUrl error and use url(./logo.svg) in Logo.css
8+
render() {
9+
return <div className={styles.logo} style={{'background-image': 'url("./logo.svg")'}} />;
10+
}
11+
12+
};

src/components/0-Logo/logo.svg

Lines changed: 28 additions & 0 deletions
Loading
Lines changed: 13 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,15 @@
1-
var styles = require('./ScopedSelectors.css');
1+
import styles from './ScopedSelectors.css';
22

3-
var h = require('hyperscript');
3+
import React, { Component } from 'react';
44

5-
module.exports = h('div', { className: styles.root },
6-
h('p', { className: styles.text }, 'Scoped Selectors')
7-
);
5+
export default class ScopedSelectors extends Component {
6+
7+
render() {
8+
return (
9+
<div className={ styles.root }>
10+
<p className={ styles.text }>Scoped Selectors</p>
11+
</div>
12+
);
13+
}
14+
15+
};
Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
import ScopedSelectors from './ScopedSelectors';
2+
3+
import React, { Component } from 'react';
4+
5+
import Snippet from '../shared/Snippet/Snippet';
6+
7+
const fs = require('fs');
8+
const js = fs.readFileSync(__dirname + '/ScopedSelectors.js', 'utf8');
9+
const css = fs.readFileSync(__dirname + '/ScopedSelectors.css', 'utf8');
10+
11+
export default class ScopedSelectorsDemo extends Component {
12+
13+
render() {
14+
const files = [
15+
{ name: 'ScopedSelectors.js', source: js },
16+
{ name: 'ScopedSelectors.css', source: css }
17+
];
18+
19+
return (
20+
<Snippet files={files}>
21+
<ScopedSelectors />
22+
</Snippet>
23+
);
24+
}
25+
26+
};
Lines changed: 13 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,15 @@
1-
var styles = require('./GlobalSelectors.css');
1+
import styles from './GlobalSelectors.css';
22

3-
var h = require('hyperscript');
3+
import React, { Component } from 'react';
44

5-
module.exports = h('div', { className: styles.root },
6-
h('p', 'Global Selectors')
7-
);
5+
export default class GlobalSelectors extends Component {
6+
7+
render() {
8+
return (
9+
<div className={ styles.root }>
10+
<p>Global Selectors</p>
11+
</div>
12+
);
13+
}
14+
15+
};
Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
import GlobalSelectors from './GlobalSelectors';
2+
3+
import React, { Component } from 'react';
4+
5+
import Snippet from '../shared/Snippet/Snippet';
6+
7+
const fs = require('fs');
8+
const js = fs.readFileSync(__dirname + '/GlobalSelectors.js', 'utf8');
9+
const css = fs.readFileSync(__dirname + '/GlobalSelectors.css', 'utf8');
10+
11+
export default class GlobalSelectorsDemo extends Component {
12+
13+
render() {
14+
const files = [
15+
{ name: 'GlobalSelectors.js', source: js },
16+
{ name: 'GlobalSelectors.css', source: css }
17+
];
18+
19+
return (
20+
<Snippet files={files}>
21+
<GlobalSelectors />
22+
</Snippet>
23+
);
24+
}
25+
26+
};
Lines changed: 16 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,18 @@
1-
var h = require('hyperscript');
1+
import React, { Component } from 'react';
22

3-
var StyleVariantA = require('./StyleVariantA/StyleVariantA');
4-
var StyleVariantB = require('./StyleVariantB/StyleVariantB');
3+
import StyleVariantA from './StyleVariantA/StyleVariantA';
4+
import StyleVariantB from './StyleVariantB/StyleVariantB';
55

6-
module.exports = h('div', [
7-
StyleVariantA,
8-
h('br'),
9-
StyleVariantB
10-
]);
6+
export default class ClassComposition extends Component {
7+
8+
render() {
9+
return (
10+
<div>
11+
<StyleVariantA />
12+
<br />
13+
<StyleVariantB />
14+
</div>
15+
);
16+
}
17+
18+
};
Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
import ClassComposition from './ClassComposition';
2+
3+
import React, { Component } from 'react';
4+
5+
import Snippet from '../shared/Snippet/Snippet';
6+
7+
const fs = require('fs');
8+
const js = fs.readFileSync(__dirname + '/StyleVariantA/StyleVariantA.js', 'utf8');
9+
const css = fs.readFileSync(__dirname + '/StyleVariantA/StyleVariantA.css', 'utf8');
10+
const layoutCss = fs.readFileSync(__dirname + '/../shared/styles/layout.css', 'utf8');
11+
const typographyCss = fs.readFileSync(__dirname + '/../shared/styles/typography.css', 'utf8');
12+
13+
export default class ClassCompositionDemo extends Component {
14+
15+
render() {
16+
const files = [
17+
{ name: 'StyleVariantA.js', source: js },
18+
{ name: 'StyleVariantA.css', source: css },
19+
{ name: 'shared/styles/layout.css', source: layoutCss },
20+
{ name: 'shared/styles/typography.css', source: typographyCss }
21+
];
22+
23+
return (
24+
<Snippet files={files}>
25+
<ClassComposition />
26+
</Snippet>
27+
);
28+
}
29+
30+
};
Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
.root {
2-
composes: box from "../../../shared/styles/layout.css";
2+
composes: box from "../../shared/styles/layout.css";
33
border-color: red;
44
}
55

66
.text {
7-
composes: heading from "../../../shared/styles/typography.css";
7+
composes: heading from "../../shared/styles/typography.css";
88
color: red;
99
}
Lines changed: 13 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,15 @@
1-
var styles = require('./StyleVariantA.css');
1+
import styles from './StyleVariantA.css';
22

3-
var h = require('hyperscript');
3+
import React, { Component } from 'react';
44

5-
module.exports = h('div', { className: styles.root },
6-
h('p', { className: styles.text }, 'Style Variant A')
7-
);
5+
export default class StyleVariantA extends Component {
6+
7+
render() {
8+
return (
9+
<div className={styles.root}>
10+
<p className={styles.text}>Style Variant A</p>
11+
</div>
12+
);
13+
}
14+
15+
};
Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
.root {
2-
composes: box from "../../../shared/styles/layout.css";
2+
composes: box from "../../shared/styles/layout.css";
33
border-color: blue;
44
}
55

66
.text {
7-
composes: heading from "../../../shared/styles/typography.css";
7+
composes: heading from "../../shared/styles/typography.css";
88
color: blue;
99
}
Lines changed: 13 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,15 @@
1-
var styles = require('./StyleVariantB.css');
1+
import styles from './StyleVariantB.css';
22

3-
var h = require('hyperscript');
3+
import React, { Component } from 'react';
44

5-
module.exports = h('div', { className: styles.root },
6-
h('p', { className: styles.text }, 'Style Variant B')
7-
);
5+
export default class StyleVariantB extends Component {
6+
7+
render() {
8+
return (
9+
<div className={styles.root}>
10+
<p className={styles.text}>Style Variant B</p>
11+
</div>
12+
);
13+
}
14+
15+
};
Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
.root {
2-
composes: box from "../../shared/styles/layout.css";
2+
composes: box from "../shared/styles/layout.css";
33
border-style: dotted;
44
border-color: green;
55
}
66

77
.text {
8-
composes: heading from "../../shared/styles/typography.css";
8+
composes: heading from "../shared/styles/typography.css";
99
font-weight: 200;
1010
color: green;
1111
}
Lines changed: 13 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,15 @@
1-
var styles = require('./CompositionOverrides.css');
1+
import styles from './CompositionOverrides.css';
22

3-
var h = require('hyperscript');
3+
import React, { Component } from 'react';
44

5-
module.exports = h('div', { className: styles.root },
6-
h('p', { className: styles.text }, 'Class Composition with Overrides')
7-
);
5+
export default class CompositionOverrides extends Component {
6+
7+
render() {
8+
return (
9+
<div className={styles.root}>
10+
<p className={styles.text}>Class Composition with Overrides</p>
11+
</div>
12+
);
13+
}
14+
15+
};
Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
import CompositionOverrides from './CompositionOverrides';
2+
3+
import React, { Component } from 'react';
4+
5+
import Snippet from '../shared/Snippet/Snippet';
6+
7+
const fs = require('fs');
8+
const js = fs.readFileSync(__dirname + '/CompositionOverrides.js', 'utf8');
9+
const css = fs.readFileSync(__dirname + '/CompositionOverrides.css', 'utf8');
10+
const layoutCss = fs.readFileSync(__dirname + '/../shared/styles/layout.css', 'utf8');
11+
const typographyCss = fs.readFileSync(__dirname + '/../shared/styles/typography.css', 'utf8');
12+
13+
export default class CompositionOverridesDemo extends Component {
14+
15+
render() {
16+
const files = [
17+
{ name: 'CompositionOverrides.js', source: js },
18+
{ name: 'CompositionOverrides.css', source: css },
19+
{ name: 'shared/styles/layout.css', source: layoutCss },
20+
{ name: 'shared/styles/typography.css', source: typographyCss }
21+
];
22+
23+
return (
24+
<Snippet files={files}>
25+
<CompositionOverrides />
26+
</Snippet>
27+
);
28+
}
29+
30+
};

src/components/5-ScopedAnimations/ScopedAnimations.css

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
}
44

55
.ball {
6-
composes: bounce from "../../shared/styles/animations.css";
6+
composes: bounce from "../shared/styles/animations.css";
77
width: 40px;
88
height: 40px;
99
border-radius: 20px;

0 commit comments

Comments
 (0)