diff --git a/docs/rules/property-sort-order.md b/docs/rules/property-sort-order.md index 5acb8361..8d853fc7 100644 --- a/docs/rules/property-sort-order.md +++ b/docs/rules/property-sort-order.md @@ -4,7 +4,7 @@ Rule `property-sort-order` will enforce the order in which declarations are writ ## Options -* `order`: `'alphabetical'`, [`'concentric'`](http://rhodesmill.org/brandon/2011/concentric-css/), [`'recess'`](http://twitter.github.io/recess/), [`'smacss'`](http://smacss.com/book/formatting), or `[array of properties]` (defaults to `alphabetical`. Unknown properties are sorted alphabetically) +* `order`: `'alphabetical'`, [`'concentric'`](http://rhodesmill.org/brandon/2011/concentric-css/), [`'recess'`](http://twitter.github.io/recess/), [`'smacss'`](http://smacss.com/book/formatting), [`tjw`](https://github.com/TheJaredWilcurt/tjw-sasslint-rules), or `[array of properties]` (defaults to `alphabetical`. Unknown properties are sorted alphabetically) * `ignore-custom-properties`: `true`/`false` (defaults to `false`) Property orders: https://github.com/sasstools/sass-lint/tree/develop/lib/config/property-sort-orders diff --git a/lib/config/property-sort-orders/tjw.yml b/lib/config/property-sort-orders/tjw.yml new file mode 100644 index 00000000..f34d9fe1 --- /dev/null +++ b/lib/config/property-sort-orders/tjw.yml @@ -0,0 +1,491 @@ +################################################# +## ## +## TheJaredWilcurt's Sass-Lint Rules ## +## (from the makers of Scout-App!) ## +## v2.1.0 ## +## ## +################################################# +## https://Scout-App.io ## +################################################# +## ## +## The most comprehensive properpty-sort-order ## +## rule set. Including all CSS properties from ## +## MDN and W3C. It also contains a few common ## +## fallbacks, vendor prefixes, future-proofing ## +## ## +################################################# +## ## +## These are part of a much larger set of very ## +## strict Sass-Lint rules available here: ## +## ## +## github.com/tjw-lint/tjw-sasslint-rules ## +## ## +################################################# + +# Based on: https://github.com/tjw-lint/tjw-sasslint-rules/blob/master/tjwsasslint.yml + +order: + # Effects if the element exists + - content + # Highest effect of where pixel painting begins + - position + - top + - right + - bottom + - left + # How the element is displayed and layout + - display + - columns + - column-count + - column-gap + - column-fill + - column-rule + - column-rule-width + - column-rule-style + - column-rule-color + - column-span + - column-width + - flex + - flex-basis + - flex-direction + - flex-flow + - flex-grow + - flex-shrink + - flex-wrap + - align-content + - align-items + - -ms-grid-row-align + - align-self + - justify-content + - justify-items + - -ms-grid-column-align + - justify-self + - place-content + - place-items + - place-self + - order + - grid + - grid-start + - grid-end + - grid-before + - grid-after + - grid-area + - grid-gap + - gap + - grid-template + - grid-template-areas + - -ms-grid-columns + - grid-template-columns + - -ms-grid-rows + - grid-template-rows + - grid-columns + - grid-column + - -ms-grid-column + - grid-column-start + - -ms-grid-column-span + - grid-column-end + - grid-column-gap + - grid-rows + - grid-row + - -ms-grid-row + - grid-row-start + - -ms-grid-row-span + - grid-row-end + - grid-row-gap + - row-gap + - grid-auto-columns + - grid-auto-rows + - grid-auto-flow + - table-layout + - caption-side + # Overall size, max amount of pixels that can be painted + - width + - height + - min-width + - min-height + - max-width + - max-height + # Effects the most amount of pixel paint in the element + - background + - background-attachment + - background-blend-mode + - background-clip + - background-color + - background-image + - background-origin + - background-position + - background-repeat + - background-size + # Box model + - border + - border-width + - border-style + - border-color + - border-collapse + - border-spacing + - border-top + - border-top-width + - border-top-style + - border-top-color + - border-right + - border-right-width + - border-right-style + - border-right-color + - border-bottom + - border-bottom-width + - border-bottom-style + - border-bottom-color + - border-left + - border-left-width + - border-left-style + - border-left-color + - border-radius + - border-top-left-radius + - border-top-right-radius + - border-bottom-right-radius + - border-bottom-left-radius + - border-block + - border-block-width + - border-block-style + - border-block-color + - -webkit-border-before + - border-block-start + - border-block-start-color + - border-block-start-style + - border-block-start-width + - -webkit-border-after + - border-block-end + - border-block-end-color + - border-block-end-style + - border-block-end-width + - border-inline + - border-inline-width + - border-inline-style + - border-inline-color + - -webkit-border-start + - border-inline-start + - border-inline-start-width + - border-inline-start-style + - border-inline-start-color + - -webkit-border-end + - border-inline-end + - border-inline-end-width + - border-inline-end-style + - border-inline-end-color + - border-start-start-radius + - border-start-end-radius + - border-end-start-radius + - border-end-end-radius + - border-image + - border-image-source + - border-image-width + - border-image-outset + - border-image-repeat + - border-image-slice + - empty-cells + - margin + - margin-collapse + - margin-top + - margin-top-collapse + - margin-right + - margin-right-collapse + - margin-bottom + - margin-bottom-collapse + - margin-left + - margin-left-collapse + - margin-block + - -webkit-margin-before + - margin-block-start + - -webkit-margin-after + - margin-block-end + - margin-inline + - -webkit-margin-start + - margin-inline-start + - -webkit-margin-end + - margin-inline-end + - padding + - padding-top + - padding-right + - padding-bottom + - padding-left + - padding-block + - -webkit-padding-before + - padding-block-start + - -webkit-padding-after + - padding-block-end + - padding-inline + - -webkit-padding-start + - padding-inline-start + - -webkit-padding-end + - padding-inline-end + # Text treatment + - color + - direction + - font + - font-effect + - font-emphasize + - font-emphasize-position + - font-emphasize-style + - font-family + - font-feature-settings + - -webkit-font-kerning + - font-kerning + - font-language-override + - font-optical-sizing + - font-size + - font-size-adjust + - osx-font-smoothing + - -webkit-font-smoothing + - -moz-osx-font-smoothing + - font-smoothing + - font-stretch + - font-style + - font-synthesis + - font-variant + - font-variant-alternates + - font-variant-caps + - font-variant-east-asian + - font-variant-ligatures + - font-variant-numeric + - font-variant-position + - font-variation-settings + - font-weight + - hanging-punctuation + - -webkit-hyphens + - -ms-hyphens + - hyphens + - letter-spacing + - line-break + - -webkit-line-clamp + - line-clamp + - line-height + - list-style + - list-style-image + - list-style-position + - list-style-type + - orphans + - quotes + - speak + - src + - -moz-tab-size + - tab-size + - text-align + - text-align-last + - text-combine-upright + - -webkit-text-decoration + - text-decoration + - -webkit-text-decoration-color + - text-decoration-color + - -webkit-text-decoration-line + - text-decoration-line + - -webkit-text-decoration-skip + - text-decoration-skip + - text-decoration-skip-ink + - -webkit-text-decoration-style + - text-decoration-style + - -webkit-text-emphasis + - text-emphasis + - -webkit-text-emphasis-color + - text-emphasis-color + - -webkit-text-emphasis-style + - text-emphasis-style + - -webkit-text-emphasis-position + - text-emphasis-position + - text-indent + - text-justify + - text-orientation + - text-outline + - text-overflow + - text-overflow-ellipsis + - text-overflow-mode + - text-rendering + - text-shadow + - -webkit-text-size-adjust + - -moz-text-size-adjust + - -ms-text-size-adjust + - text-size-adjust + - text-transform + - text-underline-position + - text-wrap + - unicode-bidi + - unicode-range + - white-space + - widows + - word-break + - word-spacing + - word-wrap + - -ms-writing-mode + - writing-mode + # Less common properties go to the bottom + - additive-symbols + - all + - animation + - animation-name + - animation-duration + - animation-timing-function + - animation-delay + - animation-iteration-count + - animation-direction + - animation-fill-mode + - animation-play-state + - -moz-appearance + - -webkit-appearance + - appearance + - -webkit-backface-visibility + - backface-visibility + - block-size + - min-block-size + - -webkit-box-decoration-break + - box-decoration-break + - box-shadow + - box-sizing + - page-break-before + - break-before + - page-break-inside + - break-inside + - page-break-after + - break-after + - caret-color + - clear + - clip + - -webkit-clip-path + - clip-path + - -webkit-print-color-adjust + - color-adjust + - counter-reset + - counter-increment + - cursor + - fallback + - -webkit-filter + - fill + - filter + - float + - image-orientation + - -ms-interpolation-mode + - image-rendering + - inline-size + - min-inline-size + - inset + - inset-block + - inset-block-start + - inset-block-end + - inset-inline + - inset-inline-start + - inset-inline-end + - isolation + - marks + - -webkit-mask + - mask + - -webkit-mask-clip + - mask-clip + - -webkit-mask-composite + - mask-composite + - -webkit-mask-image + - mask-image + - mask-mode + - -webkit-mask-origin + - mask-origin + - -webkit-mask-position + - mask-position + - -webkit-mask-repeat + - mask-repeat + - -webkit-mask-size + - mask-size + - mask-type + - mix-blend-mode + - nav-index + - nav-up + - nav-right + - nav-down + - nav-left + - negative + - object-fit + - object-position + - opacity + - orientation + - outline + - outline-width + - outline-style + - outline-color + - outline-offset + - overflow + - overflow-wrap + - overflow-x + - overflow-y + - pad + - page + - perspective + - perspective-origin + - pointer-events + - prefix + - range + - resize + - rotate + - scale + - scroll-behavior + - scroll-margin + - scroll-margin-top + - scroll-margin-right + - scroll-margin-bottom + - scroll-margin-left + - scroll-margin-block + - scroll-margin-block-start + - scroll-margin-block-end + - scroll-margin-inline + - scroll-margin-inline-start + - scroll-margin-inline-end + - scroll-padding + - scroll-padding-top + - scroll-padding-right + - scroll-padding-bottom + - scroll-padding-block + - scroll-padding-left + - scroll-padding-block-start + - scroll-padding-block-end + - scroll-padding-inline + - scroll-padding-inline-start + - scroll-padding-inline-end + - scroll-snap-align + - scroll-snap-stop + - -ms-scroll-snap-type + - scroll-snap-type + - scrollbar-width + - scrollbar-color + - shape-image-threshold + - shape-margin + - shape-outside + - size + - speak-as + - stroke + - stroke-width + - stroke-linecap + - stroke-dasharray + - stroke-dashoffset + - suffix + - symbols + - system + - touch-action + - -webkit-transform + - transform + - transform-box + - transform-origin + - transform-style + - -webkit-transition + - transition + - transition-property + - transition-duration + - transition-timing-function + - transition-delay + - translate + - -webkit-user-select + - -moz-user-select + - -ms-user-select + - user-select + - user-zoom + - vertical-align + - visibility + - will-change + - zoom + - min-zoom + - max-zoom + - z-index diff --git a/lib/rules/property-sort-order.js b/lib/rules/property-sort-order.js index 0a6710d1..badfdd17 100644 --- a/lib/rules/property-sort-order.js +++ b/lib/rules/property-sort-order.js @@ -5,7 +5,8 @@ var helpers = require('../helpers'); var orderPresets = { 'recess': 'recess.yml', 'smacss': 'smacss.yml', - 'concentric': 'concentric.yml' + 'concentric': 'concentric.yml', + 'tjw': 'tjw.yml' }; var getOrderConfig = function (order) { diff --git a/tests/rules/property-sort-order.js b/tests/rules/property-sort-order.js index fc63d7b2..3385d176 100644 --- a/tests/rules/property-sort-order.js +++ b/tests/rules/property-sort-order.js @@ -132,6 +132,20 @@ describe('property sort order - scss', function () { done(); }); }); + + it('[order: tjw]', function (done) { + lint.test(file, { + 'property-sort-order': [ + 1, + { + 'order': 'tjw' + } + ] + }, function (data) { + lint.assert.equal(14, data.warningCount); + done(); + }); + }); }); ////////////////////////////// @@ -264,4 +278,18 @@ describe('property sort order - sass', function () { done(); }); }); + + it('[order: tjw]', function (done) { + lint.test(file, { + 'property-sort-order': [ + 1, + { + 'order': 'tjw' + } + ] + }, function (data) { + lint.assert.equal(14, data.warningCount); + done(); + }); + }); });