pax_global_header00006660000000000000000000000064135272264650014526gustar00rootroot0000000000000052 comment=97bf57dd9439f33f2bda20c36be82b7e0d4e3da9 stylus-0.54.7/000077500000000000000000000000001352722646500131665ustar00rootroot00000000000000stylus-0.54.7/.gitignore000066400000000000000000000001101352722646500151460ustar00rootroot00000000000000css lib-cov testing .DS_Store /node_modules coverage.html lib-cov .idea stylus-0.54.7/.gitmodules000066400000000000000000000000001352722646500153310ustar00rootroot00000000000000stylus-0.54.7/.npmignore000066400000000000000000000002601352722646500151630ustar00rootroot00000000000000.npmignore .gitignore .gitmodules .travis.yml History.md Workflow.md Code_of_Conduct.md Contributing.md Makefile bm.js docs/ editors/ test/ graphics/ coverage.html lib-cov stylus-0.54.7/.travis.yml000066400000000000000000000001041352722646500152720ustar00rootroot00000000000000sudo: false language: node_js node_js: - 6 - 7 - 8 - stable stylus-0.54.7/Code_of_Conduct.md000066400000000000000000000045161352722646500165330ustar00rootroot00000000000000# Contributor Code of Conduct As contributors and maintainers of this project, and in the interest of fostering an open and welcoming community, we pledge to respect all people who contribute through reporting issues, posting feature requests, updating documentation, submitting pull requests or patches, and other activities. We are committed to making participation in this project a harassment-free experience for everyone, regardless of level of experience, gender, gender identity and expression, sexual orientation, disability, personal appearance, body size, race, ethnicity, age, religion, or nationality. Examples of unacceptable behavior by participants include: * The use of sexualized language or imagery * Personal attacks * Trolling or insulting/derogatory comments * Public or private harassment * Publishing other's private information, such as physical or electronic addresses, without explicit permission * Other unethical or unprofessional conduct Project maintainers have the right and responsibility to remove, edit, or reject comments, commits, code, wiki edits, issues, and other contributions that are not aligned to this Code of Conduct, or to ban temporarily or permanently any contributor for other behaviors that they deem inappropriate, threatening, offensive, or harmful. By adopting this Code of Conduct, project maintainers commit themselves to fairly and consistently applying these principles to every aspect of managing this project. Project maintainers who do not follow or enforce the Code of Conduct may be permanently removed from the project team. This Code of Conduct applies both within project spaces and in public spaces when an individual is representing the project or its community. Instances of abusive, harassing, or otherwise unacceptable behavior may be reported by contacting a project maintainer at kizu@kizu.ru. All complaints will be reviewed and investigated and will result in a response that is deemed necessary and appropriate to the circumstances. Maintainers are obligated to maintain confidentiality with regard to the reporter of an incident. This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.3.0, available at [http://contributor-covenant.org/version/1/3/0/][version] [homepage]: http://contributor-covenant.org [version]: http://contributor-covenant.org/version/1/3/0/ stylus-0.54.7/Contributing.md000077500000000000000000000175111352722646500161670ustar00rootroot00000000000000# Stylus contributing guidelines Thank you for wanting to contribute to Stylus! You can find below our guidelines for contribution, explaining how to send [pull requests](#pull-requests), [report issues](#filling-bugs) and [ask questions](#asking-questions), as well as which [workflow](#workflow) we're using while developing Stylus. ## Maintainers Current maintainers of Stylus are: - Roman Komarov ([@kizu](https://github.com/kizu)), - Mikhail Korepanov ([@panya](https://github.com/panya)). - Valeriy Chupurnov ([@xdan](https://github.com/xdan)). If you'll have any questions, feel free to mention us or use emails from our profiles to contact us. ## Code of Conduct 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. ## How you can help You're welcome to: - send pull requests; - report bugs; - ask questions; - fix existing issues; - suggest new features and enhancements; - write, rewrite, fix and enhance docs; - contribute in other ways if you'd like. ### Pull-requests If you fixed or added something useful to the project, you can send a pull-request. It will be reviewed by a maintainer and accepted, or commented for rework, or declined. #### Before submitting a PR: 1. Make sure you have tests for your modifications. 2. Run npm test locally to catch any errors. #### Why did you close my pull request or issue? Nothing is worse than a project with hundreds of stale issues. To keep things orderly, the maintainers try to close/resolve issues as quickly as possible. #### PR/Issue closing criteria We'll close your PR or issue if: 1. It's a duplicate of an existing issue. 2. Outside of the scope of the project. 3. The bug is not reproducible. 4. You are unresponsive after a few days. 5. The feature request introduces too much complexity (or too many edge cases) to the tool - We weigh a request's complexity with the value it brings to the community. Please do not take offense if your ticket is closed. We're only trying to keep the number of issues manageable. ### Filing bugs If you found an error, typo, or any other flaw in the project, please report it using [GitHub Issues](https://github.com/stylus/stylus/issues). Try searching the issues to see if there is an existing report of your bug, and if you'd find it, you could bump it by adding your test case there. When it comes to bugs, the more details you provide, the easier it is to reproduce the issue and the faster it could be fixed. The best case would be if you'd provide a minimal reproducible test case illustrating a bug. For most cases just a code snippet would be enough, for more complex cases you can create gists or even test repos on GitHub — we would be glad to look into any problems you'll have with Stylus. ### Asking questions GitHub issues is not the best place for asking questions like “why my code won't work” or “is there a way to do X in Stylus”, but we are constantly monitoring the [stylus tag at StackOverflow](http://stackoverflow.com/unanswered/tagged/stylus), so feel free to ask there! It would make it easier for other people to get answers and to keep GitHub Issues for bugs and feature requests. ### Fixing existing issues If you'd like to work on an existing issue, just leave a comment on the issue saying that you'll work on a PR fixing it. Also, check out the [c: Easy](https://github.com/stylus/stylus/labels/c%3A%20Easy) label for a set of beginner-friendly tickets, as this is the easiest way to start contributing to Stylus. ### Proposing features If you've got an idea for a new feature, file an issue providing some details on your idea. Try searching the issues to see if there is an existing proposal for your feature and feel free to bump it by providing your use case or explaining why this feature is important for you. We should note that not everything should be done as a “Stylus feature”, some features better be a Stylus plug-ins, some could be much faster implemented using a post-processor, some are just not in the scope of the project. * * * ## Workflow This section describes the workflow we use for Stylus releases, the naming of the branches and the meaning behind them. ### Branches #### Permanent branches The following branches should always be there. Do not fork them directly, always create a new branch for your Pull Requests. - `master`. The code in this branch should always be equal to the latest version that was published in npm. - `dev`. This is a branch for coldfixes — both code and documentation. When you're fixing something, it would make sense to send a PR to this branch and not to the `master` — this would make our job a bit easier. The code in this branch should always be backwards compatible with `master` — it should only introduce fixes, changes to documentation and other similar things like those, so at every given moment we could create a patch release from it. - `gh-pages`. This is a branch for running Stylus' site. It shouldn't contain any actual docs, instead we would add `dev` branch to it as a submodule. This would mean the docs are always up to date with the current published release and storing the docs with the code would mean it would be easy to write the docs alongside the code. - `client`. This branch is a clent-side fork of Stylus that is used for interactive examples on our site. The client version shouldn't be used to serve CSS in production. The branch is updated manually with new release at the moment, in future we could think on automatizing this. #### Temporarily branches - `issue-NNN`. If you're working on a fix for an issue, you can use this naming. This would make it easy to understand which issue is affected by your code. You can optionally include a postfix with a short description of the problem, for example `issue-1289-broken-mqs`. - `feature-…`. Any new feature should be initially be a feature-branch. Such branches won't be merged into `master` or `dev` branches directly. The naming would work basically the same as the `issue-…`, but you can omit the issue's number as there couldn't be one issue covering the feature, or you're working on some refactoring. - `rc-…`. Any new feature release should be at first compiled into a release candidate branch. For example, `rc-0.43` would be a branch for a coming `0.43.0` release. We would merge feature branches and Pull Requests that add new features to the rc-branch, then we test all the changes together, writing tests and docs for those new features and when everything is ready, we increase the version number in `package.json`, then merge the rc-branch into `dev` and `master`. ### Releasing workflow We follow [semver](http://semver.org/). We're in `0.x` at the moment, however, as Stylus is already widely used, we don't introduce backwards-incompatible changes to our minor releases. Each minor release should be first compiled into `rc-`branch. Minor release *should not* have fixes in it, as patch-release should be published before a minor one if there are fixes. This would deliver the fixes to the people using the fixed minor, but `x` at patch version. Patch releases don't need their own `rc` branches, as they could be released from the `dev` branch. ### Adding tests First you want to make sure to run the below commands ``` npm install # for a more verbose output you can install mocha at a global level npm install mocha -g ``` Then at the root of the project you can run `npm test` or `mocha` to execute all tests. If you need to add or edit tests, they are located in the `test/cases` directory. Each `.styl` file has a corresponding `.css` file. The `.styl` is the mock, and the `.css` is the expected result. * * * This document is inspired my many other Contributing.md files, a notable example is [JSCS' Contributing Guide](https://github.com/jscs-dev/node-jscs/blob/master/CONTRIBUTING.md). stylus-0.54.7/History.md000066400000000000000000001346731352722646500151670ustar00rootroot000000000000000.54.5 / 2016-04-28 =================== * Fix: [CLI] Correct console output for Node 6.0 0.54.4 / 2016-04-27 =================== * Fix: Correct extname checks for Node 6.0 0.54.3 / 2016-04-26 =================== * Fix: Proper embedurl encoding for svg files with a hash. * Fix: Validate this.dest before using path.extname. * Fix: Update node-glob version. 0.54.2 / 2016-03-11 =================== * Fix: False-positive import loop with empty imported file. 0.54.0 / 2016-03-05 =================== * Feature: Added initial reference selector. * Feature: New `embedurl()` bif with optional utf8 uncoding support for SVG. * Feature: New `index()` bif. * Feature: New `percentage()` bif. * Feature: New `slice()` bif, #2115. * Feature: Support for UTF-8 encoding of urls, #2084. * Feature: Added `global` flag to `define()` function. * Feature: `match()` bif now returns the matched values instead of a boolean, #2109. * Feature: Added an optional `flags` argument to `match()` bif, #2109. * Docs: Added basic “getting started” to Readme, #2073. * Docs: Updated information about error reporting. * Fix: `selectors()` now returns proper subselectors. * Fix: No more unneeded spaces with partial reference selector using ranges. * Fix: Proper evaluating of the default arguments. * Fix: Evaluate variables in current-media function. * Fix: Validate regexp flags for `match` function. * Fix: Proper conditional assignment and "define" method. * Fix: Proper relative paths in sourcemaps if --out flag is set to a filename. * Fix: Proper errors with `--include-css` and `--resolve-url` used concurrently. * Fix: [Evaluator] Support for function as a default argument for functions. * Fix: [Lexer] Proper multiline comments inside multiline expressions. * Fix: [JS API] Proper variables from options object inside expressions. * Fix: [Renderer] No more caching of parsed AST for deps-resolver. 0.53.0 / 2015-12-14 =================== * Feature: Numeric partial references. * Feature: Relative references. * Feature: New `selectors()` bif. * Feature: Support for comma-separated lists as `selector()`'s arguments. * Docs: Reworked contribution guidelines. * Docs: Added Contributor Code of Conduct. * Fix: Support for multiple consecutive parent references. * Fix: Proper removal of parent references at the root when combinators are present. * Fix: Don't add space before unknown units. * Fix: Allow comma-separated lists in `@supports` value. * Fix: No more error message for "assertType" without parameter name. * Fix: Proper middleware overlap function on windows. Thanks to #2029 by @bcomnes. * Fix: Better absolute path detection for Windows. Thanks to #2033 by @mlohbihler. * Refactoring: Moved bifs to separate files. 0.52.4 / 2015-09-04 =================== * Fix: Revert changes in "looksLikeSelector" method. 0.52.3 / 2015-09-04 =================== * Fix: Another parsing regression. 0.52.2 / 2015-09-03 =================== * Fix: A parsing regression. 0.52.1 / 2015-09-03 =================== * Fix: Correct line numbers in error messages for files with CSS comments. * Fix: Better absolute urls detection. * Fix: Added type assertions to "substr", "split" and "replace" bifs. * Fix: Atrules parsing with a block at a new line. * Fix: Bug with commented indented lines at the end of a file. * Fix: Stylus error messages for Node 0.12+. * Fix: A bug with arguments cloning. 0.52.0 / 2015-07-19 =================== * Feature: new url resolver without url checks (`--resolve-url-nocheck`). * Feature: New option to json bif ("leave-strings"). * Feature: New option to json bif ("optional"). * Feature: Adding utf-8 charset to inline sourcemap. * Feature: allow inline CSS comments inside value. * Fix: shouldn't fail to compile in strict mode, #1923. * Fix: Paths should be normalized for windows support, #1954. * Fix: Proper parsing of selector groups with placeholder and color-like ID. * Fix: Proper import loop detection. * Fix: Correct output of namespaces and charsets inside imports. * Fix: Indented comments shouldn't cause errors. * Fix: Proper way of parsing lists in "convert" bif. * Fix: Proper comma escaping in an object interpolation. * Fix: Allow no whitespace between keyframes name and the following curly brace. 0.51.1 / 2015-04-28 =================== * Fixed `;` at the end of blockless unknown at-rules. * Fixed float units convertion by `convert` bif. 0.51.0 / 2015-04-23 =================== * Added support for cascading extend. * Added "transparent" as a named color. * Added support for blockless unknown at-rules. * Made math more strict. * Fixed bug with extending nested placeholder selectors inside MQ. * Fixed imports inside `@media` blocks. * Fixed url resolver to consider `--out` options. * Fixed parsing of multiple "else if" statements. * Fixed an edge case with recursive extend. * Fixed regression with nested media queries. * Fixed parsing of nested comments. * Fixed checking paths overlap if 'dest' is a function in middleware. 0.50.0 / 2015-02-05 =================== * Added `!optional` directive for extending, #1757. * Added `selector-exists` bif, #1758. * Added `remove` bif for removing items from hashes. * Added optional recursive hash merging, #1771. * Added optional (`--hoist-atrules` flag) `@import` and `@charset` hoisting. * Added a way to output to specific file path with CLI, #1800. * Fixed regression with using `@media` inside `+cache`. * Fixed `resolve-url` for hash urls, #1778. * Fixed `mix` bif for differently transparent colors, #1792. * Fixed bug with postfix `&` without comma. * Fixed incorrectly imported functions defined in other files with nested @require. * Fixed duplicated selectors when extending into placeholders with MQ. * Fixed `filter: contrast()` error. * Fixed the cloning of cached nodes. * Fixed incorrect filenames included in source maps, #1812. * Fixed stripping of unsuppressed comments from nested blocks. * Fixed build error for multiple files, #1813. * Fixed error handling slightly. * Fixed (throwing error) edge case of watching and printing at the same time, #1798. * Fixed watch to log to std.err, #1796. * Fixed indent in complex rules at CSS to Stylus conversion, #1808. 0.49.3 / 2014-11-06 =================== * Fixed regression with `block` keyword inside block mixin. 0.49.2 / 2014-10-14 =================== * Fixed regression #1727 + small fixes for #1717. * Fixed nested selectors when using nested and bubbled media queries. * Fixed issue when mixin's block is used as part of a property value. * Fixed hardcoded `.styl` extension from CLI (added `extname` arg). 0.49.1 / 2014-09-24 =================== * Fixed an output order of nested media queries. * Fixed regression with cached nodes. * Fixed support for `Woff2` and `WebP` mime-tipes, #1699. 0.49.0 / 2014-09-22 =================== * Added a way to use plugins in stylus.render options, #1697. * Added LRU for memory caching. * Now returning literal CSS on parser error when `--resolve-url` is set. * Now not showing JS stack trace for stylus' `error()` calls. * Fixed inconsistent source maps' field orders. * Fixed bug with calling functions inside an inline loop. * Fixed bug with nested media queries inside a mixin. * Fixed bug with extending nested selector inside placeholder selector. * Fixed bug with alpha variable for hsla/rgba. * Fixed extending of rules inside unknown at-rules. * Fixed incorrect merging of media queries using variables. * Fixed bubbling for `@keyframes`. * Fixed incorrect `@supports` parsing. * Fixed `url()` support for `@namespace`. * Fixed incorrect filename and column information for cached nodes. * Fixed `--sourcemap-base` to be ignored when `--out` is present. * Fixed outputting sourcemap log message when `--print` was present. 0.48.1 / 2014-08-21 =================== * Fixed sourcemap paths when `--out` flag is present, #1668. * Fixed the naming convention for maps: `.styl.map` => `.css.map`, #1668. 0.48.0 / 2014-08-20 =================== * Added basic sourcemaps support, #1655. * Added info on columns for sourcemaps and better error reporting. * Added `globals` and `functions` keys to options object in JS API, #1653. * Added `rebeccapurple` named color. * Added `unicode-range` support (#1648). * Changed the behaviour of adding percents together to the more sane one, #1664. * Fixed bug with property lookup inside mixin block (#1645). * Fixed a bug with nested media queries inside mixins (#1643). * Fixed an `@extend` inside `@media` queries with multi-level selectors (#1658). * Fixed bug with cloning of an interpolated selector with comma (#1660). * Fixed bug with nested media queries in conditionals. * Fixed a bug with cached imports (#1641). * Fixed `@css` literal that generated `u+0085` characters instead of newlines (#1663). * Fixed escaped comma (`\,`) inside hashes (#1666). * Fixed a string representation of HSLA node to preserve `%` (#1439). * Fixed incorrect position of inline comments (#1597). * Fixed a bug with an apostrophe and a colon in a single-line comment (#1647). 0.47.3 / 2014-07-22 =================== * Fixed support for schema-less urls inside `url()`. 0.47.2 / 2014-07-19 =================== * Fixed comma-first multiline syntax, #1634. * Fixed hsla arguments for different color functions, #1619. * Fixed Bug with @media and placeholder selectors, #1625. * Fixed bug with nested media queries, 1620. * Fixed broken URL parsing for source and destination paths, #1613. 0.47.1 / 2014-07-02 =================== * Fixed treatment of unknown pseudo-elements, #1608. * Fixed unit expression precedence error, #1611. 0.47.0 / 2014-07-01 =================== * Added support for anonymous functions, #1580. * A lot of better color functions, #1526: * Added support for two arguments for `hsla`. * Added component setters (`red`, `hue`, `alpha` etc.). * Added `luminosity` bif. * Added `blend` bif. * Added `contrast` bif. * Added `transparentify` bif. * Added `list-separator` bif, #1576. * Added symlinks support to CLI, #1577. * Added idents and units coercion, #1605. * Fixed `@keyframes` parsing issue. * Fixed parse error when `{` is on a new line in at-rules. * Fixed an issue with multiline parsing. * Fixed another issue with cached imports, #1587. * Fixed illegal unary "%", missing left-hand operand, #1586. * Reverted #1527. 0.46.3 / 2014-06-09 =================== * Fixed parse error, #1582. 0.46.2 / 2014-06-04 =================== * Fixed regression with double writing of transparent mixin value, #1574. 0.46.1 / 2014-06-04 =================== * Fixed regression with a root reference in interpolated selectors, #1573. 0.46.0 / 2014-06-03 =================== * Added support for nested media queries, #1540. * Added `convert` built-in function, #1545. * Added negative index values support for subscripts, #1564. * Add short-circuit evaluation for logical operators, #1532. * Fixed the dropped commas in splat arguments, #1525. * Fixed double-writing the `@media` and other at-rules in mixins, #1535. * Fixed unit expression precedence error, #1537. * Fixed comments inside the property expressions, #1538. * Fixed handling of the `@css` and `unquote` inside groups, #1527. * Fixed incorrect line numbers on errors, #1543. * Fixed import cloning with cache, #1548. * Fixed cloning to preserve `property.literal`, #1558. * Fixed bifs arguments cloning bug, #1560. * Fixed bug with nested interpolated selectors with a comma, 1568. * Fixed `current-property` ignored in property lookup, #1565. * Fixed `current-property`'s value to be evaluated in the right context, #1562. * Fixed spaces and comments inside a hash declaration, #1554. * Fixed aliases for transparent mixins, #1557. * Fixed compilation fail when 'dest' path doesn't end with '/', #1541. * Fixed bug with CSS to Stylus `@keyframes` converting, #1549. 0.45.1 / 2014-05-16 =================== * Fixed regression with `@require` and globbed paths inside functions, #1529. 0.45.0 / 2014-05-11 =================== * Added support for more CSS-like syntax variants: indented code blocks, closing curly brace on the same line with props etc (as now ignoring meaningless tokens while parsing), #1506. * Added support for block-level `@import` and `@require`, #1495. * Added hash values support in `@media`, #1504. * Added coercion for pt units, #1483. * Added a way to escape `\` in a tag name, #1487. * Fixed trailing spaces and comments in the selector groups, #1499. * Fixed comments in the selector parts (now ignoring them), #1517. * Fixed bug with url string having a protocol, #1510. * Fixed bug with `@scope` and complex selectors, #1505. * Fixed the recursion with the `display: block` inside block mixins, #1515. * Fixed bug with current-property and block mixins, #1512. * Fixed bug with complex selectors in conditionals, #1500. * Fixed bug with `@media` bubbling and conditionals, #1518. * Fixed bug with newlines and comments in conditionals, #1520. * Fixed bug with the variable in the first line of mixin, #1502. * Fixed but with the variable right after iterating over an empty list, #1503. * Fixed bug with built-in function calls inside a hash assignment, #1488. * Fixed bug with `*` selector first in the group, #1498. * Fixed unnecessary bubbling for `@keyframes`, #1490. * Fixed bug with undefined `filename` on keyframes, #1485. 0.44.0 / 2014-04-23 =================== * Major performance tuning and basic caching support, almost ⨉2 build time boost, #1428. * Added basic support for most at-rules, #1464. * Added `+cache` built-in mixin for caching the result of functions and mixins into placeholders, #1466. * Added `current-media()` bif that returns the string for the current media query, #1466. * Added `called-from` property in functions that contains the names of the functions from the call stack till the current one, #1466. * Added a way to escape commas and parent references inside selectors, #1413. * Removed the never needed `-ms-` prefix for keyframes. * Fixed rendering of multiple selectors inside interpolation, #1413. 0.43.1 / 2014-04-07 =================== * Fixed regression with `only` keyword, #1460. 0.43.0 / 2014-04-05 =================== * Added better support for media queries — interpolations, expressions in values and more, #1453. * Added `define` bif, #1382. * Add `--prefix` option for CLI and `+prefix-classes` mixin, #1420. * Added `--deps` flag to list the dependencies of the compiled file and stylus.deps function, #1429. * Added support for multiple selectors in `@extend`, #1419. * Added the support of the hash objects to `define`, #1444. * Fixed some floating point problems in maths, #1339. * Fixed the lost decimal part of units can when coercing from a string, #1387. * Fixed bug with hash lookup when a property name is the same as a name of local variable, #1433. * Fixed bug with the `+=` operator with strings, #1423. * Fixed a bug in recompiling of the files with `--watch`, #1435. * Fixed `default` value for `cursor` property (Temporally remove `default` from the pseudo-classes list), #1438. * Fixed the rendering of empty `@keyframes`, #1442. * Fixed parseColor for single digit integers in rgb(a) strings, #1447. * Fixed wrong named colors, #1450. 0.42.3 / 2014-03-03 ================== * Fixed bug with pseudo-elements as part of the nested selector with a class, #1415. * Ignoring comments in REPL, #1390. * Fixed bug with print of the line numbers when node has empty `nodes` array, #1412. * Fixed bug with first argument for defaulted arguments, #1407. * Fixed compression of blocks with nested rules, #1396. * Fixed bug with importing of files with `.css` in the dirname, #1385. * Fixed eaten whitespace after selector with a keyword, #1383. 0.42.2 / 2014-01-30 ================== * Added support for reverse ranges. * Fixed bug with an expression as arguments of function call. * Fixed bug with property lookup inside `@block`. * Fixed bug with parsing an attribute selector. * Fixed bug with `add-property` inside function call. * Fixed compiling to a directory with `.styl` in the name. * Fixed bug with missed `mtime` in middleware imports. * Fixed an incorrect line number in multi-line group selectors. * Fixed incorrect file path in win32 debug info, #1353. 0.42.1 / 2014-01-19 ================== * Fixed color functions to fallback into literal CSS functions, #1340. * Fixed `@import` globbing with `--watch`. * Fixed Bug with units as part of the selector. * Fixed compiling with UTF-8 BOM. * Added Icons, and reorganization of graphics folder, #1346. 0.42.0 / 2014-01-06 ================== * Added `@require`, #1287. * Added more lookup patterns for the `@import` and `@require`. Support Node.js modules, #1316. * Added file globbing, #1306 and #1013. * Added root reference, part of #1240. * Added basic support for `@block` entity, #1290. * Added string support for `selector()` bif, #1279. * Added options as an optional argument for `use()` bif, #1297. * Added some new colors shortcuts: grayscale, complement, tint & shade, #1308. * Fixed broken @media queries in logic blocks, #1289. * Fixed function call inside block mixin is on the `block` variable pass, #1285. * Fixed bug with `if` and color in array check, #1301. * Fixed bug with list of color keywords as default argument, #1294. * Fixed bug with property lookup in @media queries, #1315. * Now using `css-parse` instead of `CSSOM` for converting CSS -> Stylus, #1307. 0.41.3 / 2013-12-12 ================== * Fixed regression for `selector`, #1278. 0.41.2 / 2013-12-10 ================== * Fixed property lookup in blocks, #1273. * Fixed @extend in blocks, #1274. * Fixed if-else-if-else, #1276. 0.41.1 / 2013-12-08 ================== * Fixed inaccessible local variable inside conditional which is inside a selector, #1267. * Fixed some minor issues with `selector()` interpolation, #1259. * Fixed missing hashes in base64 converted urls, #1263. * Fixed conditionals inside `@font-face`, #1268. 0.41.0 / 2013-11-30 ================== * Added basic [block mixins](http://stylus-lang.com/docs/mixins.html#block-mixins) (`+foo`) with block interpolation (`block`), #1223. * Added [`selector()` bif](http://stylus-lang.com/docs/selectors.html#selector-bif), #1249. * Added [hash interpolation to blocks](http://stylus-lang.com/docs/hashes.html#interpolation), #1202. * Fixed parent reference in root context from returning `&`. * Fixed bug with double writing media blocks, 1ed44a81 * Fixed a lot of regressions after hashes, #1230, #1236, #1237, #1248. 0.40.3 / 2013-11-16 ================== * Fixed current-property to be available in function evaluation context, #1211. * Fixed another regression, #1215. 0.40.2 / 2013-11-12 ================== * Fixed regression after the #1185, #1207. 0.40.1 / 2013-11-12 ================== * Fixed assign to hashes using dot, #1201. * Fixed regression from the #1185. * Fixed precedence of the subscript operator, #1189. * Fixed imports in functions, #1192. * Fixed compressing of time units, #1204. 0.40.0 / 2013-11-05 ================== * Allow multiple `end` event handlers + optional result css modification, #1180. * Added Support for proper hashes in json config, #1186. * Allow functions accept object literal as an argument, #1184. * Fixed another infinite loop (`a[` etc.), #1187. * Fixed bug in hashes subassigns with functions, #1181. * Fixed "is" attribute selectors fail, #1185. 0.39.4 / 2013-11-03 ================== * Fixed another regression after #1150, #1183. 0.39.3 / 2013-11-01 ================== * Fixed parse error in conditional statement without `()`, #1178. 0.39.2 / 2013-10-31 ================== * Fixed other regressions after #1150, #1175. 0.39.1 / 2013-10-30 ================== * Fixed regression after #1150, #1172. 0.39.0 / 2013-10-30 ================== * Added basic hashes support, #1150. * Allow to inject Evaluator via Renderer's options, #1149. * Fixed infinite loop case, #1147. * Fixed Bug with `else if match`, #1154. * Fixed schemaless absolute urls for `url`, #1148. * Fixed urls in windows 7 for `--relative-url`, #1156. * Fixed calculation inside `calc` CSS function, #1133. * Fixed parsing shorthand colors from json config, #1158. 0.38.0 / 2013-09-24 ================== * Fixed `push` not to modify the first element of another array, #1118. * Fixed property lookup from mixins, #1127. * Fixed support for `src` and `dest` in middleware, started tests for middleware #1143. * Fixed `--resolve-url` that removed tails from urls, #1126. * Fixed mime type for `.woff`, #1128. * Fixed `.toString` for undefined functions, #1119. * Fixed path overlap for non-string dest, #1115. * Fixed `path.resolve` for nonœ-true resolveURL, #1116. * Fixed sync return in `stylus.render()`, #1138. * Fixed duplicate calls from `this.calling`, #1122. 0.37.0 / 2013-08-19 ================== * Added optional params to the json bif, #1102. * Added `--print` option to print CSS to stdout, #1108. * Fixed json bif to return literals for colours, #875. * Fixed include of the css files when `--resolve-url` is on, #1099. * Fixed error in negating variables, #1101. * Fixed bug in `p` function, #1111. * Fixed tests under windows, #1105. * Fixed regression after #1094, #1113. * Fixed regression after #983, #1098. 0.36.1 / 2013-08-06 ================== * Fixed regression after #1090, #1094. 0.36.0 / 2013-08-01 ================== * Added `substr`, `replace` and `split` bifs, #1088. * Added possibility to provide functions to src and dest, #930. * Added explicit expose for events, #898. * Added blocking and css manipulation possibility within 'end' event, #923. * Fixed unneeded code for imports, #1090. * Fixed mtime for literal imports, #983. * Fixed empty string as possible quote value for string node, #956. * Fixed non-symmetrical src and dest paths in middleware, #1037. 0.35.1 / 2013-07-29 ================== * Fixed the support for progressive JPEGs in `image-size`, #1087. 0.35.0 / 2013-07-29 ================== * Added jpeg and svg support to image-size, #1083. * Added `tan` trigonometric function, also `sin` and `cos` now understand `deg` units. * Added fonts to data URI `url()` mimes, also the list of mimes is now configurable, #841, #1046. * Added base conversion for numbers, #714. * Fixes extends from nested mixins, #1084. * Fixes coercion error, #1082. 0.34.1 / 2013-07-12 ================== * Fixed the regression after #865. 0.34.0 / 2013-07-12 ================== * Added built-in `use()` function to extend Stylus from inside of `.styl` files, #788. * Added optional resolver of relative urls, #1070. * Fixes incorrect imports lookup inside function call, #1069. * Fixes a lot of issues with trailing symbols in comments, #865. * Fixes brace on a newline CSS code style. * Some minor fixes to tmbundle: #975, #1033, #1034. 0.33.1 / 2013-06-30 ================== * Fixed the `exports.version` to always show an actual one. 0.33.0 / 2013-06-30 ================== * Added extendable placeholder selectors, #1014. * Added optional argument to `image-size` function, #812. * Fixed inline comments after selectors, #862. * Fixed a bug with empty block in CSS syntax, #712. 0.32.1 / 2013-02-27 ================== * fix issue on Windows where absolute path starts with two backslashes * fix extends within a loop. * fix: don't try to read absolute urls 0.32.0 / 2013-01-04 ================== * add sync api for #230 #691 #151 * fix unsuppressed comments in nested imports * fix #911 Percentage calculation value not copied 0.31.0 / 2012-11-24 ================== * add support for rounding precision * fix extends with parent reference. Closes #879 * fix importing of files with ".css" in the dirname * fix #619 Support slash in media * fix #819 Extends generate duplicate selectors * fix #807 directory with `.styl` in the name and local install of stylus * fix #814 Add property function with media query * fix #828 Add 'x' unit for image-set (synonym to dppx). * fix #834 Percentage calculation not used when value is expression 0.30.1 / 2012-10-17 ================== * fix mozdocument nodes not getting visited during imports. Fixes #853 0.30.0 / 2012-10-15 ================== * add @-moz-document to the lexer and parser. Fixes #436 * add --import for issue #485 * fix @property lookup when a sibling is null * fix 'limit' file size option that was broken in 61a2cf * fix pseudo-selector properties. Closes #808 0.29.0 / 2012-08-15 ================== * add more features to the textmate bundle [paulmillr] * add `json()` BIF for loading variables from JSON files [geddesign] * fix for #790 allow trailing colon, comma etc in // comments [geddesign] 0.28.2 / 2012-07-15 ================== * fix extend in mixin. Closes #747, #748 and #751 0.28.1 / 2012-07-07 ================== * fix __@media__ cloning 0.28.0 / 2012-07-06 ================== * add suffix to `basename()` BIF * add `pathjoin()` BIF * add `basename()` BIF * add `dirname()` BIF * add `extname()` BIF * fix `@extend` in mixin. Closes #638 0.27.2 / 2012-06-19 ================== * Adding list of all css3 units * Fixed CSS to stylus conversion `!important` support * Fix last rule being ignored if empty indents at the end of the file * Fixes #425: Compiler hangs when the last property isn't followed by semicolon at the end of the document * Fixes #435: Can't concat array inside url() 0.27.1 / 2012-05-28 ================== * Fixes #698: incorrect function call within for with named argument [Tõnis Tiigi] * Fixes #676. Stylus incorrectly imports the .css files that are not in the same folder as the processed .styl file 0.27.0 / 2012-05-10 ================== * Added `add-property()` mixin support [jasonkuhrt] * Added % support for `fade-in()` and `fade-out()` [jasonkuhrt] * Added % support to `rgba()` [jasonkuhrt] * Fixed `.import()` - previously failed to mixin 0.26.1 / 2012-05-07 ================== * any node. Closes #657 0.26.0 / 2012-04-27 ================== * Added BIF shift [gravof] * Added BIF pop [gravof] * Added support for __@media__ bubbling properties [Ian MacLeod] * Changed: strip trailing zeros [gravof] 0.25.0 / 2012-04-03 ================== * Added `make test-cov` * Added temporary multiline support. * Added: allow for '%' unit type in the 'alpha' of rgba and hsla [jasonkuhrt] * Updated cssom dep * Removed growl dep. Closes #583 * Fixed BIF retval coercion * Fixed issue #390, nested @media 0.24.0 / 2012-02-16 ================== * Added `mix()` BIF (docs needed) * Added: cast return values from js functions * Fixed binops in mixin selectors. Closes #566 * Fixed `opposite-position()` pass through "center"` 0.23.0 / 2012-02-02 ================== * Added `Renderer` "end" event * Added: cast return value from js-functions * Cleaned up documentation grammar etc [Zearin] 0.22.6 / 2012-01-20 ================== * Fixed postfix conditional cloning. Closes #535 * Fixed idents prefixed with several hyphens. Closes #536 * Fixed up the TextMate bundle syntax [ianstormtaylor] 0.22.5 / 2012-01-16 ================== * Fixed underscore in function identifier. Closes #524 0.22.4 / 2012-01-11 ================== * Fixed __@extends__ inheritance bug. Closes #499 * Fixed 'lineno' global leak due to missing `new` [teppeis] 0.22.3 / 2012-01-11 ================== * Fixed `--watch` working on windows with a temporary hack [dciccale] * Fixed __@extend__ with no properties. Closes #498 0.22.2 / 2012-01-08 ================== * Added: allow newlines in place of commas for keyframes * Fixed: skip comment newlines between keyframe positions. Closes #504 0.22.1 / 2012-01-08 ================== * Fixed __@keyframes__ support for multiple values. Closes #503 0.22.0 / 2012-01-04 ================== * Added `@extend`. Closes #149 * Added more syntax highlighting to TextMate bundle [paulmillr] * Added `keys(pairs)` and `values(pairs)` BIFs * Added JavaScript object coercion support * Added JavaScript -> Stylus node coercion utilities * Fixed `.define()`ing of functions * Fixed `stylus(1)` repl for 0.6.x 0.21.2 / 2011-12-22 ================== * Fixed literal / within function call. Closes #432 0.21.1 / 2011-12-20 ================== * Fixed space after `)` in selectors. Closes #449 0.21.0 / 2011-12-17 ================== * Added unit casting, ex: `(n * 5)%`. Closes #285 0.20.1 / 2011-12-16 ================== * Added global leak detection to the test suite * Fixed two globals * Fixed operator ident regression. Closes #292 0.20.0 / 2011-12-11 ================== * Added `--include-css` to literally include imported CSS. Closes #448 * Fixed coercion bug with expression. Closes #480 0.19.8 / 2011-12-01 ================== * Fixed middleware `mkdir -p` support 0.19.7 / 2011-11-30 ================== * Fixed `or` binop regression. Closes #475 0.19.6 / 2011-11-30 ================== * Fixed current-property with commas. Closes #472 0.19.5 / 2011-11-28 ================== * revert noop visitor methods, this breaks extensions 0.19.4 / 2011-11-28 ================== * Fixed css-style __@page__ support * Fixed __@page__ block evaluation * Fixed __@font-face__ block evaluation [Suor] 0.19.3 / 2011-11-17 ================== * Added "include css" setting (need docs) to literally include imported css. Closes #448 * Added EOL escape. Related to #195 * Fixed tab support in lexical analysis (trailing colors etc). Closes #460 0.19.2 / 2011-11-09 ================== * Fixed "in" within selectors. Closes #458 0.19.1 / 2011-11-08 ================== * Added `spin()` BIF (same as `color + 50deg` etc) * Removed "sys" require()s for 0.6.x * Fixed sibling property lookup bug. Closes #452 * Fixed: retain original quote for strings 0.19.0 / 2011-10-26 ================== * Added property lookup bubbling support. Closes #446 0.18.1 / 2011-10-26 ================== * Added "indent spaces" compiler setting. Closes #445 * Allow node > 0.4.x < 0.7.0 * Fixed: allow function execution within @imports 0.18.0 / 2011-10-21 ================== * Added #n support (#e -> #eeeeee). Closes #430 * Added #nn support (#ef -> #efefef) * Added support for rgb percentages. * Fixed property rendering in blocks. Closes #440 0.17.0 / 2011-09-30 ================== * Added `@scope ` feature to scope all subsequent selectors * Added list equality to the `!=` operator * Added list equality to the `==` operator * Added mkdir -p support to the middleware * Changed: `!` coerces expression not the first value * Fixed Ternary boolean coercion. Closes #420 * Fixed __@font-face__ __@import__ regression. Closes #418 0.16.0 / 2011-09-26 ================== * Added `mkdir -p` support to the middleware * Added `@import url(string)` support. Closes #352 * Added `fade-in()` and `fade-out()` BIFs * Adding prefixes for Opera and IE * Fixed comments trailing __@media__. Closes #415 [guillermo] * Fixed: Output from --help in stylus executable cut-off half way through * Changed: treat -/+ operations with percentages as lighten()/darken(). Closes #401 0.15.4 / 2011-09-14 ================== * Fixed `String#coerce()` for Expressions 0.15.3 / 2011-09-14 ================== * Added `-U, --inline` to stylus(1) * Added `rem` support. Closes #395 * Fixed __@charset__ semi-colon. Closes #400 * Fixed infinite loop in `Parser#function()`. Closes #393 0.15.2 / 2011-09-06 ================== * Added alias `:=` of `?=`. Closes #389 * Removed auto-prefixing of pseudo element selectors. Closes #385 * Changed: when left-hand operand has no unit assign the right * Fixed __@keyframes__ with __@import__ regression. Closes #372 * Fixed css __@import__ within blocks regression. Closes #388 * Fixed unwrapping of property args expression. Closes #379 * Fixed __@prop__ access scope issue, use closet block, not current * Fixed __@font-face__. Closes #375 0.15.1 / 2011-08-18 ================== * Added pseudo-element vendor expansion support * Added `@keyframe` expansion support. Closes #293 * Added support for arbitrary `@-VENDOR-keyframes` support * Added support for `@property` mixin property access Closes #363 * Added `/*!` support to comments to disable suppression * Changed: allow uses to append `.styl` when importing. Closes #366 * Fixed paren matching issue. Closes #368 * Fixed windows absolute path checking Added `utils.absolute(path)` * Fixed `Ident#clone()` with `.property` flag * Fixed evaluation of expression when using @name. Closes #361 * Fixed `path.join()` usage in `utils.lookup()`. Closes #356 * Fixed space after comment regression. Closes #360 0.15.0 / 2011-08-15 ================== * Adding `Renderer#get(option)` * Added the ability to reference property values with `@`. Closes #344 * Changed comment output. css-style multi-line comments are preserved * Fixed issue with bools in selectors. Closes #280 0.14.0 / 2011-08-10 ================== * Added firebug original file / line number mapping [parallel] * Added support for `#rgba` and `#rrggbbaa` color formats * Changed: fix alpha to a scale of 2 * Fixing function param check to allow for empty function arguments 0.13.9 / 2011-08-04 ================== * Fixed `lighten()` BIF 'lighten by %' function push color closer to white [cwolves] * Fixed cli plugin usage absolute paths, don't prepend the CWD [cpojer] * Renaming 'import' to '_import' because import is a reserved word in node v0.5 0.13.8 / 2011-08-01 ================== * Added `PI` and `-math-prop(name)` * Added `cos()` and `sin()` * Added support for __SVG__ data URIs [mhemesath] * Rename variable "import" to "imported" [eegg] 0.13.7 / 2011-07-15 ================== * Added `js(str)` BIF * Fixed reserved keyword `import` with `imported` 0.13.6 / 2011-07-12 ================== * Added `@-webkit-keyframes` support. Closes #307 * Added gedit language-spec * Changed: optional `growl` dep for stylus(1) * Changed: `require("stylus")` instead of `../` for the mac app integration 0.13.5 / 2011-06-27 ================== * Fixed middleware handling of new and removed `@import` s [brandonbloom] 0.13.4 / 2011-06-22 ================== * Added __Compile and Display CSS__ TextMate command (⌘B) [Daniel Gasienica] * Fixed caching behavior for recompilation of files with changed imports [Brandon Bloom] 0.13.3 / 2011-06-01 ================== * Added padding for error linenos so they line up * Improved unary op error messages * Improved invalid `@keyframes` ident error msg * Fixed HSLA regression for operations resulting in a bool. Closes #274 * Fixed `arguments` issue with excluding defaults. Closes #272 0.13.2 / 2011-05-31 ================== * Fixed colors after `url()` call regression. Closes #270 0.13.1 / 2011-05-30 ================== * Fixed colors in `url()`. Closes #267 * Fixed selector without trailing comma containing selector token. Closes #260 0.13.0 / 2011-05-17 ================== * Added `-u, --use PATH` flag for utilizing plugins * Fixed `hsla.clampDegrees()` with negative values [Bruno Héridet] 0.12.4 / 2011-05-12 ================== * Added support for underscore in identifiers. Closes #247 * Fixed `@keyframe` block evaluation. Closes #252 0.12.3 / 2011-05-08 ================== * Fixed `0%` in `@keyframes` from becoming `0` when compressed. Closes #248 0.12.2 / 2011-05-03 ================== * Fixed issue with `^=` attr selector causing infinite loop. Closes #244 * Fixed multiple occurrences of `&` in selectors. Closes #243 0.12.1 / 2011-04-29 ================== * Fixed spaces around line-height shorthand. Closes #228 * Fixed `-{foo}` interpolation support. Closes #235 0.12.0 / 2011-04-29 ================== * Added `*prop: val` hack support (blueprint / html boilerplate etc parse fine now) * Added selector interpolation support * Fixed "-" within interpolation. Closes #220 0.11.12 / 2011-04-27 ================== * Added `SyntaxError` and `ParseError` * Removed `stylus.parse()` * Fixed error reporting. Closes #44 0.11.11 / 2011-04-24 ================== * Fixed mutation of units when using unary ops. Closes #233 0.11.10 / 2011-04-17 ================== * Fixed regression. Closes #229 0.11.9 / 2011-04-15 ================== * Fixed issue with large selectors spanning several lines 0.11.8 / 2011-04-15 ================== * Added support for `Renderer#define(name, node)` to define a global 0.11.7 / 2011-04-12 ================== * Added `Renderer#use(fn)`. Closes #224 * Improved `utils.assertType()` error message; include param name 0.11.6 / 2011-04-12 ================== * Fixed: node.source and node.filename are writable 0.11.5 / 2011-04-12 ================== * Added / employed `Null#isNull` * Added / employed `Boolean#is{True,False}` * Removed all uses of `instanceof` * Removed all equality checks between singleton nodes 0.11.4 / 2011-04-10 ================== * Added `Arguments#clone()` * Added `push()` / `append()` * Added `unshift()` / `prepend()` BIFs 0.11.3 / 2011-04-08 ================== * Fixed: keyword args previously not evaluated * Fixed: subpixel support * Fixed bug preventing combinators (and other ops) in `@media` blocks. Closes #216 [reported by jsteenkamp] 0.11.2 / 2011-04-06 ================== * Added `Renderer#include(path)`. Closes #214 * Fixed `@import` path resolution bug. Closes #215 * Fixed optional keyword arg bug. Closes #212 0.11.1 / 2011-04-01 ================== * Fixed regression preventing commas from outputting 0.11.0 / 2011-04-01 ================== * Added `HSLA#add(h,s,l,a)` * Added `HSLA#sub(h,s,l,a)` * Added `RGBA#add(r,g,b,a)` * Added `RGBA#sub(r,g,b,a)` * Added `RGBA#multiply(n)` * Added `RGBA#divide(n)` * Added `HSLA#adjustHue(deg)` * Added `HSLA#adjustLightness(percent)` * Added `HSLA#adjustSaturation(percent)` * Added `linear-gradient()` example * Added `s(fmt, ...)` built-in; sprintf-like * Added `%` sprintf-like string operator, ex: `'%s %s' % (1 2)` * Added `current-property` local variable * Added `add-property(name, val)` * Added the ability for functions to duplicate the property they are invoked within * Added `[]=` operator support. Ex: `fonts[1] = arial`, `nums[1..3] = 2` * Added `-I, --include ` to stylus(1). Closes #206 * Added support for `50 + 25% == 75` * Added support for `rgba + 25%` to lighten * Added support for `rgba - 25%` to darken * Added support for `rgba - 25` to adjust rgb values * Changed: null now outputs "null" instead of "[Null]" * Fixed hsl operation support, all operations are equivalent on rgba/hsla nodes * Fixed degree rotation 0.10.0 / 2011-03-29 ================== * Added keyword argument support * Added `Arguments` node, acts like `Expression` * Added `utils.params()` * Added `debug` option to stylus middleware * Added support for `hsl + 15deg` etc to adjust hue * Added special-case for percentage based `RGBA` operations (`#eee - 20%`) * Changed: right-hand colors in operations are not clamped (`#eee * 0.2`) * Added support for `unit * color` (swaps operands) * Fixed color component requests on the opposite node type (ex red on hsla node) * Fixed `Expression#clone()` to support `Arguments` * Fixed issue with middleware where imports are improperly mapped * Fixed mutation of color when adjusting values * Fixed: coerce string to literal * Removed {`darken`,`lighten`}`-by()` BIFs 0.9.2 / 2011-03-21 ================== * Removed a `console.log()` call 0.9.1 / 2011-03-18 ================== * Fixed connect middleware `@import` support. Closes #168 The middleware is now smart enough to know when imports change, and will re-compile the target file. * Changed middleware `compile` function to return the `Renderer` (API change) 0.9.0 / 2011-03-18 ================== * Added `-i, --interactive` for the Stylus REPL (eval stylus expressions, tab-completion etc) * Added link to vim syntax * Changed `p()` built-in to display parens * Changed `--compress -C` to `-c`, and `-css -c` is now `-C` * Fixed: preserve rest-arg expressions. Closes #194 * Fixed `*=` in selector, ex `[class*="foo"]` * Fixed `--watch` issue with growl, updated to 1.1.0. Closes #188 * Fixed negative floats when compressed. Closes #193 [reported by ludicco] 0.8.0 / 2011-03-14 ================== * Added postfix `for`-loop support. Ex: `return n if n % 2 == 0 for n in nums` * Added support for several postfix operators Ex: `border-radius: 5px if true unless false;` * Added `last(expr)` built-in function * Added `sum(nums)` built-in function * Added `avg(nums)` built-in function * Added `join(delim, vals)` built-in function * Added `Evaluator#{currentScope,currentBlock}` * Added multi-line function parameter definition support * Changed: `0` is falsey, `0%`, `0em`, `0px` etc truthy. Closes #160 * Fixed `for` implicit __return__ value * Fixed `for` explicit __return__ value * Fixed mixin property ordering 0.7.4 / 2011-03-10 ================== * Added `RGBA` node * Added `is a "color"` special-case, true for `HSLA` and `RGBA` nodes. Closes #180 * Performance; 2.5× faster compiles due to removing use of getters in `Parser` and `Lexer` (yes, they are really slow). * Removed `Color` node * Fixed stylus(1) `--watch` support due to dynamic `@import` support. Closes #176 0.7.3 / 2011-03-09 ================== * Fixed: allow semi-colons for non-css syntax for one-liners 0.7.2 / 2011-03-08 ================== * Added `isnt` operator (same as `is not` and `!=`) * Added support for dynamic `@import` expressions * Added `@import` index resolution support * Added `light()` / `dark()` BIFs * Added `compress` option for Connect middleware [disfated] * Changed: most built-in functions defined in stylus (`./lib/functions/index.styl`) * Fixed dynamic expressions in `url()`. Closes #105 0.7.1 / 2011-03-07 ================== * Fixed connect middleware for 0.4.x 0.7.0 / 2011-03-02 ================== * Added `is` and `is not` aliases for `==` and `!=` * Added `@keyframes` dynamic name support * Fixed units in interpolation * Fixed clamping of HSLA degrees / percentages 0.6.7 / 2011-03-01 ================== * Fixed __RGBA__ -> __HSLA__ conversion due to typo 0.6.6 / 2011-03-01 ================== * Added string -> unit type coercion support aka `5px + "10"` will give `15px` * Added `warn` option Closes #152 Currently this only reports on re-definition of functions * Added `$` as a valid identifier character * Added `mixin` local variable for function introspection capabilities. Closes #162 * Fixed typo: `Unit#toBoolean()` is now correct * Fixed interpolation function calls. Closes #156 * Fixed mixins within Media node. Closes #153 * Fixed function call in ret val. Closes #154 0.6.5 / 2011-02-24 ================== * Fixed parent ref `&` mid-selector bug. Closes #148 [reported by visnu] 0.6.4 / 2011-02-24 ================== * Fixed `for` within brackets. Closes #146 0.6.3 / 2011-02-22 ================== * Fixed single-ident selectors. Closes #142 * Fixed cyclic `@import` with file of the same name. Closes #143 0.6.2 / 2011-02-21 ================== * Added stylus(1) growl support when using `--watch` * Added `@import` watching support to stylus(1). Closes #134 * Changed: stylus(1) only throws when `--watch` is not used * Fixed `darken-by()` BIF * Fixed `@import` literal semi-colon. Closes #140 0.6.1 / 2011-02-18 ================== * Fixed evaluation of nodes after a return. Closes #139 0.6.0 / 2011-02-18 ================== * Added `stylus(1)` direct css to stylus file conversion [Mario] For example instead of `$ stylus --css < foo.css > foo.styl` you may now either `$ stylus --css foo.css` or provide a destination path `$ stylus --css foo.css /tmp/out.styl`. * Added postfix conditionals. Closes #74 Expressive ruby-ish syntax, ex: `padding 5px if allow-padding`. 0.5.3 / 2011-02-17 ================== * Added `in` operator. `3 in nums`, `padding in props` etc * Added `Expression#hash`, hashing all of the nodes in order * Added tests for conditionals with braces. Closes #136 * Fixed ids that are also valid colors. Closes #137 0.5.2 / 2011-02-15 ================== * Fixed spaces after `}` with css-style. Closes #131 * Fixed single-line css-style support. Closes #130 0.5.1 / 2011-02-11 ================== * Fixed mixin property ordering. Closes #125 0.5.0 / 2011-02-09 ================== * Added `lighten-by()` BIF * Added `darken-by()` BIF 0.4.1 / 2011-02-09 ================== * Added support for function definition braces * Fixed issue with invalid color output. Closes #127 0.4.0 / 2011-02-07 ================== * Added css-style syntax support * Fixed support for `*` selector within `@media` blocks 0.3.1 / 2011-02-04 ================== * Fixed property disambiguation logic. Closes #117 You no longer need to add a trailing comma when chaining selectors such as `td:nth-child(2)\ntd:nth-child(3)` 0.3.0 / 2011-02-04 ================== * Added more assignment operators. Closes #77 `+=`, `-=`, `*=`, `/=`, and `%=` 0.2.1 / 2011-02-02 ================== * Fixed `--compress` when passing files for stylus(1). Closes #115 * Fixed bug preventing absolute paths from being passed to `@import` * Fixed `opposite-position()` with nested expressions, unwrapping * Fixed a couple global var leaks [aheckmann] 0.2.0 / 2011-02-01 ================== * Added: `url()` utilizing general lookup paths. This means that `{ paths: [] }` is optional now, as lookups will be relative to the file being rendered by default. * Added `-w, --watch` support to stylus(1). Closes #113 0.1.0 / 2011-02-01 ================== * Added `opposite-position(positions)` built-in function * Added `image-lookup(path)` built-in function * Added `-o, --out ` support to stylus(1) * Added `stylus [file|dir ...]` support * Added: defaulting paths to `[CWD]` for stylus(1) * Changed: `unquote()` using `Literal` node * Changed: utilizing `Literal` in place of some `Ident`s 0.0.2 / 2011-01-31 ================== * Added optional property colon support. Closes #110 * Added `--version` to stylus(1) 0.0.1 / 2011-01-31 ================== * Initial release stylus-0.54.7/LICENSE000066400000000000000000000021061352722646500141720ustar00rootroot00000000000000(The MIT License) Copyright (c) Automattic 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. 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. stylus-0.54.7/Makefile000066400000000000000000000017271352722646500146350ustar00rootroot00000000000000 SRC = $(shell find lib -name "*.js") TM_BUNDLE = editors/Stylus.tmbundle define DETERMINE_TEXTMATE_BUNDLE_PATH cd /tmp && \ cp /Applications/TextMate.app/Contents/Info.plist /tmp/textmate-info.plist && \ plutil -convert json -r /tmp/textmate-info.plist && \ (test `node -e " \ var json = $$(cat /tmp/textmate-info.plist | tr "\n" " "); \ console.log(json['CFBundleShortVersionString'][0]); \ "` -gt 1) && \ echo ~/Library/Application\ Support/TextMate/Managed/Bundles || \ echo ~/Library/Application\ Support/TextMate/Bundles endef TM_BUNDLE_DEST = $(shell $(DETERMINE_TEXTMATE_BUNDLE_PATH)) test: @npm test test-cov: lib-cov @STYLUS_COV=1 npm run-script test-cov lib-cov: lib ./node_modules/.bin/jscoverage $< $@ install-bundle: mkdir -p "$(TM_BUNDLE_DEST)" cp -fr "$(TM_BUNDLE)" "$(TM_BUNDLE_DEST)" update-bundle: cp -fr "$(TM_BUNDLE_DEST)"/Stylus.tmbundle editors benchmark: @node bm.js .PHONY: test install-bundle update-bundle benchmark test-cov stylus-0.54.7/Readme.md000066400000000000000000000135471352722646500147170ustar00rootroot00000000000000# Stylus [![Build Status](https://travis-ci.org/stylus/stylus.svg?branch=master)](https://travis-ci.org/stylus/stylus) [![npm version](https://badge.fury.io/js/stylus.svg)](https://badge.fury.io/js/stylus) [![npm](https://img.shields.io/npm/dm/stylus.svg)](https://www.npmjs.com/package/stylus) [![Join the community on Spectrum](https://withspectrum.github.io/badge/badge.svg)](https://spectrum.chat/stylus) 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. ## Installation ```bash $ npm install stylus -g ``` ## Basic Usage Watch and compile a stylus file from command line with ```bash 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 integrate stylus with [gulp](http://gulpjs.com/) using [gulp-stylus](https://www.npmjs.com/package/gulp-stylus) or [gulp-accord](https://www.npmjs.com/package/gulp-accord). ### 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 ### Community modules - https://github.com/stylus/stylus/wiki ### Framework Support - [Connect](docs/middleware.md) - [Play! 2.0](https://github.com/patiencelabs/play-stylus) - [Ruby On Rails](https://github.com/forgecrafted/ruby-stylus-source) - [Meteor](http://docs.meteor.com/#stylus) - [Grails](http://grails.org/plugin/stylus-asset-pipeline) - [Derby](https://github.com/derbyjs/derby-stylus) - [Laravel](https://laravel.com/docs/5.5/mix#stylus) ### CMS Support - [DocPad](https://github.com/docpad/docpad) - [Punch](https://github.com/laktek/punch-stylus-compiler) ### Screencasts - [CSS Syntax & Postfix Conditionals](http://www.screenr.com/A8v) ### Authors - [TJ Holowaychuk (tj)](https://github.com/tj) ### More Information - Language [comparisons](docs/compare.md) ## Code of Conduct 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. ## License (The MIT License) Copyright (c) Automattic <developer.wordpress.com> 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. 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. stylus-0.54.7/bin/000077500000000000000000000000001352722646500137365ustar00rootroot00000000000000stylus-0.54.7/bin/stylus000077500000000000000000000452311352722646500152340ustar00rootroot00000000000000#!/usr/bin/env node /** * Module dependencies. */ var fs = require('fs') , stylus = require('../lib/stylus') , basename = require('path').basename , dirname = require('path').dirname , extname = require('path').extname , resolve = require('path').resolve , join = require('path').join , isWindows = process.platform === 'win32' , semver = require('semver') , mkdirSync = semver.satisfies(process.version, '>=10.12.0') ? fs.mkdirSync : require('mkdirp').sync; /** * Arguments. */ var args = process.argv.slice(2); /** * Compare flag. */ var compare = false; /** * Compress flag. */ var compress = false; /** * CSS conversion flag. */ var convertCSS = false; /** * Line numbers flag. */ var linenos = false; /** * CSS class prefix. */ var prefix = ''; /** * Print to stdout flag. */ var print = false; /** * Firebug flag */ var firebug = false; /** * Quiet flag */ var quiet = false; /** * Sourcemap flag */ var sourcemap = false; /** * Files to processes. */ var files = []; /** * Import paths. */ var paths = []; /** * Destination directory. */ var dest; /** * Watcher hash. */ var watchers; /** * Enable REPL. */ var interactive; /** * Plugins. */ var plugins = []; /** * Optional url() function. */ var urlFunction = false; /** * Include CSS on import. */ var includeCSS = false; /** * Set file imports. */ var imports = []; /** * Resolve relative urls */ var resolveURL = false; /** * Disable cache. */ var disableCache = false; /** * Display dependencies flag. */ var deps = false; /** * Hoist at-rules. */ var hoist = false; /** * Specify custom file extension. */ var ext = '.css'; /** * Usage docs. */ var usage = [ '' , ' Usage: stylus [options] [command] [< in [> out]]' , ' [file|dir ...]' , '' , ' Commands:' , '' , ' help [:] Opens help info at MDN for in' , ' your default browser. Optionally' , ' searches other resources of :' , ' safari opera w3c ms caniuse quirksmode' , '' , ' Options:' , '' , ' -i, --interactive Start interactive REPL' , ' -u, --use Utilize the Stylus plugin at ' , ' -U, --inline Utilize image inlining via data URI support' , ' -w, --watch Watch file(s) for changes and re-compile' , ' -o, --out Output to when passing files' , ' -C, --css [dest] Convert CSS input to Stylus' , ' -I, --include Add to lookup paths' , ' -c, --compress Compress CSS output' , ' -d, --compare Display input along with output' , ' -f, --firebug Emits debug infos in the generated CSS that' , ' can be used by the FireStylus Firebug plugin' , ' -l, --line-numbers Emits comments in the generated CSS' , ' indicating the corresponding Stylus line' , ' -m, --sourcemap Generates a sourcemap in sourcemaps v3 format' , ' -q, --quiet Less noisy output' , ' --sourcemap-inline Inlines sourcemap with full source text in base64 format' , ' --sourcemap-root "sourceRoot" property of the generated sourcemap' , ' --sourcemap-base Base from which sourcemap and all sources are relative' , ' -P, --prefix [prefix] prefix all css classes' , ' -p, --print Print out the compiled CSS' , ' --import Import stylus ' , ' --include-css Include regular CSS on @import' , ' --ext Specify custom file extension for compiled file, default .css' , ' -D, --deps Display dependencies of the compiled file' , ' --disable-cache Disable caching' , ' --hoist-atrules Move @import and @charset to the top' , ' -r, --resolve-url Resolve relative urls inside imports' , ' --resolve-url-nocheck Like --resolve-url but without file existence check' , ' -V, --version Display the version of Stylus' , ' -h, --help Display help information' , '' ].join('\n'); /** * Handle arguments. */ var arg; while (args.length) { arg = args.shift(); switch (arg) { case '-h': case '--help': console.error(usage); return; case '-d': case '--compare': compare = true; break; case '-c': case '--compress': compress = true; break; case '-C': case '--css': convertCSS = true; break; case '-f': case '--firebug': firebug = true; break; case '-l': case '--line-numbers': linenos = true; break; case '-m': case '--sourcemap': sourcemap = {}; break; case '-q': case '--quiet': quiet = true; break; case '--sourcemap-inline': sourcemap = sourcemap || {}; sourcemap.inline = true; break; case '--sourcemap-root': var url = args.shift(); if (!url) throw new Error('--sourcemap-root required'); sourcemap = sourcemap || {}; sourcemap.sourceRoot = url; break; case '--sourcemap-base': var path = args.shift(); if (!path) throw new Error('--sourcemap-base required'); sourcemap = sourcemap || {}; sourcemap.basePath = path; break; case '-P': case '--prefix': prefix = args.shift(); if (!prefix) throw new Error('--prefix required'); break; case '-p': case '--print': print = true; break; case '-V': case '--version': console.log(stylus.version); return; case '-o': case '--out': dest = args.shift(); if (!dest) throw new Error('--out required'); break; case 'help': var name = args.shift() , browser = name.split(':'); if (browser.length > 1) { name = [].slice.call(browser, 1).join(':'); browser = browser[0]; } else { name = browser[0]; browser = ''; } if (!name) throw new Error('help required'); help(name); break; case '--include-css': includeCSS = true; break; case '--ext': ext = args.shift(); if (!ext) throw new Error('--ext required'); break; case '--disable-cache': disableCache = true; break; case '--hoist-atrules': hoist = true; break; case '-i': case '--repl': case '--interactive': interactive = true; break; case '-I': case '--include': var path = args.shift(); if (!path) throw new Error('--include required'); paths.push(path); break; case '-w': case '--watch': watchers = {}; break; case '-U': case '--inline': args.unshift('--use', 'url'); break; case '-u': case '--use': var options; var path = args.shift(); if (!path) throw new Error('--use required'); // options if ('--with' == args[0]) { args.shift(); options = args.shift(); if (!options) throw new Error('--with required'); options = eval('(' + options + ')'); } // url support if ('url' == path) { urlFunction = options || {}; } else { paths.push(dirname(path)); plugins.push({ path: path, options: options }); } break; case '--import': var file = args.shift(); if (!file) throw new Error('--import required'); imports.push(file); break; case '-r': case '--resolve-url': resolveURL = {}; break; case '--resolve-url-nocheck': resolveURL = { nocheck: true }; break; case '-D': case '--deps': deps = true; break; default: files.push(arg); } } // if --watch is used, assume we are // not working with stdio if (watchers && !files.length) { files = fs.readdirSync(process.cwd()) .filter(function(file){ return file.match(/\.styl$/); }); } // --sourcemap flag is not working with stdio if (sourcemap && !files.length) sourcemap = false; /** * Open the default browser to the CSS property `name`. * * @param {String} name */ function help(name) { var url , exec = require('child_process').exec , command; name = encodeURIComponent(name); switch (browser) { case 'safari': case 'webkit': url = 'https://developer.apple.com/library/safari/search/?q=' + name; break; case 'opera': url = 'http://dev.opera.com/search/?term=' + name; break; case 'w3c': url = 'http://www.google.com/search?q=site%3Awww.w3.org%2FTR+' + name; break; case 'ms': url = 'http://social.msdn.microsoft.com/search/en-US/ie?query=' + name + '&refinement=59%2c61'; break; case 'caniuse': url = 'http://caniuse.com/#search=' + name; break; case 'quirksmode': url = 'http://www.google.com/search?q=site%3Awww.quirksmode.org+' + name; break; default: url = 'https://developer.mozilla.org/en/CSS/' + name; } switch (process.platform) { case 'linux': command = 'x-www-browser'; break; default: command = 'open'; } exec(command + ' "' + url + '"', function(){ process.exit(0); }); } // Compilation options if (files.length > 1 && isCSS(dest)) { dest = dirname(dest); } var options = { filename: 'stdin' , compress: compress , firebug: firebug , linenos: linenos , sourcemap: sourcemap , paths: [process.cwd()].concat(paths) , prefix: prefix , dest: dest , 'hoist atrules': hoist }; // Buffer stdin var str = ''; // Convert CSS to Stylus if (convertCSS) { switch (files.length) { case 2: compileCSSFile(files[0], files[1]); break; case 1: var file = files[0]; compileCSSFile(file, join(dirname(file), basename(file, extname(file))) + '.styl'); break; default: var stdin = process.openStdin(); stdin.setEncoding('utf8'); stdin.on('data', function(chunk){ str += chunk; }); stdin.on('end', function(){ var out = stylus.convertCSS(str); console.log(out); }); } } else if (interactive) { repl(); } else if (deps) { // if --deps is used, just display list of the dependencies // not working with stdio and dirs displayDeps(); } else { if (files.length) { compileFiles(files); } else { compileStdio(); } } /** * Start Stylus REPL. */ function repl() { var options = { cache: false, filename: 'stdin', imports: [join(__dirname, '..', 'lib', 'functions')] } , parser = new stylus.Parser('', options) , evaluator = new stylus.Evaluator(parser.parse(), options) , rl = require('readline') , repl = rl.createInterface(process.stdin, process.stdout, autocomplete) , global = evaluator.global.scope; // expose BIFs evaluator.evaluate(); // readline repl.setPrompt('> '); repl.prompt(); // HACK: flat-list auto-complete function autocomplete(line){ var out = process.stdout , keys = Object.keys(global.locals) , len = keys.length , words = line.split(/\s+/) , word = words.pop() , names = [] , name , node , key; // find words that match for (var i = 0; i < len; ++i) { key = keys[i]; if (0 == key.indexOf(word)) { node = global.lookup(key); switch (node.nodeName) { case 'function': names.push(node.toString()); break; default: names.push(key); } } } return [names, line]; }; repl.on('line', function(line){ if (!line.trim().length) return repl.prompt(); parser = new stylus.Parser(line, options); parser.state.push('expression'); evaluator.return = true; try { var expr = parser.parse(); evaluator.root = expr; var ret = evaluator.evaluate(); var node; while (node = ret.nodes.pop()) { if (!node.suppress) { var str = node.toString(); if ('(' == str[0]) str = str.replace(/^\(|\)$/g, ''); console.log('\033[90m=> \033[0m' + highlight(str)); break; } } repl.prompt(); } catch (err) { console.error('\033[31merror: %s\033[0m', err.message || err.stack); repl.prompt(); } }); repl.on('SIGINT', function(){ console.log(); process.exit(0); }); } /** * Highlight the given string of Stylus. */ function highlight(str) { return str .replace(/(#)?(\d+(\.\d+)?)/g, function($0, $1, $2){ return $1 ? $0 : '\033[36m' + $2 + '\033[0m'; }) .replace(/(#[\da-fA-F]+)/g, '\033[33m$1\033[0m') .replace(/('.*?'|".*?")/g, '\033[32m$1\033[0m'); } /** * Convert a CSS file to a Styl file */ function compileCSSFile(file, fileOut) { fs.stat(file, function(err, stat){ if (err) throw err; if (stat.isFile()) { fs.readFile(file, 'utf8', function(err, str){ if (err) throw err; var styl = stylus.convertCSS(str); fs.writeFile(fileOut, styl, function(err){ if (err) throw err; }); }); } }); } /** * Compile with stdio. */ function compileStdio() { process.stdin.setEncoding('utf8'); process.stdin.on('data', function(chunk){ str += chunk; }); process.stdin.on('end', function(){ // Compile to css var style = stylus(str, options); if (includeCSS) style.set('include css', true); if (disableCache) style.set('cache', false); usePlugins(style); importFiles(style); style.render(function(err, css){ if (err) throw err; if (compare) { console.log('\n\x1b[1mInput:\x1b[0m'); console.log(str); console.log('\n\x1b[1mOutput:\x1b[0m'); } console.log(css); if (compare) console.log(); }); }).resume(); } /** * Compile the given files. */ function compileFiles(files) { files.forEach(compileFile); } /** * Display dependencies of the compiled files. */ function displayDeps() { files.forEach(function(file){ // ensure file exists fs.stat(file, function(err, stat){ if (err) throw err; fs.readFile(file, 'utf8', function(err, str){ if (err) throw err; options.filename = file; var style = stylus(str, options); usePlugins(style); importFiles(style); console.log(style.deps().join('\n')); }); }); }); } /** * Compile the given file. */ function compileFile(file) { // ensure file exists fs.stat(file, function(err, stat){ if (err) throw err; // file if (stat.isFile()) { fs.readFile(file, 'utf8', function(err, str){ if (err) throw err; options.filename = file; options._imports = []; var style = stylus(str, options); if (includeCSS) style.set('include css', true); if (disableCache) style.set('cache', false); if (sourcemap) style.set('sourcemap', sourcemap); usePlugins(style); importFiles(style); style.render(function(err, css){ watchImports(file, options._imports); if (err) { if (watchers) { console.error(err.stack || err.message); } else { throw err; } } else { writeFile(file, css); // write sourcemap if (sourcemap && !sourcemap.inline) { writeSourcemap(file, style.sourcemap); } } }); }); // directory } else if (stat.isDirectory()) { fs.readdir(file, function(err, files){ if (err) throw err; files.filter(function(path){ return path.match(/\.styl$/); }).map(function(path){ return join(file, path); }).forEach(compileFile); }); } }); } /** * Write the given CSS output. */ function createPath(file, sourceMap) { var out; if (files.length === 1 && isCSS(dest)) { return [dest, sourceMap ? '.map' : ''].join(''); } // --out support out = [basename(file, extname(file)), sourceMap ? ext + '.map' : ext].join(''); return dest ? join(dest, out) : join(dirname(file), out); } /** * Check if the given path is a CSS file. */ function isCSS(file) { return file && '.css' === extname(file); } function writeFile(file, css) { // --print support if (print) return process.stdout.write(css); var path = createPath(file); mkdirSync(dirname(path), { recursive: true }) fs.writeFile(path, css, function(err){ if (err) throw err; console.log(' \033[90mcompiled\033[0m %s', path); // --watch support watch(file, file); }); } /** * Write the given sourcemap. */ function writeSourcemap(file, sourcemap) { var path = createPath(file, true); mkdirSync(dirname(path), { recursive: true }) fs.writeFile(path, JSON.stringify(sourcemap), function(err){ if (err) throw err; // don't output log message if --print is present if (!print) console.log(' \033[90mgenerated\033[0m %s', path); }); } /** * Watch the given `file` and recompiling `rootFile` when modified. */ function watch(file, rootFile) { // not watching if (!watchers) return; // already watched if (watchers[file]) { watchers[file][rootFile] = true; return; } // watch the file itself watchers[file] = {}; watchers[file][rootFile] = true; if (print) { console.error('Stylus CLI Error: Watch and print cannot be used together'); process.exit(1); } if(!quiet){ console.log(' \033[90mwatching\033[0m %s', file); } // if is windows use fs.watch api instead // TODO: remove watchFile when fs.watch() works on osx etc if (isWindows) { fs.watch(file, compile); } else { fs.watchFile(file, { interval: 300 }, function(curr, prev) { if (curr.mtime > prev.mtime) compile(); }); } function compile() { for (var rootFile in watchers[file]) { compileFile(rootFile); } } } /** * Watch `imports`, re-compiling `file` when they change. */ function watchImports(file, imports) { imports.forEach(function(imported){ if (!imported.path) return; watch(imported.path, file); }); } /** * Utilize plugins. */ function usePlugins(style) { plugins.forEach(function(plugin){ var path = plugin.path; var options = plugin.options; fn = require(/^\.+\//.test(path) ? resolve(path) : path); if ('function' != typeof fn) { throw new Error('plugin ' + path + ' does not export a function'); } style.use(fn(options)); }); if (urlFunction) { style.define('url', stylus.url(urlFunction)); } else if (resolveURL) { style.define('url', stylus.resolver(resolveURL)); } } /** * Imports the indicated files. */ function importFiles(style) { imports.forEach(function(file) { style.import(file); }); } stylus-0.54.7/bm.js000066400000000000000000000025341352722646500141260ustar00rootroot00000000000000 /** * Module dependencies. */ var stylus = require('./') , fs = require('fs'); var times = ~~process.env.TIMES || 1 , avgs = []; // test cases var cases = fs.readdirSync('test/cases').filter(function(file){ return ~file.indexOf('.styl'); }).map(function(file){ return file.replace('.styl', ''); }); console.log(); cases.forEach(function(test){ var name = test.replace(/[-.]/g, ' '); var path = 'test/cases/' + test + '.styl'; var styl = fs.readFileSync(path, 'utf8').replace(/\r/g, ''); var style = stylus(styl) .set('filename', path) .include(__dirname + '/test/images') .include(__dirname + '/test/cases/import.basic') .define('url', stylus.url()); if (~test.indexOf('compress')) style.set('compress', true); var runs = [] , n = times , start; while (n--) { start = new Date; style.render(function(err){ if (err) throw err; }); runs.push(new Date - start); } var avg = runs.reduce(function(sum, n){ return sum + n; }) / times; avgs.push(avg); // im cool like that var avgavg = avgs.reduce(function(sum, n){ return sum + n; }) / avgs.length; if (avg > avgavg) { console.log(' \033[31m%s \033[31m%dms \033[90m+%dms\033[0m', name, avg | 0, avg - avgavg | 0); } else { console.log(' \033[36m%s \033[90m%dms\033[0m', name, avg | 0); } }); console.log();stylus-0.54.7/docs/000077500000000000000000000000001352722646500141165ustar00rootroot00000000000000stylus-0.54.7/docs/atrules.md000066400000000000000000000017411352722646500161220ustar00rootroot00000000000000--- layout: default permalink: docs/atrules.html --- # Other @-rules Stylus have a basic support for braceless syntax for most of the CSS @-rules, like `@viewport`, `@page`, `@host`, `@supports` and others: @viewport color: #00f @supports (display: flex) div display: flex @page :blank @top-center content: none Would compile to @viewport { color: #00f; } @supports (display: flex) { div { display: flex; } } @page :blank { @top-center { content: none; } } ## Unknown at-rules Stylus supports any yet unknown @-rules, so it is future-friendly, as any new at-rules in CSS could be written in indentation-based syntax of Stylus and would be rendered perfectly: @foo @bar width: 10px .baz height: 10px Would be compiled to @foo { @bar { width: 10px; .baz { height: 10px; } } } stylus-0.54.7/docs/bifs.md000066400000000000000000000624051352722646500153720ustar00rootroot00000000000000--- layout: default permalink: docs/bifs.html --- # Built-in Functions ## Color Functions ### red(color[, value]) Return the red component of the given `color`, or set the red component to the optional second `value` argument. red(#c00) // => 204 red(#000, 255) // => #f00 ### green(color[, value]) Return the green component of the given `color`, or set the green component to the optional second `value` argument. green(#0c0) // => 204 green(#000, 255) // => #0f0 ### blue(color[, value]) Return the blue component of the given `color`, or set the blue component to the optional second `value` argument. blue(#00c) // => 204 blue(#000, 255) // => #00f ### alpha(color[, value]) Return the alpha component of the given `color`, or set the alpha component to the optional second `value` argument. alpha(#fff) // => 1 alpha(rgba(0,0,0,0.3)) // => 0.3 alpha(#fff, 0.5) // => rgba(255,255,255,0.5) ### dark(color) Check if `color` is dark: dark(black) // => true dark(#005716) // => true dark(white) // => false ### light(color) Check if `color` is light: light(black) // => false light(white) // => true light(#00FF40) // => true ### hue(color[, value]) Return the hue of the given `color`, or set the hue component to the optional second `value` argument. hue(hsl(50deg, 100%, 80%)) // => 50deg hue(#00c, 90deg) // => #6c0 ### saturation(color[, value]) Return the saturation of the given `color`, or set the saturation component to the optional second `value` argument. saturation(hsl(50deg, 100%, 80%)) // => 100% saturation(#00c, 50%) // => #339 ### lightness(color[, value]) Return the lightness of the given `color`, or set the lightness component to the optional second `value` argument. lightness(hsl(50deg, 100%, 80%)) // => 80% lightness(#00c, 80%) // => #99f ### hsla(color | h,s,l,a) Convert the given `color` to an `HSLA` node, or h,s,l,a component values. hsla(10deg, 50%, 30%, 0.5) // => HSLA hsla(#ffcc00) // => HSLA ### hsl(color | h,s,l) Convert the given `color` to an `HSLA` node, or h,s,l,a component values. hsl(10, 50, 30) // => HSLA hsl(#ffcc00) // => HSLA ### rgba(color | r,g,b,a) Return `RGBA` from the r,g,b,a channels, or provide a `color` to tweak the alpha. rgba(255,0,0,0.5) // => rgba(255,0,0,0.5) rgba(255,0,0,1) // => #ff0000 rgba(#ffcc00, 0.5) // rgba(255,204,0,0.5) Alternatively, Stylus supports the `#rgba` and `#rrggbbaa` notations as well: #fc08 // => rgba(255,204,0,0.5) #ffcc00ee // => rgba(255,204,0,0.9) ### rgb(color | r,g,b) Return a `RGBA` from the r,g,b channels or cast to an `RGBA` node. rgb(255,204,0) // => #ffcc00 rgb(#fff) // => #fff ### blend(top[, bottom]) Blends the given `top` color over the `bottom` one using the normal blending. The `bottom` argument is optional, and defaults to `#fff`. blend(rgba(#FFF, 0.5), #000) // => #808080 blend(rgba(#FFDE00,.42), #19C261) // => #7ace38 blend(rgba(lime, 0.5), rgba(red, 0.25)) // => rgba(128,128,0,0.625) ### lighten(color, amount) Lighten the given `color` by `amount`. This function is unit-sensitive; it supports percentages, for example, as shown here: lighten(#2c2c2c, 30) // => #787878 lighten(#2c2c2c, 30%) // => #393939 ### darken(color, amount) Darken the given `color` by `amount`. This function is unit-sensitive; it supports percentages, for example, as shown here: darken(#D62828, 30) // => #551010 darken(#D62828, 30%) // => #961c1c ### desaturate(color, amount) Desaturate the given `color` by `amount`. desaturate(#f00, 40%) // => #c33 ### saturate(color, amount) Saturate the given `color` by `amount`. saturate(#c33, 40%) // => #f00 ### complement(color) Gives the complementary color. Equivalent to spinning hue by `180deg`. complement(#fd0cc7) // => #0cfd42 ### invert(color) Inverts the color. The red, green, and blue values are inverted. Opacity is left alone. invert(#d62828) // => #29d7d7 ### spin(color, amount) Spins hue of the given `color` by `amount`. spin(#ff0000, 90deg) // => #80ff00 ### grayscale(color) Gives the grayscale equivalent of the given color. Equivalent to `desaturate(color, 100%)`. grayscale(#fd0cc7) // => #0cfd42 ### mix(color1, color2[, amount]) Mix two colors by a given amount. The `amount` is optional and is defaulted to `50%`. mix(#000, #fff, 30%) // => #b2b2b2 ### tint(color, amount) Mix the given color with white. tint(#fd0cc7,66%) // => #feaceb ### shade(color, amount) Mix the given color with black. shade(#fd0cc7,66%) // => #560443 ### luminosity(color) Returns the [relative luminance](http://www.w3.org/TR/WCAG20/#relativeluminancedef) of the given `color`. luminosity(white) // => 1 luminosity(#000) // => 0 luminosity(red) // => 0.2126 ### contrast(top[, bottom]) Returns the [contrast ratio](http://www.w3.org/TR/2008/REC-WCAG20-20081211/#contrast-ratiodef) object between `top` and `bottom` colors, based on [script](https://github.com/LeaVerou/contrast-ratio/blob/gh-pages/color.js#L108) underlying “[contrast ratio](http://leaverou.github.io/contrast-ratio/)” tool by Lea Verou. The second argument is optional and is defaulted to `#fff`. The main key in the returned object is `ratio`, it also have `min` and `max` values that are different from the `ratio` only when the `bottom` color is transparent. In that case the `error` also contains an error margin. contrast(#000, #fff).ratio => 21 contrast(#000, rgba(#FFF, 0.5)) => { "ratio": "13.15;", "error": "-7.85", "min": "5.3", "max": "21" } ### transparentify(top[, bottom, alpha]) Returns the transparent version of the given `top` color, as if it was blend over the given `bottom` color (or the closest to it, if it is possible). The second argument is optional and is defaulted to `#fff`. The third argument is optional and overrides the autodetected alpha. transparentify(#808080) => rgba(0,0,0,0.5) transparentify(#414141, #000) => rgba(255,255,255,0.25) transparentify(#91974C, #F34949, 0.5) => rgba(47,229,79,0.5) ## Path Functions ### basename(path[, ext]) Returns the basename of `path`, (optionally) with `ext` extension removed. basename('images/foo.png') // => "foo.png" basename('images/foo.png', '.png') // => "foo" ### dirname(path) Returns the dirname of `path`. dirname('images/foo.png') // => "images" ### extname(path) Returns the filename extension of `path` including the dot. extname('images/foo.png') // => ".png" ### pathjoin(...) Peform a path join. pathjoin('images', 'foo.png') // => "images/foo.png" path = 'images/foo.png' ext = extname(path) pathjoin(dirname(path), basename(path, ext) + _thumb + ext) // => 'images/foo_thumb.png' ## List / Hash Functions ### push(expr, args...) Push the given `args` to `expr`. nums = 1 2 push(nums, 3, 4, 5) nums // => 1 2 3 4 5 Aliased as `append()`. ### pop(expr) Pop a value from `expr`. nums = 4 5 3 2 1 num = pop(nums) nums // => 4 5 3 2 num // => 1 ### shift(expr) Shift an element from `expr`. nums = 4 5 3 2 1 num = shift(nums) nums // => 5 3 2 1 num // => 4 ### unshift(expr, args...) Unshift the given `args` to `expr`. nums = 4 5 unshift(nums, 3, 2, 1) nums // => 1 2 3 4 5 Aliased as `prepend()`. ### index(list, value) Returns the (zero-based) index of `value` within a `list`. list = 1 2 3 index(list, 2) // => 1 index(1px solid red, red) // => 2 ### keys(pairs) Return keys in the given `pairs`: pairs = (one 1) (two 2) (three 3) keys(pairs) // => one two three ### values(pairs) Return values in the given `pairs`: pairs = (one 1) (two 2) (three 3) values(pairs) // => 1 2 3 ### list-separator(list) Return the separator of the given `list`. list1 = a b c list-separator(list1) // => ' ' list2 = a, b, c list-separator(list2) // => ',' ### length([expr]) Parenthesized expressions may act as tuples, the `length()` function returns the length of such expressions. length((1 2 3 4)) // => 4 length((1 2)) // => 2 length((1)) // => 1 length(()) // => 0 length(1 2 3) // => 3 length(1) // => 1 length() // => 0 ### last(expr) Return the _last_ value in the given `expr`: nums = 1 2 3 last(nums) last(1 2 3) // => 3 list = (one 1) (two 2) (three 3) last(list) // => (three 3) ## Unit Functions ### typeof(node) Return type of `node` as a string. type(12) // => 'unit' typeof(12) // => 'unit' typeof(#fff) // => 'rgba' type-of(#fff) // => 'rgba' Aliased as `type-of` and `type`. ### unit(val[, type]) Return a string indicating the type of `val` or an empty string, or assign the given `type` without unit conversion. unit(10) // => '' unit(15in) // => 'in' unit(15%, 'px') // => 15px unit(15%, px) // => 15px ### percentage(num) Convert a `num` to a percentage. percentage(.5) // => 50% percentage(4 / 100) // => 4% ## Math Functions ### abs(unit) abs(-5px) // => 5px abs(5px) // => 5px ### ceil(unit) ceil(5.5in) // => 6in ### floor(unit) floor(5.6px) // => 5px ### round(unit) round(5.5px) // => 6px round(5.4px) // => 5px **Note:** All rounding functions can accept optional `precision` argument — you can pass the number of digits you want to save after the period: ceil(5.52px,1) // => 5.6px floor(5.57px,1) // => 5.5px round(5.52px,1) // => 5.5px ### sin(angle) Returns the value of sine for the given `angle`. If the angle is given as a degree unit, like `45deg`, it is treated as a degree, otherwise it is treated as radians. sin(30deg) // => 0.5 sin(3*PI/4) // => 0.707106781 ### cos(angle) Returns the value of cosine for the given `angle`. If the angle is given as a degree unit, like `45deg`, it is treated as a degree, otherwise it is treated as radians. cos(180deg) // => -1 ### tan(angle) Returns the value of tangent for the given `angle`. If the angle is given as a degree unit, like `45deg`, it is treated as a degree, otherwise it is treated as radians. tan(45deg) // => 1 tan(90deg) // => Infinity ### min(a, b) min(1, 5) // => 1 ### max(a, b) max(1, 5) // => 5 ### even(unit) even(6px) // => true ### odd(unit) odd(5mm) // => true ### sum(nums) sum(1 2 3) // => 6 ### avg(nums) avg(1 2 3) // => 2 ### range(start, stop[, step]) Returns a list of units from `start` to `stop` (included) by given `step`. The `step` argument defaults to `1` if omitted. It cannot be `0`. range(1, 6) // equals to `1..6` // 1 2 3 4 5 6 range(1, 6, 2) // 1 3 5 range(-6, -1, 2) // -6 -4 -2 range(1px, 3px, 0.5px) // 1px 1.5px 2px 2.5px 3px It is most often used in `for` loops: for i in range(10px, 50px, 10) .col-{i} width: i Yields: .col-10 { width: 10px; } .col-20 { width: 20px; } .col-30 { width: 30px; } .col-40 { width: 40px; } .col-50 { width: 50px; } ### base-convert(num, base, width) Returns a `Literal` `num` converted to the provided `base`, padded with `width` zeroes. Width defaults to `2`. base-convert(1, 10, 3) // => 001 base-convert(14, 16, 1) // => e base-convert(42, 2) // => 101010 ## String Functions ### match(pattern, string[, flags]) Returns any matches of `pattern` (regular expression) in `string`. match('^(height|width)?([<>=]{1,})(.*)', 'height>=1024px') // => 'height>=1024px' 'height' '>=' '1024px' match('^foo(?:bar)?', 'foo') // => 'foo' match('^foo(?:bar)?', 'foobar') // => 'foobar' match('^foo(?:bar)?', 'bar') // => null match('ain', 'The rain in SPAIN stays mainly in the plain') // => 'ain' match('ain', 'The rain in SPAIN stays mainly in the plain', g) // => 'ain' 'ain' 'ain' match('ain', 'The rain in SPAIN stays mainly in the plain', 'gi') // => 'ain' 'AIN' 'ain' 'ain' ### replace(pattern, replacement, val) Return the string `val`, after replacing with all `pattern` matches with `replacement`. replace(i, e, 'griin') // => 'green' replace(i, e, griin) // => #008000 ### join(delim, vals...) Join the given `vals` with `delim`. join(' ', 1 2 3) // => "1 2 3" join(',', 1 2 3) // => "1,2,3" join(', ', foo bar baz) // => "foo, bar, baz" join(', ', foo, bar, baz) // => "foo, bar, baz" join(', ', 1 2, 3 4, 5 6) // => "1 2, 3 4, 5 6" ### split(delim, val) The `split()` method splits a string or ident into a list of strings by separating the string into substrings. split(_, bar1_bar2_bar3) // => bar1 bar2 bar3 split(_, 'bar1_bar2_bar3') // => 'bar1' 'bar2' 'bar3' ### substr(val, start, length) The `substr()` method returns the characters in a string beginning at the specified location through the specified number of characters. substr(ident, 1, 2) // => de substr('string', 1, 2) // => 'tr' val = dredd substr(substr(val, 1), 0, 3) // => #f00 ### slice(val, start[, end]) The `slice()` method extracts a section of a string/list and returns a new string/list. slice('lorem' 'ipsum' 'dolor', 1, 2) slice('lorem' 'ipsum' 'dolor', 1, -1) // => 'ipsum' slice('lorem ipsum', 1, 5) // => 'orem' slice(rredd, 1, -1) // => #f00 slice(1px solid black, 1) // => solid #000 ### unquote(str | ident) Unquote the given `str`, and return it as a `Literal` node. unquote("sans-serif") // => sans-serif unquote(sans-serif) // => sans-serif unquote('1px / 2px') // => 1px / 2px ### convert(str) Like `unquote()` but tries to convert the given `str` to a Stylus node. unit = convert('40px') typeof(unit) // => 'unit' color = convert('#fff') typeof(color) // => 'rgba' foo = convert('foo') typeof(foo) // => 'ident' ### s(fmt, ...) The `s()` function is similar to `unquote()`, in that it returns a `Literal` node. However, it accepts a format string similar to C's `sprintf()`. Currently, the only specifier is `%s`. s('bar()'); // => bar() s('bar(%s)', 'baz'); // => bar("baz") s('bar(%s)', baz); // => bar(baz) s('bar(%s)', 15px); // => bar(15px) s('rgba(%s, %s, %s, 0.5)', 255, 100, 50); // => rgba(255, 100, 50, 0.5) s('bar(%Z)', 15px); // => bar(%Z) s('bar(%s, %s)', 15px); // => bar(15px, null) Check out the `%` string operator for equivalent behaviour. ## Utility Functions ### `called-from` property `called-from` property contains the list of the functions the current function was called from in reverse order (the first item is the deepest function). foo() bar() bar() baz() baz() return called-from foo() // => bar foo ### current-media() `current-media()` function returns the string of the current block's `@media` rule (or `''` if there is no `@media` above the block). @media only screen and (min-width: 1024px) current-media() // => '@media (only screen and (min-width: (1024px)))' ### +cache(keys...) `+cache` is a really powerful built-in function that allows you to create your own “cachable” mixins. A “cachable mixin” is one that would apply its contents to the given selector on the first call, but would `@extend` the first call's selector at the second call with the same params. size($width, $height = $width) +cache('w' + $width) width: $width +cache('h' + $height) height: $height .a size: 10px 20px .b size: 10px 2em .c size: 1px 2em Would yield to .a, .b { width: 10px; } .a { height: 20px; } .b, .c { height: 2em; } .c { width: 1px; } See how the selectors are grouped together by the used property. ### +prefix-classes(prefix) Stylus comes with a block mixin `prefix-classes` that can be used for prefixing the classes inside any given Stylus block. For example: +prefix-classes('foo-') .bar width: 10px Yields: .foo-bar { width: 10px; } ### lookup(name) Allows looking up the value of a variable called `name`, passed as a string. Returns `null` if the variable is undefined. Useful when you need to get a value of a variable with dynamically generated name: font-size-1 = 10px font-size-2 = 20px font-size-3 = 30px for i in 1..3 .text-{i} font-size: lookup('font-size-' + i) Yields: .text-1 { font-size: 10px; } .text-2 { font-size: 20px; } .text-3 { font-size: 30px; } ### define(name, expr[, global]) Allows to create or overwrite a variable with a given `name`, passed as a string, onto current scope (or global scope if `global` is true). This BIF can be useful in those cases where you need interpolation in variable names: prefix = 'border' border = { color: #000, length: 1px, style: solid } for prop, val in border define(prefix + '-' + prop, val) body border: border-length border-style border-color yields: body { border: 1px solid #000; } ### operate(op, left, right) Perform the given `op` on the `left` and `right` operands: op = '+' operate(op, 15, 5) // => 20 ### selector() Returns the compiled current selector or `&` if called at root level. .foo selector() // => '.foo' .foo &:hover selector() // '.foo:hover' ### selector-exists(selector) Returns true if `selector` exists.. .foo color red a font-size 12px selector-exists('.foo') // true selector-exists('.foo a') // true selector-exists('.foo li') // false selector-exists('.bar') // false This method does not take into account the current context meaning: .foo color red a font-size 12px selector-exists('a') // false selector-exists(selector() + ' a') // true ### opposite-position(positions) Return the opposite of the given `positions`. opposite-position(right) // => left opposite-position(top left) // => bottom right opposite-position('top' 'left') // => bottom right ### image-size(path) Returns the `width` and `height` of the image found at `path`. Lookups are performed in the same manner as `@import`, altered by the `paths` setting. width(img) return image-size(img)[0] height(img) return image-size(img)[1] image-size('tux.png') // => 405px 250px image-size('tux.png')[0] == width('tux.png') // => true ### embedurl(path[, encoding]) Returns an inline image as a `url()` literal, encoded with `encoding`. (Available encodings: `base64` (default), and `utf8`). background: embedurl('logo.png') // => background: url("data:image/png;base64,…") background: embedurl('logo.svg', 'utf8') // => background: url("data:image/svg+xml;charset=utf-8,…") ### add-property(name, expr) Adds property `name`, with the given `expr` to the closest block. For example: something() add-property('bar', 1 2 3) s('bar') body foo: something() yields: body { bar: 1 2 3; foo: bar; } Next, the "magic" `current-property` local variable comes into play. This variable is automatically available to function bodies, and contains an expression with the current property's name, and value. For example, if we were to inspect this local variable using `p()`, we get the following: p(current-property) // => "foo" (foo __CALL__ bar baz) p(current-property[0]) // => "foo" p(current-property[1]) // => foo __CALL__ bar baz Using `current-property` we can take our example a bit further, and duplicate the property with new values, and a conditional to ensure the function is only used within a property value. something(n) if current-property add-property(current-property[0], s('-webkit-something(%s)', n)) add-property(current-property[0], s('-moz-something(%s)', n)) s('something(%s)', n) else error('something() must be used within a property') body { foo: something(15px) bar; } yields: body { foo: -webkit-something(15px); foo: -moz-something(15px); foo: something(15px) bar; } If you noticed in the example above, `bar` is only present for the initial call, since we returned `something(15px)`, it remained in-place within the expression, however the others do not take the rest of the expression into account. Our more robust solution below defines a function named `replace()` which clones the expression to prevent mutation, replaces the string value of an expression with another, and returns the cloned expression. We then move on to replace `__CALL__` within the expressions, which represents the cyclic call to `something()`. replace(expr, str, val) expr = clone(expr) for e, i in expr if str == e expr[i] = val expr something(n) if current-property val = current-property[1] webkit = replace(val, '__CALL__', s('-webkit-something(%s)', n)) moz = replace(val, '__CALL__', s('-moz-something(%s)', n)) add-property(current-property[0], webkit) add-property(current-property[0], moz) s('something(%s)', n) else error('something() must be used within a property') body foo: something(5px) bar baz yields: body { foo: -webkit-something(5px) bar baz; foo: -moz-something(5px) bar baz; foo: something(5px) bar baz; } Our implementation is now fully transparent both in regards to the property it is called within, and the position of the call. This powerful concept aids in transparent vendor support for function calls, such as gradients. ## Console Functions ### warn(msg) Warn with the given error `msg`. Does not exit. warn("oh noes!") ### error(msg) Exit Stylus with the given error `msg`. add(a, b) unless a is a 'unit' and b is a 'unit' error('add() expects units') a + b ### p(expr) Inspect the given `expr`: fonts = Arial, sans-serif p('test') p(123) p((1 2 3)) p(fonts) p(#fff) p(rgba(0,0,0,0.2)) add(a, b) a + b p(add) stdout: inspect: "test" inspect: 123 inspect: 1 2 3 inspect: Arial, sans-serif inspect: #fff inspect: rgba(0,0,0,0.2) inspect: add(a, b) ## External File Functions ### json(path[, options]) Convert the JSON file at `path` into Stylus variables or an object. Nested variable object keys are joined with a dash (`-`). For example, the following sample `media-queries.json` file: { "small": "screen and (max-width:400px)", "tablet": { "landscape": "screen and (min-width:600px) and (orientation:landscape)", "portrait": "screen and (min-width:600px) and (orientation:portrait)" } } May be used in the following ways: json('media-queries.json') @media small // => @media screen and (max-width:400px) @media tablet-landscape // => @media screen and (min-width:600px) and (orientation:landscape) vars = json('vars.json', { hash: true }) body width: vars.width vars = json('vars.json', { hash: true, leave-strings: true }) typeof(vars.icon) // => 'string' // don't throw an error if the JSON file doesn't exist optional = json('optional.json', { hash: true, optional: true }) typeof(optional) // => 'null' ### use(path) You can use any JS-plugin at given `path` with `use()` function right inside your `.styl` files, like this: use("plugins/add.js") width add(10, 100) // => width: 110 And the `add.js` plugin in this case looks this way: var plugin = function(){ return function(style){ style.define('add', function(a, b) { return a.operate('+', b); }); }; }; module.exports = plugin; If you'd like to return any Stylus objects like `RGBA`, `Ident`, or `Unit`, you could use the provided Stylus nodes like this: var plugin = function(){ return function(style){ var nodes = this.nodes; style.define('something', function() { return new nodes.Ident('foobar'); }); }; }; module.exports = plugin; You can pass any options as an optional second argument, using a [hash object](hashes.html): use("plugins/add.js", { foo: bar }) ### Undefined Functions Undefined functions are output as literals. So, for example, we may call `rgba-stop(50%, #fff)` within our css, and it will output as you would expect. We can use this within helpers as well. In the example below we simply define the function `stop()` which returns the literal `rgba-stop()` call. stop(pos, rgba) rgba-stop(pos, rgba) stop(50%, orange) // => rgba-stop(50%, #ffa500) stylus-0.54.7/docs/block.md000066400000000000000000000016071352722646500155360ustar00rootroot00000000000000--- layout: default permalink: docs/block.html --- # @block You can assign any block of code in Stylus to a variable and then call it, pass as an argument or reuse in any other way. To define a block, either write it down with an increased indent after an assign sign: foo = width: 20px height: 20px or use a curly braces syntax with `@block` keyword: foo = @block { width: 20px height: 20px } if you would like to render this block anywhere, you could call this variable inside an interpolation, so .icon {foo} would render to .icon { width: 20px; height: 20px; } BTW, this is the same way you can use the blocks passed to the [block mixins](mixins.html#block-mixins). Right now you can only pass the variable as any other variable and render it inside an interpolation. In future we would provide more ways of handling it. stylus-0.54.7/docs/comments.md000066400000000000000000000015211352722646500162640ustar00rootroot00000000000000--- layout: default permalink: docs/comments.html --- # Comments Stylus supports three kinds of comments: single-line, and multi-line comments, and multi-line buffered comments. ## Single-line Single-line comments look like JavaScript comments, and do not output in the resulting CSS: // I'm a comment! body padding 5px // some awesome padding ## Multi-line Multi-line comments look identical to regular CSS comments. However, they only output when the `compress` option is not enabled. /* * Adds the given numbers together. */ add(a, b) a + b ## Multi-line buffered Multi-line comments which are not suppressed start with `/*!`. This tells Stylus to output the comment regardless of compression. /*! * Adds the given numbers together. */ add(a, b) a + b stylus-0.54.7/docs/compare.md000066400000000000000000000031721352722646500160710ustar00rootroot00000000000000--- layout: default permalink: docs/compare.html --- # Implementation Comparisons Below we go head to head with other implementations. ## Variables SCSS: ``` scss $main-color: #006; color: $main-color; ``` Less: ``` less @main-color: #006; color: @main-color; ``` Stylus: ``` stylus main-color = #006 color: main-color ``` ## Mixins SCSS: ``` scss @mixin pad($x, $y) { padding: $y $x; } .msg { @include pad(5px, 10px); } ``` Less: ``` less .pad(@x, @y) { padding: @y @x; } .msg { .pad(5px, 10px); } ``` Stylus: ``` stylus pad(x, y) padding: y x .msg pad(5px, 10px) ``` ## Complex Example SCSS: ``` scss @mixin box-shadow ($x: 0, $y: 0, $blur: 1px, $alpha: 1) { $val: $x $y $blur rgba(0, 0, 0, $alpha); -webkit-box-shadow: $val; -moz-box-shadow: $val; box-shadow: $val; } .box { $base: #f938ab; color: saturate($base, 5%); border-color: lighten($base, 30%); div { @include box-shadow(0, 0, 5px, 0.4); } } ``` Less: ``` less .box-shadow (@x: 0, @y: 0, @blur: 1px, @alpha: 1) { @val: @x @y @blur rgba(0, 0, 0, @alpha); -webkit-box-shadow: @val; -moz-box-shadow: @val; box-shadow: @val; } .box { @base: #f938ab; color: saturate(@base, 5%); border-color: lighten(@base, 30%); div { .box-shadow(0, 0, 5px, 0.4); } } ``` Stylus: ``` stylus box-shadow($x = 0, $y = 0, $blur = 1px, $alpha = 1) $val = $x $y $blur rgba(0, 0, 0, $alpha) -webkit-box-shadow: $val -moz-box-shadow: $val box-shadow: $val .box base = #f938ab color: saturate(base, 5%) border-color: lighten(base, 30%) div box-shadow: 0 0 5px 0.4 ``` stylus-0.54.7/docs/conditionals.md000066400000000000000000000056261352722646500171370ustar00rootroot00000000000000--- layout: default permalink: docs/conditionals.html --- # Conditionals Conditionals provide control flow to a language which is otherwise static, providing conditional imports, mixins, functions, and more. The examples below are simply examples, and not recommended :) ## if / else if / else The `if` conditional works as you would expect, simply accepting an expression, evaluating the following block when `true`. Along with `if` are the typical `else if` and `else` tokens, acting as fallbacks. The example below would conditionally overload the `padding` property, swapping it for `margin`. overload-padding = true if overload-padding padding(y, x) margin y x body padding 5px 10px Another example: box(x, y, margin = false) padding y x if margin margin y x body box(5px, 10px, true) Another `box()` helper: box(x, y, margin-only = false) if margin-only margin y x else padding y x ## unless For users familiar with the Ruby programming language, we have the `unless` conditional. It’s basically the opposite of `if`—essentially `if (!(expr))`. In the example below, if `disable-padding-override` is `undefined` or `false`, `padding` will be overridden, displaying `margin` instead. But if it’s `true`, `padding` will continue outputting `padding 5px 10px` as expected. disable-padding-override = true unless disable-padding-override is defined and disable-padding-override padding(x, y) margin y x body padding 5px 10px ## Postfix Conditionals Stylus supports postfix conditionals. This means that `if` and `unless` act as operators; they evaluate the left-hand operand when the right-hand expression is truthy. For example let's define `negative()` to perform some basic type checking. Below we use block-style conditionals: negative(n) unless n is a 'unit' error('invalid number') if n < 0 yes else no Next, we utilize postfix conditionals to keep our function terse. negative(n) error('invalid number') unless n is a 'unit' return yes if n < 0 no Of course, we could take this further. For example, we could write `n < 0 ? yes : no`, or simply stick with booleans: `n < 0`. Postfix conditionals may be applied to most single-line statements. For example, `@import`, `@charset`, mixins—and of course, properties as shown below: pad(types = margin padding, n = 5px) padding unit(n, px) if padding in types margin unit(n, px) if margin in types body pad() body pad(margin) body apply-mixins = true pad(padding, 10) if apply-mixins yielding: body { padding: 5px; margin: 5px; } body { margin: 5px; } body { padding: 10px; } stylus-0.54.7/docs/css-style.md000066400000000000000000000051771352722646500164000ustar00rootroot00000000000000--- layout: default permalink: docs/css-style.html --- # CSS Style Syntax Stylus transparently supports a regular CSS-style syntax. This means you don't need an alternative parser, or specify that a certain file uses a specific style. ## Example Below is a small style using the indented approach: 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 Since braces, colons, and semi-colons are optional, we could write this example just as we would with normal CSS: 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; } While Stylus don't support _every_ possible CSS-like syntax, it can understand even such code: 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; } Since we may mix and match the two variants, the following is valid as well: 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; Variables, functions, mixins, and all the other features provided by Stylus still work as expected: main-color = white main-hover-color = black body a { color: main-color; &:hover { color: main-hover-color; } } body a { color: main-color; &:hover { color: main-hover-color; }} There are a few caveats to this rule: since the two styles may be mixed and matched, some indentation rules still apply. So although not _every_ plain-CSS stylesheet will work with zero modification, this feature allows those who prefer CSS syntax to continue doing so while leveraging Stylus' other powerful features. stylus-0.54.7/docs/error-reporting.md000066400000000000000000000027251352722646500176060ustar00rootroot00000000000000--- layout: default permalink: docs/error-reporting.html --- # Error Reporting Stylus has fantastic error reporting built-in for syntax, parse, and evaluation errors—complete with stack traces, line numbers, and filenames. ## Parse Error Parse error example: body form input == padding 5px Yielding: ParseError: test.styl:3:16 1| body 2| form input 3| == padding 5px ---------------------^ 4| illegal unary "==", missing left-hand operand ## Evaluation Error This "runtime" or evaluation error is caused by passing a string to `border-radius()`, instead of the expected `Unit` (by using our helper `ensure(n, 'unit')`). ensure(val, type) unless val is a type error('expected a ' + type + ', but got ' + typeof(val)) border-radius(n) ensure(n, 'unit') -webkit-border-radius n -moz-border-radius n border-radius n body border-radius '5px' Yielding: Error: test.styl:3:62 1| ensure(val, type) 2| unless val is a type 3| error('expected a ' + type + ', but got ' + typeof(val)) -------------------------------------------------------------------^ 4| 5| border-radius(n) 6| ensure(n, 'unit') expected a unit, but got string at ensure() (test.styl:2:17) at border-radius() (test.styl:6:16) at "body" (test.styl:10:18) stylus-0.54.7/docs/escape.md000066400000000000000000000007631352722646500157060ustar00rootroot00000000000000--- layout: default permalink: docs/escape.html --- # Char Escaping Stylus lets you escape characters. This effectively turns them into identifiers, allowing them to be rendered as literals. For example: body padding 1 \+ 2 Compiles to: body { padding: 1 + 2; } Note that Stylus requires that `/` is parenthesized when used in a property: body font 14px/1.4 font (14px/1.4) yields: body { font: 14px/1.4; font: 10px; } stylus-0.54.7/docs/executable.md000066400000000000000000000204211352722646500165600ustar00rootroot00000000000000--- layout: default permalink: docs/executable.html --- # Executable Stylus ships with the `stylus` executable for converting Stylus to CSS. Usage: stylus [options] [command] [< in [> out]] [file|dir ...] Commands: help [:] Opens help info at MDC for in your default browser. Optionally searches other resources of : safari opera w3c ms caniuse quirksmode Options: -i, --interactive Start interactive REPL -u, --use Utilize the Stylus plugin at -U, --inline Utilize image inlining via data URI support -w, --watch Watch file(s) for changes and re-compile -o, --out Output to when passing files -C, --css [dest] Convert CSS input to Stylus -I, --include Add to lookup paths -c, --compress Compress CSS output -d, --compare Display input along with output -f, --firebug Emits debug infos in the generated CSS that can be used by the FireStylus Firebug plugin -l, --line-numbers Emits comments in the generated CSS indicating the corresponding Stylus line -m, --sourcemap Generates a sourcemap in sourcemaps v3 format --sourcemap-inline Inlines sourcemap with full source text in base64 format --sourcemap-root "sourceRoot" property of the generated sourcemap --sourcemap-base Base from which sourcemap and all sources are relative -P, --prefix [prefix] Prefix all css classes -p, --print Print out the compiled CSS --import Import stylus --include-css Include regular CSS on @import -D, --deps Display dependencies of the compiled file --disable-cache Disable caching --hoist-atrules Move @import and @charset to the top -r, --resolve-url Resolve relative urls inside imports --resolve-url-nocheck Like --resolve-url but without file existence check -V, --version Display the version of Stylus -h, --help Display help information ## STDIO Compilation Example `stylus` reads from _stdin_ and outputs to _stdout_, so for example: $ stylus --compress < some.styl > some.css Try Stylus some in the terminal! Type below and press `CTRL-D` for `__EOF__`: $ stylus body color red font 14px Arial, sans-serif ## Compiling Files Example `stylus` also accepts files and directories. For example, a directory named `css` will compile and output `.css` files in the same directory. $ stylus css The following will output to `./public/stylesheets`: $ stylus css --out public/stylesheets Or a few files: $ stylus one.styl two.styl For development purposes, you can use the `linenos` option to emit comments indicating the Stylus filename and line number in the generated CSS: $ stylus --line-numbers Or the `firebug` option if you want to use the [FireStylus extension for Firebug](//github.com/stylus/stylus/blob/master/docs/firebug.md): $ stylus --firebug ## Prefixing classes `stylus` executable provides you a way to prefix all the generated styles using `--prefix` option with given `[prefix]`, $ stylus --prefix foo- used with this code: .bar width: 10px would yield .foo-bar { width: 10px; } All the classes would be prefixed: interpolated, extended etc. ## Converting CSS If you wish to convert CSS to the terse Stylus syntax, use the `--css` flag. Via stdio: $ stylus --css < test.css > test.styl Output a `.styl` file of the same basename: $ stylus --css test.css Output to a specific destination: $ stylus --css test.css /tmp/out.styl ## CSS Property Help On OS X, `stylus help ` will open your default browser and display help documentation for the given ``. $ stylus help box-shadow ## Interactive Shell The Stylus REPL (Read-Eval-Print-Loop) or "interactive shell" allows you to play around with Stylus expressions directly from your terminal. **Note that this works only for expressions**—not selectors, etc. To use simple add the `-i`, or `--interactive` flag: $ stylus -i > color = white => #fff > color - rgb(200,50,0) => #37cdff > color => #fff > color -= rgb(200,50,0) => #37cdff > color => #37cdff > rgba(color, 0.5) => rgba(55,205,255,0.5) ## Resolving relative urls inside imports By default Stylus don't resolve the urls in imported `.styl` files, so if you'd happen to have a `foo.styl` with `@import "bar/bar.styl"` which would have `url("baz.png")`, it would be `url("baz.png")` too in a resulting CSS. But you can alter this behavior by using `--resolve-url` (or just `-r`) option to get `url("bar/baz.png")` in your resulting CSS. ## List dependencies You can use `--deps` (or just `-D`) flag to get a list of dependencies of the compiled file. For example, suppose we have `test.styl`: @import 'foo' @import 'bar' And inside `foo.styl`: @import 'baz' Running: $ stylus --deps test.styl Will give us list of the imports paths: foo.styl baz.styl bar.styl **Note that currently this does not works for dynamically generated paths**. ## Utilizing Plugins For this example we'll use the [nib](https://github.com/visionmedia/nib) Stylus plugin to illustrate its CLI usage. Suppose we have the following Stylus, which imports nib to use its `linear-gradient()` function. @import 'nib' body background: linear-gradient(20px top, white, black) Our first attempt to render using `stylus(1)` via stdio might look like this: $ stylus < test.styl Which would yield the following error (because Stylus doesn't know where to find nib). Error: stdin:3 1| 2| > 3| @import 'nib' 4| 5| body 6| background: linear-gradient(20px top, white, black) For plugins that simply supply Stylus APIs, we could add the path to the Stylus lookup paths. We do so by using the `--include` or `-I` flag: $ stylus < test.styl --include ../nib/lib Now yielding the output below. (As you might notice, calls to `gradient-data-uri()` and `create-gradient-image()` output as literals. This is because exposing the library path isn't enough when a plugin provides a JavaScript API. However, if we only wanted to use pure-Stylus nib functions, we'd be fine.) body { background: url(gradient-data-uri(create-gradient-image(20px, top))); background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #fff), color-stop(1, #000)); background: -webkit-linear-gradient(top, #fff 0%, #000 100%); background: -moz-linear-gradient(top, #fff 0%, #000 100%); background: linear-gradient(top, #fff 0%, #000 100%); } So, what we need to do is use the `--use`, or `-u` flag. It expects a path to a node module (with or without the `.js` extension). This `require()`s the module, expecting a function to be exported as `module.exports`, which then calls `style.use(fn())` to expose the plugin (defining its js functions, etc.). $ stylus < test.styl --use ../nib/lib/nib Yielding the expected result: body { background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAUCAYAAABMDlehAAAABmJLR0QA/wD/AP+gvaeTAAAAI0lEQVQImWP4+fPnf6bPnz8zMH358oUBwkIjKJBgYGNj+w8Aphk4blt0EcMAAAAASUVORK5CYII="); background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #fff), color-stop(1, #000)); background: -webkit-linear-gradient(top, #fff 0%, #000 100%); background: -moz-linear-gradient(top, #fff 0%, #000 100%); background: linear-gradient(top, #fff 0%, #000 100%); } If you need to pass arguments to the plugin, use the `--with` option. `--with` evaluates any valid javascript expression and passes its value to the plugin. For example: $ stylus < test.styl --use ../node_modules/autoprefixer-stylus --with "{ browsers: ['ie 7', 'ie 8'] }" stylus-0.54.7/docs/extend.md000066400000000000000000000111051352722646500157250ustar00rootroot00000000000000--- layout: default permalink: docs/extend.html --- # @extend The Stylus __@extend__ directive is inspired by (and essentially the same as) the [SASS Implementation](http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html#extend), with few subtle differences. This feature significantly simplifies maintenance of semantic rulesets that inherit from other semantic rulesets. ## “Extending” with mixins Although you can use mixins to achieve a similar effect, this can lead to duplicate CSS. A typical pattern is to define several classes as shown below, then combine them on the element such as "warning message". While this technique works just fine, it's difficult to maintain. .message, .warning { padding: 10px; border: 1px solid #eee; } .warning { color: #E2E21E; } ## Using __`@extend`__ To produce this same output with __`@extend`__, simply pass it the desired selector (note that `@extend` and `@extends` are equal, one is just an alias of another). Stylus will then append the `.warning` selector to the existing `.message` ruleset. The `.warning` class then inherits properties from `.message`. .message { padding: 10px; border: 1px solid #eee; } .warning { @extend .message; color: #E2E21E; } Here's a more complex example, demonstrating how __`@extend`__ cascades: red = #E33E1E yellow = #E2E21E .message padding: 10px font: 14px Helvetica border: 1px solid #eee .warning @extends .message border-color: yellow background: yellow + 70% .error @extends .message border-color: red background: red + 70% .fatal @extends .error font-weight: bold color: red Yielding the following CSS: .message, .warning, .error, .fatal { padding: 10px; font: 14px Helvetica; border: 1px solid #eee; } .warning { border-color: #e2e21e; background: #f6f6bc; } .error, .fatal { border-color: #e33e1e; background: #f7c5bc; } .fatal { font-weight: bold; color: #e33e1e; } Where Stylus currently differs from SASS is, SASS won't allow __`@extend`__ nested selectors: form button padding: 10px a.button @extend form button Syntax error: Can't extend form button: can't extend nested selectors on line 6 of standard input Use --trace for backtrace. With Stylus, as long as the selectors match, it works! form input[type=text] padding: 5px border: 1px solid #eee color: #ddd textarea @extends form input[type=text] padding: 10px Yielding: form input[type=text], textarea { padding: 5px; border: 1px solid #eee; color: #ddd; } textarea { padding: 10px; } ## Extending multiple selectors Stylus allows you to extend multiple selectors at once, just write them with the comma: .a color: red .b width: 100px .c @extend .a, .b height: 200px Yielding: .a, .c { color: #f00; } .b, .c { width: 100px; } .c { height: 200px; } ## Extending placeholder selectors Stylus has a feature similar to the one in [Sass](http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html#placeholders) — placeholder selectors. Those selectors should start with a `$` symbol (for example, `$foo`), and are not yielded in the resulting CSS. But you can still extend them: $foo color: #FFF $foo2 color: red .bar background: #000 @extends $foo .baz @extends $foo Yielding: .bar, .baz { color: #fff; } .bar { background: #000; } Note that if the selector is not extended, it won't be in the resulting CSS, so it's a powerful way to create a library of extendable code. While you can insert code through mixins, they would insert the same code every time you use them, while extending placeholders would give you compact output. ## Optional extending Sometimes it might be usefull to be able to extend something that might or might not exist depending on the context. You can suffix any selector with `!optional` to achieve this: $specialDesign color: #FFF .btn @extend .design !optional, $specialDesign !optional Yielding: .btn { color: #fff; } stylus-0.54.7/docs/firebug.md000066400000000000000000000030531352722646500160640ustar00rootroot00000000000000--- layout: default permalink: docs/firebug.html --- # FireStylus extension for Firebug [FireStylus](//github.com/parallel/firestylus) is a Firebug extension that makes Firebug display the Stylus filename and line numbers of the Stylus-generated CSS styles rather than those of the generated CSS. ![Screenshot](//raw.github.com/parallel/firestylus/master/src/chrome/skin/screenshot.png) ## Usage First, you need to install [Firebug](https://addons.mozilla.org/firefox/downloads/latest/1843/addon-1843-latest.xpi?src=addondetail) and the [FireStylus extension](//github.com/parallel/firestylus) Then simply enable the Stylus's `firebug` option when generating CSS. Command line usage: $ stylus -f $ stylus --firebug Javascript usage: var stylus = require('stylus'); stylus(str) .set('firebug', true) .render(function(err, css){ // logic }); Connect / Express: var stylus = require('stylus'); var server = connect.createServer( stylus.middleware({ src: __dirname , dest: __dirname + '/public' , firebug: true }) , connect.static(__dirname + '/public') ); ## Compatibility FireStylus should work with Firefox versions 3.0 and up, and with Firebug versions 1.4 and up. - Firefox 3+ (also works with version 5) - Firebug 1.4+ ## Limitations FireStylus and FireSass are incompatible. You cannot enable them simultaneously. FireStylus (like FireSass) only works in the HTML pane of Firebug. The others (such as the CSS pane) won't work due to Firebug limitations. stylus-0.54.7/docs/font-face.md000066400000000000000000000010321352722646500162760ustar00rootroot00000000000000--- layout: default permalink: docs/font-face.html --- # @font-face The `@font-face` at-rule expects as you would expect. Simply add a block of properties after it, like so: @font-face font-family Geo font-style normal src url(fonts/geo_sans_light/GensansLight.ttf) .ingeo font-family Geo Yielding: @font-face { font-family: Geo; font-style: normal; src: url("fonts/geo_sans_light/GensansLight.ttf"); } .ingeo { font-family: Geo; } stylus-0.54.7/docs/functions.md000066400000000000000000000123431352722646500164530ustar00rootroot00000000000000--- layout: default permalink: docs/functions.html --- # Functions Stylus features powerful in-language function definitions. Function definitions appear identical to mixins; however, functions may return a value. ## Return Values Let's try a trivial example: creating a function that adds two numbers. add(a, b) a + b We can then use this function in conditions, in property values, etc. body padding add(10px, 5) Rendering: body { padding: 15px; } ## Argument Defaults Optional arguments may default to a given expression. With Stylus we may even default arguments to earlier arguments! For example: add(a, b = a) a + b add(10, 5) // => 15 add(10) // => 20 **Note:** Since argument defaults are assignments, we can also use function calls for defaults: add(a, b = unit(a, px)) a + b ## Named Parameters Functions accept named parameters. This frees you from remembering the order of parameters, or simply improves the readability of your code. For example: subtract(a, b) a - b subtract(b: 10, a: 25) ## Function Bodies We can take our simple `add()` function further. Let's casting all units passed as `px` via the `unit()` built-in. It reassigns each argument, and provides a unit-type string (or identifier), which ignores unit conversion. add(a, b = a) a = unit(a, px) b = unit(b, px) a + b add(15%, 10deg) // => 25 ## Multiple Return Values Stylus functions can return several values—just as you can assign several values to a variable. For example, the following is a valid assignment: sizes = 15px 10px sizes[0] // => 15px Similarly, we may return several values: sizes() 15px 10px sizes()[0] // => 15px One slight exception is when return values are identifiers. For example, the following looks like a property assignment to Stylus (since no operators are present): swap(a, b) b a To disambiguate, we can either wrap with parentheses, or use the `return` keyword: swap(a, b) (b a) swap(a, b) return b a ## Conditionals Let's say we want to create a function named `stringish()` to determine whether the argument can be transformed to a string. We check if `val` is a string, or an ident (which is string-like). Because undefined identifiers yield themselves as the value, we may compare them to themselves as shown below (where `yes` and `no` are used in place of `true` and `false`): stringish(val) if val is a 'string' or val is a 'ident' yes else no Usage: stringish('yay') == yes // => true stringish(yay) == yes // => true stringish(0) == no // => true __note__: `yes` and `no` are not boolean literals. They are simply undefined identifiers in this case. Another example: compare(a, b) if a > b higher else if a < b lower else equal Usage: compare(5, 2) // => higher compare(1, 5) // => lower compare(10, 10) // => equal ## Aliasing To alias a function, simply assign a function's name to a new identifier. For example, our `add()` function could be aliased as `plus()`, like so: plus = add plus(1, 2) // => 3 ## Variable Functions In the same way that we can "alias" a function, we can pass a function as well. Here, our `invoke()` function accepts a function, so we can pass it `add()` or `sub()`. add(a, b) a + b sub(a, b) a - b invoke(a, b, fn) fn(a, b) body padding invoke(5, 10, add) padding invoke(5, 10, sub) Yielding: body { padding: 15; padding: -5; } ## Anonymous functions You can use anonymous functions where needed using `@(){}` syntax. Here is how you could use it to create a custom `sort()` function: sort(list, fn = null) // default sort function if fn == null fn = @(a, b) { a > b } // bubble sort for $i in 1..length(list) - 1 for $j in 0..$i - 1 if fn(list[$j], list[$i]) $temp = list[$i] list[$i] = list[$j] list[$j] = $temp return list sort('e' 'c' 'f' 'a' 'b' 'd') // => 'a' 'b' 'c' 'd' 'e' 'f' sort(5 3 6 1 2 4, @(a, b){ a < b }) // => 6 5 4 3 2 1 ## arguments The `arguments` local is available to all function bodies, and contains all the arguments passed. For example: sum() n = 0 for num in arguments n = n + num sum(1,2,3,4,5) // => 15 ## Hash Example Below we define the `get(hash, key)` function, which returns the value of `key` (or `null`). We iterate each `pair` in `hash`, returning the pair's second node when the first (the `key`) matches. get(hash, key) return pair[1] if pair[0] == key for pair in hash As demonstrated below, in-language functions—paired with robust Stylus expressions—can provide great flexibility: hash = (one 1) (two 2) (three 3) get(hash, two) // => 2 get(hash, three) // => 3 get(hash, something) // => null stylus-0.54.7/docs/functions.url.md000077500000000000000000000053051352722646500172570ustar00rootroot00000000000000--- layout: default permalink: docs/functions.url.html --- # url() ## Data URI Image Inlining Stylus is bundled with an optional function named `url()`, which replaces the literal `url()` calls (and conditionally inlines them using base64 [Data URIs](http://en.wikipedia.org/wiki/Data_URI_scheme)). ## Example The function itself is available via `require('stylus').url`. It accepts an `options` object, returning a function that Stylus calls internally when it sees `url()`. The `.define(name, callback)` method assigned a JavaScript function that can be called from Stylus source. In this case, since our images are in `./css/images`, we can ignore the `paths` option (by default image lookups are performed relative to the file being rendered). But if desired, this behavior can be altered: stylus(str) .set('filename', __dirname + '/css/test.styl') .define('url', stylus.url()) .render(function(err, css){ // render it }); For example, imagine our images live in `./public/images`. We want to use `url(images/tobi.png)`. We could pass `paths` our public directory, so that it becomes part of the lookup process. Likewise, if instead we wanted `url(tobi.png)`, we could pass `paths: [__dirname + '/public/images']`. stylus(str) .set('filename', __dirname + '/css/test.styl') .define('url', stylus.url({ paths: [__dirname + '/public'] })) .render(function(err, css){ // render it }); ### `utf8` encoding for SVGs Since base64 encoding an image actually increases the original size, you have the option to use `utf8` encoding when inlining SVGs. There is a bif for this: `embedurl`: .embed-with-utf8 { background-image: embedurl("circle.svg", "utf8"); } Would result in utf-encoded inline SVG instead of base64 one. If you'd like to use the JS define so you could use the `paths` alongside the utf encoding, you'll need to define it using another name, not `url()`. This is Due to how `url()` function is parsed in Stylus: it is impossible now to pass the extra param to it, so you couldn't just call `url` with the second param to set the encoding. But if you'd define the `url` with another name: stylus(str) .set('filename', __dirname + '/css/test.styl') .define('inline-url', stylus.url({ paths: [__dirname + '/public'] })) .render(function(err, css){ // render it }); You could then use `inline-url` bif just like you can use `embedurl`, but with an added `paths` functionality: .embed-with-utf8-at-path { background-image: inline-url("tobi.svg", "utf8"); } ## Options - `limit` bytesize limit defaulting to 30Kb (30000), use `false` to disable the limit - `paths` image resolution path(s) stylus-0.54.7/docs/gedit.md000066400000000000000000000027241352722646500155410ustar00rootroot00000000000000--- layout: default permalink: docs/gedit.html --- # gedit language-spec Stylus ships with a temporary version of `styl.lang` for [GtkSourceView](http://live.gnome.org/GtkSourceView), based off [Yanekk](https://github.com/yanekk)'s [work](https://github.com/gmate/gmate/blob/master/lang-specs/scss.lang) on `scss.lang`. ![Stylus Language Specification for GtkSourceView](http://i.imgur.com/uBppL.png)) This is a start and provides a basic [language spec](http://live.gnome.org/Gedit/NewLanguage) for GtkSourceView editors such as [gedit](http://projects.gnome.org/gedit/). **Installation Steps** Download `styl.lang` to your local `language-specs` folder: mkdir -p ~/.local/share/gtksourceview-2.0/language-specs/ && wget https://raw.github.com/stylus/stylus/master/editors/gedit/styl.lang -O ~/.local/share/gtksourceview-2.0/language-specs/styl.lang For gtksourceview 3.0 (gedit 3.0), user: mkdir -p ~/.local/share/gtksourceview-3.0/language-specs/ && wget https://raw.github.com/stylus/stylus/master/editors/gedit/styl.lang -O ~/.local/share/gtksourceview-3.0/language-specs/styl.lang Update the MIME database and enjoy Stylus syntax in gedit! cd ~/.local/share update-mime-database mime This is much more enjoyable than having gedit recognize your `.styl` files as Apache Confs! --- **Have a sweet tooth?** Add more icing to gedit with gedit-icing: [https://github.com/niftylettuce/gedit-icing](https://github.com/niftylettuce/gedit-icing) stylus-0.54.7/docs/hashes.md000066400000000000000000000050241352722646500157140ustar00rootroot00000000000000--- layout: default permalink: docs/hashes.html --- # Hashes In `0.39.0` version Stylus got hash objects. ## Define You can define a hash using the curly braces and colons to divide the keys and values: foo = { bar: baz, baz: raz } the keys should be either proper idents or strings: foo = { bar: baz, 'baz': raz, '0': raz } When you already have a hash, you can set its values using brackets and strings inside: foo = {} foo['bar'] = baz foo['baz'] = raz Note that while you can't use variables or interpolations in curly braces defines, you can use variables inside brackets: foo = {} bar = 'baz' foo[bar] = raz foo.baz // => raz ## Getters For retrieving values from hashes you can use the dot for idents: foo = { bar: "baz" } foo.bar // => "baz" Or brackets with strings for anything: foo = { "%": 10 } baz = "%" foo[baz] // => 10 You can use any combinations you want: foo = { bar: { baz: { raz: 10px } } } qux = "raz" foo["bar"].baz[qux] // => 10px ## Interpolation Hashes used inside an interpolation would output the content of the hashes as CSS (without almost any Stylus features though): foo = { width: 10px, height: 20px, '&:hover': { padding: 0 } } .bar {foo} // => .bar { // width: 10px; // height: 20px; // } // .bar:hover { // padding: 0; // } ## Other stuff You can use other normal Stylus stuff with hashes, like `length()`: foo = { bar: 'a', baz: 'b' } length(foo) // => 2 You can iterate through hashes with optional key param: foo = { width: 10px, height: 20px } for key, value in foo {key}: value // => width: 10px; // height: 20px; You can check existence of a key in hash using `in`: foo = { bar: 10px} bar in foo // => true baz in foo // => false You can get keys or values of the hash using corresponding bifs: foo = { bar: 'a', baz: 'b' } keys(foo) // => 'bar' 'baz' values(foo) // => 'a' 'b' You can remove a key from the hash using `remove` bif: obj = { foo: 1, bar: 2 } remove(obj, 'foo') // => {"bar":"(2)"} And you can use `merge` (aliased as `extend`) to merge hashes: obj = { foo: 'foo' bar: 'bar' } obj2 = { baz: 'baz' } merge(obj, obj2) // => {"foo":"('foo')","bar":"('bar')","baz":"('baz')"} stylus-0.54.7/docs/import.md000066400000000000000000000104351352722646500157550ustar00rootroot00000000000000--- layout: default permalink: docs/import.html --- # @import and @require Stylus supports both literal __@import__ for CSS, as well as dynamic importing or requiring of other Stylus sheets. ## Literal CSS Any filename with the extension `.css` will become a literal. For example: @import "reset.css" Render the literal CSS __@import__ shown below: @import "reset.css" ## Stylus Import *Disclaimer: In all places the __@import__ is used with Stylus sheets, the __@require__ could be used* When using __@import__ without the `.css` extension, it's assumed to be a Stylus sheet (e.g., `@import "mixins/border-radius"`). __@import__ works by iterating an array of directories, and checking if this file lives in any of them (similar to node's `require.paths`). This array defaults to a single path, which is derived from the `filename` option's `dirname`. So, if your filename is `/tmp/testing/stylus/main.styl`, then import will look in `/tmp/testing/stylus/`. __@import__ also supports index styles. This means when you `@import blueprint`, it will resolve **either** `blueprint.styl` **or** `blueprint/index.styl`. This is really useful for libraries that want to expose all their features, while still allowing feature subsets to be imported. For example, a common lib structure might be: ./tablet |-- index.styl |-- vendor.styl |-- buttons.styl |-- images.styl In the example below, we set the `paths` options to provide additional paths to Stylus. Within `./test.styl`, we could then `@import "mixins/border-radius"`, or `@import "border-radius"` (since `./mixins` is exposed to Stylus). /** * Module dependencies. */ var stylus = require('../') , str = require('fs').readFileSync(__dirname + '/test.styl', 'utf8'); var paths = [ __dirname , __dirname + '/mixins' ]; stylus(str) .set('filename', __dirname + '/test.styl') .set('paths', paths) .render(function(err, css){ if (err) throw err; console.log(css); }); ## Require Along with `@import`, Stylus also has `@require`. It works almost in the same way, with the exception of importing any given file only once. ## Block-level import Stylus supports block-level import. It means that you can use `@import` not only at root level, but also nested inside other selectors or at-rules. If you have a `bar.styl` with this code: .bar width: 10px; Then you can import it inside a `foo.styl` like this: .foo @import 'bar.styl' @media screen and (min-width: 640px) @import 'bar.styl' And you'll get this compiled CSS as a result: .foo .bar { width: 10px; } @media screen and (min-width: 640px) { .bar { width: 10px; } } ## File globbing Stylus supports [globbing](https://github.com/isaacs/node-glob#readme). With it you could import many files using a file mask: @import 'product/*' This would import all the stylus sheets from the `product` directory in such structure: ./product |-- body.styl |-- foot.styl |-- head.styl Note that this works with `@require` too, so if you would have also a `./product/index.styl` with this content: @require 'head' @require 'body' @require 'foot' then `@require 'product/*'` would include each individual sheet only once. ## Resolving relative urls inside imports By default Stylus doesn't resolve the urls in imported `.styl` files, so if you'd happen to have a `foo.styl` with `@import "bar/bar.styl"` which would have `url("baz.png")`, it would be `url("baz.png")` too in a resulting CSS. But you can alter this behavior by using `--resolve-url` (or just `-r`) CLI option to get `url("bar/baz.png")` in your resulting CSS. ## JavaScript Import API When using the `.import(path)` method, these imports are deferred until evaluation: var stylus = require('../') , str = require('fs').readFileSync(__dirname + '/test.styl', 'utf8'); stylus(str) .set('filename', __dirname + '/test.styl') .import('mixins/vendor') .render(function(err, css){ if (err) throw err; console.log(css); }); The following statement... @import 'mixins/vendor' ...is equivalent to... .import('mixins/vendor') stylus-0.54.7/docs/interpolation.md000066400000000000000000000031711352722646500173310ustar00rootroot00000000000000--- layout: default permalink: docs/interpolation.html --- # Interpolation Stylus supports interpolation by using the `{}` characters to surround an expression, which then becomes part of the identifier. For example, `-webkit-{'border' + '-radius'}` evaluates to `-webkit-border-radius`. A great example use-case for this is expanding properties with vendor prefixes. vendor(prop, args) -webkit-{prop} args -moz-{prop} args {prop} args border-radius() vendor('border-radius', arguments) box-shadow() vendor('box-shadow', arguments) button border-radius 1px 2px / 3px 4px Yields: button { -webkit-border-radius: 1px 2px / 3px 4px; -moz-border-radius: 1px 2px / 3px 4px; border-radius: 1px 2px / 3px 4px; } ## Selector Interpolation Interpolation works with selectors as well. For example, we may iterate to assign the `height` property for the first 5 rows in a table, as shown below: table for row in 1 2 3 4 5 tr:nth-child({row}) height: 10px * row Yields: table tr:nth-child(1) { height: 10px; } table tr:nth-child(2) { height: 20px; } table tr:nth-child(3) { height: 30px; } table tr:nth-child(4) { height: 40px; } table tr:nth-child(5) { height: 50px; } You may also put together multiple selectors into one variable by building a string and interpolate them in place: mySelectors = '#foo,#bar,.baz' {mySelectors} background: #000 Yields: #foo, #bar, .baz { background: #000; } stylus-0.54.7/docs/introspection.md000066400000000000000000000020031352722646500173330ustar00rootroot00000000000000--- layout: default permalink: docs/introspection.html --- # Introspection API Stylus supports an introspection API. This allows mixins and functions to reflect relative to the caller, etc. ## mixin The `mixin` local variable is automatically assigned within function bodies. It contains the string `root` if the function was called at the root level, or `block` indicating otherwise, and finally `false` if the invoked function expects a return value. In the following example, we define `reset()` to alter its behaviour depending on whether it's mixed into root, into another block, or into a return value, as used in the `foo` property below: reset() if mixin == 'root' got root true else if mixin got 'a mixin' else 'not a mixin' reset() body reset() foo reset() Compiles to: got { root: true; } body { foo: "not a mixin"; got: "a mixin"; } stylus-0.54.7/docs/iteration.md000066400000000000000000000050461352722646500164430ustar00rootroot00000000000000--- layout: default permalink: docs/iteration.html --- # Iteration Stylus allows you to iterate expressions via the `for/in` construct, taking the form of: for [, ] in For example: body for num in 1 2 3 foo num Yields: body { foo: 1; foo: 2; foo: 3; } The example below shows how to use the ``: body fonts = Impact Arial sans-serif for font, i in fonts foo i font Yielding: body { foo: 0 Impact; foo: 1 Arial; foo: 2 sans-serif; } And here's how you do a regular for loop body for num in (1..5) foo num Yields: body { foo: 1; foo: 2; foo: 3; foo: 4; foo: 5; } Usage with strings: for num in (1..10) .box{num} animation: box + num 5s infinite @keframes box{num} 0% { left: 0px } 100% { left: (num * 30px) } ## Mixins We can use iteration within mixins to produce powerful functionality. For example, we can apply expression pairs as properties using interpolation and iteration. Below we define `apply()`, conditionally utilizing all the `arguments` so that comma-delimited _and_ expression lists are supported: apply(props) props = arguments if length(arguments) > 1 for prop in props {prop[0]} prop[1] body apply(one 1, two 2, three 3) body list = (one 1) (two 2) (three 3) apply(list) ## Functions Stylus functions may also contain for-loops. Below are some example use-cases: Sum: sum(nums) sum = 0 for n in nums sum += n sum(1 2 3) // => 6 join: join(delim, args) buf = '' for arg, index in args if index buf += delim + arg else buf += arg join(', ', foo bar baz) // => "foo, bar, baz" ## Postfix Much like `if` / `unless` may be utilized post-statement, the same can be done with `for`. Below are the same examples as above utilizing the postfix syntax: sum(nums) sum = 0 sum += n for n in nums join(delim, args) buf = '' buf += i ? delim + arg : arg for arg, i in args We can also __return__ from within a loop, below is an example returning the number when `n % 2 == 0` evaluates to __true__. first-even(nums) return n if n % 2 == 0 for n in nums first-even(1 3 5 5 6 3 2) // => 6 stylus-0.54.7/docs/js.md000066400000000000000000000137301352722646500150600ustar00rootroot00000000000000--- layout: default permalink: docs/js.html --- # JavaScript API Simply `require` the module, and call `render()` with the given string of Stylus code, and (optional) `options` object. Frameworks utilizing Stylus should pass the `filename` option to provide better error reporting. var stylus = require('stylus'); stylus.render(str, { filename: 'nesting.css' }, function(err, css){ if (err) throw err; console.log(css); }); We can also do the same thing in a more progressive manner: var stylus = require('stylus'); stylus(str) .set('filename', 'nesting.css') .render(function(err, css){ // logic }); ## .set(setting, value) Apply a setting such as a `filename`, or import `paths`: .set('filename', __dirname + '/test.styl') .set('paths', [__dirname, __dirname + '/mixins']) ## .include(path) A progressive alternative to `.set('paths',...)` is `.include()`. This is ideal when exposing external Stylus libraries which expose a path. stylus(str) .include(require('nib').path) .include(process.env.HOME + '/mixins') .render(...) ## .import(path) Defer importing of the given `path` until evaluation is performed. The example below is essentially the same as doing `@import 'mixins/vendor'` within your Stylus sheet. var stylus = require('../') , str = require('fs').readFileSync(__dirname + '/test.styl', 'utf8'); stylus(str) .set('filename', __dirname + '/test.styl') .import('mixins/vendor') .render(function(err, css){ if (err) throw err; console.log(css); }); ## .define(name, node) By passing a `Node`, we may define a global variable. This is useful when exposing conditional features within your library depending on the availability of another. For example the **Nib** extension library conditionally supports node-canvas, providing image generation. However, this is not always available, so Nib may define: .define('has-canvas', stylus.nodes.false); .define('some-setting', new stylus.nodes.String('some value')); Stylus also casts JavaScript values to their Stylus equivalents when possible. Here are a few examples: .define('string', 'some string') .define('number', 15.5) .define('some-bool', true) .define('list', [1,2,3]) .define('list', [1,2,[3,4,[5,6]]]) .define('list', { foo: 'bar', bar: 'baz' }) .define('families', ['Helvetica Neue', 'Helvetica', 'sans-serif']) These same rules apply to return values in js functions as well: .define('get-list', function(){ return ['foo', 'bar', 'baz']; }) ## .define(name, fn) This method allows you to provide a JavaScript-defined function to Stylus. Think of these as you would JavaScript-to-C++ bindings. When there's something you cannot do in Stylus, define it in JavaScript! In this example, we define four functions: `add()`, `sub()`, `image-width()`, and `image-height()`. These functions must return a `Node`, this constructor and the other nodes are available via `stylus.nodes`. var stylus = require('../') , nodes = stylus.nodes , utils = stylus.utils , fs = require('fs'); function add(a, b) { return a.operate('+', b); } function sub(a, b) { return a.operate('-', b); } function imageDimensions(img) { // assert that the node (img) is a String node, passing // the param name for error reporting utils.assertType(img, 'string', 'img'); var path = img.val; // Grab bytes necessary to retrieve dimensions. // if this was real you would do this per format, // instead of reading the entire image :) var data = fs.readFileSync(__dirname + '/' + path); // GIF // of course you would support.. more :) if ('GIF' == data.slice(0, 3).toString()) { var w = data.slice(6, 8) , h = data.slice(8, 10); w = w[1] << 8 | w[0]; h = h[1] << 8 | h[0]; } return [w, h]; } function imageWidth(img) { return new nodes.Unit(imageDimensions(img)[0]); } function imageHeight(img) { return new nodes.Unit(imageDimensions(img)[1]); } stylus(str) .set('filename', 'js-functions.styl') .define('add', add) .define('sub', sub) .define('image-width', imageWidth) .define('image-height', imageHeight) .render(function(err, css){ if (err) throw err; console.log(css); }); For further reference (until documentation is complete) please see the following files: - `lib/nodes/*` - `lib/utils.js` ## .use(fn) When called, the given `fn` is invoked with the renderer, allowing all of the methods above to be used. This allows for plugins to easily expose themselves, defining functions, paths etc. var mylib = function(style){ style.define('add', add); style.define('sub', sub); }; stylus(str) .use(mylib) .render(...) When calling the `render()` method with options, the `use` option can be given a function or array of functions to be invoked with the renderer. stylus.render(str, { use: mylib }, function(err, css){ if (err) throw err; console.log(css); }); ## .deps() Returns array of dependencies (import files): stylus('@import "a"; @import "b"') .deps(); // => ['a.styl', 'b.styl'] See also [--deps CLI flag](http://stylus-lang.com/docs/executable.html#list-dependencies). ## stylus.resolver([options]) Optional built-in function which may be used to resolve relative urls inside imported files: stylus(str) .define('url', stylus.resolver()) .render(function(err, css) { }); See also [--resolve-url CLI flag](http://stylus-lang.com/docs/executable.html#resolving-relative-urls-inside-imports). Options: - `paths` additional resolution path(s) - `nocheck` don't check file existence stylus-0.54.7/docs/keyframes.md000066400000000000000000000037601352722646500164340ustar00rootroot00000000000000--- layout: default permalink: docs/keyframes.html --- # @keyframes Stylus supports `@keyframes` both with curly braces or without them, you can also use interpolation both in names or steps of @keyframes: $keyframe-name = pulse @keyframes {$keyframe-name} for i in 0..10 {10% * i} opacity (i/10) Yielding (expanded prefixes ommited): @keyframes pulse { 0% { opacity: 0; } 20% { opacity: 0.2; } 40% { opacity: 0.4; } 60% { opacity: 0.6; } 80% { opacity: 0.8; } 100% { opacity: 1; } } ## Expansion By using `@keyframes`, your rules are automatically expanded to the vendor prefixes defined by the `vendors` variable (default: `moz webkit o ms official`). This means we can alter it at any time for the expansion to take effect immediately. **Note that expansion of `@keyframes` to the prefixed at-rules would be removed from the Stylus 1.0 when we'd get to it** For example, consider the following: @keyframes foo { from { color: black } to { color: white } } This expands to our three default vendors, and the official syntax: @-moz-keyframes foo { from { color: #000; } to { color: #fff; } } @-webkit-keyframes foo { from { color: #000; } to { color: #fff; } } @-o-keyframes foo { from { color: #000; } to { color: #fff; } } @keyframes foo { from { color: #000; } to { color: #fff; } } If we wanted to limit to the official syntax only, simply alter `vendors`: vendors = official @keyframes foo { from { color: black } to { color: white } } Yielding: @keyframes foo { from { color: #000; } to { color: #fff; } } stylus-0.54.7/docs/kwargs.md000066400000000000000000000017671352722646500157510ustar00rootroot00000000000000--- layout: default permalink: docs/kwargs.html --- # Keyword Arguments Stylus supports keyword arguments, or "kwargs". These allow you to reference arguments by their associated parameter name. The examples shown below are functionally equivalent. However, we can place keyword arguments anywhere within the list. The remaining arguments that are _not_ keyed will be applied to the parameters that have not been satisfied. body { color: rgba(255, 200, 100, 0.5); color: rgba(red: 255, green: 200, blue: 100, alpha: 0.5); color: rgba(alpha: 0.5, blue: 100, red: 255, 200); color: rgba(alpha: 0.5, blue: 100, 255, 200); } Yielding: body { color: rgba(255,200,100,0.5); color: rgba(255,200,100,0.5); color: rgba(255,200,100,0.5); color: rgba(255,200,100,0.5); } To see what parameters a function or mixin accept, use the `p()` function: p(rgba) Yielding: inspect: rgba(red, green, blue, alpha) stylus-0.54.7/docs/literal.md000066400000000000000000000011221352722646500160700ustar00rootroot00000000000000--- layout: default permalink: docs/literal.html --- # CSS Literal If for any reason Stylus cannot accommodate a specific need, you can always resort to literal CSS with `@css`: @css { .ie-opacity { filter: progid:DXImageTransform.Microsoft.Alpha(opacity=25); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=25)"; } } Compiling to: .ie-opacity { filter: progid:DXImageTransform.Microsoft.Alpha(opacity=25); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=25)"; } stylus-0.54.7/docs/media.md000066400000000000000000000040171352722646500155210ustar00rootroot00000000000000--- layout: default permalink: docs/media.html --- # @media The `@media` queries work just as they do within regular CSS, but with Stylus's block notation: @media print #header #footer display none Yielding: @media print { #header, #footer { display: none; } } ## Media Query Bubbling Media queries can be nested, too, and they will be expanded to wrap the context in which they are used. For example: .widget padding 10px @media screen and (min-width: 600px) padding 20px Yielding: .widget { padding: 10px; } @media screen and (min-width: 600px) { .widget { padding: 20px; } } ## Nested media queries You can nest `@media`s one into another and they would combine into one: @media (max-width: 500px) .foo color: #000 @media (min-width: 100px), (min-height: 200px) .foo color: #100 Would yield to @media (max-width: 500px) { .foo { color: #000; } } @media (max-width: 500px) and (min-width: 100px), (max-width: 500px) and (min-height: 200px) { .foo { color: #100; } } ## Interpolations and variables You can use both interpolations and variables inside media queries, so it is possible to do things like this: foo = 'width' bar = 30em @media (max-{foo}: bar) body color #fff This would yield @media (max-width: 30em) { body { color: #fff; } } It is also possible to use expressions inside MQ: .foo for i in 1..4 @media (min-width: 2**(i+7)px) width: 100px*i would yield to @media (min-width: 256px) { .foo { width: 100px; } } @media (min-width: 512px) { .foo { width: 200px; } } @media (min-width: 1024px) { .foo { width: 300px; } } @media (min-width: 2048px) { .foo { width: 400px; } } stylus-0.54.7/docs/middleware.md000066400000000000000000000040541352722646500165600ustar00rootroot00000000000000--- layout: default permalink: docs/middleware.html --- # Connect Middleware Stylus ships with [Connect](http://www.senchalabs.org/connect/) middleware for auto-compiling Stylus sheets whenever they're modified. ## stylus.middleware(options) ### Options Return Connect middleware with the given `options`. `serve` Serve the stylus files from `dest` [true] `force` Always re-compile `src` Source directory used to find .styl files `dest` Destination directory used to output .css files when undefined defaults to `src`. `compile` Custom compile function, accepting the arguments `(str, path)`. `compress` Whether the output .css files should be compressed `firebug` Emits debug infos in the generated css that can be used by the FireStylus Firebug plugin `linenos` Emits comments in the generated css indicating the corresponding stylus line `sourcemap` Generates a sourcemap in sourcemaps v3 format ### Examples Serve .styl files from ./public: var app = connect(); app.middleware(__dirname + '/public'); Change the `src` and `dest` options to alter where .styl files are loaded and where they're saved: var app = connect(); app.middleware({ src: __dirname + '/stylesheets', dest: __dirname + '/public' }); Here we set up the custom compile function so that we may set the `compress` option, or define additional functions. By default the compile function simply sets the `filename` and renders the CSS. In the following case we're compressing the output, using the "nib" library plugin, and auto-importing it. function compile(str, path) { return stylus(str) .set('filename', path) .set('compress', true) .use(nib()) .import('nib'); } Pass it as an option like so: var app = connect(); app.middleware({ src: __dirname , dest: __dirname + '/public' , compile: compile }) stylus-0.54.7/docs/mixins.md000066400000000000000000000106241352722646500157520ustar00rootroot00000000000000 --- layout: default permalink: docs/mixins.html --- # Mixins Both mixins and functions are defined in the same manner, but they are applied in different ways. For example, we have a `border-radius(n)` function defined below, which is invoked as a _mixin_ (i.e., invoked as a statement, rather than part of an expression). When `border-radius()` is invoked within a selector, the properties are expanded and copied into the selector. border-radius(n) -webkit-border-radius n -moz-border-radius n border-radius n form input[type=button] border-radius(5px) Compiles to: form input[type=button] { -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; } When using mixins you can omit the parentheses altogether, providing fantastic transparent vendor property support! border-radius(n) -webkit-border-radius n -moz-border-radius n border-radius n form input[type=button] border-radius 5px Note that the `border-radius` within our mixin is treated as a property, and not a recursive function invocation. To take this further, we can utilize the automatic `arguments` local variable, containing the expression passed, allowing multiple values to be passed: border-radius() -webkit-border-radius arguments -moz-border-radius arguments border-radius arguments Now we can pass values like `border-radius 1px 2px / 3px 4px`! Also we can make use of the [interpolation](http://stylus-lang.com/docs/interpolation.html) `{param}`: border(side, args...) if side border-{side} args else border args .border-thick border('left' , 10px, 'darkred') .border border('' , 1px, 'darkred') Rendering: .border-thick { border-left: 10px 'darkred'; } .border { border: 1px 'darkred'; } Another great use of this is the addition of transparent support for vendor-specifics—such as `opacity` support for IE: support-for-ie ?= true opacity(n) opacity n if support-for-ie filter unquote('progid:DXImageTransform.Microsoft.Alpha(Opacity=' + round(n * 100) + ')') #logo &:hover opacity 0.5 Rendering: #logo:hover { opacity: 0.5; filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50); } ## Parent References Mixins may utilize the parent reference character `&`, acting on the parent instead of further nesting. For example, let's say we want to create a `stripe(even, odd)` mixin for striping table rows. We provide both `even` and `odd` with default color values, and assign the `background-color` property on the row. Nested within the `tr` we use `&` to reference the `tr`, providing the `even` color. stripe(even = #fff, odd = #eee) tr background-color odd &.even &:nth-child(even) background-color even We may then utilize the mixin as shown below: table stripe() td padding 4px 10px table#users stripe(#303030, #494848) td color white Alternatively, `stripe()` could be defined without parent references: stripe(even = #fff, odd = #eee) tr background-color odd tr.even tr:nth-child(even) background-color even If we wished, we could invoke `stripe()` as if it were a property: stripe #fff #000 ## Block mixins You can pass blocks to mixins by calling mixin with `+` prefix: +foo() width: 10px The passed block would be available inside the mixin as `block` variable, that then could be used with interpolation: foo() .bar {block} +foo() width: 10px => .bar { width: 10px; } This feature is in its rough state ATM, but would be enhanced in the future. ## Mixing Mixins in Mixins Mixins can (of course!) utilize other mixins, building upon their own selectors and properties. For example, below we create `comma-list()` to inline (via `inline-list()`) and comma-separate an unordered list. inline-list() li display inline comma-list() inline-list() li &:after content ', ' &:last-child:after content '' ul comma-list() Rendering: ul li:after { content: ", "; } ul li:last-child:after { content: ""; } ul li { display: inline; } stylus-0.54.7/docs/operators.md000066400000000000000000000233161352722646500164630ustar00rootroot00000000000000--- layout: default permalink: docs/operators.html --- # Operators ## Operator Precedence Below is the operator precedence table, highest to lowest: . [] ! ~ + - is defined ** * / % + - ... .. <= >= < > in == is != is not isnt is a && and || or ?: = := ?= += -= *= /= %= not if unless ## Unary Operators The following unary operators are available, `!`, `not`, `-`, `+`, and `~`. !0 // => true !!0 // => false !1 // => false !!5px // => true -5px // => -5px --5px // => 5px not true // => false not not true // => true The logical `not` operator has low precedence, therefore the following example could be replaced with a = 0 b = 1 !a and !b // => false // parsed as: (!a) and (!b) With: not a or b // => false // parsed as: not (a or b) ## Binary Operators ### Subscript [] The subscript operator allows us to grab a value inside an expression via index (zero-based). Negative index values starts with the last element in the expression. list = 1 2 3 list[0] // => 1 list[-1] // => 3 Parenthesized expressions may act as tuples (e.g. `(15px 5px)`, `(1 2 3)`). Below is an example that uses tuples for error handling (and showcasing the versatility of this construct): add(a, b) if a is a 'unit' and b is a 'unit' a + b else (error 'a and b must be units!') body padding add(1,'5') // => padding: error "a and b must be units"; padding add(1,'5')[0] // => padding: error; padding add(1,'5')[0] == error // => padding: true; padding add(1,'5')[1] // => padding: "a and b must be units"; Here's a more complex example. Now we're invoking the built-in `error()` function with the return error message, whenever the ident (the first value) equals `error`. if (val = add(1,'5'))[0] == error error(val[1]) ## Range .. ... Both the inclusive (`..`) and exclusive (`...`) range operators are provided, expanding to expressions: 1..5 // => 1 2 3 4 5 1...5 // => 1 2 3 4 5..1 // => 5 4 3 2 1 ### Additive: + - Multiplicative and additive binary operators work as expected. Type conversion is applied within unit type classes, or default to the literal value. For example `5s - 2px` results in `3s`. 15px - 5px // => 10px 5 - 2 // => 3 5in - 50mm // => 3.031in 5s - 1000ms // => 4s 20mm + 4in // => 121.6mm "foo " + "bar" // => "foo bar" "num " + 15 // => "num 15" ### Multiplicative: / * % 2000ms + (1s * 2) // => 4000ms 5s / 2 // => 2.5s 4 % 2 // => 0 When using `/` within a property value, you **must** wrap with parens. Otherwise the `/` is taken literally (to support CSS `line-height`): font: 14px/1.5; But the following is evaluated as `14px` ÷ `1.5`: font: (14px/1.5); This is _only_ required for the `/` operator. ### Exponent: ** The Exponent operator: 2 ** 8 // => 256 ### Equality & Relational: == != >= <= > < Equality operators can be used to equate units, colors, strings, and even identifiers. This is a powerful concept, as even arbitrary identifiers (such as as `wahoo`) can be utilized as atoms. A function could return `yes` or `no` instead of `true` or `false` (although not advised). 5 == 5 // => true 10 > 5 // => true #fff == #fff // => true true == false // => false wahoo == yay // => false wahoo == wahoo // => true "test" == "test" // => true true is true // => true 'hey' is not 'bye' // => true 'hey' isnt 'bye' // => true (foo bar) == (foo bar) // => true (1 2 3) == (1 2 3) // => true (1 2 3) == (1 1 3) // => false Only exact values match. For example, `0 == false` and `null == false` are both `false`. Aliases: == is != is not != isnt ## Truthfulness Nearly everything within Stylus resolves to `true`, including units with a suffix. Even `0%`, `0px`, etc. will resolve to `true` (because it's common in Stylus for mixins or functions to accept units as valid). However, `0` itself is `false` in terms of arithmetic. Expressions (or "lists") with a length greater than 1 are considered truthy. `true` examples: 0% 0px 1px -1 -1px hey 'hey' (0 0 0) ('' '') `false` examples: 0 null false '' ### Logical Operators: && || and or Logical operators `&&` and `||` are aliased `and` / `or` which apply the same precedence. 5 && 3 // => 3 0 || 5 // => 5 0 && 5 // => 0 #fff is a 'rgba' and 15 is a 'unit' // => true ### Existence Operator: in Checks for the existence of the _left-hand_ operand within the _right-hand_ expression. Simple examples: nums = 1 2 3 1 in nums // => true 5 in nums // => false Some undefined identifiers: words = foo bar baz bar in words // => true HEY in words // => false Works with tuples too: vals = (error 'one') (error 'two') error in vals // => false (error 'one') in vals // => true (error 'two') in vals // => true (error 'something') in vals // => false Example usage in mixin: pad(types = padding, n = 5px) if padding in types padding n if margin in types margin n body pad() body pad(margin) body pad(padding margin, 10px) Yielding: body { padding: 5px; } body { margin: 5px; } body { padding: 10px; margin: 10px; } ### Conditional Assignment: ?= := The conditional assignment operator `?=` (aliased as `:=`) lets us define variables without clobbering old values (if present). This operator expands to an `is defined` binary operation within a ternary. For example, the following are equivalent: color := white color ?= white color = color is defined ? color : white When using plain `=`, we simply reassign: color = white color = black color // => black But when using `?=`, our second attempt fails (since the variable is already defined): color = white color ?= black color // => white ### Instance Check: is a Stylus provides a binary operator named `is a` used to type check. 15 is a 'unit' // => true #fff is a 'rgba' // => true 15 is a 'rgba' // => false Alternatively, we could use the `type()` BIF: type(#fff) == 'rgba' // => true **Note:** `color` is the only special-case, evaluating to `true` when the left-hand operand is an `RGBA` or `HSLA` node. ### Variable Definition: is defined This pseudo binary operator does not accept a right-hand operator, and does _not_ evaluate the left. This allows us to check if a variable has a value assigned to it. foo is defined // => false foo = 15px foo is defined // => true #fff is defined // => 'invalid "is defined" check on non-variable #fff' Alternatively, one can use the `lookup(name)` built-in function to do this—or to perform dynamic lookups: name = 'blue' lookup('light-' + name) // => null light-blue = #80e2e9 lookup('light-' + name) // => #80e2e9 This operator is essential, as an undefined identifier is still a truthy value. For example: body if ohnoes padding 5px _Will_ yield the following CSS when undefined: body { padding: 5px; } However this will be safe: body if ohnoes is defined padding 5px ## Ternary The ternary operator works as we would expect in most languages. It's the only operator with three operands (the _condition_ expression, the _truth_ expression, and the _false_ expression). num = 15 num ? unit(num, 'px') : 20px // => 15px ## Casting As a terse alternative to the `unit()` built-in function, the syntax `(expr) unit` may be used to force the suffix. body n = 5 foo: (n)em foo: (n)% foo: (n + 5)% foo: (n * 5)px foo: unit(n + 5, '%') foo: unit(5 + 180 / 2, deg) ## Color Operations Operations on colors provide a terse, expressive way to alter components. For example, we can operate on each RGB: #0e0 + #0e0 // => #0f0 Another example is adjust the lightness value by adding or subtracting a percentage. To lighten a color, add; to darken, subtract. #888 + 50% // => #c3c3c3 #888 - 50% // => #444 Adjust the hue is also possible by adding or subtracting with degrees. For example, adding `50deg` to this red value results in a yellow: #f00 + 50deg // => #ffd500 Values clamp appropriately. For example, we can "spin" the hue 180 degrees, and if the current value is `320deg`, it will resolve to `140deg`. We may also tweak several values at once (including the alpha) by using `rgb()`, `rgba()`, `hsl()`, or `hsla()`: #f00 - rgba(100,0,0,0.5) // => rgba(155,0,0,0.5) ## Sprintf The string sprintf-like operator `%` can be used to generate a literal value, internally passing arguments through the `s()` built-in: 'X::Microsoft::Crap(%s)' % #fc0 // => X::Microsoft::Crap(#fc0) Multiple values should be parenthesized: '-webkit-gradient(%s, %s, %s)' % (linear (0 0) (0 100%)) // => -webkit-gradient(linear, 0 0, 0 100%) stylus-0.54.7/docs/selectors.md000066400000000000000000000207601352722646500164500ustar00rootroot00000000000000--- layout: default permalink: docs/selectors.html --- # Selectors ## Indentation Stylus is "pythonic" (i.e. indentation-based). Whitespace is significant, so we substitute `{` and `}` with an _indent_, and an _outdent_ as shown below: body color white Which compiles to: body { color: #fff; } If preferred, you can use colons to separate properties and values: body color: white ## Rule Sets Stylus, just like CSS, allows you to define properties for several selectors at once through comma separation. textarea, input border 1px solid #eee The same can be done with a newline: textarea input border 1px solid #eee Both compile to: textarea, input { border: 1px solid #eee; } **The only exception to this rule** are selectors that look like properties. For example, the following `foo bar baz` might be a property **or** a selector: foo bar baz > input border 1px solid So for this reason (or simply if preferred), we may trail with a comma: foo bar baz, form input, > a border 1px solid ## Parent Reference The `&` character references the parent selector(s). In the example below our two selectors (`textarea` and `input`) both alter the `color` on the `:hover` pseudo selector. textarea input color #A7A7A7 &:hover color #000 Compiles to: textarea, input { color: #a7a7a7; } textarea:hover, input:hover { color: #000; } Below is an example providing a simple `2px` border for Internet Explorer utilizing the parent reference within a mixin: box-shadow() -webkit-box-shadow arguments -moz-box-shadow arguments box-shadow arguments html.ie8 &, html.ie7 &, html.ie6 & border 2px solid arguments[length(arguments) - 1] body #login box-shadow 1px 1px 3px #eee Yielding: body #login { -webkit-box-shadow: 1px 1px 3px #eee; -moz-box-shadow: 1px 1px 3px #eee; box-shadow: 1px 1px 3px #eee; } html.ie8 body #login, html.ie7 body #login, html.ie6 body #login { border: 2px solid #eee; } If you'd need to use the ampersand symbol in a selector without it behaving like a parent reference, you can just escape it: .foo[title*='\&'] // => .foo[title*='&'] ## Partial Reference `^[N]` anywhere in a selector, where `N` can be a number, represents a partial reference. Partial reference works similar to the parent reference, but while parent reference contains the whole selector, partial selectors contain only the first merged `N` levels of the nested selectors, so you could access those nesting levels individually. The `^[0]` would give you the selector from the first level, the `^[1]` would give you the rendered selector from the second level and so on: .foo &__bar width: 10px ^[0]:hover & width: 20px would be rendered as .foo__bar { width: 10px; } .foo:hover .foo__bar { width: 20px; } Negative values are counting from the end, so ^[-1] would give you the last selector from the chain before `&`: .foo &__bar &_baz width: 10px ^[-1]:hover & width: 20px would be rendered as .foo__bar_baz { width: 10px; } .foo__bar:hover .foo__bar_baz { width: 20px; } Negative values are especially helpful for usage inside mixins when you don't know at what nesting level you're calling it. * * * Note that partial reference contain the whole rendered chain of selectors until the given nesting level, not the “part” of the selector. ### Ranges in partial references `^[N..M]` anywhere in a selector, where both `N` and `M` can be numbers, represents a partial reference. If you'd have a case when you'd need to get the raw part of the selector, or to get the range of parts programmatically, you could use ranges inside partial reference. If the range would start from the positive value, the result won't contain the selectors of the previous levels and you'd get the result as if the selectors of those levels were inserted at the root of the stylesheet with the combinators omitted: .foo & .bar width: 10px ^[0]:hover ^[1..-1] width: 20px would be rendered as .foo .bar { width: 10px; } .foo:hover .bar { width: 20px; } One number in the range would be the start index, the second — the end index. Note that the order of those numbers won't matter as the selectors would always render from the first levels to the last, so `^[1..-1]` would be equal to the `^[-1..1]`. When both numbers are equal, the result would be just one raw level of a selector, so you could replace `^[1..-1]` in a previous example to `^[-1..-1]`, and it would be equal to the same last one raw selector, but would be more reliable if used inside mixins. ## Initial Reference The `~/` characters at the start of a selector can be used to point at the selector at the first nesting and could be considered as a shortcut to `^[0]`. The only drawback is that you can use initial reference only at the start of a selector: .block &__element ~/:hover & color: red Would be rendered as .block:hover .block__element { color: #f00; } ## Relative Reference The `../` characters at the start of a selector mark a relative reference, which points to the previous to the `&` compiled selector. You can nest relative reference: `../../` to get deeper levels, but note that it can be used only at the start of the selector. .foo .bar width: 10px &, ../ .baz height: 10px would be rendered as .foo .bar { width: 10px; } .foo .bar, .foo .baz { height: 10px; } Relative references can be considered as shortcuts to the partial references with ranges like `^[0..-(N + 1)]` where the `N` is the number of relative references used. ## Root Reference The `/` character at the start of a selector is a root reference. It references the root context and this means the selector won't prepend the parent's selector to it (unless you would use it with `&`). It is helpful when you need to write some styles both to some nested selector and to another one, not in the current scope. textarea input color #A7A7A7 &:hover, /.is-hovered color #000 Compiles to: textarea, input { color: #a7a7a7; } textarea:hover, input:hover, .is-hovered { color: #000; } ## selector() bif You can use the built-in `selector()` to get the current compiled selector. Could be used inside mixins for checks or other clever things. .foo selector() // => '.foo' .foo &:hover selector() // '.foo:hover' This bif could also accept an optional string argument, in this case it would return the compiled selector. Note that it wouldn't prepend the selector of the current scope in case it don't have any `&` symbols. .foo selector('.bar') // => '.bar' .foo selector('&:hover') // '.foo:hover' ### Multiple values for `selector()` bif `selector()` bif can accept multiple values or a comma-separated list in order to create a nested selector structure easier. {selector('.a', '.b', '.c, .d')} color: red would be equal to the .a .b .c, .d color: red and would be rendered as .a .b .c, .a .b .d { color: #f00; } ## selectors() bif This bif returns a comma-separated list of nested selectors for the current level: .a .b &__c content: selectors() would be rendered as .a .b__c { content: '.a', '& .b', '&__c'; } ## Disambiguation Expressions such as `margin - n` could be interpreted both as a subtraction operation, as well as a property with an unary minus. To disambiguate, wrap the expression with parens: pad(n) margin (- n) body pad(5px) Compiles to: body { margin: -5px; } However, this is only true in functions (since functions act both as mixins, or calls with return values). For example, the following is fine (and yields the same results as above): body margin -5px Have weird property values that Stylus can't process? `unquote()` can help you out: filter unquote('progid:DXImageTransform.Microsoft.BasicImage(rotation=1)') Yields: filter progid:DXImageTransform.Microsoft.BasicImage(rotation=1) stylus-0.54.7/docs/sourcemaps.md000066400000000000000000000025401352722646500166220ustar00rootroot00000000000000--- layout: default permalink: docs/sourcemaps.html --- # Sourcemaps Stylus supports basic sourcemaps according to the [Sourcemap v3 spec](https://docs.google.com/document/d/1U1RGAehQwRypUTovF1KRlpiOFze0b-_2gc6fAH0KY0k) ## Create a sourcemap Pass the `--sourcemap` flag (or `-m`) with a Stylus file. This will create a `style.css` file, and a `style.css.map` file as siblings to your `style.styl` and place a sourcemap link at the bottom of `style.css` to your sourcemap. `stylus -m style.styl` You can also run this command while watching a file. For instance: `stylus -w -m style.styl`. This will update your sourcemap everytime you save. ## JavaScript API Set the `sourcemap` setting with an options object or a boolean value: var stylus = require('stylus'); var style = stylus(str) .set('filename', 'file.styl') .set('sourcemap', options); style.render(function(err, css) { // generated sourcemap object console.log(style.sourcemap); }); ### Options `comment` Adds a comment with the `sourceMappingURL` to the generated CSS (default: `true`) `inline` Inlines the sourcemap with full source text in base64 format (default: `false`) `sourceRoot` "sourceRoot" property of the generated sourcemap `basePath` Base path from which sourcemap and all sources are relative (default: `.`) stylus-0.54.7/docs/textmate.md000066400000000000000000000004001352722646500162650ustar00rootroot00000000000000--- layout: default permalink: docs/textmate.html --- # TextMate Bundle Stylus ships with a TextMate bundle, located within `./editors`. To install, simply execute `make install-bundle`, or place `./editors/Stylus.tmbundle` in the appropriate location. stylus-0.54.7/docs/vargs.md000066400000000000000000000047021352722646500155650ustar00rootroot00000000000000--- layout: default permalink: docs/vargs.html --- # Rest Params Stylus supports rest parameters in the form of `name...`. These params consume the remaining arguments passed to a mixin or function. This is useful when utilizing (for example) the implicit function call support to apply vendor prefixes like `-webkit` or `-moz`. In the example below, we consume all the arguments passed, and simply apply them to multiple properties. box-shadow(args...) -webkit-box-shadow args -moz-box-shadow args box-shadow args #login box-shadow 1px 2px 5px #eee Yielding: #login { -webkit-box-shadow: 1px 2px 5px #eee; -moz-box-shadow: 1px 2px 5px #eee; box-shadow: 1px 2px 5px #eee; } If we wanted to peek at a specific argument—say, `x-offset`—we could simply use `args[0]`. Or, we may wish to redefine the mixin: box-shadow(offset-x, args...) got-offset-x offset-x -webkit-box-shadow offset-x args -moz-box-shadow offset-x args box-shadow offset-x args #login box-shadow 1px 2px 5px #eee Yielding: #login { got-offset-x: 1px; -webkit-box-shadow: 1px 2px 5px #eee; -moz-box-shadow: 1px 2px 5px #eee; box-shadow: 1px 2px 5px #eee; } ## arguments The `arguments` variable is injected into mixin and function bodies, containing the exact expression passed. This is useful for several reasons (especially vendor support) as you get the _exact_ expression, commas and all. For example, if we use a rest param, the comma is consumed (since it is an expression delimiter): box-shadow(args...) -webkit-box-shadow args -moz-box-shadow args box-shadow args #login box-shadow #ddd 1px 1px, #eee 2px 2px Yielding undesired results: #login { -webkit-box-shadow: #ddd 1px 1px #eee 2px 2px; -moz-box-shadow: #ddd 1px 1px #eee 2px 2px; box-shadow: #ddd 1px 1px #eee 2px 2px; } Let's redefine the mixin using `arguments`: box-shadow() -webkit-box-shadow arguments -moz-box-shadow arguments box-shadow arguments body box-shadow #ddd 1px 1px, #eee 2px 2px Now, yielding the desired result: body { -webkit-box-shadow: #ddd 1px 1px, #eee 2px 2px; -moz-box-shadow: #ddd 1px 1px, #eee 2px 2px; box-shadow: #ddd 1px 1px, #eee 2px 2px; } stylus-0.54.7/docs/variables.md000066400000000000000000000042751352722646500164200ustar00rootroot00000000000000--- layout: default permalink: docs/variables.html --- # Variables We may assign expressions to variables and use them throughout our stylesheet: font-size = 14px body font font-size Arial, sans-serif Compiles to: body { font: 14px Arial, sans-serif; } Variables can even consist of an expression list: font-size = 14px font-stack = "Lucida Grande", Arial, sans-serif body font font-size font-stack Compiles to: body { font: 14px "Lucida Grande", Arial, sans-serif; } Identifiers (variable names, functions, etc.) may also include the `$` character. For example: $font-size = 14px body { font: $font-size sans-serif; } ## Property Lookup Another cool feature unique to Stylus is the ability to reference properties defined _without_ assigning their values to variables. A great example of this is the logic required for vertically and horizontally center an element (typically done using percentages and negative margins, as follows): #logo position: absolute top: 50% left: 50% width: w = 150px height: h = 80px margin-left: -(w / 2) margin-top: -(h / 2) Instead of assigning the variables `w` and `h`, we can simply prepend the `@` character to the property name to access the value: #logo position: absolute top: 50% left: 50% width: 150px height: 80px margin-left: -(@width / 2) margin-top: -(@height / 2) Another use-case is conditionally defining properties within mixins based on the existence of others . In the following example, we apply a default `z-index` of `1`—but _only_ if `z-index` was not previously specified: position() position: arguments z-index: 1 unless @z-index #logo z-index: 20 position: absolute #logo2 position: absolute Property lookup will "bubble up" the stack until found, or return `null` if the property cannot be resolved. In the following example, `@color` will resolve to `blue`: body color: red ul li color: blue a background-color: @color stylus-0.54.7/editors/000077500000000000000000000000001352722646500146375ustar00rootroot00000000000000stylus-0.54.7/editors/Stylus.tmbundle/000077500000000000000000000000001352722646500177535ustar00rootroot00000000000000stylus-0.54.7/editors/Stylus.tmbundle/Commands/000077500000000000000000000000001352722646500215145ustar00rootroot00000000000000stylus-0.54.7/editors/Stylus.tmbundle/Commands/Compile and Display CSS.tmCommand000066400000000000000000000017201352722646500274670ustar00rootroot00000000000000 beforeRunningCommand nop command #!/bin/bash function highlight { test `which pygmentize` if [[ $? -eq 0 ]]; then pygmentize -Onoclasses,nobackground=True -l css -f html else pre fi } function pre { echo -n '
'
  perl -pe '$| = 1; s/&/&/g; s//>/g; s/$\\n/
