Add generalized css-to-json-util dev module (#1836)
This commit is contained in:
toasted-nutbread
GitHub
parent
3e938f1a1f
commit
74381302c7
169
dev/css-to-json-util.js
Normal file
169
dev/css-to-json-util.js
Normal file
@ -0,0 +1,169 @@
|
|||||||
|
/*
|
||||||
|
* 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 css = require('css');
|
||||||
|
|
||||||
|
function indexOfRule(rules, selectors) {
|
||||||
|
const jj = selectors.length;
|
||||||
|
for (let i = 0, ii = rules.length; i < ii; ++i) {
|
||||||
|
const ruleSelectors = rules[i].selectors;
|
||||||
|
if (ruleSelectors.length !== jj) { continue; }
|
||||||
|
let okay = true;
|
||||||
|
for (let j = 0; j < jj; ++j) {
|
||||||
|
if (selectors[j] !== ruleSelectors[j]) {
|
||||||
|
okay = false;
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
if (okay) { return i; }
|
||||||
|
}
|
||||||
|
return -1;
|
||||||
|
}
|
||||||
|
|
||||||
|
function removeProperty(styles, property, removedProperties) {
|
||||||
|
let removeCount = removedProperties.get(property);
|
||||||
|
if (typeof removeCount !== 'undefined') { return removeCount; }
|
||||||
|
removeCount = 0;
|
||||||
|
for (let i = 0, ii = styles.length; i < ii; ++i) {
|
||||||
|
const key = styles[i][0];
|
||||||
|
if (key !== property) { continue; }
|
||||||
|
styles.splice(i, 1);
|
||||||
|
--i;
|
||||||
|
--ii;
|
||||||
|
++removeCount;
|
||||||
|
}
|
||||||
|
removedProperties.set(property, removeCount);
|
||||||
|
return removeCount;
|
||||||
|
}
|
||||||
|
|
||||||
|
function formatRulesJson(rules) {
|
||||||
|
// Manually format JSON, for improved compactness
|
||||||
|
// return JSON.stringify(rules, null, 4);
|
||||||
|
const indent1 = ' ';
|
||||||
|
const indent2 = indent1.repeat(2);
|
||||||
|
const indent3 = indent1.repeat(3);
|
||||||
|
let result = '';
|
||||||
|
result += '[';
|
||||||
|
let index1 = 0;
|
||||||
|
for (const {selectors, styles} of rules) {
|
||||||
|
if (index1 > 0) { result += ','; }
|
||||||
|
result += `\n${indent1}{\n${indent2}"selectors": `;
|
||||||
|
if (selectors.length === 1) {
|
||||||
|
result += `[${JSON.stringify(selectors[0], null, 4)}]`;
|
||||||
|
} else {
|
||||||
|
result += JSON.stringify(selectors, null, 4).replace(/\n/g, '\n' + indent2);
|
||||||
|
}
|
||||||
|
result += `,\n${indent2}"styles": [`;
|
||||||
|
let index2 = 0;
|
||||||
|
for (const [key, value] of styles) {
|
||||||
|
if (index2 > 0) { result += ','; }
|
||||||
|
result += `\n${indent3}[${JSON.stringify(key)}, ${JSON.stringify(value)}]`;
|
||||||
|
++index2;
|
||||||
|
}
|
||||||
|
if (index2 > 0) { result += `\n${indent2}`; }
|
||||||
|
result += `]\n${indent1}}`;
|
||||||
|
++index1;
|
||||||
|
}
|
||||||
|
if (index1 > 0) { result += '\n'; }
|
||||||
|
result += ']';
|
||||||
|
return result;
|
||||||
|
}
|
||||||
|
|
||||||
|
function generateRules(cssFile, cssFileOverrides) {
|
||||||
|
const content1 = fs.readFileSync(cssFile, {encoding: 'utf8'});
|
||||||
|
const content2 = fs.readFileSync(cssFileOverrides, {encoding: 'utf8'});
|
||||||
|
const stylesheet1 = css.parse(content1, {}).stylesheet;
|
||||||
|
const stylesheet2 = css.parse(content2, {}).stylesheet;
|
||||||
|
|
||||||
|
const removePropertyPattern = /^remove-property\s+([a-zA-Z0-9-]+)$/;
|
||||||
|
const removeRulePattern = /^remove-rule$/;
|
||||||
|
|
||||||
|
const rules = [];
|
||||||
|
|
||||||
|
// Default stylesheet
|
||||||
|
for (const rule of stylesheet1.rules) {
|
||||||
|
if (rule.type !== 'rule') { continue; }
|
||||||
|
const {selectors, declarations} = rule;
|
||||||
|
const styles = [];
|
||||||
|
for (const declaration of declarations) {
|
||||||
|
if (declaration.type !== 'declaration') { console.log(declaration); continue; }
|
||||||
|
const {property, value} = declaration;
|
||||||
|
styles.push([property, value]);
|
||||||
|
}
|
||||||
|
if (styles.length > 0) {
|
||||||
|
rules.push({selectors, styles});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Overrides
|
||||||
|
for (const rule of stylesheet2.rules) {
|
||||||
|
if (rule.type !== 'rule') { continue; }
|
||||||
|
const {selectors, declarations} = rule;
|
||||||
|
const removedProperties = new Map();
|
||||||
|
for (const declaration of declarations) {
|
||||||
|
switch (declaration.type) {
|
||||||
|
case 'declaration':
|
||||||
|
{
|
||||||
|
const index = indexOfRule(rules, selectors);
|
||||||
|
let entry;
|
||||||
|
if (index >= 0) {
|
||||||
|
entry = rules[index];
|
||||||
|
} else {
|
||||||
|
entry = {selectors, styles: []};
|
||||||
|
rules.push(entry);
|
||||||
|
}
|
||||||
|
const {property, value} = declaration;
|
||||||
|
removeProperty(entry.styles, property, removedProperties);
|
||||||
|
entry.styles.push([property, value]);
|
||||||
|
}
|
||||||
|
break;
|
||||||
|
case 'comment':
|
||||||
|
{
|
||||||
|
const index = indexOfRule(rules, selectors);
|
||||||
|
if (index < 0) { throw new Error('Could not find rule with matching selectors'); }
|
||||||
|
const comment = declaration.comment.trim();
|
||||||
|
let m;
|
||||||
|
if ((m = removePropertyPattern.exec(comment)) !== null) {
|
||||||
|
const property = m[1];
|
||||||
|
const removeCount = removeProperty(rules[index].styles, property, removedProperties);
|
||||||
|
if (removeCount === 0) { throw new Error(`Property removal is unnecessary; ${property} does not exist`); }
|
||||||
|
} else if ((m = removeRulePattern.exec(comment)) !== null) {
|
||||||
|
rules.splice(index, 1);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Remove empty
|
||||||
|
for (let i = 0, ii = rules.length; i < ii; ++i) {
|
||||||
|
if (rules[i].styles.length > 0) { continue; }
|
||||||
|
rules.splice(i, 1);
|
||||||
|
--i;
|
||||||
|
--ii;
|
||||||
|
}
|
||||||
|
|
||||||
|
return rules;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
module.exports = {
|
||||||
|
formatRulesJson,
|
||||||
|
generateRules
|
||||||
|
};
|
||||||
@ -17,151 +17,13 @@
|
|||||||
|
|
||||||
const fs = require('fs');
|
const fs = require('fs');
|
||||||
const path = require('path');
|
const path = require('path');
|
||||||
const css = require('css');
|
|
||||||
const {testMain} = require('./util');
|
const {testMain} = require('./util');
|
||||||
|
const {formatRulesJson, generateRules: generateRulesGeneric} = require('./css-to-json-util');
|
||||||
function indexOfRule(rules, selectors) {
|
|
||||||
const jj = selectors.length;
|
|
||||||
for (let i = 0, ii = rules.length; i < ii; ++i) {
|
|
||||||
const ruleSelectors = rules[i].selectors;
|
|
||||||
if (ruleSelectors.length !== jj) { continue; }
|
|
||||||
let okay = true;
|
|
||||||
for (let j = 0; j < jj; ++j) {
|
|
||||||
if (selectors[j] !== ruleSelectors[j]) {
|
|
||||||
okay = false;
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
if (okay) { return i; }
|
|
||||||
}
|
|
||||||
return -1;
|
|
||||||
}
|
|
||||||
|
|
||||||
function removeProperty(styles, property, removedProperties) {
|
|
||||||
let removeCount = removedProperties.get(property);
|
|
||||||
if (typeof removeCount !== 'undefined') { return removeCount; }
|
|
||||||
removeCount = 0;
|
|
||||||
for (let i = 0, ii = styles.length; i < ii; ++i) {
|
|
||||||
const key = styles[i][0];
|
|
||||||
if (key !== property) { continue; }
|
|
||||||
styles.splice(i, 1);
|
|
||||||
--i;
|
|
||||||
--ii;
|
|
||||||
++removeCount;
|
|
||||||
}
|
|
||||||
removedProperties.set(property, removeCount);
|
|
||||||
return removeCount;
|
|
||||||
}
|
|
||||||
|
|
||||||
function formatRulesJson(rules) {
|
|
||||||
// Manually format JSON, for improved compactness
|
|
||||||
// return JSON.stringify(rules, null, 4);
|
|
||||||
const indent1 = ' ';
|
|
||||||
const indent2 = indent1.repeat(2);
|
|
||||||
const indent3 = indent1.repeat(3);
|
|
||||||
let result = '';
|
|
||||||
result += '[';
|
|
||||||
let index1 = 0;
|
|
||||||
for (const {selectors, styles} of rules) {
|
|
||||||
if (index1 > 0) { result += ','; }
|
|
||||||
result += `\n${indent1}{\n${indent2}"selectors": `;
|
|
||||||
if (selectors.length === 1) {
|
|
||||||
result += `[${JSON.stringify(selectors[0], null, 4)}]`;
|
|
||||||
} else {
|
|
||||||
result += JSON.stringify(selectors, null, 4).replace(/\n/g, '\n' + indent2);
|
|
||||||
}
|
|
||||||
result += `,\n${indent2}"styles": [`;
|
|
||||||
let index2 = 0;
|
|
||||||
for (const [key, value] of styles) {
|
|
||||||
if (index2 > 0) { result += ','; }
|
|
||||||
result += `\n${indent3}[${JSON.stringify(key)}, ${JSON.stringify(value)}]`;
|
|
||||||
++index2;
|
|
||||||
}
|
|
||||||
if (index2 > 0) { result += `\n${indent2}`; }
|
|
||||||
result += `]\n${indent1}}`;
|
|
||||||
++index1;
|
|
||||||
}
|
|
||||||
if (index1 > 0) { result += '\n'; }
|
|
||||||
result += ']';
|
|
||||||
return result;
|
|
||||||
}
|
|
||||||
|
|
||||||
function generateRules() {
|
function generateRules() {
|
||||||
const content1 = fs.readFileSync(path.join(__dirname, '..', 'ext/css/structured-content.css'), {encoding: 'utf8'});
|
const cssFile = path.join(__dirname, '..', 'ext/css/structured-content.css');
|
||||||
const content2 = fs.readFileSync(path.join(__dirname, 'data/structured-content-overrides.css'), {encoding: 'utf8'});
|
const cssFileOverrides = path.join(__dirname, 'data/structured-content-overrides.css');
|
||||||
const stylesheet1 = css.parse(content1, {}).stylesheet;
|
return generateRulesGeneric(cssFile, cssFileOverrides);
|
||||||
const stylesheet2 = css.parse(content2, {}).stylesheet;
|
|
||||||
|
|
||||||
const removePropertyPattern = /^remove-property\s+([a-zA-Z0-9-]+)$/;
|
|
||||||
const removeRulePattern = /^remove-rule$/;
|
|
||||||
|
|
||||||
const rules = [];
|
|
||||||
|
|
||||||
// Default stylesheet
|
|
||||||
for (const rule of stylesheet1.rules) {
|
|
||||||
if (rule.type !== 'rule') { continue; }
|
|
||||||
const {selectors, declarations} = rule;
|
|
||||||
const styles = [];
|
|
||||||
for (const declaration of declarations) {
|
|
||||||
if (declaration.type !== 'declaration') { console.log(declaration); continue; }
|
|
||||||
const {property, value} = declaration;
|
|
||||||
styles.push([property, value]);
|
|
||||||
}
|
|
||||||
if (styles.length > 0) {
|
|
||||||
rules.push({selectors, styles});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Overrides
|
|
||||||
for (const rule of stylesheet2.rules) {
|
|
||||||
if (rule.type !== 'rule') { continue; }
|
|
||||||
const {selectors, declarations} = rule;
|
|
||||||
const removedProperties = new Map();
|
|
||||||
for (const declaration of declarations) {
|
|
||||||
switch (declaration.type) {
|
|
||||||
case 'declaration':
|
|
||||||
{
|
|
||||||
const index = indexOfRule(rules, selectors);
|
|
||||||
let entry;
|
|
||||||
if (index >= 0) {
|
|
||||||
entry = rules[index];
|
|
||||||
} else {
|
|
||||||
entry = {selectors, styles: []};
|
|
||||||
rules.push(entry);
|
|
||||||
}
|
|
||||||
const {property, value} = declaration;
|
|
||||||
removeProperty(entry.styles, property, removedProperties);
|
|
||||||
entry.styles.push([property, value]);
|
|
||||||
}
|
|
||||||
break;
|
|
||||||
case 'comment':
|
|
||||||
{
|
|
||||||
const index = indexOfRule(rules, selectors);
|
|
||||||
if (index < 0) { throw new Error('Could not find rule with matching selectors'); }
|
|
||||||
const comment = declaration.comment.trim();
|
|
||||||
let m;
|
|
||||||
if ((m = removePropertyPattern.exec(comment)) !== null) {
|
|
||||||
const property = m[1];
|
|
||||||
const removeCount = removeProperty(rules[index].styles, property, removedProperties);
|
|
||||||
if (removeCount === 0) { throw new Error(`Property removal is unnecessary; ${property} does not exist`); }
|
|
||||||
} else if ((m = removeRulePattern.exec(comment)) !== null) {
|
|
||||||
rules.splice(index, 1);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Remove empty
|
|
||||||
for (let i = 0, ii = rules.length; i < ii; ++i) {
|
|
||||||
if (rules[i].styles.length > 0) { continue; }
|
|
||||||
rules.splice(i, 1);
|
|
||||||
--i;
|
|
||||||
--ii;
|
|
||||||
}
|
|
||||||
|
|
||||||
return rules;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
function generateRulesJson() {
|
function generateRulesJson() {
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user