const stylelint = require('stylelint');
const {
showInvisibles,
generateDifferences,
} = require('prettier-linter-helpers');
const {INSERT, DELETE, REPLACE} = generateDifferences;
let prettier;
const ruleName = 'prettier/prettier';
const messages = stylelint.utils.ruleMessages(ruleName, {
insert: (code) => `Insert "${showInvisibles(code)}"`,
delete: (code) => `Delete "${showInvisibles(code)}"`,
replace: (deleteCode, insertCode) =>
`Replace "${showInvisibles(deleteCode)}" with "${showInvisibles(
insertCode
)}"`,
});
module.exports = stylelint.createPlugin(
ruleName,
(expectation, options, context) => {
return (root, result) => {
const validOptions = stylelint.utils.validateOptions(result, ruleName, {
actual: expectation,
});
if (!validOptions) {
return;
}
// Stylelint can handle css-in-js, in which it formats object literals.
// We don't want to run these extracts of JS through prettier
if (root.source.lang === 'object-literal') {
return;
}
const stylelintPrettierOptions = omitStylelintSpecificOptions(options);
if (!prettier) {
// Prettier is expensive to load, so only load it if needed.
prettier = require('prettier');
}
// Default to '' if a filepath was not provided.
// This mimics eslint's behaviour
const filepath = root.source.input.file || '';
const source = root.source.input.css;
const prettierRcOptions =
prettier.resolveConfig && prettier.resolveConfig.sync
? prettier.resolveConfig.sync(filepath, {editorconfig: true})
: null;
//prettier.getFileInfo was added in v1.13
const prettierFileInfo =
prettier.getFileInfo && prettier.getFileInfo.sync
? prettier.getFileInfo.sync(filepath, {
resolveConfig: true,
ignorePath: '.prettierignore',
})
: {ignored: false, inferredParser: null};
// Skip if file is ignored using a .prettierignore file
if (prettierFileInfo.ignored) {
return;
}
const initialOptions = {};
// If no filepath was provided then assume the CSS parser
// This is added to the options first, so that
// prettierRcOptions and stylelintPrettierOptions can still override
// the parser.
if (filepath == '') {
initialOptions.parser = 'css';
}
// Stylelint supports languages that may contain multiple types of style
// languages, thus we can't rely on guessing the parser based off the
// filename.
// In all of the following cases stylelint extracts a part of a file to
// be formatted and there exists a prettier parser for the whole file.
// If you're interested in prettier you'll want a fully formatted file so
// you're about to run prettier over the whole file anyway.
// Therefore running prettier over just the style section is wasteful, so
// skip it.
const parserBlockList = [
'babel',
'flow',
'typescript',
'vue',
'markdown',
'html',
'angular', // .component.html files
'svelte',
];
if (parserBlockList.indexOf(prettierFileInfo.inferredParser) !== -1) {
return;
}
const prettierOptions = Object.assign(
{},
initialOptions,
prettierRcOptions,
stylelintPrettierOptions,
{filepath}
);
try {
prettierSource = prettier.format(source, prettierOptions);
} catch (err) {
if (!(err instanceof SyntaxError)) {
throw err;
}
let message = 'Parsing error: ' + err.message;
// Prettier's message contains a codeframe style preview of the
// invalid code and the line/column at which the error occurred.
// ESLint shows those pieces of information elsewhere already so
// remove them from the message
if (err.codeFrame) {
message = message.replace(`\n${err.codeFrame}`, '');
}
if (err.loc) {
message = message.replace(/ \(\d+:\d+\)$/, '');
}
stylelint.utils.report({
ruleName,
result,
message,
node: root,
index: getIndexFromLoc(source, err.loc.start),
});
return;
}
// Everything is the same. Nothing to do here;
if (source === prettierSource) {
return;
}
// Otherwise let's generate some differences
const differences = generateDifferences(source, prettierSource);
const report = (message, index) => {
return stylelint.utils.report({
ruleName,
result,
message,
node: root,
index,
});
};
if (context.fix) {
// Fixes must be processed in reverse order, as an early delete shall
// change the modification offsets for anything after it
const rawData = differences.reverse().reduce((rawData, difference) => {
let insertText = '';
let deleteText = '';
switch (difference.operation) {
case INSERT:
insertText = difference.insertText;
break;
case DELETE:
deleteText = difference.deleteText;
break;
case REPLACE:
insertText = difference.insertText;
deleteText = difference.deleteText;
break;
}
return (
rawData.substring(0, difference.offset) +
insertText +
rawData.substring(difference.offset + deleteText.length)
);
}, root.source.input.css);
// If root.source.syntax exists then it means stylelint had to use
// postcss-syntax to guess the postcss parser that it should use based
// upon the input filename.
// In that case we want to use the parser that postcss-syntax picked.
// Otherwise use the syntax parser that was provided in the options
const syntax = root.source.syntax || result.opts.syntax;
const newRoot = syntax.parse(rawData);
// For reasons I don't really understand, when the original input does
// not have a trailing newline, newRoot generates a trailing newline but
// it does not get included in the output.
// Cleaning the root raws (to remove any existing whitespace), then
// adding the final new line into the root raws seems to fix this
root.removeAll();
root.cleanRaws();
root.append(newRoot);
// Use the EOL whitespace from the rawData, as it could be \n or \r\n
const trailingWhitespace = rawData.match(/[\s\uFEFF\xA0]+$/);
if (trailingWhitespace) {
root.raws.after = trailingWhitespace[0];
}
return;
}
// Report in the the order the differences appear in the content
differences.forEach((difference) => {
switch (difference.operation) {
case INSERT:
report(messages.insert(difference.insertText), difference.offset);
break;
case DELETE:
report(messages.delete(difference.deleteText), difference.offset);
break;
case REPLACE:
report(
messages.replace(difference.deleteText, difference.insertText),
difference.offset
);
break;
}
});
};
}
);
function omitStylelintSpecificOptions(options) {
const prettierOptions = Object.assign({}, options);
delete prettierOptions.message;
delete prettierOptions.severity;
return prettierOptions;
}
function getIndexFromLoc(source, {line, column}) {
function nthIndex(str, searchValue, n) {
let i = -1;
while (n-- && i++ < str.length) {
i = str.indexOf(searchValue, i);
if (i < 0) {
break;
}
}
return i;
}
if (line === 1) {
return column - 1;
}
return nthIndex(source, '\n', line - 1) + column;
}
module.exports.ruleName = ruleName;
module.exports.messages = messages;