style(prettier): adding automatic formatting and linting

Author: edoparearyee

.prettierignore

@@ -0,0 +1,2 @@
+package.json
+package-lock.json

.prettierrc

@@ -0,0 +1,15 @@
+{
+  "singleQuote": true,
+  "useTabs": false,
+  "tabWidth": 2,
+  "semi": true,
+  "bracketSpacing": true,
+  "overrides": [
+    {
+      "files": "src/**/*.scss",
+      "options": {
+        "singleQuote": false
+      }
+    }
+  ]
+}

.stylelintrc

@@ -0,0 +1,29 @@
+{
+  "extends": ["stylelint-config-standard", "stylelint-config-recommended-scss"],
+  "rules": {
+    "order/order": [
+      "custom-properties",
+      "declarations"
+    ],
+    "order/properties-alphabetical-order": true,
+    "no-empty-source": null,
+    "selector-type-no-unknown": [
+      true,
+      {
+        "ignore": ["custom-elements", "default-namespace"]
+      }
+    ],
+    "selector-pseudo-element-no-unknown": [
+      true,
+      {
+        "ignorePseudoElements": ["ng-deep"]
+      }
+    ],
+    "declaration-colon-newline-after": null,
+    "at-rule-empty-line-before": null,
+    "block-closing-brace-newline-after": null
+  },
+  "plugins": [
+    "stylelint-order"
+  ]
+}

README.md

@@ -1,13 +1,14 @@
 # Angular Scroll Collapse
+
 [![Build Status][travis-badge]][travis-badge-url]
 [![Coverage Status][coveralls-badge]][coveralls-badge-url]
 [![Commitizen friendly][commitizen-badge]][commitizen]
+[![code style: prettier][prettier-badge]][prettier-badge-url]
 
 A simple lightweight library for [Angular][angular] that detects scroll direction and adds a `sn-scrolling-up` or `sn-scrolling-down` class to the element. The library can also detect when the user has scrolled passed the element and apply a `sn-affix` class. Useful for make a element sticky when the user has scrolled beyond it. This library can will also apply `sn-minimise` class after the user has scrolled beyond the height of the element.
 
 This is a simple library for [Angular][angular], implemented in the [Angular Package Format v5.0][apfv5].
 
-
 ## Install
 
 ### via NPM
