cssnext-playground

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

Changelog

License