Br stylus

docs/files.rst

@@ -69,6 +69,7 @@ css_template                 X              X
 css_pseudo_class_separator   X              X
 less_dir                     X              X
 scss_dir                     X              X
+styl_dir                     X              X
 img_dir                      X              X
 generate_image               X              X
 png8                         X              X

docs/index.rst

@@ -7,7 +7,7 @@ Glue is a simple command line tool to generate sprites::
 
 * Automatic Sprite (Image + Metadata) creation including:
 
-  - css (less, scss)
+  - css (less, scss, stylus)
   - cocos2d
   - json (array, hash)
   - CAAT
@@ -21,7 +21,7 @@ Glue is a simple command line tool to generate sprites::
 * Watch option to keep glue running watching for file changes.
 * Project-, Sprite- and Image-level configuration via static config files.
 * Customizable `output <http://glue.readthedocs.org/en/latest/templates.html>`_ using jinja templates.
-* CSS: Optional .less/.scss output format.
+* CSS: Optional .less/.scss/.styl output format.
 * CSS: Configurable `cache busting for sprite images <http://glue.readthedocs.org/en/latest/options.html#cachebuster>`_.
 * CSS: Customizable `class names <http://glue.readthedocs.org/en/latest/options.html#separator>`_.
 

docs/options.rst

@@ -233,6 +233,30 @@ While using ``--less`` you can use your own less template using ``--less-templat
     New in version 0.9.2
 
 
+--styl
+---------
+`stylus <http://learnboost.github.io/stylus/>`_  is a dynamic stylesheet language that extends CSS with dynamic behaviors.
+``glue`` can also create ``.styl`` files adding the ``--styl`` option.
+This files contain exactly the same CSS code. This option only changes the file format.
+
+.. code-block:: bash
+
+    $ glue source output --styl
+
+
+--styl-template
+----------------
+While using ``--styl`` you can use your own stylus template using ``--styl-template=<FILE>``.
+
+.. note::
+    By default glue will use it's own internal ``stylus`` template, so this command **is not required** unless you want to super-customize glue's ``stylus`` output using **your own** template. You can find further documentation about how templates work in the :doc:`templates documentation page. <templates>`
+
+.. code-block:: bash
+
+    $ glue source output --styl-template=my_template.jinja
+
+
+
 --margin
 ------------
 If you want to spread the images around the sprite but you don't want to count this space as image width/height (as happens using `--padding``), you can use the ``--margin`` option followed by the margin you want to add:

docs/settings.rst

@@ -41,6 +41,8 @@ Command-line arg             Environment Variable                Configuration F
 --less-template              GLUE_LESS_TEMPLATE                  less_template
 --scss                       GLUE_SCSS                           scss_format
 --scss-template              GLUE_SCSS_TEMPLATE                  scss_template
+--styl                       GLUE_STYL                           styl_dir
+--styl-template              GLUE_STYL_TEMPLATE                  styl_template
 --namespace                  GLUE_CSS_NAMESPACE                  css_namespace
 --sprite-namespace           GLUE_CSS_SPRITE_NAMESPACE           css_sprite_namespace
 -u --url                     GLUE_CSS_URL                        css_url

glue/formats/__init__.py

@@ -6,6 +6,7 @@
 from .caat import CAATFormat
 from .less import LessFormat
 from .scss import ScssFormat
+from .styl import StylFormat
 
 
 formats = {'css': CssFormat,
@@ -15,4 +16,5 @@
            'json': JSONFormat,
            'caat': CAATFormat,
            'less': LessFormat,
+           'styl': StylFormat,
            'scss': ScssFormat}

glue/formats/styl.py

@@ -0,0 +1,46 @@
+import os
+
+from css import CssFormat
+
+
+class StylFormat(CssFormat):
+
+    extension = 'styl'
+    template = u"""
+        /* glue: {{ version }} hash: {{ hash }} */
+        {% for image in images %}.{{ image.label }}{{ image.pseudo }}{%- if not image.last %}, {%- endif %}{%- endfor %}
+            background-image url('{{ sprite_path }}')
+            background-repeat no-repeat
+            -webkit-background-size {{ width }}px {{ height }}px
+            -moz-background-size {{ width }}px {{ height }}px
+            background-size {{ width }}px {{ height }}px
+            {% for r, ratio in ratios.items() %}
+            @media screen and (-webkit-min-device-pixel-ratio: {{ ratio.ratio }}), screen and (min--moz-device-pixel-ratio: {{ ratio.ratio }}),screen and (-o-min-device-pixel-ratio: {{ ratio.fraction }}),screen and (min-device-pixel-ratio: {{ ratio.ratio }}),screen and (min-resolution: {{ ratio.ratio }}dppx)
+                background-image url('{{ ratio.sprite_path }}')
+            {% endfor %}
+
+        {% for image in images %}
+        .{{ image.label }}{{ image.pseudo }}
+            background-position {{ image.x ~ ('px' if image.x) }} {{ image.y ~ ('px' if image.y) }}
+            width {{ image.width }}px
+            height {{ image.height }}px
+        {% endfor %}
+        """
+
+    @classmethod
+    def populate_argument_parser(cls, parser):
+        group = parser.add_argument_group("Stylus format options")
+
+        group.add_argument("--styl",
+                           dest="styl_dir",
+                           nargs='?',
+                           const=True,
+                           default=os.environ.get('GLUE_STYL', False),
+                           metavar='DIR',
+                           help="Generate Styl files and optionally where")
+
+        group.add_argument("--styl-template",
+                           dest="styl_template",
+                           default=os.environ.get('GLUE_STYL_TEMPLATE', None),
+                           metavar='DIR',
+                           help="Template to use to generate the Styl output.")