├── .gitignore ├── CODE_OF_CONDUCT.md ├── LICENSE.txt ├── README.extendo.md ├── README.md ├── bin ├── bundle_site.src └── git-hook_pre-commit ├── dist ├── pcss-ws-context.js ├── pcss.cfg.js └── pcss.js ├── examples ├── held_notes.txt ├── js │ ├── pcss._ex001_.js │ ├── pcss._ex002_.js │ ├── pcss._ex003_.js │ ├── pcss._ex004_.js │ ├── pcss._ex005_.js │ └── pcss._home_.js ├── pcss._ex001_.html ├── pcss._ex002_.html ├── pcss._ex003_.html ├── pcss._ex004_.html └── pcss._ex005_.html ├── img ├── PowerCss.xcf ├── favicon.png ├── pcss-25p-basket.png ├── pcss-25p-dk.png ├── pcss-25p-lt.png ├── pcss-25p-mineral.png ├── pcss-25p-np.png ├── pcss.png └── pcss_25percent-solid.png ├── index.html ├── package-lock.json ├── package.json └── test ├── resolve.js └── t.js /.gitignore: -------------------------------------------------------------------------------- 1 | *.swp 2 | .coveralls.yml 3 | .git 4 | .idea 5 | CODE_OF_CONDUCT.html 6 | README*.html 7 | build 8 | coverage 9 | css/vendor 10 | font/vendor 11 | img/vendor 12 | index.html 13 | js/vendor 14 | node_modules 15 | npm-debug.log 16 | 17 | -------------------------------------------------------------------------------- /CODE_OF_CONDUCT.md: -------------------------------------------------------------------------------- 1 | # Contributor Covenant Code of Conduct 2 | 3 | ## Our Pledge 4 | 5 | In the interest of fostering an open and welcoming environment, we as contributors and maintainers pledge to making participation in our project and our community a harassment-free experience for everyone, regardless of age, body size, disability, ethnicity, gender identity and expression, level of experience, nationality, personal appearance, race, religion, or sexual identity and orientation. 6 | 7 | ## Our Standards 8 | 9 | Examples of behavior that contributes to creating a positive environment include: 10 | 11 | * Using welcoming and inclusive language 12 | * Being respectful of differing viewpoints and experiences 13 | * Gracefully accepting constructive criticism 14 | * Focusing on what is best for the community 15 | * Showing empathy towards other community members 16 | 17 | Examples of unacceptable behavior by participants include: 18 | 19 | * The use of sexualized language or imagery and unwelcome sexual attention or advances 20 | * Trolling, insulting/derogatory comments, and personal or political attacks 21 | * Public or private harassment 22 | * Publishing others' private information, such as a physical or electronic address, without explicit permission 23 | * Other conduct which could reasonably be considered inappropriate in a professional setting 24 | 25 | ## Our Responsibilities 26 | 27 | Project maintainers are responsible for clarifying the standards of acceptable behavior and are expected to take appropriate and fair corrective action in response to any instances of unacceptable behavior. 28 | 29 | Project maintainers have the right and responsibility to remove, edit, or reject comments, commits, code, wiki edits, issues, and other contributions that are not aligned to this Code of Conduct, or to ban temporarily or permanently any contributor for other behaviors that they deem inappropriate, threatening, offensive, or harmful. 30 | 31 | ## Scope 32 | 33 | This Code of Conduct applies both within project spaces and in public spaces when an individual is representing the project or its community. Examples of representing a project or community include using an official project e-mail address, posting via an official social media account, or acting as an appointed representative at an online or offline event. Representation of a project may be further defined and clarified by project maintainers. 34 | 35 | ## Enforcement 36 | 37 | Instances of abusive, harassing, or otherwise unacceptable behavior may be reported by contacting the project team at mike.mikowski@gmail.com. The project team will review and investigate all complaints, and will respond in a way that it deems appropriate to the circumstances. The project team is obligated to maintain confidentiality with regard to the reporter of an incident. Further details of specific enforcement policies may be posted separately. 38 | 39 | Project maintainers who do not follow or enforce the Code of Conduct in good faith may face temporary or permanent repercussions as determined by other members of the project's leadership. 40 | 41 | ## Attribution 42 | 43 | This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4, available at [http://contributor-covenant.org/version/1/4][version] 44 | 45 | [homepage]: http://contributor-covenant.org 46 | [version]: http://contributor-covenant.org/version/1/4/ 47 | -------------------------------------------------------------------------------- /LICENSE.txt: -------------------------------------------------------------------------------- 1 | Copyright Michael S. Mikowski and other contributors. 2 | See http://powercss.org 3 | 4 | This software consists of voluntary contributions made by many 5 | individuals. For exact contribution history, see the revision history 6 | available at https://github.com/mmikowski/powercss 7 | 8 | The following license applies to all parts of this software except as 9 | documented below: 10 | 11 | ==== 12 | 13 | Permission is hereby granted, free of charge, to any person obtaining 14 | a copy of this software and associated documentation files (the 15 | "Software"), to deal in the Software without restriction, including 16 | without limitation the rights to use, copy, modify, merge, publish, 17 | distribute, sublicense, and/or sell copies of the Software, and to 18 | permit persons to whom the Software is furnished to do so, subject to 19 | the following conditions: 20 | 21 | The above copyright notice and this permission notice shall be 22 | included in all copies or substantial portions of the Software. 23 | 24 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, 25 | EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF 26 | MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND 27 | NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE 28 | LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION 29 | OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION 30 | WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. 31 | 32 | ==== 33 | 34 | All files located in the node_modules and external directories are 35 | externally maintained libraries used by this software which have their 36 | own licenses; we recommend you read them, as their terms may differ from 37 | the terms above. 38 | 39 | -------------------------------------------------------------------------------- /README.extendo.md: -------------------------------------------------------------------------------- 1 | # Extendo property feature plans 2 | 3 | ## Summary 4 | The `__extendo_map_` property feature is planned which will **extend** 5 | style properties with an arbitrary number of keys and values in a named 6 | map. 7 | 8 | ## Purpose 9 | Extendo maps should be very handy for quickly creating similar selectors. 10 | 11 | ## Example 12 | Consider the following selector definition: 13 | 14 | ```js 15 | _mixin_map_ : { 16 | _fred_map_ : { 17 | _background_ : '_xfff_', 18 | _margin_ : '_0_' 19 | }, 20 | _default_font_ : 'arial,sans' 21 | } 22 | 23 | _style_list_ = [ 24 | { _selector_str_ : '#pcss-_switch_', 25 | _rule_map_ : { 26 | _color_ : '_x888_', 27 | _font_ : '_default_font_', 28 | __extendo_map_ : '_fred_map_' 29 | } 30 | } 31 | ]; 32 | ``` 33 | 34 | The resulting CSS should be: 35 | ```css 36 | #pcss-_switch_{background:#fff;margin:000;color:#888;font:arial,sans} 37 | ``` 38 | 39 | ## Requirements 40 | The `__extendo_map_` key (or more appropriate alternate) should be 41 | **reserved** and will need to be interpreted as such: 42 | 43 | ``` 44 | Search for the specified anywhere in the cascade, and if found add the 45 | properties of that map to the closure. If a map value for the provided key 46 | (_fred_map_ in this example) is not found ignore this directive. 47 | ``` 48 | 49 | ## Status 50 | This is currently WIP and is held in reserve. Prior implementation needs to be 51 | rethought. 52 | 53 | ## Last updated 54 | 2017-07-05 mmikowski 55 | -------------------------------------------------------------------------------- /bin/bundle_site.src: -------------------------------------------------------------------------------- 1 | tar cvzf website.tgz AUTHORS.txt dist examples font img index.html LICENSE.txt README.md 2 | -------------------------------------------------------------------------------- /bin/git-hook_pre-commit: -------------------------------------------------------------------------------- 1 | #!/bin/bash 2 | 3 | # To deploy this script: 4 | # cd ../.git/hooks 5 | # ln -s ../../bin/git-hook_pre-commit pre-commit 6 | # 7 | # See http://www.davidpashley.com/articles/writing-robust-shell-scripts.html 8 | # exit when encountering undeclared variables 9 | set -u; 10 | 11 | # exit when encountering a non-zero exit status 12 | # (disabled here as we do are own checking) 13 | # set -e; 14 | 15 | ## BEGIN Layout variables ================================================== 16 | NODE_EXE="$(command -v node)"; 17 | LINK_PATH="$(readlink -f -- "${0}")"; 18 | BIN_PATH="$(cd "${LINK_PATH%/*}" && echo "${PWD}")"; 19 | GGG_DIR="$(cd "$(git rev-parse --show-toplevel)" && pwd)"; 20 | PKG_FILE="$(find "${GGG_DIR}" -type f -wholename "${GGG_DIR}/package.json")"; 21 | PKG_DIR="$(dirname "${PKG_FILE}")"; 22 | MODS_DIR="$(find "${GGG_DIR}" -type d -wholename "${GGG_DIR}/node_modules")"; 23 | JSLINT_EXE="${MODS_DIR}/.bin/jslint"; 24 | NU_EXE="${MODS_DIR}/.bin/nodeunit"; 25 | NU_DIR="${GGG_DIR}/test"; 26 | MAKEDOC_EXE="${GGG_DIR}/bin/make_doc"; 27 | LIST_FILE="/tmp/git-pre-commit.${$}.list.tmp"; 28 | TMP_FILE="/tmp/git-pre-commit.${$}.tmp"; 29 | CHECK_STR=""; 30 | ## END Layout variables ==================================================== 31 | 32 | ## BEGIN Debug 33 | # echo " 34 | # NODE_EXE : ${NODE_EXE} 35 | # LINK_PATH : ${LINK_PATH} 36 | # BIN_PATH : ${BIN_PATH} 37 | # GGG_DIR : ${GGG_DIR} 38 | # PKG_FILE : ${PKG_FILE} 39 | # PKG_DIR : ${PKG_DIR} 40 | # MODS_DIR : ${MODS_DIR} 41 | # JSLINT_EXE : ${JSLINT_EXE} 42 | # NU_EXE : ${NU_EXE} 43 | # NU_DIR : ${NU_DIR} 44 | # MAKEDOC_EXE : ${MAKEDOC_EXE} 45 | # LIST_FILE : ${LIST_FILE} 46 | # TMP_FILE : ${TMP_FILE} 47 | # CHECK_STR : ${CHECK_STR} 48 | # "; 49 | # exit 0; 50 | ## END Debug 51 | 52 | ## BEGIN Lint JavaScript files ============================================= 53 | if [ ! -x "${JSLINT_EXE}" ]; then 54 | echo "JSLint executable not found." 55 | echo "Please execute the following command: " 56 | echo " cd ${GGG_DIR}; npm install "; 57 | exit 1; 58 | fi 59 | 60 | cd "${GGG_DIR}"; 61 | pwd; 62 | 63 | git status \ 64 | | grep '.js$' \ 65 | | grep -v '/vendor/' \ 66 | | grep -v 'pcss._ex004_.js' \ 67 | | grep '^\s\+\(modified\|new file\)' \ 68 | | cut -d ":" -f 2- > "${LIST_FILE}" 69 | 70 | ## BEGIN Debug 71 | # echo ">>>>${LIST_FILE}<<<<"; 72 | # echo ">>>>LIST_FILE:"; 73 | # cat "${LIST_FILE}"; 74 | # echo "<<<<"; 75 | # exit 1; 76 | ## END Debug 77 | 78 | echo; 79 | echo "Tests of updated or new *.js files ..."; 80 | cat "${LIST_FILE}" | while read FILE_NAME; do 81 | echo "====> ${FILE_NAME}"; 82 | CHECK_STR=$(${JSLINT_EXE} "${FILE_NAME}"); 83 | CHECK_CODE=$?; 84 | if [ "${CHECK_CODE}" -gt 0 ]; then 85 | echo " JSLint check FAILED"; 86 | echo " ${CHECK_STR}"; 87 | fi; 88 | CHECK_STR=$(grep -nP '\t' "${FILE_NAME}"); 89 | if [ ! -z "${CHECK_STR}" ]; then 90 | echo " Tab check FAILED"; 91 | echo " ${CHECK_STR}"; 92 | echo; 93 | fi 94 | CHECK_STR=$(grep -nP '\s+$' ${FILE_NAME}); 95 | if [ ! -z "${CHECK_STR}" ]; then 96 | echo " Trailing space check FAILED"; 97 | echo " ${CHECK_STR}"; 98 | echo; 99 | fi 100 | CHECK_STR=$(grep '^\s*.use strict.;$' ${FILE_NAME}); 101 | if [ -z "${CHECK_STR}" ]; then 102 | echo " Strict use check FAILED"; 103 | echo " Please add 'use strict'; at the top of your module function."; 104 | echo; 105 | fi 106 | echo "<===="; 107 | echo; 108 | done | tee "${TMP_FILE}"; 109 | 110 | echo "Tests complete"; 111 | if grep -qs 'FAIL' "${TMP_FILE}"; then 112 | echo "Checks did not pass."; 113 | echo " Please fix the problem files and commit again."; 114 | rm "${TMP_FILE}"; 115 | exit 1; 116 | fi 117 | 118 | rm "${TMP_FILE}"; 119 | rm "${LIST_FILE}"; 120 | 121 | echo; 122 | ## END Lint JavaScript files =============================================== 123 | 124 | ## BEGIN Process changed documents ======================================== 125 | ## TODO 126 | ## if [ ! -x "${MAKEDOC_EXE}" ]; then 127 | ## echo "bin/make_doc not found. This file should exist."; 128 | ## echo "Please check your installation."; 129 | ## exit 1; 130 | ## fi 131 | ## echo "Updating HTML documents from MarkDown"; 132 | ## "${MAKEDOC_EXE}"; 133 | ## RET_VAL=$?; 134 | ## if [ "${RET_VAL}" -eq "0" ]; then 135 | ## echo "Document file failure"; 136 | ## echo "Please check your installation."; 137 | ## exit "${RET_VAL}"; 138 | ## fi 139 | ## 140 | ## END Process changed documents ========================================== 141 | 142 | ## BEGIN Run regression tests ============================================== 143 | if [ ! -x "${NODE_EXE}" ]; then 144 | echo "Node not found. Please install nodejs and ensure it is "; 145 | echo " found in your PATH environment variable."; 146 | exit 1; 147 | fi 148 | 149 | if [ ! -x "${NU_EXE}" ]; then 150 | echo "Nodeunit not found. Please run "; 151 | echo "cd ${GGG_DIR}; npm install"; 152 | echo; 153 | exit 1; 154 | fi 155 | 156 | echo "Running regression tests"; 157 | _ret_int=0; 158 | while read _test_file; do 159 | if "${NU_EXE}" "${_test_file}"; then 160 | true; else _ret_int=1; 161 | fi 162 | done < <(find "${NU_DIR}" -mindepth 1 -maxdepth 1 | grep '\.js$' | sort); 163 | exit "${_ret_int}"; 164 | ## END Run regression tests ================================================ 165 | -------------------------------------------------------------------------------- /dist/pcss-ws-context.js: -------------------------------------------------------------------------------- 1 | /* 2 | * xhi-ws-context.js 3 | * This file is used by WebStorm to resolve properties 4 | * key received from external sources such as AJAX. 5 | * It is also useful as a reference. 6 | * It should *NOT* be included in production code. 7 | * 8 | * @author Michael S. Mikowski - mike.mikowski@gmail.com 9 | */ 10 | /*jslint browser : true, continue : true, 11 | devel : true, indent : 2, maxerr : 50, 12 | newcap : true, nomen : true, plusplus : true, 13 | regexp : true, sloppy : true, vars : false, 14 | white : true, todo : true, unparam : true 15 | */ 16 | 17 | (function () { 18 | 'use strict'; 19 | var 20 | bool = true, 21 | list = [], 22 | map = {}, 23 | fn = Function, 24 | int = 1, 25 | num = 0.5, 26 | obj = {}, 27 | str = '' 28 | ; 29 | 30 | return { 31 | // DOM 32 | ownerNode : obj, 33 | 34 | // parameters 35 | _attr_key_ : str, 36 | _attr_val_ : str, 37 | _css_key_map_ : map, 38 | _css_val_map_ : map 39 | }; 40 | }()); 41 | -------------------------------------------------------------------------------- /dist/pcss.cfg.js: -------------------------------------------------------------------------------- 1 | /* PowerCSS config - pcss.cfg.js 2 | * Stock configurations for run-time generated and managed CSS 3 | * Michael S. Mikowski - mike.mikowski@gmail.com 4 | * See README.md for further documentation. 5 | */ 6 | /*jslint browser : true, continue : true, 7 | devel : true, indent : 2, maxerr : 50, 8 | newcap : true, nomen : true, plusplus : true, 9 | regexp : true, sloppy : true, vars : false, 10 | white : true, todo : true, unparam : true 11 | */ 12 | /*global */ 13 | 14 | var __ns = 'pcss', __NS; 15 | /* istanbul ignore next */ 16 | try { __NS = global[ __ns ]; } 17 | catch ( e1 ) { __NS = window[ __ns ]; } 18 | 19 | // == BEGIN MODULE __NS._cfg_ ========================================= 20 | __NS._cfg_ = (function () { 21 | 'use strict'; 22 | var 23 | cssKeyMap = { 24 | __moz_appearance_ : '-moz-appearance', 25 | __ms_appearance_ : '-ms-appearance', 26 | __webkit_appearance_ : '-webkit-appearance', 27 | __moz_box_sizing_ : '-moz-box-sizing', 28 | __webkit_font_smoothing_ : '-webkit-font-smoothing', 29 | __webkit_overflow_scrolling_ : '-webkit-overflow-scrolling', 30 | __webkit_user_select_ : '-webkit-user-select', 31 | __moz_user_select_ : '-moz-user-select', 32 | __o_user_select_ : '-o-user-select', 33 | _user_select_ : 'user-select', 34 | 35 | _animation_ : 'animation', 36 | _background_ : 'background', 37 | _background_color_ : 'background-color', 38 | _background_image_ : 'background-image', 39 | _background_position_ : 'background-position', 40 | _background_repeat_ : 'background-repeat', 41 | _background_size_ : 'background-size', 42 | _body_ : 'body', 43 | _border_ : 'border', 44 | _border_bottom_ : 'border-bottom', 45 | _border_bottom_color_ : 'border-bottom-color', 46 | _border_bottom_width_ : 'border-bottom-width', 47 | _border_collapse_ : 'border-collapse', 48 | _border_color_ : 'border-color', 49 | _border_left_ : 'border-left', 50 | _border_left_color_ : 'border-left-color', 51 | _border_left_width_ : 'border-left-width', 52 | _border_radius_ : 'border-radius', 53 | _border_right_ : 'border-right', 54 | _border_right_color_ : 'border-right-color', 55 | _border_right_width_ : 'border-right-width', 56 | _border_spacing_ : 'border-spacing', 57 | _border_style_ : 'border-style', 58 | _border_top_ : 'border-top', 59 | _border_top_color_ : 'border-top-color', 60 | _border_top_left_radius_ : 'border-top-left-radius', 61 | _border_top_width_ : 'border-top-width', 62 | _border_width_ : 'border-width', 63 | _bottom_ : 'bottom', 64 | _box_shadow_ : 'box-shadow', 65 | _box_sizing_ : 'box-sizing', 66 | _clear_ : 'clear', 67 | _clip_ : 'clip', 68 | _color_ : 'color', 69 | _column_count_ : 'column-count', 70 | _column_gap_ : 'column-gap', 71 | _column_rule_ : 'column-rule', 72 | _column_width_ : 'column-width', 73 | _columns_ : 'columns', 74 | _content_ : 'content', 75 | _cursor_ : 'cursor', 76 | _display_ : 'display', 77 | _empty_cells_ : 'empty_cells', 78 | _fill_ : 'fill', 79 | _float_ : 'float', 80 | _font_family_ : 'font-family', 81 | _font_size_ : 'font-size', 82 | _font_style_ : 'font-style', 83 | _font_weight_ : 'font-weight', 84 | _height_ : 'height', 85 | _left_ : 'left', 86 | _line_height_ : 'line-height', 87 | _list_style_position_ : 'list-style-position', 88 | _list_style_type_ : 'list-style-type', 89 | _margin_ : 'margin', 90 | _margin_bottom_ : 'margin-bottom', 91 | _margin_left_ : 'margin-left', 92 | _margin_right_ : 'margin-right', 93 | _margin_top_ : 'margin-top', 94 | _max_height_ : 'max-height', 95 | _max_width_ : 'max-width', 96 | _min_height_ : 'min-height', 97 | _min_width_ : 'min-width', 98 | _opacity_ : 'opacity', 99 | _outline_ : 'outline', 100 | _overflow_ : 'overflow', 101 | _overflow_x_ : 'overflow-x', 102 | _overflow_y_ : 'overflow-y', 103 | _padding_ : 'padding', 104 | _padding_bottom_ : 'padding-bottom', 105 | _padding_left_ : 'padding-left', 106 | _padding_right_ : 'padding-right', 107 | _padding_top_ : 'padding-top', 108 | _position_ : 'position', 109 | _resize_ : 'resize', 110 | _right_ : 'right', 111 | _rx_ : 'rx', 112 | _ry_ : 'ry', 113 | _src_ : 'src', 114 | _stroke_ : 'stroke', 115 | _stroke_opacity_ : 'stroke-opacity', 116 | _stroke_width_ : 'stroke-width', 117 | _text_align_ : 'text-align', 118 | _text_decoration_ : 'text-decoration', 119 | _text_indent_ : 'text-indent', 120 | _text_overflow_ : 'text-overflow', 121 | _text_shadow_ : 'text-shadow', 122 | _top_ : 'top', 123 | _transition_ : 'transition', 124 | _vertical_align_ : 'vertical-align', 125 | _visibility_ : 'visibility', 126 | _white_space_ : 'white-space', 127 | _width_ : 'width', 128 | _word_break_ : 'word-break', 129 | _z_index_ : 'z-index', 130 | 131 | // new for 1.4.4 132 | __ms_flex_ : '-ms-flex', 133 | __ms_flex_wrap_ : '-ms-flex-wrap', 134 | _flex_ : 'flex', 135 | _flex_wrap_ : 'flex-wrap', 136 | _text_transform_ : 'text-transform' 137 | 138 | }, 139 | 140 | // Common CSS values 141 | cssValMap = { 142 | _d0_ : '.0', 143 | _d1_ : '.1', 144 | _d2_ : '.2', 145 | _d3_ : '.3', 146 | _d4_ : '.4', 147 | _d5_ : '.5', 148 | _d6_ : '.6', 149 | _d7_ : '.7', 150 | _d8_ : '.8', 151 | _d9_ : '.9', 152 | _0_ : '0', 153 | _1_ : '1', 154 | _2_ : '2', 155 | _3_ : '3', 156 | _4_ : '4', 157 | _5_ : '5', 158 | _6_ : '6', 159 | _7_ : '7', 160 | _8_ : '8', 161 | _9_ : '9', 162 | 163 | _0p_ : '0%', 164 | _12d5p_ : '12.5%', 165 | _25p_ : '25%', 166 | _36d5p_ : '37.5%', 167 | _50p_ : '50%', 168 | _62d5p_ : '62.5%', 169 | _75p_ : '75%', 170 | _87d5p_ : '87.5%', 171 | _100p_ : '100%', 172 | 173 | // 1px increments for 16px nominal font-size 174 | // VIM tip: I used visual-select and tac reverse order 175 | // to create negative values: 176 | // :'<'>!tac 177 | 178 | _n2rem_ : '-2rem', 179 | _n1rem_ : '-1rem', 180 | _nd9375rem_ : '-.9375rem', // 15px 181 | _nd875rem_ : '-.875rem', // 14px 182 | _nd8125rem_ : '-.8125rem', // 13px 183 | _nd75rem_ : '-.75rem', // 12px 184 | _nd6875rem_ : '-.6875rem', // 11px 185 | _nd625rem_ : '-.625rem', // 10px 186 | _nd5625rem_ : '-.5625rem', // 09px 187 | _nd5rem_ : '-.5rem', // 08px 188 | _nd4375rem_ : '-.4375rem', // 07px 189 | _nd375rem_ : '-.375rem', // 06px 190 | _nd3125rem_ : '-.3125rem', // 05px 191 | _nd25rem_ : '-.25rem', // 04px 192 | _nd1875rem_ : '-.1875rem', // 03px 193 | _nd125rem_ : '-.125rem', // 02px 194 | _nd0625rem_ : '-.0625rem', // 01px 195 | _d0625rem_ : '.0625rem', // 01px 196 | _d125rem_ : '.125rem', // 02px 197 | _d1875rem_ : '.1875rem', // 03px 198 | _d25rem_ : '.25rem', // 04px 199 | _d3125rem_ : '.3125rem', // 05px 200 | _d375rem_ : '.375rem', // 06px 201 | _d4375rem_ : '.4375rem', // 07px 202 | _d5rem_ : '.5rem', // 08px 203 | _d5625rem_ : '.5625rem', // 09px 204 | _d625rem_ : '.625rem', // 10px 205 | _d6875rem_ : '.6875rem', // 11px 206 | _d75rem_ : '.75rem', // 12px 207 | _d8125rem_ : '.8125rem', // 13px 208 | _d875rem_ : '.875rem', // 14px 209 | _d9375rem_ : '.9375rem', // 15px 210 | _1rem_ : '1rem', // 16px 211 | 212 | // 2px increments for 16px nominal font size 213 | _1d125rem_ : '1.125rem', 214 | _1d25rem_ : '1.25rem', 215 | _1d375rem_ : '1.375rem', 216 | _1d5rem_ : '1.5rem', 217 | _1d625rem_ : '1.625rem', 218 | _1d75rem_ : '1.75rem', 219 | _1d875rem_ : '1.875rem', 220 | 221 | // 4px increments for 16px nominal font-size 222 | _2rem_ : '2rem', 223 | _2d25rem_ : '2.25rem', 224 | _2d5rem_ : '2.5rem', 225 | _2d75rem_ : '2.75rem', 226 | 227 | // 8px increments for 16px nominal font-size 228 | _3rem_ : '3rem', 229 | _3d5rem_ : '3.5rem', 230 | _3d75rem_ : '3.75rem', 231 | _4rem_ : '4rem', 232 | _4d5rem_ : '4.5rem', 233 | _5rem_ : '5rem', 234 | _5d5rem_ : '5.5rem', 235 | _6rem_ : '6rem', 236 | _10rem_ : '10rem', 237 | 238 | _200_ : '200', 239 | _400_ : '400', 240 | _800_ : '800', 241 | _x444_ : '#444', 242 | _x888_ : '#888', 243 | _xaaa_ : '#aaa', 244 | _xbbb_ : '#bbb', 245 | _xccc_ : '#ccc', 246 | _xddd_ : '#ddd', 247 | _xeee_ : '#eee', 248 | _xfff_ : '#fff', 249 | 250 | _absolute_ : 'absolute', 251 | _antialiased_ : 'antialiased', 252 | _auto_ : 'auto', 253 | _baseline_ : 'baseline', 254 | _block_ : 'block', 255 | _border_box_ : 'border-box', 256 | _both_ : 'both', 257 | _bottom_ : 'bottom', 258 | _break_word_ : 'break-word', 259 | _center_ : 'center', 260 | _circle_ : 'circle', 261 | _clip_ : 'clip', 262 | _col_resize_ : 'col-resize', 263 | _collapse_ : 'collapse', 264 | _contain_ : 'contain', 265 | _content_box_ : 'content-box', 266 | _cover_ : 'cover', 267 | _decimal_ : 'decimal', 268 | _default_ : 'default', 269 | _disc_ : 'disc', 270 | _dotted_ : 'dotted', 271 | _ellipsis_ : 'ellipsis', 272 | _fixed_ : 'fixed', 273 | _flex_ : 'flex', 274 | _flex_wrap_ : 'flex-wrap', 275 | _font_fixed_ : 'courier new,courier,fixed,monospace', 276 | _font_sans_ : 'opensans,arial,helvetica,sans-serif', 277 | _hidden_ : 'hidden', 278 | _important_ : '!important', 279 | _inherit_ : 'inherit', 280 | _inline_ : 'inline', 281 | _inline_block_ : 'inline-block', 282 | _inline_table_ : 'inline-table', 283 | _italic_ : 'italic', 284 | _left_ : 'left', 285 | _line_through_ : 'line-through', 286 | _middle_ : 'middle', 287 | _move_ : 'move', 288 | _no_repeat_ : 'no-repeat', 289 | _none_ : 'none', 290 | _normal_ : 'normal', 291 | _nowrap_ : 'nowrap', 292 | _outside_ : 'outside', 293 | _pointer_ : 'pointer', 294 | _relative_ : 'relative', 295 | _right_ : 'right', 296 | _scroll_ : 'scroll', 297 | _show_ : 'show', 298 | _solid_ : 'solid', 299 | _table_ : 'table', 300 | _table_cell_ : 'table-cell', 301 | _table_row_ : 'table-row', 302 | _text_ : 'text', 303 | _top_ : 'top', 304 | _touch_ : 'touch', 305 | _transparent_ : 'transparent', 306 | _underline_ : 'underline', 307 | _uppercase_ : 'uppercase', 308 | _vertical_ : 'vertical', 309 | _visible_ : 'visible', 310 | _wrap_ : 'wrap' 311 | } 312 | ; 313 | 314 | return { 315 | _cssKeyMap_ : cssKeyMap, 316 | _cssValMap_ : cssValMap 317 | }; 318 | }()); 319 | // == . END MODULE __NS._cfg_ ========================================= 320 | -------------------------------------------------------------------------------- /examples/held_notes.txt: -------------------------------------------------------------------------------- 1 | Consider jQuery devDependencies: 2 | "devDependencies": { 3 | "commitplease": "2.0.0", 4 | "core-js": "0.9.17", 5 | "grunt": "0.4.5", 6 | "grunt-babel": "5.0.1", 7 | "grunt-cli": "0.1.13", 8 | "grunt-compare-size": "0.4.0", 9 | "grunt-contrib-jshint": "0.11.2", 10 | "grunt-contrib-uglify": "0.9.2", 11 | "grunt-contrib-watch": "0.6.1", 12 | "grunt-git-authors": "2.0.1", 13 | "grunt-jscs": "2.1.0", 14 | "grunt-jsonlint": "1.0.4", 15 | "grunt-npmcopy": "0.1.0", 16 | "gzip-js": "0.3.2", 17 | "jsdom": "5.6.1", 18 | "load-grunt-tasks": "1.0.0", 19 | "qunit-assert-step": "1.0.3", 20 | "qunitjs": "1.17.1", 21 | "requirejs": "2.1.17", 22 | "sinon": "1.10.3", 23 | "sizzle": "2.2.1", 24 | "strip-json-comments": "1.0.3", 25 | "testswarm": "1.1.0", 26 | "win-spawn": "2.0.0" 27 | }, 28 | -------------------------------------------------------------------------------- /examples/js/pcss._ex001_.js: -------------------------------------------------------------------------------- 1 | /* pss._ex001_.js 2 | * Example 001 of run-time generated and managed CSS 3 | * using PowerCSS - the basics 4 | * Michael S. Mikowski - mike.mikowski@gmail.com 5 | */ 6 | /*jslint browser : true, continue : true, 7 | devel : true, indent : 2, maxerr : 50, 8 | newcap : true, nomen : true, plusplus : true, 9 | regexp : true, sloppy : true, vars : false, 10 | white : true, todo : true, unparam : true 11 | */ 12 | /*global pcss */ 13 | 14 | /* I. Recommended units: rem and %. 15 | * II. Recommended order: Outside-In 16 | * 1. display, visibility, opacity, z-index 17 | * 2. box-sizing, position, floats, clear 18 | * 3. top, right, bottom, left and vertical-align 19 | * 4. margin defs, box-shadow 20 | * 5. border, border-radius 21 | * 6. height, width 22 | * 7. padding, overflow, cursor 23 | * 8. background, text-align, white-space, 24 | * 9. content defs - font-size, line-height, font, color everything else 25 | * -- break -- 26 | * 10. transition or animation definitions 27 | */ 28 | 29 | // BEGIN pcss._ex001_ 30 | pcss._ex001_ = function () { 31 | var baseSelectorList, boxSelectorList; 32 | 33 | pcss._initModule_(); 34 | 35 | // Begin define selector lists 36 | baseSelectorList = [ 37 | { _selector_str_ : 'body', 38 | _rule_map_ : { 39 | _display_ : '_block_', 40 | _margin_ : '_0_', 41 | _padding_ : [[ '_2d5rem_', '_2rem_' ]], 42 | _background_ : '_xddd_', 43 | _font_family_: '_font_sans_', 44 | _font_size_ : [ '16px' ], 45 | _color_ : '_x888_' 46 | } 47 | }, 48 | { _selector_str_ : 'input', 49 | _rule_map_ : { 50 | _margin_ : '_d5rem_', 51 | _width_ : [ '10rem' ], 52 | _border_ : [[ '_d125rem_', '_solid_', '_xddd_' ]], 53 | _border_radius_ : '_d5rem_', 54 | _outline_ : '_none_', 55 | _padding_ : '_d5rem_', 56 | _background_ : '_x888_', 57 | _font_size_ : '_1rem_', 58 | _color_ : '_xddd_' 59 | } 60 | }, 61 | { _selector_str_ : 'input:focus', 62 | _rule_map_ : { 63 | _border_color_ : '_xfff_', 64 | _background_ : '_x444_', 65 | _color_ : '_xfff_' 66 | } 67 | }, 68 | { _selector_str_ : '.pcss-_logo_', 69 | _rule_map_ : { 70 | _background_image_ : [ 'url(../img/pcss-25p-lt.png)' ], 71 | _background_size_ : '_cover_', 72 | _width_ : [ '20.75rem' ], 73 | _height_ : [ '10.125rem' ] 74 | } 75 | }, 76 | { _selector_str_ : '#pcss-_head_', 77 | _rule_map_ : { 78 | _position_ : '_fixed_', 79 | _z_index_ : '_1_', 80 | _top_ : '_0_', 81 | _left_ : '_0_', 82 | _right_ : '_0_', 83 | _height_ : '_2rem_', 84 | _box_shadow_ : [[ 85 | ['rgba( 64, 32, 32, .5)'], '_0_', '_0_', '_d5rem_', '_0_' 86 | ]], 87 | _padding_ : '_0_', 88 | _background_ : '_xeee_' 89 | } 90 | } 91 | ]; 92 | 93 | boxSelectorList = [ 94 | { _selector_str_ : '.pcss-_box_', 95 | _rule_lock_list_ : [ '_font_size_' ], 96 | _rule_map_ : { 97 | _display_ : '_inline_block_', 98 | _opacity_ : '_1_', 99 | _box_sizing_ : '_border_box_', 100 | _position_ : '_relative_', 101 | _vertical_align_ : '_top_', 102 | _margin_ : '_1rem_', 103 | _box_shadow_ : [[ 104 | [ 'rgba( 0, 0, 0, .5)' ], '_0_', '_0_', '_d25rem_', '_0_' 105 | ]], 106 | _border_ : [[ '_d25rem_', '_solid_', '_xeee_' ]], 107 | _border_radius_ : '_1rem_', 108 | _width_ : [ '16rem' ], 109 | _height_ : [ '8rem' ], 110 | _padding_top_ : '_1rem_', 111 | _background_ : { 112 | _alt_list_ : [ 113 | [ '#f85032' ], 114 | [ '-moz-linear-gradient(left, #f85032 0%, #6d362d 100%)' ], 115 | [ '-webkit-linear-gradient(left, #f85032 0%, #6d362d 100%)' ], 116 | [ 'linear-gradient(to bottom, #f85032 0%, #6d362d 100%)' ] 117 | ] 118 | }, 119 | _font_size_ : '_1d5rem_', 120 | _font_weight_ : '_800_', 121 | _color_ : '_xfff_', 122 | _text_align_ : '_center_' 123 | } 124 | } 125 | ]; 126 | // End define selector lists 127 | 128 | // Begin Add vsheets 129 | pcss._setVsheet_({ 130 | _vsheet_id_ : '_box01_', 131 | _mode_str_ : '_add_', 132 | _selector_list_ : boxSelectorList 133 | }); 134 | 135 | pcss._setVsheet_({ 136 | _vsheet_id_ : '_base_', 137 | _mode_str_ : '_add_', 138 | _selector_list_ : baseSelectorList 139 | }); 140 | // End Add vsheets 141 | 142 | // Begin add and use _c01_ cascade 143 | pcss._setCascade_({ 144 | _cascade_id_ : '_c01_', 145 | _mode_str_ : '_add_', 146 | _vsheet_id_list_ : [ '_base_', '_box01_' ], 147 | _regen_type_ : '_use_' 148 | }); 149 | // End add and use _c01_ cascade 150 | }; 151 | // END pcss._ex001_ 152 | -------------------------------------------------------------------------------- /examples/js/pcss._ex002_.js: -------------------------------------------------------------------------------- 1 | /* pss._ex002_.js 2 | * Example 002 of run-time generated and managed CSS 3 | * using PowerCSS - double buffering 4 | * Michael S. Mikowski - mike.mikowski@gmail.com 5 | */ 6 | /*jslint browser : true, continue : true, 7 | devel : true, indent : 2, maxerr : 50, 8 | newcap : true, nomen : true, plusplus : true, 9 | regexp : true, sloppy : true, vars : false, 10 | white : true, todo : true, unparam : true 11 | */ 12 | /*global pcss */ 13 | 14 | /* I. Recommended units: rem and %. 15 | * II. Recommended order: Outside-In 16 | * 1. display, visibility, opacity, z-index 17 | * 2. box-sizing, position, floats, clear 18 | * 3. top, right, bottom, left and vertical-align 19 | * 4. margin defs, box-shadow 20 | * 5. border, border-radius 21 | * 6. height, width 22 | * 7. padding, overflow, cursor 23 | * 8. background, text-align, white-space, 24 | * 9. content defs - font-size, line-height, font, color everything else 25 | * -- break -- 26 | * 10. transition or animation definitions 27 | */ 28 | 29 | // BEGIN pcss._ex002_ 30 | pcss._ex002_ = function ( display_html ) { 31 | var 32 | base_selector_list, box_selector_list, 33 | switch_selector_list, box_rule_map, 34 | switch_el, link_list, 35 | onclick_fn 36 | ; 37 | 38 | pcss._initModule_(); 39 | 40 | // Begin add _base_ vsheet 41 | base_selector_list = [ 42 | { _selector_str_ : 'body', 43 | _rule_map_ : { 44 | _display_ : '_block_', 45 | _margin_ : '_0_', 46 | _padding_ : [[ '_2d5rem_', '_2rem_' ]], 47 | _background_ : '_xddd_', 48 | _overflow_y_ : '_scroll_', 49 | _font_family_: '_font_sans_', 50 | _font_size_ : [ '16px' ], 51 | _color_ : '_x888_' 52 | } 53 | }, 54 | { _selector_str_ : 'input', 55 | _rule_map_ : { 56 | _margin_ : '_d5rem_', 57 | _width_ : [ '10rem' ], 58 | _border_ : [[ '_d125rem_', '_solid_', '_xddd_' ]], 59 | _border_radius_ : '_d5rem_', 60 | _outline_ : '_none_', 61 | _padding_ : '_d5rem_', 62 | _background_ : '_x888_', 63 | _font_size_ : '_1rem_', 64 | _color_ : '_xddd_' 65 | } 66 | }, 67 | { _selector_str_ : 'input:focus', 68 | _rule_map_ : { 69 | _border_color_ : '_xfff_', 70 | _background_ : '_x444_', 71 | _color_ : '_xfff_' 72 | } 73 | }, 74 | { _selector_str_ : '.pcss-_logo_', 75 | _rule_map_ : { 76 | _background_image_ : [ 'url(../img/pcss-25p-lt.png)' ], 77 | _background_size_ : '_cover_', 78 | _width_ : [ '20.75rem' ], 79 | _height_ : [ '10.125rem' ] 80 | } 81 | }, 82 | { _selector_str_ : '#pcss-_head_', 83 | _rule_map_ : { 84 | _position_ : '_fixed_', 85 | _z_index_ : '_1_', 86 | _top_ : '_0_', 87 | _left_ : '_0_', 88 | _right_ : '_0_', 89 | _height_ : '_2rem_', 90 | _box_shadow_ : [[ 91 | ['rgba( 64, 32, 32, .5)'], '_0_', '_0_', '_d5rem_', '_0_' 92 | ]], 93 | _padding_ : '_0_', 94 | _background_ : '_xeee_' 95 | } 96 | } 97 | ]; 98 | 99 | pcss._setVsheet_({ 100 | _vsheet_id_ : '_base_', 101 | _mode_str_ : '_add_', 102 | _selector_list_ : base_selector_list 103 | }); 104 | // End add _base_ vsheet 105 | 106 | // Begin add _box01_ vsheet 107 | box_selector_list = [ 108 | { _selector_str_ : '.pcss-_box_', 109 | _rule_lock_list_ : [ '_font_size_' ], 110 | _rule_map_ : { 111 | _display_ : '_inline_block_', 112 | _opacity_ : '_1_', 113 | _box_sizing_ : '_border_box_', 114 | _position_ : '_relative_', 115 | _vertical_align_ : '_top_', 116 | _margin_ : '_1rem_', 117 | _box_shadow_ : [[ 118 | [ 'rgba( 0, 0, 0, .5)' ], '_0_', '_0_', '_d25rem_', '_0_' 119 | ]], 120 | _border_ : [[ '_d25rem_', '_solid_', '_xeee_' ]], 121 | _border_radius_ : '_1rem_', 122 | _width_ : [ '16rem' ], 123 | _height_ : [ '8rem' ], 124 | _padding_top_ : '_1rem_', 125 | _background_ : { 126 | _alt_list_ : [ 127 | [ '#f85032' ], 128 | [ '-moz-linear-gradient(left, #f85032 0%, #6d362d 100%)' ], 129 | [ '-webkit-linear-gradient(left, #f85032 0%, #6d362d 100%)' ], 130 | [ 'linear-gradient(to bottom, #f85032 0%, #6d362d 100%)' ] 131 | ] 132 | }, 133 | _font_size_ : '_1d5rem_', 134 | _font_weight_ : '_800_', 135 | _color_ : '_xfff_', 136 | _text_align_ : '_center_' 137 | } 138 | } 139 | ]; 140 | 141 | pcss._setVsheet_({ 142 | _vsheet_id_ : '_box01_', 143 | _mode_str_ : '_add_', 144 | _selector_list_ : box_selector_list 145 | }); 146 | // End add _box01_ vsheet 147 | 148 | // Begin add _box02_ vsheet by *revising* box_selector_list 149 | box_rule_map = box_selector_list[ 0 ]._rule_map_; 150 | pcss._extendRuleMap_( box_rule_map, { 151 | _display_ : '_block_', 152 | _width_ : null, // null means delete this key 153 | _max_width_ : [ '32rem' ], 154 | _font_size_ : '_2rem_', 155 | _box_shadow_ : [[ 156 | ['rgba( 64, 32, 32, .5)'], '_0_', '_0_', '_d5rem_', '_0_' 157 | ]], 158 | _background_ : { 159 | _alt_list_ : [ 160 | [ '#4f9831' ], 161 | [ '-moz-linear-gradient(left, #4f9831 0%, #eee 100%)' ], 162 | [ '-webkit-linear-gradient(left, #4f9831 0%, #eee 100%)' ], 163 | [ 'linear-gradient(to bottom, #4f9831 0%, #eee 100%)' ] 164 | ] 165 | } 166 | }); 167 | 168 | pcss._setVsheet_({ 169 | _vsheet_id_ : '_box02_', 170 | _mode_str_ : '_add_', 171 | _selector_list_ : box_selector_list 172 | }); 173 | // End add _box02_ vsheet by *revising* box_selector_list 174 | 175 | // Begin add _switch_ vsheet 176 | switch_selector_list = [ 177 | { _selector_str_ : '#pcss-_switch_', 178 | _rule_map_ : { 179 | _position_ : '_fixed_', 180 | _z_index_ : '_1_', 181 | _top_ : '_0_', 182 | _right_ : '_0_', 183 | _box_shadow_ : box_rule_map._box_shadow_, 184 | _border_color_ : '_xaaa_', 185 | _border_radius_ : [[ '_0_','_0_','_0_','_1rem_' ]], 186 | _border_style_ : '_solid_', 187 | _border_width_ : [[ '_0_', '_0_', '_d125rem_', '_d125rem_' ]], 188 | _padding_ : '_1rem_', 189 | _padding_top_ : '_d5rem_', 190 | _background_ : '_xeee_', 191 | _line_height_ : '_1d5rem_' 192 | } 193 | }, 194 | { _selector_str_ : '#pcss-_switch_ div', 195 | _rule_map_ : { 196 | _margin_ : '_d25rem_', 197 | _padding_ : '_d25rem_', 198 | _border_radius_ : '_d25rem_', 199 | _cursor_ : '_pointer_' 200 | } 201 | }, 202 | { _selector_str_ : '#pcss-_switch_ div.pcss-_x_select_', 203 | _rule_map_ : { 204 | _background_ : '_x888_', 205 | _color_ : '_xfff_' 206 | } 207 | } 208 | ]; 209 | 210 | pcss._setVsheet_({ 211 | _vsheet_id_ : '_switch_', 212 | _mode_str_ : '_add_', 213 | _selector_list_ : switch_selector_list 214 | }); 215 | // End add _switch_ vsheet 216 | 217 | // Begin create cascades to toggle 218 | pcss._setCascade_({ 219 | _cascade_id_ : '_c01_', 220 | _mode_str_ : '_add_', 221 | _vsheet_id_list_ : [ '_base_', '_switch_', '_box01_' ] 222 | }); 223 | 224 | pcss._setCascade_({ 225 | _cascade_id_ : '_c02_', 226 | _mode_str_ : '_add_', 227 | _vsheet_id_list_ : [ '_base_', '_switch_', '_box02_' ] 228 | }); 229 | // End create cascades to toggle 230 | 231 | // Begin onclick handler 232 | onclick_fn = function ( event_obj ) { 233 | var 234 | target_el = event_obj.target, 235 | cascade_id 236 | ; 237 | 238 | if ( target_el === switch_el ) { return; } 239 | if ( target_el === link_list[ 0 ] ) { 240 | cascade_id = '_c01_'; 241 | link_list[ 0 ].className = 'pcss-_x_select_'; 242 | link_list[ 1 ].className = ''; 243 | } 244 | else if ( target_el === link_list[ 1 ] ) { 245 | cascade_id = '_c02_'; 246 | link_list[ 0 ].className = ''; 247 | link_list[ 1 ].className = 'pcss-_x_select_'; 248 | } 249 | if ( cascade_id ) { 250 | pcss._setCascade_({ 251 | _cascade_id_ : cascade_id, 252 | _mode_str_ : '_change_', 253 | _regen_type_ : '_use_' 254 | }); 255 | } 256 | }; 257 | // End onclick handler 258 | 259 | // Begin init 260 | pcss._setCascade_({ 261 | _cascade_id_ : '_c01_', 262 | _mode_str_ : '_change_', 263 | _regen_type_ : '_use_' 264 | }); 265 | 266 | switch_el = document.getElementById( 'pcss-_switch_' ); 267 | link_list = switch_el.getElementsByTagName( 'div' ); 268 | 269 | switch_el.addEventListener( 'click', onclick_fn ); 270 | // End init 271 | }; 272 | // END pcss._ex002_ 273 | -------------------------------------------------------------------------------- /examples/js/pcss._ex003_.js: -------------------------------------------------------------------------------- 1 | /* pss._ex003_.js 2 | * Example 003 of run-time generated and managed CSS 3 | * using PowerCSS - mixins 4 | * Michael S. Mikowski - mike.mikowski@gmail.com 5 | */ 6 | /*jslint browser : true, continue : true, 7 | devel : true, indent : 2, maxerr : 50, 8 | newcap : true, nomen : true, plusplus : true, 9 | regexp : true, sloppy : true, vars : false, 10 | white : true, todo : true, unparam : true 11 | */ 12 | /*global pcss */ 13 | 14 | /* I. Recommended units: rem and %. 15 | * II. Recommended order: Outside-In 16 | * 1. display, visibility, opacity, z-index 17 | * 2. box-sizing, position, floats, clear 18 | * 3. top, right, bottom, left and vertical-align 19 | * 4. margin defs, box-shadow 20 | * 5. border, border-radius 21 | * 6. height, width 22 | * 7. padding, overflow, cursor 23 | * 8. background, text-align, white-space, 24 | * 9. content defs - font-size, line-height, font, color everything else 25 | * -- break -- 26 | * 10. transition or animation definitions 27 | */ 28 | 29 | // BEGIN pcss._ex003_ 30 | pcss._ex003_ = function ( display_html ) { 31 | var 32 | global_mixin_map, base_mixin_map, 33 | base_selector_list, box_selector_list, 34 | switch_selector_list, box_rule_map, 35 | switch_el, link_list, 36 | onclick_fn 37 | ; 38 | 39 | pcss._initModule_(); 40 | 41 | global_mixin_map = { 42 | _global_d25_box_shadow_ : [[ 43 | ['rgba( 0, 0, 0, .5)'], '_0_', '_0_', '_d25rem_', '_0_' 44 | ]], 45 | _global_d5_box_shadow_ : [[ 46 | ['rgba( 64, 32, 32, .5)'], '_0_', '_0_', '_d5rem_', '_0_' 47 | ]], 48 | _global_red_grad_map_ : { 49 | _alt_list_ : [ 50 | [ '#f85032' ], 51 | [ '-moz-linear-gradient(left, #f85032 0%, #6d362d 100%)' ], 52 | [ '-webkit-linear-gradient(left, #f85032 0%, #6d362d 100%)' ], 53 | [ 'linear-gradient(to bottom, #f85032 0%, #6d362d 100%)' ] 54 | ] 55 | }, 56 | _global_green_grad_map_ : { 57 | _alt_list_ : [ 58 | [ '#4f9831' ], 59 | [ '-moz-linear-gradient(left, #4f9831 0%, #eee 100%)' ], 60 | [ '-webkit-linear-gradient(left, #4f9831 0%, #eee 100%)' ], 61 | [ 'linear-gradient(to bottom, #4f9831 0%, #eee 100%)' ] 62 | ] 63 | }, 64 | _global_blue_grad_map_ : { 65 | _alt_list_ : [ 66 | [ '#314f98' ], 67 | [ '-moz-linear-gradient(left, #314f98 0%, #eee 100%)' ], 68 | [ '-webkit-linear-gradient(left, #314f98 0%, #eee 100%)' ], 69 | [ 'linear-gradient(to bottom, #314f98 0%, #eee 100%)' ] 70 | ] 71 | } 72 | }; 73 | 74 | pcss._setGlobalMixinMap_({ 75 | _mixin_map_ : global_mixin_map 76 | }); 77 | 78 | // Begin add _base_ vsheet 79 | base_mixin_map = { 80 | _base_body_font_size_ : '16px', 81 | _base_body_font_color_ : '#a44', 82 | _base_input_width_ : '10rem', 83 | _base_input_border_ : [[ '_d125rem_','_solid_','_xddd_' ]] 84 | }; 85 | base_selector_list = [ 86 | { _selector_str_ : 'body', 87 | _rule_map_ : { 88 | _display_ : '_block_', 89 | _margin_ : '_0_', 90 | _padding_ : [[ '_2d5rem_', '_2rem_' ]], 91 | _background_ : '_xddd_', 92 | _overflow_y_ : '_scroll_', 93 | _font_family_: '_font_sans_', 94 | _font_size_ : '_base_body_font_size_', 95 | _color_ : '_base_body_font_color_' 96 | } 97 | }, 98 | { _selector_str_ : 'input', 99 | _rule_map_ : { 100 | _margin_ : '_d5rem_', 101 | _width_ : '_base_input_width_', 102 | _border_ : '_base_input_border_', 103 | _border_radius_ : '_d5rem_', 104 | _outline_ : '_none_', 105 | _padding_ : '_d5rem_', 106 | _background_ : '_x888_', 107 | _font_size_ : '_1rem_', 108 | _color_ : '_xddd_' 109 | } 110 | }, 111 | { _selector_str_ : 'input:focus', 112 | _rule_map_ : { 113 | _border_color_ : '_xfff_', 114 | _background_ : '_x444_', 115 | _color_ : '_xfff_' 116 | } 117 | }, 118 | { _selector_str_ : '.pcss-_logo_', 119 | _rule_map_ : { 120 | _background_image_ : [ 'url(../img/pcss-25p-lt.png)' ], 121 | _background_size_ : '_cover_', 122 | _width_ : [ '20.75rem' ], 123 | _height_ : [ '10.125rem' ] 124 | } 125 | }, 126 | { _selector_str_ : '#pcss-_head_', 127 | _rule_map_ : { 128 | _position_ : '_fixed_', 129 | _z_index_ : '_1_', 130 | _top_ : '_0_', 131 | _left_ : '_0_', 132 | _right_ : '_0_', 133 | _height_ : '_2rem_', 134 | _box_shadow_ : [[ 135 | ['rgba( 64, 32, 32, .5)'], '_0_', '_0_', '_d5rem_', '_0_' 136 | ]], 137 | _padding_ : '_0_', 138 | _background_ : '_xeee_' 139 | } 140 | } 141 | ]; 142 | 143 | pcss._setVsheet_({ 144 | _vsheet_id_ : '_base_', 145 | _mode_str_ : '_add_', 146 | _selector_list_ : base_selector_list, 147 | _mixin_map_ : base_mixin_map 148 | }); 149 | // End add _base_ vsheet 150 | 151 | // Begin add _box01_ vsheet 152 | box_selector_list = [ 153 | { _selector_str_ : '.pcss-_box_', 154 | _rule_lock_list_ : [ '_font_size_' ], 155 | _rule_map_ : { 156 | _display_ : '_inline_block_', 157 | _opacity_ : '_1_', 158 | _box_sizing_ : '_border_box_', 159 | _position_ : '_relative_', 160 | _vertical_align_ : '_top_', 161 | _margin_ : '_1rem_', 162 | _box_shadow_ : '_global_d25_box_shadow_', 163 | _border_ : [[ '_d25rem_', '_solid_', '_xeee_' ]], 164 | _border_radius_ : '_1rem_', 165 | _width_ : [ '16rem' ], 166 | _height_ : [ '8rem' ], 167 | _padding_top_ : '_1rem_', 168 | _background_ : '_global_red_grad_map_', 169 | _font_size_ : '_1d5rem_', 170 | _font_weight_ : '_800_', 171 | _color_ : '_xfff_', 172 | _text_align_ : '_center_' 173 | } 174 | } 175 | ]; 176 | 177 | pcss._setVsheet_({ 178 | _vsheet_id_ : '_box01_', 179 | _mode_str_ : '_add_', 180 | _selector_list_ : box_selector_list 181 | }); 182 | // End add _box01_ vsheet 183 | 184 | // Begin add _box02_ vsheet by *revising* box_selector_list 185 | box_rule_map = box_selector_list[ 0 ]._rule_map_; 186 | pcss._extendRuleMap_( box_rule_map, { 187 | _display_ : '_block_', 188 | _width_ : null, 189 | _max_width_ : [ '32rem' ], 190 | _font_size_ : '_2rem_', 191 | _box_shadow_ : '_global_d5_box_shadow_', 192 | _background_ : '_global_green_grad_map_' 193 | }); 194 | 195 | pcss._setVsheet_({ 196 | _vsheet_id_ : '_box02_', 197 | _mode_str_ : '_add_', 198 | _selector_list_ : box_selector_list, 199 | _mixin_map_ : { _base_body_font_color_ : '#080' } 200 | }); 201 | // End add _box02_ vsheet by *revising* box_selector_list 202 | 203 | // Begin add _box03_ vsheet by *revising* box_selector_list 204 | pcss._extendRuleMap_( box_rule_map, { 205 | _display_ : '_inline_block_', 206 | _width_ : [ '18rem' ], 207 | _max_width_ : null, 208 | _box_shadow_ : '_global_d25_box_shadow_', 209 | _border_width_ : '_1rem_', 210 | _border_radius_ : '_0_', 211 | _padding_top_ : '_d5rem_', 212 | _font_family_ : '_font_fixed_', 213 | _font_size_ : '_1d75rem_', 214 | _background_ : '_global_blue_grad_map_' 215 | }); 216 | 217 | pcss._setVsheet_({ 218 | _vsheet_id_ : '_box03_', 219 | _mode_str_ : '_add_', 220 | _selector_list_ : box_selector_list, 221 | _mixin_map_ : { _base_body_font_color_ : '#008' } 222 | }); 223 | // End add _box03_ vsheet by *revising* box_selector_list 224 | 225 | // Begin add _switch_ vsheet 226 | switch_selector_list = [ 227 | { _selector_str_ : '#pcss-_switch_', 228 | _rule_map_ : { 229 | _position_ : '_fixed_', 230 | _z_index_ : '_1_', 231 | _top_ : '_0_', 232 | _right_ : '_0_', 233 | _box_shadow_ : box_rule_map._box_shadow_, 234 | _border_color_ : '_xaaa_', 235 | _border_radius_ : [[ '_0_','_0_','_0_','_1rem_' ]], 236 | _border_style_ : '_solid_', 237 | _border_width_ : [[ '_0_', '_0_', '_d125rem_', '_d125rem_' ]], 238 | _padding_ : '_1rem_', 239 | _padding_top_ : '_d5rem_', 240 | _background_ : '_xeee_', 241 | _line_height_ : '_1d5rem_' 242 | } 243 | }, 244 | { _selector_str_ : '#pcss-_switch_ div', 245 | _rule_map_ : { 246 | _margin_ : '_d25rem_', 247 | _padding_ : '_d25rem_', 248 | _border_radius_ : '_d25rem_', 249 | _cursor_ : '_pointer_' 250 | } 251 | }, 252 | { _selector_str_ : '#pcss-_switch_ div.pcss-_x_select_', 253 | _rule_map_ : { 254 | _background_ : '_x888_', 255 | _color_ : '_xfff_' 256 | } 257 | } 258 | ]; 259 | 260 | pcss._setVsheet_({ 261 | _vsheet_id_ : '_switch_', 262 | _mode_str_ : '_add_', 263 | _selector_list_ : switch_selector_list, 264 | _mixin_map_ : { _base_body_font_color_ : '#008' } 265 | }); 266 | // End add _switch_ vsheet 267 | 268 | // Begin create cascades to toggle 269 | pcss._setCascade_({ 270 | _cascade_id_ : '_c01_', 271 | _mode_str_ : '_add_', 272 | _vsheet_id_list_ : [ '_base_', '_switch_', '_box01_' ] 273 | }); 274 | 275 | pcss._setCascade_({ 276 | _cascade_id_ : '_c02_', 277 | _mode_str_ : '_add_', 278 | _vsheet_id_list_ : [ '_base_', '_switch_', '_box02_' ] 279 | }); 280 | 281 | pcss._setCascade_({ 282 | _cascade_id_ : '_c03_', 283 | _mode_str_ : '_add_', 284 | _vsheet_id_list_ : [ '_base_', '_switch_', '_box03_' ] 285 | }); 286 | // End create cascades to toggle 287 | 288 | // Begin onclick handler 289 | onclick_fn = function ( event_obj ) { 290 | var 291 | target_el = event_obj.target, 292 | cascade_id 293 | ; 294 | 295 | if ( target_el === switch_el ) { return; } 296 | if ( target_el === link_list[ 0 ] ) { 297 | cascade_id = '_c01_'; 298 | link_list[ 0 ].className = 'pcss-_x_select_'; 299 | link_list[ 1 ].className = ''; 300 | link_list[ 2 ].className = ''; 301 | } 302 | else if ( target_el === link_list[ 1 ] ) { 303 | cascade_id = '_c02_'; 304 | link_list[ 0 ].className = ''; 305 | link_list[ 1 ].className = 'pcss-_x_select_'; 306 | link_list[ 2 ].className = ''; 307 | } 308 | else if ( target_el === link_list[ 2 ] ) { 309 | cascade_id = '_c03_'; 310 | link_list[ 0 ].className = ''; 311 | link_list[ 1 ].className = ''; 312 | link_list[ 2 ].className = 'pcss-_x_select_'; 313 | } 314 | if ( cascade_id ) { 315 | pcss._setCascade_({ 316 | _cascade_id_ : cascade_id, 317 | _mode_str_ : '_change_', 318 | _regen_type_ : '_use_' 319 | }); 320 | } 321 | }; 322 | // End onclick handler 323 | 324 | // Begin init 325 | pcss._setCascade_({ 326 | _cascade_id_ : '_c01_', 327 | _mode_str_ : '_change_', 328 | _regen_type_ : '_use_' 329 | }); 330 | 331 | switch_el = document.getElementById( 'pcss-_switch_' ); 332 | link_list = switch_el.getElementsByTagName( 'div' ); 333 | 334 | switch_el.addEventListener( 'click', onclick_fn ); 335 | // End init 336 | }; 337 | // END pcss._ex003_ 338 | -------------------------------------------------------------------------------- /examples/js/pcss._ex004_.js: -------------------------------------------------------------------------------- 1 | var pcss=function(){function f(){}function r(f){return typeof f}function w(){var f,r,w,s=u[q.ry],o=m.qg,v=[];for(f=i;qe>f;f++){if(r=o+qz(f),u[q.vk](r))throw"rl "+r;w=u[q.wr]("style"),w[q.n8](q.rz,q.wm),w[q.n8](q.wo,r),s[q.n4](w),w[q.q3][q.qb]=qa,v[q.qi](w)}m.v_=v}function s(f){return f?l(qt(f)):f}function o(f,w){var o,v,p,a,b,j;if("object"===r(w))for(o=s(w),v=qp(o),p=v[q.q4],a=i;p>a;a++)b=v[a],j=o[b],f[b]=j}function v(r,w){var v,p,a,b,j,k,t,qy,c,h,u,d,e,qk,l,qm,qa,g,qe,q8,q5,qq,qd=m.nu,w9=m.v0,wb=w[q.q4],v3={},vh=[];for(p=qd.vp.v9.x,a=qd.vz[r]&&qd.vz[r].x,v=s(p),o(v,a),b=i;wb>b;b++)for(j=w[b],k=w9[j]||{},qy=k[q.q4],t=qd.v7[j]&&qd.v7[j].x,o(v,t),c=i;qy>c;c++)if(h=k[c],u=h.qu,d=h.q0,e=h.qj,l=v3[u])for(qm=l.w4,qa=qm.qj,d&&(g=l.q0,g[q.qi][q.vv](g,d),l["lock_on_"+qz(b)]=qt(d)),qe=qp(e),q8=qe[q.q4],q5=i;q8>q5;q5++)qq=qe[q5],d&&d[q.wj](qq)>q1?f("rt",u,qq):qa[qq]=e[qq];else qk=s(h),vh[q.qi](qk),l={w4:qk},d?(l.q0=s(d),l["lock_on_"+qz(b)]=qt(d)):l.q0=[],v3[u]=l;return{qr:vh,x:v}}function p(w,s){var o,v,p,a,b,j,k,t,qy,c,qz,u,d,qt,qk,l,qm,qa,g,qe,q1,q8;for(a=w[q.q4],qm=[],o=i;a>o;o++)if(b=w[o],j=b.qu,k=b.qj,t=b.ro||h,k){for(qy=qp(k),c=qy[q.q4],g=[],v=i;c>v;v++)if(qz=qy[v],q5[q.q7](qz)){qe=q5[qz],d=k[qz],q.va===r(d)&&s[q.q7](d)&&q.va!==r(s[d])&&(d=s[d]),qt=e(d)?q.v4:r(d),qk=qt===q.nh?d.vq||[]:[d],l=qk[q.q4];_:for(p=i;l>p;p++){switch(u=qk[p],qa=e(u)?q.v4:r(u)){case q.va:if(s[q.q7](u))q1=s[u];else{if(!qq[q.q7](u)){f("ri",u);continue _}q1=qq[u]}break;case q.v4:u[q.q4]>i?q1=u[i]:f(u,"rp");break;default:f("rs")}g[q.qi](qe+":"+q1)}}else f(qz,"rd");q8=j+"{",q8+=g[q.q4]>i?g[q.v2](";"):h,q8+="}"+t,qm[q.qi](q8)}else qm[q.qi](j+t);return qm[q.v2]("\n")}function a(f,r){var w,s;f[q.q7](q.nl)?(f[q.nl]=r,f[q.q3][q.qb]=qa):f[q.q7](q.ny)?f[q.ny]=r:(s=f[q.n0],s&&s[q.q4]>i?(w=s[i],w[q.wq]=r):(w=u[q.n9](r),f[q.n4](w)))}function b(r){var w=m.nu,o=r||{},v=o.vs,p=o.nk,a=o.x;return"vp"===v&&(p="v9"),p&&v&&a?w[v]?(w[v][p]&&f("r5"),void(w[v][p]={x:s(a),wy:qm()})):void f("rf",v):(f("rx",p,v,a),d)}function j(r){var w=r||{},o=w.q9,v=s(w.qr)||[],p=w.x,a=m.v0;p&&b({nk:o,vs:"v7",x:p}),a[o]&&f("rn",o),a[o]=v}function k(f){var r,w,o=f||{},p=o.ql||[],a=s(o.vm)||[],j=o.x,k=m.na,t=qm();if(k[p])throw"r7"+p;j&&b({nk:p,vs:"vz",x:j}),r=v(p,a),w={ql:p,vm:a,vo:h,wi:r.qr,n3:r.x,ww:qk,nn:{vx:i,ni:t,wd:t,wl:t}},k[p]=w}function t(f){var r,w,s,o,v,b=f||{},j=b.ql,k=m.na,t=m.qg,qy=m.v_,c=m.n5,qp=0===c?1:0,h=qy[qp],e=k[j];if(!e)throw"r9"+j;r=e.nn,w=r.vx,s=r.ni>w||r.wl>w||r.wd>w,s&&(e.vo=p(e.wi,e.n3),r.vx=qm()),a(h,e.vo),c>q1&&(o=t+qz(c),v=u[q.vk](o),v[q.q3][q.qb]=qa),h[q.q3][q.qb]=d,e.ww=h,m.n5=qp}function qy(f){var r=f||{};m.qg=r.qg?r.qg+"-":"pcss-",w()}function c(){var f,r,w,s,o,v,p,a,c;qy(),f={n6:"rgba( 0, 0, 0, .5) 0 0 .25rem 0",n2:"rgba( 64, 32, 32, .5) 0 0 .5rem 0",n7:{vq:[["#f85032"],["-moz-linear-gradient(left, #f85032 0%, #6d362d 100%)"],["-webkit-linear-gradient(left, #f85032 0%, #6d362d 100%)"],["linear-gradient(to bottom, #f85032 0%, #6d362d 100%)"]]},nt:{vq:[["#4f9831"],["-moz-linear-gradient(left, #4f9831 0%, #eee 100%)"],["-webkit-linear-gradient(left, #4f9831 0%, #eee 100%)"],["linear-gradient(to bottom, #4f9831 0%, #eee 100%)"]]},w_:{vq:[["#314f98"],["-moz-linear-gradient(left, #314f98 0%, #eee 100%)"],["-webkit-linear-gradient(left, #314f98 0%, #eee 100%)"],["linear-gradient(to bottom, #314f98 0%, #eee 100%)"]]}},b({vs:"vp",x:f}),r={w8:"16px",vu:"#a44",wh:"10rem",no:".125rem solid #ddd"},w=[{qu:q.wu,qj:{qh:"nj",nm:"vt",ve:"qw",qv:"ne",nb:"wk",vb:"nw",qn:"w8",qx:"vu"}},{qu:"input",qj:{ve:"q_",q2:"wh",vf:"no",qc:"q_",w2:"w7",qv:"q_",qs:"vg",qn:"qf",qx:"nf"}},{qu:"input:focus",qj:{nq:"vj",qs:"n_",qx:"vj"}}],j({q9:"v5",qr:w,x:r}),s=[{qu:".pcss-ra",q0:["qn"],qj:{qh:"vw",wf:"nz",nm:"vt",ns:"w1",r6:"vy",ve:"qf",qo:"n6",vf:["0.25rem solid #eee"],qc:"qf",q2:["16rem"],wx:["8rem"],v1:"qf",qs:"n7",qn:"n1",ws:"nx",qx:"vj",wa:"rj"}}],j({q9:"nc",qr:s}),v=s[i].qj,v.qh="nj",v.q2=void 0,v.vc=["32rem"],v.qn="ne",v.qo="n2",v.qs="nt",j({q9:"r8",qr:s,x:{vu:"#080"}}),v=s[i].qj,v.qh="vw",v.q2=["18rem"],v.vc=q8,v.qo="n6",v.vd="qf",v.qc="qw",v.v1="q_",v.vb="ng",v.qn="we",v.qs="w_",j({q9:"rm",qr:s,x:{vu:"#008"}}),o=[{qu:"#pcss-vr",qj:{ns:"nd",r4:"nz",vy:"qw",vi:"qw",qo:v.qo,nq:"wg",qc:["0 0 0 1rem"],np:"wc",vd:["0 0 0.125rem 0.125rem"],qv:"qf",v1:"q_",qs:"wn",wz:"n1"}},{qu:"#pcss-vr div",qj:{ve:"vl",qv:"vl",qc:"vl",w0:"wp"}},{qu:"#pcss-vr div.pcss-v8",qj:{qs:"vg",qx:"vj"}}],j({q9:"v6",qr:o}),k({ql:"vn",vm:["v5","v6","nc"]}),k({ql:"w3",vm:["v5","v6","r8"]}),k({ql:"rq",vm:["v5","v6","rm"]}),c=function(f){var r,w=f[q.w6];w!==p&&(w===a[i]?(r="vn",a[i][q.q6]="pcss-v8",a[g][q.q6]=h,a[qe][q.q6]=h):w===a[g]?(r="w3",a[i][q.q6]=h,a[g][q.q6]="pcss-v8",a[qe][q.q6]=h):w===a[qe]&&(r="rq",a[i][q.q6]=h,a[g][q.q6]=h,a[qe][q.q6]="pcss-v8"),r&&t({ql:r}))},p=u[q.vk]("pcss-vr"),a=p[q.rk]("div"),t({ql:"vn"}),p[q.nr](q.w5,c)}var qz=String,qp=Object.keys,h="",u=document,d=!1,e=Array.isArray,qt=JSON.stringify,qk=null,l=JSON.parse,qm=Date.now,qa=!0,i=0,g=1,qe=2,q1=-1,q8=window.undefined,q={nr:"addEventListener",n4:"appendChild",vv:"apply",v4:"array",rg:"bind",wu:"body",n0:"childNodes",q6:"className",w5:"click",wr:"createElement",n9:"createTextNode",nl:"cssText",qb:"disabled",vk:"getElementById",rk:"getElementsByTagName",q7:"hasOwnProperty",ry:"head",wo:"id",wj:"indexOf",v2:"join",q4:"length",wq:"nodeValue",nh:"object",qi:"push",n8:"setAttribute",q3:"sheet",va:"string",w6:"target",ny:"textContent",wv:"text",wm:"text/css",rz:"type"},q5={qs:"background",vf:"border",nq:"border-color",qc:"border-radius",np:"border-style",vd:"border-width",r1:"bottom",qo:"box-shadow",nm:"box-sizing",re:"clip",qx:"color",w0:"cursor",qh:"display",vb:"font-family",qn:"font-size",ws:"font-weight",wx:"height",wt:"left",wz:"line-height",ve:"margin",vc:"max-width",wf:"opacity",w2:"outline",nb:"overflow-y",qv:"padding",v1:"padding-top",ns:"position",vi:"right",wa:"text-align",vy:"top",r6:"vertical-align",ru:"visibility",q2:"width",r4:"z-index"},qq={qw:"0",nz:"1",vl:".25rem",q_:".5rem",qf:"1rem",n1:"1.5rem",we:"1.75rem",ne:"2rem",nx:"800",n_:"#444",vg:"#888",wg:"#aaa",nf:"#ddd",wn:"#eee",vj:"#fff",nj:"block",vt:"border-box",rj:"center",re:"clip",nd:"fixed",ng:"courier,fixed,monospace",nw:"arial,helvetica,sans-serif",vw:"inline-block",wt:"left",w7:"none",wp:"pointer",w1:"relative",vi:"right",wk:"scroll",wc:"solid",wv:"text",vy:"top",rr:"vertical"},m={na:{},v0:{},nu:{vp:{v9:{wy:i,x:{}}},vz:{},v7:{}},v_:q8,qg:q8,n5:q1};return{e4:c}}(); -------------------------------------------------------------------------------- /examples/js/pcss._ex005_.js: -------------------------------------------------------------------------------- 1 | /* pss._ex005_.js 2 | * Example 005 of run-time generated and managed CSS 3 | * PowerCSS auto update of changes 4 | * Michael S. Mikowski - mike.mikowski@gmail.com 5 | */ 6 | /*jslint browser : true, continue : true, 7 | devel : true, indent : 2, maxerr : 50, 8 | newcap : true, nomen : true, plusplus : true, 9 | regexp : true, sloppy : true, vars : false, 10 | white : true, todo : true, unparam : true 11 | */ 12 | /*global pcss */ 13 | 14 | /* I. Recommended units: rem and %. 15 | * II. Recommended order: Outside-In 16 | * 1. display, visibility, opacity, z-index 17 | * 2. box-sizing, position, floats, clear 18 | * 3. top, right, bottom, left and vertical-align 19 | * 4. margin defs, box-shadow 20 | * 5. border, border-radius 21 | * 6. height, width 22 | * 7. padding, overflow, cursor 23 | * 8. background, text-align, white-space, 24 | * 9. content defs - font-size, line-height, font, color everything else 25 | * -- break -- 26 | * 10. transition or animation definitions 27 | */ 28 | 29 | // BEGIN pcss._ex005_ 30 | pcss._ex005_ = function ( display_html ) { 31 | var 32 | palette_list, palette_idx, 33 | global_mixin_map, base_mixin_map, 34 | base_selector_list, box_selector_list, 35 | switch_selector_list, box_rule_map, 36 | switch_el, link_list, 37 | onclick_fn 38 | ; 39 | 40 | pcss._initModule_(); 41 | 42 | palette_list = [ 43 | { _palette_name_ : 'Autumn I', 44 | _color_shadow_ : '#455c4f', 45 | _color_font_ : '#59484f', 46 | _color_mid_ : '#6d7696', 47 | _color_gradtop_ : '#cc5543', 48 | _color_gradbtm_ : '#edb579', 49 | _color_bkgd_ : '#dbe6af' 50 | }, 51 | { _palette_name_ : 'Autumn II', 52 | _color_shadow_ : '#d1cec5', 53 | _color_font_ : '#997c67', 54 | _color_mid_ : '#755330', 55 | _color_gradtop_ : '#b0703c', 56 | _color_gradbtm_ : '#dba72e', 57 | _color_bkgd_ : '#e3cca1' 58 | }, 59 | { _palette_name_ : 'Tomato', 60 | _color_shadow_ : '#4a572c', 61 | _color_font_ : '#803018', 62 | _color_mid_ : '#c2c290', 63 | _color_gradtop_ : '#e87f60', 64 | _color_gradbtm_ : '#e34819', 65 | _color_bkgd_ : '#d6cfc9' 66 | }, 67 | { _palette_name_ : 'Canyon', 68 | _color_shadow_ : '#8a6e64', 69 | _color_font_ : '#6e352c', 70 | _color_mid_ : '#f59a44', 71 | _color_gradtop_ : '#cf5230', 72 | _color_gradbtm_ : '#6e612f', 73 | _color_bkgd_ : '#e3c598' 74 | }, 75 | { _palette_name_ : 'Basket', 76 | _color_shadow_ : '#e6e2df', 77 | _color_font_ : '#b2e3e8', 78 | _color_mid_ : '#452b29', 79 | _color_gradtop_ : '#966c5d', 80 | _color_gradbtm_ : '#ccb8d1', 81 | _color_bkgd_ : '#8f8172' 82 | }, 83 | { _palette_name_ : 'Fresh', 84 | _color_shadow_ : '#d9d9d9', 85 | _color_font_ : '#f5b3b4', 86 | _color_mid_ : '#d15656', 87 | _color_gradtop_ : '#94353c', 88 | _color_gradbtm_ : '#47322d', 89 | _color_bkgd_ : '#996b42' 90 | }, 91 | { _palette_name_ : 'Mineral', 92 | _color_shadow_ : '#b58bab', 93 | _color_font_ : '#694364', 94 | _color_mid_ : '#e3d1e2', 95 | _color_gradtop_ : '#cca772', 96 | _color_gradbtm_ : '#c4c4c0', 97 | _color_bkgd_ : '#e8e4e1' 98 | }, 99 | { _palette_name_ : 'Spice I', 100 | _color_shadow_ : '#c2bc74', 101 | _color_font_ : '#6e615a', 102 | _color_mid_ : '#b8b8b8', 103 | _color_gradtop_ : '#e0cdaf', 104 | _color_gradbtm_ : '#807e82', 105 | _color_bkgd_ : '#ebe3d9' 106 | }, 107 | { _palette_name_ : 'Spice III', 108 | _color_shadow_ : '#f7efd4', 109 | _color_font_ : '#eb712f', 110 | _color_mid_ : '#faddaf', 111 | _color_gradtop_ : '#91371b', 112 | _color_gradbtm_ : '#472c25', 113 | _color_bkgd_ : '#d4c2b2' 114 | }, 115 | { _palette_name_ : 'Chili', 116 | _color_shadow_ : '#283811', 117 | _color_font_ : '#5c0811', 118 | _color_mid_ : '#d94330', 119 | _color_gradtop_ : '#a68887', 120 | _color_gradbtm_ : '#66492f', 121 | _color_bkgd_ : '#b8997f' 122 | } 123 | ]; 124 | 125 | palette_idx = 0; 126 | 127 | global_mixin_map = { 128 | _10rem_ : '10rem', 129 | _global_d25_box_shadow_ : [[ 130 | ['rgba( 0, 0, 0, .5)'], '_0_', '_0_', '_d25rem_', '_0_' 131 | ]], 132 | _global_d5_box_shadow_ : [[ 133 | ['rgba( 64, 32, 32, .5)'], '_0_', '_0_', '_d5rem_', '_0_' 134 | ]], 135 | _global_linear_grad_ : [[ 136 | [ 'linear-gradient(to bottom,' ], 137 | '_color_gradtop_', [ '0%,'], '_color_gradbtm_', '_100p_', [')'] 138 | ]] 139 | }; 140 | 141 | pcss._setGlobalMixinMap_({ 142 | _mixin_map_ : global_mixin_map 143 | }); 144 | 145 | // Begin add _base_ vsheet 146 | base_mixin_map = { 147 | _base_body_font_size_ : '16px', 148 | _base_input_width_ : '10rem', 149 | _base_input_border_ : [[ '_d125rem_','_solid_','_color_bkgd_' ]] 150 | }; 151 | base_selector_list = [ 152 | { _selector_str_ : 'body', 153 | _rule_map_ : { 154 | _display_ : '_block_', 155 | _margin_ : '_0_', 156 | _padding_ : [[ '_2d5rem_', '_2rem_' ]], 157 | _background_ : '_color_bkgd_', 158 | _overflow_y_ : '_scroll_', 159 | _font_family_ : '_font_sans_', 160 | _font_size_ : '_base_body_font_size_', 161 | _color_ : '_color_font_' 162 | } 163 | }, 164 | { _selector_str_ : 'input', 165 | _rule_map_ : { 166 | _margin_ : '_d5rem_', 167 | _width_ : '_base_input_width_', 168 | _border_ : '_base_input_border_', 169 | _border_radius_ : '_d5rem_', 170 | _outline_ : '_none_', 171 | _padding_ : '_d5rem_', 172 | _background_ : '_color_mid_', 173 | _font_size_ : '_1rem_', 174 | _color_ : '_color_font_' 175 | } 176 | }, 177 | { _selector_str_ : 'input:focus', 178 | _rule_map_ : { 179 | _border_color_ : '_xfff_', 180 | _background_ : '_color_bkgd_', 181 | _color_ : '_xfff_' 182 | }, 183 | }, 184 | { _selector_str_ : '.pcss-_logo_', 185 | _rule_map_ : { 186 | _width_ : [ '20.75rem' ], 187 | _height_ : [ '10.125rem' ], 188 | _background_image_ : [ 'url(../img/pcss-25p-lt.png)' ], 189 | _background_size_ : '_cover_', 190 | } 191 | }, 192 | { _selector_str_ : '#pcss-_head_', 193 | _rule_map_ : { 194 | _position_ : '_fixed_', 195 | _z_index_ : '_1_', 196 | _top_ : '_0_', 197 | _left_ : '_0_', 198 | _right_ : '_0_', 199 | _height_ : '_2rem_', 200 | _box_shadow_ : '_global_d5_box_shadow_', 201 | _padding_ : '_0_', 202 | _background_ : '_xeee_' 203 | } 204 | } 205 | ]; 206 | 207 | pcss._setVsheet_({ 208 | _vsheet_id_ : '_base_', 209 | _mode_str_ : '_add_', 210 | _selector_list_ : base_selector_list, 211 | _mixin_map_ : base_mixin_map 212 | }); 213 | // End add _base_ vsheet 214 | 215 | // Begin add _box01_ vsheet 216 | box_selector_list = [ 217 | { _selector_str_ : '.pcss-_box_', 218 | _rule_lock_list_ : [ '_font_size_' ], 219 | _rule_map_ : { 220 | _display_ : '_inline_block_', 221 | _opacity_ : '_1_', 222 | _box_sizing_ : '_border_box_', 223 | _position_ : '_relative_', 224 | _vertical_align_ : '_top_', 225 | _margin_ : '_1rem_', 226 | _box_shadow_ : '_global_d25_box_shadow_', 227 | _border_ : [[ '_d25rem_', '_solid_', '_color_mid_' ]], 228 | _border_radius_ : '_1rem_', 229 | _width_ : [ '16rem' ], 230 | _height_ : [ '8rem' ], 231 | _padding_top_ : '_1rem_', 232 | _background_ : '_global_linear_grad_', 233 | _font_size_ : '_1d5rem_', 234 | _font_weight_ : '_800_', 235 | _color_ : '_xfff_', 236 | _text_align_ : '_center_' 237 | } 238 | } 239 | ]; 240 | 241 | pcss._setVsheet_({ 242 | _vsheet_id_ : '_box01_', 243 | _mode_str_ : '_add_', 244 | _selector_list_ : box_selector_list 245 | }); 246 | // End add _box01_ vsheet 247 | 248 | // Begin add _box02_ vsheet by *revising* box_selector_list 249 | box_rule_map = box_selector_list[ 0 ]._rule_map_; 250 | pcss._extendRuleMap_( box_rule_map, { 251 | _display_ : '_block_', 252 | _width_ : null, 253 | _max_width_ : [ '32rem' ], 254 | _font_size_ : '_2rem_', 255 | _box_shadow_ : '_global_d5_box_shadow_', 256 | _background_ : '_global_linear_grad_' 257 | }); 258 | 259 | pcss._setVsheet_({ 260 | _vsheet_id_ : '_box02_', 261 | _mode_str_ : '_add_', 262 | _selector_list_ : box_selector_list 263 | }); 264 | // End add _box02_ vsheet by *revising* box_selector_list 265 | 266 | // Begin add _box03_ vsheet by *revising* box_selector_list 267 | pcss._extendRuleMap_( box_rule_map, { 268 | _display_ : '_inline_block_', 269 | _width_ : [ '18rem' ], 270 | _max_width_ : null, 271 | _box_shadow_ : '_global_d25_box_shadow_', 272 | _border_width_ : '_1rem_', 273 | _border_radius_ : '_0_', 274 | _padding_top_ : '_d5rem_', 275 | _height_ : '_10rem_', 276 | _font_family_ : '_font_fixed_', 277 | _font_size_ : '_1d75rem_', 278 | _background_ : '_global_linear_grad_' 279 | }); 280 | 281 | pcss._setVsheet_({ 282 | _vsheet_id_ : '_box03_', 283 | _mode_str_ : '_add_', 284 | _selector_list_ : box_selector_list 285 | }); 286 | // End add _box03_ vsheet by *revising* box_selector_list 287 | 288 | // Begin add _switch_ vsheet 289 | switch_selector_list = [ 290 | { _selector_str_ : '#pcss-_switch_', 291 | _rule_map_ : { 292 | _position_ : '_fixed_', 293 | _z_index_ : '_1_', 294 | _top_ : '_0_', 295 | _right_ : '_0_', 296 | _box_shadow_ : box_rule_map._box_shadow_, 297 | _border_color_ : '_color_bkgd_', 298 | _border_radius_ : [[ '_0_','_0_','_0_','_1rem_' ]], 299 | _border_style_ : '_solid_', 300 | _border_width_ : [[ '_0_', '_0_', '_d125rem_', '_d125rem_' ]], 301 | _padding_ : '_1rem_', 302 | _padding_top_ : '_d5rem_', 303 | _background_ : '_color_mid_', 304 | _line_height_ : '_1d5rem_' 305 | } 306 | }, 307 | { _selector_str_ : '#pcss-_switch_ div', 308 | _rule_map_ : { 309 | _margin_ : '_d25rem_', 310 | _padding_ : '_d25rem_', 311 | _border_radius_ : '_d25rem_', 312 | _cursor_ : '_pointer_' 313 | } 314 | }, 315 | { _selector_str_ : '#pcss-_switch_ div.pcss-_x_select_', 316 | _rule_map_ : { 317 | _background_ : '_color_bkgd_', 318 | _color_ : '_xfff_' 319 | } 320 | } 321 | ]; 322 | 323 | pcss._setVsheet_({ 324 | _vsheet_id_ : '_switch_', 325 | _mode_str_ : '_add_', 326 | _selector_list_ : switch_selector_list 327 | }); 328 | // End add _switch_ vsheet 329 | 330 | // Begin create cascades to toggle 331 | pcss._setCascade_({ 332 | _cascade_id_ : '_c01_', 333 | _mode_str_ : '_add_', 334 | _vsheet_id_list_ : [ '_base_', '_switch_', '_box01_' ] 335 | }); 336 | 337 | pcss._setCascade_({ 338 | _cascade_id_ : '_c02_', 339 | _mode_str_ : '_add_', 340 | _vsheet_id_list_ : [ '_base_', '_switch_', '_box02_' ] 341 | }); 342 | 343 | pcss._setCascade_({ 344 | _cascade_id_ : '_c03_', 345 | _mode_str_ : '_add_', 346 | _vsheet_id_list_ : [ '_base_', '_switch_', '_box03_' ] 347 | }); 348 | // End create cascades to toggle 349 | 350 | // Begin onclick handler 351 | onclick_fn = function ( event_obj ) { 352 | var 353 | target_el = event_obj.target, 354 | cascade_id 355 | ; 356 | 357 | if ( target_el === switch_el ) { return; } 358 | if ( target_el === link_list[ 0 ] ) { 359 | cascade_id = '_c01_'; 360 | link_list[ 0 ].className = 'pcss-_x_select_'; 361 | link_list[ 1 ].className = ''; 362 | link_list[ 2 ].className = ''; 363 | } 364 | else if ( target_el === link_list[ 1 ] ) { 365 | cascade_id = '_c02_'; 366 | link_list[ 0 ].className = ''; 367 | link_list[ 1 ].className = 'pcss-_x_select_'; 368 | link_list[ 2 ].className = ''; 369 | } 370 | else if ( target_el === link_list[ 2 ] ) { 371 | cascade_id = '_c03_'; 372 | link_list[ 0 ].className = ''; 373 | link_list[ 1 ].className = ''; 374 | link_list[ 2 ].className = 'pcss-_x_select_'; 375 | } 376 | if ( cascade_id ) { 377 | pcss._setCascade_({ 378 | _cascade_id_ : cascade_id, 379 | _mode_str_ : '_change_', 380 | _regen_type_ : '_use_' 381 | }); 382 | } 383 | }; 384 | // End onclick handler 385 | 386 | // Begin init 387 | function fn_set_palette () { 388 | if ( palette_idx >= palette_list.length ) { 389 | palette_idx = 0; 390 | } 391 | pcss._extendRuleMap_( base_mixin_map, palette_list[ palette_idx ] ); 392 | pcss._setVsheet_({ 393 | _vsheet_id_ : '_base_', 394 | _mode_str_ : '_change_', 395 | _mixin_map_ : base_mixin_map, 396 | _regen_type_ : '_all_' 397 | }); 398 | palette_idx++; 399 | } 400 | 401 | fn_set_palette(); 402 | pcss._setCascade_({ 403 | _cascade_id_ : '_c01_', 404 | _mode_str_ : '_change_', 405 | _regen_type_ : '_use_' 406 | }); 407 | 408 | switch_el = document.getElementById( 'pcss-_switch_' ); 409 | link_list = switch_el.getElementsByTagName( 'div' ); 410 | switch_el.addEventListener( 'click', onclick_fn ); 411 | 412 | setInterval( fn_set_palette, 5000 ); 413 | // End init 414 | }; 415 | // END pcss._ex005_ 416 | 417 | /** Color palettes thanks to: 418 | * DuoParadigms Public Relations & Design, Inc. 419 | * http://www.duoparadigms.com/2013/10/11/10-color-palettes-perfect-autumnfall-season/ 420 | * 10 Color Palettes (and HEX Codes) Perfect for the Autumn/Fall Season 421 | * Posted by Aaress Lawless | Tags: Graphic Design 422 | * Call Us: 832-387-4693 423 | */ 424 | 425 | -------------------------------------------------------------------------------- /examples/js/pcss._home_.js: -------------------------------------------------------------------------------- 1 | /* 2 | * pss._home_.js 3 | * PowerCSS - run-time generated and managed CSS 4 | */ 5 | /*jslint browser : true, continue : true, 6 | devel : true, indent : 2, maxerr : 50, 7 | newcap : true, nomen : true, plusplus : true, 8 | regexp : true, sloppy : true, vars : false, 9 | white : true, todo : true, unparam : true 10 | */ 11 | /*global pcss, jQuery */ 12 | 13 | /* I. Recommended units: rem and %. 14 | * II. Recommended order: Outside-In 15 | * 1. display, visibility, opacity, z-index 16 | * 2. box-sizing, position, floats, clear 17 | * 3. top, right, bottom, left and vertical-align 18 | * 4. margin defs, box-shadow 19 | * 5. border, border-radius 20 | * 6. height, width 21 | * 7. padding, overflow, cursor 22 | * 8. background, text-align, white-space, 23 | * 9. content defs - font-size, line-height, font, color everything else 24 | * -- break -- 25 | * 10. transition or animation definitions 26 | */ 27 | 28 | pcss._home_ = (function ( $ ) { 29 | // ================= BEGIN MODULE SCOPE VARIABLES ==================== 30 | 'use strict'; 31 | var 32 | __null = null, 33 | __blank = '', 34 | __0 = 0, 35 | __1 = 1, 36 | 37 | topSmap = { 38 | _cascade_id_ : '_c01_', 39 | _cascade_id_list_ : [], 40 | _palette_idx_ : __0, 41 | _palette_map_ : {} 42 | }, 43 | topCmap = { 44 | _debounce_ms_ : 250, 45 | _font_list_list_ : [ 46 | [ 'fa-4-5-mod-msm', 'font/' ], 47 | [ 'Sansation-Regular', 'font/vendor/Sansation/' ] 48 | ], 49 | 50 | _font_src_tmplt_ : "url('{_font_path_}.eot?iefix=1')" 51 | + " format('embedded-opentype')," 52 | + "url('{_font_path_}.woff') format('woff')," 53 | + "url('{_font_path_}.ttf') format('truetype')," 54 | + "url('{_font_path_}.svg') format('svg')", 55 | 56 | _global_mixin_map_ : { 57 | _logo_url_ : 'url(img/pcss-25p-lt.png)', 58 | _shadow_d1875_ : [[ 59 | '_hex_shadow_', '_0_', '_0_', '_d125rem_', '_d0625rem_' 60 | ]], 61 | _shadow_d625_ : [[ 62 | '_hex_shadow_', '_0_', '_0_', '_d5rem_', '_0_' 63 | ]], 64 | _font_family_awesome_ : 'fa-4-5-mod-msm, sans-serif', 65 | _font_family_arial_ : 'Arial, Helvetica, sans-serif', 66 | _font_family_sansation_ : 'Sansation-Regular, sans-serif', 67 | _font_size_ : '16px', 68 | _trans_short_ : 'all .2s ease', 69 | _trans_mid_ : 'all .4s ease', 70 | _trans_long_ : 'all .5s ease', 71 | _linear_grad_01_ : [[ 72 | [ 'linear-gradient(to bottom,' ], 73 | '_hex_gradtop_', [ '0%,' ], '_hex_gradbtm_', '_100p_', [')'] 74 | ]] 75 | }, 76 | _local_idx_key_ : 'pcss-_palette_idx_', 77 | _palette_list_ : [ 78 | { _palette_name_ : 'Newspaper', 79 | _hex_bright_ : '#ececec', 80 | _hex_shadow_ : '#373737', 81 | _hex_font_ : '#373737', 82 | _hex_mid_ : '#666', 83 | _hex_link_ : '#046273', 84 | _hex_gradtop_ : '#046273', 85 | _hex_link_dk_ : '#02353e', 86 | _hex_gradbtm_ : '#02353e', 87 | _hex_bkgd_ : '#ececec', 88 | _hex_bkgd_dk_ : '#666', 89 | _logo_url_ : 'url(img/pcss-25p-np.png)' 90 | }, 91 | { _palette_name_ : 'Basket', 92 | _hex_bright_ : '#452b29', 93 | _hex_shadow_ : '#e6e2df', 94 | _hex_font_ : '#e6e2df', 95 | _hex_mid_ : '#8f8172', 96 | _hex_link_ : '#98899c', 97 | _hex_gradtop_ : '#98899c', 98 | _hex_link_dk_ : '#736078', 99 | _hex_gradbtm_ : '#736078', 100 | _hex_bkgd_ : '#452b29', 101 | _hex_bkgd_dk_ : '#704643', 102 | _logo_url_ : 'url(img/pcss-25p-basket.png)' 103 | }, 104 | { _palette_name_ : 'Invert', 105 | _hex_bright_ : '#131b22', 106 | _hex_shadow_ : '#c0c8d0', 107 | _hex_font_ : '#c0c8d8', 108 | _hex_mid_ : '#9199a1', 109 | _hex_link_ : '#8ccbfb', 110 | _hex_gradtop_ : '#8ccbfb', 111 | _hex_link_dk_ : '#c1e3fd', 112 | _hex_gradbtm_ : '#c1e3fd', 113 | _hex_bkgd_ : '#131b22', 114 | _hex_bkgd_dk_ : '#9199a1', 115 | _logo_url_ : 'url(img/pcss-25p-dk.png)' 116 | }, 117 | { _palette_name_ : 'Autumn I', 118 | _hex_bright_ : '#fff', 119 | _hex_shadow_ : '#6d7696', 120 | _hex_font_ : '#59484f', 121 | _hex_mid_ : '#455c4f', 122 | _hex_link_ : '#cc5543', 123 | _hex_gradtop_ : '#cc5543', 124 | _hex_link_dk_ : '#b32914', 125 | _hex_gradbtm_ : '#edb579', 126 | _hex_bkgd_ : '#dbe6af', 127 | _hex_bkgd_dk_ : '#9aa278' 128 | }, 129 | { _palette_name_ : 'Autumn II', 130 | _hex_bright_ : '#fff', 131 | _hex_shadow_ : '#d1cec5', 132 | _hex_font_lt_ : '#997c67', 133 | _hex_font_ : '#6a5647', 134 | _hex_mid_ : '#755330', 135 | _hex_link_ : '#b0703c', 136 | _hex_gradtop_ : '#b0703c', 137 | _hex_link_dk_ : '#96541e', 138 | _hex_gradbtm_ : '#dba72e', 139 | _hex_bkgd_ : '#e3cca1', 140 | _hex_bkgd_dk_ : '#bdaa86' 141 | }, 142 | { _palette_name_ : 'Tomato', 143 | _hex_bright_ : '#fff', 144 | _hex_shadow_ : '#4a572c', 145 | _hex_font_ : '#803018', 146 | _hex_mid_ : '#c2c290', 147 | _hex_link_ : '#e87f60', 148 | _hex_gradtop_ : '#e87f60', 149 | _hex_link_dk_ : '#e34819', 150 | _hex_gradbtm_ : '#e34819', 151 | _hex_bkgd_ : '#d6cfc9', 152 | _hex_bkgd_dk_ : '#bab4af' 153 | }, 154 | { _palette_name_ : 'Canyon', 155 | _hex_bright_ : '#fff', 156 | _hex_shadow_ : '#8a6e64', 157 | _hex_font_ : '#6e352c', 158 | _hex_mid_ : '#f59a44', 159 | _hex_link_ : '#cf5230', 160 | _hex_gradtop_ : '#cf5230', 161 | _hex_link_dk_ : '#af3210', 162 | _hex_gradbtm_ : '#96884f', 163 | _hex_bkgd_ : '#e3c598', 164 | _hex_bkgd_dk_ : '#c2a882' 165 | }, 166 | { _palette_name_ : 'Fresh', 167 | _hex_bright_ : '#ffffdb', 168 | _hex_shadow_ : '#d9d9d9', 169 | _hex_font_ : '#ffe3c4', 170 | _hex_mid_ : '#d15656', 171 | _hex_link_ : '#94353c', 172 | _hex_gradtop_ : '#94353c', 173 | _hex_link_dk_ : '#47322d', 174 | _hex_gradbtm_ : '#47322d', 175 | _hex_bkgd_ : '#996b42', 176 | _hex_bkgd_dk_ : '#7a4c22' 177 | }, 178 | { _palette_name_ : 'Mineral', 179 | _hex_bright_ : '#e8e4e1', 180 | _hex_shadow_ : '#694364', 181 | _hex_font_ : '#54384d', 182 | _hex_font_lt_ : '#b58bab', 183 | _hex_mid_ : '#e3d1e2', 184 | _hex_link_ : '#54384d', 185 | _hex_gradtop_ : '#54384d', 186 | _hex_link_dk_ : '#8b8b8f', 187 | _hex_gradbtm_ : '#8b8b8f', 188 | _hex_bkgd_ : '#cca772', 189 | _hex_bkgd_dk_ : '#a17f4f', 190 | _logo_url_ : 'url(img/pcss-25p-mineral.png)' 191 | }, 192 | { _palette_name_ : 'Spice I', 193 | _hex_bright_ : '#fff6eb', 194 | _hex_shadow_ : '#ebe3d9', 195 | _hex_font_ : '#472c00', 196 | _hex_link_ : '#472c00', 197 | _hex_font_lt_ : '#e0cdaf', 198 | _hex_mid_ : '#c2bc74', 199 | _hex_gradtop_ : '#6e615a', 200 | _hex_link_dk_ : '#807e82', 201 | _hex_gradbtm_ : '#807e82', 202 | _hex_bkgd_ : '#b8b8b8', 203 | _hex_bkgd_dk_ : '#9c9c9c' 204 | }, 205 | { _palette_name_ : 'Spice III', 206 | _hex_bright_ : '#fff', 207 | _hex_shadow_ : '#f7efd4', 208 | _hex_font_ : '#472c25', 209 | _hex_link_ : '#472c25', 210 | _hex_font_lt_ : '#faddaf', 211 | _hex_mid_ : '#eb712f', 212 | _hex_gradtop_ : '#91371b', 213 | _hex_link_dk_ : '#baa18a', 214 | _hex_gradbtm_ : '#baa18a', 215 | _hex_bkgd_ : '#d4c2b2', 216 | _hex_bkgd_dk_ : '#baa18a' 217 | }, 218 | { _palette_name_ : 'Chili', 219 | _hex_bright_ : '#eeffec', 220 | _hex_shadow_ : '#eeffd5', 221 | _hex_shadow_dk_ : '#283811', 222 | _hex_font_ : '#ffd1a7', 223 | _hex_font_lt_ : '#66492f', 224 | _hex_mid_ : '#b8997f', 225 | _hex_gradtop_ : '#a68887', 226 | _hex_link_ : '#a68887', 227 | _hex_gradbtm_ : '#866663', 228 | _hex_link_dk_ : '#866663', 229 | _hex_bkgd_ : '#5c0811', 230 | _hex_bkgd_dk_ : '#7a2d36', 231 | _logo_url_ : 'url(img/pcss-25p-dk.png)' 232 | } 233 | ], 234 | _base_selector_list_ : [ 235 | { _selector_str_ : 'html', 236 | _rule_map_ : { 237 | _font_family_ : '_font_family_arial_', 238 | _font_size_ : '_font_size_', 239 | _color_ : '_hex_font_', 240 | _background_ : '_hex_bkgd_' 241 | } 242 | }, 243 | { _selector_str_ : 'body', 244 | _rule_map_ : { 245 | _display_ : '_block_', 246 | _margin_ : '_0_', 247 | _background_ : '_hex_bkgd_dk_', 248 | _color_ : '_hex_font_', 249 | _overflow_x_ : '_hidden_' 250 | } 251 | }, 252 | { _selector_str_ : '*', 253 | _rule_map_ : { 254 | __moz_box_sizing_ : '_border_box_', 255 | _box_sizing_ : '_border_box_', 256 | _float_ : '_none_', 257 | _margin_ : '_0_', 258 | _clip_ : '_auto_', 259 | _height_ : '_auto_', 260 | _width_ : '_auto_', 261 | _padding_ : '_0_', 262 | _line_height_ : '_inherit_', 263 | _vertical_align_ : '_inherit_', 264 | _font_family_ : '_inherit_', 265 | _font_size_ : '_inherit_', 266 | _font_weight_ : '_inherit_', 267 | _font_style_ : '_inherit_', 268 | _text_decoration_ : '_inherit_', 269 | _color_ : '_inherit_', 270 | _background_color_ : '_transparent_', 271 | _outline_ : '_transparent_', 272 | 273 | __webkit_user_select_ : '_inherit_', 274 | __moz_user_select_ : '_inherit_', 275 | __o_user_select_ : '_inherit_', 276 | _user_select_ : '_inherit_' 277 | } 278 | }, 279 | 280 | { _selector_str_ : '::-webkit-input-placeholder', 281 | _rule_map_ : { _color_ : '_hex_mid_' } 282 | }, 283 | { _selector_str_ : '::-moz-placeholder', 284 | _rule_map_ : { 285 | _color_ : '_hex_mid_', 286 | _opacity_ : '_1_' 287 | } 288 | }, 289 | { _selector_str_ : '::-ms-input-placeholder', 290 | _rule_map_ : { _color_ : '_hex_mid_' } 291 | }, 292 | { _selector_str_ : 'section', 293 | _rule_map_ : { _margin_bottom_ : '_3rem_' } 294 | }, 295 | { _selector_str_ : 'p', 296 | _rule_map_ : { 297 | _margin_bottom_ : '_d75rem_', 298 | _line_height_ : '_1d75rem_' 299 | } 300 | }, 301 | { _selector_str_ : 'ul,ol', 302 | _rule_map_ : { _margin_left_ : '_4rem_' } 303 | }, 304 | { _selector_str_ : 'li', 305 | _rule_map_ : { 306 | _line_height_ : '_1d75rem_', 307 | _margin_bottom_ : '_d5rem_' 308 | } 309 | }, 310 | { _selector_str_ : 'a', 311 | _rule_map_ : { 312 | _display_ : '_inline_block_', 313 | _margin_ : [[ '_0_', '_d25rem_' ]], 314 | _height_ : '_1d5rem_', 315 | _line_height_ : '_1d5rem_', 316 | _border_radius_ : '_d25rem_', 317 | _padding_ : [[ '_0_', '_d375rem_' ]], 318 | _color_ : '_hex_link_', 319 | _background_ : '_hex_bright_', 320 | _text_decoration_ : '_none_', 321 | _box_shadow_ : '_shadow_d1875_' 322 | } 323 | }, 324 | { _selector_str_ : 'a:hover', 325 | _rule_map_ : { 326 | _background_ : '_hex_link_dk_', 327 | _color_ : '_hex_bright_', 328 | _text_decoration_ : '_underline_' 329 | } 330 | }, 331 | { _selector_str_ : 'code,pre', 332 | _rule_map_ : { 333 | _margin_ : [[ '_0_', '_d25rem_' ]], 334 | _line_height_ : '_1d5rem_', 335 | _border_radius_ : '_d25rem_', 336 | _padding_ : [[ '_0_', '_d375rem_' ]], 337 | _font_family_ : '_font_fixed_', 338 | _color_ : '_hex_bright_', 339 | _background_ : '_hex_bkgd_dk_', 340 | _font_weight_ : '_800_' 341 | } 342 | }, 343 | { _selector_str_ : 'code', 344 | _rule_map_ : { 345 | _display_ : '_inline_block_' 346 | } 347 | }, 348 | { _selector_str_ : 'pre', 349 | _rule_map_ : { 350 | _margin_ : [[ '_0_', '_4rem_' ]], 351 | _padding_ : [[ '_d5rem_', '_1rem_' ]], 352 | _overflow_x_ : '_auto_', 353 | _overflow_y_ : '_auto_' 354 | } 355 | }, 356 | { _selector_str_ : 'strong', 357 | _rule_map_ : { _font_weight_ : '_800_' } 358 | }, 359 | { _selector_str_ : 'i', 360 | _rule_map_ : { _font_style_ : '_italic_' } 361 | }, 362 | 363 | /* Begin .pcss-_x_*_ selectors */ 364 | { _selector_str_ : '.pcss-_x_noselect_', 365 | _rule_map_ : { 366 | __webkit_user_select_ : '_none_', 367 | __moz_user_select_ : '_none_', 368 | __o_user_select_ : '_none_', 369 | _user_select_ : '_none_' 370 | } 371 | }, 372 | { _selector_str_ : '.pcss-_x_fa_icon_', 373 | _rule_map_ : { 374 | _font_family_ : '_font_family_awesome_', 375 | _font_weight_ : '_400_' 376 | } 377 | }, 378 | { _selector_str_ : 'h1 .pcss-_x_fa_icon_, h2 .pcss-_x_fa_icon_', 379 | _rule_map_ : { 380 | _display_ : '_inline_block_', 381 | _margin_right_ : '_d625rem_', 382 | _width_ : '_2rem_', 383 | _text_align_ : '_center_', 384 | _font_size_ : '_1d75rem_', 385 | _line_height_ : '_1d75rem_' 386 | } 387 | }, 388 | { _selector_str_ : '.pcss-_logo_', 389 | _rule_map_ : { 390 | _margin_ : [[ '_0_', '_auto_', '_d625rem_', '_auto_' ]], 391 | _background_image_ : '_logo_url_', 392 | _background_size_ : '_cover_', 393 | _width_ : [ '20.75rem' ], 394 | _height_ : [ '10.125rem' ] 395 | } 396 | }, 397 | { _selector_str_ : '.pcss-_byline_', 398 | _rule_map_ : { 399 | _font_family_ : '_font_family_sansation_', 400 | _font_size_ : '_1d25rem_', 401 | _font_weight_ : '_800_', 402 | _text_align_ : '_center_' 403 | } 404 | }, 405 | { _selector_str_ : '.pcss-_x_clearfloat_', 406 | _rule_map_ : { 407 | _visibility_ : '_hidden_', 408 | _float_ : '_none_', 409 | _height_ : '_0_', 410 | _clear_ : '_both_' 411 | } 412 | }, 413 | { _selector_str_: '@keyframes spinIt {' 414 | + '100%{transform:rotate(360deg);}}' 415 | }, 416 | { _selector_str_ : '.pcss-_x_spin_', 417 | _rule_map_ : { 418 | _display_ : '_none_', 419 | _position_ : '_absolute_', 420 | _top_ : '_50p_', 421 | _left_ : '_50p_', 422 | _margin_left_ : [ '-2rem' ], 423 | _margin_right_ : [ '-2rem' ], 424 | _height_ : '_4rem_', 425 | _line_height_ : '_4rem_', 426 | _font_size_ : '_4rem_', 427 | _width_ : '_4rem_', 428 | _text_align_ : '_center_', 429 | _font_family_ : '_font_family_awesome_', 430 | _animation_ : [ 'spinIt 1s linear infinite' ] 431 | } 432 | }, 433 | { _selector_str_ : '.pcss-_x_spin_.pcss-_x_active_', 434 | _rule_map_ : { _display_ : '_block_' } 435 | }, 436 | /* End .pcss-_x_*_ selectors */ 437 | 438 | { _selector_str_ : '.pcss-_head_', 439 | _rule_map_ : { 440 | _display_ : '_block_', 441 | _position_ : '_fixed_', 442 | _z_index_ : '_1_', 443 | _top_ : '_0_', 444 | _right_ : '_0_', 445 | _border_radius_ : [[ '_0_', '_0_', '_0_', '_d5rem_' ]], 446 | _height_ : '_2rem_', 447 | _box_shadow_ : '_shadow_d625_', 448 | _background_ :'_hex_gradtop_' 449 | } 450 | }, 451 | { _selector_str_ : '.pcss-_head_float_', 452 | _rule_map_ : { 453 | _position_ : '_relative_', 454 | _float_ : '_right_', 455 | _border_radius_ : [[ '_0_', '_0_', '_d5rem_', '_d5rem_' ]], 456 | _padding_ : [[ '_0_', '_d75rem_', '_d75rem_' ]], 457 | _height_ : '_1d75rem_', 458 | _line_height_ : '_2rem_', 459 | _overflow_ : '_hidden_', 460 | _cursor_ : '_pointer_', 461 | _color_ : '_hex_bright_', 462 | _background_ : '_hex_gradtop_', 463 | _transition_ : [ 'all .5s ease' ] 464 | } 465 | }, 466 | { _selector_str_ : '.pcss-_head_float_.pcss-_x_active_', 467 | _rule_map_ : { 468 | _height_ : '_auto_', 469 | _box_shadow_ : '_shadow_d625_' 470 | } 471 | }, 472 | { _selector_str_ : '.pcss-_head_float_ > div', 473 | _rule_map_ : { 474 | _border_radius_ : '_d25rem_', 475 | _padding_ : [['_0_','_d5rem_']] 476 | } 477 | }, 478 | { _selector_str_ : '.pcss-_head_float_ > div:first-child', 479 | _rule_map_ : { _font_weight_ : '_800_' } 480 | }, 481 | { _selector_str_ : '.pcss-_head_float_ > div.pcss-_x_select_', 482 | _rule_map_ : { 483 | _background_ : '_hex_gradbtm_' 484 | } 485 | }, 486 | { _selector_str_ : '.pcss-_content_', 487 | _rule_map_ : { 488 | _position_ : '_relative_', 489 | _padding_ : [[ '_3rem_', '_3d5rem_' ]], 490 | _max_width_ : [ '72rem' ], 491 | _margin_ : [[ '_0_', '_auto_' ]], 492 | _background_ : '_hex_bkgd_', 493 | _box_shadow_ : '_shadow_d625_' 494 | } 495 | }, 496 | { _selector_str_ : '.pcss-_alt_clearfloat_', 497 | _rule_map_ : { 498 | _visibility_ : '_hidden_', 499 | _float_ : '_none_', 500 | _height_ : '_0_' 501 | } 502 | }, 503 | { _begin_cond_str_ : '@media all and (max-width: 650px)' }, 504 | { _selector_str_ : '.pcss-_head_', 505 | _rule_map_ : { 506 | _left_ : '_0_', 507 | _border_radius_ : '_0_' 508 | } 509 | }, 510 | { _selector_str_ : '.pcss-_content_', 511 | _rule_map_ : { 512 | _left_ : '_0_', 513 | _padding_ : [[ '_3rem_', '_1d5rem_' ]] 514 | } 515 | }, 516 | { _selector_str_ : 'ul,ol', 517 | _rule_map_ : { _margin_left_ : '_2rem_' } 518 | }, 519 | { _selector_str_ : 'pre', 520 | _rule_map_ : { 521 | _margin_ : [[ '_0_', '_1rem_', '_1rem_', '_1rem_' ]] 522 | } 523 | }, 524 | { _end_cond_str_ : __blank } 525 | ], 526 | // end _base_selector_list_ 527 | _box_selector_list_ : [ 528 | { _selector_str_ : 'h1,h2', 529 | _rule_lock_list_ : [ '_font_size_' ], 530 | _rule_map_ : { 531 | _display_ : '_inline_block_', 532 | _opacity_ : '_1_', 533 | _position_ : '_relative_', 534 | _margin_ : [[ '_0_', '_0_', '_1d5rem_', [ '-4.5rem' ] ]], 535 | _padding_ : [[ '_d625rem_', '_2rem_' ]], 536 | _vertical_align_ : '_top_', 537 | _box_shadow_ : '_shadow_d625_', 538 | _border_ : '_0_', 539 | _border_radius_ : [[ '_0_', '_1rem_', '_1rem_', '_0_' ]], 540 | _line_height_ : '_2rem_', 541 | _background_ : '_linear_grad_01_', 542 | _font_family_ : '_font_family_sansation_', 543 | _font_size_ : '_1d5rem_', 544 | _font_weight_ : '_800_', 545 | _color_ : '_hex_bright_', 546 | _text_align_ : '_left_' 547 | } 548 | }, 549 | { _selector_str_ : 'h1', 550 | _rule_map_ : { 551 | _margin_top_ : [ '-3rem' ], 552 | _border_radius_ : [[ '_0_', '_0_', '_1rem_', '_0_' ]] 553 | } 554 | }, 555 | { _selector_str_ : 'h3', 556 | _rule_map_ : { 557 | _margin_bottom_ : '_d75rem_', 558 | _font_size_ : '_1d25rem_', 559 | _font_weight_ : '_800_', 560 | _color_ : '_hex_gradtop_' 561 | } 562 | }, 563 | { _begin_cond_str_ : '@media all and (max-width: 650px)' }, 564 | { _selector_str_ : 'h2,h2', 565 | _rule_map_ : { 566 | _margin_ : [[ '_0_', '_0_', '_1d5rem_', [ '-3.25rem' ] ]] 567 | } 568 | }, 569 | { _selector_str_ : 'h1', 570 | _rule_map_ : { 571 | _border_radius_ : [[ '_0_', '_1rem_', '_1rem_', '_0_' ]], 572 | _margin_ : [[ '_1rem_', '_0_', '_1d5rem_', [ '-2.5rem' ] ]] 573 | } 574 | }, 575 | { _end_cond_str_ : __blank } 576 | ] 577 | // end _box_selector_list_ 578 | }, 579 | // end topCmap 580 | 581 | jqueryMap = {}, 582 | 583 | fillTmplt 584 | ; 585 | // ================== END MODULE SCOPE VARIABLES ===================== 586 | 587 | // ===================== BEGIN UTILITY METHODS ======================= 588 | fillTmplt = (function () { 589 | function lookupFn ( match_str, lookup_name ) { 590 | var 591 | lookup_map = this, 592 | return_data = lookup_name && lookup_map 593 | ; 594 | lookup_name.split('.').forEach( 595 | function ( key_name ) { 596 | return_data = return_data && return_data[ key_name ]; 597 | } 598 | ); 599 | return ( return_data === undefined ) ? __blank : return_data; 600 | } 601 | 602 | function mainFn ( arg_map ) { 603 | var 604 | input_str = arg_map._input_str_, 605 | lookup_map = arg_map._lookup_map_, 606 | tmplt_rx = /\{([^\{\}]+[^\\])\}/g, 607 | bound_fn = lookupFn.bind( lookup_map ) 608 | ; 609 | return input_str.replace( tmplt_rx, bound_fn ); 610 | } 611 | 612 | return mainFn; 613 | }()); 614 | 615 | function makeFontSelectorList () { 616 | var 617 | font_list_list = topCmap._font_list_list_, 618 | font_count = font_list_list.length, 619 | font_sel_list = [], 620 | pad_str = __blank, 621 | 622 | i, font_list, font_name, 623 | font_path, src_str, 624 | selector_map 625 | ; 626 | 627 | for ( i = __0; i < font_count; i++ ) { 628 | font_list = font_list_list[ i ]; 629 | font_name = font_list[ __0 ]; 630 | font_path = font_list[ __1 ]; 631 | 632 | src_str = fillTmplt({ 633 | _input_str_ : topCmap._font_src_tmplt_, 634 | _lookup_map_ : { 635 | _font_name_ : font_name, 636 | _font_path_ : font_path + font_name 637 | } 638 | }); 639 | 640 | // Adding white-space to the selector makes it unique, which 641 | // allows us to add multiple @font-face rules. 642 | selector_map = { _selector_str_ : pad_str + '@font-face', 643 | _rule_map_ : { 644 | _font_family_ : [ font_name ], 645 | _src_ : [ src_str ] 646 | } 647 | }; 648 | font_sel_list.push( selector_map ); 649 | pad_str += ' '; 650 | } 651 | return font_sel_list; 652 | } 653 | // ====================== END UTILITY METHODS ======================== 654 | 655 | // ======================= BEGIN DOM METHODS ========================= 656 | // Begin DOM method /setJqueryMap/ 657 | function setJqueryMap () { 658 | var 659 | $head = $( '.pcss-_head_' ), 660 | $head_float_list = $head.find( '.pcss-_head_float_' ) 661 | ; 662 | 663 | jqueryMap = { 664 | _$head_ : $head, 665 | _$head_float_list_ : $head_float_list, 666 | _$head_cascade_ : $head_float_list.eq(__0), 667 | _$head_palette_ : $head_float_list.eq(__1) 668 | }; 669 | } 670 | // End DOM method /setJqueryMap/ 671 | 672 | // Begin DOM method /getPaletteIdx/ 673 | function getPaletteIdx ( palette_count ) { 674 | var 675 | local_key = topCmap._local_idx_key_, 676 | palette_idx; 677 | 678 | if ( localStorage && localStorage.hasOwnProperty( local_key ) ) { 679 | palette_idx = parseInt( localStorage[ local_key ], 10 ); 680 | palette_idx++; 681 | } 682 | if ( isNaN( palette_idx ) ) { 683 | palette_idx = Math.floor( palette_count * Math.random()); 684 | } 685 | if ( palette_idx >= palette_count ) { palette_idx = __0; } 686 | 687 | if ( localStorage ) { localStorage[ local_key ] = palette_idx; } 688 | 689 | return palette_idx; 690 | } 691 | // End DOM method /getPaletteIdx/ 692 | // 693 | // Begin DOM method /setStyle/ 694 | function setStyle( arg_palette_map ) { 695 | var 696 | font_selector_list = makeFontSelectorList(), 697 | palette_list = topCmap._palette_list_, 698 | box_selector_list = topCmap._box_selector_list_, 699 | 700 | palette_map, 701 | h1h2_rule_map, h1_rule_map, 702 | small_h1h2_map, small_h1_map 703 | ; 704 | 705 | palette_map = ( typeof arg_palette_map === 'object' ) 706 | ? arg_palette_map : palette_list[ __0 ]; 707 | 708 | // Set global mixin map 709 | pcss._setGlobalMixinMap_({ 710 | _mixin_map_ : topCmap._global_mixin_map_, 711 | _regen_type_ : '_none_' 712 | }); 713 | 714 | // Add font vsheet 715 | pcss._setVsheet_({ 716 | _vsheet_id_ : '_font_', 717 | _mode_str_ : '_add_', 718 | _selector_list_ : font_selector_list, 719 | _regen_type_ : '_none_' 720 | }); 721 | 722 | // Add base vsheet 723 | pcss._setVsheet_({ 724 | _vsheet_id_ : '_base_', 725 | _mode_str_ : '_add_', 726 | _selector_list_ : topCmap._base_selector_list_, 727 | _regen_type_ : '_none_' 728 | }); 729 | 730 | // Add box01 vsheet 731 | pcss._setVsheet_({ 732 | _vsheet_id_ : '_box01_', 733 | _mode_str_ : '_add_', 734 | _selector_list_ : box_selector_list, 735 | _regen_type_ : '_none_' 736 | }); 737 | 738 | // Begin add _box02_ vsheet by *revising* box_selector_list 739 | h1h2_rule_map = box_selector_list[ __0 ]._rule_map_; 740 | h1_rule_map = box_selector_list[ __1 ]._rule_map_; 741 | small_h1h2_map = box_selector_list[ 4 ]._rule_map_; 742 | small_h1_map = box_selector_list[ 5 ]._rule_map_; 743 | 744 | pcss._extendRuleMap_( h1h2_rule_map, { 745 | _left_ : '_50p_', 746 | _margin_ : [[ '_0_', '_0_', '_1d5rem_', [ '-8rem' ] ]], 747 | _padding_ : '_d625rem_', 748 | _width_ : [ '16rem' ], 749 | _font_size_ : '_2rem_', 750 | _border_radius_ : '_d5rem_', 751 | _border_style_ : '_solid_', 752 | _border_width_ : '_d5rem_', 753 | _text_align_ : '_center_', 754 | _box_shadow_ : '_shadow_d625_' 755 | }); 756 | pcss._extendRuleMap_( h1_rule_map, { 757 | _left_ : '_0_', 758 | _margin_left_ : '_0_', 759 | _border_radius_ : '_d5rem_', 760 | _margin_top_ : '_0_' 761 | }); 762 | pcss._extendRuleMap_( small_h1h2_map, { _margin_ : __null }); 763 | pcss._extendRuleMap_( small_h1_map, { 764 | _display_ : '_block_', 765 | _left_ : '_auto_', 766 | _margin_ : [[ '_1rem_', '_auto_' ]], 767 | _border_radius_ : '_d5rem_' 768 | }); 769 | pcss._setVsheet_({ 770 | _vsheet_id_ : '_box02_', 771 | _mode_str_ : '_add_', 772 | _selector_list_ : box_selector_list, 773 | _regen_type_ : '_none_' 774 | }); 775 | // End add _box02_ vsheet by *revising* box_selector_list 776 | 777 | // Begin add _box03_ vsheet by *revising* box_selector_list 778 | pcss._extendRuleMap_( h1h2_rule_map, { 779 | _left_ : __null, 780 | _width_ : __null, 781 | _display_ : '_block_', 782 | _float_ : '_right_', 783 | _margin_ : [[ '_0_', [ '-4.5rem' ], '_1d5rem_', '_1rem_' ]], 784 | _max_width_ : [ '90%' ], 785 | _padding_ : [[ '_d625rem_', '_3rem_', '_d625rem_', '_1rem_' ]], 786 | _box_shadow_ : '_shadow_d1875_', 787 | _border_radius_ : '_1rem_', 788 | _font_family_ : '_font_fixed_', 789 | _font_size_ : '_1d75rem_', 790 | _text_align_ : '_right_' 791 | }); 792 | pcss._extendRuleMap_( h1_rule_map, { 793 | _float_ : '_left_', 794 | _margin_ : [[ [ '-3.5rem'], '_0_', [ '-8rem' ], [ '-4.5rem' ] ]], 795 | _padding_ : [[ '_d625rem_', '_2rem_', '_d625rem_', '_2rem_' ]], 796 | _border_radius_ : [[ '_0_', '_0_', '_1rem_', '_1rem_' ]], 797 | _text_align_ : '_left_' 798 | }); 799 | box_selector_list.push({ 800 | _selector_str_ : '.pcss-_alt_clearfloat_', 801 | _rule_map_ : { _clear_ : '_right_' } 802 | }); 803 | pcss._extendRuleMap_( small_h1_map, { 804 | _display_ : '_block_', 805 | _float_ : '_none_', 806 | _left_ : '_auto_', 807 | _max_width_ : [ '24rem' ], 808 | _margin_ : [[ '_1rem_', '_auto_' ]], 809 | _text_align_ : '_center_' 810 | }); 811 | pcss._setVsheet_({ 812 | _vsheet_id_ : '_box03_', 813 | _mode_str_ : '_add_', 814 | _selector_list_ : box_selector_list, 815 | _regen_type_ : '_none_' 816 | }); 817 | // End add _box03_ vsheet by *revising* box_selector_list 818 | 819 | // Begin create cascades to toggle 820 | pcss._setCascade_({ 821 | _cascade_id_ : '_c01_', 822 | _mode_str_ : '_add_', 823 | _vsheet_id_list_ : [ '_font_', '_base_', '_box01_' ], 824 | _mixin_map_ : palette_map, 825 | _regen_type_ : '_none_' 826 | }); 827 | 828 | pcss._setCascade_({ 829 | _cascade_id_ : '_c02_', 830 | _mode_str_ : '_add_', 831 | _vsheet_id_list_ : [ '_font_', '_base_', '_box02_' ], 832 | _mixin_map_ : palette_map, 833 | _regen_type_ : '_none_' 834 | }); 835 | 836 | pcss._setCascade_({ 837 | _cascade_id_ : '_c03_', 838 | _mode_str_ : '_add_', 839 | _vsheet_id_list_ : [ '_font_', '_base_', '_box03_' ], 840 | _mixin_map_ : palette_map, 841 | _regen_type_ : '_none_' 842 | }); 843 | // End create cascades to toggle 844 | 845 | topSmap._cascade_id_list_ 846 | = pcss._getAssetIdList_({ '_asset_type_' : '_cascade_' }); 847 | } 848 | // End DOM method /setStyle/ 849 | 850 | // Begin DOM method /drawCascadeSelect/ 851 | function drawCascadeSelect () { 852 | var 853 | cascade_id_list = topSmap._cascade_id_list_, 854 | cascade_count = cascade_id_list.length, 855 | div_list = [], 856 | 857 | 858 | i, cascade_name, cascade_html 859 | ; 860 | 861 | for ( i = -1; i < cascade_count; i++ ) { 862 | cascade_name = ( i < __0 ) 863 | ? 'Cascade ' 864 | + '' 865 | : 'cascade ' + String( i ); 866 | div_list[ i + __1 ] = '
' + cascade_name + '
'; 867 | } 868 | cascade_html = div_list.join( __blank ); 869 | jqueryMap._$head_cascade_.html( cascade_html ); 870 | } 871 | // End DOM method /drawCascadeSelect/ 872 | 873 | // Begin DOM method /drawPaletteSelect/ 874 | function drawPaletteSelect () { 875 | var 876 | palette_list = topCmap._palette_list_, 877 | palette_count = palette_list.length, 878 | div_list = [], 879 | 880 | i, palette_map, palette_name, palette_html 881 | ; 882 | for ( i = -1; i < palette_count; i++ ) { 883 | if ( i < __0 ) { 884 | palette_name = 'Palette ' 885 | + ''; 886 | } 887 | else { 888 | palette_map = palette_list[ i ]; 889 | palette_name = palette_map._palette_name_; 890 | } 891 | div_list[ i + __1 ] = '
' + palette_name + '
'; 892 | } 893 | palette_html = div_list.join( __blank ); 894 | jqueryMap._$head_palette_.html( palette_html ); 895 | } 896 | // End DOM method /drawPaletteSelect/ 897 | 898 | // Begin DOM method /pickPaletteIdx/ 899 | function pickPaletteIdx ( palette_idx ) { 900 | var 901 | palette_list = topCmap._palette_list_, 902 | palette_map = palette_list[ palette_idx ], 903 | $child_list = jqueryMap._$head_palette_.children(), 904 | local_key = topCmap._local_idx_key_ 905 | ; 906 | 907 | if ( ! palette_map ) { return; } 908 | topSmap._palette_idx_ = palette_idx; 909 | $child_list.removeClass( 'pcss-_x_select_' ); 910 | $child_list.eq( palette_idx + __1 ).addClass( 'pcss-_x_select_'); 911 | 912 | // useCascade will take care of presenting the updated palette_map 913 | topSmap._palette_map_ = palette_map; 914 | if ( localStorage ) { localStorage[ local_key ] = palette_idx; } 915 | } 916 | // End DOM method /pickPaletteIdx/ 917 | 918 | // Begin DOM method /pickCascadeIdx/ 919 | function pickCascadeIdx ( cascade_idx ) { 920 | var 921 | cascade_id_list = topSmap._cascade_id_list_, 922 | cascade_id = cascade_id_list[ cascade_idx], 923 | $child_list = jqueryMap._$head_cascade_.children() 924 | ; 925 | 926 | if ( ! cascade_id ) { return; } 927 | $child_list.removeClass( 'pcss-_x_select_' ); 928 | $child_list.eq( cascade_idx + __1 ).addClass( 'pcss-_x_select_'); 929 | 930 | topSmap._cascade_id_ = cascade_id; 931 | // useCascade will take care of presenting the updated cascade_id 932 | } 933 | // End DOM method /pickCascadeIdx/ 934 | 935 | // Being DOM method /useCascade/ 936 | function useCascade () { 937 | var 938 | cascade_id = topSmap._cascade_id_, 939 | palette_map = topSmap._palette_map_ 940 | ; 941 | 942 | pcss._setCascade_({ 943 | _cascade_id_ : cascade_id, 944 | _mode_str_ : '_change_', 945 | _mixin_map_ : palette_map, 946 | _regen_type_ : '_use_' 947 | }); 948 | } 949 | // End DOM method /useCascade/ 950 | // ======================== END DOM METHODS ========================== 951 | 952 | // ===================== BEGIN EVENT HANDLERS ======================== 953 | // Begin event handler /onClickHead/ 954 | function onClickHead ( event_obj ) { 955 | var 956 | target_el = event_obj.target, 957 | $target = $( target_el ), 958 | target_idx = $target.index(), 959 | $float_div = $target.closest( '.pcss-_head_float_' ), 960 | float_idx = $float_div.index() 961 | ; 962 | 963 | if ( $float_div.length === __0 ) { return; } 964 | 965 | if ( ! $float_div.hasClass( 'pcss-_x_active_') ) { 966 | $float_div.addClass( 'pcss-_x_active_' ); 967 | return; 968 | } 969 | 970 | if ( $target.hasClass( 'pcss-_head_float_') ) { 971 | return; 972 | } 973 | if ( target_idx > __0 ) { 974 | if ( float_idx === __1 ) { 975 | pickPaletteIdx( target_idx - __1 ); 976 | useCascade(); 977 | } 978 | else { 979 | pickCascadeIdx( target_idx - __1 ); 980 | useCascade(); 981 | } 982 | } 983 | 984 | setTimeout( function () { 985 | $float_div.removeClass( 'pcss-_x_active_' ); 986 | }, topCmap._debounce_ms_ ); 987 | } 988 | // End event handler /onClickHead/ 989 | // ======================= END EVENT HANDLERS ======================== 990 | 991 | // ====================== BEGIN PUBLIC METHODS ======================= 992 | // Begin public method /initModule/ 993 | function initModule () { 994 | var palette_count, palette_idx; 995 | 996 | pcss._initModule_(); 997 | 998 | setJqueryMap(); 999 | setStyle(); 1000 | drawCascadeSelect(); 1001 | drawPaletteSelect(); 1002 | 1003 | palette_count = topCmap._palette_list_.length; 1004 | palette_idx = getPaletteIdx( palette_count ); 1005 | 1006 | pickPaletteIdx( palette_idx ); 1007 | pickCascadeIdx( __0 ); 1008 | useCascade(); 1009 | 1010 | jqueryMap._$head_.on( 'click', onClickHead ); 1011 | } 1012 | // End public method /initModule/ 1013 | 1014 | return { _initModule_ : initModule }; 1015 | // ======================= END PUBLIC METHODS ======================== 1016 | }( jQuery )); 1017 | // END pcss._home_ 1018 | 1019 | /** Color palettes modified from: DuoParadigms Public Relations & Design, Inc. 1020 | * http://www.duoparadigms.com/2013/10/11/ 1021 | * 10-color-palettes-perfect-autumnfall-season/ * Posted by Aaress Lawless 1022 | */ 1023 | -------------------------------------------------------------------------------- /examples/pcss._ex001_.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 7 | 9 | 10 | 11 | 12 | 13 | PowerCSS Example 001 14 | 15 | 16 | 17 | 18 | 31 | 32 | 33 |
34 |
35 |

