chore: 🤖 add prettier for auto-formatting JS and SCSS

addons/rose/.prettierrc

@@ -0,0 +1,4 @@
+{
+  "singleQuote": true,
+  "printWidth": 80
+}

addons/rose/README.md

@@ -39,6 +39,10 @@ List of available project commands.  `yarn run <command-name>`
 | lint | Runs all lint commands. |
 | lint:hbs | Lints template `hbs` files. |
 | lint:js | Lints `js` files. |
+| lint:sass | Lints `scss` files. |
+| format | Runs all auto-formatters. |
+| format:js | Auto-formats `js` files using Prettier. |
+| format:sass | Auto-formats `scss` files using Prettier. |
 | start | Runs the dummy app local server. |
 | test | Runs all tests. |
 | test:all | Runs tests across multiple Ember versions with ember-try. |
@@ -52,6 +56,13 @@ Additional commands in the monorepo package may affect this projects.
 * `yarn lint:js`
 * `yarn lint:js --fix`
 
+## Formatting
+
+Before submitting your work, be sure to run auto-formatters
+(see commands above).  This helps to ensure consistency among authors.
+
+* `yarn format`
+
 ## Running tests
 
 * `yarn test` – Runs the test suite on the current Ember version

addons/rose/addon/styles/rose/_index.scss

@@ -1,4 +1,6 @@
-@import "reset";
-@import "variables";
+@import 'reset';
+@import 'variables';
 
-html { background: pink; }
+html {
+  background: pink;
+}

addons/rose/addon/styles/rose/_reset.scss

@@ -3,7 +3,87 @@
    License: none (public domain)
 */
 
