@alexlit/lint-kit 103.0.0 → 104.0.0

package/packages/config-stylelint/plugins/scss.js

@@ -0,0 +1,83 @@
+/* eslint-disable unicorn/no-null */
+const KEBAB_CASE_PATTERN = '^[a-z]+([a-z0-9-]+[a-z0-9]+)?$';
+
+/** @see [stylelint-scss](https://github.com/kristerkari/stylelint-scss) */
+module.exports = {
+  extends: ['stylelint-config-standard-scss'],
+
+  plugins: ['stylelint-scss'],
+
+  rules: {
+    'scss/at-each-key-value-single-line': true,
+    'scss/at-else-if-parentheses-space-before': 'always',
+    'scss/at-extend-no-missing-placeholder': true,
+    'scss/at-function-pattern': KEBAB_CASE_PATTERN,
+    'scss/at-if-no-null': true,
+    'scss/at-import-no-partial-leading-underscore': true,
+    'scss/at-import-partial-extension': 'always',
+    'scss/at-mixin-argumentless-call-parentheses': 'always',
+    'scss/at-mixin-named-arguments': 'always',
+    'scss/at-mixin-parentheses-space-before': 'never',
+    'scss/at-mixin-pattern': KEBAB_CASE_PATTERN,
+    'scss/at-rule-conditional-no-parentheses': true,
+
+    'scss/at-rule-no-unknown': [
+      true,
+      {
+        ignoreAtRules: [
+          'apply',
+          'container',
+          'responsive',
+          'screen',
+          'tailwind',
+          'variants',
+        ],
+      },
+    ],
+
+    'scss/at-use-no-unnamespaced': true,
+    'scss/comment-no-empty': true,
+    'scss/comment-no-loud': null,
+    'scss/declaration-nested-properties': 'never',
+    'scss/declaration-nested-properties-no-divided-groups': true,
+    'scss/dimension-no-non-numeric-values': true,
+    'scss/dollar-variable-default': [true, { ignore: 'local' }],
+
+    'scss/dollar-variable-empty-line-before': [
+      'always',
+      {
+        except: ['first-nested', 'after-comment', 'after-dollar-variable'],
+      },
+    ],
+
+    'scss/dollar-variable-first-in-block': [
+      true,
+      {
+        except: [],
+        ignore: ['comments', 'imports'],
+      },
+    ],
+
+    'scss/dollar-variable-no-missing-interpolation': true,
+    'scss/dollar-variable-no-namespaced-assignment': true,
+    'scss/dollar-variable-pattern': KEBAB_CASE_PATTERN,
+    'scss/double-slash-comment-whitespace-inside': 'always',
+    'scss/function-color-relative': true,
+    'scss/function-no-unknown': [true, { ignoreFunctions: ['v-bind'] }],
+    'scss/function-quote-no-quoted-strings-inside': true,
+    'scss/function-unquote-no-unquoted-strings-inside': true,
+    'scss/map-keys-quotes': 'always',
+    'scss/no-duplicate-dollar-variables': true,
+    'scss/no-duplicate-mixins': true,
+    'scss/no-global-function-names': null,
+    'scss/operator-no-newline-after': null,
+    'scss/operator-no-unspaced': true,
+    'scss/percent-placeholder-pattern': KEBAB_CASE_PATTERN,
+    'scss/selector-nest-combinators': 'always',
+
+    'scss/selector-no-redundant-nesting-selector': [
+      true,
+      { ignoreKeywords: [] },
+    ],
+  },
+};

package/packages/config-stylelint/plugins/selector-no-empty.js

@@ -0,0 +1,8 @@
+/** @see [stylelint-selector-no-empty](https://github.com/ssivanatarajan/stylelint-selector-no-empty) */
+module.exports = {
+  plugins: ['stylelint-selector-no-empty'],
+
+  rules: {
+    'plugin/stylelint-selector-no-empty': true,
+  },
+};

package/packages/config-stylelint/plugins/use-nesting.js

@@ -0,0 +1,8 @@
+/** @see [stylelint-use-nesting](https://github.com/csstools/stylelint-use-nesting) */
+module.exports = {
+  plugins: ['stylelint-use-nesting'],
+
+  rules: {
+    'csstools/use-nesting': ['always', { except: [], syntax: 'scss' }],
+  },
+};

package/packages/config-stylelint/plugins/vue.js

@@ -0,0 +1,5 @@
+/** @see [stylelint-config-recommended-vue](https://github.com/ota-meshi/stylelint-config-recommended-vue) */
+
+module.exports = {
+  extends: 'stylelint-config-recommended-vue',
+};

package/packages/config-stylelint/test/button.scss

