From abdaea38ef4b2260ecc37c37796422a475d9b878 Mon Sep 17 00:00:00 2001 From: jdolle Date: Wed, 12 Apr 2017 16:30:38 -0700 Subject: [PATCH 1/2] Add 'noSemicolons' option; Fix minor linting errors --- README.md | 3 +++ src/cssModuleToInterface.js | 18 +++++++++--------- src/index.js | 9 ++++++--- test/webpack.config.babel.js | 20 ++++++++++---------- 4 files changed, 28 insertions(+), 22 deletions(-) diff --git a/README.md b/README.md index 4a486f1..6c10f5a 100644 --- a/README.md +++ b/README.md @@ -65,6 +65,9 @@ e.g.: { test: /\.css$/, loader: 'typings-for-css-modules?silent' } ``` +### `noSemicolons`-option +Prevents outputted lines from having semicolons at the end. This is useful when you want to enforce no semicolons with a linter. The default is to add semicolons. + ## Usage Keep your `webpack.config` as is just instead of using `css-loader` use `typings-for-css-modules-loader` diff --git a/src/cssModuleToInterface.js b/src/cssModuleToInterface.js index 5c8ccb2..e70e74b 100644 --- a/src/cssModuleToInterface.js +++ b/src/cssModuleToInterface.js @@ -6,15 +6,15 @@ const filenameToInterfaceName = (filename) => { .replace(/\W+(\w)/g, (_, c) => c.toUpperCase()); }; -const cssModuleToTypescriptInterfaceProperties = (cssModuleKeys, indent = ' ') => { +const cssModuleToTypescriptInterfaceProperties = (cssModuleKeys, indent = ' ', useSemicolons = true) => { return cssModuleKeys - .map((key) => `${indent}'${key}': string;`) + .map((key) => `${indent}'${key}': string${useSemicolons ? ';' : ''}`) .join('\n'); }; -const cssModuleToNamedExports = (cssModuleKeys) => { +const cssModuleToNamedExports = (cssModuleKeys, useSemicolons) => { return cssModuleKeys - .map((key) => `export const ${key}: string;`) + .map((key) => `export const ${key}: string${useSemicolons ? ';' : ''}`) .join('\n'); }; @@ -34,20 +34,20 @@ export const filenameToTypingsFilename = (filename) => { return path.join(dirName, `${baseName}.d.ts`); }; -export const generateNamedExports = (cssModuleKeys) => { - const namedExports = cssModuleToNamedExports(cssModuleKeys); +export const generateNamedExports = (cssModuleKeys, useSemicolons = true) => { + const namedExports = cssModuleToNamedExports(cssModuleKeys, useSemicolons); return (`${namedExports} `); }; -export const generateGenericExportInterface = (cssModuleKeys, filename, indent) => { +export const generateGenericExportInterface = (cssModuleKeys, filename, indent, useSemicolons = true) => { const interfaceName = filenameToInterfaceName(filename); - const interfaceProperties = cssModuleToTypescriptInterfaceProperties(cssModuleKeys, indent); + const interfaceProperties = cssModuleToTypescriptInterfaceProperties(cssModuleKeys, indent, useSemicolons); return ( `export interface ${interfaceName} { ${interfaceProperties} } -export const locals: ${interfaceName}; +export const locals: ${interfaceName}${useSemicolons ? ';' : ''} `); }; diff --git a/src/index.js b/src/index.js index 3ca5536..39240d0 100644 --- a/src/index.js +++ b/src/index.js @@ -32,6 +32,9 @@ module.exports = function(input) { return delegateToCssLoader(this, input, callback); } + // default to using semiColons + query.noSemicolons = query.noSemicolons? true : false; + // mock async step 2 - offer css loader a "fake" callback this.async = () => (err, content) => { if (err) { @@ -44,7 +47,7 @@ module.exports = function(input) { let match; const cssModuleKeys = []; - while (match = keyRegex.exec(content)) { + while ((match = keyRegex.exec(content))) { if (cssModuleKeys.indexOf(match[1]) < 0) { cssModuleKeys.push(match[1]); } @@ -52,7 +55,7 @@ module.exports = function(input) { let cssModuleDefinition; if (!query.namedExport) { - cssModuleDefinition = generateGenericExportInterface(cssModuleKeys, filename); + cssModuleDefinition = generateGenericExportInterface(cssModuleKeys, filename, ' ', query.noSemicolons); } else { const [cleanedDefinitions, skippedDefinitions,] = filterNonWordClasses(cssModuleKeys); if (skippedDefinitions.length > 0 && !query.camelCase) { @@ -61,7 +64,7 @@ The following classes will not be available as named exports: ${skippedDefinitions.map(sd => ` - "${sd}"`).join('\n').red} `.yellow); } - cssModuleDefinition = generateNamedExports(cleanedDefinitions); + cssModuleDefinition = generateNamedExports(cleanedDefinitions, query.noSemicolons); } persist.writeToFileIfChanged(cssModuleInterfaceFilename, cssModuleDefinition); // mock async step 3 - make `async` return the actual callback again before calling the 'real' css-loader diff --git a/test/webpack.config.babel.js b/test/webpack.config.babel.js index d69e970..de44de4 100644 --- a/test/webpack.config.babel.js +++ b/test/webpack.config.babel.js @@ -2,17 +2,17 @@ module.exports = { entry: './test/entry.ts', output: { path: __dirname, - filename: 'bundle.js' + filename: 'bundle.js', }, module: { loaders: [ - { test: /\.ts$/, loaders: ['babel', 'ts'] }, - { test: /example\.css$/, loader: '../src/index.js?modules' }, - { test: /example-camelcase\.css$/, loader: '../src/index.js?modules&camelCase' }, - { test: /example-namedexport\.css$/, loader: '../src/index.js?modules&namedExport' }, - { test: /example-camelcase-namedexport\.css$/, loader: '../src/index.js?modules&camelCase&namedExport' }, - { test: /example-no-css-modules\.css$/, loader: '../src/index.js' }, - { test: /example-compose\.css$/, loader: '../src/index.js?modules&camelCase&namedExport' } - ] - } + { test: /\.ts$/, loaders: ['babel', 'ts',], }, + { test: /example\.css$/, loader: '../src/index.js?modules', }, + { test: /example-camelcase\.css$/, loader: '../src/index.js?modules&camelCase', }, + { test: /example-namedexport\.css$/, loader: '../src/index.js?modules&namedExport', }, + { test: /example-camelcase-namedexport\.css$/, loader: '../src/index.js?modules&camelCase&namedExport', }, + { test: /example-no-css-modules\.css$/, loader: '../src/index.js', }, + { test: /example-compose\.css$/, loader: '../src/index.js?modules&camelCase&namedExport', }, + ], + }, }; From 48d6a155fd8dea4b55a37f4d56ba80ba9ea0ddbc Mon Sep 17 00:00:00 2001 From: jdolle Date: Wed, 12 Apr 2017 16:33:19 -0700 Subject: [PATCH 2/2] Update version --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index b71210c..df6a7c8 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "typings-for-css-modules-loader", - "version": "1.5.0", + "version": "1.6.0", "description": "Drop-in replacement for css-loader to generate typings for your CSS-Modules on the fly in webpack", "main": "lib/index.js", "scripts": {