Merge branch 'release/1.1.0'

Author: mrmckeb

.npmignore

@@ -0,0 +1 @@
+src/helpers/__tests__/fixtures/test.module.less

.prettierignore

@@ -12,7 +12,7 @@ for [CSS Modules](https://github.com/css-modules/css-modules).
 This project was inspired by this [`create-react-app` issue](https://github.com/facebook/create-react-app/issues/5677)
 and was based on [`css-module-types`](https://github.com/timothykang/css-module-types).
 
-## Usage
+## Installation
 
 To install with Yarn:
 
@@ -36,12 +36,32 @@ Once installed, add this plugin to your `tsconfig.json`:
 }
 ```
 
+### Importing CSS
+
+A default export is always provided for your CSS module.
+
+```tsx
+import styles from 'my.module.css';
+
+const a = styles.myClass;
+const b = styles['my_other-class'];
+```
+
+As of version 1.1.0, you can also use named exports for classes that don't contain hyphens or underscores. You can still access other classes via the default export.
+
+```tsx
+import styles, { myClass } from 'my.module.css';
+
+const a = myClass;
+const b = styles['my_other-class'];
+```
+
 ### 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). |
+| Option          | Default value                      | Description                                                                                                                                           |
+| --------------- | ---------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `customMatcher` | `"\\.module\\.(c\|le\|sa\|sc)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).
 
@@ -65,17 +85,16 @@ The below is an example that only matches "\*.m.css" files, and [camel-cases das
 
 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. This is planned for the [November update](https://github.com/Microsoft/vscode/issues/62876).
+1. Use your workspace's version of TypeScript, which will load plugins from your `tsconfig.json` file. This is the recommended approach. For instructions, see: [Using the workspace version of TypeScript](https://code.visualstudio.com/docs/languages/typescript#_using-the-workspace-version-of-typescript).
+
+2. 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. For instructions, see: [Using the workspace version of TypeScript](https://code.visualstudio.com/docs/languages/typescript#_using-the-workspace-version-of-typescript).
-
 ### Custom definitions
 
 _Note: Create React App users can skip this section if you're using `[email protected]` or higher._
@@ -84,7 +103,7 @@ If your project doesn't already have global declarations for CSS Modules, you wi
 
 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`.
+The below is an example that you can copy or modify. If you use a `customMatcher`, you'll need to modify it.
 
 ```ts
 declare module '*.module.css' {
@@ -101,4 +120,9 @@ declare module '*.module.sass' {
   const classes: { [key: string]: string };
   export default classes;
 }
+
+declare module '*.module.less' {
+  const classes: { [key: string]: string };
+  export default classes;
+}
 ```

README.md

@@ -1,6 +1,6 @@
 {
   "name": "typescript-plugin-css-modules",
-  "version": "1.0.5",
+  "version": "1.1.0",
   "main": "lib/index.js",
   "author": "Brody McKee <[email protected]>",
   "license": "MIT",
@@ -12,15 +12,20 @@
   },
   "keywords": [
     "css",
+    "scss",
+    "sass",
+    "less",
     "modules",
     "plugin",
     "postcss",
-    "sass",
     "typescript"
   ],
+  "files": [
+    "lib"
+  ],
   "scripts": {
     "build": "rm -rf ./lib && tsc",
-    "prepublish": "yarn build",
+    "prepublishOnly": "yarn build",
     "test": "jest ./src"
   },
   "husky": {
@@ -42,24 +47,27 @@
     "trailingComma": "all"
   },
   "dependencies": {
-    "icss-utils": "^4.0.0",
+    "icss-utils": "^4.1.0",
+    "less": "^3.9.0",
     "lodash": "^4.17.11",
-    "postcss": "^7.0.7",
+    "postcss": "^7.0.16",
     "postcss-icss-selectors": "^2.0.3",
-    "postcss-nested": "^4.1.1",
-    "strip-css-singleline-comments": "^1.1.0"
+    "reserved-words": "^0.1.2",
+    "sass": "^1.20.1"
   },
   "devDependencies": {
-    "@types/jest": "^23.3.12",
-    "@types/lodash": "^4.14.119",
-    "@types/node": "^10.12.18",
-    "husky": "^1.3.1",
-    "jest": "^23.6.0",
-    "prettier": "^1.15.3",
-    "pretty-quick": "^1.8.0",
-    "ts-jest": "^23.10.5",
-    "tslint": "^5.12.0",
-    "typescript": "^3.2.2"
+    "@types/jest": "^24.0.13",
+    "@types/less": "^3.0.0",
+    "@types/lodash": "^4.14.132",
+    "@types/node": "^10.0.0",
+    "@types/sass": "^1.16.0",
+    "husky": "^2.3.0",
+    "jest": "^24.8.0",
+    "prettier": "^1.17.1",
+    "pretty-quick": "^1.11.0",
+    "ts-jest": "^24.0.2",
+    "tslint": "^5.16.0",
+    "typescript": "^3.4.5"
   },
   "peerDependencies": {
     "typescript": "^3.0.0"

package.json

@@ -0,0 +1,3 @@
+declare module 'reserved-words' {
+  export const check: (string: string, esVersion?: string) => boolean;
+}

src/@types/reserved-words.d.ts

@@ -1,5 +1,15 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`utils / cssSnapshots with file 'empty.module.less' createExports should create an exports file 1`] = `
+"declare const classes: {
+  
+};
+export default classes;
+"
+`;
+
+exports[`utils / cssSnapshots with file 'empty.module.less' getClasses should return an object matching expected CSS 1`] = `Object {}`;
+
 exports[`utils / cssSnapshots with file 'empty.module.scss' createExports should create an exports file 1`] = `
 "declare const classes: {
   
@@ -15,12 +25,19 @@ exports[`utils / cssSnapshots with file 'test.module.css' createExports should c
   'classA': string;
   'ClassB': string;
   'class-c': string;
+  'class_d': string;
   'parent': string;
   'childA': string;
   'childB': string;
   'nestedChild': string;
 };
 export default classes;
+export const classA: string;
+export const ClassB: string;
+export const parent: string;
+export const childA: string;
+export const childB: string;
+export const nestedChild: string;
 "
 `;
 
@@ -31,33 +48,90 @@ Object {
   "childB": "file__childB---pq4Ks",
   "class-c": "file__class-c---DZ1TD",
   "classA": "file__classA---2xcnJ",
+  "class_d": "file__class_d---1mwNi",
   "nestedChild": "file__nestedChild---2d15b",
   "parent": "file__parent---1ATMj",
 }
 `;
 
+exports[`utils / cssSnapshots with file 'test.module.less' createExports should create an exports file 1`] = `
+"declare const classes: {
+  'nested-class-parent': string;
+  'child-class': string;
+  'selector-blue': string;
+  'selector-green': string;
+  'selector-red': string;
+  'column-1': string;
+  'column-2': string;
+  'column-3': string;
+  'column-4': string;
+  'color-set': string;
+};
+export default classes;
+"
+`;
+
+exports[`utils / cssSnapshots with file 'test.module.less' getClasses should return an object matching expected CSS 1`] = `
+Object {
+  "child-class": "file__child-class---1mwoB",
+  "color-set": "file__color-set---9sHH_",
+  "column-1": "file__column-1---vHRb_",
+  "column-2": "file__column-2---28y1r",
+  "column-3": "file__column-3---1PsZw",
+  "column-4": "file__column-4---2qaaI",
+  "nested-class-parent": "file__nested-class-parent---_ft7G",
+  "selector-blue": "file__selector-blue---3mslq",
+  "selector-green": "file__selector-green---143xX",
+  "selector-red": "file__selector-red---Gckob",
+}
+`;
+
 exports[`utils / cssSnapshots with file 'test.module.scss' createExports should create an exports file 1`] = `
 "declare const classes: {
   'local-class-inside-global': string;
   'local-class': string;
   'local-class-2': string;
   'local-class-inside-local': string;
+  'reserved-words': string;
+  'default': string;
+  'const': string;
   'nested-class-parent': string;
   'child-class': string;
   'nested-class-parent--extended': string;
+  'section-1': string;
+  'section-2': string;
+  'section-3': string;
+  'section-4': string;
+  'section-5': string;
+  'section-6': string;
+  'section-7': string;
+  'section-8': string;
+  'section-9': string;
 };
 export default classes;
 "
 `;
 
 exports[`utils / cssSnapshots with file 'test.module.scss' getClasses should return an object matching expected CSS 1`] = `
 Object {
-  "child-class": "file__child-class---1mwoB",
-  "local-class": "file__local-class---3KegX",
-  "local-class-2": "file__local-class-2---2h6qz",
-  "local-class-inside-global": "file__local-class-inside-global---2xH_Y",
-  "local-class-inside-local": "file__local-class-inside-local---QdL6b",
-  "nested-class-parent": "file__nested-class-parent---_ft7G",
-  "nested-class-parent--extended": "file__nested-class-parent--extended---1642l",
+  "child-class": "file__child-class---1QWYM",
+  "const": "file__const---MIe_0",
+  "default": "file__default---2RWlj",
+  "local-class": "file__local-class---3SW3k",
+  "local-class-2": "file__local-class-2----c5z7",
+  "local-class-inside-global": "file__local-class-inside-global---1T0um",
+  "local-class-inside-local": "file__local-class-inside-local---1Z9pB",
+  "nested-class-parent": "file__nested-class-parent---3qXdF",
+  "nested-class-parent--extended": "file__nested-class-parent--extended---qsVau",
+  "reserved-words": "file__reserved-words---_rrID",
+  "section-1": "file__section-1---1IHCS",
+  "section-2": "file__section-2---cLFhf",
+  "section-3": "file__section-3---1ldKa",
+  "section-4": "file__section-4---2u0CG",
+  "section-5": "file__section-5---1lAYL",
+  "section-6": "file__section-6---2YZ9I",
+  "section-7": "file__section-7---3w-OF",
+  "section-8": "file__section-8---3RB8g",
+  "section-9": "file__section-9---3_Mtj",
 }
 `;

src/helpers/__tests__/__snapshots__/cssSnapshots.test.ts.snap

@@ -1,4 +1,5 @@
 import { transformClasses } from '../classTransforms';
+import { CamelCaseOptions } from '../../options';
 
 describe('utils / classTransforms', () => {
   const classNames = [

src/helpers/__tests__/classTransforms.test.ts

@@ -1,8 +1,9 @@
 import { createMatchers } from '../createMatchers';
+import { Options } from '../../options';
 
 describe('utils / createMatchers', () => {
   it('should match `customMatcher` regexp', () => {
-    const options: IOptions = { customMatcher: '\\.css$' };
+    const options: Options = { customMatcher: '\\.css$' };
     const { isCSS, isRelativeCSS } = createMatchers(options);
 
     expect(isCSS('./myfile.css')).toBe(true);
@@ -14,7 +15,7 @@ describe('utils / createMatchers', () => {
   });
 
   it('should handle bad `customMatcher` regexp', () => {
-    const options: IOptions = { customMatcher: '$([a' };
+    const options: Options = { customMatcher: '$([a' };
     const { isCSS, isRelativeCSS } = createMatchers(options);
 
     expect(isCSS('./myfile.module.css')).toBe(true);

src/helpers/__tests__/createMatchers.test.ts

@@ -1,24 +1,28 @@
 import { readFileSync } from 'fs';
 import { IICSSExports } from 'icss-utils';
 import { join } from 'path';
-import { createExports, getClasses } from '../cssSnapshots';
+import { createExports, getClasses, FileTypes } from '../cssSnapshots';
 
 const testFileNames = [
   'test.module.css',
+  'test.module.less',
   'test.module.scss',
+  'empty.module.less',
   'empty.module.scss',
 ];
 
 describe('utils / cssSnapshots', () => {
-  testFileNames.map((filename) => {
+  testFileNames.forEach((filename) => {
     let classes: IICSSExports;
+    const isLess = filename.includes('less');
+    const fileType = isLess ? FileTypes.less : FileTypes.css;
     const testFile = readFileSync(
       join(__dirname, 'fixtures', filename),
       'utf8',
     );
 
     beforeAll(() => {
-      classes = getClasses(testFile);
+      classes = getClasses(testFile, fileType);
     });
 
     describe(`with file '${filename}'`, () => {

src/helpers/__tests__/cssSnapshots.test.ts

@@ -1,17 +1,26 @@
 .classA {
+  color: rebeccapurple;
 }
 
 .ClassB {
+  color: rebeccapurple;
 }
 
 .class-c {
+  color: rebeccapurple;
+}
+
+.class_d {
+  color: rebeccapurple;
 }
 
 .parent {
   .childA {
+    color: rebeccapurple;
   }
   .childB {
     .nestedChild {
+      color: rebeccapurple;
     }
   }
 }