dciccale / css2stylus.js Goto Github PK

Example :

#page-prev {
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAABGdBTUEAALGPC/xhBQAAAAlwSFlzAAAOwgAADsIBFShKgAAAABp0RVh0U29mdHdhcmUAUGFpbnQuTkVUIHYzLjUuMTFH80I3AAAAb0lEQVQoU2NgwAL+//8vAsR1QHwBiG2wqWEASsgA8RQg/gLEZ4HYCUMhUFAeiNdDFd0A0uZAzApXCOQwA7EuEB8F4m9AvBmIlYCYEcU0oIAp1JqfQHoFSBEudxGtkDirYdYQ9Ayye4gKHiSTMQIcAJ8eurm+aMWfAAAAAElFTkSuQmCC");
}

Generated Stylus:

#page-prev
  background-image url("data:image/png

It would be nice to be able to add an output flag so the command can be run from any directory.

-o, --out <dir> Output to <dir> when passing files

Hi,

as i see, colons (:) is useful css retro syntax (which accepted by stylus)
and a lot of people use it in stylus (or only our team? oO)

Can you add option, which preserve/add colons to stylus output?

Thank you and excuse my beginner's English!

The online converter is outputting some strange stuff

// Generated by grunt-webfont


@font-face {
    font-family:"icon";
    src:url("icon.eot?d72eab2225b2db9f04f7f0f787078adb");
    src:url("icon.eot?#iefix") format("embedded-opentype"), url("icon.woff?d72eab2225b2db9f04f7f0f787078adb") format("woff"), url("icon.ttf?d72eab2225b2db9f04f7f0f787078adb") format("truetype"), url("icon.svg?d72eab2225b2db9f04f7f0f787078adb#icon") format("svg");
    font-weight:normal;
    font-style:normal;
}

.icon {
    font-style:normal;
    speak:none;
    text-decoration:inherit;
    text-transform:none;
}


// Icons


.icon-file_upload:before {
    content:"\f101";
}

css:

@media screen and (min-width: 450px) {
  .medium-12 {
    width: 100%; }
  .medium-up-1 > .column, .medium-up-1 > .columns {
    width: 100%;
    float: left; }
    .medium-up-1 > .column:nth-of-type(1n), .medium-up-1 > .columns:nth-of-type(1n) {
      clear: none; }
    .medium-up-1 > .column:nth-of-type(1n+1), .medium-up-1 > .columns:nth-of-type(1n+1) {
      clear: both; }
    .medium-up-1 > .column:last-child, .medium-up-1 > .columns:last-child {
      float: left; }
  .medium-collapse > .column, .medium-collapse > .columns {
    padding-left: 0;
    padding-right: 0; }
  .medium-collapse .row,
  .expanded.row .medium-collapse.row {
    margin-left: 0;
    margin-right: 0; }
  .medium-uncollapse > .column, .medium-uncollapse > .columns {
    padding-left: 0.9375rem;
    padding-right: 0.9375rem; }
  .medium-centered {
    float: none;
    margin-left: auto;
    margin-right: auto; }
  .medium-uncentered,
  .medium-push-0,
  .medium-pull-0 {
    position: static;
    margin-left: 0;
    margin-right: 0;
    float: left; } }

output:

@media screen and (min-width: 450px)
  .medium-12
    width 100%
  .medium-centered
    float none
    margin-left auto
    margin-right auto

@media screen and (min-width: 450px)   .medium-up-1 > .column, .medium-up-1 > .columns
  width 100%
  float left

@media screen and (min-width: 450px)     .medium-up-1 > .column:nth-of-type(1n), .medium-up-1 > .columns:nth-of-type(1n)
  clear none

@media screen and (min-width: 450px)     .medium-up-1 > .column:nth-of-type(1n+1), .medium-up-1 > .columns:nth-of-type(1n+1)
  clear both

@media screen and (min-width: 450px)     .medium-up-1 > .column:last-child, .medium-up-1 > .columns:last-child
  float left

@media screen and (min-width: 450px)   .medium-collapse > .column, .medium-collapse > .columns
  padding-left 0
  padding-right 0

.medium-collapse .row,
@media screen and (min-width: 450px)   .expanded.row .medium-collapse.row
  margin-left 0
  margin-right 0

@media screen and (min-width: 450px)   .medium-uncollapse > .column, .medium-uncollapse > .columns
  padding-left 0.9375rem
  padding-right 0.9375rem

.medium-uncentered,
  .medium-push-0,
@media screen and (min-width: 450px)   .medium-pull-0
  position static
  margin-left 0
  margin-right 0
  float left

as you can see, media queries are duplicated and some selectors generated are incorrect:

.medium-uncentered,
  .medium-push-0,
@media screen and (min-width: 450px)   .medium-pull-0

In css2stylus.js when I edited
n = window.parseInt(n, 10);
to
n = parseInt(n, 10)

The code is working fine now but with window.parseInt it gives error window.parseInt is not a function.

I use this tool all the time :( Why is it down?

And css2stylus is very nice. 👍

I found several syntax rules are probably not noticed and I got errors after converting:

• filter like this in Stylus:

filter unquote('progid:DXImageTransform.Microsoft.BasicImage(rotation=1)')

if I write in CSS if would be wrong:

filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);

• dataUrl for bg images, but without quote
• -moz-document

@-moz-document url-prefix() {
}

related: LearnBoost/stylus@86ef561

if in css omitted ;
e.g.: .fsfd {foo: bar}
c2s generates buggy stylus: .fsfd

So @media tags aren't rendering so well right now.

input:

@media only screen and (max-width: 998px) {
  .page.grid {
    padding: 0% 4%;
  }
}

output:

@media
  only
    screen
      and
        (max-width
          &:
            998px)
              .page.grid {
    padding 0% 4%

It looks like the code is treating the spaces as additional selectors because it's getting through to line 109 selectors = selector.split(/[\s]+/);

Maybe we should add another check to the if statement on line 99 to see if the selector starts with @media then process the contents of that block recursively?

The way it is now doing that recursively would require a lot of rewriting. Maybe there's a better way. What are your thoughts?

Hey!

I use your site a lot, it's great to convert css snippets found on the web to stylus.

However I frequently find my self stripping away vendor prefixes (-webkit) from the output as I use nib, which adds them automatically when compiling.

May I suggest adding support for nib as it's often used in conjunction with stylus (kind of a dream team)?

If you agree but don't have time to add support for nib I may be able to cook sth. up and make a pull request in the coming week or so.

Thanks for providing such a useful service.

Sorry about this question.

Do you know about this command stylus --css ?

Why you waste your time on this project ?

Would it be possible to select the style for the output?

I use stylus with the css syntax (curly braces and all).

If you have multiple @font-face declarations, they will be merged into one and will stop functioning.

This;

@font-face {
    font-family: myFirstFont;
    src: url(sansation_light.woff);
}
@font-face {
    font-family: mySecondFont;
    src: url(sansation.woff);
}

Will be converted into this;

@font-face
  font-family myFirstFont
  src url(sansation_light.woff)
  font-family mySecondFont
  src url(sansation.woff)

Meaning that myFirstFont will not be declared once the Stylus is converted back into CSS again.

style.css

.container {
	-webkit-transform: translateY(100px);
	-ms-transform: translateY(100px);
	-o-transform: translateY(100px);
	transform: translateY(100px);
	background: url(./my-nav-img.png);
}

run css2stylus -u -i4

style.styl

.container
    transform translateY(100px)
    transform translateY(100px)
    background url(./myimg.png)

the result of compile, has redundant transform property and img url be changed (my-nav-img.png -> myimg.png)