├── .bithoundrc
├── .eslintrc.js
├── .gitignore
├── .travis.yml
├── HISTORY.md
├── README.md
├── dist
    ├── README.md
    ├── inline
    │   └── README.md
    ├── j2c.amd.js
    ├── j2c.commonjs.js
    ├── j2c.commonjs.min.js
    ├── j2c.es6.js
    ├── j2c.global.js
    ├── j2c.global.min.js
    └── j2c.global.min.js.gz
├── example
    ├── pocketgrid.js
    └── pocketgrid.mixin.js
├── package.json
├── scripts
    ├── build.js
    ├── filesize.js
    └── regexps.js
├── src
    ├── at-rules.js
    ├── declarations.js
    ├── helpers.js
    ├── main.js
    └── sheet.js
└── test
    └── test.js


/.bithoundrc:
--------------------------------------------------------------------------------
1 | {
2 |   "ignore": [
3 |     "dist/*.js",
4 |     "example/*.js"
5 |   ]
6 | }


--------------------------------------------------------------------------------
/.eslintrc.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |     rules: {
 3 |         indent: [
 4 |             2, 2
 5 |         ],
 6 |         quotes: [
 7 |             2,
 8 |             "single",
 9 |             "avoid-escape"
10 |         ],
11 |         "linebreak-style": [
12 |             2,
13 |             "unix"
14 |         ],
15 |         semi: [
16 |             2,
17 |             "never"
18 |         ],
19 |         "no-trailing-spaces": [2]
20 |     },
21 |     parserOptions: {
22 |         ecmaVersion: 6,
23 |         sourceType: "module"
24 |     },
25 |     ecmaFeatures: {
26 |         modules: true
27 |     },
28 |     sourceType: "module",
29 |     env: {
30 |         es6: true,
31 |         node: true,
32 |         browser: true
33 |     },
34 |     extends: "eslint:recommended"
35 | }


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | gh_pages
3 | 


--------------------------------------------------------------------------------
/.travis.yml:
--------------------------------------------------------------------------------
1 | language: node_js
2 | node_js:
3 |   - '0.10'
4 |   - '0.11'
5 |   - '5.0'
6 | script: npm run cover


--------------------------------------------------------------------------------
/HISTORY.md:
--------------------------------------------------------------------------------
 1 | # Change log
 2 | 
 3 | ## v0.11.1 (2016-03-8) and v0.11.2
 4 | 
 5 | - Patch bump to fix what `npm` installs by default (I erronously published `v1.0.0-x` on without `--tag next`, twice) Note to self, don't publish in the
 6 | wee hours.
 7 | 
 8 | ## v0.11.0
 9 | 