Example 001: The basics

36 |
PowerCSS 01
37 | 38 |
39 |
PowerCSS 02
40 |
PowerCSS 03
41 |
PowerCSS 04
42 |
PowerCSS 04
43 |
PowerCSS 05
44 |
PowerCSS 06
45 |
PowerCSS 07
46 |
PowerCSS 08
47 |
PowerCSS 09
48 |
PowerCSS 10
49 |
PowerCSS 11
50 |
PowerCSS 12
51 |
PowerCSS 13
52 |
PowerCSS 14
53 |
PowerCSS 15
54 |
PowerCSS 16
55 |
PowerCSS 17
56 |
PowerCSS 18
57 |
PowerCSS 19
58 |
PowerCSS 20
59 | 60 | 61 | -------------------------------------------------------------------------------- /examples/pcss._ex002_.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 7 | 9 | 10 | 11 | 12 | 13 | PowerCSS Example 002 14 | 15 | 16 | 17 | 18 | 31 | 32 | 33 |
34 |
35 |

Example 002: Double buffering

36 |

Click on a Cascade in the top right corner to activate.

37 |
38 |
Cascade A
39 |
Cascade B
40 |
41 |
PowerCSS 01
42 | 43 |
44 |
PowerCSS 02
45 |
PowerCSS 03
46 |
PowerCSS 04
47 |
PowerCSS 04
48 |
PowerCSS 05
49 |
PowerCSS 06
50 |
PowerCSS 07
51 |
PowerCSS 08
52 |
PowerCSS 09
53 |
PowerCSS 10
54 |
PowerCSS 11
55 |
PowerCSS 12
56 |
PowerCSS 13
57 |
PowerCSS 14
58 |
PowerCSS 15
59 |
PowerCSS 16
60 |
PowerCSS 17
61 |
PowerCSS 18
62 |
PowerCSS 19
63 |
PowerCSS 20
64 | 65 | 66 | -------------------------------------------------------------------------------- /examples/pcss._ex003_.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 7 | 9 | 10 | 11 | 12 | 13 | PowerCSS Example 003 14 | 15 | 16 | 19 | PowerCSS Example 001 20 | 21 | 22 | 23 | 35 | 36 | 37 |
38 |
39 |

