2023-11-09 18:47:11 +01:00

406 lines
13 KiB
JavaScript

import parser from 'postcss-selector-parser';
import fs from 'fs';
import path from 'path';
import postcss from 'postcss';
/* Return a Selectors AST from a Selectors String
/* ========================================================================== */
var getSelectorsAstFromSelectorsString = (selectorString => {
let selectorAST;
parser(selectors => {
selectorAST = selectors;
}).processSync(selectorString);
return selectorAST;
});
var getCustomSelectors = ((root, opts) => {
// initialize custom selectors
const customSelectors = {}; // for each custom selector atrule that is a child of the css root
root.nodes.slice().forEach(node => {
if (isCustomSelector(node)) {
// extract the name and selectors from the params of the custom selector
const [, name, selectors] = node.params.match(customSelectorParamsRegExp); // write the parsed selectors to the custom selector
customSelectors[name] = getSelectorsAstFromSelectorsString(selectors); // conditionally remove the custom selector atrule
if (!Object(opts).preserve) {
node.remove();
}
}
});
return customSelectors;
}); // match the custom selector name
const customSelectorNameRegExp = /^custom-selector$/i; // match the custom selector params
const customSelectorParamsRegExp = /^(:--[A-z][\w-]*)\s+([\W\w]+)\s*$/; // whether the atrule is a custom selector
const isCustomSelector = node => node.type === 'atrule' && customSelectorNameRegExp.test(node.name) && customSelectorParamsRegExp.test(node.params);
// return transformed selectors, replacing custom pseudo selectors with custom selectors
function transformSelectorList(selectorList, customSelectors) {
let index = selectorList.nodes.length - 1;
while (index >= 0) {
const transformedSelectors = transformSelector(selectorList.nodes[index], customSelectors);
if (transformedSelectors.length) {
selectorList.nodes.splice(index, 1, ...transformedSelectors);
}
--index;
}
return selectorList;
} // return custom pseudo selectors replaced with custom selectors
function transformSelector(selector, customSelectors) {
const transpiledSelectors = [];
for (const index in selector.nodes) {
const {
value,
nodes
} = selector.nodes[index];
if (value in customSelectors) {
for (const replacementSelector of customSelectors[value].nodes) {
const selectorClone = selector.clone();
selectorClone.nodes.splice(index, 1, ...replacementSelector.clone().nodes.map(node => {
// use spacing from the current usage
node.spaces = { ...selector.nodes[index].spaces
};
return node;
}));
const retranspiledSelectors = transformSelector(selectorClone, customSelectors);
adjustNodesBySelectorEnds(selectorClone.nodes, Number(index));
if (retranspiledSelectors.length) {
transpiledSelectors.push(...retranspiledSelectors);
} else {
transpiledSelectors.push(selectorClone);
}
}
return transpiledSelectors;
} else if (nodes && nodes.length) {
transformSelectorList(selector.nodes[index], customSelectors);
}
}
return transpiledSelectors;
} // match selectors by difficult-to-separate ends
const withoutSelectorStartMatch = /^(tag|universal)$/;
const withoutSelectorEndMatch = /^(class|id|pseudo|tag|universal)$/;
const isWithoutSelectorStart = node => withoutSelectorStartMatch.test(Object(node).type);
const isWithoutSelectorEnd = node => withoutSelectorEndMatch.test(Object(node).type); // adjust nodes by selector ends (so that .class:--h1 becomes h1.class rather than .classh1)
const adjustNodesBySelectorEnds = (nodes, index) => {
if (index && isWithoutSelectorStart(nodes[index]) && isWithoutSelectorEnd(nodes[index - 1])) {
let safeIndex = index - 1;
while (safeIndex && isWithoutSelectorEnd(nodes[safeIndex])) {
--safeIndex;
}
if (safeIndex < index) {
const node = nodes.splice(index, 1)[0];
nodes.splice(safeIndex, 0, node);
nodes[safeIndex].spaces.before = nodes[safeIndex + 1].spaces.before;
nodes[safeIndex + 1].spaces.before = '';
if (nodes[index]) {
nodes[index].spaces.after = nodes[safeIndex].spaces.after;
nodes[safeIndex].spaces.after = '';
}
}
}
};
var transformRules = ((root, customSelectors, opts) => {
root.walkRules(customPseudoRegExp, rule => {
const selector = parser(selectors => {
transformSelectorList(selectors, customSelectors);
}).processSync(rule.selector);
if (opts.preserve) {
rule.cloneBefore({
selector
});
} else {
rule.selector = selector;
}
});
});
const customPseudoRegExp = /:--[A-z][\w-]*/;
/* Import Custom Selectors from CSS AST
/* ========================================================================== */
function importCustomSelectorsFromCSSAST(root) {
return getCustomSelectors(root);
}
/* Import Custom Selectors from CSS File
/* ========================================================================== */
async function importCustomSelectorsFromCSSFile(from) {
const css = await readFile(path.resolve(from));
const root = postcss.parse(css, {
from: path.resolve(from)
});
return importCustomSelectorsFromCSSAST(root);
}
/* Import Custom Selectors from Object
/* ========================================================================== */
function importCustomSelectorsFromObject(object) {
const customSelectors = Object.assign({}, Object(object).customSelectors || Object(object)['custom-selectors']);
for (const key in customSelectors) {
customSelectors[key] = getSelectorsAstFromSelectorsString(customSelectors[key]);
}
return customSelectors;
}
/* Import Custom Selectors from JSON file
/* ========================================================================== */
async function importCustomSelectorsFromJSONFile(from) {
const object = await readJSON(path.resolve(from));
return importCustomSelectorsFromObject(object);
}
/* Import Custom Selectors from JS file
/* ========================================================================== */
async function importCustomSelectorsFromJSFile(from) {
const object = await import(path.resolve(from));
return importCustomSelectorsFromObject(object);
}
/* Import Custom Selectors from Sources
/* ========================================================================== */
function importCustomSelectorsFromSources(sources) {
return sources.map(source => {
if (source instanceof Promise) {
return source;
} else if (source instanceof Function) {
return source();
} // read the source as an object
const opts = source === Object(source) ? source : {
from: String(source)
}; // skip objects with custom selectors
if (Object(opts).customSelectors || Object(opts)['custom-selectors']) {
return opts;
} // source pathname
const from = String(opts.from || ''); // type of file being read from
const type = (opts.type || path.extname(from).slice(1)).toLowerCase();
return {
type,
from
};
}).reduce(async (customSelectorsPromise, source) => {
const customSelectors = await customSelectorsPromise;
const {
type,
from
} = await source;
if (type === 'ast') {
return Object.assign(customSelectors, importCustomSelectorsFromCSSAST(from));
}
if (type === 'css') {
return Object.assign(customSelectors, await importCustomSelectorsFromCSSFile(from));
}
if (type === 'js') {
return Object.assign(customSelectors, await importCustomSelectorsFromJSFile(from));
}
if (type === 'json') {
return Object.assign(customSelectors, await importCustomSelectorsFromJSONFile(from));
}
return Object.assign(customSelectors, importCustomSelectorsFromObject(await source));
}, Promise.resolve({}));
}
/* Helper utilities
/* ========================================================================== */
const readFile = from => new Promise((resolve, reject) => {
fs.readFile(from, 'utf8', (error, result) => {
if (error) {
reject(error);
} else {
resolve(result);
}
});
});
const readJSON = async from => JSON.parse(await readFile(from));
/* Import Custom Selectors from CSS File
/* ========================================================================== */
async function exportCustomSelectorsToCssFile(to, customSelectors) {
const cssContent = Object.keys(customSelectors).reduce((cssLines, name) => {
cssLines.push(`@custom-selector ${name} ${customSelectors[name]};`);
return cssLines;
}, []).join('\n');
const css = `${cssContent}\n`;
await writeFile(to, css);
}
/* Import Custom Selectors from JSON file
/* ========================================================================== */
async function exportCustomSelectorsToJsonFile(to, customSelectors) {
const jsonContent = JSON.stringify({
'custom-selectors': customSelectors
}, null, ' ');
const json = `${jsonContent}\n`;
await writeFile(to, json);
}
/* Import Custom Selectors from Common JS file
/* ========================================================================== */
async function exportCustomSelectorsToCjsFile(to, customSelectors) {
const jsContents = Object.keys(customSelectors).reduce((jsLines, name) => {
jsLines.push(`\t\t'${escapeForJS(name)}': '${escapeForJS(customSelectors[name])}'`);
return jsLines;
}, []).join(',\n');
const js = `module.exports = {\n\tcustomSelectors: {\n${jsContents}\n\t}\n};\n`;
await writeFile(to, js);
}
/* Import Custom Selectors from Module JS file
/* ========================================================================== */
async function exportCustomSelectorsToMjsFile(to, customSelectors) {
const mjsContents = Object.keys(customSelectors).reduce((mjsLines, name) => {
mjsLines.push(`\t'${escapeForJS(name)}': '${escapeForJS(customSelectors[name])}'`);
return mjsLines;
}, []).join(',\n');
const mjs = `export const customSelectors = {\n${mjsContents}\n};\n`;
await writeFile(to, mjs);
}
/* Export Custom Selectors to Destinations
/* ========================================================================== */
function exportCustomSelectorsToDestinations(customSelectors, destinations) {
return Promise.all(destinations.map(async destination => {
if (destination instanceof Function) {
await destination(defaultCustomSelectorsToJSON(customSelectors));
} else {
// read the destination as an object
const opts = destination === Object(destination) ? destination : {
to: String(destination)
}; // transformer for custom selectors into a JSON-compatible object
const toJSON = opts.toJSON || defaultCustomSelectorsToJSON;
if ('customSelectors' in opts) {
// write directly to an object as customSelectors
opts.customSelectors = toJSON(customSelectors);
} else if ('custom-selectors' in opts) {
// write directly to an object as custom-selectors
opts['custom-selectors'] = toJSON(customSelectors);
} else {
// destination pathname
const to = String(opts.to || ''); // type of file being written to
const type = (opts.type || path.extname(opts.to).slice(1)).toLowerCase(); // transformed custom selectors
const customSelectorsJSON = toJSON(customSelectors);
if (type === 'css') {
await exportCustomSelectorsToCssFile(to, customSelectorsJSON);
}
if (type === 'js') {
await exportCustomSelectorsToCjsFile(to, customSelectorsJSON);
}
if (type === 'json') {
await exportCustomSelectorsToJsonFile(to, customSelectorsJSON);
}
if (type === 'mjs') {
await exportCustomSelectorsToMjsFile(to, customSelectorsJSON);
}
}
}
}));
}
/* Helper utilities
/* ========================================================================== */
const defaultCustomSelectorsToJSON = customSelectors => {
return Object.keys(customSelectors).reduce((customSelectorsJSON, key) => {
customSelectorsJSON[key] = String(customSelectors[key]);
return customSelectorsJSON;
}, {});
};
const writeFile = (to, text) => new Promise((resolve, reject) => {
fs.writeFile(to, text, error => {
if (error) {
reject(error);
} else {
resolve();
}
});
});
const escapeForJS = string => string.replace(/\\([\s\S])|(')/g, '\\$1$2').replace(/\n/g, '\\n').replace(/\r/g, '\\r');
const postcssCustomSelectors = opts => {
// whether to preserve custom selectors and rules using them
const preserve = Boolean(Object(opts).preserve); // sources to import custom selectors from
const importFrom = [].concat(Object(opts).importFrom || []); // destinations to export custom selectors to
const exportTo = [].concat(Object(opts).exportTo || []); // promise any custom selectors are imported
const customSelectorsPromise = importCustomSelectorsFromSources(importFrom);
return {
postcssPlugin: 'postcss-custom-selectors',
async Once(root) {
const customProperties = Object.assign({}, await customSelectorsPromise, getCustomSelectors(root, {
preserve
}));
await exportCustomSelectorsToDestinations(customProperties, exportTo);
transformRules(root, customProperties, {
preserve
});
}
};
};
postcssCustomSelectors.postcss = true;
export default postcssCustomSelectors;
//# sourceMappingURL=index.es.mjs.map