jss.javascript.txt

                                  ┏━━━━━━━━━┓
                                  ┃   JSS   ┃
                                  ┗━━━━━━━━━┛

ALTERNATIVES ==>                  #JSS:
                                  #  - injected as <style>, inline style, 'CSS'
                                  #  - syntax: object with .CLASS-like, @media
                                  #  - no DOM required
                                  #CSSX:
                                  #  - injected as <style>, 'CSS'
                                  #  - syntaxes:
                                  #     - object with any standard CSS, including nesting
                                  #     - <style> 'CSSX_STR':
                                  #        - standard CSS + JavaScript {{EXPR}}
                                  #        - can be used with JSS
                                  #  - DOM required
                                  #  - good support for plugins, mixins and minification
                                  #aphrodite:
                                  #  - injected as <style>, 'CSS'
                                  #     - harder to retrieve 'CSS'
                                  #     - <style> injection less powerful
                                  #  - syntax: object with .CLASS-like, @media, :PSEUDO
                                  #Prefer:
                                  #  - JSS + CSSX_STR: simpler, DOM not required
                                  #  - CSSX + CSSX_STR: more flexible, more complex, DOM required

VERSION ==>                       #3.2.0

                                  ┌──────────┐
                                  │   MAIN   │
                                  └──────────┘

JSS.create()->JSSI                #

JSSI.createStyleSheet             #JSS_OBJ is { SELECTOR: RULES ... }:
(JSS_OBJ[, CONF])->SHEET          #  - RULES: like CSS accessed in JavaScript (i.e. ELEM.styles RULES)
                                  #  - SELECTOR: unless CONF.named false, can only be:
                                  #     - '@media ...'
                                  #     - KEY, which will be converted to a .CLASS namespaced for this JSSI,
                                  #       accessible at SHEET.classes.KEY (e.g. .KEY--jss-ID)
                                  #CONF:
                                  #  - media 'MEDIAQUERY': <style> media HTML attribute
                                  #  - meta OBJ: debug information
                                  #  - link BOOL (def: false): make RULES reference to CSSRule, so that it updates
                                  #    <style> when changed (slower)
SHEET.addRules(JSS_OBJ[, CONF])   #
SHEET.addRule
(['SELECTOR',]RULES[,CONF])->RULES#
JSSI.createRule(...)->RULES       #Same as SHEET.addRule(...) but without a SHEET
SHEET.getRule('SLCTOR')->RULES    #
SHEET.toString()->'CSS'           #

RULES.applyTo(ELEM)               #Add to ELEM using ELEM.style
RULES.prop('PROP'[, VAL])         #Get/set
RULES.toJSON()                    #
RULES.toString()->'CSS'           #

SHEET.attach()                    #Inject output CSS as <style> in DOM
SHEET.detach()                    #Cleanup (good idea for performance)

                                  ┌─────────────┐
                                  │   PLUGINS   │
                                  └─────────────┘

JSSI.use(FUNC(RULES))             #Plugin declaration

JSS-NESTED()->FUNC                #Version 1.0.0
                                  #Allow nesting rules like in Sass/Less, including using '&'

JSS-EXTEND()->FUNC                #Version 1.1.0
                                  #Allow using 'extend': 'SELECTOR'|RULES as { PROP: VAL }
                                  #to include another set of props (like in Sass/Less)

JSS-VENDOR-PREFIX()->FUNC         #Version 1.0.0
                                  #Adds vendor prefix to PROP according to current user agent.

JSS-CAMEL-CASE()->FUNC            #Version 1.0.0
                                  #Transform PROP from dasherized to camelcase.

JSS-PX()->FUNC                    #Version 1.0.0
                                  #Transform NUM to "NUMpx" for the relevant properties

JSS-PROPS-SORT()->FUNC            #Version 1.0.0
                                  #Reorder props so that shorcut properties are before non-shortcut ones.

                                  ┌────────────────┐
                                  │   CONVERSION   │
                                  └────────────────┘

jss FILE.css                      #Outputs JSS
                                  #Module jss-cli (2.0.0)
--pretty                          #
--format cjs                      #Adds module.exports = OBJ

JSS-CLI.cssToJss(STR)->OBJ        #As Node module