Create CSS module.

Makefile

@@ -26,13 +26,13 @@ cat_deps := tools/cat.js
 capitalized = $(filter-out a,$(foreach x,$1,$(subst a $(x),,$(sort a $(x)))))
 
 parts := \
- globals Config platform classes \
+ globals Config css platform classes \
  $(sort $(call capitalized, \
   $(subst src/,,$(wildcard src/*)) \
  )) \
  Main
 
-lang = $(if $(filter globals,$1),js,coffee)
+lang = $(if $(filter globals css,$1),js,coffee)
 
 # remove extension when sorting so X.coffee comes before X.Y.coffee
 sources_lang = \
@@ -42,29 +42,20 @@ sources_lang = \
 sources = $(call sources_lang,$1,$(call lang,$1))
 
 imports = \
- $(filter-out %.coffee %.js,$(wildcard src/$1/*.* src/$1/*/*.* src/$1/*/*/*.*)) \
+ $(filter-out %.coffee %.js,$(wildcard src/$1/*.* src/$1/*/*.* src/$1/*/*/*.* src/main/$1.*)) \
  .tests_enabled \
  $(imports_$1)
 
 imports_globals := \
  version.json
 imports_Config := \
- src/Archive/archives.json \
+ src/Archive/archives.json
- src/css/custom.css
+imports_css := \
-imports_Monitoring := \
+ tools/style.js \
- src/meta/icon128.png
-imports_Miscellaneous := \
- src/css/report.css
-imports_Main := \
- $(filter-out src/css/custom.css src/css/report.css,$(wildcard src/css/*.css)) \
- tmp/font-awesome.css \
- tmp/style.css
-
-imports_font_awesome := \
  node_modules/font-awesome/css/font-awesome.css \
  node_modules/font-awesome/fonts/fontawesome-webfont.woff
-imports_style := \
+imports_Monitoring := \
- $(wildcard src/css/linkIcons/*.png)
+ src/meta/icon128.png
 
 intermediate = \
  LICENSE \
@@ -108,12 +99,6 @@ node_modules/% : .events/npm
 .tests_enabled :
 	echo false> .tests_enabled
 
-tmp/font-awesome.css : src/css/font-awesome.css $(imports_font_awesome) $(template_deps) | tmp
-	$(template) $< $@
-
-tmp/style.css : src/css/style.css $(imports_style) $(template_deps) | tmp
-	$(template) $< $@
-
 .events/declare : $(wildcard src/*/*.coffee) tools/declare.js | .events tmp
 	node tools/declare.js
 	echo -> $@
@@ -151,7 +136,7 @@ tmp/$1.js : tmp/$1.coffee $(coffee_deps) tools/globalize.js
 endef
 
 $(foreach p, \
- $(filter-out globals platform,$(parts)) platform_crx platform_userscript, \
+ $(filter-out globals css platform,$(parts)) platform_crx platform_userscript, \
  $(eval $(call compile,$(p))) \
 )
 

src/Miscellaneous/Report.coffee

@@ -1,6 +1,4 @@
 Report =
-  css: `<%= importCSS('report') %>`
-
   init: ->
     return unless (match = location.search.match /\bno=(\d+)/)
     Captcha.replace.init()
@@ -8,7 +6,7 @@ Report =
     $.ready @ready
 
   ready: ->
-    $.addStyle Report.css
+    $.addStyle CSS.report
 
     Report.archive() if Conf['Archive Report']
 

src/css/CSS.js

@@ -0,0 +1,12 @@
+CSS = {
+
+boards:
+<%= multiline(require_style()()) %>,
+
+report:
+<%= multiline(read('src/css/report.css')) %>,
+
+www:
+<%= multiline(read('src/css/www.css')) %>
+
+};

src/css/font-awesome.css

@@ -1,13 +1,3 @@
-<%=
-read('node_modules/font-awesome/css/font-awesome.css').match(/\/\*\![^]*?\*\//)[0]
-%>
-
-@font-face {
-  font-family: FontAwesome;
-  src: url('data:application/font-woff;base64,<%= readBase64('node_modules/font-awesome/fonts/fontawesome-webfont.woff') %>') format('woff');
-  font-weight: 400;
-  font-style: normal;
-}
 .fa::before {
   font-family: FontAwesome;
   font-weight: 400;
@@ -44,10 +34,6 @@ read('node_modules/font-awesome/css/font-awesome.css').match(/\/\*\![^]*?\*\//)[
   display: inline;
 }
 
-<%=
-read('node_modules/font-awesome/css/font-awesome.css').match(/\.fa-glass:[^]*/)[0].replace(/([,{;])\s+/g, '$1').replace(/,/g, ', ')
-%>
-
 .fa-spin::before {
   -webkit-animation:spin 2s infinite linear;
   -moz-animation:spin 2s infinite linear;

src/css/style.css

@@ -1820,18 +1820,6 @@ a:only-of-type > .remove {
   cursor: text !important;
 }
 
-/* Link Title Favicons */
-<%=
-ls('src/css/linkIcons').map(function(file) {
-  var key  = file.match(/(\w+)\.png/)[1];
-  var data = readBase64(`src/css/linkIcons/${file}`);
-  return ".linkify."+key+" {\n" +
-  "  background: transparent url('data:image/png;base64,"+data+"') center left no-repeat!important;\n" +
-  "  padding-left: 18px;\n" +
-  "}";
-}).join('\n')
-%>
-
 /* Embedding */
 #embedding {
   padding: 1px 4px 1px 4px;

src/main/Config.coffee

@@ -796,7 +796,7 @@ Config =
 
   favicon: 'ferongr'
 
-  usercss: `<%= importCSS('custom') %>`
+  usercss: `<%= multiline(read('src/main/Config.usercss.css')) %>`
 
   hotkeys:
     # QR & Options

src/main/Main.coffee

@@ -110,7 +110,7 @@ Main =
 
     switch hostname
       when 'www.4chan.org'
-        $.onExists doc, 'body', -> $.addStyle Main.cssWWW
+        $.onExists doc, 'body', -> $.addStyle CSS.www
         Captcha.replace.init()
         return
       when 'sys.4chan.org'
@@ -190,7 +190,7 @@ Main =
         Conf['Autohiding Scrollbar'] = !Conf['Autohiding Scrollbar']
         $.set 'Autohiding Scrollbar', Conf['Autohiding Scrollbar']
         $.toggleClass doc, 'autohiding-scrollbar'
-    $.addStyle Main.css, 'fourchanx-css'
+    $.addStyle CSS.boards, 'fourchanx-css'
     Main.bgColorStyle = $.el 'style', id: 'fourchanx-bgcolor-css'
 
     keyboard = false
@@ -391,10 +391,6 @@ Main =
     $.ready ->
       cb() if Main.isThisPageLegit()
 
-  css: `<%= importCSS('../../tmp/font-awesome', '../../tmp/style', 'yotsuba', 'yotsuba-b', 'futaba', 'burichan', 'tomorrow', 'photon', 'supports') %>`
-
-  cssWWW: `<%= importCSS('www') %>`
-
   features: [
     ['Polyfill',                  Polyfill]
     ['Normalize URL',             NormalizeURL]

tools/.jshintrc

@@ -2,5 +2,6 @@
   "esnext": true,
   "undef":  true,
   "unused": true,
-  "node":   true
+  "node":   true,
+  "-W083":  true
 }

tools/style.js

@@ -0,0 +1,43 @@
+var fs = require('fs');
+
+var read       = filename => fs.readFileSync(filename, 'utf8').replace(/\r\n/g, '\n');
+var readBase64 = filename => fs.readFileSync(filename).toString('base64');
+
+module.exports = () => (
+
+// Font Awesome CSS attribution and license
+read('node_modules/font-awesome/css/font-awesome.css').match(/\/\*\![^]*?\*\//)[0] + '\n' +
+
+// Font Awesome web font
+`@font-face {
+  font-family: FontAwesome;
+  src: url('data:application/font-woff;base64,${readBase64('node_modules/font-awesome/fonts/fontawesome-webfont.woff')}') format('woff');
+  font-weight: 400;
+  font-style: normal;
+}
+` +
+
+// fa-[icon name] classes
+read('node_modules/font-awesome/css/font-awesome.css').match(/\.fa-glass:[^]*/)[0].replace(/([,{;])\s+/g, '$1').replace(/,/g, ', ') +
+
+[
+  'font-awesome',
+  'style',
+  'yotsuba', 'yotsuba-b', 'futaba', 'burichan', 'tomorrow', 'photon'
+].map(
+  name => read(`src/css/${name}.css`)
+).join('') +
+
+'/* Link Title Favicons */\n' +
+fs.readdirSync('src/css/linkIcons').map(file =>
+`.linkify.${file.split('.')[0]} {
+  background: transparent url('data:image/png;base64,${readBase64(`src/css/linkIcons/${file}`)}') center left no-repeat!important;
+  padding-left: 18px;
+}
+`
+).join('') +
+
+// XXX Moved to end of stylesheet to avoid breaking whole stylesheet in Maxthon.
+read('src/css/supports.css')
+
+);

tools/template.js

@@ -7,18 +7,19 @@ _.templateSettings.interpolate = /<%=([\s\S]+?)%>/g;
 
 var obj = {};
 
+for (var m of ['style']) {
+  obj[`require_${m}`] = () => require(`./${m}`);
+}
+
 var read     = obj.read     = filename => fs.readFileSync(filename, 'utf8').replace(/\r\n/g, '\n');
 var readJSON = obj.readJSON = filename => JSON.parse(read(filename));
 obj.readBase64              = filename => fs.readFileSync(filename).toString('base64');
-obj.ls                      = pathname => fs.readdirSync(pathname);
 
 // Convert JSON object to Coffeescript expression (via embedded JS).
 var constExpression = data => '`' + JSON.stringify(data).replace(/`/g, '\\`') + '`';
 
-obj.importCSS = function() {
+obj.multiline = function(text) {
-  var text = Array.prototype.slice.call(arguments).map(name => read(`src/css/${name}.css`)).join('');
+  return text.replace(/\n+/g, '\n').split(/^/m).map(JSON.stringify).join(' +\n').replace(/`/g, '\\`');
-  text = _.template(text)(pkg); // variables only; no recursive imports
-  return text.trim().replace(/\n+/g, '\n').split(/^/m).map(JSON.stringify).join(' +\n').replace(/`/g, '\\`');
 };
 
 obj.importHTML = function(filename) {