Example 003: Mixin Maps

40 |

This shows basic use of mixin maps.

41 |

Click on the top right corner to toggle between 3 cascades 42 | that have been created using PowerCSS and mixin maps. 43 |

44 |
45 |
Cascade A
46 |
Cascade B
47 |
Cascade C
48 |
49 |
PowerCSS 01
50 | 51 |
52 |
PowerCSS 02
53 |
PowerCSS 03
54 |
PowerCSS 04
55 |
PowerCSS 04
56 |
PowerCSS 05
57 |
PowerCSS 06
58 |
PowerCSS 07
59 |
PowerCSS 08
60 |
PowerCSS 09
61 |
PowerCSS 10
62 |
PowerCSS 11
63 |
PowerCSS 12
64 |
PowerCSS 13
65 |
PowerCSS 14
66 |
PowerCSS 15
67 |
PowerCSS 16
68 |
PowerCSS 17
69 |
PowerCSS 18
70 |
PowerCSS 19
71 |
PowerCSS 20
72 | 73 | 74 | -------------------------------------------------------------------------------- /examples/pcss._ex004_.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 7 | 9 | 10 | 11 | 12 | 13 | PowerCSS Example 004 14 | 15 | 16 | 17 | 18 | 19 |
20 |

Example 004: Compression

