tj / styl Goto Github PK

Flexible and fast modular CSS preprocessor built on top of Rework

Makefile 0.24% JavaScript 95.78% HTML 0.45% CSS 3.52%

styl's Introduction

I'm the founder and solo developer of Apex Software. I've written hundreds of open-source projects for the JavaScript and Go communities, and I'd like to thank these companies for sponsoring my open-source work:




Become a sponsor	Become a sponsor

And thank you to the individuals who sponsor my work:

You can find me here:

Twitter • Instagram • Blog • Slack

styl's People

Contributors

Stargazers

Watchers

Forkers

kimjoar hacksparrow rschmukler jasonmorganson qmmr brandondrew camshaft andrecurvello tombyrer matthewmueller bral robloach jornason bjornrux yuwq1098 mnmly aqhjh

styl's Issues

Comments aren't converted the right way

I use the whitespace style

/* Selection background will be assigned to TD instead of TR, because IE8/9 does not support gradient for TRs */

.vclTable .vclSortableCol button.vclButtonStd:hover
  color: #333333

becomes:

/* Selection background will be assigned to TD instead of TR, because IE*/

9 does not support gradient for TRs */;

.vclTable .vclSortableCol button.vclButtonStd:hover  {
  color: #333333;
}

Site to play with syntax

Something like Try Stylus but for Styl.

feature request: local variable scope

Could you please help me to find a way for scoping variables for a file
We have huge project with many component and any component have own local var name and i really need to scope theme
I use stylus and want to migrate to styl or scss
Scss can handle this few feature but migration is hard
Please tell me is this feature possible or not
Thank you in advance

connect middleware

Are there any plans for connect middleware?

Not working on Windows.

When issuing styl nothing happens. Just a newline, no errors. There's no verbose mode so I can't see what does / does not happen.

Running the latest version.

Will there be nib for styl?

Parser Error -- > attribute selectors : before

It seems that it isn't possible to use attribute selectors in combination with :before. Used with the whitespace version.

.vclDatePicker .vclDatePickerFlyout [class^="icon-"]:before,
.vclDatePicker .vclDatePickerFlyout [class*=" icon-"]:before
    color: #FFFFFF

/usr/lib64/node_modules/styl/node_modules/rework/node_modules/css/node_modules/css-parse/index.js:61
    throw err;
          ^
Error: property missing ':' near line 67:8
    at error (/usr/lib64/node_modules/styl/node_modules/rework/node_modules/css/node_modules/css-parse/index.js:57:15)
    at declaration (/usr/lib64/node_modules/styl/node_modules/rework/node_modules/css/node_modules/css-parse/index.js:188:33)
    at declarations (/usr/lib64/node_modules/styl/node_modules/rework/node_modules/css/node_modules/css-parse/index.js:218:19)
    at rule (/usr/lib64/node_modules/styl/node_modules/rework/node_modules/css/node_modules/css-parse/index.js:478:21)
    at rules (/usr/lib64/node_modules/styl/node_modules/rework/node_modules/css/node_modules/css-parse/index.js:102:56)
    at stylesheet (/usr/lib64/node_modules/styl/node_modules/rework/node_modules/css/node_modules/css-parse/index.js:72:16)
    at Object.module.exports [as parse] (/usr/lib64/node_modules/styl/node_modules/rework/node_modules/css/node_modules/css-parse/index.js:482:10)
    at rework (/usr/lib64/node_modules/styl/node_modules/rework/lib/rework.js:35:25)
    at new Style (/usr/lib64/node_modules/styl/index.js:36:17)
    at /usr/lib64/node_modules/styl/bin/styl:33:15

update rework

later rework versions remove @2x image defaults.

Will there be user-defined mixins?

Just a quick question - I really like the direction with this project and with rework, but I need to have the ability for users to define custom mixins within their stylesheets (rather than by writing them into the source with javascript as is the case with rework). Is this something you are planning on making a feature of styl?

Maybe Autoprefixer :)

Hi! Of cource, you have some rational reasons to don’t use Autoprefixer in this end-users preprocessor.

But maybe I can fix something in Autoprefixer? It will be helpful to me to has strong hard feedback :).

Leading withspace in a styl produces a leading ; in the generated css

Accidentally I produced a file with only one spacer in the first line, this leads to a ; in the generated css. The example doesn't show it because github strips the source-code... please add a spacer and a break before the button to test it.

button 
  background-color: green
  width: 150px
  height: 150px

;

button {
  background-color: green;
  width: 150px;
  height: 150px;
}

@page in @media print

If I use a @page in a @media print it produces a wrong css

@media print
    *
      background-color: white

    @page 
      margin: 0.5cm

@media print {
@media print @page {
    * {
      background-color: white;
    }
}
}

expose rework's `.use(fn)`

This way styl can be used as a base to be extended. Ie.

styl(str).use(variant()).toString()

Offer better comparison with Stylus

Styl may not “aim for feature parity with Stylus”, but it would really be useful to have a “feature diff” between the two.