@@ -0,0 +1,7 @@
+@import 'logical.scss';
+
+@use 'sass:color';
+@use 'sass:math';
+
+$test2: blue !default;
+$test3: blue !default;

package/packages/config-stylelint/test/comp-vue.vue

@@ -0,0 +1,36 @@
+<style lang="scss">
+  .inset {
+    bottom: 0;
+    left: 0;
+    right: 0;
+    top: 0;
+  }
+
+  .margin {
+    margin-left: 0;
+  }
+
+  .padding {
+    padding-left: 0;
+    padding-right: 0;
+  }
+
+  .float {
+    float: left;
+  }
+
+  .text-align {
+    text-align: left;
+  }
+
+  .ui-autocomplete__search {
+    background-color: white;
+    border-bottom: 1px solid var(--ui-color-border);
+    left: 0;
+    margin-bottom: 0;
+    padding: 16px;
+    position: sticky;
+    transform: translateY(-16px);
+    z-index: 1;
+  }
+</style>

package/packages/config-stylelint/test/logical.scss

@@ -0,0 +1,35 @@
+.inset {
+  bottom: 0;
+  left: 0;
+  right: 0;
+  top: 0;
+}
+
+.margin {
+  margin-left: 0;
+}
+
+.padding {
+  padding-left: 0;
+  padding-right: 0;
+}
+
+.float {
+  float: left;
+}
+
+.text-align {
+  text-align: left;
+}
+
+.ui-autocomplete__search {
+  background-color: white;
+  border-bottom: 1px solid var(--ui-color-border);
+  left: 0;
+  margin-bottom: 0;
+  padding: 16px;
+  position: sticky;
+  top: 16px;
+  transform: translateY(-16px);
+  z-index: 1;
+}

package/packages/config-stylelint/test/scss.scss

