stylus-0.48.1/000077500000000000000000000000001237535372000131565ustar00rootroot00000000000000stylus-0.48.1/.gitignore000066400000000000000000000001021237535372000151370ustar00rootroot00000000000000css lib-cov testing .DS_Store /node_modules coverage.html lib-cov stylus-0.48.1/.gitmodules000066400000000000000000000000001237535372000153210ustar00rootroot00000000000000stylus-0.48.1/.npmignore000066400000000000000000000002271237535372000151560ustar00rootroot00000000000000.npmignore .gitignore .gitmodules .travis.yml History.md Workflow.md Makefile bm.js docs/ editors/ examples/ test/ graphics/ coverage.html lib-cov stylus-0.48.1/.travis.yml000066400000000000000000000000541237535372000152660ustar00rootroot00000000000000language: node_js node_js: - 0.8 - 0.10 stylus-0.48.1/History.md000066400000000000000000001152101237535372000151410ustar00rootroot000000000000000.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://learnboost.github.io/stylus/docs/mixins.html#block-mixins) (`+foo`) with block interpolation (`block`), #1223. * Added [`selector()` bif](http://learnboost.github.io/stylus/docs/selectors.html#selector-bif), #1249. * Added [hash interpolation to blocks](http://learnboost.github.io/stylus/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.48.1/LICENSE000066400000000000000000000021151237535372000141620ustar00rootroot00000000000000(The MIT License) Copyright (c) 2010–2014 LearnBoost 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.48.1/Makefile000066400000000000000000000017271237535372000146250ustar00rootroot00000000000000 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.48.1/Readme.md000066400000000000000000000114151237535372000146770ustar00rootroot00000000000000# Stylus [![Build Status](https://travis-ci.org/LearnBoost/stylus.svg?branch=master)](https://travis-ci.org/LearnBoost/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 ``` ### Example ``` 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: ``` 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/wavded/vim-stylus) - [Firebug extension](docs/firebug.md) - heroku [web service](http://styl.heroku.com) for compiling stylus - [style guide](https://github.com/lepture/ganam) parser and generator - transparent vendor-specific function expansion ### Community modules - https://github.com/LearnBoost/stylus/wiki ### Framework Support - [Connect](docs/middleware.md) - [Play! 2.0](https://github.com/patiencelabs/play-stylus) - [Ruby On Rails](https://github.com/lucasmazza/ruby-stylus) - [Meteor](http://docs.meteor.com/#stylus) ### CMS Support - [DocPad](https://github.com/bevry/docpad) - [Punch](https://github.com/laktek/punch-stylus-compiler) ### Screencasts - [Stylus Intro](http://screenr.com/bNY) - [CSS Syntax & Postfix Conditionals](http://screenr.com/A8v) ### Authors - [TJ Holowaychuk (visionmedia)](http://github.com/visionmedia) ### More Information - Language [comparisons](docs/compare.md) ## License (The MIT License) Copyright (c) 2010 LearnBoost <dev@learnboost.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.48.1/Workflow.md000066400000000000000000000061621237535372000153170ustar00rootroot00000000000000# Workflow.md This document 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. stylus-0.48.1/bin/000077500000000000000000000000001237535372000137265ustar00rootroot00000000000000stylus-0.48.1/bin/stylus000077500000000000000000000424571237535372000152330ustar00rootroot00000000000000#!/usr/bin/env node /** * Module dependencies. */ var fs = require('fs') , stylus = require('../lib/stylus') , basename = require('path').basename , dirname = require('path').dirname , resolve = require('path').resolve , join = require('path').join , isWindows = process.platform === 'win32'; /** * 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; /** * 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; /** * 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' , ' --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' , ' -r, --resolve-url Resolve relative urls inside imports' , ' -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); process.exit(1); 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 '--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); process.exit(0); break; 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 '--disable-cache': disableCache = 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 = 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 var options = { filename: 'stdin' , compress: compress , firebug: firebug , linenos: linenos , sourcemap: sourcemap , paths: [process.cwd()].concat(paths) , prefix: prefix , dest: dest }; // Buffer stdin var str = ''; // Convert CSS to Stylus if (convertCSS) { switch (files.length) { case 2: compileCSSFile(files[0], files[1]); break; case 1: compileCSSFile(files[0], files[0].replace(/\.css$/i, '.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 = { 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 (resolveURL) style.set('resolve url', 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); if (resolveURL) style.set('resolve url', true); 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 (resolveURL) style.set('resolve url', 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 writeFile(file, css) { // --print support if (print) return process.stdout.write(css); // --out support var path = dest ? join(dest, basename(file, '.styl') + '.css') : file.replace(/\.styl$/i, '.css'); 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) { // --out support var path = dest ? join(dest, basename(file, '.styl') + '.css.map') : file.replace(/\.styl$/i, '.css.map'); fs.writeFile(path, JSON.stringify(sourcemap), function(err){ if (err) throw err; 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; 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, function(event) { if (event === 'change') 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()); } } /** * Imports the indicated files. */ function importFiles(style) { imports.forEach(function(file) { style.import(file); }); } stylus-0.48.1/bm.js000066400000000000000000000025341237535372000141160ustar00rootroot00000000000000 /** * 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.48.1/docs/000077500000000000000000000000001237535372000141065ustar00rootroot00000000000000stylus-0.48.1/docs/atrules.md000066400000000000000000000017411237535372000161120ustar00rootroot00000000000000--- 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.48.1/docs/bifs.md000066400000000000000000000465671237535372000153750ustar00rootroot00000000000000--- layout: default permalink: docs/bifs.html --- # Built-in 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(hsla(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(hsla(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(hsla(50deg, 100%, 80%)) // => 80% lightness(#00c, 80%) // => #99f ## 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()` ## 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()` ## 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) // => ',' ## 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(unit[, type]) Return a string for the type of `unit` 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 ## match(pattern, string) Test if `string` matches the given `pattern`. match('^foo(bar)?', foo) match('^foo(bar)?', foobar) // => true match('^foo(bar)?', 'foo') match('^foo(bar)?', 'foobar') // => true match('^foo(bar)?', 'bar') // => false ## 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 ## base-convert(num, base, width) Returns a `Literal` `num` converted to the provided `base`, padded to `width` with zeroes (default width is 2) base-convert(1, 10, 3) // => 001 base-convert(14, 16, 1) // => e base-convert(42, 2) // => 101010 ## 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" ## hsla(color | h,s,l,a) Convert the given `color` to an `HSLA` node, or h,s,l,a component values. hslaa(10deg, 50%, 30%, 0.5) // => HSLA hslaa(#ffcc00) // => HSLA ## hsla(color | h,s,l) Convert the given `color` to an `HSLA` node, or h,s,l component values. hsla(10, 50, 30) // => HSLA hsla(#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 is defaulted 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, for example supporting percentages as shown below. lighten(#2c2c2c, 30) // => #787878 lighten(#2c2c2c, 30%) // => #393939 ## darken(color, amount) Darken the given `color` by `amount`.This function is unit-sensitive, for example supporting percentages as shown below. 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. Equals to spinning hue to 180deg. complement(#fd0cc7) // => #0cfd42 ## invert(color) Inverts the color. The red, green, and blue values are inverted, while the opacity is left alone. invert(#d62828) // => #29d7d7 ## grayscale(color) Gives the grayscale equivalent of the given color. Equals to desaturate by 100%. grayscale(#fd0cc7) // => #0cfd42 ## 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) ## unquote(str | ident) Unquote the given `str` and returned 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') tyepof(foo) // => 'literal' ## s(fmt, ...) The `s()` function is similar to `unquote()`, in that it returns a `Literal` node, however it accepts a format string much like 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. ## `called-from` property `called-from` property contains the list of the functions the current function was called from in the 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. “Cachable mixin” is the 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; } ## define(name, expr) Allows to create or overwrite a variable with a given name, passed as a string, onto current scope. This bif can be useful on those cases in which you'd wish 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 ## 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 ## selector() Returns the compiled current selector or `&` if called at root level. .foo selector() // => '.foo' .foo &:hover selector() // '.foo:hover' ## warn(msg) Warn with the given error `msg`, does not exit. warn("oh noes!") ## error(msg) Exits with the given error `msg`. add(a, b) unless a is a 'unit' and b is a 'unit' error('add() expects units') a + b ## 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) ## 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) ## opposite-position(positions) Return the opposites 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 ## 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') yields: body { foo: foo -webkit-something(5px) bar baz; foo: foo -moz-something(5px) bar baz; foo: 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. ## use(path) You can use any given 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 the [hash object](hashes.html): use("plugins/add.js", { foo: bar }) ## Undefined Functions Undefined functions will 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.48.1/docs/block.md000066400000000000000000000016071237535372000155260ustar00rootroot00000000000000--- 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.48.1/docs/comments.md000066400000000000000000000015211237535372000162540ustar00rootroot00000000000000--- 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.48.1/docs/compare.md000066400000000000000000000024211237535372000160550ustar00rootroot00000000000000--- layout: default permalink: docs/compare.html --- # Implementation Comparisons Below we go head to head with other implementations. ## Variables SCSS: $main-color: #006; color: $main-color; Less: @main-color: #006; color: @main-color; Stylus: main-color = #006 color main-color ## Mixins SCSS: @mixin pad($x, $y) { padding: $y $x; } .msg { @include pad(5px, 10px); } Less: .pad(@x, @y) { padding: @y @x; } .msg { .pad(5px, 10px); } Stylus: pad(x, y) padding y x .msg pad(5px, 10px) ## Larger Example Less: .box-shadow (@x: 0, @y: 0, @blur: 1px, @alpha) { @val: @x @y @blur rgba(0, 0, 0, @alpha); box-shadow: @val; -webkit-box-shadow: @val; -moz-box-shadow: @val; } .box { @base: #f938ab; color: saturate(@base, 5%); border-color: lighten(@base, 30%); div { .box-shadow(0, 0, 5px, 0.4) } } Stylus: box-shadow() -webkit-box-shadow arguments -moz-box-shadow arguments box-shadow arguments .box base = #f938ab color saturate(base, 5%) border-color lighten(base, 30%) div box-shadow 0 0 5px 0.4 stylus-0.48.1/docs/conditionals.md000066400000000000000000000056261237535372000171270ustar00rootroot00000000000000--- 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.48.1/docs/css-style.md000066400000000000000000000051771237535372000163700ustar00rootroot00000000000000--- 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, if 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.48.1/docs/error-reporting.md000066400000000000000000000025321237535372000175720ustar00rootroot00000000000000--- 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: Error: /Users/tj/Projects/stylus/testing/test.styl:4 3: ' form input' 4: ' == padding 5px' illegal unary == ## 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: /Users/tj/Projects/stylus/examples/error.styl:12 11: '' 12: 'body' 13: ' border-radius \'5px\'' 14: '' expected a unit, but got string at ensure() (/Users/tj/Projects/stylus/examples/error.styl:2) at border-radius() (/Users/tj/Projects/stylus/examples/error.styl:5) at "body" (/Users/tj/Projects/stylus/examples/error.styl:10) stylus-0.48.1/docs/escape.md000066400000000000000000000007631237535372000156760ustar00rootroot00000000000000--- 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.48.1/docs/executable.md000066400000000000000000000175451237535372000165650ustar00rootroot00000000000000--- 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 -r, --resolve-url Resolve relative urls inside imports -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/LearnBoost/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%); } stylus-0.48.1/docs/extend.md000066400000000000000000000103731237535372000157230ustar00rootroot00000000000000--- 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], form 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. stylus-0.48.1/docs/firebug.md000066400000000000000000000030531237535372000160540ustar00rootroot00000000000000--- 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.48.1/docs/font-face.md000066400000000000000000000010321237535372000162660ustar00rootroot00000000000000--- 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.48.1/docs/functions.md000066400000000000000000000123431237535372000164430ustar00rootroot00000000000000--- 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.48.1/docs/functions.url.md000066400000000000000000000030731237535372000172440ustar00rootroot00000000000000--- 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){ }); 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){ }); ## Options - `limit` bytesize limit defaulting to 30Kb (30000), use `false` to disable the limit - `paths` image resolution path(s) stylus-0.48.1/docs/gedit.md000066400000000000000000000027341237535372000155320ustar00rootroot00000000000000--- 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/LearnBoost/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/LearnBoost/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.48.1/docs/hashes.md000066400000000000000000000046171237535372000157130ustar00rootroot00000000000000--- 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' 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.48.1/docs/import.md000066400000000000000000000104351237535372000157450ustar00rootroot00000000000000--- 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.48.1/docs/interpolation.md000066400000000000000000000031711237535372000173210ustar00rootroot00000000000000--- 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.48.1/docs/introspection.md000066400000000000000000000020031237535372000173230ustar00rootroot00000000000000--- 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.48.1/docs/iteration.md000066400000000000000000000045351237535372000164350ustar00rootroot00000000000000--- 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; } ## 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.48.1/docs/js.md000066400000000000000000000120101237535372000150360ustar00rootroot00000000000000--- 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(...) stylus-0.48.1/docs/keyframes.md000066400000000000000000000037601237535372000164240ustar00rootroot00000000000000--- 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.48.1/docs/kwargs.md000066400000000000000000000017661237535372000157400ustar00rootroot00000000000000--- layout: default permalink: docs/kwargs.html --- # Keyword Arguments Stylus supports keyword arguments, or "kwargs". These allow you to reference arguents 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.48.1/docs/literal.md000066400000000000000000000004571237535372000160720ustar00rootroot00000000000000--- 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 { body { font: 14px; } } Compiling to: body { font: 14px; } stylus-0.48.1/docs/media.md000066400000000000000000000040171237535372000155110ustar00rootroot00000000000000--- 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.48.1/docs/middleware.md000066400000000000000000000040541237535372000165500ustar00rootroot00000000000000--- 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.48.1/docs/mixins.md000066400000000000000000000100171237535372000157360ustar00rootroot00000000000000--- 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`! 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.48.1/docs/operators.md000066400000000000000000000233171237535372000164540ustar00rootroot00000000000000--- 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 an 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.48.1/docs/selectors.md000066400000000000000000000104121237535372000164310ustar00rootroot00000000000000--- 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 Exploder 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*='&'] ## Root Reference The `/` character at the start of the 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' ## Disambiguation Expressions such as `padding - 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) padding (- n) body pad(5px) Compiles to: body { padding: -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 padding -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.48.1/docs/sourcemaps.md000066400000000000000000000025401237535372000166120ustar00rootroot00000000000000--- 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.48.1/docs/textmate.md000066400000000000000000000004001237535372000162550ustar00rootroot00000000000000--- 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.48.1/docs/vargs.md000066400000000000000000000047021237535372000155550ustar00rootroot00000000000000--- 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.48.1/docs/variables.md000066400000000000000000000042571237535372000164100ustar00rootroot00000000000000--- 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 = font-size "Lucida Grande", Arial body font font sans-serif 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.48.1/editors/000077500000000000000000000000001237535372000146275ustar00rootroot00000000000000stylus-0.48.1/editors/Stylus.tmbundle/000077500000000000000000000000001237535372000177435ustar00rootroot00000000000000stylus-0.48.1/editors/Stylus.tmbundle/Commands/000077500000000000000000000000001237535372000215045ustar00rootroot00000000000000stylus-0.48.1/editors/Stylus.tmbundle/Commands/Compile and Display CSS.tmCommand000066400000000000000000000017201237535372000274570ustar00rootroot00000000000000 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.48.1/editors/Stylus.tmbundle/Preferences/000077500000000000000000000000001237535372000222045ustar00rootroot00000000000000stylus-0.48.1/editors/Stylus.tmbundle/Preferences/Comments.tmPreferences000066400000000000000000000014601237535372000265160ustar00rootroot00000000000000 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.48.1/editors/Stylus.tmbundle/Preferences/Disable indent corrections.tmPreferences000066400000000000000000000007121237535372000320500ustar00rootroot00000000000000 name Disable indent corrections scope source.stylus settings disableIndentCorrections uuid 491D0D08-AA57-45F3-A8D2-4991CD88418A stylus-0.48.1/editors/Stylus.tmbundle/Syntaxes/000077500000000000000000000000001237535372000215615ustar00rootroot00000000000000stylus-0.48.1/editors/Stylus.tmbundle/Syntaxes/Stylus.tmLanguage000066400000000000000000000322511237535372000250750ustar00rootroot00000000000000 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.48.1/editors/Stylus.tmbundle/info.plist000066400000000000000000000004561237535372000217600ustar00rootroot00000000000000 name Stylus uuid DD7889E4-2ACA-4DF5-838F-FC9D7AEAF3F1 stylus-0.48.1/editors/gedit/000077500000000000000000000000001237535372000157235ustar00rootroot00000000000000stylus-0.48.1/editors/gedit/styl.lang000066400000000000000000000361121237535372000175640ustar00rootroot00000000000000 text/x-styl *.styl // /* */