From b3d654f6554ee2a293b4c629bb8e67ee01c5337c Mon Sep 17 00:00:00 2001 From: ccd0 Date: Sat, 16 Apr 2016 07:18:06 -0700 Subject: [PATCH] Create CSS module. --- Makefile | 33 ++++---------- src/Miscellaneous/Report.coffee | 4 +- src/css/CSS.js | 12 ++++++ src/css/font-awesome.css | 14 ------ src/css/style.css | 12 ------ src/main/Config.coffee | 2 +- .../custom.css => main/Config.usercss.css} | 0 src/main/Main.coffee | 8 +--- tools/.jshintrc | 3 +- tools/style.js | 43 +++++++++++++++++++ tools/template.js | 11 ++--- 11 files changed, 76 insertions(+), 66 deletions(-) create mode 100644 src/css/CSS.js rename src/{css/custom.css => main/Config.usercss.css} (100%) create mode 100644 tools/style.js diff --git a/Makefile b/Makefile index 2dca28ade..c4a6965c2 100644 --- a/Makefile +++ b/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/css/custom.css -imports_Monitoring := \ - 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 := \ + src/Archive/archives.json +imports_css := \ + tools/style.js \ node_modules/font-awesome/css/font-awesome.css \ node_modules/font-awesome/fonts/fontawesome-webfont.woff -imports_style := \ - $(wildcard src/css/linkIcons/*.png) +imports_Monitoring := \ + 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))) \ ) diff --git a/src/Miscellaneous/Report.coffee b/src/Miscellaneous/Report.coffee index 575840763..3910fb7f2 100644 --- a/src/Miscellaneous/Report.coffee +++ b/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'] diff --git a/src/css/CSS.js b/src/css/CSS.js new file mode 100644 index 000000000..fd51596cb --- /dev/null +++ b/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')) %> + +}; diff --git a/src/css/font-awesome.css b/src/css/font-awesome.css index cdc7806d5..fe6e55924 100644 --- a/src/css/font-awesome.css +++ b/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; diff --git a/src/css/style.css b/src/css/style.css index 2619246e6..42103d511 100644 --- a/src/css/style.css +++ b/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; diff --git a/src/main/Config.coffee b/src/main/Config.coffee index 9575e749b..ff50ac4ec 100644 --- a/src/main/Config.coffee +++ b/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 diff --git a/src/css/custom.css b/src/main/Config.usercss.css similarity index 100% rename from src/css/custom.css rename to src/main/Config.usercss.css diff --git a/src/main/Main.coffee b/src/main/Main.coffee index 4432b5fad..00779148e 100644 --- a/src/main/Main.coffee +++ b/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] diff --git a/tools/.jshintrc b/tools/.jshintrc index 0c9613612..427373449 100644 --- a/tools/.jshintrc +++ b/tools/.jshintrc @@ -2,5 +2,6 @@ "esnext": true, "undef": true, "unused": true, - "node": true + "node": true, + "-W083": true } diff --git a/tools/style.js b/tools/style.js new file mode 100644 index 000000000..1565259d0 --- /dev/null +++ b/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') + +); diff --git a/tools/template.js b/tools/template.js index 76047a239..5b3014cf7 100644 --- a/tools/template.js +++ b/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() { - var text = Array.prototype.slice.call(arguments).map(name => read(`src/css/${name}.css`)).join(''); - 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.multiline = function(text) { + return text.replace(/\n+/g, '\n').split(/^/m).map(JSON.stringify).join(' +\n').replace(/`/g, '\\`'); }; obj.importHTML = function(filename) {