Mechanism to insert site-specific selectors. #2169

src/Miscellaneous/CustomCSS.coffee

@@ -4,7 +4,7 @@ CustomCSS =
     @addStyle()
 
   addStyle: ->
-    @style = $.addStyle Conf['usercss'], 'custom-css', '#fourchanx-css'
+    @style = $.addStyle CSS.sub(Conf['usercss']), 'custom-css', '#fourchanx-css'
 
   rmStyle: ->
     if @style
@@ -14,4 +14,4 @@ CustomCSS =
   update: ->
     unless @style
       return @addStyle()
-    @style.textContent = Conf['usercss']
+    @style.textContent = CSS.sub Conf['usercss']

src/css/CSS.js

@@ -16,6 +16,22 @@ report:
 <%= multiline(read('report.css')) %>,
 
 www:
-<%= multiline(read('www.css')) %>
+<%= multiline(read('www.css')) %>,
+
+sub: function(css) {
+  var variables = {
+    site: Site.selectors
+  };
+  return css.replace(/\$[\w\$]+/g, function(name) {
+    var words = name.slice(1).split('$');
+    var sel = variables;
+    for (var i = 0; i < words.length; i++) {
+      if (typeof sel !== 'object') return name;
+      sel = sel[words[i]];
+    }
+    if (typeof sel !== 'string') return name;
+    return sel;
+  });
+}
 
 };

src/main/Main.coffee

@@ -223,7 +223,7 @@ Main =
         Conf['Autohiding Scrollbar'] = !Conf['Autohiding Scrollbar']
         $.set 'Autohiding Scrollbar', Conf['Autohiding Scrollbar']
         $.toggleClass doc, 'autohiding-scrollbar'
-    $.addStyle CSS.boards, 'fourchanx-css'
+    $.addStyle CSS.sub(CSS.boards), 'fourchanx-css'
     Main.bgColorStyle = $.el 'style', id: 'fourchanx-bgcolor-css'
 
     keyboard = false