10 | - Refactor the innards so that the source order is completely respected in the output, including conditional at-rules.
11 | - Speed ++
12 | - Autoprefix all animation-* and transition.
13 | - Some error messages are now inserted in the result as -error-prefixed at-rules and :pseudo-classes.
14 | 
15 | ## v0.10.0
16 | 
17 | - At long last allow element selectors without a prepended space at the top level
18 | - Autoprefix animation and animation-name with -webkit- too like we do for `@keyframes`.
19 | - Tweaks and cleanup
20 | 
21 | ## v0.9.0
22 | 
23 | - Added @extend
24 | - Internal change: switched to rollup for build.
25 | - Dropped the inline-only version for now.
26 | 
27 | ## v0.8.3
28 | 
29 | - Cosmetic release that fixed typos in the docs
30 | 
31 | ## v0.8.2
32 | 
33 | - cleanup
34 | - improve test suite
35 | - update docs to reflect move to the `j2css` Github organization.
36 | 
37 | ## v0.8.0
38 | 
39 | - docs cleanup (version bump for npmjs.com dislpay).
40 | 
41 | ## v0.8.0
42 | 
43 | - classes and animations/@keyframes names are now localized by default in `j2c.sheet()`.
44 | - introduced `@global{}` and `:global()` to reach global names
45 | - dropped `j2c.scoped()` which is obsoleted by the above.
46 | - dropped bulk auto-prefixing.
47 | - better at-rules handling.
48 | - support for autoDeCamelization of property-names.
49 | - New signature for `j2c.sheet([namespace1, namespace2, ] source)` where `namespace` is an object
50 | with plain -> localized names for classes and animations.
51 | - allow to create custom j2c instances that can be extended with plugins *[needs docs]*.
52 | - Hardened the test suite.
53 | - Bug fix: the source order is now respected in the output, with the caveat that, for nested selector, the children appear in source before the parent.
54 | 
55 | ## v0.7.3
56 | 
57 | - Identical to `v0.7.2`. Somehow a bad commit ended up on NPM for that version.
58 | 
59 | ## v0.7.2
60 | 
61 | - Fix regression: Vendor names were not in the corrrect order.
62 | 
63 | ## pre-v0.7.2
64 | 
65 | Uncharted territory.


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # j2c [![npm][npm_img]][npm_url] ![.min.gz][size_img]
  2 | 
  3 | [![Join the chat at https://gitter.im/j2css/j2c][gitter_img]][gitter_url]
  4 | [![Build Status][trav_img]][trav_url]
  5 | [![Coverage Status][cov_img]][cov_url]
  6 | [![Dependency Status][deps_img]][deps_url]
  7 | [![bitHound Score][bithound_img]][bithound_url]
  8 | [![downloads][monthly_img]][monthly_url]
  9 | 
 10 | 
 11 | A lean, no hassle CSS in JS solution.
 12 | 
 13 | Scales from standalone use to isomorphic apps. Compatible with any framework/view library.
 14 | 
 15 | Supports building either inline styles of full style sheets.
 16 | 
 17 | In `sheet` mode, `j2c` follows a [**'local by default'**](https://medium.com/seek-ui-engineering/the-end-of-global-css-90d2a4a06284) approach to make it easier to write components without having to worry about class and animation names clashes.
 18 | 
 19 | Like SASS, LESS and Stylus, `j2c` supports:
 20 | 
 21 | - mixins
 22 | - `@extend`
 23 | - nested selectors (in `sheet` mode)
 24 | 
 25 | All standard CSS at-rules are available out of the box, most importantly:
 26 | 
 27 | - `@media` and `@supports` can be nested anywhere in the sheet
 28 | - `@keyframes` (with automatic generation of `@-webkit-keyframes`)
 29 | - `@font-face`
 30 | 
 31 | The [home page](http://j2c.py.gy) has a few interactive demos.
 32 | 
 33 | [trav_img]: https://travis-ci.org/j2css/j2c.svg?branch=master
 34 | [trav_url]: https://travis-ci.org/j2css/j2c
 35 | [cov_img]: https://coveralls.io/repos/j2css/j2c/badge.svg?branch=master
 36 | [cov_url]: https://coveralls.io/r/j2css/j2c?branch=master
 37 | [npm_img]: https://img.shields.io/npm/v/j2c.svg
 38 | [npm_url]: https://npmjs.com/package/j2c
 39 | [monthly_url]: http://npm-stat.com/charts.html?package=j2c
 40 | [monthly_img]: https://img.shields.io/npm/dm/j2c.svg
 41 | [size_img]: https://badges.herokuapp.com/size/npm/j2c/dist/j2c.global.min.js.gz?label=.min.gz
 42 | [deps_img]: https://david-dm.org/j2css/j2c.svg
 43 | [deps_url]: https://david-dm.org/j2css/j2c
 44 | [bithound_img]: https://www.bithound.io/github/j2css/j2c/badges/score.svg
 45 | [bithound_url]: https://www.bithound.io/github/j2css/j2c/
 46 | [gitter_img]: https://badges.gitter.im/Join%20Chat.svg
 47 | [gitter_url]: https://gitter.im/j2css/j2c
 48 | 
 49 | ## Table of Contents
 50 | 
 51 | - [Installation](#installation)
 52 | - [Usage](#usage)
 53 |   - [For inline declarations: `j2c.inline(declarations)`](#for-inline-declarations-j2cinlinedeclarations)
 54 |     - [Arrays](#arrays)
 55 |       - [Overloading properties](#overloading-properties)
 56 |       - [Mixins](#mixins)
 57 |     - [Vendor prefixes:](#vendor-prefixes)
 58 |   - [For building a style sheet: `j2c.sheet(rules)`](#for-building-a-style-sheet-j2csheetrules)
 59 |     - [Combining multiple selectors](#combining-multiple-selectors)
 60 |     - [At-rules](#at-rules)
 61 |     - [Mixins and @extend](#mixins-and-extend)
 62 |     - [CSS Hacks](#css-hacks)
 63 | - [Inserting a stylesheet in a document](#inserting-the-stylesheet-in-the-document)
 64 | - [Isomorphic app support](#isomorphic-app-support)
 65 | - [Limitations](#limitations)
 66 | - [TODO](#todo)
 67 | - [License: MIT](#license-mit)
 68 | 
 69 | ----
 70 | 
 71 | ## Installation
 72 | 
 73 | ```Bash
 74 | $ npm install j2c
 75 | ```
 76 | 
 77 | then
 78 | 
 79 | ```JavaScript
 80 | var j2c = require('j2c')
 81 | ```
 82 | 
 83 | There are also separate builds for `AMD`, `ES6` and a global `window.j2c` in the `dist` directory.
 84 | 
 85 | ## Usage
 86 | 
 87 | `j2c` can be used to either assemble inline declarations or full style sheets with, by default, locally unique class names.
 88 | 
 89 | Here's an example of locallized class names (as pioneered AFAIK by [JSS](https://github.com/jsstyles/jss)):
 90 | 
 91 | ```JavaScript
 92 | sheet = j2c.sheet({
 93 |   ".title": {
 94 |     font_size: "3rem",
 95 |     "&:before": {
 96 |       color: "#00b",
 97 |       content: "'#'"
 98 |     }
 99 |   },
100 |   ".content": {
101 |     line_height: "1.6em",
102 |     padding: "2rem"
103 |   }
104 | });
105 | ```
106 | 
107 | Unique class names are generated automatically for `title` and `content`:
108 | 
109 | ```CSS
110 | .content_j2c_fvp6zc2gdj35evhsl73ffzq_0 {
111 |     line-height: 1.6em;
112 |     padding: 2rem;
113 | }
114 | 
115 | .title_j2c_fvp6zc2gdj35evhsl73ffzq_0 {
116 |     font-size: 3rem;
117 | }
118 | 
119 | .title_j2c_fvp6zc2gdj35evhsl73ffzq_0:before {
120 |     content: '#';
121 |     color: #888;
122 | }
123 | ```
124 | 
125 | `sheet` is now a `String` object with a `title` and `content` properties that hold the unique class names. It can be used like this in your view, either on the server, in the browser of for isomorphic apps (let's say this is part of a React view):
126 | 
127 | ```Haml
128 | <div>
129 |   <style>{sheet}</style>
130 |   <h3 class="{sheet.title}">Hello</h3>
131 |   <div class="{sheet.content}">Foo bar baz...</div>
132 | </div>
133 | ```
134 | 
135 | The `<style>{sheet}</style>` construct works in modernish browsers (ie9+). For older IE, see [below](#inserting-the-stylesheet-in-the-document).
136 | 
137 | Animation names are also "localized" by default, font names are left untouched.
138 | 
139 | ### For inline declarations: `j2c.inline(declarations)`
140 | 
141 | The `j2c` function takes in JS objects and builds a `property:value;` list out of it.
142 | 
143 | ```JavaScript
144 | j2c.inline({
145 |   backgroundColor:"red",
146 |   border: {
147 |     top$left: {
148 |       width: "1px",
149 |       color: "white"
150 |     }
151 |   }
152 | })
153 | ```
154 | 
155 | Outputs, as you could expect (white space added for readability):
156 | 
157 | ```CSS
158 | background-color: red;
159 | border-top-color: white;
160 | border-top-width: 1px;
161 | border-left-color: white;
162 | border-left-width: 1px;
163 | ```
164 | 
165 | `CamelCase` and `_snake_case` names are turned into `-dash-case`, so that property names can be left unquoted in the source.
166 | 
167 | Combine (sub)properties who share the same value by using `$` as a separator. It is useful to specify vendor prefixes.
168 | 
169 | #### Property ordering
170 | 
171 | Provided you don't delete and re-add properties to your objects, the properties will end up in the CSS sheet in the source order.
172 | 
173 | #### Arrays for value overloading and mixins
174 | 
175 | You can sneak in arrays anywhere in the source tree. It enables many advanced techniques, like:
176 | 
177 | ##### Overloading properties
178 | 
179 | If you want to overload a property by using an array at the value level
180 | 
181 | ```JavaScript
182 | j2c.inline({
183 |     border_color: ["#33e", "rgba(64,64,255,0.8)"],
184 | })
185 | ```
186 | 
187 | becomes
188 | 
189 | ```CSS
190 | border-color:#33e;
191 | border-color:rgba(64,64,255,0.8);
192 | ```
193 | 
194 | Alternatively:
195 | 
196 | ```JavaScript
197 | j2c.inline([
198 |   { border_color: "#33e"},
199 |   { border_color: "rgba(64,64,255,0.8)"}
200 | ])
201 | ```
202 | 
203 | and
204 | 
205 | ```JavaScript
206 | j2c.inline({
207 |     border:[
208 |       {color: "#33e"},
209 |       {color: "rgba(64,64,255,0.8)"}
210 |     ]
211 | })
212 | ```
213 | 
214 | will give the same result.
215 | 
216 | ##### Mixins
217 | 
218 | You can mix in properties by using a function call in an array:
219 | 
220 | ```JavaScript
221 | function mixin(color) {
222 |   return {
223 |     border_color: color,
224 |     color: color
225 |   }
226 | }
227 | 
228 | j2c.inline([
229 |   mixin("red"),
230 |   {
231 |     font_size:"2em"
232 |   }
233 | ])
234 | ```
235 | 
236 | ```CSS
237 | 'color:red;
238 | border-color:red;
239 | font-size:2em;'
240 | ```
241 | 
242 | The mixin could also be a plain JS object if it doesn't need to be customized.
243 | 
244 | ### For building a style sheet: `j2c.sheet(rules)`
245 | 
246 | Everything found in the `inline` section applies here too, I recommend you read it first.
247 | 
248 | To give you a taste of what can be done in j2c, here's a first, rather advanced example.
249 | 
250 | ```JavaScript
251 | s = j2c.sheet({
252 |     "ul.foo": {
253 |         "@media condition": {
254 |             color: "red"
255 |         },
256 |         // properties for the main ul.my_root_class elements
257 |         font: {
258 |             size: "2em",
259 |             family: "sans-serif"
260 |         },
261 |         // underscores in property names are converted to dashes.
262 |         background_color: "#44f",
263 |         // CamelCase is also automatically handled.
264 |         borderRadius:"2px",
265 | 
266 |         // sub-selector for children element, notice the mandatory initial space
267 |         // signifying a child element.
268 |         " li": {
269 |             padding:{
270 |                 left: "5px",
271 |                 top: "10px"
272 |             },
273 |             // convenient $ shortcut.
274 |             border: {left$right: {width: "2px"}}
275 |         }
276 |     }
277 | })
278 | ```
279 | 
280 | Output (after indentation):
281 | 
282 | ```CSS
283 | ul.foo_j2c_fgdl0s2a5fmle5g56rbuax71_0 li{
284 |   padding-left:5px;
285 |   padding-top:10px;
286 |   border-left-width:2px;
287 |   border-right-width:2px;
288 | }
289 | ul.foo_j2c_fgdl0s2a5fmle5g56rbuax71_0{
290 |   font-size:2em;
291 |   font-family:sans-serif;
292 |   background-color:#44f;
293 | }
294 | @media condition{
295 |   ul.foo_j2c_fgdl0s2a5fmle5g56rbuax71_0{
296 |     color:red;
297 |   }
298 | }
299 | ```
300 | 
301 | Were `s.foo === "foo_j2c_fgdl0s2a5fmle5g56rbuax71_0 "`
302 | 
303 | #### Global class and animation names.
304 | 
305 | You can define or refer to global names using the `@global{}` pseudo at-rule, and the `:global()` function. This will thus preserve the `.foo`, `.bar` and `baz` names:
306 | 
307 | ```JavaScript
308 | s = j2c.sheet({
309 |     "@global": {
310 |         "ul.foo": {
311 |             font_size: "2em",
312 |         }
313 |     },
314 |     "p:global(.bar)" :{
315 |         color:"#f00",
316 |         animation_name: ":global(baz)"
317 |     },
318 |     "@keyframes :global(baz)": {
319 |         // define the global "baz" animation here.
320 |     }
321 | })
322 | ```
323 | 
324 | `@global` blocks also globalize animation names (not shown above).
325 | 
326 | #### Combining multiple selectors
327 | 
328 | TODO: refactor this section to mention the SASS-like `&` placeholder (at any arbitrary position).
329 | 
330 | Here's a excerpt from the `j2c` port of the [PocketGrid](https://github.com/arnaudleray/pocketgrid/blob/44aa1154a56b11a852f7252943f265028c28f056/pocketgrid.css).
331 | 
332 | ```JavaScript
333 | j2c.sheet({"@global": {
334 |   ".block,.blockgroup":{
335 |     ",:before,:after":{          // Notice the initial comma.
336 |       box_sizing:"border-box"
337 |     }
338 |   }
339 | }})
340 | ```
341 | 
342 | Nesting `",:before,:after"` inside the `".block,.blockgroup"` block combines `[".block", ".blockgroup"]` with `["", ":before", ":after"]`, giving
343 | 
344 | ```CSS
345 | .block,.block:before,.block:after,.blockgroup,.blockgroup:before,.blockgroup:after{
346 |     box-sizing:border-box;
347 | }
348 | ```
349 | 
350 | Mathy folks call this as a Cartesian product.
351 | 
352 | #### At-rules
353 | 
354 | `j2c` handles @-rules out of the box, including nested ones.
355 | 
356 | ```JavaScript
357 | j2c.sheet({
358 |   "@media screen": {
359 |     " p": {
360 |       foo:"bar",
361 |       "@media (orientation: landscape)": {
362 |         baz:"qux"
363 |       }
364 |     }
365 |   }
366 | })
367 | ```
368 | 
369 | becomes
370 | 
371 | ```CSS
372 | @media screen {
373 |   p {
374 |     foo: bar;
375 |   }
376 |   @media (orientation: landscape) {
377 |     p {
378 |       baz: qux;
379 |     }
380 |   }
381 | }
382 | ```
383 | 
384 | For `@keyframes` rules, a `@-webkit-keyframes` block is automatically created with auto-prefixed property names.
385 | 
386 | #### Mixins and `@extend`
387 | 
388 | Mixins and `@extend` make `j2c` sheets composable. Both techniques can be combined.
389 | 
390 | ##### Mixins and source objects composition
391 | 
392 | For mixins, arrays works the same way at the selector level as they do at the property/value one. You can therefore use the [method described in the "inline" section](#mixins) to create mixins, that can return either at-rules, selectors, properties or a mix thereof.
393 | 
394 | ##### `@extend`
395 | 
396 | `j2c` also supports a SASS-like `@extend`, more powerful in some regards, but more limited in others.
397 | 
398 | The limitation is that it can only deal with classes. Specifically:
399 | 
400 | ```JS
401 | namespace = j2c.sheet({
402 |   '.red': {color: '#f00'}
403 | })
404 | 
405 | sheet = j2c.sheet(namespace, {
406 |   '.great': {
407 |     fontSize: '3em'
408 |   },
409 |   '.greatRed': {
410 |     '@extend': ['.great', '.red'] // you can also pass a single class
411 |   }
412 | })
413 | ```
414 | 
415 | `sheet.greatRed` is now defined as `'great_j2c...  red_j2c...  greatRed_j2c...'` (class names truncated for readability).
416 | 
417 | The extra power comes from the fact that you can inherit from arbitrary classes, not just j2c-defined ones:
418 | 
419 | ```JS
420 | sheet = j2c.sheet(namespace, {
421 |   '.myButton': {
422 |     '@extend': ':global(.button)', // coming, say, form Bootstrap
423 |     color: theme.highlight
424 |   }
425 | })
426 | ```
427 | 
428 | Here, `sheet.myButton` is `'button  myButton_j2c...'`.
429 | 
430 | While `@extend` can import from arbitrary classes, it only imports into local ones.
431 | 
432 | `@extend` works fine with nested selectors. If there are more than one class in a selector, `@extend` applies to the last (right-most) one.
433 | 
434 | ###### Invalid uses
435 | 
436 | If the last or only selector is a `:global(.klass)`, in `@global` context, or in the absence of a class in the selector, `@extend` is turned into a `at-extend` property and inserted as-is in the sheet.
437 | 
438 | #### CSS Hacks
439 | 
440 | Since `j2c.sheet` only accepts property names that match `/^[-_0-9A-Za-z$]+$/`, it is not possible to express CSS hacks using objects. You can, however, work around the issue by using arrays and strings instead.
441 | 
442 | Here's another modified excerpt from the PocketGrid port:
443 | 
444 | ```JavaScript
445 | j2c.sheet({
446 |   ".blockgroup": [
447 |     "*zoom: 1; /* hackety hackery */",
448 |     {
449 |       "list-style-type":"none",
450 |       padding:0,
451 |       margin:0
452 |     }
453 |   ]
454 | })
455 | ```
456 | 
457 | Array elements are inserted in sequence, and string literals are treated as a list of properties, and inserted as is.
458 | 
459 | Result:
460 | 
461 | ```CSS
462 | .blockgroup{
463 | *zoom: 1; /* hackety hackery */
464 | }
465 | .blockgroup{
466 |   list-style-type:none;
467 |   padding:0;
468 |   margin:0;
469 | }
470 | ```
471 | 
472 | You can also pass th result of `j2c.inline` which is less picky about property names.
473 | 
474 | ## Vendor prefixes:
475 | 
476 | _Note: The prefix story in `j2c` is currently sub-optimal. I hope at some point to port prefixfree as a plugin. It is already small, and half of it isn't needed for `j2c` (the half that deals with finding and updating style elements in the DOM)._
477 | 
478 | ### Prefixing property names
479 | 
480 | You can specify the prefixes by hand using the "$" operator where needed:
481 | 
482 | ```JavaScript
483 | j2c.inline({
484 |   // Notice the trailing dollar, required for the unprefixed property.
485 |   _o$_ms$_moz$_webkit$: {foo: "bar"},
486 |   hello: "world"
487 | });
488 | ```
489 | 
490 | Compiles to
491 | 
492 | ```CSS
493 | p {
494 |   -o-foo:bar;
495 |   -ms-foo:bar;
496 |   -moz-foo:bar;
497 |   -webkit-foo:bar;
498 |   foo:bar;
499 |   hello:world;
500 | }
501 | ```
502 | 
503 | 
504 | ### Prefixing values
505 | 
506 | `/!\` This will be replaced by a plugin in a future version.
507 | 
508 | To prefix values, you can use `j2c.prefix`:
509 | 
510 | ```JavaScript
511 | j2c.inline({
512 |   background_image:j2c.prefix(
513 |     "linear-gradient(90deg, #f00, #ff0)",
514 |     ['moz','webkit']
515 |   )
516 | })
517 | ```
518 | 
519 | ```CSS
520 | background-image: -moz-linear-gradient(90deg, #f00, #ff0);
521 | background-image: -webkit-linear-gradient(90deg, #f00, #ff0);
522 | background-image: linear-gradient(90deg, #f00, #ff0);
523 | ```
524 | 
525 | There's no support for prefixing a list multiple values (e.g. `"linear-gradient(90deg, #f00, #ff0),linear-gradient(90deg, #f00, #ff0)"`).
526 | 
527 | ### `@-webkit-keyframes`
528 | 
529 | `/!\` This will be replaced by a plugin in a future version.
530 | 
531 | `@keyframes` blocks automatically produce their `@-webkit-keyframes` counterparts, even in the absence of a vendor list argument.
532 | 
533 | ## Inserting the stylesheet in the document
534 | 
535 | Foreword: Please note that the following is based on research on the Web, but not effectively tested in Internet explorer at the moment.
536 | 
537 | ### ie9+
538 | 
539 | Add a text node to a new `style` element.
540 | 
541 | ```JavaScript
542 | var style = document.createElement('style');
543 | style.type = 'text/css'; // my not even be needed
544 | style.appendChild(document.createTextNode(sheet));
545 | ```
546 | 
547 | In frameworks:
548 | 
549 | ```Handlebars
550 | <style>{sheet}</style>
551 | ```
552 | 
553 | Sweet, innit?
554 | 
555 | ### ie8+ (sheets up to 32k in ie8)
556 | 
557 | As above, but with a `link` element and a data URI.
558 | 
559 | ```Handlebars
560 | <link rel="stylesheet" itemprop="stylesheet" href="{'data:,' + encodeURIComponent(sheet)}" />
561 | ```
562 | 
563 | Note that ie8 has a 32k limit on the length of data URIs. It supports base 64 in data URIs, but doesn't provide `btoa`, which would not be useful in this context anyway, since base 64 encoded sheets are larger than URI encoded ones.
564 | 
565 | ### ie6+ (unlimited sheet size)
566 | 
567 | 
568 | ```JavaScript
569 | function stylize(element, sheet){
570 |     element.type = 'text/css';
571 |     if (element.styleSheet){
572 |       element.styleSheet.cssText = sheet;
573 |     } else {
574 |       element.appendChild(document.createTextNode(sheet));
575 |     }
576 |     return element;
577 | }
578 | var el = document.createElement('style')
579 | var sheet = j2c.sheet(...)
580 | stylize(el, sheet);
581 | document.head.appendChild(el);
582 | ```
583 | 
584 | For this to work in client-side frameworks, you need to grab a handle on the actual `<style>` DOM node. This means that you must create a custom component/directive.
585 | 
586 | Here are a few examples:
587 | 
588 | #### React:
589 | 
590 | ```JavaScript
591 | var j2cComponent = {
592 |    render: function(){
593 |         return <style />
594 |     }
595 |     componentDidMount: function(){
596 |         stylize(React.findDOMNode(this), this.prop.sheet)
597 |     }
598 | }
599 | ```
600 | 
601 | #### Mithril:
602 | 
603 | ```JavaScript
604 | var j2cComponent = {
605 |     view: function(ctrl, args) {
606 |         return m("style", {
607 |             config: function(el, isinit) {
608 |                 if(!isinit) {
609 |                     stylize(el, args.sheet);
610 |                 }
611 |             }
612 |         })
613 |     }
614 | }
615 | ```
616 | 
617 | #### Angular v1.3- (1.4 is ie9+, and support dynamic `<style>` tags).
618 | 
619 | ```JavaScript
620 | module.directive('j2cSheet', function() {
621 |   return {
622 |     restrict: 'A',
623 |     link: function link(scope, element, attrs) {
624 |         if (element.tagName.toUpperCase() !== "STYLE") throw 'j2cSheet expects a <style> element';
625 |         stylize(element[0], attrs.j2cSheet);
626 |     }
627 |   };
628 | });
629 | 
630 | module.directive('j2cInline', function() {
631 |   return {
632 |     restrict: 'A',
633 |     link: function link(scope, element, attrs) {
634 |         element[0].style += j2c.inline(attrs.j2cInline);
635 |     }
636 |   };
637 | });
638 | ```
639 | 
640 | ## Isomorphic app support
641 | 
642 | Since `j2c` relies on the view library/framework for DOM insertion, it supports the isomorphic scenarios the same way your view solution does (see the previous section). Caveat: local class names will be regenerated on hydration, which means that styles will have to be computed twice by the browser.
643 | 
644 | ## Error handling
645 | 
646 | `j2c` at this point does little validation. When errors are encountered, it has no way to determine where in the source code the error occurred. To make it easier to pinpoint issues, the errors are inserted in the sheet as, for example `@-error-bad-at-rule "@medis";` or `:bad-sub-selector-foo`. This way you get the broader context of where the error occureed in the source.
647 | 
648 | ## Limitations
649 | 
650 | ### Selectors and properties order
651 | 
652 | `j2c` relies on JS objects to define selectors and properties. The iteration order of object properties is officially undefined, but in practice it only differs in situations that do not apply to `j2c`. As long as we're using non-numeric keys and we don't delete then re-add object properties, the source object order is respected in the output.
653 | 
654 | ### Little input validation
655 | 
656 | `j2c` knows the bare minimum to output a valid stylesheet when provided with valid input. It will hapily accept invalid selectors, properties and values, and could in that case produce a broken stylesheet.
657 | 
658 | At this point, it will 
659 | 
660 | I may get around and write a validator companion, but I'm not there yet :-).
661 | 
662 | ### Little pretty printing
663 | 
664 | `j2c` puts each selector list and properties on their own lines, but doesn't indent or add other white space.
665 | 
666 | For debugging purposes, I recommend that you pipe `j2c`'s  output through a [[be](https://github.com/mattbasta/crass) [au](https://github.com/beautify-web/js-beautify) [ti](https://github.com/senchalabs/cssbeautify) [fier](http://csstidy.sourceforge.net/)] of your choice.
667 | 
668 | ### Vendor prefixes corner cases
669 | 
670 | `j2c` doesn't provide any facility to auto-prefix a list of values. It is relevant in the context of multiple gradient backgrounds and `transition`/`transition-property` values.
671 | 
672 | ## TODO:
673 | 
674 | - Improve the web site. Move the docs there.
675 | - Test DOM insertion methods in old IE.
676 | 
677 | ## License: MIT
678 | 


--------------------------------------------------------------------------------
/dist/README.md:
--------------------------------------------------------------------------------
1 | Builds for the various module systems out there.
2 | 
3 | See `inline` directory for smaller builds that only provide the `ìnline()` method.


--------------------------------------------------------------------------------
/dist/inline/README.md:
--------------------------------------------------------------------------------
1 | No inline builds currently.
2 | 
3 | This directory contains `j2c` builds that only provide the `inline()` function. Mingzipped, half the size of the full library.


--------------------------------------------------------------------------------
/dist/j2c.amd.js:
--------------------------------------------------------------------------------
  1 | define(function () { 'use strict';
  2 | 
  3 |   var emptyObject = {};
  4 |   var emptyArray = [];
  5 |   var type = emptyObject.toString;
  6 |   var own =  emptyObject.hasOwnProperty;
  7 |   var OBJECT = type.call(emptyObject);
  8 |   var ARRAY =  type.call(emptyArray);
  9 |   var STRING = type.call('');
 10 |   /*/-inline-/*/
 11 |   // function cartesian(a, b, res, i, j) {
 12 |   //   res = [];
 13 |   //   for (j in b) if (own.call(b, j))
 14 |   //     for (i in a) if (own.call(a, i))
 15 |   //       res.push(a[i] + b[j]);
 16 |   //   return res;
 17 |   // }
 18 |   /*/-inline-/*/
 19 | 
 20 |   /* /-statements-/*/
 21 |   function cartesian(a,b, selectorP, res, i, j) {
 22 |     res = []
 23 |     for (j in b) if(own.call(b, j))
 24 |       for (i in a) if(own.call(a, i))
 25 |         res.push(concat(a[i], b[j], selectorP))
 26 |     return res
 27 |   }
 28 | 
 29 |   function concat(a, b, selectorP) {
 30 |     // `b.replace(/&/g, a)` is never falsy, since the
 31 |     // 'a' of cartesian can't be the empty string
 32 |     // in selector mode.
 33 |     return selectorP && (
 34 |       /^[-\w$]+$/.test(b) && ':-error-bad-sub-selector-' + b ||
 35 |       /&/.test(b) && /* never falsy */ b.replace(/&/g, a)
 36 |     ) || a + b
 37 |   }
 38 | 
 39 |   function decamelize(match) {
 40 |     return '-' + match.toLowerCase()
 41 |   }
 42 | 
 43 |   /**
 44 |    * Handles the property:value; pairs.
 45 |    *
 46 |    * @param {array|object|string} o - the declarations.
 47 |    * @param {string[]} buf - the buffer in which the final style sheet is built.
 48 |    * @param {string} prefix - the current property or a prefix in case of nested
 49 |    *                          sub-properties.
 50 |    * @param {string} vendors - a list of vendor prefixes.
 51 |    * @Param {boolean} local - are we in @local or in @global scope.
 52 |    * @param {object} ns - helper functions to populate or create the @local namespace
 53 |    *                      and to @extend classes.
 54 |    * @param {function} ns.e - @extend helper.
 55 |    * @param {function} ns.l - @local helper.
 56 |    */
 57 | 
 58 |   function declarations(o, buf, prefix, vendors, local, ns, /*var*/ k, v, kk) {
 59 |     if (o==null) return
 60 |     if (/\$/.test(prefix)) {
 61 |       for (kk in (prefix = prefix.split('$'))) if (own.call(prefix, kk)) {
 62 |         declarations(o, buf, prefix[kk], vendors, local, ns)
 63 |       }
 64 |       return
 65 |     }
 66 |     switch ( type.call(o = o.valueOf()) ) {
 67 |     case ARRAY:
 68 |       for (k = 0; k < o.length; k++)
 69 |         declarations(o[k], buf, prefix, vendors, local, ns)
 70 |       break
 71 |     case OBJECT:
 72 |       // prefix is falsy iif it is the empty string, which means we're at the root
 73 |       // of the declarations list.
 74 |       prefix = (prefix && prefix + '-')
 75 |       for (k in o) if (own.call(o, k)){
 76 |         v = o[k]
 77 |         if (/\$/.test(k)) {
 78 |           for (kk in (k = k.split('$'))) if (own.call(k, kk))
 79 |             declarations(v, buf, prefix + k[kk], vendors, local, ns)
 80 |         } else {
 81 |           declarations(v, buf, prefix + k, vendors, local, ns)
 82 |         }
 83 |       }
 84 |       break
 85 |     default:
 86 |       // prefix is falsy when it is "", which means that we're
 87 |       // at the top level.
 88 |       // `o` is then treated as a `property:value` pair.
 89 |       // otherwise, `prefix` is the property name, and
 90 |       // `o` is the value.
 91 |       k = prefix.replace(/_/g, '-').replace(/[A-Z]/g, decamelize)
 92 | 
 93 |       if (local && (k == 'animation-name' || k == 'animation')) {
 94 |         o = o.split(',').map(function (o) {
 95 |           return o.replace(/()(?::global\(\s*([-\w]+)\s*\)|()([-\w]+))/, ns.l)
 96 |         }).join(',')
 97 |       }
 98 |       if (/^animation|^transition/.test(k)) vendors = ['webkit']
 99 |       // '@' in properties also triggers the *ielte7 hack
100 |       // Since plugins dispatch on the /^@/ for at-rules
101 |       // we swap the at for an asterisk
102 |       // http://browserhacks.com/#hack-6d49e92634f26ae6d6e46b3ebc10019a
103 | 
104 |       k = k.replace(/^@/, '*')
105 | 
106 |   /*/-statements-/*/
107 |       // vendorify
108 |       for (kk = 0; kk < vendors.length; kk++)
109 |         buf.push('-', vendors[kk], '-', k, k ? ':': '', o, ';\n')
110 |   /*/-statements-/*/
111 | 
112 |       buf.push(k, k ? ':': '', o, ';\n')
113 | 
114 |     }
115 |   }
116 | 
117 |   var findClass = /()(?::global\(\s*(\.[-\w]+)\s*\)|(\.)([-\w]+))/g
118 | 
119 |   /**
120 |    * Hanldes at-rules
121 |    *
122 |    * @param {string} k - The at-rule name, and, if takes both parameters and a
123 |    *                     block, the parameters.
124 |    * @param {string[]} buf - the buffer in which the final style sheet is built
125 |    * @param {string[]} v - Either parameters for block-less rules or their block
126 |    *                       for the others.
127 |    * @param {string} prefix - the current selector or a prefix in case of nested rules
128 |    * @param {string} rawPrefix - as above, but without localization transformations
129 |    * @param {string} vendors - a list of vendor prefixes
130 |    * @Param {boolean} local - are we in @local or in @global scope?
131 |    * @param {object} ns - helper functions to populate or create the @local namespace
132 |    *                      and to @extend classes
133 |    * @param {function} ns.e - @extend helper
134 |    * @param {function} ns.l - @local helper
135 |    */
136 | 
137 |   function at(k, v, buf, prefix, rawPrefix, vendors, local, ns){
138 |     var kk
139 |     if (/^@(?:namespace|import|charset)$/.test(k)) {
140 |       if(type.call(v) == ARRAY){
141 |         for (kk = 0; kk < v.length; kk++) {
142 |           buf.push(k, ' ', v[kk], ';\n')
143 |         }
144 |       } else {
145 |         buf.push(k, ' ', v, ';\n')
146 |       }
147 |     } else if (/^@keyframes /.test(k)) {
148 |       k = local ? k.replace(
149 |         // generated by script/regexps.js
150 |         /( )(?::global\(\s*([-\w]+)\s*\)|()([-\w]+))/,
151 |         ns.l
152 |       ) : k
153 |       // add a @-webkit-keyframes block too.
154 | 
155 |       buf.push('@-webkit-', k.slice(1), ' {\n')
156 |       sheet(v, buf, '', '', ['webkit'])
157 |       buf.push('}\n')
158 | 
159 |       buf.push(k, ' {\n')
160 |       sheet(v, buf, '', '', vendors, local, ns)
161 |       buf.push('}\n')
162 | 
163 |     } else if (/^@extends?$/.test(k)) {
164 | 
165 |       /*eslint-disable no-cond-assign*/
166 |       // pick the last class to be extended
167 |       while (kk = findClass.exec(rawPrefix)) k = kk[4]
168 |       /*eslint-enable no-cond-assign*/
169 |       if (k == null || !local) {
170 |         // we're in a @global{} block
171 |         buf.push('@-error-cannot-extend-in-global-context ', JSON.stringify(rawPrefix), ';\n')
172 |         return
173 |       } else if (/^@extends?$/.test(k)) {
174 |         // no class in the selector
175 |         buf.push('@-error-no-class-to-extend-in ', JSON.stringify(rawPrefix), ';\n')
176 |         return
177 |       }
178 |       ns.e(
179 |         type.call(v) == ARRAY ? v.map(function (parent) {
180 |           return parent.replace(/()(?::global\(\s*(\.[-\w]+)\s*\)|()\.([-\w]+))/, ns.l)
181 |         }).join(' ') : v.replace(/()(?::global\(\s*(\.[-\w]+)\s*\)|()\.([-\w]+))/, ns.l),
182 |         k
183 |       )
184 | 
185 |     } else if (/^@(?:font-face$|viewport$|page )/.test(k)) {
186 |       sheet(v, buf, k, k, emptyArray)
187 | 
188 |     } else if (/^@global$/.test(k)) {
189 |       sheet(v, buf, prefix, rawPrefix, vendors, 0, ns)
190 | 
191 |     } else if (/^@local$/.test(k)) {
192 |       sheet(v, buf, prefix, rawPrefix, vendors, 1, ns)
193 | 
194 |     } else if (/^@(?:media |supports |document )./.test(k)) {
195 |       buf.push(k, ' {\n')
196 |       sheet(v, buf, prefix, rawPrefix, vendors, local, ns)
197 |       buf.push('}\n')
198 | 
199 |     } else {
200 |       buf.push('@-error-unsupported-at-rule ', JSON.stringify(k), ';\n')
201 |     }
202 |   }
203 | 
204 |   /**
205 |    * Add rulesets and other CSS statements to the sheet.
206 |    *
207 |    * @param {array|string|object} statements - a source object or sub-object.
208 |    * @param {string[]} buf - the buffer in which the final style sheet is built
209 |    * @param {string} prefix - the current selector or a prefix in case of nested rules
210 |    * @param {string} rawPrefix - as above, but without localization transformations
211 |    * @param {string} vendors - a list of vendor prefixes
212 |    * @Param {boolean} local - are we in @local or in @global scope?
213 |    * @param {object} ns - helper functions to populate or create the @local namespace
214 |    *                      and to @extend classes
215 |    * @param {function} ns.e - @extend helper
216 |    * @param {function} ns.l - @local helper
217 |    */
218 |   function sheet(statements, buf, prefix, rawPrefix, vendors, local, ns) {
219 |     var k, kk, v, inDeclaration
220 | 
221 |     switch (type.call(statements)) {
222 | 
223 |     case ARRAY:
224 |       for (k = 0; k < statements.length; k++)
225 |         sheet(statements[k], buf, prefix, rawPrefix, vendors, local, ns)
226 |       break
227 | 
228 |     case OBJECT:
229 |       for (k in statements) {
230 |         v = statements[k]
231 |         if (prefix && /^[-\w$]+$/.test(k)) {
232 |           if (!inDeclaration) {
233 |             inDeclaration = 1
234 |             buf.push(( prefix || '*' ), ' {\n')
235 |           }
236 |           declarations(v, buf, k, vendors, local, ns)
237 |         } else if (/^@/.test(k)) {
238 |           // Handle At-rules
239 |           inDeclaration = (inDeclaration && buf.push('}\n') && 0)
240 | 
241 |           at(k, v, buf, prefix, rawPrefix, vendors, local, ns)
242 | 
243 |         } else {
244 |           // selector or nested sub-selectors
245 | 
246 |           inDeclaration = (inDeclaration && buf.push('}\n') && 0)
247 | 
248 |           sheet(v, buf,
249 |             (kk = /,/.test(prefix) || prefix && /,/.test(k)) ?
250 |               cartesian(prefix.split(','), ( local ?
251 |             k.replace(
252 |               /()(?::global\(\s*(\.[-\w]+)\s*\)|(\.)([-\w]+))/g, ns.l
253 |             ) : k
254 |           ).split(','), prefix).join(',') :
255 |               concat(prefix, ( local ?
256 |             k.replace(
257 |               /()(?::global\(\s*(\.[-\w]+)\s*\)|(\.)([-\w]+))/g, ns.l
258 |             ) : k
259 |           ), prefix),
260 |             kk ?
261 |               cartesian(rawPrefix.split(','), k.split(','), rawPrefix).join(',') :
262 |               concat(rawPrefix, k, rawPrefix),
263 |             vendors,
264 |             local, ns
265 |           )
266 |         }
267 |       }
268 |       if (inDeclaration) buf.push('}\n')
269 |       break
270 |     case STRING:
271 |       buf.push(
272 |           ( prefix || ':-error-no-selector' ) , ' {\n'
273 |         )
274 |       declarations(statements, buf, '', vendors, local, ns)
275 |       buf.push('}\n')
276 |     }
277 |   }
278 | 
279 |   var scope_root = '_j2c_' +
280 |         Math.floor(Math.random() * 0x100000000).toString(36) + '_' +
281 |         Math.floor(Math.random() * 0x100000000).toString(36) + '_' +
282 |         Math.floor(Math.random() * 0x100000000).toString(36) + '_' +
283 |         Math.floor(Math.random() * 0x100000000).toString(36) + '_';
284 |   var counter = 0;
285 |   function j2c(res) {
286 |     res = res || {}
287 |     var extensions = []
288 | 
289 |     function finalize(buf, i) {
290 |       for (i = 0; i< extensions.length; i++) buf = extensions[i](buf) || buf
291 |       return buf.join('')
292 |     }
293 | 
294 |     res.use = function() {
295 |       var args = arguments
296 |       for (var i = 0; i < args.length; i++){
297 |         extensions.push(args[i])
298 |       }
299 |       return res
300 |     }
301 |   /*/-statements-/*/
302 |     res.sheet = function(ns, statements) {
303 |       if (arguments.length === 1) {
304 |         statements = ns; ns = {}
305 |       }
306 |       var
307 |         suffix = scope_root + counter++,
308 |         locals = {},
309 |         k, buf = []
310 |       // pick only non-numeric keys since `(NaN != NaN) === true`
311 |       for (k in ns) if (k-0 != k-0 && own.call(ns, k)) {
312 |         locals[k] = ns[k]
313 |       }
314 |       sheet(
315 |         statements, buf, '', '', emptyArray /*vendors*/,
316 |         1, // local
317 |         {
318 |           e: function extend(parent, child) {
319 |             var nameList = locals[child]
320 |             locals[child] =
321 |               nameList.slice(0, nameList.lastIndexOf(' ') + 1) +
322 |               parent + ' ' +
323 |               nameList.slice(nameList.lastIndexOf(' ') + 1)
324 |           },
325 |           l: function localize(match, space, global, dot, name) {
326 |             if (global) {
327 |               return space + global
328 |             }
329 |             if (!locals[name]) locals[name] = name + suffix
330 |             return space + dot + locals[name].match(/\S+$/)
331 |           }
332 |         }
333 |       )
334 |       /*jshint -W053 */
335 |       buf = new String(finalize(buf))
336 |       /*jshint +W053 */
337 |       for (k in locals) if (own.call(locals, k)) buf[k] = locals[k]
338 |       return buf
339 |     }
340 |   /*/-statements-/*/
341 |     res.inline = function (locals, decl, buf) {
342 |       if (arguments.length === 1) {
343 |         decl = locals; locals = {}
344 |       }
345 |       declarations(
346 |         decl,
347 |         buf = [],
348 |         '', // prefix
349 |         emptyArray, // vendors
350 |         1,
351 |         {
352 |           l: function localize(match, space, global, dot, name) {
353 |             if (global) return space + global
354 |             if (!locals[name]) return name
355 |             return space + dot + locals[name]
356 |           }
357 |         })
358 |       return finalize(buf)
359 |     }
360 | 
361 |     res.prefix = function(val, vendors) {
362 |       return cartesian(
363 |         vendors.map(function(p){return '-' + p + '-'}).concat(['']),
364 |         [val]
365 |       )
366 |     }
367 |     return res
368 |   }
369 | 
370 |   j2c.global = function(x) {
371 |     return ':global(' + x + ')'
372 |   }
373 | 
374 |   j2c.kv = kv
375 |   function kv (k, v, o) {
376 |     o = {}
377 |     o[k] = v
378 |     return o
379 |   }
380 | 
381 |   j2c.at = function at (rule, params, block) {
382 |     if (
383 |       arguments.length < 3
384 |     ) {
385 |       var _at = at.bind.apply(at, [null].concat([].slice.call(arguments,0)))
386 |       _at.toString = function(){return '@' + rule + ' ' + params}
387 |       return _at
388 |     }
389 |     else return kv('@' + rule + ' ' + params, block)
390 |   }
391 | 
392 |   j2c(j2c)
393 |   delete j2c.use
394 | 
395 |   return j2c;
396 | 
397 | });


--------------------------------------------------------------------------------
/dist/j2c.commonjs.js:
--------------------------------------------------------------------------------
  1 | 'use strict';
  2 | 
  3 | var emptyObject = {};
  4 | var emptyArray = [];
  5 | var type = emptyObject.toString;
  6 | var own =  emptyObject.hasOwnProperty;
  7 | var OBJECT = type.call(emptyObject);
  8 | var ARRAY =  type.call(emptyArray);
  9 | var STRING = type.call('');
 10 | /*/-inline-/*/
 11 | // function cartesian(a, b, res, i, j) {
 12 | //   res = [];
 13 | //   for (j in b) if (own.call(b, j))
 14 | //     for (i in a) if (own.call(a, i))
 15 | //       res.push(a[i] + b[j]);
 16 | //   return res;
 17 | // }
 18 | /*/-inline-/*/
 19 | 
 20 | /* /-statements-/*/
 21 | function cartesian(a,b, selectorP, res, i, j) {
 22 |   res = []
 23 |   for (j in b) if(own.call(b, j))
 24 |     for (i in a) if(own.call(a, i))
 25 |       res.push(concat(a[i], b[j], selectorP))
 26 |   return res
 27 | }
 28 | 
 29 | function concat(a, b, selectorP) {
 30 |   // `b.replace(/&/g, a)` is never falsy, since the
 31 |   // 'a' of cartesian can't be the empty string
 32 |   // in selector mode.
 33 |   return selectorP && (
 34 |     /^[-\w$]+$/.test(b) && ':-error-bad-sub-selector-' + b ||
 35 |     /&/.test(b) && /* never falsy */ b.replace(/&/g, a)
 36 |   ) || a + b
 37 | }
 38 | 
 39 | function decamelize(match) {
 40 |   return '-' + match.toLowerCase()
 41 | }
 42 | 
 43 | /**
 44 |  * Handles the property:value; pairs.
 45 |  *
 46 |  * @param {array|object|string} o - the declarations.
 47 |  * @param {string[]} buf - the buffer in which the final style sheet is built.
 48 |  * @param {string} prefix - the current property or a prefix in case of nested
 49 |  *                          sub-properties.
 50 |  * @param {string} vendors - a list of vendor prefixes.
 51 |  * @Param {boolean} local - are we in @local or in @global scope.
 52 |  * @param {object} ns - helper functions to populate or create the @local namespace
 53 |  *                      and to @extend classes.
 54 |  * @param {function} ns.e - @extend helper.
 55 |  * @param {function} ns.l - @local helper.
 56 |  */
 57 | 
 58 | function declarations(o, buf, prefix, vendors, local, ns, /*var*/ k, v, kk) {
 59 |   if (o==null) return
 60 |   if (/\$/.test(prefix)) {
 61 |     for (kk in (prefix = prefix.split('$'))) if (own.call(prefix, kk)) {
 62 |       declarations(o, buf, prefix[kk], vendors, local, ns)
 63 |     }
 64 |     return
 65 |   }
 66 |   switch ( type.call(o = o.valueOf()) ) {
 67 |   case ARRAY:
 68 |     for (k = 0; k < o.length; k++)
 69 |       declarations(o[k], buf, prefix, vendors, local, ns)
 70 |     break
 71 |   case OBJECT:
 72 |     // prefix is falsy iif it is the empty string, which means we're at the root
 73 |     // of the declarations list.
 74 |     prefix = (prefix && prefix + '-')
 75 |     for (k in o) if (own.call(o, k)){
 76 |       v = o[k]
 77 |       if (/\$/.test(k)) {
 78 |         for (kk in (k = k.split('$'))) if (own.call(k, kk))
 79 |           declarations(v, buf, prefix + k[kk], vendors, local, ns)
 80 |       } else {
 81 |         declarations(v, buf, prefix + k, vendors, local, ns)
 82 |       }
 83 |     }
 84 |     break
 85 |   default:
 86 |     // prefix is falsy when it is "", which means that we're
 87 |     // at the top level.
 88 |     // `o` is then treated as a `property:value` pair.
 89 |     // otherwise, `prefix` is the property name, and
 90 |     // `o` is the value.
 91 |     k = prefix.replace(/_/g, '-').replace(/[A-Z]/g, decamelize)
 92 | 
 93 |     if (local && (k == 'animation-name' || k == 'animation')) {
 94 |       o = o.split(',').map(function (o) {
 95 |         return o.replace(/()(?::global\(\s*([-\w]+)\s*\)|()([-\w]+))/, ns.l)
 96 |       }).join(',')
 97 |     }
 98 |     if (/^animation|^transition/.test(k)) vendors = ['webkit']
 99 |     // '@' in properties also triggers the *ielte7 hack
100 |     // Since plugins dispatch on the /^@/ for at-rules
101 |     // we swap the at for an asterisk
102 |     // http://browserhacks.com/#hack-6d49e92634f26ae6d6e46b3ebc10019a
103 | 
104 |     k = k.replace(/^@/, '*')
105 | 
106 | /*/-statements-/*/
107 |     // vendorify
108 |     for (kk = 0; kk < vendors.length; kk++)
109 |       buf.push('-', vendors[kk], '-', k, k ? ':': '', o, ';\n')
110 | /*/-statements-/*/
111 | 
112 |     buf.push(k, k ? ':': '', o, ';\n')
113 | 
114 |   }
115 | }
116 | 
117 | var findClass = /()(?::global\(\s*(\.[-\w]+)\s*\)|(\.)([-\w]+))/g
118 | 
119 | /**
120 |  * Hanldes at-rules
121 |  *
122 |  * @param {string} k - The at-rule name, and, if takes both parameters and a
123 |  *                     block, the parameters.
124 |  * @param {string[]} buf - the buffer in which the final style sheet is built
125 |  * @param {string[]} v - Either parameters for block-less rules or their block
126 |  *                       for the others.
127 |  * @param {string} prefix - the current selector or a prefix in case of nested rules
128 |  * @param {string} rawPrefix - as above, but without localization transformations
129 |  * @param {string} vendors - a list of vendor prefixes
130 |  * @Param {boolean} local - are we in @local or in @global scope?
131 |  * @param {object} ns - helper functions to populate or create the @local namespace
132 |  *                      and to @extend classes
133 |  * @param {function} ns.e - @extend helper
134 |  * @param {function} ns.l - @local helper
135 |  */
136 | 
137 | function at(k, v, buf, prefix, rawPrefix, vendors, local, ns){
138 |   var kk
139 |   if (/^@(?:namespace|import|charset)$/.test(k)) {
140 |     if(type.call(v) == ARRAY){
141 |       for (kk = 0; kk < v.length; kk++) {
142 |         buf.push(k, ' ', v[kk], ';\n')
143 |       }
144 |     } else {
145 |       buf.push(k, ' ', v, ';\n')
146 |     }
147 |   } else if (/^@keyframes /.test(k)) {
148 |     k = local ? k.replace(
149 |       // generated by script/regexps.js
150 |       /( )(?::global\(\s*([-\w]+)\s*\)|()([-\w]+))/,
151 |       ns.l
152 |     ) : k
153 |     // add a @-webkit-keyframes block too.
154 | 
155 |     buf.push('@-webkit-', k.slice(1), ' {\n')
156 |     sheet(v, buf, '', '', ['webkit'])
157 |     buf.push('}\n')
158 | 
159 |     buf.push(k, ' {\n')
160 |     sheet(v, buf, '', '', vendors, local, ns)
161 |     buf.push('}\n')
162 | 
163 |   } else if (/^@extends?$/.test(k)) {
164 | 
165 |     /*eslint-disable no-cond-assign*/
166 |     // pick the last class to be extended
167 |     while (kk = findClass.exec(rawPrefix)) k = kk[4]
168 |     /*eslint-enable no-cond-assign*/
169 |     if (k == null || !local) {
170 |       // we're in a @global{} block
171 |       buf.push('@-error-cannot-extend-in-global-context ', JSON.stringify(rawPrefix), ';\n')
172 |       return
173 |     } else if (/^@extends?$/.test(k)) {
174 |       // no class in the selector
175 |       buf.push('@-error-no-class-to-extend-in ', JSON.stringify(rawPrefix), ';\n')
176 |       return
177 |     }
178 |     ns.e(
179 |       type.call(v) == ARRAY ? v.map(function (parent) {
180 |         return parent.replace(/()(?::global\(\s*(\.[-\w]+)\s*\)|()\.([-\w]+))/, ns.l)
181 |       }).join(' ') : v.replace(/()(?::global\(\s*(\.[-\w]+)\s*\)|()\.([-\w]+))/, ns.l),
182 |       k
183 |     )
184 | 
185 |   } else if (/^@(?:font-face$|viewport$|page )/.test(k)) {
186 |     sheet(v, buf, k, k, emptyArray)
187 | 
188 |   } else if (/^@global$/.test(k)) {
189 |     sheet(v, buf, prefix, rawPrefix, vendors, 0, ns)
190 | 
191 |   } else if (/^@local$/.test(k)) {
192 |     sheet(v, buf, prefix, rawPrefix, vendors, 1, ns)
193 | 
194 |   } else if (/^@(?:media |supports |document )./.test(k)) {
195 |     buf.push(k, ' {\n')
196 |     sheet(v, buf, prefix, rawPrefix, vendors, local, ns)
197 |     buf.push('}\n')
198 | 
199 |   } else {
200 |     buf.push('@-error-unsupported-at-rule ', JSON.stringify(k), ';\n')
201 |   }
202 | }
203 | 
204 | /**
205 |  * Add rulesets and other CSS statements to the sheet.
206 |  *
207 |  * @param {array|string|object} statements - a source object or sub-object.
208 |  * @param {string[]} buf - the buffer in which the final style sheet is built
209 |  * @param {string} prefix - the current selector or a prefix in case of nested rules
210 |  * @param {string} rawPrefix - as above, but without localization transformations
211 |  * @param {string} vendors - a list of vendor prefixes
212 |  * @Param {boolean} local - are we in @local or in @global scope?
213 |  * @param {object} ns - helper functions to populate or create the @local namespace
214 |  *                      and to @extend classes
215 |  * @param {function} ns.e - @extend helper
216 |  * @param {function} ns.l - @local helper
217 |  */
218 | function sheet(statements, buf, prefix, rawPrefix, vendors, local, ns) {
219 |   var k, kk, v, inDeclaration
220 | 
221 |   switch (type.call(statements)) {
222 | 
223 |   case ARRAY:
224 |     for (k = 0; k < statements.length; k++)
225 |       sheet(statements[k], buf, prefix, rawPrefix, vendors, local, ns)
226 |     break
227 | 
228 |   case OBJECT:
229 |     for (k in statements) {
230 |       v = statements[k]
231 |       if (prefix && /^[-\w$]+$/.test(k)) {
232 |         if (!inDeclaration) {
233 |           inDeclaration = 1
234 |           buf.push(( prefix || '*' ), ' {\n')
235 |         }
236 |         declarations(v, buf, k, vendors, local, ns)
237 |       } else if (/^@/.test(k)) {
238 |         // Handle At-rules
239 |         inDeclaration = (inDeclaration && buf.push('}\n') && 0)
240 | 
241 |         at(k, v, buf, prefix, rawPrefix, vendors, local, ns)
242 | 
243 |       } else {
244 |         // selector or nested sub-selectors
245 | 
246 |         inDeclaration = (inDeclaration && buf.push('}\n') && 0)
247 | 
248 |         sheet(v, buf,
249 |           (kk = /,/.test(prefix) || prefix && /,/.test(k)) ?
250 |             cartesian(prefix.split(','), ( local ?
251 |           k.replace(
252 |             /()(?::global\(\s*(\.[-\w]+)\s*\)|(\.)([-\w]+))/g, ns.l
253 |           ) : k
254 |         ).split(','), prefix).join(',') :
255 |             concat(prefix, ( local ?
256 |           k.replace(
257 |             /()(?::global\(\s*(\.[-\w]+)\s*\)|(\.)([-\w]+))/g, ns.l
258 |           ) : k
259 |         ), prefix),
260 |           kk ?
261 |             cartesian(rawPrefix.split(','), k.split(','), rawPrefix).join(',') :
262 |             concat(rawPrefix, k, rawPrefix),
263 |           vendors,
264 |           local, ns
265 |         )
266 |       }
267 |     }
268 |     if (inDeclaration) buf.push('}\n')
269 |     break
270 |   case STRING:
271 |     buf.push(
272 |         ( prefix || ':-error-no-selector' ) , ' {\n'
273 |       )
274 |     declarations(statements, buf, '', vendors, local, ns)
275 |     buf.push('}\n')
276 |   }
277 | }
278 | 
279 | var scope_root = '_j2c_' +
280 |       Math.floor(Math.random() * 0x100000000).toString(36) + '_' +
281 |       Math.floor(Math.random() * 0x100000000).toString(36) + '_' +
282 |       Math.floor(Math.random() * 0x100000000).toString(36) + '_' +
283 |       Math.floor(Math.random() * 0x100000000).toString(36) + '_';
284 | var counter = 0;
285 | function j2c(res) {
286 |   res = res || {}
287 |   var extensions = []
288 | 
289 |   function finalize(buf, i) {
290 |     for (i = 0; i< extensions.length; i++) buf = extensions[i](buf) || buf
291 |     return buf.join('')
292 |   }
293 | 
294 |   res.use = function() {
295 |     var args = arguments
296 |     for (var i = 0; i < args.length; i++){
297 |       extensions.push(args[i])
298 |     }
299 |     return res
300 |   }
301 | /*/-statements-/*/
302 |   res.sheet = function(ns, statements) {
303 |     if (arguments.length === 1) {
304 |       statements = ns; ns = {}
305 |     }
306 |     var
307 |       suffix = scope_root + counter++,
308 |       locals = {},
309 |       k, buf = []
310 |     // pick only non-numeric keys since `(NaN != NaN) === true`
311 |     for (k in ns) if (k-0 != k-0 && own.call(ns, k)) {
312 |       locals[k] = ns[k]
313 |     }
314 |     sheet(
315 |       statements, buf, '', '', emptyArray /*vendors*/,
316 |       1, // local
317 |       {
318 |         e: function extend(parent, child) {
319 |           var nameList = locals[child]
320 |           locals[child] =
321 |             nameList.slice(0, nameList.lastIndexOf(' ') + 1) +
322 |             parent + ' ' +
323 |             nameList.slice(nameList.lastIndexOf(' ') + 1)
324 |         },
325 |         l: function localize(match, space, global, dot, name) {
326 |           if (global) {
327 |             return space + global
328 |           }
329 |           if (!locals[name]) locals[name] = name + suffix
330 |           return space + dot + locals[name].match(/\S+$/)
331 |         }
332 |       }
333 |     )
334 |     /*jshint -W053 */
335 |     buf = new String(finalize(buf))
336 |     /*jshint +W053 */
337 |     for (k in locals) if (own.call(locals, k)) buf[k] = locals[k]
338 |     return buf
339 |   }
340 | /*/-statements-/*/
341 |   res.inline = function (locals, decl, buf) {
342 |     if (arguments.length === 1) {
343 |       decl = locals; locals = {}
344 |     }
345 |     declarations(
346 |       decl,
347 |       buf = [],
348 |       '', // prefix
349 |       emptyArray, // vendors
350 |       1,
351 |       {
352 |         l: function localize(match, space, global, dot, name) {
353 |           if (global) return space + global
354 |           if (!locals[name]) return name
355 |           return space + dot + locals[name]
356 |         }
357 |       })
358 |     return finalize(buf)
359 |   }
360 | 
361 |   res.prefix = function(val, vendors) {
362 |     return cartesian(
363 |       vendors.map(function(p){return '-' + p + '-'}).concat(['']),
364 |       [val]
365 |     )
366 |   }
367 |   return res
368 | }
369 | 
370 | j2c.global = function(x) {
371 |   return ':global(' + x + ')'
372 | }
373 | 
374 | j2c.kv = kv
375 | function kv (k, v, o) {
376 |   o = {}
377 |   o[k] = v
378 |   return o
379 | }
380 | 
381 | j2c.at = function at (rule, params, block) {
382 |   if (
383 |     arguments.length < 3
384 |   ) {
385 |     var _at = at.bind.apply(at, [null].concat([].slice.call(arguments,0)))
386 |     _at.toString = function(){return '@' + rule + ' ' + params}
387 |     return _at
388 |   }
389 |   else return kv('@' + rule + ' ' + params, block)
390 | }
391 | 
392 | j2c(j2c)
393 | delete j2c.use
394 | 
395 | module.exports = j2c;


--------------------------------------------------------------------------------
/dist/j2c.commonjs.min.js:
--------------------------------------------------------------------------------
1 | "use strict";function cartesian(e,t,n,r,a,s){r=[];for(s in t)if(own.call(t,s))for(a in e)own.call(e,a)&&r.push(concat(e[a],t[s],n));return r}function concat(e,t,n){return n&&(/^[-\w$]+$/.test(t)&&":-error-bad-sub-selector-"+t||/&/.test(t)&&t.replace(/&/g,e))||e+t}function decamelize(e){return"-"+e.toLowerCase()}function declarations(e,t,n,r,a,s,l,o,c){if(null!=e)if(/\$/.test(n))for(c in n=n.split("$"))own.call(n,c)&&declarations(e,t,n[c],r,a,s);else switch(type.call(e=e.valueOf())){case ARRAY:for(l=0;l<e.length;l++)declarations(e[l],t,n,r,a,s);break;case OBJECT:n=n&&n+"-";for(l in e)if(own.call(e,l))if(o=e[l],/\$/.test(l))for(c in l=l.split("$"))own.call(l,c)&&declarations(o,t,n+l[c],r,a,s);else declarations(o,t,n+l,r,a,s);break;default:for(l=n.replace(/_/g,"-").replace(/[A-Z]/g,decamelize),!a||"animation-name"!=l&&"animation"!=l||(e=e.split(",").map(function(e){return e.replace(/()(?::global\(\s*([-\w]+)\s*\)|()([-\w]+))/,s.l)}).join(",")),/^animation|^transition/.test(l)&&(r=["webkit"]),l=l.replace(/^@/,"*"),c=0;c<r.length;c++)t.push("-",r[c],"-",l,l?":":"",e,";\n");t.push(l,l?":":"",e,";\n")}}function at(e,t,n,r,a,s,l,o){var c;if(/^@(?:namespace|import|charset)$/.test(e))if(type.call(t)==ARRAY)for(c=0;c<t.length;c++)n.push(e," ",t[c],";\n");else n.push(e," ",t,";\n");else if(/^@keyframes /.test(e))e=l?e.replace(/( )(?::global\(\s*([-\w]+)\s*\)|()([-\w]+))/,o.l):e,n.push("@-webkit-",e.slice(1)," {\n"),sheet(t,n,"","",["webkit"]),n.push("}\n"),n.push(e," {\n"),sheet(t,n,"","",s,l,o),n.push("}\n");else if(/^@extends?$/.test(e)){for(;c=findClass.exec(a);)e=c[4];if(null==e||!l)return void n.push("@-error-cannot-extend-in-global-context ",JSON.stringify(a),";\n");if(/^@extends?$/.test(e))return void n.push("@-error-no-class-to-extend-in ",JSON.stringify(a),";\n");o.e(type.call(t)==ARRAY?t.map(function(e){return e.replace(/()(?::global\(\s*(\.[-\w]+)\s*\)|()\.([-\w]+))/,o.l)}).join(" "):t.replace(/()(?::global\(\s*(\.[-\w]+)\s*\)|()\.([-\w]+))/,o.l),e)}else/^@(?:font-face$|viewport$|page )/.test(e)?sheet(t,n,e,e,emptyArray):/^@global$/.test(e)?sheet(t,n,r,a,s,0,o):/^@local$/.test(e)?sheet(t,n,r,a,s,1,o):/^@(?:media |supports |document )./.test(e)?(n.push(e," {\n"),sheet(t,n,r,a,s,l,o),n.push("}\n")):n.push("@-error-unsupported-at-rule ",JSON.stringify(e),";\n")}function sheet(e,t,n,r,a,s,l){var o,c,i,u;switch(type.call(e)){case ARRAY:for(o=0;o<e.length;o++)sheet(e[o],t,n,r,a,s,l);break;case OBJECT:for(o in e)i=e[o],n&&/^[-\w$]+$/.test(o)?(u||(u=1,t.push(n||"*"," {\n")),declarations(i,t,o,a,s,l)):/^@/.test(o)?(u=u&&t.push("}\n")&&0,at(o,i,t,n,r,a,s,l)):(u=u&&t.push("}\n")&&0,sheet(i,t,(c=/,/.test(n)||n&&/,/.test(o))?cartesian(n.split(","),(s?o.replace(/()(?::global\(\s*(\.[-\w]+)\s*\)|(\.)([-\w]+))/g,l.l):o).split(","),n).join(","):concat(n,s?o.replace(/()(?::global\(\s*(\.[-\w]+)\s*\)|(\.)([-\w]+))/g,l.l):o,n),c?cartesian(r.split(","),o.split(","),r).join(","):concat(r,o,r),a,s,l));u&&t.push("}\n");break;case STRING:t.push(n||":-error-no-selector"," {\n"),declarations(e,t,"",a,s,l),t.push("}\n")}}function j2c(e){function t(e,t){for(t=0;t<n.length;t++)e=n[t](e)||e;return e.join("")}e=e||{};var n=[];return e.use=function(){for(var t=arguments,r=0;r<t.length;r++)n.push(t[r]);return e},e.sheet=function(e,n){1===arguments.length&&(n=e,e={});var r,a=scope_root+counter++,s={},l=[];for(r in e)r-0!=r-0&&own.call(e,r)&&(s[r]=e[r]);sheet(n,l,"","",emptyArray,1,{e:function(e,t){var n=s[t];s[t]=n.slice(0,n.lastIndexOf(" ")+1)+e+" "+n.slice(n.lastIndexOf(" ")+1)},l:function(e,t,n,r,l){return n?t+n:(s[l]||(s[l]=l+a),t+r+s[l].match(/\S+$/))}}),l=new String(t(l));for(r in s)own.call(s,r)&&(l[r]=s[r]);return l},e.inline=function(e,n,r){return 1===arguments.length&&(n=e,e={}),declarations(n,r=[],"",emptyArray,1,{l:function(t,n,r,a,s){return r?n+r:e[s]?n+a+e[s]:s}}),t(r)},e.prefix=function(e,t){return cartesian(t.map(function(e){return"-"+e+"-"}).concat([""]),[e])},e}function kv(e,t,n){return n={},n[e]=t,n}var emptyObject={},emptyArray=[],type=emptyObject.toString,own=emptyObject.hasOwnProperty,OBJECT=type.call(emptyObject),ARRAY=type.call(emptyArray),STRING=type.call(""),findClass=/()(?::global\(\s*(\.[-\w]+)\s*\)|(\.)([-\w]+))/g,scope_root="_j2c_"+Math.floor(4294967296*Math.random()).toString(36)+"_"+Math.floor(4294967296*Math.random()).toString(36)+"_"+Math.floor(4294967296*Math.random()).toString(36)+"_"+Math.floor(4294967296*Math.random()).toString(36)+"_",counter=0;j2c.global=function(e){return":global("+e+")"},j2c.kv=kv,j2c.at=function e(t,n,r){if(arguments.length<3){var a=e.bind.apply(e,[null].concat([].slice.call(arguments,0)));return a.toString=function(){return"@"+t+" "+n},a}return kv("@"+t+" "+n,r)},j2c(j2c),delete j2c.use,module.exports=j2c;


--------------------------------------------------------------------------------
/dist/j2c.es6.js:
--------------------------------------------------------------------------------
  1 | var emptyObject = {};
  2 | var emptyArray = [];
  3 | var type = emptyObject.toString;
  4 | var own =  emptyObject.hasOwnProperty;
  5 | var OBJECT = type.call(emptyObject);
  6 | var ARRAY =  type.call(emptyArray);
  7 | var STRING = type.call('');
  8 | /*/-inline-/*/
  9 | // function cartesian(a, b, res, i, j) {
 10 | //   res = [];
 11 | //   for (j in b) if (own.call(b, j))
 12 | //     for (i in a) if (own.call(a, i))
 13 | //       res.push(a[i] + b[j]);
 14 | //   return res;
 15 | // }
 16 | /*/-inline-/*/
 17 | 
 18 | /* /-statements-/*/
 19 | function cartesian(a,b, selectorP, res, i, j) {
 20 |   res = []
 21 |   for (j in b) if(own.call(b, j))
 22 |     for (i in a) if(own.call(a, i))
 23 |       res.push(concat(a[i], b[j], selectorP))
 24 |   return res
 25 | }
 26 | 
 27 | function concat(a, b, selectorP) {
 28 |   // `b.replace(/&/g, a)` is never falsy, since the
 29 |   // 'a' of cartesian can't be the empty string
 30 |   // in selector mode.
 31 |   return selectorP && (
 32 |     /^[-\w$]+$/.test(b) && ':-error-bad-sub-selector-' + b ||
 33 |     /&/.test(b) && /* never falsy */ b.replace(/&/g, a)
 34 |   ) || a + b
 35 | }
 36 | 
 37 | function decamelize(match) {
 38 |   return '-' + match.toLowerCase()
 39 | }
 40 | 
 41 | /**
 42 |  * Handles the property:value; pairs.
 43 |  *
 44 |  * @param {array|object|string} o - the declarations.
 45 |  * @param {string[]} buf - the buffer in which the final style sheet is built.
 46 |  * @param {string} prefix - the current property or a prefix in case of nested
 47 |  *                          sub-properties.
 48 |  * @param {string} vendors - a list of vendor prefixes.
 49 |  * @Param {boolean} local - are we in @local or in @global scope.
 50 |  * @param {object} ns - helper functions to populate or create the @local namespace
 51 |  *                      and to @extend classes.
 52 |  * @param {function} ns.e - @extend helper.
 53 |  * @param {function} ns.l - @local helper.
 54 |  */
 55 | 
 56 | function declarations(o, buf, prefix, vendors, local, ns, /*var*/ k, v, kk) {
 57 |   if (o==null) return
 58 |   if (/\$/.test(prefix)) {
 59 |     for (kk in (prefix = prefix.split('$'))) if (own.call(prefix, kk)) {
 60 |       declarations(o, buf, prefix[kk], vendors, local, ns)
 61 |     }
 62 |     return
 63 |   }
 64 |   switch ( type.call(o = o.valueOf()) ) {
 65 |   case ARRAY:
 66 |     for (k = 0; k < o.length; k++)
 67 |       declarations(o[k], buf, prefix, vendors, local, ns)
 68 |     break
 69 |   case OBJECT:
 70 |     // prefix is falsy iif it is the empty string, which means we're at the root
 71 |     // of the declarations list.
 72 |     prefix = (prefix && prefix + '-')
 73 |     for (k in o) if (own.call(o, k)){
 74 |       v = o[k]
 75 |       if (/\$/.test(k)) {
 76 |         for (kk in (k = k.split('$'))) if (own.call(k, kk))
 77 |           declarations(v, buf, prefix + k[kk], vendors, local, ns)
 78 |       } else {
 79 |         declarations(v, buf, prefix + k, vendors, local, ns)
 80 |       }
 81 |     }
 82 |     break
 83 |   default:
 84 |     // prefix is falsy when it is "", which means that we're
 85 |     // at the top level.
 86 |     // `o` is then treated as a `property:value` pair.
 87 |     // otherwise, `prefix` is the property name, and
 88 |     // `o` is the value.
 89 |     k = prefix.replace(/_/g, '-').replace(/[A-Z]/g, decamelize)
 90 | 
 91 |     if (local && (k == 'animation-name' || k == 'animation')) {
 92 |       o = o.split(',').map(function (o) {
 93 |         return o.replace(/()(?::global\(\s*([-\w]+)\s*\)|()([-\w]+))/, ns.l)
 94 |       }).join(',')
 95 |     }
 96 |     if (/^animation|^transition/.test(k)) vendors = ['webkit']
 97 |     // '@' in properties also triggers the *ielte7 hack
 98 |     // Since plugins dispatch on the /^@/ for at-rules
 99 |     // we swap the at for an asterisk
100 |     // http://browserhacks.com/#hack-6d49e92634f26ae6d6e46b3ebc10019a
101 | 
102 |     k = k.replace(/^@/, '*')
103 | 
104 | /*/-statements-/*/
105 |     // vendorify
106 |     for (kk = 0; kk < vendors.length; kk++)
107 |       buf.push('-', vendors[kk], '-', k, k ? ':': '', o, ';\n')
108 | /*/-statements-/*/
109 | 
110 |     buf.push(k, k ? ':': '', o, ';\n')
111 | 
112 |   }
113 | }
114 | 
115 | var findClass = /()(?::global\(\s*(\.[-\w]+)\s*\)|(\.)([-\w]+))/g
116 | 
117 | /**
118 |  * Hanldes at-rules
119 |  *
120 |  * @param {string} k - The at-rule name, and, if takes both parameters and a
121 |  *                     block, the parameters.
122 |  * @param {string[]} buf - the buffer in which the final style sheet is built
123 |  * @param {string[]} v - Either parameters for block-less rules or their block
124 |  *                       for the others.
125 |  * @param {string} prefix - the current selector or a prefix in case of nested rules
126 |  * @param {string} rawPrefix - as above, but without localization transformations
127 |  * @param {string} vendors - a list of vendor prefixes
128 |  * @Param {boolean} local - are we in @local or in @global scope?
129 |  * @param {object} ns - helper functions to populate or create the @local namespace
130 |  *                      and to @extend classes
131 |  * @param {function} ns.e - @extend helper
132 |  * @param {function} ns.l - @local helper
133 |  */
134 | 
135 | function at(k, v, buf, prefix, rawPrefix, vendors, local, ns){
136 |   var kk
137 |   if (/^@(?:namespace|import|charset)$/.test(k)) {
138 |     if(type.call(v) == ARRAY){
139 |       for (kk = 0; kk < v.length; kk++) {
140 |         buf.push(k, ' ', v[kk], ';\n')
141 |       }
142 |     } else {
143 |       buf.push(k, ' ', v, ';\n')
144 |     }
145 |   } else if (/^@keyframes /.test(k)) {
146 |     k = local ? k.replace(
147 |       // generated by script/regexps.js
148 |       /( )(?::global\(\s*([-\w]+)\s*\)|()([-\w]+))/,
149 |       ns.l
150 |     ) : k
151 |     // add a @-webkit-keyframes block too.
152 | 
153 |     buf.push('@-webkit-', k.slice(1), ' {\n')
154 |     sheet(v, buf, '', '', ['webkit'])
155 |     buf.push('}\n')
156 | 
157 |     buf.push(k, ' {\n')
158 |     sheet(v, buf, '', '', vendors, local, ns)
159 |     buf.push('}\n')
160 | 
161 |   } else if (/^@extends?$/.test(k)) {
162 | 
163 |     /*eslint-disable no-cond-assign*/
164 |     // pick the last class to be extended
165 |     while (kk = findClass.exec(rawPrefix)) k = kk[4]
166 |     /*eslint-enable no-cond-assign*/
167 |     if (k == null || !local) {
168 |       // we're in a @global{} block
169 |       buf.push('@-error-cannot-extend-in-global-context ', JSON.stringify(rawPrefix), ';\n')
170 |       return
171 |     } else if (/^@extends?$/.test(k)) {
172 |       // no class in the selector
173 |       buf.push('@-error-no-class-to-extend-in ', JSON.stringify(rawPrefix), ';\n')
174 |       return
175 |     }
176 |     ns.e(
177 |       type.call(v) == ARRAY ? v.map(function (parent) {
178 |         return parent.replace(/()(?::global\(\s*(\.[-\w]+)\s*\)|()\.([-\w]+))/, ns.l)
179 |       }).join(' ') : v.replace(/()(?::global\(\s*(\.[-\w]+)\s*\)|()\.([-\w]+))/, ns.l),
180 |       k
181 |     )
182 | 
183 |   } else if (/^@(?:font-face$|viewport$|page )/.test(k)) {
184 |     sheet(v, buf, k, k, emptyArray)
185 | 
186 |   } else if (/^@global$/.test(k)) {
187 |     sheet(v, buf, prefix, rawPrefix, vendors, 0, ns)
188 | 
189 |   } else if (/^@local$/.test(k)) {
190 |     sheet(v, buf, prefix, rawPrefix, vendors, 1, ns)
191 | 
192 |   } else if (/^@(?:media |supports |document )./.test(k)) {
193 |     buf.push(k, ' {\n')
194 |     sheet(v, buf, prefix, rawPrefix, vendors, local, ns)
195 |     buf.push('}\n')
196 | 
197 |   } else {
198 |     buf.push('@-error-unsupported-at-rule ', JSON.stringify(k), ';\n')
199 |   }
200 | }
201 | 
202 | /**
203 |  * Add rulesets and other CSS statements to the sheet.
204 |  *
205 |  * @param {array|string|object} statements - a source object or sub-object.
206 |  * @param {string[]} buf - the buffer in which the final style sheet is built
207 |  * @param {string} prefix - the current selector or a prefix in case of nested rules
208 |  * @param {string} rawPrefix - as above, but without localization transformations
209 |  * @param {string} vendors - a list of vendor prefixes
210 |  * @Param {boolean} local - are we in @local or in @global scope?
211 |  * @param {object} ns - helper functions to populate or create the @local namespace
212 |  *                      and to @extend classes
213 |  * @param {function} ns.e - @extend helper
214 |  * @param {function} ns.l - @local helper
215 |  */
216 | function sheet(statements, buf, prefix, rawPrefix, vendors, local, ns) {
217 |   var k, kk, v, inDeclaration
218 | 
219 |   switch (type.call(statements)) {
220 | 
221 |   case ARRAY:
222 |     for (k = 0; k < statements.length; k++)
223 |       sheet(statements[k], buf, prefix, rawPrefix, vendors, local, ns)
224 |     break
225 | 
226 |   case OBJECT:
227 |     for (k in statements) {
228 |       v = statements[k]
229 |       if (prefix && /^[-\w$]+$/.test(k)) {
230 |         if (!inDeclaration) {
231 |           inDeclaration = 1
232 |           buf.push(( prefix || '*' ), ' {\n')
233 |         }
234 |         declarations(v, buf, k, vendors, local, ns)
235 |       } else if (/^@/.test(k)) {
236 |         // Handle At-rules
237 |         inDeclaration = (inDeclaration && buf.push('}\n') && 0)
238 | 
239 |         at(k, v, buf, prefix, rawPrefix, vendors, local, ns)
240 | 
241 |       } else {
242 |         // selector or nested sub-selectors
243 | 
244 |         inDeclaration = (inDeclaration && buf.push('}\n') && 0)
245 | 
246 |         sheet(v, buf,
247 |           (kk = /,/.test(prefix) || prefix && /,/.test(k)) ?
248 |             cartesian(prefix.split(','), ( local ?
249 |           k.replace(
250 |             /()(?::global\(\s*(\.[-\w]+)\s*\)|(\.)([-\w]+))/g, ns.l
251 |           ) : k
252 |         ).split(','), prefix).join(',') :
253 |             concat(prefix, ( local ?
254 |           k.replace(
255 |             /()(?::global\(\s*(\.[-\w]+)\s*\)|(\.)([-\w]+))/g, ns.l
256 |           ) : k
257 |         ), prefix),
258 |           kk ?
259 |             cartesian(rawPrefix.split(','), k.split(','), rawPrefix).join(',') :
260 |             concat(rawPrefix, k, rawPrefix),
261 |           vendors,
262 |           local, ns
263 |         )
264 |       }
265 |     }
266 |     if (inDeclaration) buf.push('}\n')
267 |     break
268 |   case STRING:
269 |     buf.push(
270 |         ( prefix || ':-error-no-selector' ) , ' {\n'
271 |       )
272 |     declarations(statements, buf, '', vendors, local, ns)
273 |     buf.push('}\n')
274 |   }
275 | }
276 | 
277 | var scope_root = '_j2c_' +
278 |       Math.floor(Math.random() * 0x100000000).toString(36) + '_' +
279 |       Math.floor(Math.random() * 0x100000000).toString(36) + '_' +
280 |       Math.floor(Math.random() * 0x100000000).toString(36) + '_' +
281 |       Math.floor(Math.random() * 0x100000000).toString(36) + '_';
282 | var counter = 0;
283 | function j2c(res) {
284 |   res = res || {}
285 |   var extensions = []
286 | 
287 |   function finalize(buf, i) {
288 |     for (i = 0; i< extensions.length; i++) buf = extensions[i](buf) || buf
289 |     return buf.join('')
290 |   }
291 | 
292 |   res.use = function() {
293 |     var args = arguments
294 |     for (var i = 0; i < args.length; i++){
295 |       extensions.push(args[i])
296 |     }
297 |     return res
298 |   }
299 | /*/-statements-/*/
300 |   res.sheet = function(ns, statements) {
301 |     if (arguments.length === 1) {
302 |       statements = ns; ns = {}
303 |     }
304 |     var
305 |       suffix = scope_root + counter++,
306 |       locals = {},
307 |       k, buf = []
308 |     // pick only non-numeric keys since `(NaN != NaN) === true`
309 |     for (k in ns) if (k-0 != k-0 && own.call(ns, k)) {
310 |       locals[k] = ns[k]
311 |     }
312 |     sheet(
313 |       statements, buf, '', '', emptyArray /*vendors*/,
314 |       1, // local
315 |       {
316 |         e: function extend(parent, child) {
317 |           var nameList = locals[child]
318 |           locals[child] =
319 |             nameList.slice(0, nameList.lastIndexOf(' ') + 1) +
320 |             parent + ' ' +
321 |             nameList.slice(nameList.lastIndexOf(' ') + 1)
322 |         },
323 |         l: function localize(match, space, global, dot, name) {
324 |           if (global) {
325 |             return space + global
326 |           }
327 |           if (!locals[name]) locals[name] = name + suffix
328 |           return space + dot + locals[name].match(/\S+$/)
329 |         }
330 |       }
331 |     )
332 |     /*jshint -W053 */
333 |     buf = new String(finalize(buf))
334 |     /*jshint +W053 */
335 |     for (k in locals) if (own.call(locals, k)) buf[k] = locals[k]
336 |     return buf
337 |   }
338 | /*/-statements-/*/
339 |   res.inline = function (locals, decl, buf) {
340 |     if (arguments.length === 1) {
341 |       decl = locals; locals = {}
342 |     }
343 |     declarations(
344 |       decl,
345 |       buf = [],
346 |       '', // prefix
347 |       emptyArray, // vendors
348 |       1,
349 |       {
350 |         l: function localize(match, space, global, dot, name) {
351 |           if (global) return space + global
352 |           if (!locals[name]) return name
353 |           return space + dot + locals[name]
354 |         }
355 |       })
356 |     return finalize(buf)
357 |   }
358 | 
359 |   res.prefix = function(val, vendors) {
360 |     return cartesian(
361 |       vendors.map(function(p){return '-' + p + '-'}).concat(['']),
362 |       [val]
363 |     )
364 |   }
365 |   return res
366 | }
367 | 
368 | j2c.global = function(x) {
369 |   return ':global(' + x + ')'
370 | }
371 | 
372 | j2c.kv = kv
373 | function kv (k, v, o) {
374 |   o = {}
375 |   o[k] = v
376 |   return o
377 | }
378 | 
379 | j2c.at = function at (rule, params, block) {
380 |   if (
381 |     arguments.length < 3
382 |   ) {
383 |     var _at = at.bind.apply(at, [null].concat([].slice.call(arguments,0)))
384 |     _at.toString = function(){return '@' + rule + ' ' + params}
385 |     return _at
386 |   }
387 |   else return kv('@' + rule + ' ' + params, block)
388 | }
389 | 
390 | j2c(j2c)
391 | delete j2c.use
392 | 
393 | export default j2c;


--------------------------------------------------------------------------------
/dist/j2c.global.js:
--------------------------------------------------------------------------------
  1 | var j2c = (function () { 'use strict';
  2 | 
  3 |   var emptyObject = {};
  4 |   var emptyArray = [];
  5 |   var type = emptyObject.toString;
  6 |   var own =  emptyObject.hasOwnProperty;
  7 |   var OBJECT = type.call(emptyObject);
  8 |   var ARRAY =  type.call(emptyArray);
  9 |   var STRING = type.call('');
 10 |   /*/-inline-/*/
 11 |   // function cartesian(a, b, res, i, j) {
 12 |   //   res = [];
 13 |   //   for (j in b) if (own.call(b, j))
 14 |   //     for (i in a) if (own.call(a, i))
 15 |   //       res.push(a[i] + b[j]);
 16 |   //   return res;
 17 |   // }
 18 |   /*/-inline-/*/
 19 | 
 20 |   /* /-statements-/*/
 21 |   function cartesian(a,b, selectorP, res, i, j) {
 22 |     res = []
 23 |     for (j in b) if(own.call(b, j))
 24 |       for (i in a) if(own.call(a, i))
 25 |         res.push(concat(a[i], b[j], selectorP))
 26 |     return res
 27 |   }
 28 | 
 29 |   function concat(a, b, selectorP) {
 30 |     // `b.replace(/&/g, a)` is never falsy, since the
 31 |     // 'a' of cartesian can't be the empty string
 32 |     // in selector mode.
 33 |     return selectorP && (
 34 |       /^[-\w$]+$/.test(b) && ':-error-bad-sub-selector-' + b ||
 35 |       /&/.test(b) && /* never falsy */ b.replace(/&/g, a)
 36 |     ) || a + b
 37 |   }
 38 | 
 39 |   function decamelize(match) {
 40 |     return '-' + match.toLowerCase()
 41 |   }
 42 | 
 43 |   /**
 44 |    * Handles the property:value; pairs.
 45 |    *
 46 |    * @param {array|object|string} o - the declarations.
 47 |    * @param {string[]} buf - the buffer in which the final style sheet is built.
 48 |    * @param {string} prefix - the current property or a prefix in case of nested
 49 |    *                          sub-properties.
 50 |    * @param {string} vendors - a list of vendor prefixes.
 51 |    * @Param {boolean} local - are we in @local or in @global scope.
 52 |    * @param {object} ns - helper functions to populate or create the @local namespace
 53 |    *                      and to @extend classes.
 54 |    * @param {function} ns.e - @extend helper.
 55 |    * @param {function} ns.l - @local helper.
 56 |    */
 57 | 
 58 |   function declarations(o, buf, prefix, vendors, local, ns, /*var*/ k, v, kk) {
 59 |     if (o==null) return
 60 |     if (/\$/.test(prefix)) {
 61 |       for (kk in (prefix = prefix.split('$'))) if (own.call(prefix, kk)) {
 62 |         declarations(o, buf, prefix[kk], vendors, local, ns)
 63 |       }
 64 |       return
 65 |     }
 66 |     switch ( type.call(o = o.valueOf()) ) {
 67 |     case ARRAY:
 68 |       for (k = 0; k < o.length; k++)
 69 |         declarations(o[k], buf, prefix, vendors, local, ns)
 70 |       break
 71 |     case OBJECT:
 72 |       // prefix is falsy iif it is the empty string, which means we're at the root
 73 |       // of the declarations list.
 74 |       prefix = (prefix && prefix + '-')
 75 |       for (k in o) if (own.call(o, k)){
 76 |         v = o[k]
 77 |         if (/\$/.test(k)) {
 78 |           for (kk in (k = k.split('$'))) if (own.call(k, kk))
 79 |             declarations(v, buf, prefix + k[kk], vendors, local, ns)
 80 |         } else {
 81 |           declarations(v, buf, prefix + k, vendors, local, ns)
 82 |         }
 83 |       }
 84 |       break
 85 |     default:
 86 |       // prefix is falsy when it is "", which means that we're
 87 |       // at the top level.
 88 |       // `o` is then treated as a `property:value` pair.
 89 |       // otherwise, `prefix` is the property name, and
 90 |       // `o` is the value.
 91 |       k = prefix.replace(/_/g, '-').replace(/[A-Z]/g, decamelize)
 92 | 
 93 |       if (local && (k == 'animation-name' || k == 'animation')) {
 94 |         o = o.split(',').map(function (o) {
 95 |           return o.replace(/()(?::global\(\s*([-\w]+)\s*\)|()([-\w]+))/, ns.l)
 96 |         }).join(',')
 97 |       }
 98 |       if (/^animation|^transition/.test(k)) vendors = ['webkit']
 99 |       // '@' in properties also triggers the *ielte7 hack
100 |       // Since plugins dispatch on the /^@/ for at-rules
101 |       // we swap the at for an asterisk
102 |       // http://browserhacks.com/#hack-6d49e92634f26ae6d6e46b3ebc10019a
103 | 
104 |       k = k.replace(/^@/, '*')
105 | 
106 |   /*/-statements-/*/
107 |       // vendorify
108 |       for (kk = 0; kk < vendors.length; kk++)
109 |         buf.push('-', vendors[kk], '-', k, k ? ':': '', o, ';\n')
110 |   /*/-statements-/*/
111 | 
112 |       buf.push(k, k ? ':': '', o, ';\n')
113 | 
114 |     }
115 |   }
116 | 
117 |   var findClass = /()(?::global\(\s*(\.[-\w]+)\s*\)|(\.)([-\w]+))/g
118 | 
119 |   /**
120 |    * Hanldes at-rules
121 |    *
122 |    * @param {string} k - The at-rule name, and, if takes both parameters and a
123 |    *                     block, the parameters.
124 |    * @param {string[]} buf - the buffer in which the final style sheet is built
125 |    * @param {string[]} v - Either parameters for block-less rules or their block
126 |    *                       for the others.
127 |    * @param {string} prefix - the current selector or a prefix in case of nested rules
128 |    * @param {string} rawPrefix - as above, but without localization transformations
129 |    * @param {string} vendors - a list of vendor prefixes
130 |    * @Param {boolean} local - are we in @local or in @global scope?
131 |    * @param {object} ns - helper functions to populate or create the @local namespace
132 |    *                      and to @extend classes
133 |    * @param {function} ns.e - @extend helper
134 |    * @param {function} ns.l - @local helper
135 |    */
136 | 
137 |   function at(k, v, buf, prefix, rawPrefix, vendors, local, ns){
138 |     var kk
139 |     if (/^@(?:namespace|import|charset)$/.test(k)) {
140 |       if(type.call(v) == ARRAY){
141 |         for (kk = 0; kk < v.length; kk++) {
142 |           buf.push(k, ' ', v[kk], ';\n')
143 |         }
144 |       } else {
145 |         buf.push(k, ' ', v, ';\n')
146 |       }
147 |     } else if (/^@keyframes /.test(k)) {
148 |       k = local ? k.replace(
149 |         // generated by script/regexps.js
150 |         /( )(?::global\(\s*([-\w]+)\s*\)|()([-\w]+))/,
151 |         ns.l
152 |       ) : k
153 |       // add a @-webkit-keyframes block too.
154 | 
155 |       buf.push('@-webkit-', k.slice(1), ' {\n')
156 |       sheet(v, buf, '', '', ['webkit'])
157 |       buf.push('}\n')
158 | 
159 |       buf.push(k, ' {\n')
160 |       sheet(v, buf, '', '', vendors, local, ns)
161 |       buf.push('}\n')
162 | 
163 |     } else if (/^@extends?$/.test(k)) {
164 | 
165 |       /*eslint-disable no-cond-assign*/
166 |       // pick the last class to be extended
167 |       while (kk = findClass.exec(rawPrefix)) k = kk[4]
168 |       /*eslint-enable no-cond-assign*/
169 |       if (k == null || !local) {
170 |         // we're in a @global{} block
171 |         buf.push('@-error-cannot-extend-in-global-context ', JSON.stringify(rawPrefix), ';\n')
172 |         return
173 |       } else if (/^@extends?$/.test(k)) {
174 |         // no class in the selector
175 |         buf.push('@-error-no-class-to-extend-in ', JSON.stringify(rawPrefix), ';\n')
176 |         return
177 |       }
178 |       ns.e(
179 |         type.call(v) == ARRAY ? v.map(function (parent) {
180 |           return parent.replace(/()(?::global\(\s*(\.[-\w]+)\s*\)|()\.([-\w]+))/, ns.l)
181 |         }).join(' ') : v.replace(/()(?::global\(\s*(\.[-\w]+)\s*\)|()\.([-\w]+))/, ns.l),
182 |         k
183 |       )
184 | 
185 |     } else if (/^@(?:font-face$|viewport$|page )/.test(k)) {
186 |       sheet(v, buf, k, k, emptyArray)
187 | 
188 |     } else if (/^@global$/.test(k)) {
189 |       sheet(v, buf, prefix, rawPrefix, vendors, 0, ns)
190 | 
191 |     } else if (/^@local$/.test(k)) {
192 |       sheet(v, buf, prefix, rawPrefix, vendors, 1, ns)
193 | 
194 |     } else if (/^@(?:media |supports |document )./.test(k)) {
195 |       buf.push(k, ' {\n')
196 |       sheet(v, buf, prefix, rawPrefix, vendors, local, ns)
197 |       buf.push('}\n')
198 | 
199 |     } else {
200 |       buf.push('@-error-unsupported-at-rule ', JSON.stringify(k), ';\n')
201 |     }
202 |   }
203 | 
204 |   /**
205 |    * Add rulesets and other CSS statements to the sheet.
206 |    *
207 |    * @param {array|string|object} statements - a source object or sub-object.
208 |    * @param {string[]} buf - the buffer in which the final style sheet is built
209 |    * @param {string} prefix - the current selector or a prefix in case of nested rules
210 |    * @param {string} rawPrefix - as above, but without localization transformations
211 |    * @param {string} vendors - a list of vendor prefixes
212 |    * @Param {boolean} local - are we in @local or in @global scope?
213 |    * @param {object} ns - helper functions to populate or create the @local namespace
214 |    *                      and to @extend classes
215 |    * @param {function} ns.e - @extend helper
216 |    * @param {function} ns.l - @local helper
217 |    */
218 |   function sheet(statements, buf, prefix, rawPrefix, vendors, local, ns) {
219 |     var k, kk, v, inDeclaration
220 | 
221 |     switch (type.call(statements)) {
222 | 
223 |     case ARRAY:
224 |       for (k = 0; k < statements.length; k++)
225 |         sheet(statements[k], buf, prefix, rawPrefix, vendors, local, ns)
226 |       break
227 | 
228 |     case OBJECT:
229 |       for (k in statements) {
230 |         v = statements[k]
231 |         if (prefix && /^[-\w$]+$/.test(k)) {
232 |           if (!inDeclaration) {
233 |             inDeclaration = 1
234 |             buf.push(( prefix || '*' ), ' {\n')
235 |           }
236 |           declarations(v, buf, k, vendors, local, ns)
237 |         } else if (/^@/.test(k)) {
238 |           // Handle At-rules
239 |           inDeclaration = (inDeclaration && buf.push('}\n') && 0)
240 | 
241 |           at(k, v, buf, prefix, rawPrefix, vendors, local, ns)
242 | 
243 |         } else {
244 |           // selector or nested sub-selectors
245 | 
246 |           inDeclaration = (inDeclaration && buf.push('}\n') && 0)
247 | 
248 |           sheet(v, buf,
249 |             (kk = /,/.test(prefix) || prefix && /,/.test(k)) ?
250 |               cartesian(prefix.split(','), ( local ?
251 |             k.replace(
252 |               /()(?::global\(\s*(\.[-\w]+)\s*\)|(\.)([-\w]+))/g, ns.l
253 |             ) : k
254 |           ).split(','), prefix).join(',') :
255 |               concat(prefix, ( local ?
256 |             k.replace(
257 |               /()(?::global\(\s*(\.[-\w]+)\s*\)|(\.)([-\w]+))/g, ns.l
258 |             ) : k
259 |           ), prefix),
260 |             kk ?
261 |               cartesian(rawPrefix.split(','), k.split(','), rawPrefix).join(',') :
262 |               concat(rawPrefix, k, rawPrefix),
263 |             vendors,
264 |             local, ns
265 |           )
266 |         }
267 |       }
268 |       if (inDeclaration) buf.push('}\n')
269 |       break
270 |     case STRING:
271 |       buf.push(
272 |           ( prefix || ':-error-no-selector' ) , ' {\n'
273 |         )
274 |       declarations(statements, buf, '', vendors, local, ns)
275 |       buf.push('}\n')
276 |     }
277 |   }
278 | 
279 |   var scope_root = '_j2c_' +
280 |         Math.floor(Math.random() * 0x100000000).toString(36) + '_' +
281 |         Math.floor(Math.random() * 0x100000000).toString(36) + '_' +
282 |         Math.floor(Math.random() * 0x100000000).toString(36) + '_' +
283 |         Math.floor(Math.random() * 0x100000000).toString(36) + '_';
284 |   var counter = 0;
285 |   function j2c(res) {
286 |     res = res || {}
287 |     var extensions = []
288 | 
289 |     function finalize(buf, i) {
290 |       for (i = 0; i< extensions.length; i++) buf = extensions[i](buf) || buf
291 |       return buf.join('')
292 |     }
293 | 
294 |     res.use = function() {
295 |       var args = arguments
296 |       for (var i = 0; i < args.length; i++){
297 |         extensions.push(args[i])
298 |       }
299 |       return res
300 |     }
301 |   /*/-statements-/*/
302 |     res.sheet = function(ns, statements) {
303 |       if (arguments.length === 1) {
304 |         statements = ns; ns = {}
305 |       }
306 |       var
307 |         suffix = scope_root + counter++,
308 |         locals = {},
309 |         k, buf = []
310 |       // pick only non-numeric keys since `(NaN != NaN) === true`
311 |       for (k in ns) if (k-0 != k-0 && own.call(ns, k)) {
312 |         locals[k] = ns[k]
313 |       }
314 |       sheet(
315 |         statements, buf, '', '', emptyArray /*vendors*/,
316 |         1, // local
317 |         {
318 |           e: function extend(parent, child) {
319 |             var nameList = locals[child]
320 |             locals[child] =
321 |               nameList.slice(0, nameList.lastIndexOf(' ') + 1) +
322 |               parent + ' ' +
323 |               nameList.slice(nameList.lastIndexOf(' ') + 1)
324 |           },
325 |           l: function localize(match, space, global, dot, name) {
326 |             if (global) {
327 |               return space + global
328 |             }
329 |             if (!locals[name]) locals[name] = name + suffix
330 |             return space + dot + locals[name].match(/\S+$/)
331 |           }
332 |         }
333 |       )
334 |       /*jshint -W053 */
335 |       buf = new String(finalize(buf))
336 |       /*jshint +W053 */
337 |       for (k in locals) if (own.call(locals, k)) buf[k] = locals[k]
338 |       return buf
339 |     }
340 |   /*/-statements-/*/
341 |     res.inline = function (locals, decl, buf) {
342 |       if (arguments.length === 1) {
343 |         decl = locals; locals = {}
344 |       }
345 |       declarations(
346 |         decl,
347 |         buf = [],
348 |         '', // prefix
349 |         emptyArray, // vendors
350 |         1,
351 |         {
352 |           l: function localize(match, space, global, dot, name) {
353 |             if (global) return space + global
354 |             if (!locals[name]) return name
355 |             return space + dot + locals[name]
356 |           }
357 |         })
358 |       return finalize(buf)
359 |     }
360 | 
361 |     res.prefix = function(val, vendors) {
362 |       return cartesian(
363 |         vendors.map(function(p){return '-' + p + '-'}).concat(['']),
364 |         [val]
365 |       )
366 |     }
367 |     return res
368 |   }
369 | 
370 |   j2c.global = function(x) {
371 |     return ':global(' + x + ')'
372 |   }
373 | 
374 |   j2c.kv = kv
375 |   function kv (k, v, o) {
376 |     o = {}
377 |     o[k] = v
378 |     return o
379 |   }
380 | 
381 |   j2c.at = function at (rule, params, block) {
382 |     if (
383 |       arguments.length < 3
384 |     ) {
385 |       var _at = at.bind.apply(at, [null].concat([].slice.call(arguments,0)))
386 |       _at.toString = function(){return '@' + rule + ' ' + params}
387 |       return _at
388 |     }
389 |     else return kv('@' + rule + ' ' + params, block)
390 |   }
391 | 
392 |   j2c(j2c)
393 |   delete j2c.use
394 | 
395 |   return j2c;
396 | 
397 | })();


--------------------------------------------------------------------------------
/dist/j2c.global.min.js:
--------------------------------------------------------------------------------
1 | var j2c=function(){"use strict";function t(t,e,r,l,s,a){l=[];for(a in e)if(f.call(e,a))for(s in t)f.call(t,s)&&l.push(n(t[s],e[a],r));return l}function n(t,n,e){return e&&(/^[-\w$]+$/.test(n)&&":-error-bad-sub-selector-"+n||/&/.test(n)&&n.replace(/&/g,t))||t+n}function e(t){return"-"+t.toLowerCase()}function r(t,n,l,s,a,o,i,u,g){if(null!=t)if(/\$/.test(l))for(g in l=l.split("$"))f.call(l,g)&&r(t,n,l[g],s,a,o);else switch(c.call(t=t.valueOf())){case h:for(i=0;i<t.length;i++)r(t[i],n,l,s,a,o);break;case p:l=l&&l+"-";for(i in t)if(f.call(t,i))if(u=t[i],/\$/.test(i))for(g in i=i.split("$"))f.call(i,g)&&r(u,n,l+i[g],s,a,o);else r(u,n,l+i,s,a,o);break;default:for(i=l.replace(/_/g,"-").replace(/[A-Z]/g,e),!a||"animation-name"!=i&&"animation"!=i||(t=t.split(",").map(function(t){return t.replace(/()(?::global\(\s*([-\w]+)\s*\)|()([-\w]+))/,o.l)}).join(",")),/^animation|^transition/.test(i)&&(s=["webkit"]),i=i.replace(/^@/,"*"),g=0;g<s.length;g++)n.push("-",s[g],"-",i,i?":":"",t,";\n");n.push(i,i?":":"",t,";\n")}}function l(t,n,e,r,l,a,o,i){var f;if(/^@(?:namespace|import|charset)$/.test(t))if(c.call(n)==h)for(f=0;f<n.length;f++)e.push(t," ",n[f],";\n");else e.push(t," ",n,";\n");else if(/^@keyframes /.test(t))t=o?t.replace(/( )(?::global\(\s*([-\w]+)\s*\)|()([-\w]+))/,i.l):t,e.push("@-webkit-",t.slice(1)," {\n"),s(n,e,"","",["webkit"]),e.push("}\n"),e.push(t," {\n"),s(n,e,"","",a,o,i),e.push("}\n");else if(/^@extends?$/.test(t)){for(;f=w.exec(l);)t=f[4];if(null==t||!o)return void e.push("@-error-cannot-extend-in-global-context ",JSON.stringify(l),";\n");if(/^@extends?$/.test(t))return void e.push("@-error-no-class-to-extend-in ",JSON.stringify(l),";\n");i.e(c.call(n)==h?n.map(function(t){return t.replace(/()(?::global\(\s*(\.[-\w]+)\s*\)|()\.([-\w]+))/,i.l)}).join(" "):n.replace(/()(?::global\(\s*(\.[-\w]+)\s*\)|()\.([-\w]+))/,i.l),t)}else/^@(?:font-face$|viewport$|page )/.test(t)?s(n,e,t,t,u):/^@global$/.test(t)?s(n,e,r,l,a,0,i):/^@local$/.test(t)?s(n,e,r,l,a,1,i):/^@(?:media |supports |document )./.test(t)?(e.push(t," {\n"),s(n,e,r,l,a,o,i),e.push("}\n")):e.push("@-error-unsupported-at-rule ",JSON.stringify(t),";\n")}function s(e,a,o,i,u,f,w){var m,b,d,$;switch(c.call(e)){case h:for(m=0;m<e.length;m++)s(e[m],a,o,i,u,f,w);break;case p:for(m in e)d=e[m],o&&/^[-\w$]+$/.test(m)?($||($=1,a.push(o||"*"," {\n")),r(d,a,m,u,f,w)):/^@/.test(m)?($=$&&a.push("}\n")&&0,l(m,d,a,o,i,u,f,w)):($=$&&a.push("}\n")&&0,s(d,a,(b=/,/.test(o)||o&&/,/.test(m))?t(o.split(","),(f?m.replace(/()(?::global\(\s*(\.[-\w]+)\s*\)|(\.)([-\w]+))/g,w.l):m).split(","),o).join(","):n(o,f?m.replace(/()(?::global\(\s*(\.[-\w]+)\s*\)|(\.)([-\w]+))/g,w.l):m,o),b?t(i.split(","),m.split(","),i).join(","):n(i,m,i),u,f,w));$&&a.push("}\n");break;case g:a.push(o||":-error-no-selector"," {\n"),r(e,a,"",u,f,w),a.push("}\n")}}function a(n){function e(t,n){for(n=0;n<l.length;n++)t=l[n](t)||t;return t.join("")}n=n||{};var l=[];return n.use=function(){for(var t=arguments,e=0;e<t.length;e++)l.push(t[e]);return n},n.sheet=function(t,n){1===arguments.length&&(n=t,t={});var r,l=m+b++,a={},o=[];for(r in t)r-0!=r-0&&f.call(t,r)&&(a[r]=t[r]);s(n,o,"","",u,1,{e:function(t,n){var e=a[n];a[n]=e.slice(0,e.lastIndexOf(" ")+1)+t+" "+e.slice(e.lastIndexOf(" ")+1)},l:function(t,n,e,r,s){return e?n+e:(a[s]||(a[s]=s+l),n+r+a[s].match(/\S+$/))}}),o=new String(e(o));for(r in a)f.call(a,r)&&(o[r]=a[r]);return o},n.inline=function(t,n,l){return 1===arguments.length&&(n=t,t={}),r(n,l=[],"",u,1,{l:function(n,e,r,l,s){return r?e+r:t[s]?e+l+t[s]:s}}),e(l)},n.prefix=function(n,e){return t(e.map(function(t){return"-"+t+"-"}).concat([""]),[n])},n}function o(t,n,e){return e={},e[t]=n,e}var i={},u=[],c=i.toString,f=i.hasOwnProperty,p=c.call(i),h=c.call(u),g=c.call(""),w=/()(?::global\(\s*(\.[-\w]+)\s*\)|(\.)([-\w]+))/g,m="_j2c_"+Math.floor(4294967296*Math.random()).toString(36)+"_"+Math.floor(4294967296*Math.random()).toString(36)+"_"+Math.floor(4294967296*Math.random()).toString(36)+"_"+Math.floor(4294967296*Math.random()).toString(36)+"_",b=0;return a.global=function(t){return":global("+t+")"},a.kv=o,a.at=function d(t,n,e){if(arguments.length<3){var r=d.bind.apply(d,[null].concat([].slice.call(arguments,0)));return r.toString=function(){return"@"+t+" "+n},r}return o("@"+t+" "+n,e)},a(a),delete a.use,a}();


--------------------------------------------------------------------------------
/dist/j2c.global.min.js.gz:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/j2css/j2c/0eccb86dff89bc41513e39c7aa7cb21e4ba4b7dc/dist/j2c.global.min.js.gz


--------------------------------------------------------------------------------
/example/pocketgrid.js:
--------------------------------------------------------------------------------
 1 | /* 
 2 | 
 3 | PocketGrid 1.1.0 Copyright (c) 2013 Arnaud Leray
 4 | j2c port Copyright (c) 2015 Pierre-Yves Gérardy
 5 | 
 6 | Permission is hereby granted, free of charge, to any person obtaining a
 7 | copy of this software and associated documentation files (the "Software"),
 8 | to deal in the Software without restriction, including without limitation
 9 | the rights to use, copy, modify, merge, publish, distribute, sublicense,
10 | and/or sell copies of the Software, and to permit persons to whom the
11 | Software is furnished to do so, subject to the following conditions:
12 | 
13 | The above copyright notice and this permission notice shall be included
14 | in all copies or substantial portions of the Software.
15 | 
16 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS
17 | OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
18 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
19 | THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
20 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
21 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
22 | SOFTWARE.
23 | 
24 | */
25 | 
26 | var j2c = require("../dist/j2c.commonjs");
27 | 
28 | console.log(j2c.sheet({
29 |   /* Border-box-sizing */
30 |   ".block,.blockgroup":{
31 |     ",:before,:after":{
32 |       box_sizing:"border-box"
33 |     }
34 |   },
35 |   ".blockgroup": [
36 |     /* Clearfix */
37 |     "*zoom: 1",
38 |     {
39 |       ":before,:after": {
40 |         display: "table",
41 |         content: '""',
42 |         line_heigth: 0
43 |       },
44 |       ":after": {clear:"both"},
45 | 
46 |       /* ul/li compatibility */
47 |       list_style_type:"none",
48 |       margin$padding:0,
49 | 
50 |       " > .blockgroup": {
51 |         /* Nested grid */
52 |         clear: "none",
53 |         float: "left",
54 |         margin: "0 !important"
55 |       }
56 |     }
57 |   ],
58 |   /* Default block */
59 |   ".block": {
60 |     float: "left",
61 |     width: "100%"
62 |   }
63 | }))
64 | 
65 | 


--------------------------------------------------------------------------------
/example/pocketgrid.mixin.js:
--------------------------------------------------------------------------------
 1 | // If you wanted to turn PockeGrid into a mixin, you could use this:
 2 | 
 3 | var border_box = {
 4 |     ",:before,:after":{ //note the initial coma
 5 |         box_sizing:"border-box"
 6 |     }
 7 | }
 8 | 
 9 | var pocketgrid = module.export = {
10 |     group: [
11 |         /* Clearfix */
12 |         "*zoom: 1",
13 |         border_box,
14 |         {
15 |             ":before,:after": {
16 |                 display: "table",
17 |                 content: '""',
18 |                 line_heigth: 0
19 |             },
20 |             ":after": {clear:"both"},
21 | 
22 |             /* ul/li compatibility */
23 |             "list-style-type":"none",
24 |             margin$padding:0
25 | 
26 |         }
27 |     ],
28 |     block: [
29 |         border_box,
30 |         {
31 |             float: "left",
32 |             width: "100%"
33 |         }
34 |     ]
35 | }
36 | 
37 | // 
38 | 
39 | pocketgrid.nested = [
40 |     pocketgrid.group,
41 |     {
42 |         clear: "none",
43 |         float: "left",
44 |         margin: "0 !important"
45 |     }
46 | ]
47 | /* 
48 | 
49 | PocketGrid 1.1.0 Copyright (c) 2013 Arnaud Leray
50 | j2c port Copyright (c) 2015 Pierre-Yves Gérardy
51 | 
52 | Permission is hereby granted, free of charge, to any person obtaining a
53 | copy of this software and associated documentation files (the "Software"),
54 | to deal in the Software without restriction, including without limitation
55 | the rights to use, copy, modify, merge, publish, distribute, sublicense,
56 | and/or sell copies of the Software, and to permit persons to whom the
57 | Software is furnished to do so, subject to the following conditions:
58 | 
59 | The above copyright notice and this permission notice shall be included
60 | in all copies or substantial portions of the Software.
61 | 
62 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS
63 | OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
64 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
65 | THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
66 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
67 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
68 | SOFTWARE.
69 | 
70 | */
71 | 
72 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "j2c",
 3 |   "version": "0.11.3",
 4 |   "description": "A tiny CSS in JS solution.",
 5 |   "main": "dist/j2c.commonjs.js",
 6 |   "module": "dist/j2c.es6.js",
 7 |   "scripts": {
 8 |     "all": "npm run build && npm run eslint && npm run nyan",
 9 |     "preversion": "npm run -s all",
10 |     "prepublish": "(in-publish && git push --follow-tags) || not-in-publish",
11 |     "build": "npm run -s clean && node scripts/build.js",
12 |     "uglify": "uglifyjs dist/j2c.commonjs.js -c -m --comments > dist/j2c.commonjs.min.js && uglifyjs dist/j2c.amd.js -c -m --comments > dist/j2c.amd.min.js && uglifyjs dist/j2c.global.js -c -m --comments > dist/j2c.global.min.js",
13 |     "clean": "rm -f dist/*.js && rm -f dist/inline/*.js",
14 |     "eslint": "echo \"linting...\" && eslint --fix src/*.js test/test.js scripts/*.js",
15 |     "nyan": "mocha --ui qunit --reporter nyan",
16 |     "test": "mocha --ui qunit",
17 |     "cover": "mocha --ui qunit --require blanket --reporter mocha-lcov-reporter | coveralls || npm run test"
18 |   },
19 |   "repository": {
20 |     "type": "git",
21 |     "url": "https://github.com/j2css/j2c.git"
22 |   },
23 |   "keywords": [
24 |     "CSS",
25 |     "css-in-js"
26 |   ],
27 |   "author": "Pierre-Yves Gérardy",
28 |   "license": "MIT",
29 |   "bugs": {
30 |     "url": "https://github.com/j2css/j2c/issues"
31 |   },
32 |   "config": {
33 |     "blanket": {
34 |       "pattern": "//j2c\\.commonjs/"
35 |     }
36 |   },
37 |   "homepage": "http://j2c.py.gy",
38 |   "devDependencies": {
39 |     "blanket": "^1.1.7",
40 |     "compose-regexp": "^0.1.8",
41 |     "coveralls": "^2.11.2",
42 |     "eslint": "^1.10.3",
43 |     "expect.js": "0.3.1",
44 |     "in-publish": "^2.0.0",
45 |     "jshint": "^2.8.0",
46 |     "mocha": "^2.3.4",
47 |     "mocha-lcov-reporter": "^1.0.0",
48 |     "perfectionist": "^2.1.2",
49 |     "postcss": "^5.0.14",
50 |     "postcss-minify-params": "^1.0.4",
51 |     "postcss-minify-selectors": "^2.0.2",
52 |     "rollup": "^0.24.0",
53 |     "surgicate": "0.0.3",
54 |     "uglify-js": "^2.6.0"
55 |   }
56 | }
57 | 


--------------------------------------------------------------------------------
/scripts/build.js:
--------------------------------------------------------------------------------
 1 | #! /usr/bin/env node
 2 | 
 3 | /*eslint-env node*/
 4 | /*eslint no-console: 0*/
 5 | 
 6 | var fs = require('fs'),
 7 |   rollup = require('rollup'),
 8 |   uglify = require('uglify-js'),
 9 |   zlib = require('zlib'),
10 |   outputs = [
11 |     {
12 |       rollupOptions:{
13 |         format: 'iife',
14 |         moduleName: 'j2c'
15 |       },
16 |       name: 'global',
17 |       minify: {saveGzip:true}
18 |     },
19 |     {
20 |       rollupOptions:{
21 |         format: 'cjs'
22 |       },
23 |       name: 'commonjs',
24 |       minify: {save:true}
25 |     },
26 |     { // not sure this one is necessary by now...
27 |       rollupOptions:{
28 |         format: 'es6'
29 |       },
30 |       name: 'es6',
31 |       minify: false // ATM, uglify chokes on the export statement.
32 |     },
33 |     {
34 |       rollupOptions:{
35 |         format: 'amd',
36 |         name: 'j2c'
37 |       },
38 |       name: 'amd',
39 |       minify: {save:true}
40 |     }
41 |   ]
42 | 
43 | var parsed = rollup.rollup({
44 |   entry: 'src/main.js'
45 | })
46 | 
47 | 
48 | outputs.forEach(function (output) {
49 |   parsed.then(function(bundle){
50 |     var result = bundle.generate(output.rollupOptions)
51 |     fs.writeFileSync('dist/j2c.' + output.name + '.js', result.code)
52 |     if (output.minify) {
53 |       var minified = uglify.minify(result.code, {
54 |         fromString: true,
55 |         mangle: true,
56 |         compress: {}
57 |       }).code
58 |       fs.writeFileSync('dist/j2c.' + output.name + '.min.js', minified)
59 |       zlib.gzip(minified, function(_, buf){
60 |         console.log(output.name, _ || buf.length)
61 |         if (output.minify.saveGzip) {
62 |           fs.writeFileSync('dist/j2c.' + output.name + '.min.js.gz', buf)
63 |         }
64 |       })
65 |     }
66 |   }).then(null, function (e) {
67 |     console.log(output.name, e)
68 |     process.exit(1)
69 |   })
70 | })
71 | 


--------------------------------------------------------------------------------
/scripts/filesize.js:
--------------------------------------------------------------------------------
 1 | /*eslint-env node*/
 2 | /*eslint no-console: 0*/
 3 | var zlib = require('zlib'), fs = require('fs')
 4 | 
 5 | console.log('mingzipped sizes in bytes:');
 6 | 
 7 | ['commonjs', 'global', 'amd'].forEach(function(kind){
 8 |   var source = fs.readFileSync('dist/j2c.' + kind + '.min.js')
 9 |   var size = zlib.gzipSync(source, {level: 9}).length
10 |   // custom console
11 |   console.log(kind, size)
12 | })


--------------------------------------------------------------------------------
/scripts/regexps.js:
--------------------------------------------------------------------------------
 1 | /*eslint-env node*/
 2 | /*eslint no-console: 0*/
 3 | /*eslint no-undef: 0*/
 4 | 
 5 | global.__proto__ = require('compose-regexp')
 6 | 
 7 | var maybe = greedy.bind(null, '?')
 8 | maybe()
 9 | 
10 | var animation = sequence(
11 |     capture(),
12 |     either(
13 |         sequence(
14 |             ':global(',
15 |             /\s*/,
16 |             capture(/[-\w]+/),
17 |             /\s*/,
18 |             ')'
19 |         ),
20 |         sequence(
21 |             capture(),
22 |             capture(/[-\w]+/)
23 |         )
24 |     )
25 | )
26 | console.log('anumation / animation-name\n', animation)
27 | 
28 | var keyframes = sequence(
29 |     capture(' '),
30 |     either(
31 |         sequence(
32 |             ':global(',
33 |             /\s*/,
34 |             capture(/[-\w]+/),
35 |             /\s*/,
36 |             ')'
37 |         ),
38 |         sequence(
39 |             capture(),
40 |             capture(/[-\w]+/)
41 |         )
42 |     )
43 | )
44 | 
45 | console.log('@keyframes\n', keyframes)
46 | 
47 | var selector = flags('g', sequence(
48 |     capture(''),
49 |     either(
50 |         sequence(
51 |             ':global(',
52 |             /\s*/,
53 |             capture(
54 |                 '.',
55 |                 /[-\w]+/
56 |             ),
57 |             /\s*/,
58 |             ')'
59 |         ),
60 |         sequence(
61 |             capture('.'),
62 |             capture(/[-\w]+/)
63 |         )
64 |     )
65 | ))
66 | 
67 | console.log('selector / @global\n', selector)
68 | 


--------------------------------------------------------------------------------
/src/at-rules.js:
--------------------------------------------------------------------------------
 1 | import {type, ARRAY, emptyArray} from './helpers'
 2 | import {sheet} from './sheet'
 3 | 
 4 | var findClass = /()(?::global\(\s*(\.[-\w]+)\s*\)|(\.)([-\w]+))/g
 5 | 
 6 | /**
 7 |  * Hanldes at-rules
 8 |  *
 9 |  * @param {string} k - The at-rule name, and, if takes both parameters and a
10 |  *                     block, the parameters.
11 |  * @param {string[]} buf - the buffer in which the final style sheet is built
12 |  * @param {string[]} v - Either parameters for block-less rules or their block
13 |  *                       for the others.
14 |  * @param {string} prefix - the current selector or a prefix in case of nested rules
15 |  * @param {string} rawPrefix - as above, but without localization transformations
16 |  * @param {string} vendors - a list of vendor prefixes
17 |  * @Param {boolean} local - are we in @local or in @global scope?
18 |  * @param {object} ns - helper functions to populate or create the @local namespace
19 |  *                      and to @extend classes
20 |  * @param {function} ns.e - @extend helper
21 |  * @param {function} ns.l - @local helper
22 |  */
23 | 
24 | export function at(k, v, buf, prefix, rawPrefix, vendors, local, ns){
25 |   var kk
26 |   if (/^@(?:namespace|import|charset)$/.test(k)) {
27 |     if(type.call(v) == ARRAY){
28 |       for (kk = 0; kk < v.length; kk++) {
29 |         buf.push(k, ' ', v[kk], ';\n')
30 |       }
31 |     } else {
32 |       buf.push(k, ' ', v, ';\n')
33 |     }
34 |   } else if (/^@keyframes /.test(k)) {
35 |     k = local ? k.replace(
36 |       // generated by script/regexps.js
37 |       /( )(?::global\(\s*([-\w]+)\s*\)|()([-\w]+))/,
38 |       ns.l
39 |     ) : k
40 |     // add a @-webkit-keyframes block too.
41 | 
42 |     buf.push('@-webkit-', k.slice(1), ' {\n')
43 |     sheet(v, buf, '', '', ['webkit'])
44 |     buf.push('}\n')
45 | 
46 |     buf.push(k, ' {\n')
47 |     sheet(v, buf, '', '', vendors, local, ns)
48 |     buf.push('}\n')
49 | 
50 |   } else if (/^@extends?$/.test(k)) {
51 | 
52 |     /*eslint-disable no-cond-assign*/
53 |     // pick the last class to be extended
54 |     while (kk = findClass.exec(rawPrefix)) k = kk[4]
55 |     /*eslint-enable no-cond-assign*/
56 |     if (k == null || !local) {
57 |       // we're in a @global{} block
58 |       buf.push('@-error-cannot-extend-in-global-context ', JSON.stringify(rawPrefix), ';\n')
59 |       return
60 |     } else if (/^@extends?$/.test(k)) {
61 |       // no class in the selector
62 |       buf.push('@-error-no-class-to-extend-in ', JSON.stringify(rawPrefix), ';\n')
63 |       return
64 |     }
65 |     ns.e(
66 |       type.call(v) == ARRAY ? v.map(function (parent) {
67 |         return parent.replace(/()(?::global\(\s*(\.[-\w]+)\s*\)|()\.([-\w]+))/, ns.l)
68 |       }).join(' ') : v.replace(/()(?::global\(\s*(\.[-\w]+)\s*\)|()\.([-\w]+))/, ns.l),
69 |       k
70 |     )
71 | 
72 |   } else if (/^@(?:font-face$|viewport$|page )/.test(k)) {
73 |     sheet(v, buf, k, k, emptyArray)
74 | 
75 |   } else if (/^@global$/.test(k)) {
76 |     sheet(v, buf, prefix, rawPrefix, vendors, 0, ns)
77 | 
78 |   } else if (/^@local$/.test(k)) {
79 |     sheet(v, buf, prefix, rawPrefix, vendors, 1, ns)
80 | 
81 |   } else if (/^@(?:media |supports |document )./.test(k)) {
82 |     buf.push(k, ' {\n')
83 |     sheet(v, buf, prefix, rawPrefix, vendors, local, ns)
84 |     buf.push('}\n')
85 | 
86 |   } else {
87 |     buf.push('@-error-unsupported-at-rule ', JSON.stringify(k), ';\n')
88 |   }
89 | }
90 | 


--------------------------------------------------------------------------------
/src/declarations.js:
--------------------------------------------------------------------------------
 1 | import {own, type, ARRAY, OBJECT} from './helpers'
 2 | 
 3 | function decamelize(match) {
 4 |   return '-' + match.toLowerCase()
 5 | }
 6 | 
 7 | /**
 8 |  * Handles the property:value; pairs.
 9 |  *
10 |  * @param {array|object|string} o - the declarations.
11 |  * @param {string[]} buf - the buffer in which the final style sheet is built.
12 |  * @param {string} prefix - the current property or a prefix in case of nested
13 |  *                          sub-properties.
14 |  * @param {string} vendors - a list of vendor prefixes.
15 |  * @Param {boolean} local - are we in @local or in @global scope.
16 |  * @param {object} ns - helper functions to populate or create the @local namespace
17 |  *                      and to @extend classes.
18 |  * @param {function} ns.e - @extend helper.
19 |  * @param {function} ns.l - @local helper.
20 |  */
21 | 
22 | export function declarations(o, buf, prefix, vendors, local, ns, /*var*/ k, v, kk) {
23 |   if (o==null) return
24 |   if (/\$/.test(prefix)) {
25 |     for (kk in (prefix = prefix.split('$'))) if (own.call(prefix, kk)) {
26 |       declarations(o, buf, prefix[kk], vendors, local, ns)
27 |     }
28 |     return
29 |   }
30 |   switch ( type.call(o = o.valueOf()) ) {
31 |   case ARRAY:
32 |     for (k = 0; k < o.length; k++)
33 |       declarations(o[k], buf, prefix, vendors, local, ns)
34 |     break
35 |   case OBJECT:
36 |     // prefix is falsy iif it is the empty string, which means we're at the root
37 |     // of the declarations list.
38 |     prefix = (prefix && prefix + '-')
39 |     for (k in o) if (own.call(o, k)){
40 |       v = o[k]
41 |       if (/\$/.test(k)) {
42 |         for (kk in (k = k.split('$'))) if (own.call(k, kk))
43 |           declarations(v, buf, prefix + k[kk], vendors, local, ns)
44 |       } else {
45 |         declarations(v, buf, prefix + k, vendors, local, ns)
46 |       }
47 |     }
48 |     break
49 |   default:
50 |     // prefix is falsy when it is "", which means that we're
51 |     // at the top level.
52 |     // `o` is then treated as a `property:value` pair.
53 |     // otherwise, `prefix` is the property name, and
54 |     // `o` is the value.
55 |     k = prefix.replace(/_/g, '-').replace(/[A-Z]/g, decamelize)
56 | 
57 |     if (local && (k == 'animation-name' || k == 'animation')) {
58 |       o = o.split(',').map(function (o) {
59 |         return o.replace(/()(?::global\(\s*([-\w]+)\s*\)|()([-\w]+))/, ns.l)
60 |       }).join(',')
61 |     }
62 |     if (/^animation|^transition/.test(k)) vendors = ['webkit']
63 |     // '@' in properties also triggers the *ielte7 hack
64 |     // Since plugins dispatch on the /^@/ for at-rules
65 |     // we swap the at for an asterisk
66 |     // http://browserhacks.com/#hack-6d49e92634f26ae6d6e46b3ebc10019a
67 | 
68 |     k = k.replace(/^@/, '*')
69 | 
70 | /*/-statements-/*/
71 |     // vendorify
72 |     for (kk = 0; kk < vendors.length; kk++)
73 |       buf.push('-', vendors[kk], '-', k, k ? ':': '', o, ';\n')
74 | /*/-statements-/*/
75 | 
76 |     buf.push(k, k ? ':': '', o, ';\n')
77 | 
78 |   }
79 | }
80 | 


--------------------------------------------------------------------------------
/src/helpers.js:
--------------------------------------------------------------------------------
 1 | var
 2 |   emptyObject = {},
 3 |   emptyArray = [],
 4 |   type = emptyObject.toString,
 5 |   own =  emptyObject.hasOwnProperty,
 6 |   OBJECT = type.call(emptyObject),
 7 |   ARRAY =  type.call(emptyArray),
 8 |   STRING = type.call('')
 9 | 
10 | /*/-inline-/*/
11 | // function cartesian(a, b, res, i, j) {
12 | //   res = [];
13 | //   for (j in b) if (own.call(b, j))
14 | //     for (i in a) if (own.call(a, i))
15 | //       res.push(a[i] + b[j]);
16 | //   return res;
17 | // }
18 | /*/-inline-/*/
19 | 
20 | /* /-statements-/*/
21 | function cartesian(a,b, selectorP, res, i, j) {
22 |   res = []
23 |   for (j in b) if(own.call(b, j))
24 |     for (i in a) if(own.call(a, i))
25 |       res.push(concat(a[i], b[j], selectorP))
26 |   return res
27 | }
28 | 
29 | function concat(a, b, selectorP) {
30 |   // `b.replace(/&/g, a)` is never falsy, since the
31 |   // 'a' of cartesian can't be the empty string
32 |   // in selector mode.
33 |   return selectorP && (
34 |     /^[-\w$]+$/.test(b) && ':-error-bad-sub-selector-' + b ||
35 |     /&/.test(b) && /* never falsy */ b.replace(/&/g, a)
36 |   ) || a + b
37 | }
38 | /* /-statements-/*/
39 | 
40 | export {emptyObject, emptyArray, type, own, OBJECT, ARRAY, STRING, cartesian, concat}


--------------------------------------------------------------------------------
/src/main.js:
--------------------------------------------------------------------------------
  1 | import {own, cartesian, emptyArray} from './helpers'
  2 | import {sheet} from './sheet'
  3 | import {declarations} from './declarations'
  4 | 
  5 | var scope_root = '_j2c_' +
  6 |       Math.floor(Math.random() * 0x100000000).toString(36) + '_' +
  7 |       Math.floor(Math.random() * 0x100000000).toString(36) + '_' +
  8 |       Math.floor(Math.random() * 0x100000000).toString(36) + '_' +
  9 |       Math.floor(Math.random() * 0x100000000).toString(36) + '_',
 10 |   counter = 0
 11 | 
 12 | export default function j2c(res) {
 13 |   res = res || {}
 14 |   var extensions = []
 15 | 
 16 |   function finalize(buf, i) {
 17 |     for (i = 0; i< extensions.length; i++) buf = extensions[i](buf) || buf
 18 |     return buf.join('')
 19 |   }
 20 | 
 21 |   res.use = function() {
 22 |     var args = arguments
 23 |     for (var i = 0; i < args.length; i++){
 24 |       extensions.push(args[i])
 25 |     }
 26 |     return res
 27 |   }
 28 | /*/-statements-/*/
 29 |   res.sheet = function(ns, statements) {
 30 |     if (arguments.length === 1) {
 31 |       statements = ns; ns = {}
 32 |     }
 33 |     var
 34 |       suffix = scope_root + counter++,
 35 |       locals = {},
 36 |       k, buf = []
 37 |     // pick only non-numeric keys since `(NaN != NaN) === true`
 38 |     for (k in ns) if (k-0 != k-0 && own.call(ns, k)) {
 39 |       locals[k] = ns[k]
 40 |     }
 41 |     sheet(
 42 |       statements, buf, '', '', emptyArray /*vendors*/,
 43 |       1, // local
 44 |       {
 45 |         e: function extend(parent, child) {
 46 |           var nameList = locals[child]
 47 |           locals[child] =
 48 |             nameList.slice(0, nameList.lastIndexOf(' ') + 1) +
 49 |             parent + ' ' +
 50 |             nameList.slice(nameList.lastIndexOf(' ') + 1)
 51 |         },
 52 |         l: function localize(match, space, global, dot, name) {
 53 |           if (global) {
 54 |             return space + global
 55 |           }
 56 |           if (!locals[name]) locals[name] = name + suffix
 57 |           return space + dot + locals[name].match(/\S+$/)
 58 |         }
 59 |       }
 60 |     )
 61 |     /*jshint -W053 */
 62 |     buf = new String(finalize(buf))
 63 |     /*jshint +W053 */
 64 |     for (k in locals) if (own.call(locals, k)) buf[k] = locals[k]
 65 |     return buf
 66 |   }
 67 | /*/-statements-/*/
 68 |   res.inline = function (locals, decl, buf) {
 69 |     if (arguments.length === 1) {
 70 |       decl = locals; locals = {}
 71 |     }
 72 |     declarations(
 73 |       decl,
 74 |       buf = [],
 75 |       '', // prefix
 76 |       emptyArray, // vendors
 77 |       1,
 78 |       {
 79 |         l: function localize(match, space, global, dot, name) {
 80 |           if (global) return space + global
 81 |           if (!locals[name]) return name
 82 |           return space + dot + locals[name]
 83 |         }
 84 |       })
 85 |     return finalize(buf)
 86 |   }
 87 | 
 88 |   res.prefix = function(val, vendors) {
 89 |     return cartesian(
 90 |       vendors.map(function(p){return '-' + p + '-'}).concat(['']),
 91 |       [val]
 92 |     )
 93 |   }
 94 |   return res
 95 | }
 96 | 
 97 | j2c.global = function(x) {
 98 |   return ':global(' + x + ')'
 99 | }
100 | 
101 | j2c.kv = kv
102 | function kv (k, v, o) {
103 |   o = {}
104 |   o[k] = v
105 |   return o
106 | }
107 | 
108 | j2c.at = function at (rule, params, block) {
109 |   if (
110 |     arguments.length < 3
111 |   ) {
112 |     var _at = at.bind.apply(at, [null].concat([].slice.call(arguments,0)))
113 |     _at.toString = function(){return '@' + rule + ' ' + params}
114 |     return _at
115 |   }
116 |   else return kv('@' + rule + ' ' + params, block)
117 | }
118 | 
119 | j2c(j2c)
120 | delete j2c.use
121 | 


--------------------------------------------------------------------------------
/src/sheet.js:
--------------------------------------------------------------------------------
 1 | import {type, ARRAY, OBJECT, STRING, cartesian, concat} from './helpers'
 2 | import {declarations} from './declarations'
 3 | import {at} from './at-rules'
 4 | 
 5 | /**
 6 |  * Add rulesets and other CSS statements to the sheet.
 7 |  *
 8 |  * @param {array|string|object} statements - a source object or sub-object.
 9 |  * @param {string[]} buf - the buffer in which the final style sheet is built
10 |  * @param {string} prefix - the current selector or a prefix in case of nested rules
11 |  * @param {string} rawPrefix - as above, but without localization transformations
12 |  * @param {string} vendors - a list of vendor prefixes
13 |  * @Param {boolean} local - are we in @local or in @global scope?
14 |  * @param {object} ns - helper functions to populate or create the @local namespace
15 |  *                      and to @extend classes
16 |  * @param {function} ns.e - @extend helper
17 |  * @param {function} ns.l - @local helper
18 |  */
19 | export function sheet(statements, buf, prefix, rawPrefix, vendors, local, ns) {
20 |   var k, kk, v, inDeclaration
21 | 
22 |   switch (type.call(statements)) {
23 | 
24 |   case ARRAY:
25 |     for (k = 0; k < statements.length; k++)
26 |       sheet(statements[k], buf, prefix, rawPrefix, vendors, local, ns)
27 |     break
28 | 
29 |   case OBJECT:
30 |     for (k in statements) {
31 |       v = statements[k]
32 |       if (prefix && /^[-\w$]+$/.test(k)) {
33 |         if (!inDeclaration) {
34 |           inDeclaration = 1
35 |           buf.push(( prefix || '*' ), ' {\n')
36 |         }
37 |         declarations(v, buf, k, vendors, local, ns)
38 |       } else if (/^@/.test(k)) {
39 |         // Handle At-rules
40 |         inDeclaration = (inDeclaration && buf.push('}\n') && 0)
41 | 
42 |         at(k, v, buf, prefix, rawPrefix, vendors, local, ns)
43 | 
44 |       } else {
45 |         // selector or nested sub-selectors
46 | 
47 |         inDeclaration = (inDeclaration && buf.push('}\n') && 0)
48 | 
49 |         sheet(v, buf,
50 |           (kk = /,/.test(prefix) || prefix && /,/.test(k)) ?
51 |             cartesian(prefix.split(','), ( local ?
52 |           k.replace(
53 |             /()(?::global\(\s*(\.[-\w]+)\s*\)|(\.)([-\w]+))/g, ns.l
54 |           ) : k
55 |         ).split(','), prefix).join(',') :
56 |             concat(prefix, ( local ?
57 |           k.replace(
58 |             /()(?::global\(\s*(\.[-\w]+)\s*\)|(\.)([-\w]+))/g, ns.l
59 |           ) : k
60 |         ), prefix),
61 |           kk ?
62 |             cartesian(rawPrefix.split(','), k.split(','), rawPrefix).join(',') :
63 |             concat(rawPrefix, k, rawPrefix),
64 |           vendors,
65 |           local, ns
66 |         )
67 |       }
68 |     }
69 |     if (inDeclaration) buf.push('}\n')
70 |     break
71 |   case STRING:
72 |     buf.push(
73 |         ( prefix || ':-error-no-selector' ) , ' {\n'
74 |       )
75 |     declarations(statements, buf, '', vendors, local, ns)
76 |     buf.push('}\n')
77 |   }
78 | }
79 | 


--------------------------------------------------------------------------------
/test/test.js:
--------------------------------------------------------------------------------
   1 | /*eslint-env node, mocha */
   2 | 
   3 | // used to normalize styles for reliable comparison.
   4 | var expect = require('expect.js'),
   5 |   minifySelectors = require('postcss-minify-selectors'),
   6 |   minifyParams = require('postcss-minify-params'),
   7 |   perfectionist = require('perfectionist'),
   8 |   postcss = require('postcss')([perfectionist({format:'compressed'}), minifySelectors(), minifyParams()])
   9 | 
  10 | 
  11 | 
  12 | function normalize(s) { return postcss.process(s).css }
  13 | 
  14 | function check(result, expected){
  15 |   result = normalize(result)
  16 | 
  17 |     // since you can't rely on the order of JS object keys, sometimes, several "expected"
  18 |     // values must be provided.
  19 |   // expected = (expected instanceof Array ? expected : [expected]).map(function(s){
  20 |   //   return normalize(s)
  21 |   // })
  22 |   expect(normalize(expected)).to.contain(result)
  23 | }
  24 | 
  25 | function randStr() {
  26 |   return Math.random().toString(36).replace(/[^a-z]+/g, '').substr(0, 5)
  27 | }
  28 | function randInt() {
  29 |   return Math.random().toString().substr(2, 3)
  30 | }
  31 | 
  32 | function webkitify(decl) {return '-webkit-' + decl + '\n' + decl}
  33 | 
  34 | [
  35 |   '../dist/j2c.commonjs',
  36 |   '../dist/j2c.commonjs.min'
  37 |   // ,
  38 |   // '../dist/inline/j2c.commonjs',
  39 |   // '../dist/inline/j2c.commonjs.min'
  40 | ].forEach(function(lib){
  41 |   var j2c = require(lib)
  42 | 
  43 |   function checkinline(result, expected){
  44 |     result = 'p{' + j2c.inline(result) + '}'
  45 |     expected = (expected instanceof Array ? expected : [expected]).map(function(s){
  46 |       return 'p{' + s + '}'
  47 |     })
  48 |     check(result, expected)
  49 |   }
  50 | 
  51 | 
  52 | 
  53 |   /////////////////////////////
  54 |   /**/  suite('Inline: ')  /**/
  55 |   /////////////////////////////
  56 | 
  57 | 
  58 |   test('a single property', function() {
  59 |     checkinline(
  60 |       {foo: 'bar'},
  61 |       'foo:bar;'
  62 |     )
  63 |   })
  64 | 
  65 |   test('two properties', function() {
  66 |     checkinline(
  67 |       {foo: 'bar', baz: 'qux'},
  68 |       'foo:bar;baz:qux;'
  69 |     )
  70 |   })
  71 | 
  72 |   test('two properties, ensure order', function() {
  73 |     check(j2c.inline({foo: 'bar', baz: 'qux'}), 'foo:bar;\nbaz:qux;')
  74 |   })
  75 | 
  76 | 
  77 |   test('array of values', function() {
  78 |     checkinline(
  79 |       {foo:['bar', 'baz']},
  80 |       'foo:bar;foo:baz;'
  81 |     )
  82 |   })
  83 | 
  84 |   test('sub-properties', function(){
  85 |     checkinline(
  86 |       {foo: {bar: 'baz'}},
  87 |       'foo-bar:baz;'
  88 |     )
  89 |   })
  90 | 
  91 |   test('multiple sub-properties', function(){
  92 |     checkinline(
  93 |       {foo: {bar$qux: 'baz'}},
  94 |       'foo-bar:baz;foo-qux:baz;'
  95 |     )
  96 |   })
  97 | 
  98 |   test('multiple sub-properties, ensure order', function() {
  99 |     check(j2c.inline({foo$baz: 'qux'}), 'foo:qux;\nbaz:qux;')
 100 |   })
 101 | 
 102 | 
 103 | 
 104 |   test('multiple sub-properties with a sub-sub-property', function(){
 105 |     checkinline(
 106 |       {foo: {bar$baz: {qux: 'quux'}}},
 107 |       'foo-bar-qux:quux;foo-baz-qux:quux;'
 108 |     )
 109 |   })
 110 | 
 111 |   test('multiple sub-properties with two sub-sub-properties', function(){
 112 |     checkinline(
 113 |       {foo: {bar$baz: {qux$quux: 'fred'}}},
 114 |       'foo-bar-qux:fred;foo-bar-quux:fred;foo-baz-qux:fred;foo-baz-quux:fred;'
 115 |     )
 116 |   })
 117 | 
 118 |   test('convert underscores', function() {
 119 |     checkinline(
 120 |       {'f_o_o': 'bar'},
 121 |       'f-o-o:bar;'
 122 |     )
 123 |   })
 124 | 
 125 |   test('convert CamelCase', function() {
 126 |     checkinline(
 127 |       {'FoO': 'bar'},
 128 |       '-fo-o:bar;'
 129 |     )
 130 |   })
 131 | 
 132 |   test('String value', function() {
 133 |     checkinline(
 134 |       'foo:bar',
 135 |       'foo:bar;'
 136 |     )
 137 |   })
 138 | 
 139 |   test('Array of Strings values', function() {
 140 |     checkinline(
 141 |       ['foo:bar', 'foo:baz'],
 142 |       'foo:bar;foo:baz'
 143 |     )
 144 |   })
 145 | 
 146 |   test('Array of mixed values at the root', function() {
 147 |     checkinline(
 148 |       ['foo:bar', {foo: 'baz'}],
 149 |       'foo:bar;foo:baz'
 150 |     )
 151 |   })
 152 | 
 153 |   test('Array of mixed value and sub-property', function() {
 154 |     checkinline(
 155 |       {foo:['bar', {baz: 'qux'}]},
 156 |       'foo:bar;foo-baz:qux'
 157 |     )
 158 |   })
 159 | 
 160 |   test('Prefixes by hand', function() {
 161 |     checkinline(
 162 |       {_o$_p$: {foo: 'bar'}},
 163 |       '-o-foo:bar;-p-foo:bar;foo:bar;'
 164 |     )
 165 |   })
 166 | 
 167 |   test('CSS *Hack', function() {
 168 |     // tested manually because the crass normalization
 169 |     // outputs an empty string.
 170 |     check(j2c.inline({'*foo': 'bar'}), '*foo:bar;')
 171 |   })
 172 | 
 173 |   test('CSS _Hack', function() {
 174 |     checkinline(
 175 |       ['_foo:bar', {_baz: 'qux'}],
 176 |       '_foo:bar;-baz:qux;'
 177 |     )
 178 |   })
 179 | 
 180 |   test('custom obj.valueOf', function() {
 181 |     var bar = {valueOf:function(){return 'bar'}}
 182 |     checkinline(
 183 |       {foo:bar},
 184 |       'foo:bar;'
 185 |     )
 186 |   })
 187 | 
 188 | 
 189 | 
 190 |   ////////////////////////////////////
 191 |   /**/  suite('Inline, nulls: ')  /**/
 192 |   ////////////////////////////////////
 193 | 
 194 |   test('null value', function() {
 195 |     checkinline(
 196 |       null,
 197 |       ''
 198 |     )
 199 |   })
 200 | 
 201 |   test('null leafs', function() {
 202 |     checkinline(
 203 |       {foo:null},
 204 |       ''
 205 |     )
 206 |   })
 207 | 
 208 |   test('undefined leafs', function() {
 209 |     checkinline(
 210 |       {foo:void 8},
 211 |       ''
 212 |     )
 213 |   })
 214 | 
 215 |   test('null value', function() {
 216 |     checkinline(
 217 |       null,
 218 |       ''
 219 |     )
 220 |   })
 221 | 
 222 |   test('undefined value', function() {
 223 |     checkinline(
 224 |       void 8,
 225 |       ''
 226 |     )
 227 |   })
 228 |   test('null in Array', function() {
 229 |     checkinline(
 230 |       [null],
 231 |       ''
 232 |     )
 233 |   })
 234 | 
 235 |   test('undefined in Array', function() {
 236 |     checkinline(
 237 |       [void 8],
 238 |       ''
 239 |     )
 240 |   })
 241 | 
 242 |   ////////////////////////////////////////
 243 |   /**/  suite('Inline namespaces: ')  /**/
 244 |   ////////////////////////////////////////
 245 | 
 246 |   test('namespaced animation', function() {
 247 |     var result = j2c.inline({foo:'theFoo'}, {animation:'foo 1sec'})
 248 |     check(result, webkitify('animation:theFoo 1sec;'))
 249 |   })
 250 | 
 251 |   test('namespaced animation-name', function() {
 252 |     var result = j2c.inline({foo:'theFoo'}, {animation_name:'foo'})
 253 |     check(result, webkitify('animation-name:theFoo;'))
 254 |   })
 255 | 
 256 |   test('namespaced and non-namespaced animation-name', function() {
 257 |     var result = j2c.inline({foo:'theFoo'}, {animation_name:'foo, bar'})
 258 |     check(result, webkitify('animation-name:theFoo, bar;'))
 259 |   })
 260 | 
 261 |   test('two namespaced animations', function() {
 262 |     var result = j2c.inline({foo:'theFoo', bar:'theBar'}, {animation:'foo 1sec, bar 2sec'})
 263 |     check(result, webkitify('animation:theFoo 1sec, theBar 2sec;'))
 264 |   })
 265 | 
 266 | 
 267 | 
 268 |   /////////////////////////////////////
 269 |   /**/  suite('Inline plugins: ')  /**/
 270 |   /////////////////////////////////////
 271 | 
 272 |   test('one plugin that does nothing', function() {
 273 |     check(''+j2c().use(function(){}).inline(
 274 |       {foo: 'bar'}
 275 |     ), 'foo:bar;')
 276 |   })
 277 | 
 278 |   test('one plugin that mutates the buffer', function() {
 279 |     check(''+j2c().use(
 280 |       function(buf){
 281 |         buf[0] = buf[0].replace('f','k')
 282 |       }
 283 |     ).inline(
 284 |       {foo: 'bar'}
 285 |     ), 'koo:bar;')
 286 |   })
 287 | 
 288 |   test('one plugin that returns a new buffer', function() {
 289 |     expect(''+j2c().use(
 290 |       function(){
 291 |         return ['hello:world;']
 292 |       }
 293 |     ).inline(
 294 |       {foo: 'bar'}
 295 |     )).to.be('hello:world;')
 296 |   })
 297 | 
 298 |   test('two plugins that mutate the buffer', function() {
 299 |     check(''+j2c().use(
 300 |       function(buf){
 301 |         buf[0]=buf[0].replace('f', 'a')
 302 |       },
 303 |       function(buf){
 304 |         buf[0]=buf[0].replace('a', 'm')
 305 |       }
 306 |     ).inline(
 307 |       {foo: 'bar'}
 308 |     ), 'moo:bar;')
 309 |   })
 310 | 
 311 | 
 312 | 
 313 |   /////////////////////////////////
 314 |   /**/  suite('j2c.prefix: ')  /**/
 315 |   /////////////////////////////////
 316 | 
 317 | 
 318 |   test('1 x 1', function() {
 319 |     var prod = j2c.prefix('foo', ['o'])
 320 |     expect(prod[0]).to.be('-o-foo')
 321 |     expect(prod[1]).to.be('foo')
 322 |   })
 323 | 
 324 |   test('2 x 1', function() {
 325 |     var prod = j2c.prefix('foo', ['o', 'p'])
 326 |     expect(prod[0]).to.be('-o-foo')
 327 |     expect(prod[1]).to.be('-p-foo')
 328 |     expect(prod[2]).to.be('foo')
 329 |   })
 330 | 
 331 | });
 332 | 
 333 | 
 334 | 
 335 | 
 336 | ['../dist/j2c.commonjs', '../dist/j2c.commonjs.min'].forEach(function(lib){
 337 |   var j2c = require(lib)
 338 | 
 339 | 
 340 | 
 341 |   ////////////////////////////////
 342 |   /**/  suite('j2c.sheet: ')  /**/
 343 |   ////////////////////////////////
 344 | 
 345 | 
 346 |   test('direct sheet call', function(){
 347 |     check(
 348 |       j2c.sheet({p: {foo:5}}),
 349 |       'p{foo:5}'
 350 |     )
 351 |   })
 352 | 
 353 | 
 354 | 
 355 |   //////////////////////////////////
 356 |   /**/  suite('Definitions: ')  /**/
 357 |   //////////////////////////////////
 358 | 
 359 | 
 360 |   test('basic', function() {
 361 |     check(
 362 |       j2c.sheet({p: {
 363 |         foo: 'bar'
 364 |       }}),
 365 |       'p{foo:bar}'
 366 |     )
 367 |   })
 368 | 
 369 |   test('convert underscores', function() {
 370 |     check(
 371 |       j2c.sheet({p: {
 372 |         foo_foo: 'bar'
 373 |       }}),
 374 |       'p{foo-foo:bar}'
 375 |     )
 376 |   })
 377 | 
 378 |   test('number values', function() {
 379 |     check(
 380 |       j2c.sheet({p: {
 381 |         foo:5
 382 |       }}),
 383 |       'p{foo:5}'
 384 |     )
 385 |   })
 386 | 
 387 |   test('composed property name', function() {
 388 |     check(
 389 |       j2c.sheet({p: {
 390 |         foo: {bar: 'baz'}
 391 |       }}),
 392 | 
 393 |       'p{foo-bar:baz}'
 394 |     )
 395 |   })
 396 | 
 397 |   test('composed selector : child with a given class', function() {
 398 |     check(
 399 |       j2c.sheet({'@global': {p: {
 400 |         ' .foo': {bar: 'baz'}
 401 |       }}}),
 402 | 
 403 |       'p .foo{bar:baz}'
 404 |     )
 405 |   })
 406 | 
 407 |   test('composed selector: add a class to the root', function() {
 408 |     check(
 409 |       j2c.sheet({'@global': {p: {
 410 |         '.foo': {bar: 'baz'}
 411 |       }}}),
 412 | 
 413 |       'p.foo{bar:baz}'
 414 |     )
 415 |   })
 416 | 
 417 |   test('manual vendor prefixes', function() {
 418 |     check(
 419 |       j2c.sheet({p: {
 420 |         _o$_ms$_moz$_webkit$: {foo: 'bar'}
 421 |       }}),
 422 | 
 423 |       'p {-o-foo:bar;-ms-foo:bar;-moz-foo:bar;-webkit-foo:bar;foo:bar}'
 424 |     )
 425 |   })
 426 | 
 427 |   test('mixing definitions and sub-selectors', function() {
 428 |     check(
 429 |       j2c.sheet({'@global': {p: {
 430 |         foo: 'bar',
 431 |         ' .foo': {bar: 'baz'}
 432 |       }}}),
 433 | 
 434 |       ['p .foo{bar:baz} p {foo:bar}', 'p {foo:bar} p .foo{bar:baz}']
 435 |     )
 436 |   })
 437 | 
 438 | 
 439 | 
 440 |   //////////////////////////////////////////////////
 441 |   /**/  suite('Selector Cartesian product: ')  /**/
 442 |   //////////////////////////////////////////////////
 443 | 
 444 | 
 445 |   test('1 x 2', function() {
 446 |     check(
 447 |       j2c.sheet({'@global': {p: {
 448 |         ' .foo': {
 449 |           ':before,:after': {
 450 |             foo: 'bar'
 451 |           }
 452 |         }
 453 |       }}}),
 454 | 
 455 |       'p .foo:before, p .foo:after {foo:bar}'
 456 |     )
 457 |   })
 458 | 
 459 |   test('2 x 1', function() {
 460 |     check(
 461 |       j2c.sheet({'@global': {p: {
 462 |         ' .foo, .bar': {
 463 |           ':before': {
 464 |             foo: 'bar'
 465 |           }
 466 |         }
 467 |       }}}),
 468 | 
 469 |       'p .foo:before, p .bar:before {foo:bar}'
 470 |     )
 471 |   })
 472 | 
 473 |   test('2 x 2', function() {
 474 |     check(
 475 |       j2c.sheet({'@global': {p: {
 476 |         ' .foo, .bar': {
 477 |           ':before,:after': {
 478 |             foo: 'bar'
 479 |           }
 480 |         }
 481 |       }}}),
 482 | 
 483 |       'p .foo:before, p .bar:before, p .foo:after, p .bar:after {foo:bar}'
 484 |     )
 485 |   })
 486 | 
 487 | 
 488 |   test('2 x 3 one of which is empty', function() {
 489 |     check(
 490 |       j2c.sheet({'@global': {p: {
 491 |         ' .foo, .bar': {
 492 |           ',:before,:after': {
 493 |             foo: 'bar'
 494 |           }
 495 |         }
 496 |       }}}),
 497 |       'p .foo, p .bar, p .foo:before, p .bar:before, p .foo:after, p .bar:after {foo:bar}'
 498 |     )
 499 |   })
 500 | 
 501 | 
 502 | 
 503 |   /////////////////////////////////
 504 |   /**/  suite('Ampersand: ')  /**/
 505 |   //////////////////////////////////
 506 | 
 507 | 
 508 |   test('composed selector: add a class to the root', function() {
 509 |     check(
 510 |       j2c.sheet({p: {
 511 |         ':global(.foo) &': {bar: 'baz'}
 512 |       }}),
 513 |       '.foo p{bar:baz}'
 514 |     )
 515 |   })
 516 | 
 517 |   test('& &', function() {
 518 |     check(
 519 |       j2c.sheet({':global(.foo)': {
 520 |         '& &': {
 521 |           bar: 'baz'
 522 |         }
 523 |       }}),
 524 |       '.foo .foo{bar:baz}'
 525 |     )
 526 |   })
 527 | 
 528 |   test('2 x 2', function() {
 529 |     check(
 530 |       j2c.sheet({p: {
 531 |         ' :global(.foo), :global(.bar)': {
 532 |           ' :global(.baz) &, :global(.qux)': {
 533 |             foo: 'bar'
 534 |           }
 535 |         }
 536 |       }}),
 537 |       '.baz p .foo,.baz p .bar,p .foo .qux ,p .bar .qux {foo:bar}'
 538 |     )
 539 |   })
 540 | 
 541 |   //////////////////////////////////////////
 542 |   /**/  suite('Strings and Arrays: ')  /**/
 543 |   //////////////////////////////////////////
 544 | 
 545 | 
 546 |   test('String literal', function() {
 547 |     check(
 548 |       j2c.sheet({p: 'foo:bar'}),
 549 |       'p{foo:bar}'
 550 |     )
 551 |   })
 552 | 
 553 |   test('String literal with two declarations', function() {
 554 |     check(
 555 |       j2c.sheet({p: 'foo:bar;baz:qux'}),
 556 |       'p {foo:bar;baz:qux}'
 557 |     )
 558 |   })
 559 | 
 560 |   test('String literal starting with an underscore', function() {
 561 |     check(
 562 |       j2c.sheet({p: '_foo:bar'}),
 563 |       'p {_foo:bar}'
 564 |     )
 565 |   })
 566 | 
 567 |   test('Array of String literals', function() {
 568 |     check(
 569 |       j2c.sheet({p: ['foo:bar', 'foo:baz']}),
 570 |       'p{foo:bar}p{foo:baz}'
 571 |     )
 572 |   })
 573 | 
 574 | 
 575 |   test('overloaded properties', function() {
 576 |     check(
 577 |       j2c.sheet({p: {
 578 |         foo:['bar', 'baz']
 579 |       }}),
 580 |       'p{foo:bar;foo:baz}'
 581 |     )
 582 |   })
 583 | 
 584 |   test('overloaded sub-properties', function() {
 585 |     check(
 586 |       j2c.sheet({p: {
 587 |         foo:[{bar: 'baz'}, {bar: 'qux'}]
 588 |       }}),
 589 |       'p{foo-bar:baz;foo-bar:qux}'
 590 |     )
 591 |   })
 592 | 
 593 |   test('nested Arrays', function(){
 594 |     check(
 595 |       j2c.sheet({p: [
 596 |         [
 597 |           {bar: 'baz'},
 598 |           {bar: 'qux'}
 599 |         ],
 600 |         'bar:quux;'
 601 |       ]}),
 602 |       'p{bar:baz}p{bar:qux}p{bar:quux}'
 603 |     )
 604 |   })
 605 | 
 606 | 
 607 | 
 608 |   //   ///////////////////////////////////////////
 609 |   //  /**/  suite("Sheet auto prefixes: ");  /**/
 610 |   // ///////////////////////////////////////////
 611 | 
 612 |   // test("String literal", function() {
 613 |   //     check(
 614 |   //         j2c.sheet({" p": "foo:bar"}, {vendors: ["o", "p"]}),
 615 |   //         "p{-o-foo:bar;-p-foo:bar;foo:bar}"
 616 |   //     );
 617 |   // });
 618 | 
 619 |   // test("Array of Strings", function() {
 620 |   //     check(
 621 |   //         j2c.sheet({" p": ["foo:bar", "_baz:qux"]}, {vendors: ["o", "p"]}),
 622 |   //         "p{-o-foo:bar;-p-foo:bar;foo:bar;-o-_baz:qux;-p-_baz:qux;_baz:qux}"
 623 |   //     );
 624 |   // });
 625 | 
 626 | 
 627 | 
 628 |   ////////////////////////////////
 629 |   /**/  suite('At-rules: ')  /**/
 630 |   ////////////////////////////////
 631 | 
 632 | 
 633 |   test('standard at-rule with text value', function() {
 634 |     check(
 635 |       j2c.sheet({p: {
 636 |         '@import': "'bar'"
 637 |       }}),
 638 | 
 639 |       "@import 'bar';"
 640 |     )
 641 |   })
 642 | 
 643 |   test('standard at-rule with object value', function() {
 644 |     check(
 645 |       j2c.sheet({p: {
 646 |         '@media foo': {bar: 'baz'}
 647 |       }}),
 648 | 
 649 |       '@media foo {p{bar:baz}}'
 650 |     )
 651 |   })
 652 | 
 653 |   test('several at-rules with object value', function() {
 654 |     check(
 655 |       j2c.sheet({p: {
 656 |         '@media foo': {bar: 'baz'},
 657 |         '@media foo2': {bar2: 'baz2'}
 658 |       }}),
 659 |       [
 660 |         '@media foo {p{bar:baz}} @media foo2 {p{bar2:baz2}}'
 661 |       ]
 662 |     )
 663 |   })
 664 | 
 665 |   test('Array of at-rules with text values', function() {
 666 |     check(
 667 |       j2c.sheet({p: [
 668 |         {'@import': "'bar'"},
 669 |         {'@import': "'baz'"}
 670 |       ]}),
 671 |       "@import 'bar'; @import 'baz';"
 672 |     )
 673 |   })
 674 | 
 675 |   test('nested at-rules', function() {
 676 |     check(
 677 |       j2c.sheet({p: {'@media screen': {width:1000, '@media (max-width: 12cm)': {size:5}}}}),
 678 |       [
 679 |         '@media screen{p{width:1000}@media (max-width:12cm){p{size:5}}}'
 680 |       ]
 681 |     )
 682 |   })
 683 | 
 684 |   test('@font-face', function(){
 685 |     check(
 686 |       j2c.sheet({p: {'@font-face': {foo: 'bar'}}}),
 687 |       '@font-face{foo:bar}'
 688 |     )
 689 |   })
 690 | 
 691 |   test('@keyframes', function(){
 692 |     check(
 693 |       j2c.sheet({p: {'@keyframes :global(qux)': {
 694 |         ' from': {foo: 'bar'},
 695 |         ' to': {foo: 'baz'}
 696 |       }}}),
 697 |       '@-webkit-keyframes qux{from{-webkit-foo:bar;foo:bar}to{-webkit-foo:baz;foo:baz}}' +
 698 |         '@keyframes qux{from{foo:bar}to{foo:baz}}'
 699 |     )
 700 |   })
 701 | 
 702 |   test('invalid @foo becomes at-foo property', function(){
 703 |     check(
 704 |       j2c.sheet({'@foo': 'bar'}),
 705 |       '@-error-unsupported-at-rule "@foo";'
 706 |     )
 707 | 
 708 |   })
 709 | 
 710 |   //////////////////////////////////////////////////
 711 |   /**/  suite('At-rules with array values: ')  /**/
 712 |   //////////////////////////////////////////////////
 713 | 
 714 | 
 715 |   test('@font-face with a 1-element array', function(){
 716 |     check(
 717 |       j2c.sheet({p: {'@font-face':[{foo: 'bar'}]}}),
 718 |       '@font-face{foo:bar}'
 719 |     )
 720 |   })
 721 | 
 722 |   test('@font-face with a 2-elements array', function(){
 723 |     check(
 724 |       j2c.sheet({p: {'@font-face':[{foo: 'bar'}, {foo: 'baz'}]}}),
 725 |       '@font-face{foo:bar}@font-face{foo:baz}'
 726 |     )
 727 |   })
 728 | 
 729 |   test('@namespace with a 1-element array', function(){
 730 |     check(
 731 |       j2c.sheet({'@namespace': ["'http://foo.example.com'"]}),
 732 |       "@namespace 'http://foo.example.com';"
 733 |     )
 734 |   })
 735 | 
 736 |   test('@namespace with a 2-elements array', function(){
 737 |     check(
 738 |       j2c.sheet({'@namespace': ["'http://foo.example.com'", "bar 'http://bar.example.com'"]}),
 739 |       "@namespace 'http://foo.example.com';@namespace bar 'http://bar.example.com';"
 740 |     )
 741 |   })
 742 | 
 743 |   /////////////////////////////////////
 744 |   /**/  suite('Locals, Globals ')  /**/
 745 |   /////////////////////////////////////
 746 | 
 747 | 
 748 |   test('a local class', function(){
 749 |     var css = j2c.sheet({'.bit': {foo:5}})
 750 |     expect(css.bit.slice(0, 8)).to.be('bit_j2c_')
 751 |     expect(css + '').to.contain('.' + css.bit + ' {\nfoo:5;\n}')
 752 |   })
 753 | 
 754 |   test('two local classes', function(){
 755 |     var css = j2c.sheet({'.bit': {foo:5}, '.bat': {bar:6}})
 756 |     expect(css.bit.slice(0, 8)).to.be('bit_j2c_')
 757 |     expect(css.bit.slice(4)).to.be(css.bat.slice(4))
 758 |     expect(css + '').to.contain('.' + css.bit + ' {\nfoo:5;\n}')
 759 |     expect(css + '').to.contain('.' + css.bat + ' {\nbar:6;\n}')
 760 |   })
 761 | 
 762 |   test('a local and a global class', function(){
 763 |     var css = j2c.sheet({'.bit': {foo:5}, ':global(.bat)': {bar:6}})
 764 |     expect(css.bit.slice(0, 8)).to.be('bit_j2c_')
 765 |     expect(css.bat).to.be(undefined)
 766 |     expect(css + '').to.contain('.' + css.bit + ' {\nfoo:5;\n}')
 767 |     expect(css + '').to.contain('.bat {\nbar:6;\n}')
 768 |   })
 769 | 
 770 |   test('a local wrapping a global block', function(){
 771 |     var css = j2c.sheet({'.bit': {'@global': {'.bat': {foo:5}}}})
 772 |     expect(css.bit.slice(0, 8)).to.be('bit_j2c_')
 773 |     expect(css.bat).to.be(undefined)
 774 |     expect(css + '').to.contain('.' + css.bit + '.bat {\nfoo:5;\n}')
 775 |   })
 776 | 
 777 |   test('two local classes, nested', function(){
 778 |     var css = j2c.sheet({'.bit': {foo:5, '.bat': {bar:6}}})
 779 |     expect(css.bit.slice(0, 8)).to.be('bit_j2c_')
 780 |     expect(css.bit.slice(4)).to.be(css.bat.slice(4))
 781 |     expect(css + '').to.contain('.' + css.bit + ' {\nfoo:5;\n}')
 782 |     expect(css + '').to.contain('.' + css.bit +'.' + css.bat + ' {\nbar:6;\n}')
 783 |   })
 784 | 
 785 |   test('@keyframes', function(){
 786 |     var css = j2c.sheet({'@keyframes bit': {}})
 787 |     expect(css.bit.slice(0, 8)).to.be('bit_j2c_')
 788 |     expect(css + '').to.contain('@keyframes ' + css.bit +' {')
 789 |   })
 790 | 
 791 |   test('a global @keyframes', function() {
 792 |     var css = j2c.sheet({'@keyframes :global(bit)': {}})
 793 |     expect(css.bit).to.be(undefined)
 794 |     expect(css + '').to.contain('@keyframes bit {')
 795 |   })
 796 | 
 797 |   test('a @keyframe nested in a @global at-rule', function() {
 798 |     var css = j2c.sheet({'@global': {'@keyframes bat': {'from':{foo:6}}}})
 799 |     expect(css.bat).to.be(undefined)
 800 |     expect(css + '').to.contain('@keyframes bat {')
 801 |   })
 802 | 
 803 |   test('one animation', function(){
 804 |     var css = j2c.sheet({p: {animation: 'bit 1sec'}})
 805 |     expect(css.bit.slice(0, 8)).to.be('bit_j2c_')
 806 |     expect(css + '').to.contain('animation:' + css.bit +' ')
 807 |   })
 808 | 
 809 |   test('a global animation', function() {
 810 |     var css = j2c.sheet({p: {animation: ':global(bit) 1sec'}})
 811 |     expect(css.bit).to.be(undefined)
 812 |     expect(css + '').to.contain('animation:bit ')
 813 |   })
 814 | 
 815 |   test('an animation nested in a @global at-rule', function() {
 816 |     var css = j2c.sheet({'@global': {p: {animation: 'bit 1sec'}}})
 817 |     expect(css.bit).to.be(undefined)
 818 |     expect(css + '').to.contain('animation:bit ')
 819 |   })
 820 | 
 821 |   test('one animation-name', function() {
 822 |     var css = j2c.sheet({p: {animation_name: 'bit'}})
 823 |     expect(css.bit.slice(0, 8)).to.be('bit_j2c_')
 824 |     expect(css + '').to.contain('animation-name:' + css.bit +';')
 825 |   })
 826 | 
 827 |   test('two animation-name', function() {
 828 |     var css = j2c.sheet({p: {animation_name: 'bit, bat'}})
 829 |     expect(css.bit.slice(0, 8)).to.be('bit_j2c_')
 830 |     expect(css.bit.slice(4)).to.be(css.bat.slice(4))
 831 |     expect(css + '').to.contain('animation-name:' + css.bit +', ' + css.bat)
 832 |   })
 833 | 
 834 |   test('two animation-name, one global', function() {
 835 |     var css = j2c.sheet({p: {animation_name: 'bit, :global(bat)'}})
 836 |     expect(css.bit.slice(0, 8)).to.be('bit_j2c_')
 837 |     expect(css.bat).to.be(undefined)
 838 |     expect(css + '').to.contain('animation-name:' + css.bit +', bat;')
 839 |   })
 840 | 
 841 |   test('a nested @global at-rule', function() {
 842 |     var css = j2c.sheet({'.bit': {'@global': {'.bat': {'foo':6}}}})
 843 |     expect(css.bit.slice(0, 8)).to.be('bit_j2c_')
 844 |     expect(css.bat).to.be(undefined)
 845 |     expect(css + '').to.contain( css.bit +'.bat {')
 846 |   })
 847 | 
 848 | 
 849 |   ///////////////////////////////////
 850 |   /**/  suite('Foolproofing: ')  /**/
 851 |   ///////////////////////////////////
 852 | 
 853 | 
 854 | 
 855 |   test('property-like sub-selector', function() {
 856 |     var sheet = j2c.sheet({'.foo': {'g,p': {animation_name: 'bit, bat'}}})
 857 | 
 858 |     expect(''+sheet).to.contain(':-error-bad-sub-selector-g,:-error-bad-sub-selector-p')
 859 |   })
 860 | 
 861 | 
 862 |   ////////////////////////////
 863 |   /**/  suite('Order: ')  /**/
 864 |   ////////////////////////////
 865 | 
 866 |   test('two properties', function() {
 867 |     check(j2c.sheet({p: {foo: 'bar', baz: 'qux'}}), 'p {\nfoo:bar;\nbaz:qux;\n}')
 868 |   })
 869 | 
 870 |   test('$ combiner', function() {
 871 |     check(j2c.sheet({p: {foo$baz: 'qux'}}), 'p {\nfoo:qux;\nbaz:qux;\n}')
 872 |   })
 873 | 
 874 | 
 875 |     // This was built with the assumption that
 876 |     // objects are totally unordered which isn't true in JS
 877 |     // As long as no properties are deleted and created again,
 878 |     // the insertion order is the iteration order in all
 879 |     // browsers and in node too.
 880 |   test('subselector > declaration > @media', function(){
 881 |     var prop = randStr()
 882 |     var klass = randStr()
 883 |     var width = randInt()
 884 | 
 885 |     var permutations = [
 886 |       [0, 1, 2],
 887 |       [1, 2, 0],
 888 |       [2, 0, 1],
 889 |       [2, 1, 0],
 890 |       [0, 2, 1],
 891 |       [1, 0, 2]
 892 |     ]
 893 | 
 894 |     var jsKeys = [
 895 |       prop,
 896 |       '.' + klass,
 897 |       '@media (min-width: ' + width + 'em)'
 898 |     ]
 899 | 
 900 |     var o = {}
 901 |     o[prop] = 5
 902 |     o['.' + klass] = {foo:6}
 903 |     o['@media (min-width: ' + width + 'em)'] = {bar:7}
 904 | 
 905 |     var rules = [
 906 |       'p{' + prop + ':5;}',
 907 |       'p.' + klass + '{foo:6;}',
 908 |       '@media (min-width: ' + width + 'em){p{bar:7;}}'
 909 |     ]
 910 | 
 911 |     permutations.forEach(function(indices) {
 912 |       var source = {p:{}}
 913 |       var CSS = []
 914 |       indices.forEach(function(i){
 915 |         source.p[jsKeys[i]] = o[jsKeys[i]]
 916 |         CSS.push(rules[i])
 917 |       })
 918 |       expect(normalize(j2c.sheet({'@global': source}))).to.be(normalize(CSS.join('')))
 919 |     })
 920 | 
 921 | 
 922 |   })
 923 | 
 924 |   test('@namespace then selector', function() {
 925 |     check(j2c.sheet({
 926 |       '@namespace': "'foo'",
 927 |       p: {foo: 'bar'}
 928 |     }), "@namespace 'foo';p{foo:bar;}")
 929 |   })
 930 | 
 931 |   /////////////////////////////////
 932 |   /**/  suite('Namespaces: ')  /**/
 933 |   /////////////////////////////////
 934 | 
 935 |   test('namespaced class', function() {
 936 |     var css = j2c.sheet(
 937 |         {foo: 'FOO'},
 938 |         {'.foo': {foo: 'bar', baz: 'qux'}}
 939 |       )
 940 |     check('' + css, '.FOO{foo:bar;baz:qux;}')
 941 |     expect(css.foo).to.be('FOO')
 942 |   })
 943 | 
 944 |   test('namespaced class wrapping a global block', function() {
 945 |     var css = j2c.sheet(
 946 |         {foo: 'FOOO'},
 947 |         {'.foo': {'@global': {'.foo': {foo: 'bar', baz: 'qux'}}}}
 948 |       )
 949 |     check('' + css, '.FOOO.foo{foo:bar;baz:qux;}')
 950 |     expect(css.foo).to.be('FOOO')
 951 |   })
 952 | 
 953 |   test('namespaced @keyframes', function(){
 954 |     var css = j2c.sheet(
 955 |         {bit: 'BOT'},
 956 |         {'@keyframes bit': {}}
 957 |       )
 958 |     expect(css.bit).to.be('BOT')
 959 |     expect(css + '').to.contain('@keyframes BOT {')
 960 |   })
 961 | 
 962 |   test('namespaced animation', function(){
 963 |     var css = j2c.sheet(
 964 |         {bit: 'BOT'},
 965 |         {p: {animation: 'bit 1sec'}}
 966 |       )
 967 |     expect(css.bit).to.be('BOT')
 968 |     check(css + '', 'p{' + webkitify('animation:BOT 1sec;') + '}')
 969 |   })
 970 | 
 971 |   test('namespaced animation-name', function() {
 972 |     var css = j2c.sheet(
 973 |         {bit: 'BOT'},
 974 |         {p: {animation_name: 'bit'}}
 975 |       )
 976 |     expect(css.bit).to.be('BOT')
 977 |     check(css + '', 'p{' + webkitify('animation-name:BOT;') + '}')
 978 |   })
 979 | 
 980 |   /////////////////////////////
 981 |   /**/  suite('extend: ')  /**/
 982 |   /////////////////////////////
 983 | 
 984 |   test('local extend', function() {
 985 |     var css = j2c.sheet({'.bit': {'@extend':'.bat'}})
 986 |     expect(css.bit).to.contain('bit_j2c_')
 987 |     expect(css.bat).to.contain('bat_j2c_')
 988 |     expect(css.bat).not.to.contain('bit_j2c_')
 989 |     expect(css.bit).to.contain(css.bat + ' ')
 990 |   })
 991 | 
 992 |   test('global extend', function() {
 993 |     var css = j2c.sheet({'.bit': {'@extend':':global(.bat)'}})
 994 |     expect(css.bit).to.contain('bit_j2c_')
 995 |     expect(css.bit).to.contain('bat ')
 996 |   })
 997 | 
 998 |   test('two local extends', function() {
 999 |     var css = j2c.sheet({'.bit': {'@extends':['.bat', '.bot']}})
1000 |     expect(css.bit).to.contain('bit_j2c_')
1001 |     expect(css.bat).to.contain('bat_j2c_')
1002 |     expect(css.bot).to.contain('bot_j2c_')
1003 |     expect(css.bat).not.to.contain('bit_j2c_')
1004 |     expect(css.bot).not.to.contain('bit_j2c_')
1005 |     expect(css.bit).to.contain(css.bat + ' ' + css.bot + ' ')
1006 |   })
1007 | 
1008 |   test('extend applies only to the last class in the selector', function() {
1009 |     var css = j2c.sheet({'.bot p .bit': {'@extend':'.bat'}})
1010 |     expect(css.bit).to.contain('bit_j2c_')
1011 |     expect(css.bat).to.contain('bat_j2c_')
1012 |     expect(css.bot).to.contain('bot_j2c_')
1013 |     expect(css.bat).not.to.contain('bit_j2c_')
1014 |     expect(css.bit).to.contain(css.bat + ' ')
1015 |     expect(css.bot).not.to.contain(css.bat + ' ')
1016 |   })
1017 | 
1018 |   test("if we can't find a class to extend, pass @extend as a property", function() {
1019 |     var css = j2c.sheet({'p > a': {'@extend':'.bat'}})
1020 |     expect(css.bat).to.be(undefined)
1021 |     expect('' + css).to.contain('@-error-no-class-to-extend-in "p > a";')
1022 |   })
1023 | 
1024 |   test("extend doesn't extend into global selectors", function() {
1025 |     // @extend thus extends the last local class in the stream
1026 |     var css = j2c.sheet({'.bit :global(.bot)': {'@extend':'.bat'}})
1027 |     expect(css.bit).to.contain('bit_j2c_')
1028 |     expect(css.bat).to.be(undefined)
1029 |     expect(css.bot).to.be(undefined)
1030 |     expect(css.bit).not.to.contain(css.bat + ' ')
1031 |     expect('' + css).to.contain('@-error-cannot-extend-in-global-context ".bit :global(.bot)";')
1032 |   })
1033 | 
1034 |   //////////////////////////////
1035 |   /**/  suite('Plugins: ')  /**/
1036 |   //////////////////////////////
1037 | 
1038 |   test('one plugin that does nothing', function() {
1039 |     check(''+j2c().use(function(){}).sheet(
1040 |       {p: {foo: 'bar'}}
1041 |     ), 'p{foo:bar;}')
1042 |   })
1043 | 
1044 |   test('one plugin that mutates the buffer', function() {
1045 |     check(''+j2c().use(
1046 |       function(buf){
1047 |         buf[0] = 'li'
1048 |       }
1049 |     ).sheet(
1050 |       {p: {foo: 'bar'}}
1051 |     ), 'li{foo:bar;}')
1052 |   })
1053 | 
1054 |   test('one plugin that returns a new buffer', function() {
1055 |     check(''+j2c().use(
1056 |       function(){
1057 |         return ['li{foo:bar;}']
1058 |       }
1059 |     ).sheet(
1060 |       {p: {foo: 'bar'}}
1061 |     ), 'li{foo:bar;}')
1062 |   })
1063 | 
1064 |   test('two plugins that mutate the buffer', function() {
1065 |     check(''+j2c().use(
1066 |       function(buf){
1067 |         buf[0]=buf[0].replace('p', 'a')
1068 |       },
1069 |       function(buf){
1070 |         buf[0]=buf[0].replace('a', 'i')
1071 |       }
1072 |     ).sheet(
1073 |       {p: {fop: 'bar'}}
1074 |     ), 'i{fop:bar;}')
1075 |   })
1076 | })
1077 | 
1078 | 
1079 | 
1080 | 
1081 | 


--------------------------------------------------------------------------------