21 |

This example has the capability as Example 003, however it uses 22 | compressed PowerCSS. The table below illustrates how object key compression 23 | ("Superpack") can result in nearly half the download size compared to a 24 | an UglifyJS minification and only 15% of the original library and logic 25 | files! 26 |

27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 |
CompressionBytesRelative Size
Original42,186100%
Pruned36,44986.4%
Minified + Prune12,52429.7%
Superpack6,45415.3%
54 |
55 |
Cascade A
56 |
Cascade B
57 |
Cascade C
58 |
59 |
PowerCSS 01
60 | 61 |
62 |
PowerCSS 02
63 |
PowerCSS 03
64 |
PowerCSS 04
65 |
PowerCSS 04
66 |
PowerCSS 05
67 |
PowerCSS 06
68 |
PowerCSS 07
69 |
PowerCSS 08
70 |
PowerCSS 09
71 |
PowerCSS 10
72 |
PowerCSS 11
73 |
PowerCSS 12
74 |
PowerCSS 13
75 |
PowerCSS 14
76 |
PowerCSS 15
77 |
PowerCSS 16
78 |
PowerCSS 17
79 |
PowerCSS 18
80 |
PowerCSS 19
81 |
PowerCSS 20
82 | 83 | 84 | 92 | 93 | -------------------------------------------------------------------------------- /examples/pcss._ex005_.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 7 | 9 | 10 | 11 | 12 | 13 | PowerCSS Example 005 14 | 15 | 18 | 19 | 20 | 21 | 33 | 34 | 35 |
36 |
37 |

