Merge pull request #110 from Quramy/prettier

Chore: Install prettier

Author: Quramy

.github/workflows/build.yml

@@ -16,9 +16,14 @@ jobs:
         uses: actions/setup-node@v1
         with:
           node-version: ${{ matrix.node-version }}
-      - name: npm install, build, and test
+      - name: npm install, build
         run: |
           npm ci
+      - name: Lint
+        run: |
+          npm run lint
+      - name: Test
+        run: |
           npm run test:ci
         env:
           CI: true

.husky/.gitignore

@@ -0,0 +1 @@
+_

.husky/pre-commit

@@ -0,0 +1,5 @@
+#!/bin/sh
+. "$(dirname "$0")/_/husky.sh"
+
+npx pretty-quick --staged
+

.prettierignore

@@ -0,0 +1,8 @@
+.git/
+.husky/
+node_modules/
+lib/
+__snapshots__/
+coverage/
+*.css.d.ts
+test/**/*.css

.prettierrc.yml

@@ -0,0 +1,7 @@
+trailingComma: all
+tabWidth: 2
+semi: true
+singleQuote: true
+bracketSpacing: true
+printWidth: 120
+arrowParens: avoid

README.md

@@ -19,8 +19,8 @@ typed-css-modules creates the following .d.ts files from the above css:
 ```ts
 /* styles.css.d.ts */
 declare const styles: {
-  readonly "primary": string;
-  readonly "myClass": string;
+  readonly primary: string;
+  readonly myClass: string;
 };
 export = styles;
 ```
@@ -57,6 +57,7 @@ Then, this creates `*.css.d.ts` files under the directory which has original .cs
 ```
 
 #### output directory
+
 Use `-o` or `--outDir` option.
 
 For example:
@@ -84,11 +85,12 @@ tcm -p 'src/**/*.icss' .
 ```
 
 #### watch
+
 With `-w` or `--watch`, this CLI watches files in the input directory.
 
 #### camelize CSS token
-With `-c` or `--camelCase`, kebab-cased CSS classes(such as `.my-class {...}`) are exported as camelized TypeScript varibale name(`export const myClass: string`).
 
+With `-c` or `--camelCase`, kebab-cased CSS classes(such as `.my-class {...}`) are exported as camelized TypeScript varibale name(`export const myClass: string`).
 
 You can pass `--camelCase dashes` to only camelize dashes in the class name. Since version `0.27.1` in the
 webpack `css-loader`. This will keep upperCase class names intact, e.g.:
