Update code formatter

.github/contributing.md

@@ -2,6 +2,8 @@
 
 We would love for you to contribute to Milligram and help us make this even better! Start reading this document to see it is not difficult as you might have imagined.
 
+_Note: For issues relating to the site, please use the [milligram/milligram.github.io](https://github.com/milligram/milligram.github.io)_
+
 ## Table of Contents
 
 - [Open an Issue](#open-an-issue)
@@ -28,16 +30,14 @@ Try to solve a problem for each pull request, this increases the chances of acce
 1. Push to the branch: `git push origin my-feature-name`
 1. Submit a pull request!
 
-You can do all of this from your browser using Gitpod, the free online dev environment.
-
-[![Open in Gitpod](https://gitpod.io/button/open-in-gitpod.svg)](https://gitpod.io/#https://github.com/milligram/milligram)
-
-_Note: For issues relating to the site, please use the [milligram/milligram.github.io](https://github.com/milligram/milligram.github.io)_
-
 ## Building
 
 First install [Node.js](https://nodejs.org/en/download/) for the build process. Now install all the dependencies, run `npm install` from the project directory. Once you have the dependencies installed, run `npm start`. This will run the build task which compiles the Sass files into Milligram.css file in the expanded and compressed version.
 
+You can do all of this from your browser using Gitpod, the free online dev environment.
+
+[![Open in Gitpod](https://gitpod.io/button/open-in-gitpod.svg)](https://gitpod.io/#https://github.com/milligram/milligram)
+
 ## Style Guide
 
 Milligram use [Sass](http://sass-lang.com/) to give super powers to CSS. Look at how the code is being maintained, we must always be consistent. We try to follow best practices as much as possible. In addition, here are some tips you should follow:
@@ -77,7 +77,7 @@ Milligram use [Sass](http://sass-lang.com/) to give super powers to CSS. Look at
 			color: #000
 ```
 
-_Note: This style guide was inspired by [Idiomatic.css](https://github.com/necolas/idiomatic-css). Milligram uses an `.editorconfig` file, which most editors support, to enforce these coding standards._
+_Note: This style guide was inspired by [Idiomatic.css](https://github.com/necolas/idiomatic-css)._
 
 ## Test
 

backstop.config.js

@@ -5,13 +5,13 @@ module.exports = {
     {
       name: 'phone',
       width: 320,
-      height: 480
+      height: 480,
     },
     {
       name: 'laptop',
       width: 1280,
-      height: 800
-    }
+      height: 800,
+    },
   ],
   scenarios: [
     {
@@ -24,7 +24,7 @@ module.exports = {
       delay: 500,
       misMatchThreshold: 0.1,
       onReadyScript: null,
-      onBeforeScript: null
+      onBeforeScript: null,
     },
     {
       label: 'Blockquotes',
@@ -36,7 +36,7 @@ module.exports = {
       delay: 500,
       misMatchThreshold: 0.1,
       onReadyScript: null,
-      onBeforeScript: null
+      onBeforeScript: null,
     },
     {
       label: 'Buttons',
@@ -48,7 +48,7 @@ module.exports = {
       delay: 500,
       misMatchThreshold: 0.1,
       onReadyScript: null,
-      onBeforeScript: null
+      onBeforeScript: null,
     },
     {
       label: 'Lists',
@@ -60,7 +60,7 @@ module.exports = {
       delay: 500,
       misMatchThreshold: 0.1,
       onReadyScript: null,
-      onBeforeScript: null
+      onBeforeScript: null,
     },
     {
       label: 'Forms',
@@ -72,7 +72,7 @@ module.exports = {
       delay: 500,
       misMatchThreshold: 0.1,
       onReadyScript: null,
-      onBeforeScript: null
+      onBeforeScript: null,
     },
     {
       label: 'Tables',
@@ -84,7 +84,7 @@ module.exports = {
       delay: 500,
       misMatchThreshold: 0.1,
       onReadyScript: null,
-      onBeforeScript: null
+      onBeforeScript: null,
     },
     {
       label: 'Grids',
@@ -96,7 +96,7 @@ module.exports = {
       delay: 500,
       misMatchThreshold: 0.1,
       onReadyScript: null,
-      onBeforeScript: null
+      onBeforeScript: null,
     },
     {
       label: 'Code',
@@ -108,7 +108,7 @@ module.exports = {
       delay: 500,
       misMatchThreshold: 0.1,
       onReadyScript: null,
-      onBeforeScript: null
+      onBeforeScript: null,
     },
     {
       label: 'Utilities',
@@ -120,19 +120,19 @@ module.exports = {
       delay: 500,
       misMatchThreshold: 0.1,
       onReadyScript: null,
-      onBeforeScript: null
-    }
+      onBeforeScript: null,
+    },
   ],
   paths: {
     bitmaps_reference: 'test/regression',
     bitmaps_test: 'node_modules/backstopjs/.tmp/bitmaps_test',
     casper_scripts: 'node_modules/backstopjs/.tmp/casper_scripts',
     html_report: 'node_modules/backstopjs/.tmp/html_report',
-    ci_report: 'node_modules/backstopjs/.tmp/ci_report'
+    ci_report: 'node_modules/backstopjs/.tmp/ci_report',
   },
   engine: 'phantomjs',
   report: ['browser', 'CLI', 'CI'],
   casperFlags: [],
   debug: false,
-  port: 3002
+  port: 3002,
 }

example.html

@@ -95,9 +95,7 @@
                     >
                   </li>
                   <li class="popover-item">
-                    <a class="popover-link" href="#code" title="Code"
-                      >Code</a
-                    >
+                    <a class="popover-link" href="#code" title="Code">Code</a>
                   </li>
                   <li class="popover-item">
                     <a class="popover-link" href="#utilities" title="Utilities"

package.js

@@ -3,7 +3,7 @@ Package.describe({
   version: '1.3.0',
   summary: 'A minimalist CSS framework.',
   git: 'https://github.com/milligram/milligram.git',
-  documentation: 'readme.md'
+  documentation: 'readme.md',
 })
 
 Package.onUse(api => {

package.json

@@ -47,10 +47,6 @@
     "rimraf": "^3.0.2",
     "sass-lint": "^1.12.1"
   },
-  "engines": {
-    "node": "^12.16.2",
-    "npm": "^6.14.4"
-  },
   "scripts": {
     "autoprefixer": "postcss -u autoprefixer --no-map.inline --autoprefixer.browsers \"last 1 versions\" -r dist/*.css",
     "banner": "banner-cli dist/*.css",
@@ -66,6 +62,14 @@
     "visual-regression:reference": "backstop reference --config backstop.config.js",
     "watch": "onchange src -- run-p build"
   },
+  "engines": {
+    "node": "^12.16.2",
+    "npm": "^6.14.4"
+  },
+  "prettier": {
+    "jsxSingleQuote": false,
+    "trailingComma": "all"
+  },
   "husky": {
     "hooks": {
       "pre-commit": "lint-staged"

test/unit/packages.js

@@ -85,7 +85,7 @@ test('Ignore should be equal', t => {
       if (referenceIndex !== compareIndex)
         t.is(
           JSON.stringify(referenceValue.ignore),
-          JSON.stringify(compareValue.ignore)
+          JSON.stringify(compareValue.ignore),
         )
     })
   })
@@ -97,7 +97,7 @@ test('Keywords should be equal', t => {
       if (referenceIndex !== compareIndex)
         t.is(
           JSON.stringify(referenceValue.keywords),
-          JSON.stringify(compareValue.keywords)
+          JSON.stringify(compareValue.keywords),
         )
     })
   })