css-node
a fast nodejs css pre-processor that lets you use javascript to create css
Documentation
- About
- Installation
- Setup
- Starters
- Rules
- Config
- Imports
- Includes
- Globals
- Mixins
- Helpers
- css-node helpers
About
css-node is a zero dependency highly extendable object oriented css pre-processor that uses valid javascript to construct css.
The goal of css-node is to create a nodejs based css pre-processor that is only limited by the capabilities of the nodejs javascript implementation and not confined to the limitations of it's own api.
Installation
npm
$ npm install css-node
git
$ git clone https://github.com/angeal185/css-node.git
Setup
nodejs setup API
const init = // build initial project setup ~ should only be called once
const build watch = // watch files listed at config.watch.files
command line only
commands valid within css-node dir
init app
$ npm run init
build css
$ npm run build
watch files and build on change
$ npm run watch
Starters
css-node starters are css files that have been converted to js for use in includes.
the starters could also be used as a basic reference for code format
css-node currently has starter include files for the following frameworks:
Rules
- single quotes should only ever be used within double quoted strings
Config
- the config file should be named
ncss
and be within your working dir - the config file can be in the format of either
.js
or.json
- config values are constant throughout the execution of css-node
json example:
// ./ncss.json "dest": "/ncss/dist/app.min.css" // "globals": "/ncss/globals" // false || globals require path relative to cwd "mixins": "/ncss/mixins" // false || mixins require path relative to cwd "helpers": "/ncss/helpers" // false || helpers require path relative to cwd "sort_order": false // sort css entries "sort_properties": false // sort css entries properties "write_file": false // callback css only if false "verbose": false // print result to console "imports": // imports prepended to css file and in order of output "imported.css" "includes": // css imports path relative to cwd and in order of output "/ncss/includes/index.js" "watch": "delay": 0 // watch delay response in ms "interval": 5007 // watch interval "files": // files to watch "/ncss/includes/index.js"
js example:
// ./ncss.jsconst config = "dest": "/ncss/dist/app.min.css" // build file "globals": "/ncss/globals" // false || globals require path relative to cwd "mixins": "/ncss/mixins" // false || mixins require path relative to cwd "helpers": "/ncss/helpers" // false || helpers require path relative to cwd "sort_order": false // sort css entries "sort_properties": false // sort css entries properties "write_file": false // callback css only if false "verbose": false // print result to console "imports": // imports prepended to css file and in order of output "imported.css" "includes": // css imports path relative to cwd and in order of output "/ncss/includes/index.js" "watch": "delay": 0 // watch delay response in ms "interval": 5007 // watch interval "files": // files to watch "/ncss/includes/index.js" moduleexports = config
Imports
- imports inclided in your config file at
config.imports
will automatically be included in your final build.
/* imports:["example.css","example2.css"] */ ;;
Includes
within your includes is where your css is constructed. There is no limitation to what you can or cannot do using javascript to build your css, so long as the object exported, once executed, can be stringified into valid json.
- includes files have global access to globals, helpers and mixins
- you can require and use external modules from within any includes file
for example
// include ~ "/ncss/includes/index.js" let css = body: { return "black" } color: "#fff" "line-height": 0 let arr = ;for let i = 1; i < 13; i++ arr; css".col-"+ i = "width": i/12 * 100 + "%" cssarr = "-ms-flex": "none" flex: "none" moduleexports = css;
will produce
Globals
the globals object is where you keep an object congaing variables that are available globally throughout css-node
- the g character is reserved for calling globals
- includes files, helpers and mixins have access to globals
- the globals file can be in the format of either
.js
or.json
- the globals file path can be edited at
config.globals
- you can require and use external modules from within your globals file
// /ncss/globals/index.js moduleexports = primary: "#333" font_family: "-apple-system, system-ui, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif" extend:
// include ~ /ncss/includes/index.js let css = "body": "color": "#3b4351" "background": gprimary "font-family": gfont_family moduleexports = css;
will produce
Mixins
- the m character is reserved for calling mixins
- mixins can be called from within includes files
- mixins can called from within mixins
- mixins have access to helpers and globals (h,g)
- the mixins file path can be edited at
config.mixins
- set
config.mixins
to false to disable a mixins file - set
config.mixins
to a require/file/path
relative to your cwd to enable your mixins - you can require and use external modules from within your mixins file
- you can require and use other mixin files from within your mixins file
// /ncss/mixins/index.js moduleexports = { return Object }
// include ~ /ncss/includes/index.js let css = html: m moduleexports = css;
will produce
Helpers
- the h character is reserved for calling helpers
- css-node has a built in list of helpers that is easily extendable.
- helpers can be called from within includes files and mixins
- helpers have access to globals (g)
- the helpers extend file path can be edited/disabled at
config.helpers
- set
config.helpers
to false to disable a custom helpers file - set
config.helpers
to a require/file/path
relative to your cwd to enable your custom helpers - you can require and use external modules from within your custom helpers file
- you can require and use extra helper files from within your custom helpers file
- you can replace any existing css-node base helper from within your custom helpers file
extra helpers can be added to the config.helpers
file like so
// /ncss/helpers/index.js moduleexports = { let sep = rgb > -1 ? "," : " "; rgb = rgb0; let rh = +rgb0 gh = +rgb1 bh = +rgb2; if rhlength == 1 rh = "0" + rh; if ghlength == 1 gh = "0" + gh; if bhlength == 1 bh = "0" + bh; return "#" + rh + gh + bh; }
// include ~ base.js let css = body: color: h background: h moduleexports = css;
will produce
css-node helpers
calc
// calculatebody: "height": h // 12px "height": h // 3px "height": h // 4em "height": h //8rem
add
// plusbody: "height": h // 6px
sub
// subtractbody: "height": h // 2px
mul
// multiplybody: "height": h // 8em
div
// dividebody: "height": h // 2em
floor
// Math.floorbody: "height": h // 1em
ceil
// Math.ceilbody: "height": h // 1em
abs
// Math.absbody: "height": h // 5em
round
// Math.roundbody: "height": h // 2em
percent
// return percentagebody: "height": h // 5%
inRange
h; // true h; // false h; // true
path.base
hpath // 'img.png' hpath // 'img'
path.dir
hpath // 'path/to'
path.ext
hpath // .'png'
path.join
hpath; // '/foo/bar/baz/asdf'
path.norm
hpath; // '/foo/bar/baz/asdf'
quote
h; // 'quote'
unquote
h; // unquote
upper
h; // ZZZ
upperFirst
h; // Zzz
lower
h; // zzz
lowerFirst
h; // zZZ
pre
// add prefixh; // _prefix
suf
// add duffixh; // suffix_
starts
// starts withh //trueh //false
snake
h; // snake_case
unsnake
h; // un snake case
camel
h; // camelCase
uncamel
h; // un camel case
kebab
h; // kebab-case
unkebab
h; // un kebab case
is.string
his; // true
is.even
his; // true his; // false
is.odd
his; // true his; // false
is.number
his; // true his; // false
is.lt
// less thanhis; // true his; // false
is.lte
// less than or equalhis; // true his; // false
is.eq
// greater thanhis; // false his; // true his; // false his; // true
is.gt
// greater thanhis; // false his; // true
is.gte
// greater than or equalhis; // false his; // true
enc.base64
// base64 encode utf8 stringhenc // dGVzdA==
enc.hex
// hex encode utf8 stringhenc // 74657374
enc.URI
// URI encode utf8 stringhenc // %5B%5D%3C%3E
enc.URIC
// encode URI Component utf8 stringhenc // https%3A%2F%2Ftest.com%2F
js
// JSON.stringify h; // '{"test":"ok"}' h;/*{ "test": "ok"}*/
jp
// JSON.parseh; // {test:'ok'}
vendor
".example": /*.example { height: 2em; box-shadow: 0 0 4px black; -webkit-box-shadow: 0 0 4px black} */
rgb2hex
"body": "background": h // #ffffff
rgba2hex
"body": "background": h // #673ab7e8
hex2rgb
"body": "background": h // rgb(255, 255, 255)
hex2rgba
"body": "background": h // rgba(103, 58, 183, 0.91)
keys
h // ["key1","key2":"key3"]
vals
h // ["val1","val2":"val3"]
assign
let obj1 = key1: 'val1' key2: 'val2' key3: 'val3'obj2 = key4: 'val4' key5: 'val5' key6: 'val6' h; /*{ key1: 'val1', key2: 'val2', key3: 'val3', key4: 'val4', key5: 'val5', key6: 'val6'}*/
entries
h; // [ [ 'key4', 'val4' ], [ 'key5', 'val5' ], [ 'key6', 'val6' ] ]