Git Product home page Git Product logo

stylus's Introduction

Stylus logo

Build Status Maintenance npm version npm Join the community on github discussion

Stylus is a revolutionary new language, providing an efficient, dynamic, and expressive way to generate CSS. Supporting both an indented syntax and regular CSS style.

Sponsors

You can sponsor stylus ongoing development via opencollective or paypal !

automattic mojotech

Your Logo

Paypal stylus

Backers

Backers

Installation

$ npm install stylus -g

Basic Usage

Watch and compile a stylus file from command line with

stylus -w style.styl -o style.css

You can also try all stylus features on stylus-lang.com, build something with stylus on codepen or RunKit

Community modules

Stylus cheatsheet

Code of Conduct

Please note that this project is released with a Contributor Code of Conduct. By participating in this project you agree to abide by its terms.

Contribution

Please read our Contribution Guide before making any pull requests to the project. Included are directions for opening issues, workflows, and coding standards.

Thank you to all the people who already contributed to Stylus!

License

MIT

Copyright (c) 2010-present TJ and Stylus maintainers

stylus's People

Contributors

acidjazz avatar blakeembrey avatar ccampbell avatar craigspaeth avatar dependabot[bot] avatar dfilatov avatar disfated avatar dtvn avatar eight04 avatar futekov avatar geddski avatar ichenlei avatar jasonkuhrt avatar jkernech avatar kaime avatar kizu avatar kpdecker avatar leny avatar mythril avatar nevir avatar panya avatar paulmillr avatar rauchg avatar samccone avatar tj avatar tjbenton avatar tonistiigi avatar xdan avatar yangsu avatar yuchi avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

stylus's Issues

Finish docs

move most to separate markdown files, we can use these for the site and the readme.

Drop @ variable prefix

for right now it helps with debugging since otherwise every id might be a variable. This is gutsy, but if it works, rad

Stitch selectors together via ident(s)

ident might become the node for variables, selectors, and properties. However when the context is a selector we will need to stitch idents together to form the selector. worth looking into

char escaping support

For example 14px/1.5 needs to either be escaped, or we can only perform arithmetic when parenthesized (that is lame), so I guess maybe 15px\/1.5 ?

Add more scope tests

  • global from a mixin
  • local from nested mixin
  • mixin within a mixin
  • function within a mixin within a mixin

all that shit

better error reporting

test coverage as well for many of the cases. stuff like an error in an @import script will try to show you the parent script instead

Variable functions

might already be working, will have to check it out

@fn = red
@fn(#fc0)
 // => 255

Interpolation

not a huge fan, but there are times when it would be nice to have:

some selector ${@var}
  color red

etc

Missing BIF argument errors

currently for example hsla() called with only 3 args will result in "Cannot read property 'constructor' of undefined", we need better errors here, quick fix

property expression ambiguity

one issue is a function return val vs mixin:

foo(n)
  some-prop -n

"looks" like a prop with a negated n to us, but to the parser we will need some magic, possibly even lazy evaluation to treat this as a mixin or a function call, or require that return is used (hopefully not)

we could also have a slightly different syntax for functions, which is kinda lame too, although you most likely will never have a function act as a mixin and have a retval

Browser support

transparently via make stylus.js and have make stylus.min.js. This will be a reasonable hack but might work with some require() replacement etc. I would like to keep this out of the source at least, browser compat is uglayyyYYY

I think one of the only "real" applications for this is a demo editor on the site

TextMate bundle

these seem really annoying to create lol painful grammar definition but would be really awesome to have, same with vim and friends

More selector tests

we have to ensure proper stitching, so we have to track if trailing space was present or not

Test / support @ rules

I guess less.js fucks up on modern stuff there, I havent even tried, so add tests and implement

Conditionals

if / else / unless blah blah, another layer of mind-bending context madness

Add ?=

@foo ?= 5
@foo ?= 10

 @foo
 // => 5

Finish @import support

omission of the extension will attempt to inline the AST from the given path, otherwise *.css is literal. Finish up

@page support

    @page {
      margin: 2.5cm; /* default for all pages */
    }

    @page :left {
      margin-left: 5cm; /* left pages only */
    }

    @page :right {
      margin-right: 5cm; /* right pages only */
    }

    @page :first {
      margin-top: 8cm; /* extra top margin on the first page */
    }

Stack linenos

currently the error reporting lineno is based on the last scanned line, which works fine until you start calling functions. Need to store the lineno and reference it on Call

@media support

    @media screen, projection {
      html {
        background: #fffef0;
        color: #300;
      }
      body {
        max-width: 35em;
        margin: 0 auto;
      }
    }

    @media print {
      html {
        background: #fff;
        color: #000;
      }
      body {
        padding: 1in;
        border: 0.5pt solid #666;
      }
    }

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.