Merge pull request #4 from Jimdo/add-named-exports-option

Add named exports option

Author: timse

.gitignore

@@ -1,4 +1,4 @@
 node_modules
 lib
 bundle.js
-example.css.d.ts
+example*.css.d.ts

README.md

@@ -6,6 +6,55 @@ Webpack loader that works as a css-loader drop-in replacement to generate TypeSc
 
 Install via npm `npm install --save-dev typings-for-css-modules-loader`
 
+## Options
+
+Just like any other loader you can specify options e.g. as query-params
+
+### css-loader options
+Any option that your installed version of css-loader supports can be used and will be passed to it.
+
+### `namedExport`-option
+As your fellow css-developer may tend to use characters like dashes(`-`) that are not valid characters for a typescript variable the default behaviour for this loader is to export an interface as the default export that contains the classnames as properties.
+e.g.:
+```ts
+export interface IExampleCss {
+  'foo': string;
+  'bar-baz': string;
+}
+declare const styles: IExampleCss;
+
+export default styles;
+```
+
+A cleaner way is to expose all classes as named exports, this can be done if you enable the `namedExport`-option.
+e.g.
+```js
+  { test: /\.css$/, loader: 'typings-for-css-modules?modules&namedExport' }
+```
+
+As mentioned above, this requires classnames to only contain valid typescript characters, thus filtering out all classnames that do not match /^\w+$/i. (feel free to improve that regexp)
+In order to make sure that even classnames with non-legal characters are used it is highly recommended to use the `camelCase`-option as well, that - once passed to the css-loader - makes sure all classnames are transformed to valid variables.
+with:
+```js
+  { test: /\.css$/, loader: 'typings-for-css-modules?modules&namedExport&camelCase' }
+```
+using the following css:
+```css
+.foo {
+  color: white;
+}
+
+.bar-baz {
+  color: green;
+}
+```
+
+will generate the following typings file:
+```ts
+export const foo: string;
+export const barBaz: string;
+```
+
 ## Usage
 
 Keep your `webpack.config` as is just instead of using `css-loader` use `typings-for-css-modules-loader`