@@ -0,0 +1,457 @@
+$font-weights: (
+  'regular': 400,
+  'medium': 500,
+  'bold': 700,
+) !default;
+
+@import 'logical.scss';
+
+@tailwind utility;
+
+@use 'sass:map';
+@use 'sass:color';
+
+.example-1 {
+  display: inline;
+}
+
+.example {
+  color: rgb(0 0 0);
+
+  @screen sm {
+    color: rebeccapurple;
+  }
+
+  @media ($laptop) {
+    grid-template-columns: 1fr;
+  }
+
+  @media ($mobile-l) {
+    padding: 1rem 0;
+  }
+
+  @media (width >= 500px) and (width <= 600px) {
+  }
+
+  @media (width >= 640px) {
+    color: rebeccapurple;
+  }
+
+  &:hover,
+  &:focus {
+    color: rebeccapurple;
+  }
+}
+
+.test-s {
+  color: rgb(3 3 3);
+  grid-template-areas:
+    'a a a d'
+    'b b b b';
+}
+
+a {
+  color: black;
+}
+
+@each $key, $value in $font-weights {
+  $value: map.get($font-weights, $key);
+}
+
+s {
+}
+
+@keyframes slide-right {
+}
+
+@mixin variables {
+  --ui-button-icon-size: calc(
+    var(--ui-button-font-size) * var(--ui-button-line-height)
+  );
+  --ui-icon-default-background-color: var(
+    --ui-button-color,
+    var(--ui-color-primary)
+  );
+  --ui-button-padding: 8px;
+  --ui-button-font-size: 16px;
+  --ui-button-line-height: 1.5;
+  --ui-button-color: currentColor;
+  --ui-button-color--h: currentColor;
+  --ui-button-color--p: currentColor;
+}
+
+.a {
+  .a,
+  .b {
+  }
+
+  .a,
+  b {
+  }
+
+  a,
+  .b {
+  }
+
+  a,
+  b {
+  }
+
+  .a {
+  }
+
+  .b {
+  }
+
+  * {
+  }
+
+  &[dir] {
+  }
+
+  a {
+  }
+
+  b {
+  }
+}
+
+.test {
+  transition: color 350ms ease-in;
+
+  @media screen and (prefers-reduced-motion: reduce) {
+    transition: none;
+  }
+}
+
+@mixin font-size-default {
+  font-size: 16px;
+}
+
+.test2 {
+  @media screen and (prefers-reduced-motion: reduce) {
+    animation: none;
+  }
+}
+
+header {
+  &:hover,
+  &:focus {
+  }
+}
+
+.l__button--3 {
+  @extend %sdf;
+
+  @include ddf();
+  @include variables();
+  @include ddf();
+  @include ddf();
+  @include ddf();
+
+  @apply ddd ring-cyan-500 
+  transition-all duration-500 
+     demo-dark:ring-cyan-400
+         ring-2 absolute left-1/2 top-1/2 w-4 h-4 -mt-2 -ml-2 flex items-center justify-center bg-white rounded-full shadow red-500 bg-red-200;
+
+  align-items: center;
+  appearance: none;
+  background-color: var(
+    --ui-button-color,
+    var(--ui-icon-default-background-color)
+  );
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  display: inline-flex;
+  flex-grow: 0;
+  flex-shrink: 0;
+  font-stretch: normal;
+  font-style: normal;
+  font-weight: 600;
+  height: var(--height);
+  letter-spacing: normal;
+  overflow: hidden;
+  position: relative;
+  text-align: center;
+  text-decoration: none;
+  top: 0;
+  transition-duration: 0s;
+  user-select: none;
+
+  @supports (width: 0) {
+  }
+
+  &:hover,
+  &:focus {
+    background-color: var(
+      --ui-button-color--h,
+      var(--ui-icon-default-background-color)
+    );
+    text-decoration: none;
+  }
+
+  &:active {
+    background-color: var(
+      --ui-button-color--p,
+      var(--ui-icon-default-background-color)
+    );
+    outline: none;
+  }
+
+  &:disabled {
+    cursor: not-allowed;
+    opacity: 0.5;
+
+    &:hover,
+    &:focus,
+    &:active {
+      background-color: var(--ui-button-color);
+    }
+  }
+
+  &::before {
+  }
+
+  &::after {
+    color: rebeccapurple;
+  }
+
+  &::file-selector-button {
+  }
+
+  &::-moz-range-track {
+  }
+
+  ::v-deep {
+    .test3 {
+      .test4 {
+        .test5 {
+          .test6 {
+            @media ($mobile-l) {
+            }
+          }
+        }
+      }
+    }
+  }
+
+  .animation {
+    @media (prefers-reduced-motion: reduce) {
+      animation: none;
+      content-visibility: hidden;
+    }
+  }
+
+  .f {
+  }
+
+  &.f {
+  }
+
+  + .ui-button {
+    margin-left: var(--ui-button-padding);
+
+    @media ($mobile-l) {
+      margin-left: calc(var(--ui-button-padding) / 2);
+    }
+  }
+
+  ~ .ui-button {
+    margin-left: var(--ui-button-padding);
+
+    @media ($mobile-l) {
+      margin-left: calc(var(--ui-button-padding) / 2);
+    }
+  }
+
+  ~ .ui-buttons {
+    margin-left: var(--ui-button-padding); // dsf
+
+    @media ($mobile-l) {
+      margin-left: calc(var(--ui-button-padding) / 2);
+    }
+  }
+
+  > .ui-button {
+    margin-left: var(--ui-button-padding);
+
+    @media ($mobile-l) {
+      margin-left: calc(var(--ui-button-padding) / 2);
+    }
+  }
+
+  &.ui-button {
+    + a {
+      margin-left: var(--ui-button-padding);
+
+      @media ($mobile-l) {
+        margin-left: calc(var(--ui-button-padding) / 2);
+      }
+    }
+  }
+
+  * {
+  }
+
+  &[test] {
+  }
+
+  [test] {
+  }
+
+  &--block {
+    width: 100%;
+  }
+
+  &--color {
+    &--light,
+    &--white {
+      --ui-button-icon-size: calc(
+        var(--ui-button-font-size) * var(--ui-button-line-height) - 2px
+      );
+
+      border: solid 1px var(--ui-color-input-border);
+      color: var(--ui-color-secondary);
+    }
+
+    &--link {
+      --ui-button-icon-size: calc(
+        var(--ui-button-font-size) * var(--ui-button-line-height) - 2px
+      );
+
+      background-color: transparent !important;
+      border: solid 1px var(--ui-color-input-border);
+      color: var(--ui-button-color);
+
+      &:hover,
+      &:focus {
+        color: var(
+          --ui-button-color--h,
+          var(--ui-icon-default-background-color)
+        );
+      }
+
+      &:active {
+        color: var(
+          --ui-button-color--p,
+          var(--ui-icon-default-background-color)
+        );
+      }
+    }
+  }
+
+  &--size {
+    &--default {
+      --ui-button-padding: 8px;
+      --ui-button-font-size: 16px;
+      --ui-button-line-height: 1.5;
+    }
+
+    &--large {
+      --ui-button-padding: 16px;
+      --ui-button-font-size: 20px;
+      --ui-button-line-height: 1.2;
+    }
+
+    &--small {
+      --ui-button-padding: 8px;
+      --ui-button-font-size: 14px;
+      --ui-button-line-height: 1.14;
+    }
+  }
+}
+
+.ui-textarea__field {
+  background-color: white;
+  border: 1px solid var(--ui-color-input-border);
+  border-radius: 4px;
+  box-shadow: inset 0 0 0 1px transparent;
+  color: var(--ui-color-article-text);
+  display: block;
+  font-size: 16px;
+  font-stretch: normal;
+  font-style: normal;
+  font-weight: normal;
+  letter-spacing: normal;
+  line-height: 1.5;
+  min-height: 58px;
+  min-width: 0;
+  padding: 16px;
+  position: relative;
+  resize: vertical;
+  transition-duration: 0.1s;
+  width: 100%;
+
+  &:focus {
+    background-color: white;
+    border-color: var(--ui-color-outline);
+    box-shadow: inset 0 0 0 1px var(--ui-color-outline);
+    outline: none;
+
+    @at-root .ui-textarea[class*='--invalid'] & {
+      border-color: var(--ui-color-danger);
+      box-shadow: inset 0 0 0 1px var(--ui-color-danger);
+    }
+
+    @at-root .ui-textarea[class*='--invalid'] .ui-textarea__prefix + & {
+      border-left-color: var(--ui-color-danger);
+    }
+  }
+
+  &::placeholder {
+    color: var(--ui-color-placeholder);
+  }
+
+  .test {
+    outline: none;
+  }
+
+  &[disabled] {
+    background-color: var(--ui-color-light);
+    border-color: var(--ui-color-light);
+  }
+}
+
+.ui-button__text-wrap {
+  align-items: center;
+  display: flex;
+  flex-grow: 1;
+  font-size: var(--ui-button-font-size);
+  justify-content: center;
+  line-height: var(--ui-button-line-height);
+  padding: var(--ui-button-padding);
+}
+
+.ui-button__prefix {
+  align-items: center;
+  display: flex;
+  margin-right: 8px;
+
+  &:only-child {
+    margin-right: 0;
+  }
+}
+
+.ui-button__text {
+  position: relative;
+}
+
+.ui-button__suffix {
+  --ui-bitton-suffix-size: calc(
+    calc(var(--ui-button-padding) * 2) + var(--ui-button-icon-size)
+  );
+
+  align-items: center;
+  align-self: stretch;
+  background-color: var(--ui-button-color--h, transparent);
+  border-radius: 4px;
+  display: flex;
+  flex-shrink: 0;
+  justify-content: center;
+  width: var(--ui-bitton-suffix-size);
+
+  @at-root .ui-button[class*='--color--link'] & {
+    background-color: transparent !important;
+  }
+}

