typescript-plugin-css-modules - npm Package Compare versions

Comparing version 0.1.0 to 0.2.0

lib/helpers/cssSnapshots.d.ts

 import { IICSSExports } from 'icss-utils';
 import * as ts_module from 'typescript/lib/tsserverlibrary';
 export declare const getClasses: (css: string) => IICSSExports;
-export declare const createExports: (classes: IICSSExports) => string;
-export declare const getDtsSnapshot: (ts: typeof ts_module, scriptSnapshot: ts_module.IScriptSnapshot) => ts_module.IScriptSnapshot;
+export declare const createExports: (classes: IICSSExports, options: IOptions) => string;
+export declare const getDtsSnapshot: (ts: typeof ts_module, scriptSnapshot: ts_module.IScriptSnapshot, options: IOptions) => ts_module.IScriptSnapshot;

lib/helpers/cssSnapshots.js

@@ -6,2 +6,3 @@ "use strict";
 var postcssIcssSelectors = require("postcss-icss-selectors");
+var classTransforms_1 = require("./classTransforms");
 var processor = postcss(postcssIcssSelectors({ mode: 'local' }));
@@ -11,12 +12,17 @@ exports.getClasses = function (css) {
 };
-exports.createExports = function (classes) {
-    return Object.keys(classes)
-        .map(function (exportName) { return "export const " + exportName + ": string;"; })
-        .join('');
+var classNameToProperty = function (className) { return "'" + className + "': string;"; };
+var flattenClassNames = function (previousValue, currentValue) {
+    if (previousValue === void 0) { previousValue = []; }
+    return previousValue.concat(currentValue);
 };
-exports.getDtsSnapshot = function (ts, scriptSnapshot) {
+exports.createExports = function (classes, options) { return "declare const classes: {\n  " + Object.keys(classes)
+    .map(classTransforms_1.transformClasses(options.camelCase))
+    .reduce(flattenClassNames)
+    .map(classNameToProperty)
+    .join('\n  ') + "\n};\nexport default classes;\n"; };
+exports.getDtsSnapshot = function (ts, scriptSnapshot, options) {
     var css = scriptSnapshot.getText(0, scriptSnapshot.getLength());
     var classes = exports.getClasses(css);
-    var dts = exports.createExports(classes);
+    var dts = exports.createExports(classes, options);
     return ts.ScriptSnapshot.fromString(dts);
 };

lib/index.js

@@ -10,5 +10,7 @@ "use strict";
     function create(info) {
+        // User options for plugin.
+        var options = info.config.options || {};
         // Allow custom matchers to be used, handling bad matcher patterns;
         try {
-            var customMatcher_1 = (info.config.options || {}).customMatcher;
+            var customMatcher_1 = options.customMatcher;
             if (customMatcher_1) {
@@ -29,3 +31,3 @@ isCSS = function (fileName) { return new RegExp(customMatcher_1).test(fileName); };
             if (isCSS(fileName)) {
-                scriptSnapshot = cssSnapshots_1.getDtsSnapshot(ts, scriptSnapshot);
+                scriptSnapshot = cssSnapshots_1.getDtsSnapshot(ts, scriptSnapshot, options);
             }
@@ -47,3 +49,3 @@ var sourceFile = _createLanguageServiceSourceFile.apply(void 0, [fileName,
             if (isCSS(sourceFile.fileName)) {
-                scriptSnapshot = cssSnapshots_1.getDtsSnapshot(ts, scriptSnapshot);
+                scriptSnapshot = cssSnapshots_1.getDtsSnapshot(ts, scriptSnapshot, options);
             }
@@ -50,0 +52,0 @@ sourceFile = _updateLanguageServiceSourceFile.apply(void 0, [sourceFile,

package.json

 {
   "name": "typescript-plugin-css-modules",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "main": "lib/index.js",
@@ -20,3 +20,3 @@ "repository": "[e-mail]:mrmckeb/typescript-plugin-css-modules.git",
     "prepublish": "yarn build",
-    "test": "jest"
+    "test": "jest ./src"
   },
@@ -30,2 +30,5 @@ "husky": {
   "jest": {
+    "collectCoverageFrom": [
+      "src/**/*.{ts}"
+    ],
     "preset": "ts-jest",
@@ -40,3 +43,5 @@ "testEnvironment": "node"
   "dependencies": {
+    "@types/lodash": "^4.14.118",
     "icss-utils": "^4.0.0",
+    "lodash": "^4.17.11",
     "postcss": "^7.0.5",
@@ -43,0 +48,0 @@ "postcss-icss-selectors": "^2.0.3"

README.md

@@ -6,4 +6,6 @@ # typescript-plugin-css-modules
 
+<img src="https://raw.githubusercontent.com/mrmckeb/typescript-plugin-css-modules/master/docs/images/example.gif" alt="typescript-plugin-css-modules example" />
+
 This project was inspired by this [`create-react-app` issue](https://github.com/facebook/create-react-app/issues/5677)
-and is heavily based on [`css-module-types`](https://github.com/timothykang/css-module-types).
+and is based on [`css-module-types`](https://github.com/timothykang/css-module-types).
 
@@ -34,4 +36,11 @@ ## Usage
 
-You can also pass in your own file extension matcher (the default matcher is shown as an example):
+### Options
 
+| Option          | Default value                  | Description                                                                                                                                           |
+| --------------- | ------------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `customMatcher` | `"\\.module\\.(sa\|sc\|c)ss$"` | Change the file extensions that this plugin works with.                                                                                               |
+| `camelCase`     | `false`                        | Implements the behaviour of the [`camelCase` CSS Loader option](https://github.com/webpack-contrib/css-loader#camelcase) (accepting the same values). |
+
+The below is an example that only matches "\*.m.css" files, and [camel-cases dashes](https://github.com/webpack-contrib/css-loader#camelcase).
+
 ```json
@@ -44,3 +53,4 @@ {
         "options": {
-          "customMatcher": "\\.module\\.(sa|sc|c)ss$"
+          "customMatcher": "\\.m\\.css$",
+          "camelCase": "dashes"
         }
@@ -53,9 +63,28 @@ }
 
+### Visual Studio Code
+
+By default, VSCode will use it's own version of TypeScript. To make it work with this plugin, you have two options:
+
+1. Add this plugin to `"typescript.tsserver.pluginPaths"` in settings. Note that this method doesn't currently support
+   plugin options.
+
+```json
+{
+  "typescript.tsserver.pluginPaths": ["typescript-plugin-css-modules"]
+}
+```
+
+2. Use your workspace's version of TypeScript, which will load the plugins from your `tsconfig.json` file.
+   ([instructions](https://code.visualstudio.com/docs/languages/typescript#_using-the-workspace-version-of-typescript)).
+
 ### Custom definitions
 
-Depending on your project configuration, you may also need to declare modules. Where you store this is up to you. An
-example might look like: `src/@types/custom.d.ts`.
+_Note: Create React App users can skip this section if you're using `react-scripts@2.1.x` or higher._
 
-The below is an example that you can modify if you use a `customMatcher`.
+If your project doesn't already have global declarations for CSS Modules, you will need to add these to help TypeScript understand the general shape of the imported CSS.
 
+Where you store global declarations is up to you. An example might look like: `src/custom.d.ts`.
+
+The below is an example that you can copy, or modify if you use a `customMatcher`.
+
 ```ts
@@ -62,0 +91,0 @@ declare module '*.module.css' {

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

391944

increased by4019.22%

Number of package files

35

increased by288.89%

Lines of code

650

increased by437.19%

Number of lines in readme file

102

increased by39.73%

Worsened metrics

Dependency count

6

increased by50%

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• + Added@types/lodash@^4.14.118

• + Addedlodash@^4.17.11

• + Added@types/lodash@4.17.13(transitive)