preoss v1.0.2

PreOSS.js

Develop a CSS stylesheet with the pleasure of program in Js.

Features

• Support multiples CSS selectors:
  • basics: ID, class and type
  • pseudo-elements
  • pseudo-classes
• Minify or beautify output files
• Live preprossessing (hot-reloading)

To do

• Add selectors basics: universal and attribute combinators
• convert a css file to a js file
• others (soon explain)

Work

Based on CSS documentation

Inspired by Less, Sass and React-native

Installation

npm install -g preoss

Tests

npm test

Usage

$ preoss <option> <input_file> <output_file>

Example

Use the simple command:

preoss styles.js styles.css

will compile your javascript source file:

var colors = {
        grey: [
            '#212121',
            '#424242',
            '#717171',
        ]
    },
    pow2 = val => Math.pow(2, val);

module.exports = {
    '@font-face': {
        src: "url('../font/font.ttf')"
    },
    body: {
        margin: 0,
        padding: 15+'px'
    },
    '#link': {
        'background-color': colors.grey[1],
        height: `${pow2(8)}px`,
        width: 'auto',
    },
    '.nested': {
        color: '#333',
    },
    a: {
        color: 'red'
    },
    'a:hover': {
        'text-align': 'center',
        opacity: '0'
    },
    'a::after': {
        content: "''",
        position: 'absolute',
        top: 0
    }
}

to produce the css file:

@font-face {
	src: url('../font/font.ttf')
}
body {
	margin: 0;
	padding: 15px
}
#link {
	background-color: #424242;
	height: 256px;
	width: auto
}
.nested {
	color: #333
}
a {
	color: red
}
a:hover {
	text-align: center;
	opacity: 0
}
a::after {
	content: '';
	position: absolute;
	top: 0
}

License

Copyright 2016 Johann Hospice. Licensed under BDS 3 licensed