reworkcss / css-whitespace Goto Github PK

Convert whitespace significant CSS to valid CSS

Makefile 0.04% CSS 95.36% JavaScript 4.60%

css-whitespace's Introduction

css-whitespace

Whitespace significant CSS to regular CSS. Typically used for Rework, however you may use it on its own if you like.

Installation

$ npm install css-whitespace
$ component install visionmedia/css-whitespace

API

var compile = require('css-whitespace');
var css = compile('body\n  color: #888\n');

Example

@charset "utf-8"

@import "foo.css"

body
  padding: 50px
  background: black
  color: white

form
  button
    border-radius: 5px
    padding: 5px 10px

@media print
  body
    padding: 0

  button
    border-radius: 0
    width: 100%

yields:

@charset "utf-8";

@import "foo.css";

body {
  padding: 50px;
  background: black;
  color: white;
}

form button {
  border-radius: 5px;
  padding: 5px 10px;
}

@media print {
  body {
    padding: 0;
  }
  button {
    border-radius: 0;
    width: 100%;
  }
}

License

MIT

css-whitespace's People

Contributors

Stargazers

Watchers

Forkers

retrofox web5design pvalentim clintwood matthewmueller bjrmatos mndvns isabella232

css-whitespace's Issues

Deal with indentation gaps

When you leave blank lines without the proper indentation between two properties css-whitespace fails. This is a problem, becaue many code editors automatically remove the whitespace in otherwise empty lines.

css-whitespace should ignore those lines, i.e. remove every line that only contains whitespace: css.replace(/\s+\n/gm, "");

Support nested media queries

E.g.:

.foo {
    @media (min-width: 40rem) {
        // …
    }
}

Generate sourcemaps

What would it take to build support for inline sourcemaps? I imagine being able to do something like this:

convert = require("css-whitespace")
cssCode = convert(whitespacedCode, {sourcemap: true})

Unless I'm missing something, having sourcemaps in css-whitespace would be the only way for rework to support sourcemaps end-to-end.

ul
  &:hover,
  &:active
    li
      background: #eee

Special case with `::-webkit...` breaks parser

This selector is valid:

input::-webkit-input-placeholder

but it breaks the parser. While this works:

.someClass::-webkit-input-placeholder

nesting

empty rulesets should not output

.connections-list[count=""],
.connections-list[count="0"] {
}

etc

keyframes seem to fail

@keyframes shake 
  0%
    transform: translateX(0);
  10%, 30%, 50%, 70%, 90% 
    transform: translateX(-10px)
  20%, 40%, 60%, 80% 
    transform: translateX(10px)

Should get transformed into:

@keyframes shake {
  0% {
    transform: translateX(0);
  }
  10%, 30%, 50%, 70%, 90% {
    transform: translateX(-10px);
  }
  20%, 40%, 60%, 80% {
    transform: translateX(10px);
  }
}

how to use this as a rework plugin ?

Is this possible ?

compile multi-line selector error

cw = require 'css-whitespace'

console.log cw """
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp, a,
small, strong, sub, sup, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video
  clear: none
"""

output:

htmlbodydivspanobjectiframe;

h1h2h3h4h5h6pblockquotepre;

abbraddresscitecode;

deldfnemimginskbdqsampa;

smallstrongsubsupvar;

dldtddolulli;

fieldsetformlabellegend;

tablecaptiontbodytfoottheadtrthtd;

articleasidecanvasdetailsfigcaptionfigure;

footerheaderhgroupmenunavsectionsummary;

time,
mark,
audio,
video {
  clear: none;
}

Long comma-separated lists with newlines compile incorrectly

Something like this:

blockquote:before, blockquote:after,
q:before, q:after
  content: ''
  content: none

Will yield:

blockquote:beforeblockquote:after;

q:before,
q:after {
  content: '';
  content: none
}

.header
  width: 100%
  &-logo
    background: blue

I can’t see in documentation, does significant CSS support it?