Example 005: Minimal time-based processing

38 |

This shows minimal time-base processing of three cascades 39 | and ten mixin-maps color themes. The theme is changed every five 40 | seconds. Click on the top right corner to switch cascades. 41 | All changes are dispatched with just one PowerCSS call 42 | and all changes are transparently double-buffered.

43 |
44 |
Cascade A
45 |
Cascade B
46 |
Cascade C
47 |
48 |
PowerCSS 01
49 | 50 |
51 |
PowerCSS 02
52 |
PowerCSS 03
53 |
PowerCSS 04
54 |
PowerCSS 04
55 |
PowerCSS 05
56 |
PowerCSS 06
57 |
PowerCSS 07
58 |
PowerCSS 08
59 |
PowerCSS 09
60 |
PowerCSS 10
61 |
PowerCSS 11
62 |
PowerCSS 12
63 |
PowerCSS 13
64 |
PowerCSS 14
65 |
PowerCSS 15
66 |
PowerCSS 16
67 |
PowerCSS 17
68 |
PowerCSS 18
69 |
PowerCSS 19
70 |
PowerCSS 20
71 | 72 | 73 | -------------------------------------------------------------------------------- /img/PowerCss.xcf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mmikowski/powercss/6cef0a4972ead22763c90e65e3f8b7d0db24753f/img/PowerCss.xcf -------------------------------------------------------------------------------- /img/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mmikowski/powercss/6cef0a4972ead22763c90e65e3f8b7d0db24753f/img/favicon.png -------------------------------------------------------------------------------- /img/pcss-25p-basket.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mmikowski/powercss/6cef0a4972ead22763c90e65e3f8b7d0db24753f/img/pcss-25p-basket.png -------------------------------------------------------------------------------- /img/pcss-25p-dk.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mmikowski/powercss/6cef0a4972ead22763c90e65e3f8b7d0db24753f/img/pcss-25p-dk.png -------------------------------------------------------------------------------- /img/pcss-25p-lt.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mmikowski/powercss/6cef0a4972ead22763c90e65e3f8b7d0db24753f/img/pcss-25p-lt.png -------------------------------------------------------------------------------- /img/pcss-25p-mineral.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mmikowski/powercss/6cef0a4972ead22763c90e65e3f8b7d0db24753f/img/pcss-25p-mineral.png -------------------------------------------------------------------------------- /img/pcss-25p-np.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mmikowski/powercss/6cef0a4972ead22763c90e65e3f8b7d0db24753f/img/pcss-25p-np.png -------------------------------------------------------------------------------- /img/pcss.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mmikowski/powercss/6cef0a4972ead22763c90e65e3f8b7d0db24753f/img/pcss.png -------------------------------------------------------------------------------- /img/pcss_25percent-solid.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mmikowski/powercss/6cef0a4972ead22763c90e65e3f8b7d0db24753f/img/pcss_25percent-solid.png -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | PowerCSS 6 | 8 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 19 | 20 | 21 | 22 | 32 | 33 | 34 |
35 |
36 |
37 |
38 |
39 | 40 |
41 |
42 |
43 |
JS-powered run-time CSS
44 |
45 | 46 |
47 |