package/packages/config-stylelint/test/tailwind.css

@@ -0,0 +1,8 @@
+@tailwind utility;
+
+.test {
+  @apply blue ring-cyan-500  blue-
+    transition-all duration-500 
+       demo-dark:ring-cyan-400
+           ring-2 absolute left-1/2 top-1/2 w-4 h-4 -mt-2 -ml-2 flex items-center justify-center bg-white rounded-full shadow red-500 bg-red-200;
+}

package/scripts/lint.sh

@@ -1,12 +1,14 @@
-# Launch generic linter
+# Запускает линтеры
 
 OPTION=${1}
 
-COLOR_TITLE='\e[92m'
-COLOR_LINTERS='\e[33m'
-COLOR_DEFAULT='\e[39m'
+DEFAULT='\e[39m'
+GREEN='\e[92m'
+YELLOW='\e[33m'
 
-echo -e "${COLOR_TITLE}linters: ${COLOR_LINTERS}eslint, htmllint, markdownlint, npmlint, stylelint, ${COLOR_DEFAULT}"
+clear
+
+echo -e "${YELLOW}Запускаю линтеры: ${GREEN}eslint, htmllint, markdownlint, npmlint, stylelint...${DEFAULT}"
 
 npm run lint:eslint --if-present ${OPTION}
 npm run lint:htmllint --if-present

package/scripts/semver.sh

@@ -1,5 +1,18 @@
-# Update package version
+# Обновляет версию пакета
 
-git add --all
-git commit -m 'chore: preparing for version update'
-npm version $1
+VERSION=${1:-patch} # <major | minor | patch>
+
+DEFAULT='\e[39m'
+GREEN='\e[32m'
+YELLOW='\e[33m'
+
+CURRENT_DIR=${PWD##*/}
+
+clear
+
+echo -e "${YELLOW}Поднимаю ${GREEN}${VERSION}${YELLOW} версию пакета ${GREEN}${CURRENT_DIR}${YELLOW}...${DEFAULT}"
+
+git add .
+git commit -m "chore(${CURRENT_DIR}): preparing for version update"
+
+standard-version --release-as ${VERSION} --releaseCommitMessageFormat "chore(release:${CURRENT_DIR}): {{currentTag}}"