├── .gitignore
├── .travis.yml
├── LICENSE
├── Readme.MD
├── coverage
├── coverage.json
├── lcov-report
│ ├── base.css
│ ├── core
│ │ ├── SmartCSS.js.html
│ │ ├── StyleClass.js.html
│ │ └── index.html
│ ├── index.html
│ ├── prettify.css
│ ├── prettify.js
│ ├── sort-arrow-sprite.png
│ ├── sorter.js
│ └── src
│ │ ├── RCSSPatches.js.html
│ │ ├── core
│ │ ├── SmartCSS.js.html
│ │ ├── StyleClass.js.html
│ │ └── index.html
│ │ ├── index.html
│ │ └── utils.js.html
└── lcov.info
├── docs
├── jsduck
│ ├── app-0c945a27f43452df695771ddb60b3d14.js
│ ├── data-3d348e4312ca95b4b19f289bde036042.js
│ ├── eg-iframe.html
│ ├── extjs
│ │ ├── ext-all.js
│ │ └── resources
│ │ │ └── themes
│ │ │ └── images
│ │ │ └── default
│ │ │ ├── boundlist
│ │ │ └── trigger-arrow.png
│ │ │ ├── box
│ │ │ ├── corners-blue.gif
│ │ │ ├── corners.gif
│ │ │ ├── l-blue.gif
│ │ │ ├── l.gif
│ │ │ ├── r-blue.gif
│ │ │ ├── r.gif
│ │ │ ├── tb-blue.gif
│ │ │ └── tb.gif
│ │ │ ├── btn-group
│ │ │ ├── btn-group-default-framed-corners.gif
│ │ │ ├── btn-group-default-framed-notitle-corners.gif
│ │ │ ├── btn-group-default-framed-notitle-sides.gif
│ │ │ └── btn-group-default-framed-sides.gif
│ │ │ ├── btn
│ │ │ ├── btn-default-large-bg.gif
│ │ │ ├── btn-default-large-corners.gif
│ │ │ ├── btn-default-large-disabled-bg.gif
│ │ │ ├── btn-default-large-disabled-corners.gif
│ │ │ ├── btn-default-large-disabled-sides.gif
│ │ │ ├── btn-default-large-focus-bg.gif
│ │ │ ├── btn-default-large-focus-corners.gif
│ │ │ ├── btn-default-large-focus-sides.gif
│ │ │ ├── btn-default-large-over-bg.gif
│ │ │ ├── btn-default-large-over-corners.gif
│ │ │ ├── btn-default-large-over-sides.gif
│ │ │ ├── btn-default-large-pressed-bg.gif
│ │ │ ├── btn-default-large-pressed-corners.gif
│ │ │ ├── btn-default-large-pressed-sides.gif
│ │ │ ├── btn-default-large-sides.gif
│ │ │ ├── btn-default-medium-bg.gif
│ │ │ ├── btn-default-medium-corners.gif
│ │ │ ├── btn-default-medium-disabled-bg.gif
│ │ │ ├── btn-default-medium-disabled-corners.gif
│ │ │ ├── btn-default-medium-disabled-sides.gif
│ │ │ ├── btn-default-medium-focus-bg.gif
│ │ │ ├── btn-default-medium-focus-corners.gif
│ │ │ ├── btn-default-medium-focus-sides.gif
│ │ │ ├── btn-default-medium-over-bg.gif
│ │ │ ├── btn-default-medium-over-corners.gif
│ │ │ ├── btn-default-medium-over-sides.gif
│ │ │ ├── btn-default-medium-pressed-bg.gif
│ │ │ ├── btn-default-medium-pressed-corners.gif
│ │ │ ├── btn-default-medium-pressed-sides.gif
│ │ │ ├── btn-default-medium-sides.gif
│ │ │ ├── btn-default-small-bg.gif
│ │ │ ├── btn-default-small-corners.gif
│ │ │ ├── btn-default-small-disabled-bg.gif
│ │ │ ├── btn-default-small-disabled-corners.gif
│ │ │ ├── btn-default-small-disabled-sides.gif
│ │ │ ├── btn-default-small-focus-bg.gif
│ │ │ ├── btn-default-small-focus-corners.gif
│ │ │ ├── btn-default-small-focus-sides.gif
│ │ │ ├── btn-default-small-over-bg.gif
│ │ │ ├── btn-default-small-over-corners.gif
│ │ │ ├── btn-default-small-over-sides.gif
│ │ │ ├── btn-default-small-pressed-bg.gif
│ │ │ ├── btn-default-small-pressed-corners.gif
│ │ │ ├── btn-default-small-pressed-sides.gif
│ │ │ ├── btn-default-small-sides.gif
│ │ │ ├── btn-default-toolbar-large-corners.gif
│ │ │ ├── btn-default-toolbar-large-disabled-corners.gif
│ │ │ ├── btn-default-toolbar-large-disabled-sides.gif
│ │ │ ├── btn-default-toolbar-large-focus-bg.gif
│ │ │ ├── btn-default-toolbar-large-focus-corners.gif
│ │ │ ├── btn-default-toolbar-large-focus-sides.gif
│ │ │ ├── btn-default-toolbar-large-over-bg.gif
│ │ │ ├── btn-default-toolbar-large-over-corners.gif
│ │ │ ├── btn-default-toolbar-large-over-sides.gif
│ │ │ ├── btn-default-toolbar-large-pressed-bg.gif
│ │ │ ├── btn-default-toolbar-large-pressed-corners.gif
│ │ │ ├── btn-default-toolbar-large-pressed-sides.gif
│ │ │ ├── btn-default-toolbar-large-sides.gif
│ │ │ ├── btn-default-toolbar-medium-corners.gif
│ │ │ ├── btn-default-toolbar-medium-disabled-corners.gif
│ │ │ ├── btn-default-toolbar-medium-disabled-sides.gif
│ │ │ ├── btn-default-toolbar-medium-focus-bg.gif
│ │ │ ├── btn-default-toolbar-medium-focus-corners.gif
│ │ │ ├── btn-default-toolbar-medium-focus-sides.gif
│ │ │ ├── btn-default-toolbar-medium-over-bg.gif
│ │ │ ├── btn-default-toolbar-medium-over-corners.gif
│ │ │ ├── btn-default-toolbar-medium-over-sides.gif
│ │ │ ├── btn-default-toolbar-medium-pressed-bg.gif
│ │ │ ├── btn-default-toolbar-medium-pressed-corners.gif
│ │ │ ├── btn-default-toolbar-medium-pressed-sides.gif
│ │ │ ├── btn-default-toolbar-medium-sides.gif
│ │ │ ├── btn-default-toolbar-small-corners.gif
│ │ │ ├── btn-default-toolbar-small-disabled-corners.gif
│ │ │ ├── btn-default-toolbar-small-disabled-sides.gif
│ │ │ ├── btn-default-toolbar-small-focus-bg.gif
│ │ │ ├── btn-default-toolbar-small-focus-corners.gif
│ │ │ ├── btn-default-toolbar-small-focus-sides.gif
│ │ │ ├── btn-default-toolbar-small-over-bg.gif
│ │ │ ├── btn-default-toolbar-small-over-corners.gif
│ │ │ ├── btn-default-toolbar-small-over-sides.gif
│ │ │ ├── btn-default-toolbar-small-pressed-bg.gif
│ │ │ ├── btn-default-toolbar-small-pressed-corners.gif
│ │ │ ├── btn-default-toolbar-small-pressed-sides.gif
│ │ │ └── btn-default-toolbar-small-sides.gif
│ │ │ ├── button
│ │ │ ├── arrow.gif
│ │ │ ├── btn.gif
│ │ │ ├── group-cs.gif
│ │ │ ├── group-lr.gif
│ │ │ ├── group-tb.gif
│ │ │ ├── s-arrow-b-noline.gif
│ │ │ ├── s-arrow-b.gif
│ │ │ ├── s-arrow-bo.gif
│ │ │ ├── s-arrow-light.gif
│ │ │ ├── s-arrow-noline.gif
│ │ │ ├── s-arrow-o.gif
│ │ │ └── s-arrow.gif
│ │ │ ├── datepicker
│ │ │ ├── datepicker-footer-bg.gif
│ │ │ ├── datepicker-footer-bg.png
│ │ │ ├── datepicker-header-bg.gif
│ │ │ └── datepicker-header-bg.png
│ │ │ ├── dd
│ │ │ ├── drop-add.gif
│ │ │ ├── drop-no.gif
│ │ │ └── drop-yes.gif
│ │ │ ├── editor
│ │ │ └── tb-sprite.gif
│ │ │ ├── form-invalid-tip
│ │ │ ├── form-invalid-tip-corners.gif
│ │ │ ├── form-invalid-tip-default-corners.gif
│ │ │ ├── form-invalid-tip-default-sides.gif
│ │ │ └── form-invalid-tip-sides.gif
│ │ │ ├── form
│ │ │ ├── checkbox.gif
│ │ │ ├── clear-trigger.gif
│ │ │ ├── date-trigger.gif
│ │ │ ├── error-tip-corners.gif
│ │ │ ├── exclamation.gif
│ │ │ ├── radio.gif
│ │ │ ├── search-trigger.gif
│ │ │ ├── spinner-small.gif
│ │ │ ├── spinner.gif
│ │ │ ├── text-bg.gif
│ │ │ ├── trigger-square.gif
│ │ │ ├── trigger-tpl.gif
│ │ │ └── trigger.gif
│ │ │ ├── grid
│ │ │ ├── arrow-left-white.gif
│ │ │ ├── arrow-right-white.gif
│ │ │ ├── cell-special-bg.gif
│ │ │ ├── cell-special-bg.png
│ │ │ ├── cell-special-selected-bg.png
│ │ │ ├── checked.gif
│ │ │ ├── col-move-bottom.gif
│ │ │ ├── col-move-top.gif
│ │ │ ├── column-header-bg.gif
│ │ │ ├── column-header-bg.png
│ │ │ ├── column-header-over-bg.gif
│ │ │ ├── column-header-over-bg.png
│ │ │ ├── columns.gif
│ │ │ ├── dd-insert-arrow-left.gif
│ │ │ ├── dd-insert-arrow-left.png
│ │ │ ├── dd-insert-arrow-right.gif
│ │ │ ├── dd-insert-arrow-right.png
│ │ │ ├── dirty.gif
│ │ │ ├── done.gif
│ │ │ ├── drop-no.gif
│ │ │ ├── footer-bg.gif
│ │ │ ├── grid-blue-hd.gif
│ │ │ ├── grid-blue-split.gif
│ │ │ ├── grid-hrow.gif
│ │ │ ├── grid-loading.gif
│ │ │ ├── grid-split.gif
│ │ │ ├── grid-vista-hd.gif
│ │ │ ├── grid3-hd-btn.gif
│ │ │ ├── grid3-hrow-over.gif
│ │ │ ├── grid3-hrow.gif
│ │ │ ├── grid3-rowheader.gif
│ │ │ ├── group-by.gif
│ │ │ ├── group-collapse.gif
│ │ │ ├── group-expand-sprite.gif
│ │ │ ├── group-expand.gif
│ │ │ ├── hd-pop.gif
│ │ │ ├── hmenu-asc.gif
│ │ │ ├── hmenu-desc.gif
│ │ │ ├── hmenu-lock.gif
│ │ │ ├── hmenu-lock.png
│ │ │ ├── hmenu-unlock.gif
│ │ │ ├── hmenu-unlock.png
│ │ │ ├── invalid_line.gif
│ │ │ ├── loading.gif
│ │ │ ├── mso-hd.gif
│ │ │ ├── nowait.gif
│ │ │ ├── page-first.gif
│ │ │ ├── page-last-disabled.gif
│ │ │ ├── page-last.gif
│ │ │ ├── page-next-disabled.gif
│ │ │ ├── page-next.gif
│ │ │ ├── page-prev-disabled.gif
│ │ │ ├── page-prev.gif
│ │ │ ├── pick-button.gif
│ │ │ ├── property-cell-bg.gif
│ │ │ ├── property-cell-selected-bg.gif
│ │ │ ├── refresh-disabled.gif
│ │ │ ├── refresh.gif
│ │ │ ├── row-check-sprite.gif
│ │ │ ├── row-expand-sprite.gif
│ │ │ ├── row-over.gif
│ │ │ ├── row-sel.gif
│ │ │ ├── sort-hd.gif
│ │ │ ├── sort_desc.gif
│ │ │ ├── unchecked.gif
│ │ │ └── wait.gif
│ │ │ ├── layout
│ │ │ ├── mini-bottom.gif
│ │ │ ├── mini-left.gif
│ │ │ ├── mini-right.gif
│ │ │ └── mini-top.gif
│ │ │ ├── menu
│ │ │ ├── checked.gif
│ │ │ ├── group-checked.gif
│ │ │ ├── item-over.gif
│ │ │ ├── menu-item-active-bg.gif
│ │ │ ├── menu-item-active-corners.gif
│ │ │ ├── menu-item-active-sides.gif
│ │ │ ├── menu-parent.gif
│ │ │ ├── menu.gif
│ │ │ └── unchecked.gif
│ │ │ ├── panel-header
│ │ │ ├── panel-header-default-bottom-bg.gif
│ │ │ ├── panel-header-default-framed-bottom-bg.gif
│ │ │ ├── panel-header-default-framed-bottom-corners.gif
│ │ │ ├── panel-header-default-framed-bottom-sides.gif
│ │ │ ├── panel-header-default-framed-collapsed-bottom-bg.gif
│ │ │ ├── panel-header-default-framed-collapsed-bottom-corners.gif
│ │ │ ├── panel-header-default-framed-collapsed-bottom-sides.gif
│ │ │ ├── panel-header-default-framed-collapsed-left-bg.gif
│ │ │ ├── panel-header-default-framed-collapsed-left-corners.gif
│ │ │ ├── panel-header-default-framed-collapsed-left-sides.gif
│ │ │ ├── panel-header-default-framed-collapsed-right-bg.gif
│ │ │ ├── panel-header-default-framed-collapsed-right-corners.gif
│ │ │ ├── panel-header-default-framed-collapsed-right-sides.gif
│ │ │ ├── panel-header-default-framed-collapsed-top-bg.gif
│ │ │ ├── panel-header-default-framed-collapsed-top-corners.gif
│ │ │ ├── panel-header-default-framed-collapsed-top-sides.gif
│ │ │ ├── panel-header-default-framed-left-bg.gif
│ │ │ ├── panel-header-default-framed-left-corners.gif
│ │ │ ├── panel-header-default-framed-left-sides.gif
│ │ │ ├── panel-header-default-framed-right-bg.gif
│ │ │ ├── panel-header-default-framed-right-corners.gif
│ │ │ ├── panel-header-default-framed-right-sides.gif
│ │ │ ├── panel-header-default-framed-top-bg.gif
│ │ │ ├── panel-header-default-framed-top-corners.gif
│ │ │ ├── panel-header-default-framed-top-sides.gif
│ │ │ ├── panel-header-default-left-bg.gif
│ │ │ ├── panel-header-default-right-bg.gif
│ │ │ └── panel-header-default-top-bg.gif
│ │ │ ├── panel
│ │ │ ├── panel-default-framed-corners.gif
│ │ │ └── panel-default-framed-sides.gif
│ │ │ ├── progress
│ │ │ └── progress-default-bg.gif
│ │ │ ├── shared
│ │ │ ├── blue-loading.gif
│ │ │ ├── calendar.gif
│ │ │ ├── glass-bg.gif
│ │ │ ├── hd-sprite.gif
│ │ │ ├── icon-error.gif
│ │ │ ├── icon-info.gif
│ │ │ ├── icon-question.gif
│ │ │ ├── icon-warning.gif
│ │ │ ├── large-loading.gif
│ │ │ ├── left-btn.gif
│ │ │ ├── loading-balls.gif
│ │ │ ├── right-btn.gif
│ │ │ ├── shadow-c.png
│ │ │ ├── shadow-lr.png
│ │ │ ├── shadow.png
│ │ │ └── warning.gif
│ │ │ ├── sizer
│ │ │ ├── e-handle-dark.gif
│ │ │ ├── e-handle.gif
│ │ │ ├── ne-handle-dark.gif
│ │ │ ├── ne-handle.gif
│ │ │ ├── nw-handle-dark.gif
│ │ │ ├── nw-handle.gif
│ │ │ ├── s-handle-dark.gif
│ │ │ ├── s-handle.gif
│ │ │ ├── se-handle-dark.gif
│ │ │ ├── se-handle.gif
│ │ │ ├── square.gif
│ │ │ ├── sw-handle-dark.gif
│ │ │ └── sw-handle.gif
│ │ │ ├── slider
│ │ │ ├── slider-bg.gif
│ │ │ ├── slider-bg.png
│ │ │ ├── slider-thumb.gif
│ │ │ ├── slider-thumb.png
│ │ │ ├── slider-v-bg.gif
│ │ │ ├── slider-v-bg.png
│ │ │ ├── slider-v-thumb.gif
│ │ │ └── slider-v-thumb.png
│ │ │ ├── tab-bar
│ │ │ ├── scroll-left.gif
│ │ │ ├── scroll-right.gif
│ │ │ └── tab-bar-default-bg.gif
│ │ │ ├── tab
│ │ │ ├── tab-default-bottom-active-bg.gif
│ │ │ ├── tab-default-bottom-active-corners.gif
│ │ │ ├── tab-default-bottom-active-sides.gif
│ │ │ ├── tab-default-bottom-bg.gif
│ │ │ ├── tab-default-bottom-corners.gif
│ │ │ ├── tab-default-bottom-disabled-bg.gif
│ │ │ ├── tab-default-bottom-disabled-corners.gif
│ │ │ ├── tab-default-bottom-disabled-sides.gif
│ │ │ ├── tab-default-bottom-over-bg.gif
│ │ │ ├── tab-default-bottom-over-corners.gif
│ │ │ ├── tab-default-bottom-over-sides.gif
│ │ │ ├── tab-default-bottom-sides.gif
│ │ │ ├── tab-default-close.gif
│ │ │ ├── tab-default-top-active-bg.gif
│ │ │ ├── tab-default-top-active-corners.gif
│ │ │ ├── tab-default-top-active-sides.gif
│ │ │ ├── tab-default-top-bg.gif
│ │ │ ├── tab-default-top-corners.gif
│ │ │ ├── tab-default-top-disabled-bg.gif
│ │ │ ├── tab-default-top-disabled-corners.gif
│ │ │ ├── tab-default-top-disabled-sides.gif
│ │ │ ├── tab-default-top-over-bg.gif
│ │ │ ├── tab-default-top-over-corners.gif
│ │ │ ├── tab-default-top-over-sides.gif
│ │ │ └── tab-default-top-sides.gif
│ │ │ ├── tip
│ │ │ ├── tip-corners.gif
│ │ │ └── tip-sides.gif
│ │ │ ├── toolbar
│ │ │ ├── more.gif
│ │ │ ├── scroll-left.gif
│ │ │ ├── scroll-right.gif
│ │ │ └── toolbar-default-bg.gif
│ │ │ ├── tools
│ │ │ ├── tool-sprite-tpl.gif
│ │ │ ├── tool-sprites.gif
│ │ │ └── tools-sprites-trans.gif
│ │ │ ├── tree
│ │ │ ├── arrows.gif
│ │ │ ├── drop-above.gif
│ │ │ ├── drop-add.gif
│ │ │ ├── drop-append.gif
│ │ │ ├── drop-below.gif
│ │ │ ├── drop-between.gif
│ │ │ ├── drop-no.gif
│ │ │ ├── drop-over.gif
│ │ │ ├── drop-under.gif
│ │ │ ├── drop-yes.gif
│ │ │ ├── elbow-end-minus-nl.gif
│ │ │ ├── elbow-end-minus.gif
│ │ │ ├── elbow-end-plus-nl.gif
│ │ │ ├── elbow-end-plus.gif
│ │ │ ├── elbow-end.gif
│ │ │ ├── elbow-line.gif
│ │ │ ├── elbow-minus-nl.gif
│ │ │ ├── elbow-minus.gif
│ │ │ ├── elbow-plus-nl.gif
│ │ │ ├── elbow-plus.gif
│ │ │ ├── elbow.gif
│ │ │ ├── folder-open.gif
│ │ │ ├── folder.gif
│ │ │ ├── leaf.gif
│ │ │ ├── loading.gif
│ │ │ └── s.gif
│ │ │ ├── util
│ │ │ └── splitter
│ │ │ │ ├── mini-bottom.gif
│ │ │ │ ├── mini-left.gif
│ │ │ │ ├── mini-right.gif
│ │ │ │ └── mini-top.gif
│ │ │ ├── window-header
│ │ │ ├── window-header-default-bottom-corners.gif
│ │ │ ├── window-header-default-bottom-sides.gif
│ │ │ ├── window-header-default-collapsed-bottom-corners.gif
│ │ │ ├── window-header-default-collapsed-bottom-sides.gif
│ │ │ ├── window-header-default-collapsed-left-corners.gif
│ │ │ ├── window-header-default-collapsed-left-sides.gif
│ │ │ ├── window-header-default-collapsed-right-corners.gif
│ │ │ ├── window-header-default-collapsed-right-sides.gif
│ │ │ ├── window-header-default-collapsed-top-corners.gif
│ │ │ ├── window-header-default-collapsed-top-sides.gif
│ │ │ ├── window-header-default-left-corners.gif
│ │ │ ├── window-header-default-left-sides.gif
│ │ │ ├── window-header-default-right-corners.gif
│ │ │ ├── window-header-default-right-sides.gif
│ │ │ ├── window-header-default-top-corners.gif
│ │ │ └── window-header-default-top-sides.gif
│ │ │ └── window
│ │ │ ├── window-default-corners.gif
│ │ │ └── window-default-sides.gif
│ ├── favicon.ico
│ ├── index.html
│ ├── member-icons
│ │ ├── cfg.png
│ │ ├── css_mixin.png
│ │ ├── css_var.png
│ │ ├── event.png
│ │ ├── method.png
│ │ └── property.png
│ ├── output
│ │ ├── core.SmartCSS.js
│ │ ├── core.StyleClass.js
│ │ └── utils.js
│ ├── resources
│ │ ├── css
│ │ │ └── app-4689d2a5522dcd3c9e9923ca59c33f27.css
│ │ ├── images
│ │ │ ├── ajax-loader.gif
│ │ │ ├── arrows.png
│ │ │ ├── class-m.png
│ │ │ ├── comment-bubble.png
│ │ │ ├── comment.png
│ │ │ ├── component-m.png
│ │ │ ├── default-guide.png
│ │ │ ├── doc-m.png
│ │ │ ├── down-arr.png
│ │ │ ├── elbow-end.gif
│ │ │ ├── example-icons.png
│ │ │ ├── expandcollapse.png
│ │ │ ├── group-expand-sprite.gif
│ │ │ ├── header.png
│ │ │ ├── hero-extjs4-alt.png
│ │ │ ├── icons.png
│ │ │ ├── link-green-standard-over.png
│ │ │ ├── link-green-standard.png
│ │ │ ├── loading.gif
│ │ │ ├── logo-screen-noglow.png
│ │ │ ├── logo.png
│ │ │ ├── member-collapsed.gif
│ │ │ ├── member-expanded.gif
│ │ │ ├── member-hover.gif
│ │ │ ├── more.png
│ │ │ ├── phone-l.jpg
│ │ │ ├── phone-p.jpg
│ │ │ ├── phone-small-l.jpg
│ │ │ ├── phone-small-p.jpg
│ │ │ ├── print.png
│ │ │ ├── sample-over.gif
│ │ │ ├── search-box.png
│ │ │ ├── singleton-m.png
│ │ │ ├── tablet-l.jpg
│ │ │ ├── tablet-p.jpg
│ │ │ ├── tabs.png
│ │ │ ├── text-bg.gif
│ │ │ ├── vote-arrows.png
│ │ │ ├── welcome-bg-js4.gif
│ │ │ ├── x.png
│ │ │ └── x12.png
│ │ └── prettify
│ │ │ ├── prettify.css
│ │ │ └── prettify.js
│ ├── source
│ │ ├── SmartCSS.html
│ │ ├── StyleClass.html
│ │ ├── index.html
│ │ └── utils.html
│ └── styles-8184dad50dadb76aad743829a7c19ed0.css
├── repo-header.jpg
└── repo-header.psd
├── jsduck.json
├── package.json
├── src
├── core
│ ├── SmartCSS.js
│ └── StyleClass.js
├── index.js
└── utils.js
└── test
└── unit
└── SmartCSS.js
/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | .npmrc
3 | npm-debug.log
4 |
--------------------------------------------------------------------------------
/.travis.yml:
--------------------------------------------------------------------------------
1 | language: node_js
2 | node_js:
3 | - "0.12"
4 | - "0.11"
5 | before_install:
6 | - npm install istanbul -g
7 | script:
8 | - istanbul cover ./node_modules/mocha/bin/_mocha test/unit --report lcovonly -- -R spec && cat ./coverage/lcov.info | ./node_modules/coveralls/bin/coveralls.js && rm -rf ./coverage
9 |
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | BSD License
2 |
3 | For smart-css software
4 |
5 | Copyright (c) 2014-2015, Hackhat
6 | All rights reserved.
7 |
8 | Redistribution and use in source and binary forms, with or without modification,
9 | are permitted provided that the following conditions are met:
10 |
11 | * Redistributions of source code must retain the above copyright notice, this
12 | list of conditions and the following disclaimer.
13 |
14 | * Redistributions in binary form must reproduce the above copyright notice,
15 | this list of conditions and the following disclaimer in the documentation
16 | and/or other materials provided with the distribution.
17 |
18 | * Neither the name Hackhat nor the names of its contributors may be used to
19 | endorse or promote products derived from this software without specific
20 | prior written permission.
21 |
22 | THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND
23 | ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED
24 | WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
25 | DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE FOR
26 | ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES
27 | (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;
28 | LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON
29 | ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
30 | (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS
31 | SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
--------------------------------------------------------------------------------
/coverage/lcov-report/base.css:
--------------------------------------------------------------------------------
1 | body, html {
2 | margin:0; padding: 0;
3 | }
4 | body {
5 | font-family: Helvetica Neue, Helvetica,Arial;
6 | font-size: 10pt;
7 | }
8 | div.header, div.footer {
9 | background: #eee;
10 | padding: 1em;
11 | }
12 | div.header {
13 | z-index: 100;
14 | position: fixed;
15 | top: 0;
16 | border-bottom: 1px solid #666;
17 | width: 100%;
18 | }
19 | div.footer {
20 | border-top: 1px solid #666;
21 | }
22 | div.body {
23 | margin-top: 10em;
24 | }
25 | div.meta {
26 | font-size: 90%;
27 | text-align: center;
28 | }
29 | h1, h2, h3 {
30 | font-weight: normal;
31 | }
32 | h1 {
33 | font-size: 12pt;
34 | }
35 | h2 {
36 | font-size: 10pt;
37 | }
38 | pre {
39 | font-family: Consolas, Menlo, Monaco, monospace;
40 | margin: 0;
41 | padding: 0;
42 | line-height: 14px;
43 | font-size: 14px;
44 | -moz-tab-size: 2;
45 | -o-tab-size: 2;
46 | tab-size: 2;
47 | }
48 |
49 | div.path { font-size: 110%; }
50 | div.path a:link, div.path a:visited { color: #000; }
51 | table.coverage { border-collapse: collapse; margin:0; padding: 0 }
52 |
53 | table.coverage td {
54 | margin: 0;
55 | padding: 0;
56 | color: #111;
57 | vertical-align: top;
58 | }
59 | table.coverage td.line-count {
60 | width: 50px;
61 | text-align: right;
62 | padding-right: 5px;
63 | }
64 | table.coverage td.line-coverage {
65 | color: #777 !important;
66 | text-align: right;
67 | border-left: 1px solid #666;
68 | border-right: 1px solid #666;
69 | }
70 |
71 | table.coverage td.text {
72 | }
73 |
74 | table.coverage td span.cline-any {
75 | display: inline-block;
76 | padding: 0 5px;
77 | width: 40px;
78 | }
79 | table.coverage td span.cline-neutral {
80 | background: #eee;
81 | }
82 | table.coverage td span.cline-yes {
83 | background: #b5d592;
84 | color: #999;
85 | }
86 | table.coverage td span.cline-no {
87 | background: #fc8c84;
88 | }
89 |
90 | .cstat-yes { color: #111; }
91 | .cstat-no { background: #fc8c84; color: #111; }
92 | .fstat-no { background: #ffc520; color: #111 !important; }
93 | .cbranch-no { background: yellow !important; color: #111; }
94 |
95 | .cstat-skip { background: #ddd; color: #111; }
96 | .fstat-skip { background: #ddd; color: #111 !important; }
97 | .cbranch-skip { background: #ddd !important; color: #111; }
98 |
99 | .missing-if-branch {
100 | display: inline-block;
101 | margin-right: 10px;
102 | position: relative;
103 | padding: 0 4px;
104 | background: black;
105 | color: yellow;
106 | }
107 |
108 | .skip-if-branch {
109 | display: none;
110 | margin-right: 10px;
111 | position: relative;
112 | padding: 0 4px;
113 | background: #ccc;
114 | color: white;
115 | }
116 |
117 | .missing-if-branch .typ, .skip-if-branch .typ {
118 | color: inherit !important;
119 | }
120 |
121 | .entity, .metric { font-weight: bold; }
122 | .metric { display: inline-block; border: 1px solid #333; padding: 0.3em; background: white; }
123 | .metric small { font-size: 80%; font-weight: normal; color: #666; }
124 |
125 | div.coverage-summary table { border-collapse: collapse; margin: 3em; font-size: 110%; }
126 | div.coverage-summary td, div.coverage-summary table th { margin: 0; padding: 0.25em 1em; border-top: 1px solid #666; border-bottom: 1px solid #666; }
127 | div.coverage-summary th { text-align: left; border: 1px solid #666; background: #eee; font-weight: normal; }
128 | div.coverage-summary th.file { border-right: none !important; }
129 | div.coverage-summary th.pic { border-left: none !important; text-align: right; }
130 | div.coverage-summary th.pct { border-right: none !important; }
131 | div.coverage-summary th.abs { border-left: none !important; text-align: right; }
132 | div.coverage-summary td.pct { text-align: right; border-left: 1px solid #666; }
133 | div.coverage-summary td.abs { text-align: right; font-size: 90%; color: #444; border-right: 1px solid #666; }
134 | div.coverage-summary td.file { text-align: right; border-left: 1px solid #666; white-space: nowrap; }
135 | div.coverage-summary td.pic { min-width: 120px !important; }
136 | div.coverage-summary a:link { text-decoration: none; color: #000; }
137 | div.coverage-summary a:visited { text-decoration: none; color: #333; }
138 | div.coverage-summary a:hover { text-decoration: underline; }
139 | div.coverage-summary tfoot td { border-top: 1px solid #666; }
140 |
141 | div.coverage-summary .sorter {
142 | height: 10px;
143 | width: 7px;
144 | display: inline-block;
145 | margin-left: 0.5em;
146 | background: url(sort-arrow-sprite.png) no-repeat scroll 0 0 transparent;
147 | }
148 | div.coverage-summary .sorted .sorter {
149 | background-position: 0 -20px;
150 | }
151 | div.coverage-summary .sorted-desc .sorter {
152 | background-position: 0 -10px;
153 | }
154 |
155 | .high { background: #b5d592 !important; }
156 | .medium { background: #ffe87c !important; }
157 | .low { background: #fc8c84 !important; }
158 |
159 | span.cover-fill, span.cover-empty {
160 | display:inline-block;
161 | border:1px solid #444;
162 | background: white;
163 | height: 12px;
164 | }
165 | span.cover-fill {
166 | background: #ccc;
167 | border-right: 1px solid #444;
168 | }
169 | span.cover-empty {
170 | background: white;
171 | border-left: none;
172 | }
173 | span.cover-full {
174 | border-right: none !important;
175 | }
176 | pre.prettyprint {
177 | border: none !important;
178 | padding: 0 !important;
179 | margin: 0 !important;
180 | }
181 | .com { color: #999 !important; }
182 | .ignore-none { color: #999; font-weight: normal; }
--------------------------------------------------------------------------------
/coverage/lcov-report/core/StyleClass.js.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Code coverage report for core\StyleClass.js
5 |
27 |
28 | 1
29 | 2
30 | 3
31 | 4
32 | 5
33 | 6
34 | 7
35 | 8
36 | 9
37 | 10
38 | 11
39 | 12
40 | 13
41 | 14
42 | 15
43 | 16
44 | 17
45 | 18
46 | 19
47 | 20
48 | 21
49 | 22
50 | 23
51 | 24
52 | 25
53 | 26
54 | 27
55 | 28
56 | 29
57 | 30
58 | 31
59 | 32
60 | 33
61 | 34
62 | 35
63 | 36
64 | 37
65 | 38
66 | 39
67 | 40
68 | 41
69 | 42
70 | 43
71 | 44
72 | 45
73 | 46
74 | 47
75 | 48
76 | 49
77 | 50
78 | 51
79 | 52
80 | 53
81 | 54
82 | 55
83 | 56
84 | 57
85 | 58
86 | 59
87 | 60
88 | 61
89 | 62 1
90 |
91 |
92 |
93 |
94 |
95 |
96 |
97 | 1
98 | 30
99 |
100 |
101 |
102 |
103 |
104 | 30
105 | 30
106 | 30
107 | 30
108 |
109 |
110 |
111 |
112 |
113 |
114 | 1
115 |
116 |
117 |
118 |
119 |
120 |
121 |
122 |
123 |
124 |
125 |
126 | 23
127 |
128 |
129 |
130 |
131 |
132 | 23
133 |
134 |
135 |
136 |
137 |
138 | 23
139 |
140 |
141 |
142 |
143 |
144 |
145 |
146 |
147 |
148 |
149 | 1
150 | var _ = require('lodash');
151 |
152 |
153 |
154 |
155 | /**
156 | * @class core.StyleClass
157 | */
158 | var StyleClass = function(options){
159 | options = _.extend({
160 | className : void 0,
161 | styleDef : void 0,
162 | selectorObject : void 0,
163 | media : void 0,
164 | }, options);
165 | this.__className = options.className;
166 | this.__styleDef = options.styleDef;
167 | this.__media = options.media;
168 | this.__selectorObject = options.selectorObject;
169 | }
170 |
171 |
172 |
173 |
174 |
175 | _.extend(StyleClass.prototype, {
176 |
177 |
178 |
179 | // This is the class Id. Should be called like this.
180 | getClassName: function(){
181 | return this.__className;
182 | },
183 |
184 |
185 |
186 | getStyleDef: function(){
187 | return this.__styleDef;
188 | },
189 |
190 |
191 |
192 | getSelectorObject: function(){
193 | return this.__selectorObject;
194 | },
195 |
196 |
197 |
198 | getMedia: function(){
199 | return this.__media;
200 | }
201 |
202 |
203 |
204 | })
205 |
206 |
207 |
208 |
209 |
210 | module.exports = StyleClass;
211 |
213 |
214 |
Code coverage report for core\
5 |
27 |
28 |
29 |
30 |
31 | File
32 | Statements
34 | Branches
36 | Functions
38 | Lines
40 |
42 |
43 |
44 | SmartCSS.js 95.77%
47 | (136 / 142)
48 | 93.75%
49 | (45 / 48)
50 | 96.77%
51 | (30 / 31)
52 | 97.01%
53 | (130 / 134)
54 |
55 |
56 |
57 | StyleClass.js 92.31%
60 | (12 / 13)
61 | 100%
62 | (0 / 0)
63 | 80%
64 | (4 / 5)
65 | 92.31%
66 | (12 / 13)
67 |
68 |
69 |
71 |
72 |
Sencha Examples
7 |
8 |
9 | smart-css API & Docs
5 | smart-css API & Docs
26 |
27 |
28 |
29 |
30 |
31 |
core
32 |
39 |
40 |
41 |
42 |
43 |
44 |
45 |
46 |
Others...
47 |
53 |
54 |
55 |
56 |
57 |
58 |
59 |
Class name that will be set in your html.
\n","html_type":"String"},{"tagname":"params","type":"Object","name":"styleDef","doc":"Style definition.
\n","html_type":"Object"},{"tagname":"params","type":"Object","name":"selectorObject","doc":"Selector as object.
\n","html_type":"Object"},{"tagname":"params","type":"String","name":"selectorString","doc":"Selector as string.
\n","html_type":"String"},{"tagname":"params","type":"String","name":"media","doc":"Media string for this style.
\n","html_type":"String"}],"html_type":"Object"}],"members":[{"name":"getClassName","tagname":"method","owner":"core.StyleClass","id":"method-getClassName","meta":{}},{"name":"getMedia","tagname":"method","owner":"core.StyleClass","id":"method-getMedia","meta":{}},{"name":"getSelectorObject","tagname":"method","owner":"core.StyleClass","id":"method-getSelectorObject","meta":{}},{"name":"getStyleDef","tagname":"method","owner":"core.StyleClass","id":"method-getStyleDef","meta":{}},{"name":"getUID","tagname":"method","owner":"core.StyleClass","id":"method-getUID","meta":{}}],"alternateClassNames":[],"aliases":{},"id":"class-core.StyleClass","short_doc":"Contains all the data necessary to create a style rule, complete with header\nand body. ...","component":false,"superclasses":[],"subclasses":[],"mixedInto":[],"mixins":[],"parentMixins":[],"requires":[],"uses":[],"html":"Files Contains all the data necessary to create a style rule, complete with header\nand body.
\n
Parameters options : Object\n
className : StringClass name that will be set in your html.
\n
styleDef : ObjectselectorObject : ObjectselectorString : Stringmedia : StringMedia string for this style.
\n
Defined By
Methods ...
\n
Returns String Class name of this style class.
\n
...
\n
Returns Object A copy of #.__selectorObject.
\n
...
\n
Returns Object A copy of #.__styleDef.
\n
Creates a unique id for this style class. ...
Creates a unique id for this style class.
\n
Returns The source code
6 | var _ = require('lodash');
19 |
20 |
21 |
22 |
23 |
24 | /**
25 | * @class core.StyleClass
26 | * Contains all the data necessary to create a style rule, complete with header
27 | * and body.
28 | * @param {Object} options
29 | * @param {String} options.className Class name that will be set in your html.
30 | * @param {Object} options.styleDef Style definition.
31 | * @param {Object} options.selectorObject Selector as object.
32 | * @param {String} options.selectorString Selector as string.
33 | * @param {String} options.media Media string for this style.
34 | */
35 | var StyleClass = function(options){
36 | options = _.extend({
37 | className : void 0,
38 | styleDef : void 0,
39 | selectorObject : void 0,
40 | selectorString : void 0,
41 | media : void 0,
42 | }, options);
43 | this.__className = options.className;
44 | this.__styleDef = options.styleDef;
45 | this.__media = options.media;
46 | this.__selectorObject = options.selectorObject;
47 | this.__selectorString = options.selectorString;
48 | }
49 |
50 |
51 |
52 |
53 |
54 | StyleClass.createUID = function(selector, media){
55 | return selector + '|' + media
56 | }
57 |
58 |
59 |
60 |
61 |
62 | _.extend(StyleClass.prototype, {
63 |
64 |
65 |
66 | /**
67 | * Creates a unique id for this style class.
68 | * @return {String} Return its unique id.
69 | */
70 | getUID: function(){
71 | return StyleClass.createUID(this.__selectorString, this.__media);
72 | },
73 |
74 |
75 |
76 | /**
77 | * @return {String} Class name of this style class.
78 | */
79 | getClassName: function(){
80 | return this.__className;
81 | },
82 |
83 |
84 |
85 | /**
86 | * @return {Object} A copy of #.__styleDef.
87 | */
88 | getStyleDef: function(){
89 | return _.clone(this.__styleDef);
90 | },
91 |
92 |
93 |
94 | /**
95 | * @return {Object} A copy of #.__selectorObject.
96 | */
97 | getSelectorObject: function(){
98 | return _.clone(this.__selectorObject);
99 | },
100 |
101 |
102 |
103 | /**
104 | * @return {String} Media CSS.
105 | */
106 | getMedia: function(){
107 | return this.__media;
108 | }
109 |
110 |
111 |
112 | })
113 |
114 |
115 |
116 |
117 |
118 | module.exports = StyleClass;
119 |
120 |
121 |
122 |
--------------------------------------------------------------------------------
/docs/jsduck/source/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | The source code
6 | module.exports = require('./core/SmartCSS');
19 |
20 |
21 |
22 |
--------------------------------------------------------------------------------
/docs/jsduck/source/utils.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | The source code
6 | var _ = require('lodash');
19 | var tinycolor = require('tinycolor2');
20 |
21 |
22 |
23 |
24 |
25 | /**
26 | * @class utils
27 | * An utility object.
28 | */
29 | var utils = {};
30 |
31 |
32 |
33 | /**
34 | * @method isValidClassName
35 | * Checks whenever is a valid class name.
36 | * @param {String} className
37 | * @return {Boolean} Returns true if is a valid class, false other ways.
38 | */
39 | utils.isValidClassName = function(className){
40 | if(!className) return false;
41 | // Is valid if the first letter is not a number.
42 | // @todo: a stronger check.
43 | return !utils.__isNumber(className[0]);
44 | }
45 |
46 |
47 |
48 | /**
49 | * @method renderStyleClass
50 | * Renders a core.StyleClass to string.
51 | * @param {core.StyleClass} styleClass
52 | * @param {Object} classNamesAsMap
53 | * @return {String} The rendered core.StyleClass as string.
54 | */
55 | utils.renderStyleClass = function(styleClass, classNamesAsMap){
56 | var styleDef = styleClass.getStyleDef();
57 | var styleBody = '';
58 | for(var key in styleDef){
59 | styleBody += utils.__ruleToString(key, styleDef[key]);
60 | }
61 | var styleHeader = utils.__renderSelectorObject(styleClass.getSelectorObject(), classNamesAsMap);
62 | var styleFull = styleHeader + '{' + styleBody + '}';
63 | var media = styleClass.getMedia();
64 | if(media){
65 | styleFull = '@media (' + media + '){' + styleFull + '}'
66 | }
67 | return styleFull;
68 | }
69 |
70 |
71 |
72 | /**
73 | * @method __isNumber
74 | * Checks whenever is a number. If is a string like `'1'` is considered a number.
75 | * @private
76 | * @param {*} n
77 | * @return {Boolean} Returns true if is a number, false other ways.
78 | */
79 | utils.__isNumber = function(n){
80 | return !isNaN(parseFloat(n)) && isFinite(n);
81 | }
82 |
83 |
84 |
85 | /**
86 | * @method __renderSelectorObject
87 | * Renders a css header definition from the selectorObject
88 | * and a classMap. The classMap is needed to replace the class
89 | * names from the selectorObject.
90 | * @private
91 | * @return {String}
92 | */
93 | utils.__renderSelectorObject = function(selectorObject, classMap){
94 | var str = [];
95 | var getClassName = function(classId){
96 | return classMap[classId];
97 | }
98 | _.forEach(selectorObject, function(segment, i){
99 | if(i !== 0) str.push(segment.combinator);
100 | str.push('.' + getClassName(segment.classList[0]));
101 | _.forEach(segment.pseudos, function(pseudo){
102 | if(pseudo.type === 'class') str.push(':')
103 | if(pseudo.type === 'element') str.push('::')
104 | str.push(pseudo.name);
105 | if(pseudo.value){
106 | str.push('(' + pseudo.value + ')');
107 | }
108 | })
109 | })
110 | return str.join('');
111 | }
112 |
113 |
114 |
115 | /**
116 | * @method __ruleToString
117 | * Converts a rule name and rule value to a single CSS string.
118 | * @private
119 | * @param {String} propName
120 | * @param {String} value
121 | * @return {String} A single CSS string.
122 | */
123 | utils.__ruleToString = function(propName, value){
124 | var cssPropName = utils.__hyphenateProp(propName);
125 | // For example if you have a border like this:
126 | // border: ['1px solid', tinycolor('red')]
127 | // Will join them before converting the tinycolor to a css color.
128 | if(_.isArray(value)){
129 | value = value.map(utils.__parseValueAtom).join(' ');
130 | }else{
131 | value = utils.__parseValueAtom(value);
132 | }
133 | return cssPropName + ':' + utils.__escapeValueForProp(value, cssPropName) + ';';
134 | }
135 |
136 |
137 |
138 | /**
139 | * @method __parseValueAtom
140 | * Parses a single value to be compatible with CSS.
141 | * @private
142 | * @param {*} value
143 | * @return {String} Parsed value as string.
144 | */
145 | utils.__parseValueAtom = function(value){
146 | if(value instanceof tinycolor) return value.toHslString();
147 | return value;
148 | }
149 |
150 |
151 |
152 | /**
153 | * @property __uppercasePattern
154 | * Cached regexp pattern.
155 | * @private
156 | * @type {RegExp}
157 | */
158 | utils.__uppercasePattern = /([A-Z])/g;
159 |
160 |
161 |
162 | /**
163 | * @property __msPattern
164 | * Cached regexp pattern.
165 | * @private
166 | * @type {RegExp}
167 | */
168 | utils.__msPattern = /^ms-/;
169 |
170 |
171 |
172 | /**
173 | * @method __hyphenateProp
174 | * Hypernates a CSS property.
175 | * @private
176 | * @param {String} string
177 | * @return {String} Hypernated property.
178 | */
179 | utils.__hyphenateProp = function(string){
180 | // MozTransition -> -moz-transition
181 | // msTransition -> -ms-transition. Notice the lower case m
182 | // http://modernizr.com/docs/#prefixed
183 | // thanks a lot IE
184 | return string.replace(utils.__uppercasePattern, '-$1')
185 | .toLowerCase()
186 | .replace(utils.__msPattern, '-ms-');
187 | }
188 |
189 |
190 |
191 | /**
192 | * @method __escapeValueForProp
193 | * Noop
194 | * @private
195 | * @param {String} value
196 | * @param {String} prop
197 | * @return {String}
198 | */
199 | utils.__escapeValueForProp = function(value, prop){
200 | return value;
201 | // Still don't know why I should escape values?!
202 | // return escapeHTML(value);
203 | }
204 |
205 |
206 |
207 |
208 |
209 | module.exports = utils;
210 |
211 |
212 |
213 |
--------------------------------------------------------------------------------
/docs/jsduck/styles-8184dad50dadb76aad743829a7c19ed0.css:
--------------------------------------------------------------------------------
1 | .signature .chainable { background-color: #00aa00 }
2 | .signature .deprecated {
3 | background-color: #aa0000;
4 | }
5 | .deprecated-box {
6 | border: 2px solid #aa0000;
7 | }
8 | .deprecated-box strong {
9 | color: white;
10 | background-color: #aa0000;
11 | }
12 | .deprecated-tag-box {
13 | text-align: center;
14 | color: #600;
15 | background-color: #fee;
16 | }
17 | .deprecated-tag-box strong {
18 | text-transform: uppercase;
19 | border-radius: 2px;
20 | padding: 0 3px;
21 | }
22 |
23 | .enum-box {
24 | color: #060;
25 | background-color: #efe;
26 | text-align: center;
27 | }
28 |
29 | .signature .experimental {
30 | color: #a00;
31 | border: 1px dashed #a00;
32 | background-color: #fee;
33 | }
34 | .experimental-box {
35 | border: 2px dashed #ccc;
36 | }
37 | .experimental-box strong {
38 | margin: 0 3px;
39 | border: 2px dashed #a00;
40 | color: #a00;
41 | }
42 | .deprecated-tag-box {
43 | text-align: center;
44 | color: #600;
45 | background-color: #fee;
46 | }
47 | .deprecated-tag-box strong {
48 | text-transform: uppercase;
49 | border-radius: 2px;
50 | padding: 0 3px;
51 | }
52 |
53 | .signature .new {
54 | color: #484848;
55 | background-color: #F5D833;
56 | }
57 |
58 | .preventable-box { text-align: center }
59 | .signature .private {
60 | background-color: #FD6B1B; /* orange */
61 | }
62 | .private-box {
63 | background-color: #fee;
64 | text-align: center;
65 | color: #600;
66 | margin-bottom: 1em;
67 | }
68 |
69 | .signature .protected { background-color: #9B86FC }
70 | .signature .removed {
71 | color: #aa0000;
72 | background-color: transparent;
73 | border: 1px solid #aa0000;
74 | text-decoration: line-through;
75 | }
76 | .removed-box {
77 | border: 2px solid #aa0000;
78 | }
79 | .removed-box strong {
80 | color: #aa0000;
81 | border: 2px solid #aa0000;
82 | background-color: transparent;
83 | text-decoration: line-through;
84 | }
85 | .deprecated-tag-box {
86 | text-align: center;
87 | color: #600;
88 | background-color: #fee;
89 | }
90 | .deprecated-tag-box strong {
91 | text-transform: uppercase;
92 | border-radius: 2px;
93 | padding: 0 3px;
94 | }
95 |
96 | .signature .required { background-color: #484848 }
97 | .signature .static { background-color: #484848 }
98 | .template-box {
99 | text-align: center;
100 | background-color: #eee;
101 | }
102 | #search-dropdown .icon-cfg { background-image: url(member-icons/cfg.png); background-repeat: no-repeat; }
103 | .members .members-section .icon-cfg { background-image: url(member-icons/cfg.png); background-repeat: no-repeat; }
104 | .members .comments-section .icon-cfg { background-image: url(member-icons/cfg.png); background-repeat: no-repeat; }
105 | .class-overview .x-toolbar.member-links .icon-cfg { background-image: url(member-icons/cfg.png); background-repeat: no-repeat; }
106 | #search-dropdown .icon-property { background-image: url(member-icons/property.png); background-repeat: no-repeat; }
107 | .members .members-section .icon-property { background-image: url(member-icons/property.png); background-repeat: no-repeat; }
108 | .members .comments-section .icon-property { background-image: url(member-icons/property.png); background-repeat: no-repeat; }
109 | .class-overview .x-toolbar.member-links .icon-property { background-image: url(member-icons/property.png); background-repeat: no-repeat; }
110 | #search-dropdown .icon-method { background-image: url(member-icons/method.png); background-repeat: no-repeat; }
111 | .members .members-section .icon-method { background-image: url(member-icons/method.png); background-repeat: no-repeat; }
112 | .members .comments-section .icon-method { background-image: url(member-icons/method.png); background-repeat: no-repeat; }
113 | .class-overview .x-toolbar.member-links .icon-method { background-image: url(member-icons/method.png); background-repeat: no-repeat; }
114 | #search-dropdown .icon-event { background-image: url(member-icons/event.png); background-repeat: no-repeat; }
115 | .members .members-section .icon-event { background-image: url(member-icons/event.png); background-repeat: no-repeat; }
116 | .members .comments-section .icon-event { background-image: url(member-icons/event.png); background-repeat: no-repeat; }
117 | .class-overview .x-toolbar.member-links .icon-event { background-image: url(member-icons/event.png); background-repeat: no-repeat; }
118 | #search-dropdown .icon-css_var { background-image: url(member-icons/css_var.png); background-repeat: no-repeat; }
119 | .members .members-section .icon-css_var { background-image: url(member-icons/css_var.png); background-repeat: no-repeat; }
120 | .members .comments-section .icon-css_var { background-image: url(member-icons/css_var.png); background-repeat: no-repeat; }
121 | .class-overview .x-toolbar.member-links .icon-css_var { background-image: url(member-icons/css_var.png); background-repeat: no-repeat; }
122 | #search-dropdown .icon-css_mixin { background-image: url(member-icons/css_mixin.png); background-repeat: no-repeat; }
123 | .members .members-section .icon-css_mixin { background-image: url(member-icons/css_mixin.png); background-repeat: no-repeat; }
124 | .members .comments-section .icon-css_mixin { background-image: url(member-icons/css_mixin.png); background-repeat: no-repeat; }
125 | .class-overview .x-toolbar.member-links .icon-css_mixin { background-image: url(member-icons/css_mixin.png); background-repeat: no-repeat; }
--------------------------------------------------------------------------------
/docs/repo-header.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/hackhat/smart-css/972facdb99e34f2d4d4f0defd198e724157f51f2/docs/repo-header.jpg
--------------------------------------------------------------------------------
/docs/repo-header.psd:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/hackhat/smart-css/972facdb99e34f2d4d4f0defd198e724157f51f2/docs/repo-header.psd
--------------------------------------------------------------------------------
/jsduck.json:
--------------------------------------------------------------------------------
1 | {
2 | "--": ["./src"],
3 | "--title": "smart-css API & Docs",
4 | "--output": "./docs/jsduck"
5 | // "--seo": true
6 | // "--guides": "./docs/guides/guides.json"
7 | }
8 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "smart-css",
3 | "version": "1.1.1",
4 | "description": "Write CSS in JavaScript with namespaces, proper names, no conflicts and expected results for react.js. ",
5 | "main": "src/index.js",
6 | "scripts": {
7 | "test": "istanbul cover --root ./src --hook-run-in-context node_modules/mocha/bin/_mocha -- -R spec",
8 | "npm prefix": "npm --userconfig=.npmrc"
9 | },
10 | "keywords": [
11 | "css",
12 | "reactjs",
13 | "javascript"
14 | ],
15 | "author": "hackhat",
16 | "license": "BSD-3-Clause",
17 | "dependencies": {
18 | "lodash": "^3.3.1",
19 | "slick": "^1.12.1",
20 | "tinycolor2": "^1.1.2"
21 | },
22 | "repository": {
23 | "type": "git",
24 | "url": "https://github.com/hackhat/smart-css.git"
25 | },
26 | "devDependencies": {
27 | "coveralls": "^2.11.2",
28 | "mocha-lcov-reporter": "0.0.2",
29 | "chai": "^2.2.0",
30 | "mocha": "^2.2.4"
31 | }
32 | }
33 |
--------------------------------------------------------------------------------
/src/core/StyleClass.js:
--------------------------------------------------------------------------------
1 | var _ = require('lodash');
2 |
3 |
4 |
5 |
6 |
7 | /**
8 | * @class core.StyleClass
9 | * Contains all the data necessary to create a style rule, complete with header
10 | * and body.
11 | * @param {Object} options
12 | * @param {String} options.className Class name that will be set in your html.
13 | * @param {Object} options.styleDef Style definition.
14 | * @param {Object} options.selectorObject Selector as object.
15 | * @param {String} options.selectorString Selector as string.
16 | * @param {String} options.media Media string for this style.
17 | */
18 | var StyleClass = function(options){
19 | options = _.extend({
20 | className : void 0,
21 | styleDef : void 0,
22 | selectorObject : void 0,
23 | selectorString : void 0,
24 | media : void 0,
25 | }, options);
26 | this.__className = options.className;
27 | this.__styleDef = options.styleDef;
28 | this.__media = options.media;
29 | this.__selectorObject = options.selectorObject;
30 | this.__selectorString = options.selectorString;
31 | }
32 |
33 |
34 |
35 |
36 |
37 | StyleClass.createUID = function(selector, media){
38 | return selector + '|' + media
39 | }
40 |
41 |
42 |
43 |
44 |
45 | _.extend(StyleClass.prototype, {
46 |
47 |
48 |
49 | /**
50 | * Creates a unique id for this style class.
51 | * @return {String} Return its unique id.
52 | */
53 | getUID: function(){
54 | return StyleClass.createUID(this.__selectorString, this.__media);
55 | },
56 |
57 |
58 |
59 | /**
60 | * @return {String} Class name of this style class.
61 | */
62 | getClassName: function(){
63 | return this.__className;
64 | },
65 |
66 |
67 |
68 | /**
69 | * @return {Object} A copy of #.__styleDef.
70 | */
71 | getStyleDef: function(){
72 | return _.clone(this.__styleDef);
73 | },
74 |
75 |
76 |
77 | /**
78 | * @return {Object} A copy of #.__selectorObject.
79 | */
80 | getSelectorObject: function(){
81 | return _.clone(this.__selectorObject);
82 | },
83 |
84 |
85 |
86 | /**
87 | * @return {String} Media CSS.
88 | */
89 | getMedia: function(){
90 | return this.__media;
91 | }
92 |
93 |
94 |
95 | })
96 |
97 |
98 |
99 |
100 |
101 | module.exports = StyleClass;
102 |
--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
1 | module.exports = require('./core/SmartCSS');
2 |
--------------------------------------------------------------------------------
/src/utils.js:
--------------------------------------------------------------------------------
1 | var _ = require('lodash');
2 | var tinycolor = require('tinycolor2');
3 |
4 |
5 |
6 |
7 |
8 | /**
9 | * @class utils
10 | * An utility object.
11 | */
12 | var utils = {};
13 |
14 |
15 |
16 | /**
17 | * @method isValidClassName
18 | * Checks whenever is a valid class name.
19 | * @param {String} className
20 | * @return {Boolean} Returns true if is a valid class, false other ways.
21 | */
22 | utils.isValidClassName = function(className){
23 | if(!className) return false;
24 | // Is valid if the first letter is not a number.
25 | // @todo: a stronger check.
26 | return !utils.__isNumber(className[0]);
27 | }
28 |
29 |
30 |
31 | /**
32 | * @method renderStyleClass
33 | * Renders a core.StyleClass to string.
34 | * @param {core.StyleClass} styleClass
35 | * @param {Object} classNamesAsMap
36 | * @return {String} The rendered core.StyleClass as string.
37 | */
38 | utils.renderStyleClass = function(styleClass, classNamesAsMap){
39 | var styleDef = styleClass.getStyleDef();
40 | var styleBody = '';
41 | for(var key in styleDef){
42 | styleBody += utils.__ruleToString(key, styleDef[key]);
43 | }
44 | var styleHeader = utils.__renderSelectorObject(styleClass.getSelectorObject(), classNamesAsMap);
45 | var styleFull = styleHeader + '{' + styleBody + '}';
46 | var media = styleClass.getMedia();
47 | if(media){
48 | styleFull = '@media ' + media + '{' + styleFull + '}'
49 | }
50 | return styleFull;
51 | }
52 |
53 |
54 |
55 | /**
56 | * @method __isNumber
57 | * Checks whenever is a number. If is a string like `'1'` is considered a number.
58 | * @private
59 | * @param {*} n
60 | * @return {Boolean} Returns true if is a number, false other ways.
61 | */
62 | utils.__isNumber = function(n){
63 | return !isNaN(parseFloat(n)) && isFinite(n);
64 | }
65 |
66 |
67 |
68 | /**
69 | * @method __renderSelectorObject
70 | * Renders a css header definition from the selectorObject
71 | * and a classMap. The classMap is needed to replace the class
72 | * names from the selectorObject.
73 | * @private
74 | * @return {String}
75 | */
76 | utils.__renderSelectorObject = function(selectorObject, classMap){
77 | var str = [];
78 | var getClassName = function(classId){
79 | return classMap[classId];
80 | }
81 | _.forEach(selectorObject, function(segment, i){
82 | if(i !== 0) str.push(segment.combinator);
83 | str.push('.' + getClassName(segment.classList[0]));
84 | _.forEach(segment.pseudos, function(pseudo){
85 | if(pseudo.type === 'class') str.push(':')
86 | if(pseudo.type === 'element') str.push('::')
87 | str.push(pseudo.name);
88 | if(pseudo.value){
89 | str.push('(' + pseudo.value + ')');
90 | }
91 | })
92 | })
93 | return str.join('');
94 | }
95 |
96 |
97 |
98 | /**
99 | * @method __ruleToString
100 | * Converts a rule name and rule value to a single CSS string.
101 | * @private
102 | * @param {String} propName
103 | * @param {String} value
104 | * @return {String} A single CSS string.
105 | */
106 | utils.__ruleToString = function(propName, value){
107 | var cssPropName = utils.__hyphenateProp(propName);
108 | // For example if you have a border like this:
109 | // border: ['1px solid', tinycolor('red')]
110 | // Will join them before converting the tinycolor to a css color.
111 | if(_.isArray(value)){
112 | value = value.map(utils.__parseValueAtom).join(' ');
113 | }else{
114 | value = utils.__parseValueAtom(value);
115 | }
116 | return cssPropName + ':' + utils.__escapeValueForProp(value, cssPropName) + ';';
117 | }
118 |
119 |
120 |
121 | /**
122 | * @method __parseValueAtom
123 | * Parses a single value to be compatible with CSS.
124 | * @private
125 | * @param {*} value
126 | * @return {String} Parsed value as string.
127 | */
128 | utils.__parseValueAtom = function(value){
129 | if(value instanceof tinycolor) return value.toHslString();
130 | return value;
131 | }
132 |
133 |
134 |
135 | /**
136 | * @property __uppercasePattern
137 | * Cached regexp pattern.
138 | * @private
139 | * @type {RegExp}
140 | */
141 | utils.__uppercasePattern = /([A-Z])/g;
142 |
143 |
144 |
145 | /**
146 | * @property __msPattern
147 | * Cached regexp pattern.
148 | * @private
149 | * @type {RegExp}
150 | */
151 | utils.__msPattern = /^ms-/;
152 |
153 |
154 |
155 | /**
156 | * @method __hyphenateProp
157 | * Hypernates a CSS property.
158 | * @private
159 | * @param {String} string
160 | * @return {String} Hypernated property.
161 | */
162 | utils.__hyphenateProp = function(string){
163 | // MozTransition -> -moz-transition
164 | // msTransition -> -ms-transition. Notice the lower case m
165 | // http://modernizr.com/docs/#prefixed
166 | // thanks a lot IE
167 | return string.replace(utils.__uppercasePattern, '-$1')
168 | .toLowerCase()
169 | .replace(utils.__msPattern, '-ms-');
170 | }
171 |
172 |
173 |
174 | /**
175 | * @method __escapeValueForProp
176 | * Noop
177 | * @private
178 | * @param {String} value
179 | * @param {String} prop
180 | * @return {String}
181 | */
182 | utils.__escapeValueForProp = function(value, prop){
183 | return value;
184 | // Still don't know why I should escape values?!
185 | // return escapeHTML(value);
186 | }
187 |
188 |
189 |
190 |
191 |
192 | module.exports = utils;
193 |
--------------------------------------------------------------------------------