Latest News

48 |
49 |

2016-09-06: v1.3 — Added _setStyleAttr_ 50 | method. PowerCSS can now change styles on-the-fly after a 51 | stylesheet is written. Here is an example:

52 | 53 | 
// Rewrite an attribute for a style.
 54 | // This will update all elements with this class in the DOM immediately
 55 | //
 56 | pcss._setStyleAttr_({
 57 |   _selector_str_ : '.xhi-_svg_ellipse_',
 58 |   _attr_key_ : 'rx',
 59 |   _attr_val_ : x_radius_px
 60 | });

61 | 62 |

If you have just a few style changes, _setStyleAttr_ 63 | can be more efficient or easier to implement. Other times, double-buffer 64 | stylesheet flipping will be much faster or easier. The easiest solution 65 | is usually the best; however, if performance is critical you should 66 | profile both approaches in you applicaiton to help you determine which 67 | makes the most sense.

68 | 69 |

PowerCSS v1.3 is backward compatible with all 70 | versions since 1.0.

71 |
72 | 73 |
74 |

What

75 |
76 |

PowerCSS is a JavaScript library that create run-time CSS optimized for 77 | performance. 78 | Watch this presentation for an an overview of CSS double-buffering. 80 | PowerCSS is all-new code with many additional capabilities 81 | and optimizations.

82 | 83 |

The project is hosted on GitHub and is available as an 85 | npm package. 86 | It can be installed using npm install powercss. After 87 | installation, if you'd like to run the regression tests, enter the 88 | following into a Bash shell:

89 | 90 | 
cd node_modules/powercss
 91 | npm install
 92 | npm test
93 |
94 | 95 |
96 |

How

97 |
98 |

This page is styled using PowerCSS. I know, dog-food 99 | much? Anyway, click at the top right to change the palette or cascade 100 | at any time. It looks good on a phone as well as a desktop. 101 | There are 5 examples discussed in the 102 | documentation. These include: 104 |

111 |
112 |
113 |

Why

114 |
115 |

Traditional CSS is created well before it is used, 116 | not when the application needs it. While preprocessors such as 117 | {less}, Stylus, or Sass can help 118 | reduce some of the tedium of creating styling variations, they complicate the 119 | tool chain and can hinder design iterations.

120 | 121 |

PowerCSS is designed and optimized for run-time 122 | creation and application of CSS. It can be responsive to the user's 123 | environment to a level not possible with preprocessors. Even better, 124 | there is no additional compile step to hinder design iteration. 125 | Styling can be infinitely adjust based on almost any real-time data available 126 | to an application such as ambient temperature, device orientation, ambient light, 127 | GPS location, heart rate, or time of day. Static CSS can't compete with 128 | this flexibility.

129 | 130 |

PowerCSS has not only achieved its primary goal, but 131 | it is often better than static CSS in many other respects as well. 132 | It provides a simple and familiar API where experienced CSS authors 133 | can use their existing skills to be up and running in minutes. 134 | When compressed, a PowerCSS solution can download and render faster, 135 | and it can speed up some CSS operations by 10x or more. 136 | What's not to like?

137 | 138 | 168 |
169 | 170 |
171 |

Older News

172 |
173 | 174 |

2016-09-03: v1.2 — External symbol 175 | definitions. PowerCSS can now use custom symbol maps. 176 | The pcss._initModule_({...}) method has two additional 177 | options: _css_key_map_ and _css_val_map_. 178 | 179 |

PowerCSS v1.2 is fully backward compatible with v1.1 180 | and v1.0 as long as we add the pcss.cfg.js source file: 181 | page like so:

182 | 183 | 
<!-- v1.1 -->
184 | <script>../dist/pcss.js</script>
185 | 
186 | <!-- v1.2+ -->
187 | <script>../dist/pcss.js</script>
188 | <script>../dist/pcss.cfg.js</script>
189 |

190 | 191 |

No changes to client code is necessary, as PowerCSS checks and 192 | includes the default CSS key and value maps from pcss.cfg.js 193 | file if they are not otherwise provided in the pcss._initModule_({...}) 194 | call. The API remains fully backward compatible with 1.0.

195 | 196 |

2016-03-25: v1.1 — Conditional expressions. 197 | PowerCSS now supports arbitrary-depth conditional CSS and media 198 | queries. See the Conditional Expressions section of updated 199 | documentation. We added 22 regression tests to 201 | ensure quality and reliability.

202 | 203 |

2016-03-25: v1.0 — First production release. 204 | We have a strong set of regression 205 | tests and has been used in a number of production and production-intent 206 | projects with good results. Expect per-cascade double-buffered 207 | stylesheets in the 1.2.x release.

208 | 209 |

2016-03-20: v0.7.1 — Rewrote the rule-map 210 | resolver. It now processes arbitrarily complex data 211 | structures. This allows mixin maps with any nesting of 212 | alternate-lists, concatenations, and symbol-lookups. The isolated code 213 | is found in test/resolve.js.

214 | 215 |

2016-03-09: v0.6.6 — Fixed bugs found from 216 | testing. Also added process events: _pcss_merged_, 217 | _pcss_prepared_, and _pcss_used_. 218 | The event object provides the ID of the cascade 219 | affected. 220 |

221 | 222 |

2016-03-07: v0.6.2 — Added automated regression 223 | tests. Production deployments underway.

224 | 225 |

2016-03-04: v0.5.20 — Added key benefits section 226 | .

227 | 228 |

2016-02-24: v0.5.16 — Completed 1.x API design. 229 | Also added double-buffering and theming demo to the home page.

230 | 231 |

2016-02-24: v0.5.0 — First beta announcment. 232 | PowerCss was nearly feature complete on this date and considered 233 | Beta. The API was overhauled, cutting the number of methods in 234 | half while adding many capabilities. Documentation and examples were 235 | expanded and updated. The cookbook section was added.

236 |
237 | 238 |
239 |

Contribute

240 |
241 | 242 |

If you want your voice heard, join the project! PowerCSS is hosted on 243 | GitHub 244 | and is also distrubted as an npm package. The best way to contribute is to report 246 | issues on Github. Pull request are strongly 248 | encoouraged

249 |
250 | 251 |
252 |

End

