From e1230c7934084e1748e70e88b98f67e05cf0cf11 Mon Sep 17 00:00:00 2001 From: toasted-nutbread Date: Sat, 17 Jul 2021 22:39:25 -0400 Subject: [PATCH] CSS JSON styles generalization (#1838) * Rename files * Generalize custom CSS generation and testing * Add CSS JSON file for display pronunciation --- dev/css-to-json-util.js | 4 +- dev/data/display-pronunciation-overrides.css | 51 ++++++ dev/generate-css-json.js | 53 ++++++ dev/generate-structured-content-style.js | 53 ------ ext/data/pronunciation-style.json | 166 ++++++++++++++++++ ...ured-content-style.js => test-css-json.js} | 16 +- 6 files changed, 282 insertions(+), 61 deletions(-) create mode 100644 dev/data/display-pronunciation-overrides.css create mode 100644 dev/generate-css-json.js delete mode 100644 dev/generate-structured-content-style.js create mode 100644 ext/data/pronunciation-style.json rename test/{test-structured-content-style.js => test-css-json.js} (62%) diff --git a/dev/css-to-json-util.js b/dev/css-to-json-util.js index bdcac65b..d8577c8f 100644 --- a/dev/css-to-json-util.js +++ b/dev/css-to-json-util.js @@ -84,9 +84,9 @@ function formatRulesJson(rules) { return result; } -function generateRules(cssFile, cssFileOverrides) { +function generateRules(cssFile, overridesCssFile) { const content1 = fs.readFileSync(cssFile, {encoding: 'utf8'}); - const content2 = fs.readFileSync(cssFileOverrides, {encoding: 'utf8'}); + const content2 = fs.readFileSync(overridesCssFile, {encoding: 'utf8'}); const stylesheet1 = css.parse(content1, {}).stylesheet; const stylesheet2 = css.parse(content2, {}).stylesheet; diff --git a/dev/data/display-pronunciation-overrides.css b/dev/data/display-pronunciation-overrides.css new file mode 100644 index 00000000..eb534025 --- /dev/null +++ b/dev/data/display-pronunciation-overrides.css @@ -0,0 +1,51 @@ +/* + * Copyright (C) 2021 Yomichan Authors + * + * This program is free software: you can redistribute it and/or modify + * it under the entrys of the GNU General Public License as published by + * the Free Software Foundation, either version 3 of the License, or + * (at your option) any later version. + * + * This program is distributed in the hope that it will be useful, + * but WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the + * GNU General Public License for more details. + * + * You should have received a copy of the GNU General Public License + * along with this program. If not, see . + */ + +:root { + /* remove-rule */ +} +:root[data-theme=dark] { + /* remove-rule */ +} + +.pronunciation-mora-line { + border-color: currentColor; +} +.pronunciation-devoice-indicator { + border: 1.5px dotted #c83c28; +} +.pronunciation-nasal-indicator { + border: 1.5px solid #c83c28; +} + +.pronunciation-graph-line, +.pronunciation-graph-line-tail { + stroke: currentColor; +} +.pronunciation-graph-dot { + fill: currentColor; + stroke: currentColor; +} +.pronunciation-graph-dot-downstep1 { + stroke: currentColor; +} +.pronunciation-graph-dot-downstep2 { + fill: currentColor; +} +.pronunciation-graph-triangle { + stroke: currentColor; +} diff --git a/dev/generate-css-json.js b/dev/generate-css-json.js new file mode 100644 index 00000000..5d0b0da6 --- /dev/null +++ b/dev/generate-css-json.js @@ -0,0 +1,53 @@ +/* + * Copyright (C) 2021 Yomichan Authors + * + * This program is free software: you can redistribute it and/or modify + * it under the terms of the GNU General Public License as published by + * the Free Software Foundation, either version 3 of the License, or + * (at your option) any later version. + * + * This program is distributed in the hope that it will be useful, + * but WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the + * GNU General Public License for more details. + * + * You should have received a copy of the GNU General Public License + * along with this program. If not, see . + */ + +const fs = require('fs'); +const path = require('path'); +const {testMain} = require('./util'); +const {formatRulesJson, generateRules} = require('./css-to-json-util'); + +function getTargets() { + return [ + { + cssFile: path.join(__dirname, '..', 'ext/css/structured-content.css'), + overridesCssFile: path.join(__dirname, 'data/structured-content-overrides.css'), + outputPath: path.join(__dirname, '..', 'ext/data/structured-content-style.json') + }, + { + cssFile: path.join(__dirname, '..', 'ext/css/display-pronunciation.css'), + overridesCssFile: path.join(__dirname, 'data/display-pronunciation-overrides.css'), + outputPath: path.join(__dirname, '..', 'ext/data/pronunciation-style.json') + } + ]; +} + +function main() { + for (const {cssFile, overridesCssFile, outputPath} of getTargets()) { + const json = formatRulesJson(generateRules(cssFile, overridesCssFile)); + fs.writeFileSync(outputPath, json, {encoding: 'utf8'}); + } +} + + +if (require.main === module) { + testMain(main, process.argv.slice(2)); +} + + +module.exports = { + getTargets +}; diff --git a/dev/generate-structured-content-style.js b/dev/generate-structured-content-style.js deleted file mode 100644 index baa1a513..00000000 --- a/dev/generate-structured-content-style.js +++ /dev/null @@ -1,53 +0,0 @@ -/* - * Copyright (C) 2021 Yomichan Authors - * - * This program is free software: you can redistribute it and/or modify - * it under the terms of the GNU General Public License as published by - * the Free Software Foundation, either version 3 of the License, or - * (at your option) any later version. - * - * This program is distributed in the hope that it will be useful, - * but WITHOUT ANY WARRANTY; without even the implied warranty of - * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the - * GNU General Public License for more details. - * - * You should have received a copy of the GNU General Public License - * along with this program. If not, see . - */ - -const fs = require('fs'); -const path = require('path'); -const {testMain} = require('./util'); -const {formatRulesJson, generateRules: generateRulesGeneric} = require('./css-to-json-util'); - -function generateRules() { - const cssFile = path.join(__dirname, '..', 'ext/css/structured-content.css'); - const cssFileOverrides = path.join(__dirname, 'data/structured-content-overrides.css'); - return generateRulesGeneric(cssFile, cssFileOverrides); -} - -function generateRulesJson() { - return formatRulesJson(generateRules()); -} - -function getOutputPath() { - return path.join(__dirname, '..', 'ext/data/structured-content-style.json'); -} - -function main() { - const outputFileName = getOutputPath(); - const json = generateRulesJson(); - fs.writeFileSync(outputFileName, json, {encoding: 'utf8'}); -} - - -if (require.main === module) { - testMain(main, process.argv.slice(2)); -} - - -module.exports = { - generateRules, - generateRulesJson, - getOutputPath -}; diff --git a/ext/data/pronunciation-style.json b/ext/data/pronunciation-style.json new file mode 100644 index 00000000..d8e54c80 --- /dev/null +++ b/ext/data/pronunciation-style.json @@ -0,0 +1,166 @@ +[ + { + "selectors": [".pronunciation-downstep-notation"], + "styles": [ + ["display", "inline"] + ] + }, + { + "selectors": [".pronunciation-text"], + "styles": [ + ["display", "inline"] + ] + }, + { + "selectors": [".pronunciation-mora"], + "styles": [ + ["display", "inline-block"], + ["position", "relative"] + ] + }, + { + "selectors": [".pronunciation-mora-line"], + "styles": [ + ["border-color", "currentColor"] + ] + }, + { + "selectors": [".pronunciation-mora[data-pitch=high]>.pronunciation-mora-line"], + "styles": [ + ["display", "block"], + ["user-select", "none"], + ["pointer-events", "none"], + ["position", "absolute"], + ["top", "0.1em"], + ["left", "0"], + ["right", "0"], + ["height", "0"], + ["border-top-width", "0.1em"], + ["border-top-style", "solid"] + ] + }, + { + "selectors": [".pronunciation-mora[data-pitch=high][data-pitch-next=low]>.pronunciation-mora-line"], + "styles": [ + ["right", "-0.1em"], + ["height", "0.4em"], + ["border-right-width", "0.1em"], + ["border-right-style", "solid"] + ] + }, + { + "selectors": [".pronunciation-mora[data-pitch=high][data-pitch-next=low]"], + "styles": [ + ["padding-right", "0.1em"], + ["margin-right", "0.1em"] + ] + }, + { + "selectors": [".pronunciation-devoice-indicator"], + "styles": [ + ["display", "block"], + ["position", "absolute"], + ["left", "50%"], + ["top", "50%"], + ["width", "1.125em"], + ["height", "1.125em"], + ["border-radius", "50%"], + ["box-sizing", "border-box"], + ["z-index", "1"], + ["transform", "translate(-50%, -50%)"], + ["border", "1.5px dotted #c83c28"] + ] + }, + { + "selectors": [".pronunciation-nasal-indicator"], + "styles": [ + ["display", "block"], + ["position", "absolute"], + ["right", "-0.125em"], + ["top", "0.125em"], + ["width", "0.375em"], + ["height", "0.375em"], + ["border-radius", "50%"], + ["box-sizing", "border-box"], + ["z-index", "1"], + ["border", "1.5px solid #c83c28"] + ] + }, + { + "selectors": [".pronunciation-nasal-diacritic"], + "styles": [ + ["position", "absolute"], + ["width", "0"], + ["height", "0"], + ["opacity", "0"] + ] + }, + { + "selectors": [".pronunciation-character"], + "styles": [ + ["display", "inline"] + ] + }, + { + "selectors": [".pronunciation-character-group"], + "styles": [ + ["display", "inline-block"], + ["position", "relative"] + ] + }, + { + "selectors": [".pronunciation-graph"], + "styles": [ + ["display", "inline-block"], + ["vertical-align", "middle"], + ["height", "1.5em"] + ] + }, + { + "selectors": [ + ".pronunciation-graph-line", + ".pronunciation-graph-line-tail" + ], + "styles": [ + ["fill", "none"], + ["stroke-width", "5"], + ["stroke", "currentColor"] + ] + }, + { + "selectors": [".pronunciation-graph-line-tail"], + "styles": [ + ["stroke-dasharray", "5 5"] + ] + }, + { + "selectors": [".pronunciation-graph-dot"], + "styles": [ + ["stroke-width", "5"], + ["fill", "currentColor"], + ["stroke", "currentColor"] + ] + }, + { + "selectors": [".pronunciation-graph-dot-downstep1"], + "styles": [ + ["fill", "none"], + ["stroke-width", "5"], + ["stroke", "currentColor"] + ] + }, + { + "selectors": [".pronunciation-graph-dot-downstep2"], + "styles": [ + ["fill", "currentColor"] + ] + }, + { + "selectors": [".pronunciation-graph-triangle"], + "styles": [ + ["fill", "none"], + ["stroke-width", "5"], + ["stroke", "currentColor"] + ] + } +] \ No newline at end of file diff --git a/test/test-structured-content-style.js b/test/test-css-json.js similarity index 62% rename from test/test-structured-content-style.js rename to test/test-css-json.js index ed8c24e9..541411d9 100644 --- a/test/test-structured-content-style.js +++ b/test/test-css-json.js @@ -18,15 +18,19 @@ const fs = require('fs'); const assert = require('assert'); const {testMain} = require('../dev/util'); -const {generateRulesJson, getOutputPath} = require('../dev/generate-structured-content-style'); +const {formatRulesJson, generateRules} = require('../dev/css-to-json-util'); +const {getTargets} = require('../dev/generate-css-json'); function main() { - const outputPath = getOutputPath(); - const actual = fs.readFileSync(outputPath, {encoding: 'utf8'}); - const expected = generateRulesJson(); - assert.deepStrictEqual(actual, expected); + for (const {cssFile, overridesCssFile, outputPath} of getTargets()) { + const actual = fs.readFileSync(outputPath, {encoding: 'utf8'}); + const expected = formatRulesJson(generateRules(cssFile, overridesCssFile)); + assert.deepStrictEqual(actual, expected); + } } -if (require.main === module) { testMain(main); } +if (require.main === module) { + testMain(main, process.argv.slice(2)); +}