feat: activate prettier for scss

.prettierignore

@@ -9,8 +9,9 @@ packages/core/scripts/api.handlebars
 packages/core/scripts/events.handlebars
 packages/core/test/files/annotations.js
 packages/**/annotations.js
-**/uikit-workshop/src/js/**/*
 *.json
 *.md
-*.scss
+**/reset.scss
 **/_meta/_head.*
+**/_meta/_foot.*
+**/development-edition*/source/_patterns/**

packages/core/test/files/_handlebars-test-patterns/atoms/global/_hidden.hbs

@@ -1 +1 @@
-I'm the hidden atom
+I'm the hidden atom

packages/core/test/files/_handlebars-test-patterns/atoms/global/helloworld-withdata.hbs

@@ -1,2 +1,2 @@
 Hello world!
-{{subtitle}}
+{{subtitle}}

packages/core/test/files/_handlebars-test-patterns/atoms/global/helloworld.hbs

@@ -1 +1 @@
-Hello world!
+Hello world!

packages/docs/php-docs/pattern-states.md

@@ -37,7 +37,7 @@ The three default states included with Pattern Lab might not be enough for every
 You can use the following as your CSS template for new pattern states:
 
 ```css
-{% raw %}.newpatternstate:before {
+{% raw %}.newpatternstate::before {
     color: #B10DC9 !important;
 }{% endraw %}
 ```

packages/docs/src/scss/abstracts/_colors.scss

@@ -7,10 +7,6 @@
  * and define them against variables that we can utilise anywhere throughout the project.
  */
 
-
-
-
-
 /*------------------------------------*\
     #GLOBAL TEXT COLOR
 \*------------------------------------*/
@@ -27,23 +23,15 @@ $color-text-bg: $color-white !default;
 $color-text-highlight: $color-gray-93;
 $color-text-highlight-bg: $color-gray-13;
 
-
-
-
-
 /*------------------------------------*\
     #LINKS
 \*------------------------------------*/
 
 $color-links: $color-gray-73 !default;
-$color-links-hover: $color-gray-50!default;
+$color-links-hover: $color-gray-50 !default;
 $color-links-active: $color-gray-93 !default;
 $color-links-visited: $color-gray-93 !default;
 
-
-
-
-
 /*------------------------------------*\
     #BUTTONS
 \*------------------------------------*/
@@ -61,10 +49,6 @@ $color-btn-secondary-border: $color-gray-93 !default;
 $color-btn-disabled: $color-gray-50 !default;
 $color-btn-disabled-bg: $color-gray-07 !default;
 
-
-
-
-
 /*------------------------------------*\
     #FORMS
 \*------------------------------------*/

packages/docs/src/scss/abstracts/_mixins.scss

