Skip to content

Commit 932eb52

Browse files
committed
API Changes
ReactCSSBuilder.register -> ReactCSSBuilder.create StyleContext.val -> StyleContext.css
1 parent 96bd052 commit 932eb52

File tree

3 files changed

+26
-25
lines changed

3 files changed

+26
-25
lines changed

api.md

Lines changed: 16 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,8 @@ You can create a javascript stylesheet similar to what you would see with a CSS
88

99
```
1010
// *very* simple example - more advance capabilities are not demonstrated here
11-
var stylesheet = require('react-css-builder').register({
11+
var ReactCSSBuilder = require('react-css-builder');
12+
var stylesheet = ReactCSSBuilder.create({
1213
myClass: {
1314
color: 'white'
1415
}
@@ -23,7 +24,7 @@ render: function() {
2324

2425
Installation
2526
--------------
26-
This is a CommonJS component only, you simply need to require ```react-css-builder``` and adding the component to ```package.json```
27+
This is a CommonJS component only, include ```react-css-builder``` as a dependency.
2728
```
2829
npm install --save react-css-builder
2930
```
@@ -60,7 +61,7 @@ See [mixin usage](#project/jhudson8/react-css-builder/section/Usage/Mixins) for
6061

6162

6263
### Stylesheet
63-
This is the object returned when calling ```require('react-css-builder').register(...)```
64+
This is the object returned when calling ```ReactCSSBuilder.create(...)```
6465

6566

6667
#### css(className)
@@ -106,7 +107,7 @@ This is the object returned when calling ```get``` from a [StylesetBuilder](#pro
106107
* ***styleAttributes***: Additional attributes that should be included with the attributes defined with the styleset defined by the class name.
107108

108109
```
109-
var stylesheet = require('...').register({
110+
var stylesheet = require('...').create({
110111
myStyleClass: {
111112
backgroundColor: 'black'
112113
}
@@ -151,14 +152,14 @@ Include all of the attributes returned by a registered by a mixin
151152
See [mixin usage](#project/jhudson8/react-css-builder/section/Usage/Mixins) for details.
152153

153154

154-
#### val()
155+
#### css()
155156
Called when all attribute inclusions are complete to return the styleset attributes.
156157
```
157-
var stylesheet = require('...').register({
158+
var stylesheet = require('...').create({
158159
myStyleClass: function(css) {
159160
return css
160161
// add any attributes or mixins
161-
.val();
162+
.css();
162163
}
163164
});
164165
```
@@ -171,7 +172,7 @@ Sections
171172
The [register](#project/jhudson8/react-css-builder/method/react-css-builder/register) method is used to create a new stylesheet that can be used.
172173

173174
```
174-
module.exports = require('react-css-builder').register('optional-namespace', {
175+
module.exports = ReactCSSBuilder.create('optional-namespace', {
175176
// include any stylesets
176177
myCssClass: {
177178
color: 'white'
@@ -204,7 +205,7 @@ Function which returns results from a [StyleContext](#project/jhudson8/react-css
204205
.mixin(...)
205206
.include(...)
206207
.attr(...)
207-
.val();
208+
.css();
208209
}
209210
```
210211

@@ -269,12 +270,12 @@ Mixins can be registered [globally](#project/jhudson8/react-css-builder/method/r
269270
```
270271

271272
```
272-
var stylesheet = require('react-css-builder').register({
273+
var stylesheet = ReactCSSBuilder.create({
273274
274275
myClassUsingMixins: function(css) {
275276
return css
276277
.mixin('vendor-prefix', 'borderRadius', '3px')
277-
.val();
278+
.css();
278279
}
279280
});
280281
```
@@ -287,7 +288,7 @@ Variables can be set [globally](#project/jhudson8/react-css-builder/method/react
287288

288289
```
289290
// variables can be set globally
290-
require('react-css-builder').vars({ myGlobalVar: 'foo'});
291+
ReactCSSBuilder.vars({ myGlobalVar: 'foo'});
291292
292293
// variables can be set on a specific stylesheet
293294
stylesheet.vars({ myStylesheetVar: 'bar'});
@@ -298,7 +299,7 @@ Variables can be set [globally](#project/jhudson8/react-css-builder/method/react
298299

299300
Variables can be referenced in a styleset definition using ```this.get("varName")```
300301
```
301-
var stylesheet = require('react-css-builder').register({
302+
var stylesheet = ReactCSSBuilder.create({
302303
303304
myClassUsingMixins: function() {
304305
return {
@@ -312,7 +313,7 @@ Variables can be referenced in a styleset definition using ```this.get("varName"
312313
#### Includes
313314
It is possible to merge other styleset attributes using ```include```. Stylesets can be referenced in the current stylesheet or in another stylesheet if the styleset name is prefixed with a ```.```.
314315
```
315-
var stylesheet = require('react-css-builder').register({
316+
var stylesheet = ReactCSSBuilder.create({
316317
317318
someOtherClass: {
318319
width: '100%'
@@ -324,7 +325,7 @@ It is possible to merge other styleset attributes using ```include```. Styleset
324325
.attr({
325326
// include any additional attributes
326327
})
327-
.val();
328+
.css();
328329
}
329330
});
330331
```

react-css-builder.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -245,7 +245,7 @@
245245
_extend(this.attrs, mixin.apply(this.varRetriever, args));
246246
return this;
247247
},
248-
val: function(attr) {
248+
css: function(attr) {
249249
return _extend(this.attrs, attr);
250250
}
251251
});
@@ -263,7 +263,7 @@
263263
}
264264

265265
module.exports = {
266-
register: function(namespace, _styles) {
266+
create: function(namespace, _styles) {
267267
if (!_styles) {
268268
_styles = namespace;
269269
namespace = undefined;

test/test.js

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -12,20 +12,20 @@ css.mixin('radius', function(radius) {
1212
};
1313
});
1414

15-
var privateTestCss = css.register({
15+
var privateTestCss = css.create({
1616
test1: {
1717
minWidth: 1
1818
}
1919
});
2020

2121

22-
var hierarchyTestCss = css.register('foo', {
22+
var hierarchyTestCss = css.create('foo', {
2323
bar: {
2424
height: 10
2525
}
2626
});
2727

28-
var hierarchyTestCss = css.register('hierarchy', {
28+
var hierarchyTestCss = css.create('hierarchy', {
2929
top: {
3030
attributes: {},
3131
bottom: {
@@ -44,7 +44,7 @@ var hierarchyTestCss = css.register('hierarchy', {
4444
}
4545
});
4646

47-
var callbacksTestCss = css.register('callbacks', {
47+
var callbacksTestCss = css.create('callbacks', {
4848
base1: {
4949
border: 1
5050
},
@@ -54,27 +54,27 @@ var callbacksTestCss = css.register('callbacks', {
5454
};
5555
},
5656
test1: function(css) {
57-
return css.include('base1').val();
57+
return css.include('base1').css();
5858
},
5959
test2: function(css) {
6060
return css
6161
.include('base1')
6262
.include('base2')
6363
.include('foo.bar')
64-
.val();
64+
.css();
6565
},
6666
test3: function(css) {
6767
return css
6868
.include('base1')
69-
.val({
69+
.css({
7070
height: 1,
7171
width: this.get('someVar')
7272
});
7373
},
7474
test4: function(css) {
7575
return css
7676
.mixin('radius', 3)
77-
.val({
77+
.css({
7878
height: 1
7979
});
8080
}

0 commit comments

Comments
 (0)