@@ -19,6 +20,7 @@ This is a simple library for [Angular][angular], implemented in the [Angular Pac
 `yarn add @thisissoon/angular-scroll-collapse @thisissoon/angular-inviewport`
 
 `app.module.ts`
+
 ```ts
 import { InViewportModule, WindowRef } from '@thisissoon/angular-inviewport';
 import { ScrollCollapseModule } from '@thisissoon/angular-scroll-collapse';
@@ -31,12 +33,13 @@ import { ScrollCollapseModule } from '@thisissoon/angular-scroll-collapse';
     ScrollCollapseModule
   ]
 })
-export class AppModule { }
+export class AppModule {}
 ```
 
 `yarn add @thisissoon/angular-scroll-collapse @thisissoon/angular-inviewport`
 
 `app.server.module.ts`
+
 ```ts
 import { InViewportModule } from '@thisissoon/angular-inviewport';
 import { ScrollCollapseModule } from '@thisissoon/angular-scroll-collapse';
@@ -47,10 +50,9 @@ import { ScrollCollapseModule } from '@thisissoon/angular-scroll-collapse';
     ScrollCollapseModule
   ]
 })
-export class AppServerModule { }
+export class AppServerModule {}
 ```
 
-
 ## Examples
 
 A working example can be found inside [/src](https://github.com/thisissoon/angular-scroll-collapse/tree/master/src) folder.
@@ -66,11 +68,11 @@ A working example can be found inside [/src](https://github.com/thisissoon/angul
 ```css
 .foo {
   left: 0;
-  height : 100px;
+  height: 100px;
   position: fixed;
   right: 0;
   top: 0;
-  transition: all .35s ease-in-out;
+  transition: all 0.35s ease-in-out;
 }
 
 .foo.sn-scrolling-down {
@@ -102,7 +104,6 @@ In this scenario the nav element will have the class `sn-affix` added when the u
 }
 ```
 
-
 ### Minimise mode
 
 In this scenario the nav element will have the class `sn-minimise` added when the user scrolls 100px (the original height of the element) down the page.
@@ -117,8 +118,7 @@ In this scenario the nav element will have the class `sn-minimise` added when th
 .foo {
   left: 0;
   height: 100px;
-  position
-  right: 0;
+  positionright: 0;
   top: 0;
 }
 
@@ -135,7 +135,6 @@ In this scenario the nav element will have the class `sn-minimise` added when th
 </header>
 ```
 
-
 ## Development server
 
 Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files.
@@ -168,18 +167,19 @@ Run `npm run release` to create a new release. This will use [Standard Version][
 
 To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI README][angular-cli-readme].
 
-
 [travis-badge]: https://travis-ci.org/thisissoon/angular-scroll-collapse.svg?branch=master
 [travis-badge-url]: https://travis-ci.org/thisissoon/angular-scroll-collapse
 [coveralls-badge]: https://coveralls.io/repos/github/thisissoon/angular-scroll-collapse/badge.svg?branch=master
 [coveralls-badge-url]: https://coveralls.io/github/thisissoon/angular-scroll-collapse?branch=master
+[prettier-badge]: https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=shield
+[prettier-badge-url]: https://github.com/prettier/prettier
 [angular]: https://angular.io/
-[commitizen]:http://commitizen.github.io/cz-cli/
-[commitizen-badge]:https://img.shields.io/badge/commitizen-friendly-brightgreen.svg
-[conventional-changelog]:https://github.com/conventional-changelog/conventional-changelog
-[standard-version]:https://github.com/conventional-changelog/standard-version
-[Karma]:https://karma-runner.github.io
-[Protractor]:http://www.protractortest.org/
-[angular-cli]:https://github.com/angular/angular-cli
-[angular-cli-readme]:https://github.com/angular/angular-cli/blob/master/README.md
-[apfv5]:https://goo.gl/jB3GVv
+[commitizen]: http://commitizen.github.io/cz-cli/
+[commitizen-badge]: https://img.shields.io/badge/commitizen-friendly-brightgreen.svg
+[conventional-changelog]: https://github.com/conventional-changelog/conventional-changelog
+[standard-version]: https://github.com/conventional-changelog/standard-version
+[karma]: https://karma-runner.github.io
+[protractor]: http://www.protractortest.org/
+[angular-cli]: https://github.com/angular/angular-cli
+[angular-cli-readme]: https://github.com/angular/angular-cli/blob/master/README.md
+[apfv5]: https://goo.gl/jB3GVv

angular.json

@@ -17,13 +17,8 @@
             "tsConfig": "src/tsconfig.app.json",
             "polyfills": "src/polyfills.ts",
             "progress": false,
-            "assets": [
-              "src/assets",
-              "src/favicon.ico"
-            ],
-            "styles": [
-              "src/styles.scss"
-            ],
+            "assets": ["src/assets", "src/favicon.ico"],
+            "styles": ["src/styles.scss"],
             "scripts": []
           },
           "configurations": {
@@ -72,25 +67,15 @@
             "tsConfig": "src/tsconfig.spec.json",
             "progress": false,
             "scripts": [],
-            "styles": [
-              "src/styles.scss"
-            ],
-            "assets": [
-              "src/assets",
-              "src/favicon.ico"
-            ]
+            "styles": ["src/styles.scss"],
+            "assets": ["src/assets", "src/favicon.ico"]
           }
         },
         "lint": {
           "builder": "@angular-devkit/build-angular:tslint",
           "options": {
-            "tsConfig": [
-              "src/tsconfig.app.json",
-              "src/tsconfig.spec.json"
-            ],
-            "exclude": [
-              "**/node_modules/**"
-            ]
+            "tsConfig": ["src/tsconfig.app.json", "src/tsconfig.spec.json"],
+            "exclude": ["**/node_modules/**"]
           }
         }
       }
@@ -110,12 +95,8 @@
         "lint": {
           "builder": "@angular-devkit/build-angular:tslint",
           "options": {
-            "tsConfig": [
-              "e2e/tsconfig.e2e.json"
-            ],
-            "exclude": [
-              "**/node_modules/**"
-            ]
+            "tsConfig": ["e2e/tsconfig.e2e.json"],
+            "exclude": ["**/node_modules/**"]
           }
         }
       }

karma.conf.js

@@ -1,7 +1,7 @@
 // Karma configuration file, see link for more information
 // https://karma-runner.github.io/1.0/config/configuration-file.html
 
-module.exports = function (config) {
+module.exports = function(config) {
   config.set({
     basePath: '',
     frameworks: ['jasmine', '@angular-devkit/build-angular'],
@@ -13,19 +13,21 @@ module.exports = function (config) {
       require('@angular-devkit/build-angular/plugins/karma'),
       require('karma-spec-reporter')
     ],
-    client:{
+    client: {
       clearContext: false // leave Jasmine Spec Runner output visible in browser
     },
     coverageIstanbulReporter: {
-      dir: require('path').join(__dirname, 'coverage'), reports: [ 'html', 'lcovonly', 'text-summary' ],
+      dir: require('path').join(__dirname, 'coverage'),
+      reports: ['html', 'lcovonly', 'text-summary'],
       fixWebpackSourcePaths: true
     },
     angularCli: {
       environment: 'dev'
     },
-    reporters: config.angularCli && config.angularCli.codeCoverage ?
-      ['spec', 'kjhtml', 'coverage-istanbul'] :
-      ['spec', 'kjhtml'],
+    reporters:
+      config.angularCli && config.angularCli.codeCoverage
+        ? ['spec', 'kjhtml', 'coverage-istanbul']
+        : ['spec', 'kjhtml'],
     port: 9876,
     colors: true,
     logLevel: config.LOG_INFO,