reddit.css -> reddit.less

Note: you'll need to update your .ini stylesheet name to have a .less
extension.

r2/Makefile

@@ -94,7 +94,7 @@ clean_ini:
 	rm $(INIFILES)
 
 #################### CSS file lists
-SPRITED_STYLESHEETS += reddit.css compact.css
+SPRITED_STYLESHEETS += reddit.less compact.css
 LESS_STYLESHEETS := goldinfo.less wiki.less
 OTHER_STYLESHEETS := reddit-ie6-hax.css reddit-ie7-hax.css mobile.css highlight.css
 
@@ -139,8 +139,8 @@ LESSC := r2/lib/contrib/less.js/bin/lessc
 CSS_COMPRESS := $(PYTHON) r2/lib/contrib/rcssmin.py
 CSS_SOURCE_DIR := $(STATIC_BUILD_DIR)/css
 
-PROCESSED_SPRITED_STYLESHEETS := $(addprefix $(STATIC_BUILD_DIR)/, $(SPRITED_STYLESHEETS))
-SPRITES := $(addprefix $(STATIC_BUILD_DIR)/, $(patsubst %.css,sprite-%.png, $(SPRITED_STYLESHEETS)))
+PROCESSED_SPRITED_STYLESHEETS := $(addprefix $(STATIC_BUILD_DIR)/, $(SPRITED_STYLESHEETS:.less=.css))
+SPRITES := $(addprefix $(STATIC_BUILD_DIR)/, $(patsubst %.css,sprite-%.png, $(SPRITED_STYLESHEETS:.less=.css)))
 
 LESS_OUTPUTS := $(addprefix $(STATIC_BUILD_DIR)/, $(patsubst %.less,%.css, $(LESS_STYLESHEETS)))
 
@@ -156,16 +156,28 @@ CSS_OUTPUTS = $(PROCESSED_STYLESHEETS) $(RTL_STYLESHEETS) $(SPRITES)
 css: $(STATIC_BUILDSTAMP) $(CSS_OUTPUTS)
 
 
+# the LESSC invocation is separated so the recipe fails in case of LESS errors.
 $(LESS_OUTPUTS): $(STATIC_BUILD_DIR)/%.css : $(CSS_SOURCE_DIR)/%.less
 	rm -f $@
-	$(LESSC) $< | $(CSS_COMPRESS) > $@
+	$(LESSC) $< > $@.tmp
+	$(CSS_COMPRESS) < $@.tmp > $@
+	rm $@.tmp
 
 $(MINIFIED_OTHER_STYLESHEETS): $(STATIC_BUILD_DIR)/%.css: $(CSS_SOURCE_DIR)/%.css
 	# when static file names are mangled, the original becomes a symlink to the mangled name
 	# remove the original file here in case it's a symlink so we don't just rewrite the old file
 	rm -f $@
 	$(CAT) $< | $(CSS_COMPRESS) > $@
 
+$(STATIC_BUILD_DIR)/sprite-%.png $(STATIC_BUILD_DIR)/%.css: $(CSS_SOURCE_DIR)/%.less $(STATIC_BUILDSTAMP)
+	# see above
+	rm -f $(STATIC_BUILD_DIR)/sprite-$*.png $(STATIC_BUILD_DIR)/$*.css
+	$(PYTHON) r2/lib/nymph.py $(CSS_SOURCE_DIR)/$*.less $(STATIC_BUILD_DIR)/sprite-$*.png > $(STATIC_BUILD_DIR)/$*.less.tmp
+	$(LESSC) $(STATIC_BUILD_DIR)/$*.less.tmp > $(STATIC_BUILD_DIR)/$*.css.tmp
+	$(CSS_COMPRESS) < $(STATIC_BUILD_DIR)/$*.css.tmp > $(STATIC_BUILD_DIR)/$*.css
+	rm $(STATIC_BUILD_DIR)/$*.less.tmp $(STATIC_BUILD_DIR)/$*.css.tmp
+
+# deprecated; remove once compact.scss has been converted to LESS
 $(STATIC_BUILD_DIR)/sprite-%.png $(STATIC_BUILD_DIR)/%.css: $(CSS_SOURCE_DIR)/%.css $(STATIC_BUILDSTAMP)
 	# see above
 	rm -f $(STATIC_BUILD_DIR)/sprite-$*.png $(STATIC_BUILD_DIR)/$*.css

r2/example.ini

@@ -359,7 +359,7 @@ allowed_css_linked_domains = static.reddit.com, www.reddit.com, reallystatic.red
 # max number of uploaded images per subreddit
 max_sr_images = 50
 # default stylesheet and it's rtl version
-stylesheet = reddit.css
+stylesheet = reddit.less
 stylesheet_rtl = reddit-rtl.css
 # location of the static directory
 static_path = /static/

r2/r2/templates/reddit.html

@@ -31,7 +31,7 @@
 %>
 <%namespace file="login.html" import="login_panel, login_form"/>
 <%namespace file="framebuster.html" import="framebuster"/>
-<%namespace file="less.html" import="less_js"/>
+<%namespace file="less.html" import="less_js, less_stylesheet"/>
 <%namespace file="utils.html" import="tags, classes"/>
 <%inherit file="base.html"/>
 
@@ -71,8 +71,7 @@
             type="text/css" />
     %endif
   %else:
-    <link rel="stylesheet" href="${static(g.stylesheet)}" 
-          type="text/css" />
+    ${less_stylesheet(g.stylesheet)}
       %if c.site.stylesheet:
       <link rel="stylesheet" href="${static(c.site.stylesheet)}" 
             type="text/css" />