Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

chore: add sponsor info for stylus #2704

Merged
merged 2 commits into from Jun 25, 2022
Merged

chore: add sponsor info for stylus #2704

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
2ba2a30
chore: add sponsor info for stylus
iChenLei Jun 25, 2022
7b705d1
Update Readme.md
iChenLei Jun 25, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
207 changes: 48 additions & 159 deletions Readme.md
View file
Open in desktop
Expand Up @@ -8,6 +8,44 @@

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](https://opencollective.com/stylus/) os [paypal](https://www.paypal.com/paypalme/iChenLei/) !

<table>
<tbody>
<tr>
<td width="50%" align="center">
<a href="https://automattic.com/">
<img alt="automattic" src="https://user-images.githubusercontent.com/14012511/175755798-40ca295f-a0cf-45a6-b24a-303496552499.svg" />
</a>
</td>
<td width="50%" align="center">
<a href="https://www.mojotech.com/">
<img alt="mojotech" src="https://user-images.githubusercontent.com/14012511/175755697-0a090b42-89f8-4651-9506-b6aefac57c66.png" />
</a>
</td>
</tr>
<tr>
<td width="50%" align="center">
<p style="font-size: 30px">Your Logo</p>
</td>
<td width="50%" align="center">
<a href="http://opencollective.com/stylus/">
<img alt="opencollective stylus" src="https://opencollective.com/webpack/donate/button@2x.png?color=blue" />
</a>
or
<a href="https://www.paypal.com/paypalme/iChenLei/">
<img alt="Paypal stylus" src="https://www.paypalobjects.com/digitalassets/c/website/marketing/apac/C2/logos-buttons/optimize/Full_Online_Tray_RGB.png" />
</a>
</td>
</tr>
</tbody>
</table>

### Backers
[![Backers](https://opencollective.com/stylus/individuals.svg)](https://opencollective.com/stylus/)

## Installation

```bash
Expand All @@ -21,181 +59,32 @@ stylus -w style.styl -o style.css
```
You can also [try all stylus features on stylus-lang.com](http://stylus-lang.com/try.html), build something with stylus on [codepen](http://codepen.io) or [RunKit](https://npm.runkit.com/stylus)

### IDE/Editor Support

| IDE/Editor | built-in support | guide | plugin support |
| ------------- | ------------- | ------------- | ------------- |
| <img src="https://simpleicons.org/icons/webstorm.svg" width="15px" /> WebStorm | ✅ &nbsp;[bug report](https://youtrack.jetbrains.com/issues/WEB) | [Using stylus with webstorm](https://www.jetbrains.com/help/webstorm/transpiling-stylus-to-css.html) | N/A |
| <img src="https://simpleicons.org/icons/visualstudiocode.svg" width="15px" /> VSCode | ❌ | N/A | [Stylus](https://marketplace.visualstudio.com/items?itemName=sysoev.language-stylus)(maintainer: [@iChenLei](https://github.com/ichenlei) [@d4rkr00t](https://github.com/d4rkr00t)) |
| <img src="https://simpleicons.org/icons/sublimetext.svg" width="15px" /> Sublime 2/3 | ❌ | N/A |[Stylus](https://packagecontrol.io/packages/Stylus)(maintainer: [@billymoon](https://github.com/billymoon)) |
| <img src="https://simpleicons.org/icons/atom.svg" width="15px" /> Atom | ❌ | N/A | [Stylus](https://atom.io/packages/stylus)(maintainer: [@matthojo](https://github.com/matthojo)) |
| <img src="https://simpleicons.org/icons/vim.svg" width="15px" /> Vim | ❌ | N/A | [vim-stylus](https://github.com/iloginow/vim-stylus)(maintainer: [@iloginow](https://github.com/iloginow)) |

> Missing your favorite IDE/Editor support ? Please report to us via [stylus issues](https://github.com/stylus/stylus/issues)

### Modern bundler/task-runner Support

| Bundler | built-in support | guide | plugin support |
| ------------- | ------------- | ------------- | ------------- |
| <img src="https://simpleicons.org/icons/webpack.svg" width="15px"> webpack | ✅ | [Using stylus with webpack](https://webpack.js.org/loaders/stylus-loader/) | [stylus-loader](https://github.com/webpack-contrib/stylus-loader) |
| <img src="https://simpleicons.org/icons/vite.svg" width="15px"> vite | ✅ | [Using stylus with vite](https://vitejs.dev/guide/features.html#css-pre-processors) | N/A |
| <img src="https://avatars.githubusercontent.com/u/32607881?s=20&v=4" width="15px"> parcel | ✅ | [Using stylus with parcel v1](https://parceljs.org/stylus.html) \| [v2](https://v2.parceljs.org/languages/stylus/) | N/A |
| <img src="https://avatars.githubusercontent.com/u/23119087?s=20&v=4" width="15px"> fuse-box | ✅ | [Using stylus with fuse-box](https://fuse-box.org/docs/plugins/stylus-plugin) | N/A |
| <img src="https://avatars.githubusercontent.com/u/44914786?s=20&v=4" width="15px"> snowpack | ❌ | [Snowpack plugins guide](https://www.snowpack.dev/reference/plugins) | [snowpack-plugin-stylus](https://github.com/fansenze/snowpack-plugin-stylus) |
| <img src="https://simpleicons.org/icons/gulp.svg" width="15px"> gulp | ❌ | N/A | [gulp-stylus](https://github.com/stevelacy/gulp-stylus) |
| <img src="https://simpleicons.org/icons/grunt.svg" width="15px"> grunt | ❌ | N/A | [grunt-contrib-stylus](https://github.com/gruntjs/grunt-contrib-stylus) |
| <img src="https://simpleicons.org/icons/rollupdotjs.svg" width="15px"> rollup | ❌ | N/A | [rollup-plugin-stylus-compiler](https://github.com/RJHwang/rollup-plugin-stylus-compiler) |


> Missing your favorite modern bundler/task-runner support ? Please report to us via [stylus issues](https://github.com/stylus/stylus/issues)
### 📖 New Docs (alpha)

### Example

```stylus
border-radius()
-webkit-border-radius: arguments
-moz-border-radius: arguments
border-radius: arguments

body a
font: 12px/1.4 "Lucida Grande", Arial, sans-serif
background: black
color: #ccc

form input
padding: 5px
border: 1px solid
border-radius: 5px
```

compiles to:

```css
body a {
font: 12px/1.4 "Lucida Grande", Arial, sans-serif;
background: #000;
color: #ccc;
}
form input {
padding: 5px;
border: 1px solid;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
```

the following is equivalent to the indented version of Stylus source, using the CSS syntax instead:

```stylus
border-radius() {
-webkit-border-radius: arguments
-moz-border-radius: arguments
border-radius: arguments
}

body a {
font: 12px/1.4 "Lucida Grande", Arial, sans-serif;
background: black;
color: #ccc;
}

form input {
padding: 5px;
border: 1px solid;
border-radius: 5px;
}
```

### Features

Stylus has _many_ features. Detailed documentation links follow:

- [css syntax](docs/css-style.md) support
- [mixins](docs/mixins.md)
- [keyword arguments](docs/kwargs.md)
- [variables](docs/variables.md)
- [interpolation](docs/interpolation.md)
- arithmetic, logical, and equality [operators](docs/operators.md)
- [importing](docs/import.md) of other stylus sheets
- [introspection api](docs/introspection.md)
- type coercion
- [@extend](docs/extend.md)
- [conditionals](docs/conditionals.md)
- [iteration](docs/iteration.md)
- nested [selectors](docs/selectors.md)
- parent reference
- in-language [functions](docs/functions.md)
- [variable arguments](docs/vargs.md)
- built-in [functions](docs/bifs.md) (over 60)
- optional [image inlining](docs/functions.url.md)
- optional compression
- JavaScript [API](docs/js.md)
- extremely terse syntax
- stylus [executable](docs/executable.md)
- [error reporting](docs/error-reporting.md)
- single-line and multi-line [comments](docs/comments.md)
- css [literal](docs/literal.md)
- character [escaping](docs/escape.md)
- [@keyframes](docs/keyframes.md) support & expansion
- [@font-face](docs/font-face.md) support
- [@media](docs/media.md) support
- Connect [Middleware](docs/middleware.md)
- TextMate [bundle](docs/textmate.md)
- Coda/SubEtha Edit [Syntax mode](https://github.com/atljeremy/Stylus.mode)
- gedit [language-spec](docs/gedit.md)
- VIM [Syntax](https://github.com/iloginow/vim-stylus)
- Espresso [Sugar](https://github.com/aljs/Stylus.sugar)
- [Firebug extension](docs/firebug.md)
- heroku [web service](http://styl.herokuapp.com/) for compiling stylus
- [style guide](https://github.com/lepture/ganam) parser and generator
- transparent vendor-specific function expansion
Try our new [official documentation website](http://stylus-docs.netlify.app/) and give us feedback via [github issues](https://github.com/stylus/stylus/issues), thanks.

### Community modules

- https://github.com/stylus/stylus/wiki

### Contribution Guide

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

### Stylus cheatsheet

- [Stylus cheatsheet](https://devhints.io/stylus), very useful stylus syntax code snippet for you

### Authors
### Code of Conduct

- [TJ Holowaychuk (tj)](https://github.com/tj)
Please note that this project is released with a [Contributor Code of Conduct](Code_of_Conduct.md). By participating in this project you agree to abide by its terms.

### More Information
### Contribution

- Language [comparisons](docs/compare.md), compare Less Sass and Stylus.
Please read our [Contribution Guide](Contributing.md) before making any pull requests to the project. Included are directions for opening issues, workflows, and coding standards.

## Code of Conduct
Thank you to all the people who already contributed to Stylus!

Please note that this project is released with a [Contributor Code of Conduct](Code_of_Conduct.md). By participating in this project you agree to abide by its terms.
<a href="https://github.com/stylus/stylus/graphs/contributors"><img src="https://opencollective.com/stylus/contributors.svg?width=890" /></a>

## License

(The MIT License)

Copyright (c) Automattic &lt;developer.wordpress.com&gt;

Permission is hereby granted, free of charge, to any person obtaining
a copy of this software and associated documentation files (the
'Software'), to deal in the Software without restriction, including
without limitation the rights to use, copy, modify, merge, publish,
distribute, sublicense, and/or sell copies of the Software, and to
permit persons to whom the Software is furnished to do so, subject to
the following conditions:

The above copyright notice and this permission notice shall be
included in all copies or substantial portions of the Software.
[MIT](https://github.com/stylus/stylus/blob/dev/LICENSE)

THE SOFTWARE IS PROVIDED 'AS IS', WITHOUT WARRANTY OF ANY KIND,
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY
CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE
SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
Copyright (c) 2010-present [TJ](https://github.com/tj) and [Stylus maintainers](https://github.com/orgs/stylus/people)