/'
  echo '
' } cd $TM_DIRECTORY ${TM_STYLUS:=stylus} | highlight input selection keyEquivalent @b name Compile and Display CSS output showAsHTML scope source.stylus uuid DD8F8C2B-2B83-4734-82EE-8508EE344638 stylus-0.54.7/editors/Stylus.tmbundle/Preferences/000077500000000000000000000000001352722646500222145ustar00rootroot00000000000000stylus-0.54.7/editors/Stylus.tmbundle/Preferences/Comments.tmPreferences000066400000000000000000000014601352722646500265260ustar00rootroot00000000000000 name Comments scope source.stylus settings shellVariables name TM_COMMENT_START value // name TM_COMMENT_START_2 value /* name TM_COMMENT_END_2 value */ uuid 7EC85265-178C-4ECC-AAE2-4EEF4AFF8872 stylus-0.54.7/editors/Stylus.tmbundle/Preferences/Disable indent corrections.tmPreferences000066400000000000000000000007121352722646500320600ustar00rootroot00000000000000 name Disable indent corrections scope source.stylus settings disableIndentCorrections uuid 491D0D08-AA57-45F3-A8D2-4991CD88418A stylus-0.54.7/editors/Stylus.tmbundle/Syntaxes/000077500000000000000000000000001352722646500215715ustar00rootroot00000000000000stylus-0.54.7/editors/Stylus.tmbundle/Syntaxes/Stylus.tmLanguage000066400000000000000000000322511352722646500251050ustar00rootroot00000000000000 fileTypes styl stylus name Stylus patterns captures 1 name punctuation.definition.comment.stylus match (?:^[ \t]+)?(\/\/).*$\n? name comment.line.stylus begin /\* captures 0 name punctuation.definition.comment.stylus end \*/ name comment.block.stylus captures 1 name entity.name.function.stylus match (^[-a-zA-Z_][-\w]*)?(\() name meta.function.stylus captures 1 name punctuation.definition.entity.stylus match \.-?[_a-zA-Z]+[_a-zA-Z0-9-]* name entity.other.attribute-name.class.stylus match ^ *& name entity.language.stylus match (arguments) name variable.language.stylus match \b(.*)(?=\s*=) name variable.language.stylus match @([-\w]+) name keyword.stylus captures 1 name punctuation.definition.entity.stylus match (:+)\b(after|before|first-letter|first-line|selection)\b name entity.other.attribute-name.pseudo-element.stylus captures 1 name punctuation.definition.entity.stylus match (:)\b(active|hover|focus|target|link|any-link|local-link|visited|scope|current|past|future|dir|lang|enabled|disabled|checked|indeterminate|default|valid|invalid|in-range|out-of-range|required|optional|read-only|read-write|root|first-child|last-child|only-child|nth-child|nth-last-child|first-of-type|last-of-type|nth-of-type|nth-last-of-type|only-of-type|nth-match|nth-last-match|empty|not|column|nth-column|nth-last-column)\b name entity.other.attribute-name.pseudo-class.stylus match \b(a|abbr|acronym|address|area|article|aside|audio|b|base|big|blockquote|body|br|button|canvas|caption|cite|code|col|colgroup|datalist|dd|del|details|dfn|dialog|div|dl|dt|em|eventsource|fieldset|figure|figcaption|footer|form|frame|frameset|(h[1-6])|head|header|hgroup|hr|html|i|iframe|img|input|ins|kbd|label|legend|li|link|map|mark|menu|meta|meter|nav|noframes|noscript|object|ol|optgroup|option|output|p|param|pre|progress|q|samp|script|section|select|small|span|strike|strong|style|sub|summary|sup|table|tbody|td|textarea|tfoot|th|thead|time|title|tr|tt|ul|var|video)\b name entity.name.tag.stylus captures 1 name punctuation.definition.constant.stylus match (#)([0-9a-fA-F]{3}|[0-9a-fA-F]{6})\b name constant.other.color.rgb-value.stylus captures 1 name punctuation.definition.entity.stylus match (#)[a-zA-Z][a-zA-Z0-9_-]* name entity.other.attribute-name.id.stylus match (-webkit-|-moz\-|-ms-|-o-) name meta.vendor-prefix.stylus match (\b|\s)(!important|for|in|return|true|false|null|if|else|unless|return)\b name keyword.control.stylus match ((?:!|~|\+|-|(?:\*)?\*|\/|%|(?:\.)\.\.|<|>|(?:=|:|\?|\+|-|\*|\/|%|<|>)?=|!=)|\b(?:in|is(?:nt)?|not)\b) name keyword.operator.stylus begin " end " name string.quoted.double.stylus begin ' end ' name string.quoted.single.stylus comment http://www.w3.org/TR/CSS21/syndata.html#value-def-color match \b(aqua|black|blue|fuchsia|gray|green|lime|maroon|navy|olive|orange|purple|red|silver|teal|white(?!-)|yellow)\b name support.constant.color.w3c-standard-color-name.stylus match (\b(?i:arial|century|comic|courier|garamond|georgia|helvetica|impact|lucida|symbol|system|tahoma|times|trebuchet|utopia|verdana|webdings|sans-serif|serif|monospace)\b) name support.constant.font-name.stylus captures 1 name keyword.other.unit.stylus match (?<![a-zA-Z])(?x) (?:-|\+)?(?:(?:[0-9]+(?:\.[0-9]+)?)|(?:\.[0-9]+)) ((?:px|pt|ch|cm|mm|in|r?em|ex|pc|deg|g?rad|dpi|dpcm|s)\b|%)? name constant.numeric.stylus match \b(alignment-adjust|alignment-baseline|animation|animation-delay|animation-direction|animation-duration|animation-iteration-count|animation-name|animation-play-state|animation-timing-function|appearance|azimuth|backface-visibility|background|background-attachment|background-clip|background-color|background-image|background-origin|background-position|background-repeat|background-size|baseline-shift|binding|bleed|bookmark-label|bookmark-level|bookmark-state|bookmark-target|border|border-bottom|border-bottom-color|border-bottom-left-radius|border-bottom-right-radius|border-bottom-style|border-bottom-width|border-collapse|border-color|border-image|border-image-outset|border-image-repeat|border-image-slice|border-image-source|border-image-width|border-left|border-left-color|border-left-style|border-left-width|border-radius|border-right|border-right-color|border-right-style|border-right-width|border-spacing|border-style|border-top|border-top-color|border-top-left-radius|border-top-right-radius|border-top-style|border-top-width|border-width|bottom|box-decoration-break|box-shadow|box-sizing|break-after|break-before|break-inside|caption-side|clear|clip|color|color-profile|column-count|column-fill|column-gap|column-rule|column-rule-color|column-rule-style|column-rule-width|column-span|column-width|columns|content|counter-increment|counter-reset|crop|cue|cue-after|cue-before|cursor|direction|display|dominant-baseline|drop-initial-after-adjust|drop-initial-after-align|drop-initial-before-adjust|drop-initial-before-align|drop-initial-size|drop-initial-value|elevation|empty-cells|fit|fit-position|flex-align|flex-flow|flex-line-pack|flex-order|flex-pack|float|float-offset|font|font-family|font-size|font-size-adjust|font-smoothing|font-stretch|font-style|font-variant|font-weight|grid-columns|grid-rows|hanging-punctuation|height|hyphenate-after|hyphenate-before|hyphenate-character|hyphenate-lines|hyphenate-resource|hyphens|icon|image-orientation|image-rendering|image-resolution|inline-box-align|left|letter-spacing|line-break|line-height|line-stacking|line-stacking-ruby|line-stacking-shift|line-stacking-strategy|list-style|list-style-image|list-style-position|list-style-type|margin|margin-bottom|margin-left|margin-right|margin-top|marker-offset|marks|marquee-direction|marquee-loop|marquee-play-count|marquee-speed|marquee-style|max-height|max-width|min-height|min-width|move-to|nav-down|nav-index|nav-left|nav-right|nav-up|opacity|orphans|outline|outline-color|outline-offset|outline-style|outline-width|overflow|overflow-style|overflow-wrap|overflow-x|overflow-y|padding|padding-bottom|padding-left|padding-right|padding-top|page|page-break-after|page-break-before|page-break-inside|page-policy|pause|pause-after|pause-before|perspective|perspective-origin|phonemes|pitch|pitch-range|play-during|pointer-events|position|presentation-level|punctuation-trim|quotes|rendering-intent|resize|rest|rest-after|rest-before|richness|right|rotation|rotation-point|ruby-align|ruby-overhang|ruby-position|ruby-span|size|speak|speak-header|speak-numeral|speak-punctuation|speech-rate|src|stress|string-set|tab-size|table-layout|target|target-name|target-new|target-position|text-align|text-align-last|text-decoration|text-decoration-color|text-decoration-line|text-decoration-skip|text-decoration-style|text-emphasis|text-emphasis-color|text-emphasis-position|text-emphasis-style|text-height|text-indent|text-justify|text-outline|text-shadow|text-space-collapse|text-transform|text-underline-position|text-wrap|top|transform|transform-origin|transform-style|transition|transition-delay|transition-duration|transition-property|transition-timing-function|unicode-bidi|user-select|vertical-align|visibility|voice-balance|voice-duration|voice-family|voice-pitch|voice-pitch-range|voice-rate|voice-stress|voice-volume|volume|white-space|widows|width|word-break|word-spacing|word-wrap|z-index)\b(?=\:|\s\s*) name support.type.property-name.stylus comment http://dev.w3.org/csswg/css3-transitions/#properties-from-css- match \b(background-color|background-position|border-bottom-color|border-bottom-width|border-left-color|border-left-width|border-right-color|border-right-width|border-spacing|border-top-color|border-top-width|bottom|clip|color(-stop)?|crop css3-content will likely advance slower than this specification, in which case this definition should move there|font-size|font-weight|height|left|letter-spacing|line-height|margin-bottom|margin-left|margin-right|margin-top|max-height|max-width|min-height|min-width|opacity|outline-color|outline-offset|outline-width|padding-bottom|padding-left|padding-right|padding-top|right|text-indent|text-shadow|top|vertical-align|visibility|width|word-spacing|z-index)\b(?!\:) name support.constant.transitionable-property-value.stylus match \b(absolute|all(-scroll)?|alternate|always|antialiased|armenian|auto|avoid|baseline|below|bidi-override|block|bold|bolder|border-box|both|bottom|break-all|break-word|capitalize|center|char|circle|cjk-ideographic|col-resize|collapse|content-box|crosshair|dashed|decimal-leading-zero|decimal|default|disabled|disc|distribute-all-lines|distribute-letter|distribute-space|distribute|dotted|double|e-resize|ease(-(in(-out)?|out))?|ellipsis|fill|fixed|format|geometricPrecision|georgian|groove|hand|hebrew|help|hidden|hiragana-iroha|hiragana|horizontal|ideograph-alpha|ideograph-numeric|ideograph-parenthesis|ideograph-space|inactive|infinite|inherit|inline-block|inline|inset|inside|inter-ideograph|inter-word|italic|justify|katakana-iroha|katakana|keep-all|larger|left|lighter|line-edge|line-through|line|linear(-gradient)?|list-item|loose|lower-alpha|lower-greek|lower-latin|lower-roman|lowercase|lr-tb|ltr|medium|middle|move|n-resize|ne-resize|newspaper|no-drop|no-repeat|nw-resize|none|normal|not-allowed|nowrap|oblique|optimize(Legibility|Quality|Speed)|outset|outside|overline|padding-box|painted|pointer|pre(-(wrap|line))?|progress|relative|repeat-x|repeat-y|repeat|right|ridge|row-resize|rtl|s-resize|scroll|se-resize|separate|small-caps|smaller|solid|square|static|strict|stroke|sub|subpixel-antialiased|super|sw-resize|table-footer-group|table-header-group|tb-rl|text-bottom|text-top|text|thick|thin|top|transparent|underline|upper-alpha|upper-latin|upper-roman|uppercase|url|vertical(-(ideographic|text))?|visible(Painted|Fill|Stroke)?|w-resize|wait|whitespace|((xx?-)?(small|large))|zero)\b name support.constant.property-value.stylus scopeName source.stylus uuid 60519324-6A3A-4382-9E0B-546993A3869A stylus-0.54.7/editors/Stylus.tmbundle/info.plist000066400000000000000000000004561352722646500217700ustar00rootroot00000000000000 name Stylus uuid DD7889E4-2ACA-4DF5-838F-FC9D7AEAF3F1 stylus-0.54.7/editors/gedit/000077500000000000000000000000001352722646500157335ustar00rootroot00000000000000stylus-0.54.7/editors/gedit/styl.lang000066400000000000000000000361121352722646500175740ustar00rootroot00000000000000 text/x-styl *.styl // /* */