Develop a CSS stylesheet with the pleasure of program in Js.
- Support multiples CSS selectors:
- basics: ID, class and type
- pseudo-elements
- pseudo-classes
- Minify or beautify output files
- Live preprossessing (hot-reloading)
- Add selectors
- basics: universal and attribute
- combinators
- convert a css file to a js file
- others (soon explain)
Based on CSS documentation
Inspired by Less, Sass and React-native
npm install -g preoss
npm test
$ 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 |
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
}
Copyright 2016 Johann Hospice. Licensed under BDS 3 licensed