CODEWITHSUNDEEP
cssstylus
ryanzec
ryanzec

Reputation: 28040

Stylus does not work with valid css

One of the compiling reason I was going with stylus was the is can work with regular css in stylus files (so I could convert as needed instead of having to convert everything at once) however that does not seem to be true. The following .styl file:

.page-wrap
{
    min-height: 300px;
    font-size: 1.4em;
    line-height: 1;
    min-width: 940px;
    max-width: 1170px;
    margin: 0 auto;
}

compiles to this .css file:

.page-wrap,
{
  min-height: 300px;
  font-size: 1.4em;
  line-height: 1;
  min-width: 940px;
  max-width: 1170px;
  margin: 0 auto;
}

The extra comma at the end of the selector is invalid.

Is stylus not supposed to work with regular css or is this a bug (I am using the latest version from npm)?

Upvotes: 1

Views: 1090

Answers (4)

JordyvD
JordyvD

Reputation: 1615

.page-wrap
{
    min-height: 300px;
    font-size: 1.4em;
    line-height: 1;
    min-width: 940px;
    max-width: 1170px;
    margin: 0 auto;
}

Produces 

.page-wrap {
    min-height: 300px;
    font-size: 1.4em;
    line-height: 1;
    min-width: 940px;
    max-width: 1170px;
    margin: 0 auto;
}

on me. source

Upvotes: 0

user2525449
user2525449

Reputation: 275

Stylus don't uses {} tags, you need don't use {}. Example:

.page-wrap,
    min-height: 300px;
    font-size: 1.4em;
    line-height: 1;
    min-width: 940px;
    max-width: 1170px;
    margin: 0 auto;

Upvotes: 0

kizu
kizu

Reputation: 43224

I filed an issue some time ago regarding this, and the issue should be fixed as of 0.45.0.

Upvotes: 2

lunelson
lunelson

Reputation: 571

It's not really a bug. Put the opening curly brace on the same line as the selector and I think it will go away.

I believe it's doing this because stylus also supports writing code without commas, semicolons etc. So it understands a line ending with no opening curly brace as an indication that you're going to add another selector on the next line, therefore it inserts a comma for you

Upvotes: 4

Related Questions