406 lines
13 KiB
JavaScript
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
|