Pro 5929 fix stylelint (#4551)

* install and use stylelint-config-apostrophe instead of specific config
* fix all lint errors

Author: ValJed

.stylelintrc

@@ -1,95 +1,3 @@
 {
-  plugins: [
-    'stylelint-order',
-    'stylelint-declaration-strict-value'
-  ],
-  rules: {
-    'color-hex-length': 'short',
-    'color-named': 'never',
-    'color-no-invalid-hex': true,
-    'declaration-property-unit-allowed-list': { 'line-height': [] },
-    'font-family-no-duplicate-names': true,
-    'number-leading-zero': 'always',
-    'number-max-precision': 2,
-    'number-no-trailing-zeros': true,
-    'string-no-newline': true,
-    'length-zero-no-unit': true,
-    'unit-case': 'lower',
-    'unit-no-unknown': true,
-    'value-keyword-case': 'lower',
-    'value-list-comma-newline-after': 'always-multi-line',
-    'value-list-comma-space-after': 'always-single-line',
-    'value-list-comma-space-before': 'never',
-    'value-list-max-empty-lines': 0,
-    'shorthand-property-no-redundant-values': true,
-    'property-case': 'lower',
-    'property-no-unknown': true,
-    'property-no-vendor-prefix': true,
-    'declaration-no-important': true,
-    'declaration-colon-space-after': 'always-single-line',
-    'declaration-colon-space-before': 'never',
-    'declaration-block-no-duplicate-properties': true,
-    'declaration-block-no-redundant-longhand-properties': true,
-    'declaration-block-no-shorthand-property-overrides': true,
-    'declaration-block-semicolon-newline-after': 'always',
-    'declaration-block-semicolon-newline-before': 'never-multi-line',
-    'declaration-block-single-line-max-declarations': 1,
-    'declaration-block-trailing-semicolon': 'always',
-    'block-closing-brace-empty-line-before': 'never',
-    'block-closing-brace-newline-after': [
-      'always',
-      { ignoreAtRules: ['if', 'else'] }
-    ],
-    'block-closing-brace-newline-before': 'always-multi-line',
-    'block-no-empty': true,
-    indentation: 2,
-    'max-empty-lines': 1,
-    'max-nesting-depth': 2,
-    'selector-list-comma-newline-after': 'always-multi-line',
-    'string-quotes': 'single',
-    'time-min-milliseconds': 150,
-    'order/order': ['declarations', 'rules'],
-    'order/properties-order': [
-      'z-index',
-      'position',
-      'top',
-      'right',
-      'bottom',
-      'left',
-      'display',
-      'overflow',
-      'width',
-      'height',
-      'margin',
-      'padding',
-      'border',
-      'color',
-      'background',
-      'font-family',
-      'font-size',
-      'text-align'
-    ],
-    'scale-unlimited/declaration-strict-value': [
-      ['/color/', 'font', 'font-family', 'font-size', 'z-index'],
-      {
-        ignoreKeywords: [
-          'currentColor',
-          'inherit',
-          'initial',
-          'transparent',
-          'auto'
-        ]
-      }
-    ]
-  },
-  overrides: [
-    {
-      files: ['**/*.scss'],
-      customSyntax: 'postcss-scss'
-    },
-    {
-      files: ['**/*.vue'],
-      customSyntax: 'postcss-html'
-    }
-  ]
+  "extends": "stylelint-config-apostrophe"
 }

CHANGELOG.md

@@ -4,7 +4,9 @@
 
 ### Adds
 
-* Adds pinia and a store to handle modals logic. Methods from the store are registered on `apos.modal` instead of component methods.
+* Adds a pinia store to handle modals logic. 
+* Methods from the store are registered on `apos.modal` instead of methods from `TheAposModals` component.
+* No more need to emit `safe-close` when defining an `AposModal`, modal is automatically resolved when closed.
 
 ### Changes
 
@@ -16,6 +18,7 @@ Page A and page B are siblings.
 Page A has the slug `/peer` and page B has the slug `/peer/page`.
 Now we want page B to be the child of page A.
 We will now end up with page B slug as `/peer/page` and not `/peer/peer/page` as before.
+* Fixes stylelint config file, uses config from our shared configuration, fixes all lint errors. 
 
 ### Adds
 

modules/@apostrophecms/admin-bar/ui/apos/components/TheAposAdminBar.vue

@@ -100,6 +100,7 @@ export default {
 
 :deep(.apos-admin-bar__control-set) {
   @include type-base;
+
   display: flex;
   width: 100%;
   height: 100%;
@@ -112,25 +113,30 @@ export default {
 :deep(.apos-context-menu__pane) {
   min-width: 150px;
 }
+
 :deep(.flip-enter) { // to the ground
   transform: translateY(-20%);
   opacity: 0;
 }
+
 :deep(.flip-leave) { // in the frame
   transform: translateY(0);
   opacity: 1;
 }
+
 :deep(.flip-enter-to) { // from the ground
   transform: translateY(0);
   opacity: 1;
 }
+
 :deep(.flip-leave-to) { // to the sky
   transform: translateY(20%);
   opacity: 0;
 }
 
 :deep(.flip-enter-active), :deep(.flip-leave-active) {
-  transition: all 150ms;
+  transition: all 200ms;
+
   &.apos-admin-bar__control-set__group {
     position: absolute;
   }

modules/@apostrophecms/admin-bar/ui/apos/components/TheAposAdminBarLocale.vue

@@ -192,8 +192,9 @@ export default {
 .apos-admin-locales {
   position: relative;
   margin-right: $spacing-base;
-  padding-left: $spacing-base;
   padding-right: $spacing-base;
+  padding-left: $spacing-base;
+
   &::before,
   &::after {
     content: '';
@@ -214,6 +215,7 @@ export default {
 
   &:deep(.apos-button__label) {
     @include type-small;
+
     color: var(--a-primary);
     font-weight: var(--a-weight-bold);
     letter-spacing: 1px;
@@ -226,6 +228,7 @@ export default {
 
 .apos-locales-filter {
   @include type-large;
+
   box-sizing: border-box;
   width: 100%;
   padding: 20px 45px 20px 20px;
@@ -248,11 +251,11 @@ export default {
 }
 
 .apos-locales {
+  margin: $spacing-base 0;
+  padding-left: 0;
   list-style-type: none;
   max-height: 350px;
   overflow-y: scroll;
-  padding-left: 0;
-  margin: $spacing-base 0;
   font-weight: var(--a-weight-base);
 }
 

modules/@apostrophecms/admin-bar/ui/apos/components/TheAposAdminBarUser.vue

@@ -56,12 +56,13 @@ export default {
 
   :deep(.apos-button) {
     @include type-base;
+
     color: var(--a-text-primary);
   }
 
   :deep(.apos-context-menu__popup) {
     right: 0;
-    transform: translatex(10px);
+    transform: translateX(10px);
   }
 }
 

modules/@apostrophecms/admin-bar/ui/apos/components/TheAposContextModeAndSettings.vue

@@ -187,6 +187,7 @@ export default {
 <style lang="scss" scoped>
 .apos-admin-bar__control-set--mode-and-settings {
   justify-content: flex-end;
+
   &:deep(.apos-button) {
     margin-left: 4px;
   }

modules/@apostrophecms/admin-bar/ui/apos/components/TheAposContextTitle.vue

@@ -148,9 +148,10 @@ export default {
 </script>
 <style lang="scss" scoped>
 .apos-admin-bar__control-set--title {
-  justify-content: center;
   align-items: center;
+  justify-content: center;
 }
+
 .apos-admin-bar__title {
   display: inline-flex;
   align-items: center;
@@ -169,8 +170,8 @@ export default {
 
   &__separator {
     align-items: center;
-    padding: 0 7px;
     margin-top: 1px;
+    padding: 0 7px;
   }
 
   &__document {

modules/@apostrophecms/admin-bar/ui/apos/components/TheAposSavingIndicator.vue

@@ -121,14 +121,17 @@ export default {
 <style lang="scss" scoped>
 .apos-admin-bar__status {
   @include type-help;
+
   position: relative;
   margin-left: 7.5px;
   opacity: 1;
   color: var(--a-base-2);
-  transition: opacity 150ms;
+  transition: opacity 200ms;
+
   &.apos-is-hidden {
     opacity: 0;
   }
+
   .apos-is-success {
     color: var(--a-success);
   }
@@ -148,14 +151,15 @@ export default {
 }
 
 .apos-admin-bar__status__icon {
-  margin-right: 7.5px;
   width: 18px;
   height: 18px;
+  margin-right: 7.5px;
 }
 
 .apos-admin-bar__status__label {
   opacity: 1;
   transition: opacity 200ms ease;
+
   &.apos-is-hidden {
     opacity: 0;
   }

modules/@apostrophecms/area/ui/apos/components/AposAreaContextualMenu.vue

@@ -294,6 +294,7 @@ export default {
 .apos-area-menu__button {
   @include apos-button-reset();
   @include type-base;
+
   box-sizing: border-box;
   width: 100%;
   padding: 5px 20px;
@@ -329,11 +330,13 @@ export default {
 
 .apos-area-menu__group-label {
   @include apos-button-reset();
-  box-sizing: border-box;
+
   display: flex;
-  width: 100%;
+  box-sizing: border-box;
   justify-content: space-between;
+  width: 100%;
   padding: 10px 20px;
+
   &:hover {
     cursor: pointer;
   }
@@ -346,6 +349,7 @@ export default {
 
 .apos-area-menu__group-chevron {
   @include apos-transition();
+
   transform: rotate(90deg);
 }
 
@@ -354,23 +358,25 @@ export default {
 }
 
 .apos-area-menu__group {
-  border-bottom: 1px solid var(--a-base-8);
-  padding-bottom: 10px;
   margin: 10px 0;
+  padding-bottom: 10px;
+  border-bottom: 1px solid var(--a-base-8);
 }
+
 .apos-area-menu__item:last-child.apos-has-group .apos-area-menu__group {
-  border-bottom: none;
   margin-bottom: 0;
+  border-bottom: none;
 }
 
 .apos-area-menu__items--accordion {
+  @include apos-transition($duration:0.3s);
+
   overflow: hidden;
   max-height: 0;
-  @include apos-transition($duration:0.3s);
 }
 
 .apos-area-menu__items--accordion.apos-is-active {
-  transition-delay: 0.25s;
+  transition-delay: 250ms;
   max-height: 20rem;
 }
 

modules/@apostrophecms/area/ui/apos/components/AposAreaEditor.vue

@@ -621,13 +621,13 @@ function cancelRefresh(refreshOptions) {
 <style lang="scss" scoped>
 .apos-empty-area {
   display: flex;
-  padding: 30px;
-  justify-content: center;
-  align-items: center;
   flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 30px;
+  border: 1px solid var(--a-base-8);
   min-height: 50px;
   background-color: var(--a-base-9);
-  border: 1px solid var(--a-base-8);
   border-radius: var(--a-border-radius);
 }