alex/yomichan
1
Fork 0
Code Releases Activity

CSS JSON styles generalization (#1838)

Browse Source 
* Rename files

* Generalize custom CSS generation and testing

* Add CSS JSON file for display pronunciation
This commit is contained in:
toasted-nutbread 2021-07-17 22:39:25 -04:00 committed by GitHub
parent fafa746a63
commit e1230c7934
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 282 additions and 61 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
dev/css-to-json-util.js
View File

@ -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;

51
dev/data/display-pronunciation-overrides.css Normal file
View File

@ -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 <https://www.gnu.org/licenses/>.
*/
: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;
}

53
dev/generate-css-json.js Normal file
View File

@ -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 <https://www.gnu.org/licenses/>.
*/
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
};

53
dev/generate-structured-content-style.js
View File

@ -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 <https://www.gnu.org/licenses/>.
*/
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
};

166
ext/data/pronunciation-style.json Normal file
View File

@ -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"]
]
}
]

16
test/test-structured-content-style.js → test/test-css-json.js
View File

@ -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));
}