Skip to content

fix(verify): Show diff when ‘verify’ mode fails #3

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Jan 8, 2019
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
24 changes: 17 additions & 7 deletions index.js
Original file line number Diff line number Diff line change
@@ -1,19 +1,23 @@
const fs = require('fs');
const path = require('path');
const loaderUtils = require('loader-utils');
const LineDiff = require('line-diff');

const bannerMessage =
'// This file is automatically generated.\n// Please do not change this file!';

const getNoDeclarationFileError = cssModuleInterfaceFilename =>
const getNoDeclarationFileError = ({ filename }) =>
new Error(
`Generated type declaration does not exist. Run webpack and commit the type declaration for '${cssModuleInterfaceFilename}'`
`Generated type declaration does not exist. Run webpack and commit the type declaration for '${filename}'`
);

const getTypeMismatchError = cssModuleInterfaceFilename =>
new Error(
`Generated type declaration file is outdated. Run webpack and commit the updated type declaration for '${cssModuleInterfaceFilename}'`
const getTypeMismatchError = ({ filename, expected, actual }) => {
const diff = new LineDiff(actual, expected).toString();

return new Error(
`Generated type declaration file is outdated. Run webpack and commit the updated type declaration for '${filename}'\n\n${diff}`
);
}

const cssModuleToNamedExports = cssModuleKeys => {
return cssModuleKeys
Expand Down Expand Up @@ -63,13 +67,19 @@ module.exports = function(content, ...rest) {
if (err) {
const error =
err.code === 'ENOENT'
? getNoDeclarationFileError(cssModuleInterfaceFilename)
? getNoDeclarationFileError({
filename: cssModuleInterfaceFilename
})
: err;
return callback(error);
}

if (cssModuleDefinition !== fileContents) {
return callback(getTypeMismatchError(cssModuleInterfaceFilename));
return callback(getTypeMismatchError({
filename: cssModuleInterfaceFilename,
expected: cssModuleDefinition,
actual: fileContents
}));
}

return callback(null, content, ...rest);
Expand Down
3 changes: 3 additions & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,9 @@
}
},
"homepage": "https://github.com/seek-oss/css-modules-typescript-loader#readme",
"dependencies": {
"line-diff": "^2.0.1"
},
"devDependencies": {
"@commitlint/cli": "^7.2.1",
"commitizen": "^3.0.2",
Expand Down
4 changes: 4 additions & 0 deletions test/getErrorMessage.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
module.exports = error => error
.split(process.cwd())
.join('')
.match(/(Error: .*?)\s{4}at /s)[1];
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`Can error on invalid declaration 1`] = `
"Error: Generated type declaration file is outdated. Run webpack and commit the updated type declaration for '/test/verify-invalid-declaration/index.css.d.ts'

// This file is automatically generated.
// Please do not change this file!
export const classInBothFiles: string;
- export const classInTypeScriptFile: string;
+ export const classInCssFile: string;


"
`;
4 changes: 2 additions & 2 deletions test/verify-invalid-declaration/index.css
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
.someClass {
.classInBothFiles {
position: relative;
}

.otherClass {
.classInCssFile {
display: block;
}
4 changes: 2 additions & 2 deletions test/verify-invalid-declaration/index.css.d.ts
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
// This file is automatically generated.
// Please do not change this file!
export const someClass: string;
export const differentClass: string;
export const classInBothFiles: string;
export const classInTypeScriptFile: string;
Original file line number Diff line number Diff line change
@@ -1,11 +1,14 @@
const compiler = require('../compiler.js');
const getErrorMessage = require('../getErrorMessage');

test('Can error on invalid declaration', async () => {
await expect(
compiler(require.resolve('./index.js'), {
expect.assertions(1);

try {
await compiler(require.resolve('./index.js'), {
mode: 'verify'
})
).rejects.toMatchObject({
failed: true
});
});
} catch (err) {
expect(getErrorMessage(err.errors[0])).toMatchSnapshot();
}
});
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`Can error on invalid declaration 1`] = `
"Error: Generated type declaration does not exist. Run webpack and commit the type declaration for '/test/verify-missing-declaration/index.css.d.ts'
"
`;
Original file line number Diff line number Diff line change
@@ -1,11 +1,14 @@
const compiler = require('../compiler.js');
const getErrorMessage = require('../getErrorMessage');

test('Can error on invalid declaration', async () => {
await expect(
compiler(require.resolve('./index.js'), {
expect.assertions(1);

try {
await compiler(require.resolve('./index.js'), {
mode: 'verify'
})
).rejects.toMatchObject({
failed: true
});
});
} catch (err) {
expect(getErrorMessage(err.errors[0])).toMatchSnapshot();
}
});