253 |
254 |
255 |
256 | 266 | 267 |
268 |
269 |
270 | 271 | 272 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "author": { 3 | "name": "Michael S. Mikowski", 4 | "email": "mike.mikowski@gmail.com" 5 | }, 6 | "bugs": { 7 | "url": "https://github.com/mmikowski/powercss/issues" 8 | }, 9 | "bundleDependencies": false, 10 | "dependencies": {}, 11 | "deprecated": false, 12 | "description": "Unleash PowerCSS to create custom styling for every user of your web application. PowerCSS uses merging, caching, compression, and double-buffering to exceed the speed and flexibility of static CSS. https://www.youtube.com/watch?v=rnkMjzhxw4s", 13 | "devDependencies": { 14 | "coveralls": "2.13.1", 15 | "istanbul": "0.4.5", 16 | "jsdom": "11.1.0", 17 | "jslint": "0.11.0", 18 | "nodeunit": "0.11.1" 19 | }, 20 | "homepage": "https://github.com/mmikowski/powercss", 21 | "keywords": [ 22 | "alive-css", 23 | "css", 24 | "css-alive", 25 | "css-js", 26 | "css-live", 27 | "css-power", 28 | "cssjs", 29 | "desktop and mobile", 30 | "desktop and touch", 31 | "desktop", 32 | "js-css", 33 | "jscss", 34 | "live-css", 35 | "mobile", 36 | "phone", 37 | "power", 38 | "power-css", 39 | "powercss", 40 | "tablet", 41 | "touch" 42 | ], 43 | "license": "MIT", 44 | "main": "dist/", 45 | "name": "powercss", 46 | "repository": { 47 | "type": "git", 48 | "url": "git+https://github.com/mmikowski/powercss.git" 49 | }, 50 | "scripts": { 51 | "coverage": "node_modules/.bin/istanbul cover node_modules/.bin/nodeunit test/t.js", 52 | "publish-coverage": "node_modules/.bin/istanbul cover node_modules/.bin/nodeunit test/t.js | cat coverage/lcov.info | node_modules/.bin/coveralls", 53 | "requirements-check": "bin/check-node-version", 54 | "setup": "bin/setup", 55 | "test": "node_modules/.bin/nodeunit test/t.js" 56 | }, 57 | "version": "1.4.7" 58 | } 59 | -------------------------------------------------------------------------------- /test/resolve.js: -------------------------------------------------------------------------------- 1 | /** resolve.js 2 | * Resolver development for PowerCSS 3 | * Michael S. Mikowski - mike.mikowski@gmail.com 4 | */ 5 | /*jslint browser : true, continue : true, 6 | devel : true, indent : 2, maxerr : 1, 7 | newcap : true, nomen : true, plusplus : true, 8 | regexp : true, sloppy : true, vars : false, 9 | white : true, todo : true, unparam : true 10 | */ 11 | /*global */ 12 | 13 | ( function () { 14 | var 15 | __0 = 0, 16 | __1 = 1, 17 | __blank = '', 18 | __console = console, 19 | __undef = global.undefined, 20 | __getKeyList = Object.keys, 21 | expectList = [ 22 | 'color:#888', 23 | 24 | 'color:#888;font-family:sans;font-size:16px;margin:0;overflow-y:scroll', 25 | 26 | 'padding:2.5rem 2rem', 27 | 28 | 'color:#888;font-family:sans;font-size:16px;margin:0;overflow-y:scroll;padding:2.5rem 2rem', 29 | 30 | 'padding:2.5rem 2rem;color:#888;font-family:sans;font-size:16px;margin:0;overflow-y:scroll', 31 | 32 | 'color:#888;font-family:sans;font-size:16px;padding:2.5rem 2rem;margin:0;overflow-y:scroll', 33 | 34 | 'background:#f85032;background:-moz-linear-gradient(left, #f85032 0%, #6d362d 100%)', 35 | 36 | 'background:#f85032;background:#fff;background:2.5rem 2rem;background:2.5rem 2rem holy-cow', 37 | 38 | 'background:#f85032;background:#fff;background:2.5rem 2rem;background:2.5rem 2rem holy-cow' 39 | + ';padding:2.5rem 2rem', 40 | 41 | 'padding:2.5rem 2rem;background:#f85032;background:#fff;background:2.5rem 2rem;' 42 | + 'background:2.5rem 2rem holy-cow', 43 | 44 | 'margin:0;padding:2.5rem 2rem;overflow-y:scroll;' 45 | + 'background:#f85032;background:#fff;background:2.5rem 2rem;' 46 | + 'background:2.5rem 2rem holy-cow 16px;' 47 | + 'font-family:sans;font-size:16px;color:#888', 48 | 49 | 'margin:2.5rem 2rem 2rem 16px', 50 | 51 | 'margin:0;padding:2.5rem 2rem;overflow-y:scroll;' 52 | + 'background:#f85032;background:#fff;background:2.5rem 2rem;' 53 | + 'background:2.5rem 2rem holy-cow 16px;' 54 | + 'font-family:sans;font-size:16px;color:#888' 55 | ], 56 | ruleMapList = [ 57 | { _color_ : '_color_font_' }, // ======= 0 58 | { _color_ : '_color_font_', // ======= 1 59 | _font_family_ : '_font_sans_', 60 | _font_size_ : '_font_size_', 61 | _margin_ : '_0_', 62 | _overflow_y_ : '_scroll_' 63 | }, 64 | { _padding_ : [[ '_2d5rem_', '_2rem_' ]] }, // 2 65 | { _color_ : '_color_font_', // 3 66 | _font_family_ : '_font_sans_', 67 | _font_size_ : '_font_size_', 68 | _margin_ : '_0_', 69 | _overflow_y_ : '_scroll_', 70 | _padding_ : [[ '_2d5rem_', '_2rem_' ]] 71 | }, 72 | { _padding_ : [[ '_2d5rem_', '_2rem_' ]], // 4 73 | _color_ : '_color_font_', 74 | _font_family_ : '_font_sans_', 75 | _font_size_ : '_font_size_', 76 | _margin_ : '_0_', 77 | _overflow_y_ : '_scroll_' 78 | }, 79 | { _color_ : '_color_font_', //========= 5 80 | _font_family_ : '_font_sans_', 81 | _font_size_ : '_font_size_', 82 | _padding_ : [[ '_2d5rem_', '_2rem_' ]], 83 | _margin_ : '_0_', 84 | _overflow_y_ : '_scroll_' 85 | }, 86 | { _background_ : { //======================= 6 87 | _alt_list_ : [ 88 | [ '#f85032' ], 89 | [ '-moz-linear-gradient(left, #f85032 0%, #6d362d 100%)' ] 90 | ] 91 | } 92 | }, 93 | { _background_ : { //======================= 7 94 | _alt_list_ : [ 95 | [ '#f85032' ], 96 | '_xfff_', 97 | [[ '_2d5rem_', '_2rem_' ]], 98 | [[ '_2d5rem_', '_2rem_', [ 'holy-cow' ] ]] 99 | ] 100 | } 101 | }, 102 | { _background_ : { //======================= 8 103 | _alt_list_ : [ 104 | [ '#f85032' ], 105 | '_xfff_', 106 | [[ '_2d5rem_', '_2rem_' ]], 107 | [[ '_2d5rem_', '_2rem_', [ 'holy-cow' ] ]] 108 | ] 109 | }, 110 | _padding_ : [[ '_2d5rem_', '_2rem_' ]] 111 | }, 112 | { _padding_ : [[ '_2d5rem_', '_2rem_' ]], // 9 113 | _background_ : { 114 | _alt_list_ : [ 115 | [ '#f85032' ], 116 | '_xfff_', 117 | [[ '_2d5rem_', '_2rem_' ]], 118 | [[ '_2d5rem_', '_2rem_', [ 'holy-cow' ] ]] 119 | ] 120 | } 121 | }, 122 | { _margin_ : '_0_', //================= 10 123 | _padding_ : [[ '_2d5rem_', '_2rem_' ]], 124 | _overflow_y_ : '_scroll_', 125 | _background_ : { 126 | _alt_list_ : [ 127 | [ '#f85032' ], 128 | '_xfff_', 129 | [[ '_2d5rem_', '_2rem_' ]], 130 | [[ '_2d5rem_', '_2rem_', [ 'holy-cow' ], '_font_size_' ]] 131 | ] 132 | }, 133 | _font_family_ : '_font_sans_', 134 | _font_size_ : '_font_size_', 135 | _color_ : '_color_font_' 136 | }, 137 | { _margin_ : [[ //========================= 11 138 | '_2d5rem_', '_2rem_', [[ '_2rem_', '_font_size_' ]] 139 | ]] 140 | }, 141 | { _margin_ : '_0_', //================= 12 142 | _padding_ : [[ '_2d5rem_', '_2rem_' ]], 143 | _overflow_y_ : '_scroll_', 144 | _background_ : '_background_grad_', 145 | _font_family_ : '_font_sans_', 146 | _font_size_ : '_font_size_', 147 | _color_ : '_color_font_' 148 | } 149 | ], 150 | 151 | cssKeyMap = { 152 | _margin_ : 'margin', 153 | _padding_ : 'padding', 154 | _background_ : 'background', 155 | _overflow_y_ : 'overflow-y', 156 | _font_family_ : 'font-family', 157 | _font_size_ : 'font-size', 158 | _color_ : 'color' 159 | }, 160 | cssValMap = { 161 | _0_ : '0', 162 | _2d5rem_ : '2.5rem', 163 | _2rem_ : '2rem', 164 | _font_size_ : '16px', 165 | _color_font_ : '#888', 166 | _font_sans_ : 'sans', 167 | _scroll_ : 'scroll' 168 | }, 169 | mixinMap = { 170 | _xfff_ : '#fff', 171 | _background_grad_ : { 172 | _alt_list_ : [ 173 | [ '#f85032' ], 174 | '_xfff_', 175 | [[ '_2d5rem_', '_2rem_' ]], 176 | [[ '_2d5rem_', '_2rem_', [ 'holy-cow' ], '_font_size_' ]] 177 | ] 178 | } 179 | }, 180 | vMap = { 181 | _apply_ : 'apply', 182 | _array_ : 'array', 183 | _hasOwnProp_ : 'hasOwnProperty', 184 | _join_ : 'join', 185 | _length_ : 'length', 186 | _object_ : 'object', 187 | _pop_ : 'pop', 188 | _push_ : 'push', 189 | _string_ : 'string' 190 | } 191 | ; 192 | 193 | function getVarType ( arg ) { 194 | return Array.isArray( arg ) ? vMap._array_ : ( typeof arg ); 195 | } 196 | function getValList( map, key_list ) { 197 | var 198 | val_list = [], 199 | key_count = key_list[ vMap._length_ ], 200 | i, key, val_data; 201 | 202 | for ( i = __0; i < key_count; i++ ) { 203 | key = key_list[ i ]; 204 | val_data = map[ key ]; 205 | 206 | val_list[i] = val_data; 207 | } 208 | return val_list; 209 | } 210 | 211 | function logIt () { 212 | __console.log[ vMap._apply_ ]( __console, arguments ); 213 | } 214 | // end 2.3 215 | 216 | function makeRuleMapStr ( rule_map, merged_mixin_map ) { 217 | var 218 | frame_stack = [], 219 | k = __0, 220 | 221 | key_list, val_list, rule_key, 222 | frame_obj, orig_obj, prior_frame_obj, 223 | 224 | val_data, val_data_type, 225 | tmp_data, tmp_data_type, 226 | solve_data, 227 | 228 | alt_list, alt_type, 229 | first_data, first_type 230 | ; 231 | 232 | 233 | key_list = __getKeyList( rule_map ); 234 | val_list = getValList( rule_map, key_list ); 235 | rule_key = key_list[ __0 ]; 236 | 237 | frame_obj = { 238 | _type_ : '_base_', 239 | _key_list_ : key_list, 240 | _rule_key_ : rule_key, 241 | _solve_key_ : cssKeyMap[ rule_key ], 242 | _val_idx_ : __0, 243 | _val_list_ : val_list, 244 | _val_count_ : key_list[ vMap._length_], 245 | _solve_list_ : [], 246 | _solve_str_ : __blank 247 | }; 248 | orig_obj = frame_obj; 249 | 250 | _RESOLVE_: while ( k < 100000 ) { // avoid endless loop 251 | k++; 252 | if ( frame_obj._val_idx_ >= frame_obj._val_count_ ) { 253 | prior_frame_obj = frame_obj; 254 | if ( prior_frame_obj._type_ === '_concat_' ) { 255 | prior_frame_obj._solve_str_ 256 | += prior_frame_obj._solve_list_[ vMap._join_ ](' '); 257 | } 258 | else { 259 | prior_frame_obj._solve_str_ 260 | += frame_obj._solve_list_[ vMap._join_ ](';'); 261 | } 262 | 263 | frame_obj = frame_stack[ vMap._pop_ ](); 264 | if ( ! frame_obj ) { break _RESOLVE_; } 265 | 266 | if ( prior_frame_obj._type_ === '_alt_list_' 267 | || frame_obj._solve_key_ === __undef 268 | ) { 269 | frame_obj._solve_list_[ vMap._push_ ]( prior_frame_obj._solve_str_ ); 270 | } 271 | else { 272 | frame_obj._solve_list_[ vMap._push_ ]( 273 | frame_obj._solve_key_ + ':' + prior_frame_obj._solve_str_ 274 | ); 275 | } 276 | frame_obj._val_idx_++; 277 | continue _RESOLVE_; 278 | } 279 | 280 | if ( frame_obj._type_ === '_base_' ) { 281 | rule_key = frame_obj._key_list_[ frame_obj._val_idx_ ]; 282 | frame_obj._rule_key_ = rule_key; 283 | frame_obj._solve_key_ = cssKeyMap[ rule_key ]; 284 | } 285 | 286 | val_data = frame_obj._val_list_[ frame_obj._val_idx_ ]; 287 | val_data_type = getVarType( val_data ); 288 | 289 | // support for complex data expansion 290 | if ( val_data_type === vMap._string_ ) { 291 | if ( merged_mixin_map[ vMap._hasOwnProp_ ]( val_data ) ) { 292 | tmp_data = merged_mixin_map[ val_data ]; 293 | } 294 | else if ( cssValMap[ vMap._hasOwnProp_ ]( val_data ) ) { 295 | tmp_data = cssValMap[ val_data ]; 296 | } 297 | if ( tmp_data !== __undef ) { 298 | tmp_data_type = getVarType( tmp_data ); 299 | if ( tmp_data_type !== vMap._string_ ) { 300 | val_data = tmp_data; 301 | val_data_type = tmp_data_type; 302 | } 303 | } 304 | } 305 | 306 | solve_data = __undef; 307 | _TYPE_: switch ( val_data_type ) { 308 | // Resolve alternate lists 309 | case vMap._object_ : 310 | alt_list = val_data._alt_list_; 311 | alt_type = getVarType( alt_list ); 312 | 313 | if ( alt_type === vMap._array_ ) { 314 | frame_stack[ vMap._push_ ]( frame_obj ); 315 | 316 | frame_obj = { 317 | _type_ : '_alt_list_', 318 | _solve_key_ : frame_obj._solve_key_, 319 | _val_idx_ : __0, 320 | _val_list_ : alt_list, 321 | _val_count_ : alt_list[ vMap._length_ ], 322 | _solve_list_ : [], 323 | _solve_str_ : __blank 324 | }; 325 | continue _RESOLVE_; 326 | } 327 | logIt( '_unsupported_object_', val_data ); 328 | break _TYPE_; 329 | 330 | // Resolve concat-lists and literals 331 | case vMap._array_ : 332 | if ( val_data[ vMap._length_ ] === __1 ) { 333 | first_data = val_data[ __0 ]; 334 | first_type = getVarType( first_data ); 335 | 336 | // Resolve concat-list 337 | if ( first_type === vMap._array_ ) { 338 | frame_stack[ vMap._push_ ]( frame_obj ); 339 | frame_obj = { 340 | _type_ : '_concat_', 341 | _val_idx_ : __0, 342 | _val_list_ : first_data, 343 | _val_count_ : first_data[ vMap._length_ ], 344 | _solve_list_ : [], 345 | _solve_str_ : __blank 346 | }; 347 | continue _RESOLVE_; 348 | } 349 | // Resolve literal 350 | solve_data = first_data; 351 | } 352 | else { 353 | logIt( '_unsupported_array_', val_data ); 354 | } 355 | break _TYPE_; 356 | 357 | // Resolve value symbol subsitution 358 | default : 359 | if ( merged_mixin_map[ vMap._hasOwnProp_ ]( val_data ) ) { 360 | solve_data = merged_mixin_map[ val_data ]; 361 | } 362 | else if ( cssValMap[ vMap._hasOwnProp_ ]( val_data ) ) { 363 | solve_data = cssValMap[ val_data ]; 364 | } 365 | else { 366 | logIt( '_value_symbol_not_found_', val_data ); 367 | } 368 | break _TYPE_; 369 | } 370 | 371 | if ( solve_data ) { 372 | if ( frame_obj._type_ === '_concat_' 373 | || frame_obj._solve_key_ === __undef 374 | ) { 375 | frame_obj._solve_list_[ vMap._push_ ]( solve_data ); 376 | } 377 | else { 378 | frame_obj._solve_list_[ vMap._push_ ]( 379 | frame_obj._solve_key_ + ':' + solve_data 380 | ); 381 | } 382 | } 383 | frame_obj._val_idx_++; 384 | } 385 | return orig_obj._solve_str_; 386 | } 387 | 388 | function main () { 389 | var 390 | test_count = ruleMapList[ vMap._length_ ], 391 | i, resolve_str, expect_str; 392 | 393 | for ( i = 0; i < test_count; i++ ) { 394 | resolve_str = makeRuleMapStr( ruleMapList[ i ], mixinMap ); 395 | expect_str = expectList[ i ]; 396 | if ( resolve_str === expect_str ) { 397 | logIt( 'test', i, 'pass' ); 398 | } 399 | else { 400 | logIt( 'test', i, 'FAIL' ); 401 | logIt( resolve_str ); 402 | logIt( expect_str ); 403 | } 404 | } 405 | } 406 | 407 | main(); 408 | }()); 409 | -------------------------------------------------------------------------------- /test/t.js: -------------------------------------------------------------------------------- 1 | /* 2 | * t.js 3 | * Node unit test suite for PowerCSS 4 | * 5 | * Michael S. Mikowski - mike.mikowski@gmail.com 6 | * 7 | */ 8 | /*jslint node : true, continue : true, 9 | devel : true, indent : 2, maxerr : 50, 10 | newcap : true, nomen : true, plusplus : true, 11 | regexp : true, sloppy : true, vars : false, 12 | white : true todo : true unparam : true, 13 | */ 14 | /*global global, document, window, pcss */ 15 | 16 | // == BEGIN MODULE SCOPE VARIABLES =================================== 17 | 'use strict'; 18 | var 19 | __0 = 0, 20 | intervalMs = 100, 21 | pathObj = require( 'path' ), 22 | jsdomObj = require( 'jsdom' ), 23 | fqTestDirname = __dirname, 24 | fqProjDirname = pathObj.dirname( fqTestDirname ), 25 | configMap = { 26 | _file_core_name_ : fqProjDirname + '/dist/pcss.js', 27 | _file_cfg_name_ : fqProjDirname + '/dist/pcss.cfg.js', 28 | _02_base_map_ : { 29 | _display_ : '_inline_block_', 30 | _opacity_ : '_1_', 31 | _box_sizing_ : '_border_box_', 32 | _position_ : '_relative_', 33 | _vertical_align_ : '_top_', 34 | _margin_ : '_1rem_', 35 | _box_shadow_ : '_global_d25_box_shadow_', 36 | _border_ : [[ '_d25rem_', '_solid_', '_color_mid_' ]], 37 | _border_radius_ : '_1rem_', 38 | _width_ : [ '16rem' ], 39 | _height_ : [ '8rem' ], 40 | _padding_top_ : '_1rem_', 41 | _background_ : '_global_linear_grad_', 42 | _font_size_ : '_1d5rem_', 43 | _font_weight_ : '_800_', 44 | _color_ : '_xfff_', 45 | _text_align_ : '_center_' 46 | }, 47 | _02_extend_map_ : { 48 | _display_ : '_block_', 49 | _width_ : null, 50 | _margin_ : null, 51 | _max_width_ : [ '64rem' ], 52 | _font_size_ : '_2rem_', 53 | _box_shadow_ : '_global_d5_box_shadow_' 54 | }, 55 | _02_check_map_ : { 56 | _display_ : '_block_', 57 | _opacity_ : '_1_', 58 | _box_sizing_ : '_border_box_', 59 | _position_ : '_relative_', 60 | _vertical_align_ : '_top_', 61 | _max_width_ : [ '64rem' ], 62 | _box_shadow_ : '_global_d5_box_shadow_', 63 | _border_ : [[ '_d25rem_', '_solid_', '_color_mid_' ]], 64 | _border_radius_ : '_1rem_', 65 | _height_ : [ '8rem' ], 66 | _padding_top_ : '_1rem_', 67 | _background_ : '_global_linear_grad_', 68 | _font_size_ : '_2rem_', 69 | _font_weight_ : '_800_', 70 | _color_ : '_xfff_', 71 | _text_align_ : '_center_' 72 | }, 73 | _03_json_01_ : '[{"_selector_str_":"body","_rule_lock_list_":' 74 | + '["_font_size_"],"_rule_map_":{"_margin_":"_0_",' 75 | + '"_font_size_":"_1d5rem_"}}]', 76 | _03_json_02_ : '[{"_selector_str_":"body","_rule_map_":' 77 | + '{"_margin_":"_2rem_","_font_size_":"_2rem_"}}]', 78 | _03_merged_01_ : '[{"_selector_str_":"body","_rule_lock_list_"' 79 | + ':["_font_size_"],"_rule_map_":{"_margin_":"_2rem_",' 80 | + '"_font_size_":"_1d5rem_"}}]', 81 | _04_mixin_map_ : { 82 | _font_size_ : '16px', 83 | _color_font_ : '#888', 84 | _font_sans_ : 'sans', 85 | _background_grad_ : { 86 | _alt_list_ : [ 87 | [ '#f85032' ], 88 | '_xfff_', 89 | [[ '_2d5rem_', '_2rem_' ]], 90 | [[ '_2d5rem_', '_2rem_', [ 'holy-cow' ], '_font_size_' ]] 91 | ] 92 | } 93 | }, 94 | _04_expect_list_ : [ 95 | 'color:#888', 96 | 97 | 'color:#888;font-family:sans;font-size:16px;margin:0;overflow-y:scroll', 98 | 99 | 'padding:2.5rem 2rem', 100 | 101 | 'color:#888;font-family:sans;font-size:16px;margin:0;overflow-y:scroll;padding:2.5rem 2rem', 102 | 103 | 'padding:2.5rem 2rem;color:#888;font-family:sans;font-size:16px;margin:0;overflow-y:scroll', 104 | 105 | 'color:#888;font-family:sans;font-size:16px;padding:2.5rem 2rem;margin:0;overflow-y:scroll', 106 | 107 | 'background:#f85032;background:-moz-linear-gradient(left, #f85032 0%, #6d362d 100%)', 108 | 109 | 'background:#f85032;background:#fff;background:2.5rem 2rem;background:2.5rem 2rem holy-cow', 110 | 111 | 'background:#f85032;background:#fff;background:2.5rem 2rem;background:2.5rem 2rem holy-cow' 112 | + ';padding:2.5rem 2rem', 113 | 114 | 'padding:2.5rem 2rem;background:#f85032;background:#fff;background:2.5rem 2rem;' 115 | + 'background:2.5rem 2rem holy-cow', 116 | 117 | 'margin:0;padding:2.5rem 2rem;overflow-y:scroll;' 118 | + 'background:#f85032;background:#fff;background:2.5rem 2rem;' 119 | + 'background:2.5rem 2rem holy-cow 16px;' 120 | + 'font-family:sans;font-size:16px;color:#888', 121 | 122 | 'margin:2.5rem 2rem 2rem 16px', 123 | 124 | 'margin:0;padding:2.5rem 2rem;overflow-y:scroll;' 125 | + 'background:#f85032;background:#fff;background:2.5rem 2rem;' 126 | + 'background:2.5rem 2rem holy-cow 16px;' 127 | + 'font-family:sans;font-size:16px;color:#888' 128 | ], 129 | _04_rule_map_list_ : [ 130 | { _color_ : '_color_font_' }, // ======= 0 131 | { _color_ : '_color_font_', // ======= 1 132 | _font_family_ : '_font_sans_', 133 | _font_size_ : '_font_size_', 134 | _margin_ : '_0_', 135 | _overflow_y_ : '_scroll_' 136 | }, 137 | { _padding_ : [[ '_2d5rem_', '_2rem_' ]] }, // 2 138 | { _color_ : '_color_font_', // 3 139 | _font_family_ : '_font_sans_', 140 | _font_size_ : '_font_size_', 141 | _margin_ : '_0_', 142 | _overflow_y_ : '_scroll_', 143 | _padding_ : [[ '_2d5rem_', '_2rem_' ]] 144 | }, 145 | { _padding_ : [[ '_2d5rem_', '_2rem_' ]], // 4 146 | _color_ : '_color_font_', 147 | _font_family_ : '_font_sans_', 148 | _font_size_ : '_font_size_', 149 | _margin_ : '_0_', 150 | _overflow_y_ : '_scroll_' 151 | }, 152 | { _color_ : '_color_font_', //========= 5 153 | _font_family_ : '_font_sans_', 154 | _font_size_ : '_font_size_', 155 | _padding_ : [[ '_2d5rem_', '_2rem_' ]], 156 | _margin_ : '_0_', 157 | _overflow_y_ : '_scroll_' 158 | }, 159 | { _background_ : { //======================= 6 160 | _alt_list_ : [ 161 | [ '#f85032' ], 162 | [ '-moz-linear-gradient(left, #f85032 0%, #6d362d 100%)' ] 163 | ] 164 | } 165 | }, 166 | { _background_ : { //======================= 7 167 | _alt_list_ : [ 168 | [ '#f85032' ], 169 | '_xfff_', 170 | [[ '_2d5rem_', '_2rem_' ]], 171 | [[ '_2d5rem_', '_2rem_', [ 'holy-cow' ] ]] 172 | ] 173 | } 174 | }, 175 | { _background_ : { //======================= 8 176 | _alt_list_ : [ 177 | [ '#f85032' ], 178 | '_xfff_', 179 | [[ '_2d5rem_', '_2rem_' ]], 180 | [[ '_2d5rem_', '_2rem_', [ 'holy-cow' ] ]] 181 | ] 182 | }, 183 | _padding_ : [[ '_2d5rem_', '_2rem_' ]] 184 | }, 185 | { _padding_ : [[ '_2d5rem_', '_2rem_' ]], // 9 186 | _background_ : { 187 | _alt_list_ : [ 188 | [ '#f85032' ], 189 | '_xfff_', 190 | [[ '_2d5rem_', '_2rem_' ]], 191 | [[ '_2d5rem_', '_2rem_', [ 'holy-cow' ] ]] 192 | ] 193 | } 194 | }, 195 | { _margin_ : '_0_', //================= 10 196 | _padding_ : [[ '_2d5rem_', '_2rem_' ]], 197 | _overflow_y_ : '_scroll_', 198 | _background_ : { 199 | _alt_list_ : [ 200 | [ '#f85032' ], 201 | '_xfff_', 202 | [[ '_2d5rem_', '_2rem_' ]], 203 | [[ '_2d5rem_', '_2rem_', [ 'holy-cow' ], '_font_size_' ]] 204 | ] 205 | }, 206 | _font_family_ : '_font_sans_', 207 | _font_size_ : '_font_size_', 208 | _color_ : '_color_font_' 209 | }, 210 | { _margin_ : [[ //========================= 11 211 | '_2d5rem_', '_2rem_', [[ '_2rem_', '_font_size_' ]] 212 | ]] 213 | }, 214 | { _margin_ : '_0_', //================= 12 215 | _padding_ : [[ '_2d5rem_', '_2rem_' ]], 216 | _overflow_y_ : '_scroll_', 217 | _background_ : '_background_grad_', 218 | _font_family_ : '_font_sans_', 219 | _font_size_ : '_font_size_', 220 | _color_ : '_color_font_' 221 | } 222 | ], 223 | _05_input_list_ : [ 224 | // ==== test 00 225 | [ 226 | [ { _selector_str_ : '@font-face', 227 | _rule_map_ : { 228 | _font_family_ : [ 'fa45_mod_p6' ], 229 | _src_ : [ 230 | "url('font/fa-4.5-mod-perspica.eot?') format('embedded-opentype')," 231 | + "url('font/fa-4.5-mod-perspica.woff') format('woff')," 232 | + "url('font/fa-4.5-mod-perspica.ttf') format('truetype')" 233 | ] 234 | } 235 | }, 236 | 237 | { _begin_cond_str_ : 238 | '@media screen and (-webkit-min-device-pixel-ratio:0 )' 239 | }, 240 | { _selector_str_ : '@font-face', 241 | _rule_map_ : { 242 | _font_family_ : [ 'fa45_mod_p6' ], 243 | _src_ : [ "url('font/fa-4.5-mod-perspica.svg') format('svg')" ] 244 | } 245 | }, 246 | { _end_cond_str_ : '' } 247 | ] 248 | ], 249 | 250 | // ==== test 01 251 | [ 252 | [ 253 | { _begin_cond_str_ : '@media all and (max-width: 550px)' }, 254 | { _selector_str_ : '.p6-_box_.p6-_x_open_', 255 | _rule_map_ : { _padding_left_ : '_0_' } 256 | }, 257 | { _selector_str_ : '.p6-_shell_nav_.p6-_x_open_', 258 | _rule_map_ : { _width_ : '_100p_' } 259 | }, 260 | { _end_cond_str_ : '' } 261 | ], 262 | [ 263 | { _begin_cond_str_ : '@media all and (max-width: 550px)' }, 264 | { _selector_str_ : '.p6-_box_.p6-_x_open_', 265 | _rule_map_ : { _padding_left_ : '_1rem_' } 266 | }, 267 | { _selector_str_ : '.p6-_shell_nav_.p6-_x_open_', 268 | _rule_map_ : { _width_ : ['50rem'] } 269 | }, 270 | { _end_cond_str_ : '' } 271 | ] 272 | ], 273 | 274 | // ==== test 02 275 | [ 276 | [ 277 | { _begin_cond_str_ : '.foo' }, 278 | { _begin_cond_str_ : '.bar' }, 279 | { _begin_cond_str_ : '.bing' }, 280 | { _selector_str_ : '.baz', 281 | _rule_map_ : { _margin_ : '_0_' } 282 | }, 283 | { _end_cond_str_ : '' }, 284 | { _end_cond_str_ : '' }, 285 | { _end_cond_str_ : '' } 286 | ] 287 | ], 288 | 289 | // ==== test 03 290 | [ 291 | [ 292 | { _begin_cond_str_ : '.foo' }, 293 | { _selector_str_ : '.baz', 294 | _rule_map_ : { 295 | _top_ : '_0_', 296 | _margin_ : '_0_', 297 | _padding_ : '_1rem_' 298 | } 299 | }, 300 | { // Useless selector map 301 | _rule_map_ : { 302 | _top_ : '_0_', 303 | _margin_ : '_0_', 304 | _padding_ : '_1rem_' 305 | } 306 | }, 307 | { _end_cond_str_ : 'purposely-mis-matched' } 308 | ], 309 | [ 310 | { _begin_cond_str_ : '.foo' }, 311 | { _selector_str_ : '.baz', 312 | _rule_map_ : { 313 | _top_ : '_1rem_', 314 | _padding_ : '_0_' 315 | } 316 | }, 317 | { _end_cond_str_ : '.foo' } 318 | ] 319 | ], 320 | 321 | // ==== test 04 322 | [ 323 | [ 324 | { _begin_cond_str_ : '.foo' }, 325 | { _selector_str_ : '.baz', 326 | _rule_map_ : { 327 | _top_ : '_0_', 328 | _margin_ : '_0_', 329 | _padding_ : '_1rem_' 330 | } 331 | }, 332 | { _end_cond_str_ : '.foo' }, 333 | 334 | { _begin_cond_str_ : '.foo' }, 335 | { _selector_str_ : '.baz', 336 | _rule_map_ : { 337 | _top_ : '_1rem_', 338 | _padding_ : '_0_', 339 | _size_ : '_dne_', 340 | _dne0_ : '_1rem_', 341 | _dne1_ : '_dne_' 342 | } 343 | }, 344 | { _end_cond_str_ : '.foo' } 345 | ] 346 | ] 347 | ], 348 | 349 | _05_expect_list_ : [ 350 | "@font-face{font-family:fa45_mod_p6;src:url('font/fa-4.5-mod-perspica.eot?') format('embedded-opentype'),url('font/fa-4.5-mod-perspica.woff') format('woff'),url('font/fa-4.5-mod-perspica.ttf') format('truetype')}@media screen and (-webkit-min-device-pixel-ratio:0 ){@font-face{font-family:fa45_mod_p6;src:url('font/fa-4.5-mod-perspica.svg') format('svg')}}", 351 | 352 | "@media all and (max-width: 550px){.p6-_box_.p6-_x_open_{padding-left:1rem}.p6-_shell_nav_.p6-_x_open_{width:50rem}}", 353 | 354 | ".foo{.bar{.bing{.baz{margin:0}}}}", 355 | 356 | ".foo{.baz{top:1rem;margin:0;padding:0}}", 357 | 358 | ".foo{.baz{top:1rem;margin:0;padding:0}}" 359 | ] 360 | }, 361 | pcssObj 362 | ; 363 | // == . END MODULE SCOPE VARIABLES =================================== 364 | 365 | // == BEGIN NODEUNIT TESTS ============================================ 366 | function nextRuleMap04 () { 367 | var 368 | context_map = this, 369 | test_obj = context_map._test_obj_, 370 | rule_map_list = context_map._rule_map_list_, 371 | selector_map = { _selector_str_ : 'body' }, 372 | selector_list = [ selector_map ], 373 | 374 | expect_str, ret_data 375 | ; 376 | 377 | selector_map._rule_map_ = rule_map_list[ context_map._rule_map_idx_ ]; 378 | 379 | expect_str = 'Change vsheet _s02_'; 380 | ret_data = pcss._setVsheet_({ 381 | _vsheet_id_ : '_s02_', 382 | _mode_str_ : '_change_', 383 | _selector_list_ : selector_list, 384 | _regen_type_ : '_prepare_' 385 | }); 386 | 387 | test_obj.ok( ret_data === '_s02_', expect_str ); 388 | context_map._rule_map_idx_++; 389 | if ( context_map._rule_map_idx_ < rule_map_list.length ) { 390 | setTimeout( nextRuleMap04.bind( context_map ), intervalMs ); 391 | } 392 | } 393 | 394 | function onPrepared04 ( event_obj ) { 395 | var 396 | context_map = this, 397 | test_obj = context_map._test_obj_, 398 | expect_list = context_map._expect_list_, 399 | 400 | expect_str, css_str, ret_data; 401 | 402 | expect_str = 'Event object should provide cascade_id'; 403 | test_obj.ok( event_obj._data_ === '_c02_', expect_str ); 404 | 405 | css_str = '"body{' + expect_list[ context_map._prepared_idx_ ] + '}"'; 406 | expect_str = 'css string matches expected'; 407 | ret_data = pcss._getAssetJson_({ 408 | _asset_id_ : '_c02_', 409 | _asset_type_ : '_cascade_', 410 | _asset_subtype_ : '_css_str_' 411 | }); 412 | 413 | test_obj.ok( ret_data === css_str, expect_str ); 414 | context_map._prepared_idx_++; 415 | if ( context_map._prepared_idx_ === context_map._rule_map_list_.length ) { 416 | test_obj.done(); 417 | } 418 | } 419 | 420 | function nextCascade05 () { 421 | var 422 | context_map = this, 423 | test_obj = context_map._test_obj_, 424 | input_list = context_map._input_list_, 425 | cascade_list = input_list[ context_map._input_idx_ ], 426 | cascade_id = 'c' + String(context_map._input_idx_), 427 | vsheet_id_list = [], 428 | 429 | i, selector_list, vsheet_id, 430 | expect_str, ret_data 431 | ; 432 | 433 | for ( i = __0 ; i < cascade_list.length; i++ ) { 434 | selector_list = cascade_list[ i ]; 435 | vsheet_id = 's' + String( i ) + cascade_id; 436 | expect_str = 'Vsheet id is ' + vsheet_id; 437 | 438 | ret_data = pcss._setVsheet_({ 439 | _vsheet_id_ : vsheet_id, 440 | _mode_str_ : '_add_', 441 | _selector_list_ : selector_list, 442 | _regen_type_ : '_prepare_' 443 | }); 444 | test_obj.ok( ret_data === vsheet_id, expect_str ); 445 | vsheet_id_list.push( vsheet_id ); 446 | } 447 | 448 | expect_str = 'Add cascade ' + cascade_id; 449 | ret_data = pcss._setCascade_({ 450 | _cascade_id_ : cascade_id, 451 | _mode_str_ : '_add_', 452 | _vsheet_id_list_ : vsheet_id_list, 453 | _regen_type_ : '_use_' 454 | }); 455 | test_obj.ok( ret_data === cascade_id, expect_str ); 456 | 457 | // ret_data = pcss._setCascade_( { 458 | // _cascade_id_ : cascade_id, 459 | // _mode_str_ : '_change_', 460 | // _regen_type_ : '_use_' 461 | // }); 462 | // test_obj.ok( ret_data === cascade_id, expect_str ); 463 | 464 | context_map._input_idx_++; 465 | if ( context_map._input_idx_ < input_list.length ) { 466 | setTimeout( nextCascade05.bind( context_map ), intervalMs ); 467 | } 468 | } 469 | 470 | function onPrepared05 ( event_obj ) { 471 | var 472 | context_map = this, 473 | test_obj = context_map._test_obj_, 474 | expect_list = context_map._expect_list_, 475 | cascade_id = 'c' + String(context_map._prepared_idx_), 476 | 477 | expect_str, css_str, ret_data; 478 | 479 | expect_str = 'Event object should provide cascade_id ' + cascade_id; 480 | test_obj.ok( event_obj._data_ === cascade_id, expect_str ); 481 | 482 | css_str = '"' + expect_list[ context_map._prepared_idx_ ] + '"'; 483 | 484 | ret_data = pcss._getAssetJson_({ 485 | _asset_id_ : cascade_id, 486 | _asset_type_ : '_cascade_', 487 | _asset_subtype_ : '_css_str_' 488 | }); 489 | 490 | expect_str = 'return data |' + ret_data 491 | + '| matches expected css_str |' + css_str + '|'; 492 | test_obj.ok( ret_data === css_str, expect_str ); 493 | context_map._prepared_idx_++; 494 | if ( context_map._prepared_idx_ === context_map._input_list_.length ) { 495 | test_obj.done(); 496 | } 497 | } 498 | 499 | function loadFreshPcssObj () { 500 | var 501 | win_obj = new jsdomObj.JSDOM().window, 502 | doc_obj = win_obj.document 503 | ; 504 | 505 | pcssObj = null; 506 | delete require.cache[ configMap._file_core_name_ ]; 507 | delete require.cache[ configMap._file_cfg_name_ ]; 508 | 509 | global.window = win_obj; 510 | global.document = doc_obj; 511 | 512 | pcssObj = require( configMap._file_core_name_ ); 513 | global.pcss = pcssObj; 514 | require( configMap._file_cfg_name_ ); 515 | 516 | } 517 | 518 | // == BEGIN test 010 testInit ========================================= 519 | function testInit ( test_obj ) { 520 | var 521 | method_list = [ '_setVsheet_', '_setCascade_', '_togglePcss_' ], 522 | method_count = method_list.length, 523 | 524 | i, method_key, expect_str, ret_data 525 | ; 526 | 527 | loadFreshPcssObj(); 528 | test_obj.expect( 6 ); 529 | 530 | expect_str = 'pcssObj and pcss should point to same object'; 531 | test_obj.ok( pcssObj === pcss, expect_str ); 532 | 533 | for ( i = __0; i < method_count; i++ ) { 534 | method_key = method_list[ i ]; 535 | expect_str = 'method ' + method_key 536 | + ' should fail prior to _initModule_'; 537 | try { ret_data = pcssObj[ method_key ](); } 538 | catch( error ) { ret_data = error; } 539 | test_obj.ok( 540 | ret_data === '_please_run_initmodule_first_', 541 | expect_str 542 | ); 543 | } 544 | 545 | expect_str = '_init_module_ should return "pcss-"'; 546 | try { ret_data = pcssObj._initModule_(); } 547 | catch( error ) { ret_data = error; } 548 | test_obj.ok( ret_data === 'pcss-', expect_str, ret_data ); 549 | 550 | expect_str = 'Initial toggle should return false'; 551 | try { ret_data = pcssObj._togglePcss_(); } 552 | catch( error ) { ret_data = error; } 553 | test_obj.ok( ret_data === false, expect_str ); 554 | 555 | test_obj.done(); 556 | } 557 | // == . END test 010 testInit ========================================= 558 | 559 | // == BEGIN test 020 extendRuleMap ==================================== 560 | function extendRuleMap ( test_obj ) { 561 | var base_map, extend_map, check_map, expect_str, ret_data; 562 | 563 | loadFreshPcssObj(); 564 | test_obj.expect( 14 ); 565 | 566 | expect_str = '_init_module_ should return "nu-"'; 567 | ret_data = pcssObj._initModule_({ _style_el_prefix_ : 'nu' }); 568 | test_obj.ok( ret_data === 'nu-', expect_str ); 569 | 570 | expect_str = 'base_map should be empty'; 571 | base_map = {}; 572 | extend_map = {}; 573 | check_map = {}; 574 | ret_data = pcssObj._extendRuleMap_( base_map, extend_map ); 575 | test_obj.deepEqual( base_map, check_map, expect_str ); 576 | test_obj.ok( ret_data === base_map, expect_str ); 577 | 578 | expect_str = 'base_map should be empty as null keys delete'; 579 | base_map = {}; 580 | extend_map = { foo : null }; 581 | check_map = {}; 582 | ret_data = pcssObj._extendRuleMap_( base_map, extend_map ); 583 | test_obj.deepEqual( base_map, check_map, expect_str ); 584 | test_obj.ok( ret_data === base_map, expect_str ); 585 | 586 | expect_str = 'base_map should be empty as null keys delete'; 587 | base_map = { foo : 'fred' }; 588 | extend_map = { foo : null }; 589 | check_map = {}; 590 | ret_data = pcssObj._extendRuleMap_( base_map, extend_map ); 591 | test_obj.deepEqual( base_map, check_map, expect_str ); 592 | test_obj.ok( ret_data === base_map, expect_str ); 593 | 594 | expect_str = 'base_map should retain "red" key'; 595 | base_map = { foo : 'fred', red : '#f00' }; 596 | extend_map = { foo : null }; 597 | check_map = { red : '#f00' }; 598 | ret_data = pcssObj._extendRuleMap_( base_map, extend_map ); 599 | test_obj.deepEqual( base_map, check_map, expect_str ); 600 | test_obj.ok( ret_data === base_map, expect_str ); 601 | 602 | expect_str = 'base_map should be empty as null keys delete'; 603 | base_map = { foo : 'fred', red : '#f00' }; 604 | extend_map = { foo : null, red : null }; 605 | check_map = {}; 606 | ret_data = pcssObj._extendRuleMap_( base_map, extend_map ); 607 | test_obj.deepEqual( base_map, check_map, expect_str ); 608 | test_obj.ok( ret_data === base_map, expect_str ); 609 | 610 | expect_str = 'base_map should match complex results'; 611 | base_map = configMap._02_base_map_; 612 | extend_map = configMap._02_extend_map_; 613 | check_map = configMap._02_check_map_; 614 | ret_data = pcssObj._extendRuleMap_( base_map, extend_map ); 615 | test_obj.deepEqual( base_map, check_map, expect_str ); 616 | test_obj.ok( ret_data === base_map, expect_str ); 617 | 618 | expect_str = '_init_module_ again should return "nu-" regardless of args'; 619 | ret_data = pcssObj._initModule_({ _style_el_prefix_ : 'foo' }); 620 | test_obj.ok( ret_data === 'nu-', expect_str ); 621 | 622 | test_obj.done(); 623 | } 624 | // == . END test 020 extendRuleMap ==================================== 625 | 626 | // == BEGIN test 030 createVSheets ==================================== 627 | function createVSheets ( test_obj ) { 628 | var 629 | s00_selector_list = [ 630 | { _selector_str_ : 'body', 631 | _rule_lock_list_ : [ '_font_size_' ], 632 | _rule_map_ : { 633 | _margin_ : '_0_', 634 | _font_size_ : '_1d5rem_' 635 | } 636 | } 637 | ], 638 | s01_selector_list = [ 639 | { _selector_str_ : 'body', 640 | _rule_map_ : { 641 | _margin_ : '_2rem_', 642 | _font_size_ : '_2rem_' 643 | } 644 | } 645 | ], 646 | expect_str, ret_data; 647 | 648 | loadFreshPcssObj(); 649 | test_obj.expect( 17 ); 650 | 651 | expect_str = 'Stylesheet count should === 0'; 652 | ret_data = document.styleSheets.length; 653 | test_obj.ok( ret_data === __0, expect_str + ' NOT ' + ret_data ); 654 | 655 | expect_str = '_init_module_ should return "foo-"'; 656 | ret_data = pcssObj._initModule_({ _style_el_prefix_ : 'foo' }); 657 | test_obj.ok( ret_data === 'foo-', expect_str ); 658 | 659 | expect_str = 'Stylesheet count should === 2'; 660 | ret_data = document.styleSheets.length; 661 | test_obj.ok( ret_data === 2, expect_str + ' NOT ' + ret_data ); 662 | 663 | expect_str = 'Add vsheet _s00_'; 664 | ret_data = pcss._setVsheet_({ 665 | _vsheet_id_ : '_s00_', 666 | _mode_str_ : '_add_', 667 | _selector_list_ : s00_selector_list 668 | }); 669 | test_obj.ok( ret_data === '_s00_', expect_str ); 670 | 671 | expect_str = 'Vsheet _s00_ JSON is as expected'; 672 | ret_data = pcss._getAssetJson_({ 673 | _asset_id_ : '_s00_', 674 | _asset_type_ : '_vsheet_', 675 | _asset_subtype_ : '_selector_list_' 676 | }); 677 | test_obj.ok( ret_data === configMap._03_json_01_, expect_str ); 678 | 679 | expect_str = 'Add vsheet _s01_'; 680 | ret_data = pcss._setVsheet_({ 681 | _vsheet_id_ : '_s01_', 682 | _mode_str_ : '_add_', 683 | _selector_list_ : s01_selector_list 684 | }); 685 | test_obj.ok( ret_data === '_s01_', expect_str ); 686 | 687 | expect_str = 'Vsheet _s01_ JSON is as expected'; 688 | ret_data = pcss._getAssetJson_({ 689 | _asset_id_ : '_s01_', 690 | _asset_type_ : '_vsheet_', 691 | _asset_subtype_ : '_selector_list_' 692 | }); 693 | test_obj.ok( ret_data === configMap._03_json_02_, expect_str ); 694 | 695 | expect_str = 'Add cascade _c00_'; 696 | ret_data = pcss._setCascade_({ 697 | _cascade_id_ : '_c00_', 698 | _mode_str_ : '_add_', 699 | _vsheet_id_list_ : [ '_s00_', '_s01_' ], 700 | _regen_type_ : '_none_' 701 | }); 702 | test_obj.ok( ret_data === '_c00_', expect_str ); 703 | 704 | expect_str = 'cascade css_str is empty before processing'; 705 | ret_data = pcss._getAssetJson_({ 706 | _asset_id_ : '_c00_', 707 | _asset_type_ : '_cascade_', 708 | _asset_subtype_ : '_css_str_' 709 | }); 710 | test_obj.ok( ret_data === '""', expect_str ); 711 | 712 | expect_str = 'cascade merged_selector_list is empty before processing'; 713 | ret_data = pcss._getAssetJson_({ 714 | _asset_id_ : '_c00_', 715 | _asset_type_ : '_cascade_', 716 | _asset_subtype_ : '_merged_selector_list_' 717 | }); 718 | test_obj.ok( ret_data === undefined, expect_str ); 719 | 720 | expect_str = 'Change cascade _c00_ _regen_type_ to _merge_'; 721 | ret_data = pcss._setCascade_({ 722 | _cascade_id_ : '_c00_', 723 | _mode_str_ : '_change_', 724 | _regen_type_ : '_merge_' 725 | }); 726 | test_obj.ok( ret_data === '_c00_', expect_str ); 727 | 728 | expect_str = 'cascade css_str is empty after merge'; 729 | ret_data = pcss._getAssetJson_({ 730 | _asset_id_ : '_c00_', 731 | _asset_type_ : '_cascade_', 732 | _asset_subtype_ : '_css_str_' 733 | }); 734 | test_obj.ok( ret_data === '""', expect_str ); 735 | 736 | expect_str = 'cascade merged_selector_list is populated after _merge_'; 737 | ret_data = pcss._getAssetJson_({ 738 | _asset_id_ : '_c00_', 739 | _asset_type_ : '_cascade_', 740 | _asset_subtype_ : '_merged_selector_list_' 741 | }); 742 | test_obj.ok( ret_data === configMap._03_merged_01_, expect_str ); 743 | 744 | expect_str = 'Change cascade _c00_ _regen_type_ to _prepare_'; 745 | ret_data = pcss._setCascade_({ 746 | _cascade_id_ : '_c00_', 747 | _mode_str_ : '_change_', 748 | _regen_type_ : '_prepare_' 749 | }); 750 | test_obj.ok( ret_data === '_c00_', expect_str ); 751 | 752 | expect_str = 'cascade css_str is populated after _prepare_'; 753 | ret_data = pcss._getAssetJson_({ 754 | _asset_id_ : '_c00_', 755 | _asset_type_ : '_cascade_', 756 | _asset_subtype_ : '_css_str_' 757 | }); 758 | test_obj.ok( ret_data === '"body{margin:2rem;font-size:1.5rem}"', expect_str ); 759 | document.addEventListener( '_pcss_prepared_', 760 | function( event_obj ){ 761 | expect_str = 'Event object should provide cascade_id'; 762 | test_obj.ok( event_obj._data_ === '_c00_', expect_str ); 763 | 764 | expect_str = 'Lock on font_size removed: '; 765 | try { 766 | ret_data = pcss._getAssetJson_({ 767 | _asset_id_ : '_c00_', 768 | _asset_type_ : '_cascade_', 769 | _asset_subtype_ : '_css_str_' 770 | }); 771 | } 772 | catch( error ) { ret_data = error; } 773 | 774 | test_obj.ok( 775 | ret_data === '"body{margin:2rem;font-size:2rem}"', 776 | expect_str + ret_data 777 | ); 778 | test_obj.done(); 779 | } 780 | ); 781 | 782 | // setTimeout gives the event queue time to pause which fixes 783 | // sporadic errors in the event handler above 784 | setTimeout( function () { 785 | expect_str = 'Remove _rule_lock_list_ from s00'; 786 | delete s00_selector_list[__0]._rule_lock_list_; 787 | try { 788 | ret_data = pcss._setVsheet_({ 789 | _vsheet_id_ : '_s00_', 790 | _mode_str_ : '_change_', 791 | _selector_list_ : s00_selector_list 792 | }); 793 | } 794 | catch( error ) { ret_data = error; } 795 | test_obj.ok( ret_data === '_s00_', expect_str ); 796 | }, intervalMs ); 797 | } 798 | // == .END test 030 createVSheets ===================================== 799 | 800 | // == BEGIN test 040 checkResolver ==================================== 801 | function checkResolver ( test_obj ) { 802 | var 803 | input_list = configMap._04_rule_map_list_, 804 | expect_list = configMap._04_expect_list_, 805 | 806 | context_map, expect_str, ret_data, 807 | fn_next_rule_map, fn_onprepared 808 | ; 809 | 810 | loadFreshPcssObj(); 811 | test_obj.expect( 41 ); 812 | 813 | context_map = { 814 | _rule_map_list_ : input_list, 815 | _expect_list_ : expect_list, 816 | _test_obj_ : test_obj, 817 | 818 | _prepared_idx_ : __0, 819 | _rule_map_idx_ : __0 820 | }; 821 | 822 | fn_next_rule_map = nextRuleMap04.bind( context_map ); 823 | fn_onprepared = onPrepared04.bind( context_map ); 824 | document.addEventListener( '_pcss_prepared_', fn_onprepared ); 825 | 826 | expect_str = '_init_module_ should return "bar-"'; 827 | try { ret_data = pcssObj._initModule_({ _style_el_prefix_ : 'bar' }); } 828 | catch( error ) { ret_data = error; } 829 | test_obj.ok( ret_data === 'bar-', expect_str ); 830 | 831 | expect_str = 'Add vsheet _s02_'; 832 | try { 833 | ret_data = pcss._setVsheet_({ 834 | _vsheet_id_ : '_s02_', 835 | _mode_str_ : '_add_', 836 | _mixin_map_ : configMap._04_mixin_map_ 837 | }); 838 | } 839 | catch( error ) { ret_data = error; } 840 | test_obj.ok( ret_data === '_s02_', expect_str ); 841 | 842 | expect_str = 'Add cascade _c02_'; 843 | try { 844 | ret_data = pcss._setCascade_({ 845 | _cascade_id_ : '_c02_', 846 | _mode_str_ : '_add_', 847 | _vsheet_id_list_ : [ '_s02_' ], 848 | _regen_type_ : '_none_' 849 | }); 850 | } 851 | catch( error ) { ret_data = error; } 852 | test_obj.ok( ret_data === '_c02_', expect_str ); 853 | 854 | fn_next_rule_map(); 855 | } 856 | // == . END test 040 checkResolver ==================================== 857 | 858 | // == BEGIN test 050 makeCascades ===================================== 859 | function makeCascades ( test_obj ) { 860 | var 861 | input_list = configMap._05_input_list_, 862 | expect_list = configMap._05_expect_list_, 863 | 864 | context_map, expect_str, ret_data, 865 | fn_next_cascade, fn_onprepared 866 | ; 867 | 868 | loadFreshPcssObj(); 869 | test_obj.expect( 22 ); 870 | 871 | context_map = { 872 | _input_list_ : input_list, 873 | _expect_list_ : expect_list, 874 | _test_obj_ : test_obj, 875 | 876 | _prepared_idx_ : __0, 877 | _input_idx_ : __0 878 | }; 879 | 880 | fn_next_cascade = nextCascade05.bind( context_map ); 881 | fn_onprepared = onPrepared05.bind( context_map ); 882 | document.addEventListener( '_pcss_prepared_', fn_onprepared ); 883 | 884 | expect_str = '_init_module_ should return "bar-"'; 885 | try { ret_data = pcssObj._initModule_({ _style_el_prefix_ : 'bar' }); } 886 | catch( error ) { ret_data = error; } 887 | test_obj.ok( ret_data === 'bar-', expect_str ); 888 | 889 | fn_next_cascade(); 890 | } 891 | // == . END test 050 makeCascades ===================================== 892 | 893 | // == BEGIN test 060 getData ========================================== 894 | function getData ( test_obj ) { 895 | var expect_str, ret_data, ret_map, key_list; 896 | 897 | test_obj.expect( 16 ); 898 | 899 | // ======= 900 | expect_str = 'global mixin map is empty'; 901 | ret_data = pcssObj._getAssetJson_({ 902 | _asset_type_ : '_global_mixin_map_' 903 | }); 904 | test_obj.ok( ret_data === '{}', expect_str ); 905 | 906 | // ======= 907 | expect_str = 'global mixin map is set as expected'; 908 | ret_data = pcssObj._setGlobalMixinMap_({ 909 | _mixin_map_ : { foo : 'bar' }, 910 | _change_type_ : '_replace_', 911 | _regen_type_ : '_all_' 912 | }); 913 | ret_data = pcssObj._getAssetJson_({ 914 | _asset_type_ : '_global_mixin_map_' 915 | }); 916 | test_obj.ok( ret_data === '{"foo":"bar"}', expect_str ); 917 | 918 | // ======= 919 | expect_str = 'global mixin map is replaced as expected'; 920 | ret_data = pcssObj._setGlobalMixinMap_({ 921 | _mixin_map_ : { bing : 'bang' }, 922 | _change_type_ : '_replace_', 923 | _regen_type_ : '_all_' 924 | }); 925 | ret_data = pcssObj._getAssetJson_({ 926 | _asset_type_ : '_global_mixin_map_' 927 | }); 928 | test_obj.ok( ret_data === '{"bing":"bang"}', expect_str ); 929 | 930 | // ======= 931 | expect_str = 'global mixin map is merged as expected'; 932 | ret_data = pcssObj._setGlobalMixinMap_({ 933 | _mixin_map_ : { foo : 'bar' }, 934 | _change_type_ : '_merge_', 935 | _regen_type_ : '_all_' 936 | }); 937 | ret_data = pcssObj._getAssetJson_({ 938 | _asset_type_ : '_global_mixin_map_' 939 | }); 940 | ret_map = JSON.parse( ret_data ); 941 | test_obj.deepEqual( ret_map, {bing:'bang',foo:'bar'}, expect_str ); 942 | 943 | // ======= 944 | // This is the list of cascade ids in-use in the two stylesheets. 945 | // It is normal to have the same id. 946 | expect_str = 'Element cascade list is ["c4","c4"]'; 947 | ret_data = pcssObj._getAssetJson_({ 948 | _asset_type_ : '_el_cascade_list_' 949 | }); 950 | test_obj.ok( ret_data === '["c4","c4"]', expect_str ); 951 | 952 | // ======= 953 | expect_str = 'Element cascade list is ["c2","c4"]'; 954 | ret_data = pcss._setCascade_({ 955 | _cascade_id_ : 'c2', 956 | _mode_str_ : '_change_', 957 | _regen_type_ : '_use_' 958 | }); 959 | 960 | ret_data = pcssObj._getAssetJson_({ 961 | _asset_type_ : '_el_cascade_list_' 962 | }); 963 | test_obj.ok( ret_data === '["c2","c4"]', expect_str ); 964 | 965 | // ======= 966 | expect_str = 'List of cascade ids'; 967 | ret_data = pcssObj._getAssetIdList_({ 968 | _asset_type_ : '_cascade_' 969 | }); 970 | test_obj.deepEqual( ret_data, [ 'c0', 'c1', 'c2', 'c3', 'c4' ], expect_str ); 971 | 972 | // ======= 973 | expect_str = 'Try to add an existing cascade id'; 974 | ret_data = pcssObj._setCascade_({ 975 | _cascade_id_ : 'c2', 976 | _mode_str_ : '_add_', 977 | _vsheet_list_ : [] 978 | }); 979 | test_obj.ok( ret_data === undefined, expect_str ); 980 | 981 | // // ======= 982 | // expect_str = 'Try to add non-existing vsheet ids' 983 | // ret_data = pcssObj._setCascade_({ 984 | // _cascade_id_ : 'c2', 985 | // _mode_str_ : '_change_', 986 | // _vsheet_list_ : [ 'a', 'b', 'c' ] 987 | // }); 988 | // console.warn( '>>>', ret_data ); 989 | // test_obj.ok( ret_data === undefined, expect_str ); 990 | 991 | // ======= 992 | // Delete active cascade? 993 | ret_data = pcss._setCascade_({ 994 | _cascade_id_ : 'c2', 995 | _mode_str_ : '_delete_' 996 | }); 997 | expect_str = 'Element cascade list is [null,"c4"]'; 998 | ret_data = pcssObj._getAssetJson_({ 999 | _asset_type_ : '_el_cascade_list_' 1000 | }); 1001 | test_obj.ok( ret_data === '[null,"c4"]', expect_str ); 1002 | 1003 | // ======= 1004 | expect_str = 'List of cascade ids with c2 deleted'; 1005 | ret_data = pcssObj._getAssetIdList_({ 1006 | _asset_type_ : '_cascade_' 1007 | }); 1008 | test_obj.deepEqual( ret_data, [ 'c0', 'c1', 'c3', 'c4' ], expect_str ); 1009 | 1010 | // ======= 1011 | // Mode not supported 1012 | ret_data = pcss._setCascade_({ 1013 | _cascade_id_ : 'c0', 1014 | _mode_str_ : '_foo_bar_' 1015 | }); 1016 | expect_str = 'Mode not supported, returns undefined'; 1017 | test_obj.ok( ret_data === undefined, expect_str ); 1018 | 1019 | // ======= 1020 | // No longer existant ID 1021 | ret_data = pcss._setCascade_({ 1022 | _cascade_id_ : 'c2', 1023 | _mode_str_ : '_change_', 1024 | _regen_type_ : '_use_' 1025 | }); 1026 | expect_str = 'Cascade removed, returns undefined'; 1027 | test_obj.ok( ret_data === undefined, expect_str ); 1028 | 1029 | // ======= 1030 | expect_str = 'List of vsheet ids'; 1031 | ret_data = pcssObj._getAssetIdList_({ 1032 | _asset_type_ : '_vsheet_' 1033 | }); 1034 | test_obj.deepEqual( ret_data, [ 1035 | 's0c0', 's0c1', 's1c1', 's0c2', 's0c3', 's1c3', 's0c4' 1036 | ], expect_str 1037 | ); 1038 | 1039 | // ======= 1040 | expect_str = 'Unsupported asset time'; 1041 | ret_data = pcssObj._getAssetIdList_({ 1042 | _asset_type_ : '_unsupported_' 1043 | }); 1044 | test_obj.deepEqual( ret_data, [], expect_str ); 1045 | 1046 | // ======= 1047 | expect_str = 'Set body font size'; 1048 | ret_data = pcssObj._setStyleAttr_({ 1049 | _selector_str_ : 'body', 1050 | _attr_key_ : 'font-size', 1051 | _attr_val_ : '16px' 1052 | }); 1053 | 1054 | // ======= 1055 | expect_str = 'cssKeyMap is not empty'; 1056 | ret_data = pcssObj._getCssKeyMap_(); 1057 | key_list = Object.keys( ret_data ); 1058 | test_obj.ok( key_list.length > 0, expect_str ); 1059 | 1060 | // ======= 1061 | expect_str = 'cssValMap is not empty'; 1062 | ret_data = pcssObj._getCssValMap_(); 1063 | key_list = Object.keys( ret_data ); 1064 | test_obj.ok( key_list.length > 0, expect_str ); 1065 | 1066 | test_obj.done(); 1067 | } 1068 | // == . END test 060 getData ========================================== 1069 | 1070 | module.exports = { 1071 | testInit : testInit, 1072 | extendRuleMap : extendRuleMap, 1073 | createVSheets : createVSheets, 1074 | checkResolver : checkResolver, 1075 | makeCascades : makeCascades, 1076 | getData : getData 1077 | }; 1078 | --------------------------------------------------------------------------------