Could you provide a more detailed comparison in the Readme (or perhaps a separate markdown document)?

Class inheritance by reference

This would be great to be able to inherit from a class by referencing it.

Example:

.class1
    display: inline-block
    margin: 10px
    float: left
    font-size: 0.8em
.class2
    .class1
    margin: 20px

Here, if I use class2, it would do the same as class1, but with a margin of 20px.

For example, LESS is able to do it.

Server side compilation

Is it possible to run styl on server side using Rhino?

Parser Error ::-webkit-input-placeholder

Hi,

I have found an error in the parser.
If I try to compile (styl -w < test.styl > test.css)

test.styl

input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder
    color: #AFB2B4

I get this error:

/usr/lib64/node_modules/styl/node_modules/css-whitespace/lib/parser.js:95
        prop[2] += ' ' + tok[1].join(', ');
                                ^
TypeError: Object color has no method 'join'
    at prop (/usr/lib64/node_modules/styl/node_modules/css-whitespace/lib/parser.js:95:33)
    at stmt (/usr/lib64/node_modules/styl/node_modules/css-whitespace/lib/parser.js:80:28)
    at stmts (/usr/lib64/node_modules/styl/node_modules/css-whitespace/lib/parser.js:57:35)
    at module.exports (/usr/lib64/node_modules/styl/node_modules/css-whitespace/lib/parser.js:24:10)
    at module.exports (/usr/lib64/node_modules/styl/node_modules/css-whitespace/index.js:20:18)
    at new Style (/usr/lib64/node_modules/styl/index.js:33:33)
    at /usr/lib64/node_modules/styl/bin/styl:33:15
    at ReadStream.<anonymous> (/usr/lib64/node_modules/styl/node_modules/stdin/index.js:7:5)
    at ReadStream.EventEmitter.emit (events.js:117:20)
    at _stream_readable.js:920:16

If I use a class instead (.input-foo::-webkit-input-placeholder) or complete global it works...

Doesn't support tabs

2 spaces:

$ node -e "console.log(require('styl')('ul\n  margin: 0', {whitespace:true}).toString())"
ul {
  margin: 0;
}

tabs:

$ node -e "console.log(require('styl')('ul\n\tmargin: 0', {whitespace:true}).toString())"

/Users/balupton/Projects/bevry/docpad-extras/plugins/styl/node_modules/styl/node_modules/rework/node_modules/css/node_modules/css-parse/index.js:60
    throw err;
          ^
Error: missing '{' near line 3:12
    at error (/Users/balupton/Projects/bevry/docpad-extras/plugins/styl/node_modules/styl/node_modules/rework/node_modules/css/node_modules/css-parse/index.js:56:15)
    at declarations (/Users/balupton/Projects/bevry/docpad-extras/plugins/styl/node_modules/styl/node_modules/rework/node_modules/css/node_modules/css-parse/index.js:212:25)
    at rule (/Users/balupton/Projects/bevry/docpad-extras/plugins/styl/node_modules/styl/node_modules/rework/node_modules/css/node_modules/css-parse/index.js:454:21)
    at rules (/Users/balupton/Projects/bevry/docpad-extras/plugins/styl/node_modules/styl/node_modules/rework/node_modules/css/node_modules/css-parse/index.js:101:49)
    at stylesheet (/Users/balupton/Projects/bevry/docpad-extras/plugins/styl/node_modules/styl/node_modules/rework/node_modules/css/node_modules/css-parse/index.js:71:16)
    at Object.module.exports [as parse] (/Users/balupton/Projects/bevry/docpad-extras/plugins/styl/node_modules/styl/node_modules/rework/node_modules/css/node_modules/css-parse/index.js:458:10)
    at rework (/Users/balupton/Projects/bevry/docpad-extras/plugins/styl/node_modules/styl/node_modules/rework/lib/rework.js:35:25)
    at new Style (/Users/balupton/Projects/bevry/docpad-extras/plugins/styl/node_modules/styl/index.js:36:17)
    at Style (/Users/balupton/Projects/bevry/docpad-extras/plugins/styl/node_modules/styl/index.js:31:40)
    at [eval]:1:28

Often you dont need every image to be @2x resolution. For example, subtle background noise textures
It leads to people without retina displays to push code that they may not even know doesn't work. For example, if they forget to upload the @2x resolution images, it 404s and doesn't fallback
It is project opinionated as opposed to rework opinionated. It depends on everyone uploading @2x images for every image they use in background.
Bugs with @2x(will open separate issue, but for example if you do background: url('./transparent-noise.png') linear-gradient(top, red, blue), @2x will break it).
It isn't difficult to add back in if people want it. styl.use(atTwoX);, but this forces them to make a conscious decision to accept the project requirements.

I am happy to do the PR and whatnot if you'll allow it @visionmedia

Question: Stylus & Styl swap

Since both stylus and styl have the .styl extension; does that mean that if you refrain from using conditionals and loops that it's basically interchangeable?