From 3771abb15773f10c37ca11ff34aa455f6956abe7 Mon Sep 17 00:00:00 2001 From: Ralf Hortt Date: Tue, 17 Jun 2014 20:34:54 +0200 Subject: [PATCH 1/2] Adding stylus template --- tmpl/sprite.styl | 18 ++++++++++++++++++ 1 file changed, 18 insertions(+) create mode 100644 tmpl/sprite.styl diff --git a/tmpl/sprite.styl b/tmpl/sprite.styl new file mode 100644 index 0000000..0edc709 --- /dev/null +++ b/tmpl/sprite.styl @@ -0,0 +1,18 @@ +{{#common}}.{{/common}}{{^common}}%{{/common}}{{prefix}} + background-repeat no-repeat{{#common}} + background-image url({{{sprite}}}){{/common}} + +{{#svg}}{{#selector}}.{{expression}}{{^last}} +{{/last}}{{/selector}} + background-position {{position}}{{^common}} + @extend %{{prefix}} + background-image url({{#sprite}}{{{sprite}}}{{/sprite}}{{^sprite}}{{#encode}}"{{{encoded}}}"{{/encode}}{{^encode}}{{{path}}}{{/encode}}{{/sprite}}){{/common}} +{{#dims}}{{#dimensions}} + +{{#selector}}.{{expression}}{{^last}}, +{{/last}}{{/selector}} + width {{width}}px + height {{height}}px +{{/dimensions}}{{/dims}} + +{{/svg}} From de6b3ea4121cf296df4a16a67fd7db20c096f0a0 Mon Sep 17 00:00:00 2001 From: Joschi Kuphal Date: Wed, 18 Jun 2014 20:10:44 +0200 Subject: [PATCH 2/2] Added a Stylus output template (#5) --- README.md | 15 ++++++++++++--- test/iconizr.js | 6 +++--- tmpl/sprite.styl | 14 ++++++-------- 3 files changed, 21 insertions(+), 14 deletions(-) diff --git a/README.md b/README.md index d4de313..d6d1970 100644 --- a/README.md +++ b/README.md @@ -9,7 +9,7 @@ iconizr * a single compact **SVG icon sprite**, * optimized single **PNG icons** (optional), * an optimized combined **PNG icon sprite**, -* corresponding **CSS stylesheets** in customizable formats (e.g. CSS, Sass, LESS etc.), +* corresponding **CSS stylesheets** in customizable formats (e.g. CSS, Sass, LESS, Stylus etc.), * an **HTML fragment** including some JavaScript for asynchronously loading the most appropriate stylesheet flavour (depending on the client) * and a couple of **HTML preview documents** (depending on the options you specified) for previewing and testing the different stylesheets (optional). @@ -84,7 +84,7 @@ Iconizr.createIconKit('path/with/svg/images', 'css/output/directory', options, c The `createIconKit()` method will refuse to run if you don't pass exactly four arguments: 1. A path to be used as the **input directory** containing the SVG images for sprite creation. A relative path refers to the current working directory. -2. A main / default **output directory**, used for creating the stylesheet resources (CSS / Sass / LESS etc. if activated and not specified otherwise; see the [svg-sprite rendering options](https://github.com/jkphl/svg-sprite/blob/master/README.md#rendering-configuration)) and serving as a base for the sprite subdirectory given by `spritedir` see ([svg-sprite configuration options](https://github.com/jkphl/svg-sprite#available-options)). A relative path refers to the current working directory. +2. A main / default **output directory**, used for creating the stylesheet resources (CSS / Sass / LESS / Stylus etc. if activated and not specified otherwise; see the [svg-sprite rendering options](https://github.com/jkphl/svg-sprite/blob/master/README.md#rendering-configuration)) and serving as a base for the sprite subdirectory given by `spritedir` see ([svg-sprite configuration options](https://github.com/jkphl/svg-sprite#available-options)). A relative path refers to the current working directory. 3. An object with [configuration options](#available-options) (for both [svg-sprite](https://github.com/jkphl/svg-sprite#available-options) and [iconizr specific](#available-options)). None of these options is mandatory, so you may pass an empty object `{}` here. 4. A callback to be run when the sprite creation has finished (with or without error). @@ -97,7 +97,7 @@ Configuration |Option |Description | |:------------|:------------| -|render |Rendering configuration (output formats like CSS, Sass, LESS, HTML with inline SVG, etc.)| +|render |Rendering configuration (output formats like CSS, Sass, LESS, Stylus, HTML with inline SVG, etc.)| |spritedir |Sprite subdirectory name [`"svg"`]| |sprite |Sprite file name [`"sprite"`]| |prefix |CSS selector prefix [`"svg"`]| @@ -147,6 +147,9 @@ Besides this Node.js module there are several different versions of *iconizr*: Release History --------------- +#### v0.2.2 +* Added a Stylus output template ([#5](https://github.com/jkphl/node-iconizr/pull/5)) + #### v0.2.1 * Fixed invalid `background-position` style in Sass / LESS templates ([#4](https://github.com/jkphl/node-iconizr/issues/4)) @@ -162,6 +165,12 @@ Release History #### v0.1.0 * Initial release + +Contributors +------------ +* [Ralf Hortt](https://github.com/Horttcore) + + Legal ----- Copyright © 2014 Joschi Kuphal / [@jkphl](https://twitter.com/jkphl) diff --git a/test/iconizr.js b/test/iconizr.js index a9f52e2..c2dd534 100644 --- a/test/iconizr.js +++ b/test/iconizr.js @@ -64,13 +64,13 @@ describe('iconizr', function() { }); describe('with valid, extended arguments', function() { - it('generates 51 files', function(done) { + it('generates 57 files', function(done) { this.timeout(10000); - Iconizr.createIconKit(path.join(__dirname, 'files'), path.normalize(path.join(__dirname, '..', 'tmp', 'css')), {preview: 'preview', keep: true, render: {scss: '../sass/_icons', less: '../less/_icons'}, level: 0}, function(err, result){ + Iconizr.createIconKit(path.join(__dirname, 'files'), path.normalize(path.join(__dirname, '..', 'tmp', 'css')), {preview: 'preview', keep: true, render: {scss: '../sass/_icons', less: '../less/_icons', styl: '../styl/_icons'}, level: 0}, function(err, result){ should(err).not.ok; should(result).be.an.Object; should(result).property('success', true); - should(result).property('length', 51); + should(result).property('length', 57); done(); }); }); diff --git a/tmpl/sprite.styl b/tmpl/sprite.styl index 0edc709..5f3a685 100644 --- a/tmpl/sprite.styl +++ b/tmpl/sprite.styl @@ -1,17 +1,15 @@ -{{#common}}.{{/common}}{{^common}}%{{/common}}{{prefix}} +{{#common}}.{{/common}}{{^common}}${{/common}}{{prefix}} background-repeat no-repeat{{#common}} background-image url({{{sprite}}}){{/common}} -{{#svg}}{{#selector}}.{{expression}}{{^last}} -{{/last}}{{/selector}} - background-position {{position}}{{^common}} - @extend %{{prefix}} +{{#svg}}{{#selector}}.{{expression}}{{^last}},{{/last}} +{{/selector}}{{#sprite}} background-position {{position}}{{^common}} +{{/common}}{{/sprite}}{{^common}} @extend ${{prefix}} background-image url({{#sprite}}{{{sprite}}}{{/sprite}}{{^sprite}}{{#encode}}"{{{encoded}}}"{{/encode}}{{^encode}}{{{path}}}{{/encode}}{{/sprite}}){{/common}} {{#dims}}{{#dimensions}} -{{#selector}}.{{expression}}{{^last}}, -{{/last}}{{/selector}} - width {{width}}px +{{#selector}}.{{expression}}{{^last}},{{/last}} +{{/selector}} width {{width}}px height {{height}}px {{/dimensions}}{{/dims}}