preoss

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>

Options	Descriptions
-h, --help	output usage information
-v, --version	output the version number
-m, --minify	minify the CSS output
-b, --beautify	beautify the CSS output
-w, --watch	watch file for changes
-r, --reverse	compile CSS to JS 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