dciccale / css2stylus.js Goto Github PK

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

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

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.

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

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)

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?

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";
}

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.

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

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

Sorry about this question.

Do you know about this command stylus --css ?

Why you waste your time on this project ?

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.

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

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

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!

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