Implement loader

Author: Alexander Grigoriev

.gitignore

@@ -0,0 +1 @@
+node_modules

README.md

@@ -1,2 +1,66 @@
 # typed-css-modules-loader
-Replacement for the https://github.com/Jimdo/typings-for-css-modules-loader
+Replacement for the [typings-for-css-modules-loader](https://github.com/Jimdo/typings-for-css-modules-loader). This loader does not make any changes in content of styles, just creates `*.d.ts` file during the work. It is assumed that the content will be preprocessed first by [css-loader](https://github.com/webpack-contrib/css-loader).
+
+# Installation
+
+```
+npm i -DE Megaputer/typed-css-modules-loader
+```
+or
+```
+yarn add -DE Megaputer/typed-css-modules-loader
+```
+
+# Usage
+
+```js
+{
+  test: /\.scss$/,
+  use: [
+    {
+      loader: 'typed-css-modules-loader',
+      options: {
+        namedExport: true,
+        banner: "// This file is generated automatically."
+      }
+    },
+    {
+      loader: 'css-loader',
+      options: {
+        modules: true,
+        camelCase: 'only',
+        localIdentName: '[local]',
+        exportOnlyLocals: true
+      }
+    },
+    'sass-loader'
+  ]
+}
+```
+
+# Options
+## `namedExport`
+When the option is switched on classes exported as variables. Be sure you using `camelCase` option of [css-loader](https://github.com/webpack-contrib/css-loader) to avoid invalid name of variables.
+
+```ts
+// This file is generated automatically.
+export const button: string;
+export const buttonActive: string;
+```
+
+When option is off:
+```ts
+// This file is generated automatically.
+export interface I_buttonScss {
+  'button': string
+  'buttonActive': string
+}
+declare const styles: I_buttonScss;
+export default styles;
+```
+
+## `banner`
+Adds a "banner" prefix to each generated file.
+
+# License
+Licensed under the MIT license.

index.js

@@ -0,0 +1,86 @@
+// @ts-check
+const fs = require('fs');
+const fp = require('path');
+const loaderUtils = require('loader-utils');
+
+/** @type {import('webpack').loader.Loader} */
+module.exports = function(content) {
+  this.cacheable();
+  const callback = this.async();
+  const options = loaderUtils.getOptions(this);
+  genTypings(this.resourcePath, content, options, callback);
+};
+
+/**
+ * @param {string} [path]
+ * @param {string | Buffer} [content]
+ * @param {import('loader-utils').OptionObject} [options]
+ * @param {import('webpack').loader.loaderCallback} [callback]
+ */
+function genTypings(path, content, options, callback) {
+  if (Buffer.isBuffer(content)) {
+    content = content.toString('utf8');
+  }
+
+  /** @type {string[]} */
+  let classes = [];
+  {
+    /** @type {RegExpExecArray} */
+    let match;
+    while (match = classesRegex.exec(content)) {
+      if (classes.indexOf(match[1]) === -1) {
+        classes.push(match[1]);
+      }
+    }
+  }
+
+  let typings = '';
+  {
+    if (options.banner) {
+      typings = `${options.banner}\n`;
+    }
+    if (options.namedExport) {
+      for (let c of classes) {
+        typings += `export const ${c}: string;\n`;
+      }
+    } else {
+      const name = getInterfaceName(path);
+      typings += `export interface ${name} {\n`;
+      for (let c of classes) {
+        typings += `  '${c}': string\n`;
+      }
+      typings += `}\ndeclare const styles: ${name};\nexport default styles;\n`;
+    }
+  }
+  writeFile(getDtsPath(path), typings);
+
+  callback(null, content);
+}
+
+const classesRegex = /"([^"\\]+)":/g;
+
+/**
+ * @param {string} [path]
+ */
+function getDtsPath(path) {
+  return fp.join(fp.dirname(path), `${fp.basename(path)}.d.ts`);
+}
+
+/**
+ * @param {string} [path]
+ */
+function getInterfaceName(path) {
+  return fp.basename(path)
+    .replace(/^(\w)/, (_, c) => 'I' + c.toUpperCase())
+    .replace(/\W+(\w)/g, (_, c) => c.toUpperCase());
+}
+
+/**
+ * @param {string} [path]
+ * @param {string} [content]
+ */
+function writeFile(path, content) {
+  if (!fs.existsSync(path) || fs.readFileSync(path).toString('utf8') !== content) {
+    fs.writeFileSync(path, content);
+  }
+}

package.json

@@ -0,0 +1,12 @@
+{
+  "name": "typed-css-modules-loader",
+  "version": "1.0.0",
+  "description": "Loader to generate typesize for css modules",
+  "scripts": {},
+  "dependencies": {
+    "loader-utils": "^1.2.0"
+  },
+  "peerDependencies": {
+    "css-loader": "2.0.2"
+  }
+}

yarn.lock

@@ -0,0 +1,34 @@
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
+# yarn lockfile v1
+
+
+big.js@^5.2.2:
+  version "5.2.2"
+  resolved "https://registry.yarnpkg.com/big.js/-/big.js-5.2.2.tgz#65f0af382f578bcdc742bd9c281e9cb2d7768328"
+  integrity sha512-vyL2OymJxmarO8gxMr0mhChsO9QGwhynfuu4+MHTAW6czfq9humCB7rKpUjDd9YUiDPU4mzpyupFSvOClAwbmQ==
+
+emojis-list@^2.0.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/emojis-list/-/emojis-list-2.1.0.tgz#4daa4d9db00f9819880c79fa457ae5b09a1fd389"
+  integrity sha1-TapNnbAPmBmIDHn6RXrlsJof04k=
+
+json5@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/json5/-/json5-1.0.1.tgz#779fb0018604fa854eacbf6252180d83543e3dbe"
+  integrity sha512-aKS4WQjPenRxiQsC93MNfjx+nbF4PAdYzmd/1JIj8HYzqfbu86beTuNgXDzPknWk0n0uARlyewZo4s++ES36Ow==
+  dependencies:
+    minimist "^1.2.0"
+
+loader-utils@^1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/loader-utils/-/loader-utils-1.2.0.tgz#8194a9bfabc3612e52e556139f67acbf01b267b7"
+  integrity sha512-KkQxP+pVgJC6ypy8ePypyhsV/hZeyVlkqiqrxe4pDgCwClbzmr3dGy8LbeSVhmfzYmCpOovdrVs/9chsQXCrLQ==
+  dependencies:
+    big.js "^5.2.2"
+    emojis-list "^2.0.0"
+    json5 "^1.0.1"
+
+minimist@^1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.2.0.tgz#a35008b20f41383eec1fb914f4cd5df79a264284"
+  integrity sha1-o1AIsg9BOD7sH7kU9M1d95omQoQ=