csster 1.2.0 → 1.3.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- checksums.yaml +4 -4
- data/README.md +107 -87
- data/lib/csster/version.rb +1 -1
- data/vendor/assets/javascripts/csster.js +140 -97
- metadata +2 -2
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA1:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: 4346d10b45afa599e70155d7b400416b78421696
|
4
|
+
data.tar.gz: e37d54be1ad7079244f2e627f99cf772781694ca
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: 65a58688bcda5f312fd6bc28c5436d7a8d4ab2fdd969930e5445e374c893d663d63ef4ee5f8fe193715fab1ba3c1eb91621e41c1c6523f19cbab6333edaf33a0
|
7
|
+
data.tar.gz: 8cf3e1869bd77e321fe8ae290f30485fbc75341ca5c9bd69dacd1bf9014660a217130fd56258f183fa9019c9bbe0bf665c6a2242f20b8414393c6520f20ca07c
|
data/README.md
CHANGED
@@ -8,7 +8,7 @@ Concisely generate CSS style rules within Javascript. Features:
|
|
8
8
|
|
9
9
|
* standard "object literal"/JSON format with good editor support
|
10
10
|
* nesting to DRY up stylesheets
|
11
|
-
* color functions like
|
11
|
+
* color functions like `darken` and `saturate`
|
12
12
|
* built-in macros for common CSS idioms like *clearfix*, *rounded corners*, *drop shadows*.
|
13
13
|
* extension points for custom behavior or cross-browser support.
|
14
14
|
* and all the plain old Javascript behavior: functions, data structures, looping, Math operations, etc.
|
@@ -59,42 +59,49 @@ The result is inserted in DOM automatically at the bottom of the <head> el
|
|
59
59
|
|
60
60
|
```html
|
61
61
|
...
|
62
|
-
|
62
|
+
<style type="text/stylesheet">
|
63
63
|
h1 {
|
64
64
|
font-size: 18px;
|
65
65
|
color: red;
|
66
66
|
}
|
67
|
-
|
68
|
-
|
67
|
+
</style>
|
68
|
+
</head>
|
69
69
|
...
|
70
70
|
```
|
71
71
|
|
72
|
-
###
|
72
|
+
### Node Usage
|
73
73
|
|
74
|
-
|
74
|
+
`Csster.buildCss` accepts arrays or hashes of rules and returns a text string of the Css rules.
|
75
|
+
The caller is responsible for writing to the browser.
|
76
|
+
|
77
|
+
|
78
|
+
### Building CSS Rules
|
79
|
+
|
80
|
+
The `Csster.style` method accepts CSS rules passed either as arrays or hashes, arrays just being
|
75
81
|
a way to order the hashes. For example:
|
76
82
|
|
77
|
-
|
78
|
-
{
|
83
|
+
```javascript
|
84
|
+
Csster.style({
|
79
85
|
ul: {
|
80
86
|
margin: 5,
|
81
87
|
padding: 0,
|
82
88
|
}
|
83
89
|
'ul li:first': {
|
84
|
-
paddingLeft: 20px
|
90
|
+
paddingLeft: '20px'
|
85
91
|
}
|
86
92
|
}
|
87
|
-
|
93
|
+
```
|
88
94
|
|
89
95
|
Note that
|
90
96
|
|
91
|
-
* property names are automatically converted to hyphenated format from
|
92
|
-
*
|
97
|
+
* property names are automatically converted to hyphenated format from camelCase, so in many cases you can omit the quotation marks. (`float` needs to quoted since it's a reserved word.)
|
98
|
+
* most raw numbers are assumed to be "pixels" (or "px"), and rendered as such. A heuristic helps in this, skipping `opacity`, `z-index`, etc.
|
93
99
|
* any sort of selectors are allowed... they are just passed through to the stylesheet.
|
94
100
|
|
95
101
|
#### Nesting
|
96
102
|
Csster supports nesting of rules to keep things more concise:
|
97
|
-
|
103
|
+
|
104
|
+
```javascript
|
98
105
|
{
|
99
106
|
ul: {
|
100
107
|
margin: 5,
|
@@ -106,65 +113,92 @@ Csster supports nesting of rules to keep things more concise:
|
|
106
113
|
}
|
107
114
|
}
|
108
115
|
}
|
109
|
-
|
116
|
+
```
|
110
117
|
|
111
118
|
The "li" property in this case might be a selector or might be a property name. A list of valid
|
112
119
|
property names is used to identify properties right now, and otherwise it's considered a sub-selector.
|
113
120
|
|
114
|
-
Csster supports SASS's
|
121
|
+
Csster supports SASS's `&` operator, to indicate that the selector should be combined with the parent selector.
|
115
122
|
Instead of the default "any descendent" space character being inserted, no space is inserted.
|
116
123
|
|
117
124
|
Combined rules (with commas) are expanded as expected, so nested rules with commas have their parents expanded.
|
118
125
|
|
119
126
|
|
127
|
+
#### Functions
|
128
|
+
Most manipulations you'll want don't require any special syntax. They will fall into
|
129
|
+
Javascript's language support, as far as any math or looping.
|
130
|
+
Use Javascript to write necessary functions! Include them directly in the
|
131
|
+
CSS rule definitions.
|
120
132
|
|
121
133
|
|
122
|
-
####
|
123
|
-
Most manipulations will fall into Javascript's language support, as far as any math or looping. Use Javascript to write necessary functions.
|
134
|
+
#### Colors
|
124
135
|
|
125
|
-
|
136
|
+
Colors can be particularly brittle in CSS, so color conversion functions are included.
|
137
|
+
The easiest way to enable this is to call:
|
138
|
+
|
139
|
+
Csster.colorizeString()
|
140
|
+
|
141
|
+
Now the `String` prototype will include SASS-like color functions:
|
126
142
|
|
127
|
-
*
|
128
|
-
*
|
129
|
-
*
|
143
|
+
* `"#ab342c".darken(%)` -- make color darker by given percent
|
144
|
+
* `"#ab342c".lighten(%)` -- make color lighter by given percent
|
145
|
+
* `"#ab342c".saturate(%)` -- make color more saturated by given percent. To *desaturate*, use negative values for the percent. Note that `"#ab342c".saturate(-100)` renders in grayscale.
|
130
146
|
|
131
147
|
There are also color conversion routines if you want to build your own manipulation.
|
132
148
|
|
133
|
-
*
|
134
|
-
*
|
135
|
-
*
|
149
|
+
* `"#ab342c".toRGB()`
|
150
|
+
* `"#ab342c".toHSL()`
|
151
|
+
* `Csster.hslToHexColor(h,s,l)`
|
136
152
|
|
137
153
|
Opacity is currently not supported by the color model.
|
138
154
|
|
139
|
-
|
155
|
+
### Macros
|
156
|
+
|
157
|
+
Although the Javascript language probably offers enough flexibility for most of what you
|
158
|
+
want, macros are also a core part of Csster.
|
159
|
+
|
160
|
+
#### Pre-build Macros
|
140
161
|
|
141
162
|
There are a host of pre-made macros that may be useful:
|
142
163
|
|
143
|
-
*
|
144
|
-
*
|
145
|
-
*
|
146
|
-
*
|
147
|
-
*
|
148
|
-
*
|
149
|
-
*
|
164
|
+
* `roundedCorners(radius)` -- add rounded corners on all sides
|
165
|
+
* `roundedCorners(side, radius)` -- add rounded corners on specified side: `'top'`, `'left'`, `'bottom'` or `'right'`
|
166
|
+
* `roundedCorners(corner, radius)` -- add rounded corners to a specified corner: `'tl'`, `'tr'`, `'bl'` or `'br'`
|
167
|
+
* `imageReplacement(width, height, img, imgXPosition=0, imgYPosition=0)` -- phark image replacement with optional background image offset.
|
168
|
+
* `boxShadow([xoffset, yoffset], radius, color)`
|
169
|
+
* `verticalCentering(height)` and `horizontalCentering(width)` -- center using the top 50% / margin-top -width/2 technique. See http://stackoverflow.com/questions/148251/css-centering-tricks
|
170
|
+
* `clearfix()` -- standard clearfix
|
150
171
|
|
151
|
-
|
172
|
+
#### Using macros with the "has" or "mixin" key
|
152
173
|
|
153
|
-
|
154
|
-
|
155
|
-
|
156
|
-
|
157
|
-
|
174
|
+
To "mix these in", use the `has`, `mixin` or `mixins` key:
|
175
|
+
|
176
|
+
{
|
177
|
+
'div#featured_box': {
|
178
|
+
backgroundColor: '#394c89',
|
179
|
+
has: roundedCorner(5)
|
180
|
+
}
|
158
181
|
}
|
159
|
-
}
|
160
|
-
</pre>
|
161
182
|
|
162
|
-
Multiple macros can be included by making that a list, eg.
|
183
|
+
Multiple macros can be included by making that a list, eg. `has: [roundedCorners(5), dropShadow()]`.
|
184
|
+
|
185
|
+
#### Macros fake property names
|
186
|
+
|
187
|
+
You can also make these _pseudo properties_ using the `Csster.setMacro` method. For example,
|
188
|
+
|
189
|
+
Csster.setMacro('roundedCorners', (px) => { return { borderRadius: px } })
|
190
|
+
|
191
|
+
As you might expect, this defines a property that is rendered with the given function. Therefore:
|
192
|
+
|
193
|
+
...
|
194
|
+
Csster.style({ div: roundedCorners: 5 })
|
195
|
+
|
196
|
+
#### Writing Macros
|
163
197
|
|
164
|
-
It's all Javascript, so macros and more complex functions are easy to write.
|
165
|
-
that returns a hash of values, for example:
|
198
|
+
It's all Javascript, so macros and more complex functions are easy to write.
|
199
|
+
To mix in a set of values, create a function that returns a hash of values, for example:
|
166
200
|
|
167
|
-
|
201
|
+
```javascript
|
168
202
|
function roundedCorners(radius) {
|
169
203
|
return {
|
170
204
|
'-webkit-border-radius': radius,
|
@@ -172,21 +206,38 @@ that returns a hash of values, for example:
|
|
172
206
|
'border-radius': radius
|
173
207
|
}
|
174
208
|
}
|
175
|
-
|
209
|
+
```
|
210
|
+
|
211
|
+
A macro's properties will be overwritten similar to how the cascade takes the last defined value: later ones override earlier ones.
|
212
|
+
|
213
|
+
|
214
|
+
## Verification
|
215
|
+
|
216
|
+
By default, property names are validated against recent HTML specs.
|
217
|
+
The build-in tool rejects non-standard property names,
|
218
|
+
although by default popular "-moz" and "-webkit" properties are added.
|
219
|
+
Use `Csster.addPropertyNames` to supplement property names it might not
|
220
|
+
consider valid.
|
221
|
+
|
222
|
+
At this time of history, though, validation is not necessarily what you want.
|
223
|
+
To turn this off, use:
|
224
|
+
|
225
|
+
Csster.propertyNameValidator.setConfig('strictNames', false)
|
176
226
|
|
177
|
-
|
227
|
+
By default, any browser extension property (such as `-moz-boo`) is allowed. To
|
228
|
+
restrict this, turn on the validation:
|
229
|
+
|
230
|
+
Csster.propertyNameValidator.setConfig('anyBrowserExtension', false)
|
178
231
|
|
179
232
|
|
180
233
|
## jQuery Integration
|
181
234
|
|
182
|
-
If jQuery is loaded
|
235
|
+
If jQuery is loaded before Csster, it provides a "csster" plugin:
|
183
236
|
|
184
|
-
|
185
|
-
$('.sidebar').csster({ border: '5px solid green', padding: 10 });
|
186
|
-
</pre>
|
237
|
+
$('.sidebar').csster({ border: '5px solid green', padding: 10 });
|
187
238
|
|
188
239
|
As expected, this adds a rule to the document with the ".sidebar" selector.
|
189
|
-
In general, this can be called identically to the
|
240
|
+
In general, this can be called identically to the `css()` function.
|
190
241
|
This is useful is the DOM on the page is dynamic and when a rule is more efficient than applying
|
191
242
|
a style repeatedly to all the DOM nodes.
|
192
243
|
|
@@ -196,40 +247,8 @@ nothing is done to convert or report unsupported selectors (just like regular CS
|
|
196
247
|
|
197
248
|
## Extending Csster
|
198
249
|
|
199
|
-
Csster is built as an extensible system.
|
200
|
-
|
201
|
-
### Adding Custom Property Names
|
202
|
-
Use <code>Csster.addPropertyNames</code> to add any non-standard property names you'd like to be considered valid. The build-in tool rejects non-standard property names, although by default popular "-moz" and "-webkit" properties are added.
|
203
|
-
|
204
|
-
### Pre-process rules
|
205
|
-
<del>Functions called before properties are processed stored in <code>Csster.propertyPreprocessors</code>. Callback is provided a hash of properties to values, which it modifies in any way it wants. This is used to interpret macros.</del>
|
206
|
-
|
207
|
-
<del>### Post-processing
|
208
|
-
Functions called after rules are processed stored in <code>Csster.rulesPostProcessors</code>. Called with an array of processed rules. Can be used to eliminate duplicates, modify selectors, etc. Standard list simplifies overly complex selectors with multiple IDs.
|
209
|
-
|
210
|
-
A convenient built-in function is <code>compressSelectors</code>. Using this processor, rules with multiple '#'s are simplified. For example, '#a #b #c' becomes '#c'. Usually this is what you will want, so include it with <code>Csster.rulePostProcessors.push(Csster.compressSelectors);</code>.
|
211
|
-
|
212
|
-
This is used to write custom browser overrides. For example, this one makes opacity work for IE:
|
213
|
-
|
214
|
-
<pre>
|
215
|
-
Csster.rulesPostProcessors.push(function ieOpacity(rules) {
|
216
|
-
// http://www.smashingmagazine.com/2010/04/28/css3-solutions-for-internet-explorer/
|
217
|
-
if (Csster.browserInfo().msie) {
|
218
|
-
for (var i = 0; i < rules.length; i++) {
|
219
|
-
var rule = rules[i];
|
220
|
-
var value = rule.props['opacity']
|
221
|
-
if (value) {
|
222
|
-
value = Math.round(value * 100.0);
|
223
|
-
rules[i].props['filter'] = 'progid:DXImageTransform.Microsoft.Alpha(opacity=' + value + ')';
|
224
|
-
}
|
225
|
-
}
|
226
|
-
}
|
227
|
-
});
|
228
|
-
</pre>
|
229
|
-
</del>
|
230
|
-
|
231
250
|
### Inserting into the DOM
|
232
|
-
Function that outputs a set of rules into the DOM is
|
251
|
+
Function that outputs a set of rules into the DOM is `Csster.insertCss` and can be replaced if desired.
|
233
252
|
|
234
253
|
## V2.0 Changes
|
235
254
|
|
@@ -241,6 +260,7 @@ Function that outputs a set of rules into the DOM is <code>Csster.insertCss</cod
|
|
241
260
|
### Other changes:
|
242
261
|
|
243
262
|
* use ES6 for implementation and provide a more compressed and clean script.
|
263
|
+
* fake-property-based macros
|
244
264
|
* add ability to turn off property name validation.
|
245
265
|
* add ability to warn about unknown browser extensions for property names.
|
246
266
|
|
@@ -269,10 +289,10 @@ Function that outputs a set of rules into the DOM is <code>Csster.insertCss</cod
|
|
269
289
|
2. Update `bin/build.sh#2` `VERSION=` code.
|
270
290
|
3. `bin/build.sh`
|
271
291
|
4. `rake build`
|
272
|
-
5. `
|
292
|
+
5. `git checkin...`
|
273
293
|
6. `rake push...`
|
274
|
-
7. `rake release`
|
275
|
-
8. `npm publish`
|
294
|
+
7. `rake release` # Ruby Gem
|
295
|
+
8. `npm publish` # Node module
|
276
296
|
|
277
297
|
|
278
298
|
### TDD
|
data/lib/csster/version.rb
CHANGED
@@ -1,4 +1,4 @@
|
|
1
|
-
// Csster version 1.
|
1
|
+
// Csster version 1.3.0; Copyright (c) Andrew J. Peterson / ndpsoftware.com. All Rights Reserved
|
2
2
|
(function webpackUniversalModuleDefinition(root, factory) {
|
3
3
|
if(typeof exports === 'object' && typeof module === 'object')
|
4
4
|
module.exports = factory();
|
@@ -104,6 +104,8 @@ return /******/ (function(modules) { // webpackBootstrap
|
|
104
104
|
|
105
105
|
var macros = _interopRequireWildcard(_macros);
|
106
106
|
|
107
|
+
var _macroProcessor = __webpack_require__(12);
|
108
|
+
|
107
109
|
var _array = __webpack_require__(9);
|
108
110
|
|
109
111
|
var _browser = __webpack_require__(27);
|
@@ -126,14 +128,15 @@ return /******/ (function(modules) { // webpackBootstrap
|
|
126
128
|
insertCss: _insertCss2.default,
|
127
129
|
style: style,
|
128
130
|
macros: macros,
|
131
|
+
setMacro: _macroProcessor.setMacro,
|
129
132
|
arrayFlatten: _array.arrayFlatten,
|
130
133
|
browserInfo: _browser.browserInfo,
|
131
134
|
hslToHexColor: _color.hslToHexColor,
|
132
|
-
addPropertyNames: addPropertyNames
|
135
|
+
addPropertyNames: addPropertyNames,
|
136
|
+
propertyNameValidator: propertyNameValidator,
|
137
|
+
colorizeString: _color.colorizeString
|
133
138
|
};
|
134
139
|
|
135
|
-
(0, _color.colorizeString)();
|
136
|
-
|
137
140
|
/***/ },
|
138
141
|
/* 4 */
|
139
142
|
/***/ function(module, exports, __webpack_require__) {
|
@@ -168,12 +171,13 @@ return /******/ (function(modules) { // webpackBootstrap
|
|
168
171
|
Object.defineProperty(exports, "__esModule", {
|
169
172
|
value: true
|
170
173
|
});
|
171
|
-
exports.
|
174
|
+
exports.dasherizePropertyKeys = undefined;
|
172
175
|
|
173
|
-
exports.default = function (
|
176
|
+
exports.default = function (objOrArray) {
|
177
|
+
var a = (0, _array.arrayFlatten)([objOrArray]);
|
174
178
|
var rules = [];
|
175
|
-
(0, _array.arrayEach)(
|
176
|
-
rules.push(objectToRulesArray(process(o)));
|
179
|
+
(0, _array.arrayEach)(a, function (o) {
|
180
|
+
return rules.push(objectToRulesArray(process(o)));
|
177
181
|
});
|
178
182
|
return (0, _array.arrayFlatten)(rules);
|
179
183
|
};
|
@@ -190,8 +194,6 @@ return /******/ (function(modules) { // webpackBootstrap
|
|
190
194
|
|
191
195
|
var _properties = __webpack_require__(13);
|
192
196
|
|
193
|
-
var applyMacros = (0, _object.filterValuesRecursively)(_macroProcessor.macroProcessor);
|
194
|
-
|
195
197
|
// @param cssRule { selector: { prop1: value, prop2: value, subselector: { prop3: value}}
|
196
198
|
var objectToRulesArray = function objectToRulesArray(o) {
|
197
199
|
var result = [];
|
@@ -203,9 +205,13 @@ return /******/ (function(modules) { // webpackBootstrap
|
|
203
205
|
|
204
206
|
var dasherizePropertyKeys = exports.dasherizePropertyKeys = (0, _object.filterValuesRecursively)(_properties.dasherizeKeys);
|
205
207
|
|
206
|
-
var
|
208
|
+
var log = function log(x) {
|
209
|
+
console.log(x);return x;
|
210
|
+
};
|
207
211
|
|
208
|
-
var process = (0, _fn.compose)(rejectUnknownPropertyKeys, dasherizePropertyKeys,
|
212
|
+
var process = (0, _fn.compose)(_properties.rejectUnknownPropertyKeys, dasherizePropertyKeys,
|
213
|
+
//compressSelectors,
|
214
|
+
_cssObject.flattenObject, _macroProcessor.macroProcessor);
|
209
215
|
|
210
216
|
;
|
211
217
|
/* WEBPACK VAR INJECTION */}.call(exports, __webpack_require__(6)))
|
@@ -316,7 +322,7 @@ return /******/ (function(modules) { // webpackBootstrap
|
|
316
322
|
Object.defineProperty(exports, "__esModule", {
|
317
323
|
value: true
|
318
324
|
});
|
319
|
-
exports.filterValuesRecursively = exports.applyToKeys = exports.mergeHashInto = undefined;
|
325
|
+
exports.filterObjectsRecursively = exports.filterValuesRecursively = exports.visitChildren = exports.applyToKeys = exports.mergeHashInto = undefined;
|
320
326
|
|
321
327
|
var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol ? "symbol" : typeof obj; };
|
322
328
|
|
@@ -341,6 +347,7 @@ return /******/ (function(modules) { // webpackBootstrap
|
|
341
347
|
// fn: (key) => new key
|
342
348
|
// o: object to filter
|
343
349
|
var applyToKeys = exports.applyToKeys = (0, _fn.curry)(function (fn, o) {
|
350
|
+
if ((typeof o === 'undefined' ? 'undefined' : _typeof(o)) !== 'object') return o;
|
344
351
|
var out = {};
|
345
352
|
for (var k in o) {
|
346
353
|
out[fn(k)] = o[k];
|
@@ -348,19 +355,42 @@ return /******/ (function(modules) { // webpackBootstrap
|
|
348
355
|
return out;
|
349
356
|
});
|
350
357
|
|
358
|
+
var visitChildren = exports.visitChildren = (0, _fn.curry)(function (fn, o) {
|
359
|
+
if ((typeof o === 'undefined' ? 'undefined' : _typeof(o)) == 'object') {
|
360
|
+
for (var key1 in o) {
|
361
|
+
if (_typeof(o[key1]) == 'object') {
|
362
|
+
fn(o[key1], key1);
|
363
|
+
}
|
364
|
+
}
|
365
|
+
}
|
366
|
+
return o;
|
367
|
+
});
|
368
|
+
|
351
369
|
// Filter values of an object, recursively
|
352
370
|
// fn: fn(value, key) => new value
|
353
371
|
// o: object to process
|
354
372
|
var filterValuesRecursively = exports.filterValuesRecursively = (0, _fn.curry)(function (fn, o) {
|
373
|
+
if ((typeof o === 'undefined' ? 'undefined' : _typeof(o)) !== 'object') return o;
|
374
|
+
|
355
375
|
var out = {};
|
356
|
-
for (var
|
357
|
-
var
|
358
|
-
|
376
|
+
for (var key in o) {
|
377
|
+
var newValue = fn(o[key], key);
|
378
|
+
if ((typeof newValue === 'undefined' ? 'undefined' : _typeof(newValue)) == 'object') {
|
379
|
+
newValue = filterValuesRecursively(fn, newValue);
|
380
|
+
}
|
381
|
+
out[key] = newValue;
|
382
|
+
}
|
383
|
+
return out;
|
384
|
+
});
|
359
385
|
|
360
|
-
|
361
|
-
|
362
|
-
|
363
|
-
|
386
|
+
// Filter values of an object, recursively
|
387
|
+
// fn: fn(value, key) => new value
|
388
|
+
// o: object to process
|
389
|
+
var filterObjectsRecursively = exports.filterObjectsRecursively = (0, _fn.curry)(function (fn, o) {
|
390
|
+
var out = fn(o);
|
391
|
+
for (var key in out) {
|
392
|
+
if (_typeof(out[key]) == 'object') {
|
393
|
+
out[key] = filterObjectsRecursively(fn, out[key]);
|
364
394
|
}
|
365
395
|
}
|
366
396
|
return out;
|
@@ -456,11 +486,24 @@ return /******/ (function(modules) { // webpackBootstrap
|
|
456
486
|
return false;
|
457
487
|
}
|
458
488
|
|
489
|
+
function map(fn, obj) {
|
490
|
+
var result = [];
|
491
|
+
if (isArray(obj)) {
|
492
|
+
for (var i = 0; i < obj.length;) {
|
493
|
+
result.push(fn(obj[i], i++));
|
494
|
+
}
|
495
|
+
} else {
|
496
|
+
result = fn(obj);
|
497
|
+
}
|
498
|
+
return result;
|
499
|
+
}
|
500
|
+
|
459
501
|
exports.isArray = isArray;
|
460
502
|
exports.arrayEach = arrayEach;
|
461
503
|
exports.arrayInject = arrayInject;
|
462
504
|
exports.arrayFlatten = arrayFlatten;
|
463
505
|
exports.includes = includes;
|
506
|
+
exports.map = map;
|
464
507
|
|
465
508
|
/***/ },
|
466
509
|
/* 10 */
|
@@ -552,23 +595,31 @@ return /******/ (function(modules) { // webpackBootstrap
|
|
552
595
|
|
553
596
|
/***/ },
|
554
597
|
/* 11 */
|
555
|
-
/***/ function(module, exports) {
|
598
|
+
/***/ function(module, exports, __webpack_require__) {
|
556
599
|
|
557
|
-
|
600
|
+
'use strict';
|
558
601
|
|
559
602
|
Object.defineProperty(exports, "__esModule", {
|
560
603
|
value: true
|
561
604
|
});
|
562
|
-
|
563
|
-
|
605
|
+
exports.trim = exports.dasherize = undefined;
|
606
|
+
|
607
|
+
var _fn = __webpack_require__(8);
|
608
|
+
|
609
|
+
var onString = (0, _fn.curry)(function (fn, s) {
|
610
|
+
if (typeof s === 'string') return fn(s);else return s;
|
611
|
+
}); // S T R I N G s
|
612
|
+
|
613
|
+
|
614
|
+
var dasherize = onString(function (s) {
|
564
615
|
return s.replace(/([A-Z])/g, function ($1) {
|
565
616
|
return "-" + $1.toLowerCase();
|
566
617
|
});
|
567
|
-
};
|
618
|
+
});
|
568
619
|
|
569
|
-
var trim = function
|
620
|
+
var trim = onString(function (text) {
|
570
621
|
return (text || "").replace(/^(\s|\u00A0)+|(\s|\u00A0)+$/g, "");
|
571
|
-
};
|
622
|
+
});
|
572
623
|
|
573
624
|
exports.dasherize = dasherize;
|
574
625
|
exports.trim = trim;
|
@@ -582,55 +633,64 @@ return /******/ (function(modules) { // webpackBootstrap
|
|
582
633
|
Object.defineProperty(exports, "__esModule", {
|
583
634
|
value: true
|
584
635
|
});
|
585
|
-
exports.
|
586
|
-
|
636
|
+
exports.macroProcessor = undefined;
|
637
|
+
|
638
|
+
var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol ? "symbol" : typeof obj; };
|
639
|
+
|
640
|
+
exports.setMacro = setMacro;
|
587
641
|
exports.isMacroKey = isMacroKey;
|
588
642
|
|
589
643
|
var _object = __webpack_require__(7);
|
590
644
|
|
591
645
|
var _array = __webpack_require__(9);
|
592
646
|
|
593
|
-
var macroKeys =
|
594
|
-
|
595
|
-
|
596
|
-
|
647
|
+
var macroKeys = {
|
648
|
+
'has': inLineIt,
|
649
|
+
'mixin': inLineIt,
|
650
|
+
'mixins': inLineIt
|
651
|
+
};
|
597
652
|
|
598
|
-
function
|
653
|
+
function setMacro(key, fn) {
|
654
|
+
macroKeys[key] = fn;
|
655
|
+
}
|
599
656
|
|
600
|
-
|
657
|
+
function isMacroKey(k) {
|
658
|
+
return !!macroKeys[k];
|
659
|
+
}
|
601
660
|
|
602
|
-
|
661
|
+
// Simplest macro just inlines
|
662
|
+
function inLineIt() {
|
663
|
+
var expanded = {};
|
603
664
|
|
604
|
-
|
605
|
-
|
606
|
-
var macro = macros[i];
|
607
|
-
if (typeof macro == 'function') macro = macro();
|
608
|
-
for (var mp in macro) {
|
609
|
-
if (isMacroKey(mp)) {
|
610
|
-
(0, _object.mergeHashInto)(props, applyMacros(macro[mp]));
|
611
|
-
} else {
|
612
|
-
props[mp] = macro[mp];
|
613
|
-
}
|
614
|
-
}
|
615
|
-
}
|
616
|
-
return props;
|
665
|
+
for (var _len = arguments.length, value = Array(_len), _key = 0; _key < _len; _key++) {
|
666
|
+
value[_key] = arguments[_key];
|
617
667
|
}
|
618
668
|
|
619
|
-
|
620
|
-
if (
|
621
|
-
|
622
|
-
|
623
|
-
|
624
|
-
|
669
|
+
(0, _array.map)(function (val) {
|
670
|
+
if (typeof val == 'function') val = val();
|
671
|
+
(0, _object.mergeHashInto)(expanded, val);
|
672
|
+
}, value);
|
673
|
+
return expanded;
|
674
|
+
}
|
675
|
+
|
676
|
+
function process(o) {
|
677
|
+
|
678
|
+
if ((typeof o === 'undefined' ? 'undefined' : _typeof(o)) !== 'object') return o;
|
679
|
+
|
680
|
+
var result = {};
|
681
|
+
for (var key in o) {
|
682
|
+
var value = o[key];
|
683
|
+
if (isMacroKey(key)) {
|
684
|
+
var expanded = macroKeys[key].apply(null, (0, _array.isArray)(value) ? value : [value]);
|
685
|
+
(0, _object.mergeHashInto)(result, process(expanded)); // Recurse
|
686
|
+
} else {
|
687
|
+
result[key] = value;
|
625
688
|
}
|
626
|
-
}
|
627
689
|
}
|
628
|
-
return
|
690
|
+
return result;
|
629
691
|
}
|
630
692
|
|
631
|
-
|
632
|
-
return (0, _array.includes)(macroKeys, k);
|
633
|
-
}
|
693
|
+
var macroProcessor = exports.macroProcessor = (0, _object.filterObjectsRecursively)(process);
|
634
694
|
|
635
695
|
/***/ },
|
636
696
|
/* 13 */
|
@@ -641,33 +701,28 @@ return /******/ (function(modules) { // webpackBootstrap
|
|
641
701
|
Object.defineProperty(exports, "__esModule", {
|
642
702
|
value: true
|
643
703
|
});
|
644
|
-
exports.
|
704
|
+
exports.rejectUnknownPropertyKeys = exports.dasherizeKeys = undefined;
|
645
705
|
|
646
706
|
var _string = __webpack_require__(11);
|
647
707
|
|
648
708
|
var _object = __webpack_require__(7);
|
649
709
|
|
650
|
-
var _fn = __webpack_require__(8);
|
651
|
-
|
652
710
|
var _propertyNameValidator = __webpack_require__(14);
|
653
711
|
|
654
712
|
var propertyNameValidator = _interopRequireWildcard(_propertyNameValidator);
|
655
713
|
|
714
|
+
var _object2 = __webpack_require__(7);
|
715
|
+
|
656
716
|
function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj.default = obj; return newObj; } }
|
657
717
|
|
658
718
|
var dasherizeKeys = exports.dasherizeKeys = (0, _object.applyToKeys)(_string.dasherize);
|
659
719
|
|
660
|
-
var
|
720
|
+
var rejectUnknownPropertyKeys = exports.rejectUnknownPropertyKeys = (0, _object2.visitChildren)(function (rules, selector) {
|
661
721
|
for (var prop in rules) {
|
662
|
-
|
663
|
-
|
664
|
-
|
665
|
-
|
666
|
-
|
667
|
-
var rejectUnknownKeys = exports.rejectUnknownKeys = propertyKeyVisitor(function (prop, ctx) {
|
668
|
-
var error = propertyNameValidator.error(prop);
|
669
|
-
if (error) {
|
670
|
-
throw '' + error + '. Context: "' + ctx + '"';
|
722
|
+
var error = propertyNameValidator.error(prop);
|
723
|
+
if (error) {
|
724
|
+
throw '' + error + '. Context: "' + selector + '"';
|
725
|
+
}
|
671
726
|
}
|
672
727
|
});
|
673
728
|
|
@@ -682,7 +737,6 @@ return /******/ (function(modules) { // webpackBootstrap
|
|
682
737
|
});
|
683
738
|
exports.setConfig = setConfig;
|
684
739
|
exports.addNames = addNames;
|
685
|
-
exports.validate = validate;
|
686
740
|
exports.error = error;
|
687
741
|
|
688
742
|
var _array = __webpack_require__(9);
|
@@ -697,9 +751,6 @@ return /******/ (function(modules) { // webpackBootstrap
|
|
697
751
|
config[key] = value;
|
698
752
|
}
|
699
753
|
|
700
|
-
/**
|
701
|
-
* Add more valid properties to the list of valid property names.
|
702
|
-
*/
|
703
754
|
function addNames() {
|
704
755
|
for (var _len = arguments.length, propertyNames = Array(_len), _key = 0; _key < _len; _key++) {
|
705
756
|
propertyNames[_key] = arguments[_key];
|
@@ -732,10 +783,6 @@ return /******/ (function(modules) { // webpackBootstrap
|
|
732
783
|
}
|
733
784
|
}
|
734
785
|
|
735
|
-
function validate(name) {
|
736
|
-
return !error(name) ? name : null;
|
737
|
-
}
|
738
|
-
|
739
786
|
function error(name) {
|
740
787
|
if (/^\-\w+\-/.exec(name)) {
|
741
788
|
if (!config.anyBrowserExtension && !validNames[name]) {
|
@@ -792,11 +839,10 @@ return /******/ (function(modules) { // webpackBootstrap
|
|
792
839
|
return Object.keys(props).reduce(function (s, p) {
|
793
840
|
return s + propertyEntry.format(p, props[p]);
|
794
841
|
}, '');
|
795
|
-
};
|
796
|
-
|
797
|
-
// Rule: object with `sel` and `props` keys.
|
842
|
+
}; // Rule: object with `sel` and `props` keys.
|
798
843
|
// .sel is the selector
|
799
844
|
// .props in an object holding CSS property rules
|
845
|
+
|
800
846
|
var format = exports.format = function format(rule) {
|
801
847
|
return rule.sel + ' { ' + formatProperties(rule.props) + " }\n";
|
802
848
|
};
|
@@ -808,7 +854,7 @@ return /******/ (function(modules) { // webpackBootstrap
|
|
808
854
|
'use strict';
|
809
855
|
|
810
856
|
Object.defineProperty(exports, "__esModule", {
|
811
|
-
|
857
|
+
value: true
|
812
858
|
});
|
813
859
|
exports.format = undefined;
|
814
860
|
|
@@ -822,12 +868,10 @@ return /******/ (function(modules) { // webpackBootstrap
|
|
822
868
|
|
823
869
|
function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj.default = obj; return newObj; } }
|
824
870
|
|
825
|
-
var format = function format(name, value) {
|
826
|
-
|
871
|
+
var format = exports.format = function format(name, value) {
|
872
|
+
return propertyName.format(name) + ": " + propertyValue.format(value, name) + ";\r";
|
827
873
|
};
|
828
874
|
|
829
|
-
exports.format = format;
|
830
|
-
|
831
875
|
/***/ },
|
832
876
|
/* 18 */
|
833
877
|
/***/ function(module, exports, __webpack_require__) {
|
@@ -853,7 +897,7 @@ return /******/ (function(modules) { // webpackBootstrap
|
|
853
897
|
*/
|
854
898
|
var propertyNameOf = exports.propertyNameOf = function propertyNameOf(p) {
|
855
899
|
var name = (0, _string.dasherize)(p);
|
856
|
-
return propertyNameValidator.
|
900
|
+
return !propertyNameValidator.error(name) ? name : null;
|
857
901
|
};
|
858
902
|
|
859
903
|
var format = exports.format = function format(name) {
|
@@ -872,14 +916,13 @@ return /******/ (function(modules) { // webpackBootstrap
|
|
872
916
|
value: true
|
873
917
|
});
|
874
918
|
|
875
|
-
var format = function format(value, name) {
|
876
|
-
if (value && typeof value == 'number' && name != 'z-index' && name != 'opacity' && name != 'zoom') {
|
877
|
-
return '' + value + 'px';
|
878
|
-
}
|
879
|
-
return value;
|
880
|
-
};
|
881
919
|
|
882
|
-
|
920
|
+
var unitlessProperties = ['z-index', 'opacity', 'zoom'];
|
921
|
+
|
922
|
+
var format = exports.format = function format(value, name) {
|
923
|
+
var appendPx = value && typeof value == 'number' && unitlessProperties.indexOf(name) == -1;
|
924
|
+
return '' + value + (appendPx ? 'px' : '');
|
925
|
+
};
|
883
926
|
|
884
927
|
/***/ },
|
885
928
|
/* 20 */
|
metadata
CHANGED
@@ -1,14 +1,14 @@
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
2
2
|
name: csster
|
3
3
|
version: !ruby/object:Gem::Version
|
4
|
-
version: 1.
|
4
|
+
version: 1.3.0
|
5
5
|
platform: ruby
|
6
6
|
authors:
|
7
7
|
- Andrew Peterson
|
8
8
|
autorequire:
|
9
9
|
bindir: bin
|
10
10
|
cert_chain: []
|
11
|
-
date: 2016-03-
|
11
|
+
date: 2016-03-08 00:00:00.000000000 Z
|
12
12
|
dependencies:
|
13
13
|
- !ruby/object:Gem::Dependency
|
14
14
|
name: railties
|