@@ -3,7 +3,7 @@
 \*------------------------------------*/
 
 /**
- * Body Styles 
+ * Body Styles
  * 1) Prevent Mobile Safari from scaling up text: https://blog.55minutes.com/2012/04/iphone-text-resizing/
  */
 @mixin typographyBody() {
@@ -84,7 +84,7 @@
 	position: relative;
 	z-index: 1;
 
-	&:after {
+	&::after {
 		position: absolute;
 		left: 4px;
 		top: 4px;

packages/docs/src/scss/abstracts/_typography.scss

@@ -7,4 +7,4 @@
  * against variables that we can utilise anywhere throughout the project.
  */
 
- $body-font-size: $font-size-med;
+$body-font-size: $font-size-med;

packages/docs/src/scss/base/_buttons.scss

@@ -7,9 +7,9 @@
  * 1) These should be styled using c-btn
  */
 button {
-  cursor: pointer;
+	cursor: pointer;
 
-  &:focus {
-    @include focus();
-  }
+	&:focus {
+		@include focus();
+	}
 }

packages/docs/src/scss/base/_forms.scss

@@ -10,40 +10,40 @@
  * Input placeholder text base styles
  */
 ::-webkit-input-placeholder {
-  color: $color-form-placeholder;
+	color: $color-form-placeholder;
 }
 
 ::-moz-placeholder {
-  color: $color-form-placeholder;
+	color: $color-form-placeholder;
 }
 
 :-ms-input-placeholder {
-  color: $color-form-placeholder;
+	color: $color-form-placeholder;
 }
 
 /**
  * Fieldset base styles
  */
 fieldset {
-  border: 0;
-  padding: 0;
-  margin: 0;
+	border: 0;
+	padding: 0;
+	margin: 0;
 }
 
 /**
  * Legend base styles
  */
 legend {
-  margin-bottom: 0.25rem;
+	margin-bottom: 0.25rem;
 }
 
 /**
  * Label base styles
  */
 label {
-  display: block;
-  padding-bottom: 0.25rem;
-  color: $color-form-label;
+	display: block;
+	padding-bottom: 0.25rem;
+	color: $color-form-label;
 }
 
 /**
@@ -53,31 +53,31 @@ button,
 input,
 select,
 textarea {
-  font-family: inherit;
-  font-size: $font-size-med;
-  margin: 0;
+	font-family: inherit;
+	font-size: $font-size-med;
+	margin: 0;
 }
 
 /**
  * Text area base styles
  */
 textarea {
-  resize: none;
+	resize: none;
 }
 
 /**
  * Input  and text area base styles
  */
 input,
 textarea {
-  width: 100%;
-  padding: 0.5rem;
-  border: $border-width solid $color-form-border;
-  background: $color-form-bg;
-
-  &:focus {
-    border-color: $color-form-border-focus;
-  }
+	width: 100%;
+	padding: 0.5rem;
+	border: $border-width solid $color-form-border;
+	background: $color-form-bg;
+
+	&:focus {
+		border-color: $color-form-border-focus;
+	}
 }
 
 /**
@@ -90,41 +90,41 @@ input[type='search']::-webkit-search-decoration,
 input[type='url'],
 input[type='number'],
 textarea {
-  -webkit-appearance: none;
+	-webkit-appearance: none;
 }
 
 /**
  * Checkbox and radio button base styles
  */
 input[type='checkbox'],
 input[type='radio'] {
-  width: auto;
-  margin-right: 0.3rem;
-  border-color: $color-form-border;
+	width: auto;
+	margin-right: 0.3rem;
+	border-color: $color-form-border;
 }
 
 /**
  * Search input base styles
  */
 input[type='search'] {
-  -webkit-appearance: none;
-  border-radius: 0;
+	-webkit-appearance: none;
+	border-radius: 0;
 }
 
 /**
  * Select
  * 1) Remove default styling
  */
 select {
-  display: block;
-  font-size: $font-size-med;
-  width: 100%;
-  border: $border-width solid $color-form-border;
-  padding: 0.5rem;
-  background: $color-form-bg;
-  color: $color-form;
-
-  &:focus {
-    border-color: $color-form-border-focus;
-  }
+	display: block;
+	font-size: $font-size-med;
+	width: 100%;
+	border: $border-width solid $color-form-border;
+	padding: 0.5rem;
+	background: $color-form-bg;
+	color: $color-form;
+
+	&:focus {
+		border-color: $color-form-border-focus;
+	}
 }

packages/docs/src/scss/base/_headings.scss

@@ -6,30 +6,30 @@
  * Heading 1 base styles
  */
 h1 {
-  @include typographyHeadingXl();
-  position: relative;
+	@include typographyHeadingXl();
+	position: relative;
 }
 
 /**
  * Heading 2 base styles
  */
 h2 {
-  @include typographyHeadingLarge();
-  position: relative;
+	@include typographyHeadingLarge();
+	position: relative;
 }
 
 /**
  * Heading 3 base styles
  */
 h3 {
-  @include typographyHeadingMed2();
-  position: relative;
+	@include typographyHeadingMed2();
+	position: relative;
 }
 
 /**
  * Heading 4 base styles
  */
 h4 {
-  @include typographyHeadingMed();
-  position: relative;
+	@include typographyHeadingMed();
+	position: relative;
 }

packages/docs/src/scss/base/_links.scss

@@ -6,20 +6,20 @@
  * Link base styles
  */
 a {
-  color: $color-links;
-  text-decoration: none;
-  transition: color $anim-fade-quick $anim-ease;
+	color: $color-links;
+	text-decoration: none;
+	transition: color $anim-fade-quick $anim-ease;
 
-  &:hover,
-  &:focus {
-    color: $color-links-hover;
-  }
+	&:hover,
+	&:focus {
+		color: $color-links-hover;
+	}
 
-  &:focus {
-    @include focus();
-  }
+	&:focus {
+		@include focus();
+	}
 
-  &:active {
-    color: $color-links-active;
-  }
+	&:active {
+		color: $color-links-active;
+	}
 }

packages/docs/src/scss/base/_lists.scss

@@ -6,10 +6,10 @@
  * 1) List base styles
  */
 
- /**
+/**
   * Remove list styles from unordered and ordered lists
   */
-ol, ul {
+ol,
+ul {
 	list-style: none;
-
 }

packages/docs/src/scss/base/_main.scss

@@ -6,18 +6,18 @@
  * Main element
  */
 main {
-  display: block;
-  margin-top: 2rem;
+	display: block;
+	margin-top: 2rem;
 
-  @media all and (min-width: $bp-med) {
-    margin-top: 5rem;
-  }
+	@media all and (min-width: $bp-med) {
+		margin-top: 5rem;
+	}
 }
 
 .c-main--flush {
-  margin-top: 0;
+	margin-top: 0;
 
-  @media all and (min-width: $bp-med) {
-    margin-top: 0;
-  }
+	@media all and (min-width: $bp-med) {
+		margin-top: 0;
+	}
 }