@@ -103,22 +105,23 @@ becomes
 
 ```typescript
 declare const styles: {
-  readonly "SomeComponent": string;
+  readonly SomeComponent: string;
 };
 export = styles;
 ```
 
 See also [webpack css-loader's camelCase option](https://github.com/webpack/css-loader#camelcase).
 
 #### named exports (enable tree shaking)
+
 With `-e` or `--namedExports`, types are exported as named exports as opposed to default exports.
 This enables support for the `namedExports` css-loader feature, required for webpack to tree shake the final CSS (learn more [here](https://webpack.js.org/loaders/css-loader/#namedexport)).
 
 Use this option in combination with https://webpack.js.org/loaders/css-loader/#namedexport and https://webpack.js.org/loaders/style-loader/#namedexport (if you use `style-loader`).
 
 When this option is enabled, the type definition changes to support named exports.
 
-*NOTE: this option enables camelcase by default.*
+_NOTE: this option enables camelcase by default._
 
 ```css
 .SomeComponent {
@@ -130,7 +133,7 @@ When this option is enabled, the type definition changes to support named export
 
 ```typescript
 declare const styles: {
-  readonly "SomeComponent": string;
+  readonly SomeComponent: string;
 };
 export = styles;
 ```
@@ -151,56 +154,62 @@ npm install typed-css-modules
 import DtsCreator from 'typed-css-modules';
 let creator = new DtsCreator();
 creator.create('src/style.css').then(content => {
-  console.log(content.tokens);          // ['myClass']
-  console.log(content.formatted);       // 'export const myClass: string;'
-  content.writeFile();                  // writes this content to "src/style.css.d.ts"
+  console.log(content.tokens); // ['myClass']
+  console.log(content.formatted); // 'export const myClass: string;'
+  content.writeFile(); // writes this content to "src/style.css.d.ts"
 });
 ```
 
 ### class DtsCreator
+
 DtsCreator instance processes the input CSS and create TypeScript definition contents.
 
 #### `new DtsCreator(option)`
+
 You can set the following options:
 
-* `option.rootDir`: Project root directory(default: `process.cwd()`).
-* `option.searchDir`: Directory which includes target `*.css` files(default: `'./'`).
-* `option.outDir`: Output directory(default: `option.searchDir`).
-* `option.camelCase`: Camelize CSS class tokens.
-* `option.namedExports`: Use named exports as opposed to default exports to enable tree shaking. Requires `import * as style from './file.module.css';` (default: `false`)
-* `option.EOL`: EOL (end of line) for the generated `d.ts` files. Possible values `'\n'` or `'\r\n'`(default: `os.EOL`).
+- `option.rootDir`: Project root directory(default: `process.cwd()`).
+- `option.searchDir`: Directory which includes target `*.css` files(default: `'./'`).
+- `option.outDir`: Output directory(default: `option.searchDir`).
+- `option.camelCase`: Camelize CSS class tokens.
+- `option.namedExports`: Use named exports as opposed to default exports to enable tree shaking. Requires `import * as style from './file.module.css';` (default: `false`)
+- `option.EOL`: EOL (end of line) for the generated `d.ts` files. Possible values `'\n'` or `'\r\n'`(default: `os.EOL`).
 
 #### `create(filepath, contents) => Promise(dtsContent)`
+
 Returns `DtsContent` instance.
 
-* `filepath`: path of target .css file.
-* `contents`(optional): the CSS content of the `filepath`. If set, DtsCreator uses the contents instead of the original contents of the `filepath`.
+- `filepath`: path of target .css file.
+- `contents`(optional): the CSS content of the `filepath`. If set, DtsCreator uses the contents instead of the original contents of the `filepath`.
 
 ### class DtsContent
+
 DtsContent instance has `*.d.ts` content, final output path, and function to write file.
 
 #### `writeFile(postprocessor) => Promise(dtsContent)`
+
 Writes the DtsContent instance's content to a file. Returns the DtsContent instance.
 
-* `postprocessor` (optional): a function that takes the formatted definition string and returns a modified string that will be the final content written to the file.
+- `postprocessor` (optional): a function that takes the formatted definition string and returns a modified string that will be the final content written to the file.
 
   You could use this, for example, to pass generated definitions through a formatter like Prettier, or to add a comment to the top of generated files:
 
   ```js
-  dtsContent.writeFile(
-    definition => `// Generated automatically, do not edit\n${definition}`
-  )
+  dtsContent.writeFile(definition => `// Generated automatically, do not edit\n${definition}`);
   ```
 
 #### `tokens`
+
 An array of tokens retrieved from input CSS file.
 e.g. `['myClass']`
 
 #### `contents`
+
 An array of TypeScript definition expressions.
 e.g. `['export const myClass: string;']`.
 
 #### `formatted`
+
 A string of TypeScript definition expression.
 
 e.g.
@@ -210,13 +219,16 @@ export const myClass: string;
 ```
 
 #### `messageList`
+
 An array of messages. The messages contains invalid token information.
 e.g. `['my-class is not valid TypeScript variable name.']`.
 
 #### `outputFilePath`
+
 Final output file path.
 
 ## Remarks
+
 If your input CSS file has the following class names, these invalid tokens are not written to output `.d.ts` file.
 
 ```css
@@ -227,7 +239,7 @@ If your input CSS file has the following class names, these invalid tokens are n
 
 /* invalid TypeScript variable */
 /* If camelCase option is set, this token will be converted to 'myClass' */
-.my-class{
+.my-class {
   color: red;
 }
 
@@ -238,9 +250,11 @@ If your input CSS file has the following class names, these invalid tokens are n
 ```
 
 ## Example
+
 There is a minimum example in this repository `example` folder. Clone this repository and run `cd example; npm i; npm start`.
 
 Or please see [https://github.com/Quramy/typescript-css-modules-demo](https://github.com/Quramy/typescript-css-modules-demo). It's a working demonstration of CSS Modules with React and TypeScript.
 
 ## License
+
 This software is released under the MIT License, see LICENSE.txt.