Skip to content

Commit de2ad8e

Browse files
RickWongRickWong
committed
React 0.12.2 update. Style syntax now requires "&" to improve scoping of CSS selectors.
1 parent 21eb072 commit de2ad8e

File tree

3 files changed

+75
-63
lines changed

3 files changed

+75
-63
lines changed

‎index.html‎

Lines changed: 15 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
21
<!DOCTYPE html>
32
<html>
43
<head>
@@ -22,11 +21,11 @@
2221
<!-- es5shim + React + JSX. -->
2322
<script src="https://cdnjs.cloudflare.com/ajax/libs/es5-shim/2.3.0/es5-shim.min.js"></script>
2423
<script src="https://cdnjs.cloudflare.com/ajax/libs/es5-shim/2.3.0/es5-sham.min.js"></script>
25-
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.10.0/react.min.js"></script>
26-
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.10.0/JSXTransformer.js"></script>
24+
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.12.2/react.min.js"></script>
25+
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.12.2/JSXTransformer.js"></script>
2726

2827
<!-- React Style component! -->
29-
<script src="react-style-0.1.0.js"></script>
28+
<script src="react-style-0.2.0.js"></script>
3029

3130
</head>
3231
<body>
@@ -50,18 +49,18 @@ <h2>React Style component</h2>
5049
render: function () {
5150
return (
5251
<Style sheet="
53-
.card {
52+
& .card {
5453
cursor: pointer;
5554
margin: 15px;
5655
padding: 15px;
5756
text-align: center;
5857
height: 200px;
5958
}
60-
img {
59+
& .card > img {
6160
width: 130px;
6261
height: 130px;
6362
}
64-
p {
63+
& .card > p {
6564
margin: 10px;
6665
}
6766
">
@@ -81,7 +80,7 @@ <h2>React Style component</h2>
8180
render: function () {
8281
return (
8382
<Style sheet="
84-
.card {
83+
& .card {
8584
padding-top: 30px;
8685
border-radius: 3px;
8786
border: 1px solid rgb(208, 209, 213);
@@ -90,14 +89,14 @@ <h2>React Style component</h2>
9089
border-top-color: rgb(229, 230, 233);
9190
background: linear-gradient(to bottom, rgba(255,255,255,1) 56%,rgba(204,204,204,1) 100%);
9291
}
93-
img {
92+
& .card > img {
9493
vertical-align: middle;
9594
padding: 4px;
9695
background: #fff;
9796
border: 1px solid #ccc;
9897
border-radius: 3px;
9998
}
100-
p {
99+
& .card > p {
101100
font-family: Helvetica, Arial, 'lucida grande', tahoma, verdana, arial, sans-serif;
102101
font-weight: bold;
103102
color: rgb(59, 89, 152);
@@ -119,7 +118,7 @@ <h2>React Style component</h2>
119118
<Style sheet="
120119
@import url(https://fonts.googleapis.com/css?family=Roboto);
121120
122-
.card {
121+
& .card {
123122
border-radius: 3px;
124123
background-color: #fff;
125124
box-shadow: inset 1px 1px 0 rgba(0,0,0,.1),inset 0 -1px 0 rgba(0,0,0,.07);
@@ -128,14 +127,14 @@ <h2>React Style component</h2>
128127
border-top-width: 0;
129128
vertical-align: top;
130129
}
131-
img {
130+
& .card > img {
132131
vertical-align: middle;
133132
border-radius: 9999px;
134133
border: 0;
135134
padding: 0;
136135
margin-right: 3px;
137136
}
138-
p {
137+
& .card > p {
139138
font-family: Roboto, arial, sans-serif;
140139
color: rgb(38, 38, 38);
141140
display: block;
@@ -154,20 +153,20 @@ <h2>React Style component</h2>
154153
render: function () {
155154
return (
156155
<Style sheet="
157-
.card {
156+
& .card {
158157
border-radius: 5px;
159158
background-color: rgb(178, 223, 218);
160159
border: 1px solid #e1e8ed;
161160
padding: 0;
162161
}
163-
img {
162+
& .card > img {
164163
background: #fff;
165164
border: 6px solid #fff;
166165
border-radius: 6px;
167166
margin: 15px;
168167
box-shadow: rgba(136, 153, 166, 0.14902) 0px 1px 1px 0px;
169168
}
170-
p {
169+
& .card > p {
171170
font-family: 'Helvetica Neue', Helvetica, arial, sans-serif;
172171
color: #292f33;
173172
font-size: 18px;

‎react-style-0.1.0.js‎

Lines changed: 0 additions & 47 deletions
This file was deleted.

‎react-style-0.2.0.js‎

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
/*!
2+
* React Style component 0.2.0
3+
* https://github.com/RickWong/ReactStyle
4+
*
5+
* Copyright 2014 Rick Wong
6+
* Released under the MIT license
7+
*/
8+
!(function (root, factory) {
9+
if (typeof define === 'function' && define.amd) {
10+
define(['react'], factory);
11+
} else if (typeof exports === 'object') {
12+
module.exports = factory(require('react'));
13+
} else {
14+
root.Style = factory(root.React);
15+
}
16+
}(this, function (React) {
17+
"use strict";
18+
19+
var refCounter = 0;
20+
21+
/**
22+
* @module Style
23+
*/
24+
var Style = React.createClass({
25+
displayName: "Style",
26+
propTypes: {
27+
sheet: React.PropTypes.string.isRequired,
28+
namespace: React.PropTypes.string,
29+
wrapper: React.PropTypes.string
30+
},
31+
_transformSheet: function (sheet, namespace) {
32+
return sheet.
33+
// Put all CSS-properties at start of new line.
34+
replace(/([a-z0-9\-_]+\s*:)(?!\/\/)/ig, "\n $1").
35+
// Prettier output.
36+
replace(/}\s*/ig, "\n}\n").
37+
// Regular rules are namespaced.
38+
replace(/(^|}|;|,)\s*([&a-z0-9\-_\.:#\(\),>*\s]+)\s*(\{)/ig, function (matched) {
39+
return matched.replace(/&/g, "." + namespace);
40+
});
41+
},
42+
render: function () {
43+
var Wrapper = this.props.wrapper || "div";
44+
var namespace = this.props.namespace || "react-style-" + refCounter++;
45+
var transformedSheet = this._transformSheet(this.props.sheet, namespace);
46+
47+
return React.createElement(
48+
Wrapper,
49+
{ className: namespace }, [
50+
this.props.children,
51+
React.createElement("style",
52+
{ scoped: true, dangerouslySetInnerHTML: { __html: transformedSheet } }
53+
)
54+
]
55+
);
56+
}
57+
});
58+
59+
return Style;
60+
}));

0 commit comments

Comments
 (0)