-html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
+html,
+body,
+div,
+span,
+applet,
+object,
+iframe,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p,
+blockquote,
+pre,
+a,
+abbr,
+acronym,
+address,
+big,
+cite,
+code,
+del,
+dfn,
+em,
+img,
+ins,
+kbd,
+q,
+s,
+samp,
+small,
+strike,
+strong,
+sub,
+sup,
+tt,
+var,
+b,
+u,
+i,
+center,
+dl,
+dt,
+dd,
+ol,
+ul,
+li,
+fieldset,
+form,
+label,
+legend,
+table,
+caption,
+tbody,
+tfoot,
+thead,
+tr,
+th,
+td,
+article,
+aside,
+canvas,
+details,
+embed,
+figure,
+figcaption,
+footer,
+header,
+hgroup,
+menu,
+nav,
+output,
+ruby,
+section,
+summary,
+time,
+mark,
+audio,
+video {
   margin: 0;
   padding: 0;
   border: 0;
@@ -14,7 +94,17 @@ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockq
 
 /* HTML5 display-role reset for older browsers */
 
-article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
+article,
+aside,
+details,
+figcaption,
+figure,
+footer,
+header,
+hgroup,
+menu,
+nav,
+section {
   display: block;
 }
 
@@ -22,23 +112,27 @@ body {
   line-height: 1;
 }
 
-ol, ul {
+ol,
+ul {
   list-style: none;
 }
 
-blockquote, q {
+blockquote,
+q {
   quotes: none;
 }
 
 blockquote {
-  &:before, &:after {
+  &:before,
+  &:after {
     content: '';
     content: none;
   }
 }
 
 q {
-  &:before, &:after {
+  &:before,
+  &:after {
     content: '';
     content: none;
   }

addons/rose/addon/styles/rose/variables/_index.scss

@@ -1,2 +1,2 @@
-@import "color";
-@import "opacity";
+@import 'color';
+@import 'opacity';

addons/rose/addon/styles/rose/variables/color/_index.scss

@@ -1,2 +1,2 @@
-@import "sass";
-@import "css";
+@import 'sass';
+@import 'css';

addons/rose/addon/styles/rose/variables/color/_sass.scss

@@ -1,4 +1,4 @@
-@use "sass:map";
+@use 'sass:map';
 
 /**
  * SASS variables defining colors.  These should not be consumed
@@ -19,12 +19,16 @@ $colors: (
   blue: #1563ff,
   red: #c73445,
   black: rgb(0, 0, 0),
-  white: rgb(255, 255, 255)
+  white: rgb(255, 255, 255),
 ) !default;
 
 $color-values: (
-  white: (500: map.get($colors, white)),
-  black: (500: map.get($colors, black)),
+  white: (
+    500: map.get($colors, white),
+  ),
+  black: (
+    500: map.get($colors, black),
+  ),
   ui-gray: (
     010: #fbfbfc,
     050: #f7f8fa,
@@ -34,30 +38,30 @@ $color-values: (
     500: map.get($colors, ui-gray),
     600: #626873,
     800: #373a42,
-    900: #1f2124
+    900: #1f2124,
   ),
   ui-cool-gray: (
     500: map.get($colors, ui-cool-gray),
     800: #1d2126,
-    900: #060708
+    900: #060708,
   ),
   green: (
     010: #fafdfa,
     100: #c6e9c9,
     500: map.get($colors, green),
-    800: #15501a
+    800: #15501a,
   ),
   yellow: (
     010: #fffdf6,
     100: #fdeeba,
     500: map.get($colors, yellow),
-    800: #725a01
+    800: #725a01,
   ),
   orange: (
     010: #fffcfa,
     100: #fde0c8,
     500: map.get($colors, orange),
-    800: #724119
+    800: #724119,
   ),
   blue: (
     010: #fbfcff,
@@ -69,14 +73,14 @@ $color-values: (
     600: #0f4fd1,
     700: #0e40a3,
     800: #0a2d74,
-    900: #061b46
+    900: #061b46,
   ),
   red: (
     010: #fdfafb,
     100: #efc7cc,
     500: map.get($colors, red),
-    800: #5b1820
-  )
+    800: #5b1820,
+  ),
 ) !default;
 
 // tokens: brand
@@ -90,7 +94,7 @@ $brand: (
   gray-4: #7f7f86,
   gray-3: #4c4c53,
   gray-2: #323339,
-  gray-1: #1d1e23
+  gray-1: #1d1e23,
 ) !default;
 
 // functions to simplify color lookups

addons/rose/app/templates/index.hbs

@@ -1 +1,2 @@
 Dummy app index template
+<Rose::Button />

addons/rose/config/ember-try.js

@@ -2,7 +2,7 @@
 
 const getChannelURL = require('ember-source-channel-url');
 
-module.exports = async function() {
+module.exports = async function () {
   return {
     useYarn: true,
     scenarios: [
@@ -10,41 +10,41 @@ module.exports = async function() {
         name: 'ember-lts-3.12',
         npm: {
           devDependencies: {
-            'ember-source': '~3.12.0'
-          }
-        }
+            'ember-source': '~3.12.0',
+          },
+        },
       },
       {
         name: 'ember-lts-3.16',
         npm: {
           devDependencies: {
-            'ember-source': '~3.16.0'
-          }
-        }
+            'ember-source': '~3.16.0',
+          },
+        },
       },
       {
         name: 'ember-release',
         npm: {
           devDependencies: {
-            'ember-source': await getChannelURL('release')
-          }
-        }
+            'ember-source': await getChannelURL('release'),
+          },
+        },
       },
       {
         name: 'ember-beta',
         npm: {
           devDependencies: {
-            'ember-source': await getChannelURL('beta')
-          }
-        }
+            'ember-source': await getChannelURL('beta'),
+          },
+        },
       },
       {
         name: 'ember-canary',
         npm: {
           devDependencies: {
-            'ember-source': await getChannelURL('canary')
-          }
-        }
+            'ember-source': await getChannelURL('canary'),
+          },
+        },
       },
       // The default `.travis.yml` runs this scenario via `yarn test`,
       // not via `ember try`. It's still included here so that running
@@ -53,21 +53,21 @@ module.exports = async function() {
       {
         name: 'ember-default',
         npm: {
-          devDependencies: {}
-        }
+          devDependencies: {},
+        },
       },
       {
         name: 'ember-default-with-jquery',
         env: {
           EMBER_OPTIONAL_FEATURES: JSON.stringify({
-            'jquery-integration': true
-          })
+            'jquery-integration': true,
+          }),
         },
         npm: {
           devDependencies: {
-            '@ember/jquery': '^0.5.1'
-          }
-        }
+            '@ember/jquery': '^0.5.1',
+          },
+        },
       },
       {
         name: 'ember-classic',
@@ -75,15 +75,15 @@ module.exports = async function() {
           EMBER_OPTIONAL_FEATURES: JSON.stringify({
             'application-template-wrapper': true,
             'default-async-observers': false,
-            'template-only-glimmer-components': false
-          })
+            'template-only-glimmer-components': false,
+          }),
         },
         npm: {
           ember: {
-            edition: 'classic'
-          }
-        }
-      }
-    ]
+            edition: 'classic',
+          },
+        },
+      },
+    ],
   };
 };

addons/rose/config/environment.js

@@ -1,5 +1,5 @@
 'use strict';
 
-module.exports = function(/* environment, appConfig */) {
-  return { };
+module.exports = function (/* environment, appConfig */) {
+  return {};
 };

addons/rose/ember-cli-build.js

@@ -2,7 +2,7 @@
 
 const EmberAddon = require('ember-cli/lib/broccoli/ember-addon');
 
-module.exports = function(defaults) {
+module.exports = function (defaults) {
   let app = new EmberAddon(defaults, {
     // Add options here
   });

addons/rose/index.js

@@ -22,8 +22,8 @@ module.exports = {
     const styleTree = mergeTrees([
       new Funnel(stylePath, {
         destDir: this.name,
-        include: ['**/*']
-      })
+        include: ['**/*'],
+      }),
     ]);
 
     // Setup default sassOptions on the running application
@@ -33,6 +33,5 @@ module.exports = {
 
     // Include the addon styles
     app.options.sassOptions.includePaths.push(styleTree);
-  }
-
+  },
 };

addons/rose/package.json

@@ -14,6 +14,9 @@
     "lint:hbs": "ember-template-lint .",
     "lint:js": "eslint .",
     "lint:sass": "sass-lint -v -q",
+    "format": "npm run format:js && npm run format:sass",
+    "format:js": "prettier --write '{addon,app,config,stories,tests}/**/*.js' *.js",
+    "format:sass": "prettier --write {addon,app}/**/*.scss",
     "start": "ember serve",
     "pretest": "yarn lint",
     "test": "ember test",
@@ -52,6 +55,7 @@
     "eslint-plugin-ember": "^7.7.2",
     "eslint-plugin-node": "^11.0.0",
     "loader.js": "^4.7.0",
+    "prettier": "^2.0.5",
     "qunit-dom": "^1.0.0",
     "sass": "^1.26.5",
     "sass-lint": "^1.13.1"

addons/rose/testem.js

@@ -17,9 +17,9 @@ module.exports = {
         //'--disable-software-rasterizer',
         '--mute-audio',
         '--remote-debugging-port=0',
-        '--window-size=1440,900'
-      ].filter(Boolean)
+        '--window-size=1440,900',
+      ].filter(Boolean),
     },
-    Firefox: ['-headless', '--window-size=1440,900']
-  }
+    Firefox: ['-headless', '--window-size=1440,900'],
+  },
 };

