cssx.javascript.txt

                                  ┏━━━━━━━━━━┓
                                  ┃   CSSX   ┃
                                  ┗━━━━━━━━━━┛

ALTERNATIVES ==>                  #See JSS

VERSION ==>                       #5.2.0

CSSX(['ID'])->SHEET               #Def 'ID': '_cssxNUM' (incremental NUM)
CSSX.getStylesheets()->SHEET_ARR  #
CSSX.getCSS()->'CSS'              #For all SHEET
CSSX.clear()                      #Removes all SHEET

SHEET.add(CSSX_OBJ)->RULES[_ARR]  #CSSX_OBJ:
                                  #  - any SELECTOR, including nesting
                                  #  - can be used as JSS_OBJ (but not always the inverse)
SHEET|RULES.update(CSSXOBJ)
->RULES[_ARR]                     #
SHEET.rules()->RULES_ARR          #
SHEET.compile[Immediate]()        #Inject <style id="ID">
                                  #Called by SHEET.add() if CSSX.domChanges(BOOL) true (def)
SHEET.getCSS()->'CSS'             #
SHEET.id()->'ID'                  #
SHEET.clear()                     #Removes all RULES

SHEET.scope('SELECTOR')           #Prepends all selectors with 'SELECTOR' + ' '
RULES.descendant(CSSX_OBJ)->RULES2#Same as SHEET.add(CSSX_OBJ), but prepends all selectors with parent selector + ' '
RULES.nested(CSSX_OBJ)->RULES2    #Same as RULES.descendant() except use Sass-like nesting
                                  #Useful to output Sass-like syntax, or to support @RULE nesting

CSSX.minify(BOOL)                 #Minify CSS (def: true)
CSSX.nextTick(BOOL)               #Wait for requestAnimationFrame() to set <style> (def: true) for:
                                  #  - SHEET.update()
                                  #  - SHEET.compile(), but not compileImmediate()

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

SHEET.define
('MIXIN', FUNC(VAL)->OBJ)         #Allow using { MIXIN: VAL } in CSSX_OBJ, where output OBJ will be merged in { ... }
CSSX.plugins(PLUGIN_ARR)          #PLUGIN:
                                  #  - FUNC(CSSX_OBJ)->CSSX_OBJ
                                  #  - POSTCSS PLUGIN, by using POSTCSS-JS.sync(POSTCSS_PLUGIN_ARR)(CSSX_OBJ) as PLUGIN

                                  ┌──────────┐
                                  │   CSSX   │
                                  └──────────┘

<style>CSS</style>                #CSSX_STR. Transpiled to CSSX_OBJ
                                  #CSS can also be a rule without SELECTOR
                                  #Can embed JavaScript using {{ EXPR }} or <% EXPR %>
                                  #CSSX can include any standard CSS, including nesting

CSSX-TRANSPILER('JS'[,OPTS])->'JS'#Transpile CSSX_STR to CSSX_OBJ
                                  #OPTS:
                                  #  - minified BOOL (def: false)
                                  #  - compact BOOL (def: false)
                                  #  - concise BOOL (def: false)
                                  #  - quotes 'single' (def) or 'double'
                                  #  - sourceMaps BOOL (def: false)
CSSX-TRANSPILER.ast('JS')->OBJ    #Returns AST
CSSX-TRANSPILER.reset()           #

cssx -i FILE.js... -o DIR         #CLI for CSSX-TRANSPILER
-m js|css                         #Outputs JSS_OBJ (def) or CSS