@@ -29,8 +78,8 @@ webpackConfig.module.loaders: [
 
 ## Example
 
-Imagine you have a file `~/my-project/src/component/MyComponent/component.scss` in your project with the following content:
-```
+Imagine you have a file `~/my-project/src/component/MyComponent/myComponent.scss` in your project with the following content:
+```css
 .some-class {
   // some styles
   &.someOtherClass {
@@ -42,8 +91,8 @@ Imagine you have a file `~/my-project/src/component/MyComponent/component.scss`
 }
 ```
 
-Adding the `typings-for-css-modules-loader` will generate a file `~/my-project/src/component/MyComponent/mycomponent.scss.d.ts` that has the following content:
-```
+Adding the `typings-for-css-modules-loader` will generate a file `~/my-project/src/component/MyComponent/myComponent.scss.d.ts` that has the following content:
+```ts
 export interface IMyComponentScss {
   'some-class': string;
   'someOtherClass': string;
@@ -54,6 +103,14 @@ declare const styles: IMyComponentScss;
 export default styles;
 ```
 
+### using `namedExport` with the `camelCase`-option
+Using the `namedExport` as well as the `camelCase` options the generated file will look as follow:
+```ts
+export const someClass: string;
+export const someOtherClass: string;
+export const someClassSayWhat: string;
+```
+
 ### Example in Visual Studio Code
 ![typed-css-modules](https://cloud.githubusercontent.com/assets/749171/16340497/c1cb6888-3a28-11e6-919b-f2f51a282bba.gif)
 

package.json

@@ -6,8 +6,9 @@
   "scripts": {
     "build": "babel src -d lib",
     "prepublish": "npm run build",
-    "pretest": "rm -f ./test/example.css.d.ts && touch ./test/example.css.d.ts",
-    "test:run": "babel-node ./node_modules/webpack/bin/webpack --config ./test/webpack.config.babel.js && diff ./test/example.css.d.ts ./test/expected-example.css.d.ts",
+    "pretest": "rm -f ./test/example*.css.d.ts",
+    "test:diff": "(cd test; set -e; for f in example*css.d.ts; do diff $f expected-$f; done;)",
+    "test:run": "babel-node ./node_modules/webpack/bin/webpack --config ./test/webpack.config.babel.js && npm run test:diff",
     "test": "npm run test:run > /dev/null 2>&1 && npm run test:run"
   },
   "author": "Tim Sebastian <[email protected]>",
@@ -25,6 +26,7 @@
     "css modules webpack typings"
   ],
   "dependencies": {
+    "colour": "0.7.1",
     "css-loader": ">=0.23.1",
     "graceful-fs": "4.1.4",
     "loader-utils": "0.2.16"

src/cssModuleToInterface.js

@@ -6,21 +6,43 @@ const filenameToInterfaceName = (filename) => {
     .replace(/\W+(\w)/g, (_, c) => c.toUpperCase());
 };
 
-const cssModuleToTypescriptInterfaceProperties = (cssModuleObject, indent = '  ') => {
-  return Object.keys(cssModuleObject)
+const cssModuleToTypescriptInterfaceProperties = (cssModuleKeys, indent = '  ') => {
+  return cssModuleKeys
     .map((key) => `${indent}'${key}': string;`)
     .join('\n');
 };
 
+const cssModuleToNamedExports = (cssModuleKeys) => {
+  return cssModuleKeys
+    .map((key) => `export const ${key}: string;`)
+    .join('\n');
+};
+
+const allWordsRegexp = /^\w+$/i;
+export const filterNonWordClasses = (cssModuleKeys) => {
+  const filteredClassNames = cssModuleKeys.filter(classname => allWordsRegexp.test(classname));
+  if (filteredClassNames.length === cssModuleKeys.length) {
+    return [filteredClassNames, []];
+  }
+  const nonWordClassNames = cssModuleKeys.filter(classname => !allWordsRegexp.test(classname));
+  return [filteredClassNames, nonWordClassNames];
+}
+
 export const filenameToTypingsFilename = (filename) => {
   const dirName = path.dirname(filename);
   const baseName = path.basename(filename);
   return path.join(dirName, `${baseName}.d.ts`);
 };
 
-export const generateInterface = (cssModuleObject, filename, indent) => {
+export const generateNamedExports = (cssModuleKeys) => {
+  const namedExports = cssModuleToNamedExports(cssModuleKeys);
+  return (`${namedExports}
+`);
+};
+
+export const generateGenericExportInterface = (cssModuleKeys, filename, indent) => {
   const interfaceName = filenameToInterfaceName(filename);
-  const interfaceProperties = cssModuleToTypescriptInterfaceProperties(cssModuleObject, indent);
+  const interfaceProperties = cssModuleToTypescriptInterfaceProperties(cssModuleKeys, indent);
   return (
 `export interface ${interfaceName} {
 ${interfaceProperties}

src/index.js

@@ -1,8 +1,12 @@
 import cssLoader from 'css-loader';
 import cssLocalsLoader from 'css-loader/locals';
 import loaderUtils from 'loader-utils';
+import 'colour';
+
 import {
-  generateInterface,
+  filterNonWordClasses,
+  generateNamedExports,
+  generateGenericExportInterface,
   filenameToTypingsFilename,
 } from './cssModuleToInterface';
 import * as persist from './persist';
@@ -21,18 +25,31 @@ module.exports = function(input) {
   const query = loaderUtils.parseQuery(this.query);
   const moduleMode = query.modules || query.module;
   if (!moduleMode) {
-    console.warn('Typings for CSS-Modules: option `modules` is not active - skipping extraction work...');
+    console.warn('Typings for CSS-Modules: option `modules` is not active - skipping extraction work...').red;
     return delegateToCssLoader(ctx, input, callback);
   }
 
   // mock async step 2 - offer css loader a "fake" callback
   this.async = () => (err, content) => {
-    const cssmodules = this.exec(content, this.resource);
-    const requestedResource = this.resourcePath;
+    const filename = this.resourcePath;
+    const cssModuleInterfaceFilename = filenameToTypingsFilename(filename);
+
+    let cssModuleKeys = Object.keys(this.exec(content, this.resource));
 
-    const cssModuleInterfaceFilename = filenameToTypingsFilename(requestedResource);
-    const cssModuleInterface = generateInterface(cssmodules, requestedResource);
-    persist.writeToFileIfChanged(cssModuleInterfaceFilename, cssModuleInterface);
+    let cssModuleDefinition;
+    if (!query.namedExport) {
+      cssModuleDefinition = generateGenericExportInterface(cssModuleKeys, filename);
+    } else {
+      const [cleanedDefinitions, skippedDefinitions] = filterNonWordClasses(cssModuleKeys);
+      if (skippedDefinitions.length > 0 && !query.camelCase) {
+        console.warn(`Typings for CSS-Modules: option 'namedExport' was set but 'camelCase' for the css-loader not.
+The following classes will not be available as named exports:
+${skippedDefinitions.map(sd => ` - "${sd}"`).join('\n').red}
+`.yellow);
+      }
+      cssModuleDefinition = generateNamedExports(cleanedDefinitions);
+    }
+    persist.writeToFileIfChanged(cssModuleInterfaceFilename, cssModuleDefinition);
     // mock async step 3 - make `async` return the actual callback again before calling the 'real' css-loader
     delegateToCssLoader(this, input, callback);
   };

test/entry.ts

@@ -1,4 +1,16 @@
-import styles from './example.css';
+import stylesBase from './example.css';
+import stylesCamelCase from './example-camelcase.css';
+import * as stylesNamedExport from './example-namedexport.css';
+import * as stylesCamelCasedNamedExport from './example-camelcase-namedexport.css';
 
-const foo = styles.foo;
-const barBaz = styles['bar-baz'];
+const foo = stylesBase.foo;
+const barBaz = stylesBase['bar-baz'];
+
+const fooCamelCase = stylesCamelCase.foo;
+const barBazCamelCase = stylesCamelCase.barBaz;
+const barBazDashedCamelCase = stylesCamelCase['bar-baz'];
+
+const fooNamedExport = stylesNamedExport.foo;
+
+const fooCamelCaseNamedExport = stylesCamelCasedNamedExport.foo;
+const barBazCamelCaseNamedExport = stylesCamelCasedNamedExport.barBaz;

test/example-camelcase-namedexport.css

@@ -0,0 +1,7 @@
+.foo {
+  color: white;
+}
+
+.bar-baz {
+  color: green;
+}

test/example-camelcase.css

@@ -0,0 +1,7 @@
+.foo {
+  color: white;
+}
+
+.bar-baz {
+  color: green;
+}

test/example-namedexport.css

@@ -0,0 +1,7 @@
+.foo {
+  color: white;
+}
+
+.bar-baz {
+  color: green;
+}

test/expected-example-camelcase-namedexport.css.d.ts

@@ -0,0 +1,2 @@
+export const foo: string;
+export const barBaz: string;

test/expected-example-camelcase.css.d.ts

@@ -0,0 +1,8 @@
+export interface IExampleCamelcaseCss {
+  'foo': string;
+  'bar-baz': string;
+  'barBaz': string;
+}
+declare const styles: IExampleCamelcaseCss;
+
+export default styles;

test/expected-example-namedexport.css.d.ts

@@ -0,0 +1 @@
+export const foo: string;

test/webpack.config.babel.js

@@ -7,7 +7,10 @@ module.exports = {
   module: {
     loaders: [
       { test: /\.ts$/, loaders: ['babel', 'ts'] },
-      { test: /\.css$/, loader: '../src/index.js?modules' }
+      { 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' }
     ]
   }
 };