addons/rose/tests/dummy/app/router.js

@@ -6,5 +6,4 @@ export default class Router extends EmberRouter {
   rootURL = config.rootURL;
 }
 
-Router.map(function() {
-});
+Router.map(function () {});

addons/rose/tests/dummy/config/environment.js

@@ -1,6 +1,6 @@
 'use strict';
 
-module.exports = function(environment) {
+module.exports = function (environment) {
   let ENV = {
     modulePrefix: 'dummy',
     environment,
@@ -13,14 +13,14 @@ module.exports = function(environment) {
       },
       EXTEND_PROTOTYPES: {
         // Prevent Ember Data from overriding Date.parse.
-        Date: false
-      }
+        Date: false,
+      },
     },
 
     APP: {
       // Here you can pass flags/options to your application instance
       // when it is created
-    }
+    },
   };
 
   if (environment === 'development') {

addons/rose/tests/dummy/config/targets.js

@@ -3,7 +3,7 @@
 const browsers = [
   'last 1 Chrome versions',
   'last 1 Firefox versions',
-  'last 1 Safari versions'
+  'last 1 Safari versions',
 ];
 
 const isCI = !!process.env.CI;
@@ -14,5 +14,5 @@ if (isCI || isProduction) {
 }
 
 module.exports = {
-  browsers
+  browsers,
 };

yarn.lock

@@ -9165,6 +9165,11 @@ prepend-http@^2.0.0:
   resolved "https://registry.yarnpkg.com/prepend-http/-/prepend-http-2.0.0.tgz#e92434bfa5ea8c19f41cdfd401d741a3c819d897"
   integrity sha1-6SQ0v6XqjBn0HN/UAddBo8gZ2Jc=
 
+prettier@^2.0.5:
+  version "2.0.5"
+  resolved "https://registry.yarnpkg.com/prettier/-/prettier-2.0.5.tgz#d6d56282455243f2f92cc1716692c08aa31522d4"
+  integrity sha512-7PtVymN48hGcO4fGjybyBSIWDsLU4H4XlvOHfq91pz9kkGlonzwTfYkaIEwiRg/dAJF9YlbsduBAgtYLi+8cFg==
+
 printf@^0.5.1:
   version "0.5.3"
   resolved "https://registry.yarnpkg.com/printf/-/printf-0.5.3.tgz#8b7eec278d886833312238b2bf42b2b6f250880a"