cssnext-playground
Use tomorrow's CSS syntax, today. In a browser playground.
Issues with the output should be reported on cssnext issue tracker.
Demo
You can try the cssnext playground here: cssnext.github.io/cssnext-playground
Install
$ npm install --save-dev cssnext-playground
Usage
<div class="cssnext-Playground">
<div class="cssnext-Playground-section cssnext-Playground-section--from">
<div class="js-cssnext-Playground-console cssnext-Playground-console"></div>
<textarea class="js-cssnext-Playground-from cssnext-Playground-code cssnext-Playground-code--from" spellcheck="false" >
/* original code here */
</textarea>
</div>
<div class="cssnext-Playground-section cssnext-Playground-section--to">
<textarea class="js-cssnext-Playground-to cssnext-Playground-code cssnext-Playground-code--to" spellcheck="false"></textarea>
</div>
</div>
Note: js-*
classes are for JavaScript snippet below, other classes are for styles. See index.css for minimal recommanded styles.
Initiate the playground:
cssnextPlayground({
from: body.querySelector(".js-cssnext-Playground-from"),
to: body.querySelector(".js-cssnext-Playground-to"),
console: body.querySelector(".js-cssnext-Playground-console"),
options: {}
})
And if you have multiple playgrounds:
Array.prototype.slice.call(document.querySelectorAll(".js-cssnext-Playground")).forEach(function(elPlayground) {
cssnextPlayground({
from: elPlayground.querySelector(".js-cssnext-Playground-from"),
to: elPlayground.querySelector(".js-cssnext-Playground-to"),
console: elPlayground.querySelector(".js-cssnext-Playground-console"),
options: {}
})
})
Options
from
Original textarea (input)
to
Converted textarea (output)
console
Error console element
options
(optional)
cssnext options (directly passed to cssnext, so checkout cssnext options)
Contributing
Work on a branch, install dev-dependencies, respect coding style & run tests before submitting a bug fix or a feature.
$ git clone https://github.com/cssnext/cssnext-playground.git
$ git checkout -b patch-1
$ npm install
$ npm test