├── .editorconfig ├── .eslintrc ├── .gitignore ├── .prettierrc ├── .travis.yml ├── LICENSE ├── README.md ├── __tests__ └── index.js ├── borderInBoxModel.js ├── config ├── configCreator.js └── extendedStylelintOrderConfig.js ├── groups ├── animation.js ├── border.js ├── boxModel.js ├── misc.js ├── positioning.js ├── special.js ├── typography.js └── visual.js ├── index.js ├── package.json ├── plugin └── index.js └── yarn.lock /.editorconfig: -------------------------------------------------------------------------------- 1 | root = true 2 | 3 | [*] 4 | charset = utf-8 5 | end_of_line = lf 6 | indent_size = 2 7 | indent_style = space 8 | insert_final_newline = true 9 | trim_trailing_whitespace = true 10 | -------------------------------------------------------------------------------- /.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "extends": ["airbnb-base", "prettier"], 3 | "plugins": ["prettier", "jest"], 4 | "rules": { 5 | "prettier/prettier": "error" 6 | }, 7 | "env": { 8 | "jest/globals": true 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | .vscode 3 | -------------------------------------------------------------------------------- /.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "printWidth": 100, 3 | "tabWidth": 2, 4 | "useTabs": false, 5 | "semi": true, 6 | "singleQuote": true, 7 | "jsxSingleQuote": false, 8 | "trailingComma": "all", 9 | "bracketSpacing": true, 10 | "jsxBracketSameLine": false, 11 | "arrowParens": "avoid", 12 | "parser": "babel", 13 | "requirePragma": false, 14 | "insertPragma": false, 15 | "proseWrap": "preserve", 16 | "endOfLine": "lf" 17 | } 18 | -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | sudo: false 2 | 3 | language: node_js 4 | 5 | node_js: 6 | - '11' 7 | - '10' 8 | 9 | cache: 10 | directories: 11 | - node_modules 12 | 13 | deploy: 14 | provider: npm 15 | email: constverum@gmail.com 16 | api_key: 17 | secure: CU96QF0v8iN0KjFWffAozbNkV9Qo6MqxLgRXnrA3yQNZ7XZogkNiz6CBWklrgOPeDoR6nn525pa6uFkR/ubKfcEB8hvYEXbOC+HQdlnEv/8iahq1PDkienX5GGMPU5Ad3o65Em/lsXJ+uP7TdzIjzSUOhNIxSy2VaeAdMlXdjZNMhESosAu4TJzlR1226yyzra80YhR/1EtG6kMuqrwiBpRmw2V4yoxNeGHHTqtNOxchTysMo0SANgxT1bZiIwmGR9j2SV2rtRiGg1oIGZVL1bijQ+bWLYC8HbtFPEuBC0z1RL5waqQzpGtVinmf1zQbo9W1ruuH28w4YtIq+Gtws9KEnJrLI9WkwYbRjI3MwwOl8orXqJ4dVw/e/tmQ3J6EH4MZMlKP/eCM6PLVwhszEzUH/iTO/h1odcxkSIxOhRQxJlfCRAWjP5wWfgbKEKF4XYv5r/vgQUMEX7auG9Zyv18B0I03igBigjcBAm7RHzJ7iu8q0Al4paZPgDe4uNVYbNDzLr0AwByLFuB66Z9herkkIi2jMe3U8xO1GpC39NFfOR+RqtVyNvfKjnEcH6RkQq2/ffyPZG+TRp6oOSpIgewjwfyBjM/J5H9dpHl7zDAKeIlIMpVqdM+2NqNleFqmZYiXpUnAaLNyd6DL6WZwGa7k32KqmePggYKSfRxOgLY= 18 | on: 19 | tags: true 20 | branch: master 21 | node_js: 10 22 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | Apache License 2 | Version 2.0, January 2004 3 | http://www.apache.org/licenses/ 4 | 5 | TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION 6 | 7 | 1. Definitions. 8 | 9 | "License" shall mean the terms and conditions for use, reproduction, 10 | and distribution as defined by Sections 1 through 9 of this document. 11 | 12 | "Licensor" shall mean the copyright owner or entity authorized by 13 | the copyright owner that is granting the License. 14 | 15 | "Legal Entity" shall mean the union of the acting entity and all 16 | other entities that control, are controlled by, or are under common 17 | control with that entity. For the purposes of this definition, 18 | "control" means (i) the power, direct or indirect, to cause the 19 | direction or management of such entity, whether by contract or 20 | otherwise, or (ii) ownership of fifty percent (50%) or more of the 21 | outstanding shares, or (iii) beneficial ownership of such entity. 22 | 23 | "You" (or "Your") shall mean an individual or Legal Entity 24 | exercising permissions granted by this License. 25 | 26 | "Source" form shall mean the preferred form for making modifications, 27 | including but not limited to software source code, documentation 28 | source, and configuration files. 29 | 30 | "Object" form shall mean any form resulting from mechanical 31 | transformation or translation of a Source form, including but 32 | not limited to compiled object code, generated documentation, 33 | and conversions to other media types. 34 | 35 | "Work" shall mean the work of authorship, whether in Source or 36 | Object form, made available under the License, as indicated by a 37 | copyright notice that is included in or attached to the work 38 | (an example is provided in the Appendix below). 39 | 40 | "Derivative Works" shall mean any work, whether in Source or Object 41 | form, that is based on (or derived from) the Work and for which the 42 | editorial revisions, annotations, elaborations, or other modifications 43 | represent, as a whole, an original work of authorship. For the purposes 44 | of this License, Derivative Works shall not include works that remain 45 | separable from, or merely link (or bind by name) to the interfaces of, 46 | the Work and Derivative Works thereof. 47 | 48 | "Contribution" shall mean any work of authorship, including 49 | the original version of the Work and any modifications or additions 50 | to that Work or Derivative Works thereof, that is intentionally 51 | submitted to Licensor for inclusion in the Work by the copyright owner 52 | or by an individual or Legal Entity authorized to submit on behalf of 53 | the copyright owner. For the purposes of this definition, "submitted" 54 | means any form of electronic, verbal, or written communication sent 55 | to the Licensor or its representatives, including but not limited to 56 | communication on electronic mailing lists, source code control systems, 57 | and issue tracking systems that are managed by, or on behalf of, the 58 | Licensor for the purpose of discussing and improving the Work, but 59 | excluding communication that is conspicuously marked or otherwise 60 | designated in writing by the copyright owner as "Not a Contribution." 61 | 62 | "Contributor" shall mean Licensor and any individual or Legal Entity 63 | on behalf of whom a Contribution has been received by Licensor and 64 | subsequently incorporated within the Work. 65 | 66 | 2. Grant of Copyright License. Subject to the terms and conditions of 67 | this License, each Contributor hereby grants to You a perpetual, 68 | worldwide, non-exclusive, no-charge, royalty-free, irrevocable 69 | copyright license to reproduce, prepare Derivative Works of, 70 | publicly display, publicly perform, sublicense, and distribute the 71 | Work and such Derivative Works in Source or Object form. 72 | 73 | 3. Grant of Patent License. Subject to the terms and conditions of 74 | this License, each Contributor hereby grants to You a perpetual, 75 | worldwide, non-exclusive, no-charge, royalty-free, irrevocable 76 | (except as stated in this section) patent license to make, have made, 77 | use, offer to sell, sell, import, and otherwise transfer the Work, 78 | where such license applies only to those patent claims licensable 79 | by such Contributor that are necessarily infringed by their 80 | Contribution(s) alone or by combination of their Contribution(s) 81 | with the Work to which such Contribution(s) was submitted. If You 82 | institute patent litigation against any entity (including a 83 | cross-claim or counterclaim in a lawsuit) alleging that the Work 84 | or a Contribution incorporated within the Work constitutes direct 85 | or contributory patent infringement, then any patent licenses 86 | granted to You under this License for that Work shall terminate 87 | as of the date such litigation is filed. 88 | 89 | 4. Redistribution. You may reproduce and distribute copies of the 90 | Work or Derivative Works thereof in any medium, with or without 91 | modifications, and in Source or Object form, provided that You 92 | meet the following conditions: 93 | 94 | (a) You must give any other recipients of the Work or 95 | Derivative Works a copy of this License; and 96 | 97 | (b) You must cause any modified files to carry prominent notices 98 | stating that You changed the files; and 99 | 100 | (c) You must retain, in the Source form of any Derivative Works 101 | that You distribute, all copyright, patent, trademark, and 102 | attribution notices from the Source form of the Work, 103 | excluding those notices that do not pertain to any part of 104 | the Derivative Works; and 105 | 106 | (d) If the Work includes a "NOTICE" text file as part of its 107 | distribution, then any Derivative Works that You distribute must 108 | include a readable copy of the attribution notices contained 109 | within such NOTICE file, excluding those notices that do not 110 | pertain to any part of the Derivative Works, in at least one 111 | of the following places: within a NOTICE text file distributed 112 | as part of the Derivative Works; within the Source form or 113 | documentation, if provided along with the Derivative Works; or, 114 | within a display generated by the Derivative Works, if and 115 | wherever such third-party notices normally appear. The contents 116 | of the NOTICE file are for informational purposes only and 117 | do not modify the License. You may add Your own attribution 118 | notices within Derivative Works that You distribute, alongside 119 | or as an addendum to the NOTICE text from the Work, provided 120 | that such additional attribution notices cannot be construed 121 | as modifying the License. 122 | 123 | You may add Your own copyright statement to Your modifications and 124 | may provide additional or different license terms and conditions 125 | for use, reproduction, or distribution of Your modifications, or 126 | for any such Derivative Works as a whole, provided Your use, 127 | reproduction, and distribution of the Work otherwise complies with 128 | the conditions stated in this License. 129 | 130 | 5. Submission of Contributions. Unless You explicitly state otherwise, 131 | any Contribution intentionally submitted for inclusion in the Work 132 | by You to the Licensor shall be under the terms and conditions of 133 | this License, without any additional terms or conditions. 134 | Notwithstanding the above, nothing herein shall supersede or modify 135 | the terms of any separate license agreement you may have executed 136 | with Licensor regarding such Contributions. 137 | 138 | 6. Trademarks. This License does not grant permission to use the trade 139 | names, trademarks, service marks, or product names of the Licensor, 140 | except as required for reasonable and customary use in describing the 141 | origin of the Work and reproducing the content of the NOTICE file. 142 | 143 | 7. Disclaimer of Warranty. Unless required by applicable law or 144 | agreed to in writing, Licensor provides the Work (and each 145 | Contributor provides its Contributions) on an "AS IS" BASIS, 146 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or 147 | implied, including, without limitation, any warranties or conditions 148 | of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A 149 | PARTICULAR PURPOSE. You are solely responsible for determining the 150 | appropriateness of using or redistributing the Work and assume any 151 | risks associated with Your exercise of permissions under this License. 152 | 153 | 8. Limitation of Liability. In no event and under no legal theory, 154 | whether in tort (including negligence), contract, or otherwise, 155 | unless required by applicable law (such as deliberate and grossly 156 | negligent acts) or agreed to in writing, shall any Contributor be 157 | liable to You for damages, including any direct, indirect, special, 158 | incidental, or consequential damages of any character arising as a 159 | result of this License or out of the use or inability to use the 160 | Work (including but not limited to damages for loss of goodwill, 161 | work stoppage, computer failure or malfunction, or any and all 162 | other commercial damages or losses), even if such Contributor 163 | has been advised of the possibility of such damages. 164 | 165 | 9. Accepting Warranty or Additional Liability. While redistributing 166 | the Work or Derivative Works thereof, You may choose to offer, 167 | and charge a fee for, acceptance of support, warranty, indemnity, 168 | or other liability obligations and/or rights consistent with this 169 | License. However, in accepting such obligations, You may act only 170 | on Your own behalf and on Your sole responsibility, not on behalf 171 | of any other Contributor, and only if You agree to indemnify, 172 | defend, and hold each Contributor harmless for any liability 173 | incurred by, or claims asserted against, such Contributor by reason 174 | of your accepting any such warranty or additional liability. 175 | 176 | END OF TERMS AND CONDITIONS 177 | 178 | APPENDIX: How to apply the Apache License to your work. 179 | 180 | To apply the Apache License to your work, attach the following 181 | boilerplate notice, with the fields enclosed by brackets "{}" 182 | replaced with your own identifying information. (Don't include 183 | the brackets!) The text should be enclosed in the appropriate 184 | comment syntax for the file format. We also recommend that a 185 | file or class name and description of purpose be included on the 186 | same "printed page" as the copyright notice for easier 187 | identification within third-party archives. 188 | 189 | Copyright 2017-2018 Constverum 190 | 191 | Licensed under the Apache License, Version 2.0 (the "License"); 192 | you may not use this file except in compliance with the License. 193 | You may obtain a copy of the License at 194 | 195 | http://www.apache.org/licenses/LICENSE-2.0 196 | 197 | Unless required by applicable law or agreed to in writing, software 198 | distributed under the License is distributed on an "AS IS" BASIS, 199 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 200 | See the License for the specific language governing permissions and 201 | limitations under the License. 202 | 203 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # stylelint-config-rational-order 2 | 3 | [![NPM version][version-img]][npm-url] 4 | [![NPM downloads][downloads-img]][npm-url] 5 | [![Build status][ci-img]][ci-url] 6 | [![License][l-img]][l-url] 7 | 8 | Stylelint config that sorts related property declarations by grouping together following the order: 9 | 10 | 1. Positioning 11 | 2. Box Model 12 | 3. Typography 13 | 4. Visual 14 | 5. Animation 15 | 6. Misc 16 | 17 | ```css 18 | .declaration-order { 19 | /* Positioning */ 20 | position: absolute; 21 | top: 0; 22 | right: 0; 23 | bottom: 0; 24 | left: 0; 25 | z-index: 10; 26 | 27 | /* Box Model */ 28 | display: block; 29 | float: right; 30 | width: 100px; 31 | height: 100px; 32 | margin: 10px; 33 | padding: 10px; 34 | 35 | /* Typography */ 36 | color: #888; 37 | font: normal 16px Helvetica, sans-serif; 38 | line-height: 1.3; 39 | text-align: center; 40 | 41 | /* Visual */ 42 | background-color: #eee; 43 | border: 1px solid #888; 44 | border-radius: 4px; 45 | opacity: 1; 46 | 47 | /* Animation */ 48 | transition: all 1s; 49 | 50 | /* Misc */ 51 | user-select: none; 52 | } 53 | ``` 54 | 55 | ## Usage 56 | 57 | 1. Add `stylelint`, `stylelint-order` and this package to your project: 58 | 59 | ```bash 60 | npm install --save-dev stylelint stylelint-order stylelint-config-rational-order 61 | # or, if you prefer yarn over npm: 62 | yarn add --dev stylelint stylelint-order stylelint-config-rational-order 63 | ``` 64 | 65 | 2. Add this package to the end of your extends array inside Stylelint 66 | configuration (.stylelintrc for example): 67 | 68 | ```javascript 69 | { 70 | "extends": [ 71 | // "stylelint-config-standard", 72 | "stylelint-config-rational-order" 73 | ] 74 | } 75 | ``` 76 | 77 | This shareable config contains the following: 78 | ```javascript 79 | { 80 | "plugins": [ 81 | "stylelint-order", 82 | "stylelint-config-rational-order/plugin" 83 | ], 84 | "rules": { 85 | "order/properties-order": [], 86 | "plugin/rational-order": [true, { 87 | "border-in-box-model": false, 88 | "empty-line-between-groups": false, 89 | }] 90 | } 91 | } 92 | ``` 93 | 94 | Since it adds `stylelint-order` and `stylelint-config-rational-order` to plugins and also adds required rules, you don't have to do this yourself when extending this config. 95 | 96 | 97 | ## Optional options / rules 98 | 99 | #### border-in-box-model 100 | 101 | Defines to which group the **border** property belongs to. 102 | 103 | If `true` **border** property belongs to the **box model section**. 104 | The default value is `false` (**border** property belongs to the **visual section**). 105 | 106 | 107 | #### empty-line-between-groups 108 | 109 | If `true` adds an empty line between groups. The default value is `false`. 110 | 111 | ## FAQ 112 | 113 |
114 | Why should I use the rational order and group and sort CSS properties by type instead of alphabetical order? 115 | 116 | The pros and cons of both ways in detail: 117 | 118 | * [Happy Potter and the Order of CSS](https://dev.to/thekashey/happy-potter-and-the-order-of-css-5ec) 119 | * [“Outside In” — Ordering CSS Properties by Importance](https://webdesign.tutsplus.com/articles/outside-in-ordering-css-properties-by-importance--cms-21685) 120 |
121 | 122 | ## Credits 123 | 124 | * [Code Guide by @mdo](http://codeguide.co/) 125 | * [Code Guide by HTML Academy](https://github.com/htmlacademy/codeguide) 126 | 127 | 128 | [npm-url]: https://www.npmjs.com/package/stylelint-config-rational-order 129 | [downloads-img]: https://img.shields.io/npm/dt/stylelint-config-rational-order.svg?style=flat-square 130 | [version-img]: https://img.shields.io/npm/v/stylelint-config-rational-order.svg?style=flat-square 131 | [ci-url]: https://travis-ci.org/constverum/stylelint-config-rational-order 132 | [ci-img]: https://img.shields.io/travis/constverum/stylelint-config-rational-order.svg?style=flat-square 133 | [l-url]: https://www.npmjs.com/package/stylelint-config-rational-order 134 | [l-img]: https://img.shields.io/npm/l/stylelint-config-rational-order.svg?style=flat-square 135 | -------------------------------------------------------------------------------- /__tests__/index.js: -------------------------------------------------------------------------------- 1 | const stylelint = require('stylelint'); 2 | const plugin = require('../plugin'); 3 | 4 | const { ruleName } = plugin; 5 | 6 | const getExtendedConfig = code => ({ 7 | code, 8 | config: { 9 | extends: ['../index'], 10 | }, 11 | configBasedir: __dirname, 12 | }); 13 | 14 | const getPluginOptions = (code, rules) => ({ 15 | code, 16 | config: { 17 | plugins: ['../plugin'], 18 | rules, 19 | }, 20 | configBasedir: __dirname, 21 | }); 22 | 23 | describe('stylelint-config-rational-order default config', () => { 24 | const wrong = ` 25 | a { 26 | width: auto; 27 | height: auto; 28 | display: block; 29 | margin: 10px; 30 | position: relative; 31 | color: red; 32 | padding: 10px; 33 | border: 1px solid blue; 34 | background: white; 35 | } 36 | `; 37 | const correct = ` 38 | a { 39 | position: relative; 40 | display: block; 41 | width: auto; 42 | height: auto; 43 | margin: 10px; 44 | padding: 10px; 45 | color: red; 46 | background: white; 47 | border: 1px solid blue; 48 | } 49 | `; 50 | 51 | it('wrong', () => 52 | stylelint.lint(getExtendedConfig(wrong)).then(output => { 53 | const { errored } = output; 54 | const { warnings } = output.results[0]; 55 | const expectedWarnings = [ 56 | 'Expected "display" to come before "height" in group "Box Model" (order/properties-order)', 57 | 'Expected "position" to come before "margin" in group "Positioning" (order/properties-order)', 58 | 'Expected "padding" to come before "color" in group "Box Model" (order/properties-order)', 59 | 'Expected "background" to come before "border" in group "Visual" (order/properties-order)', 60 | ]; 61 | expect(errored).toBeTruthy(); 62 | warnings.forEach(({ text }, idx) => { 63 | expect(text).toEqual(expect.stringContaining(expectedWarnings[idx])); 64 | }); 65 | })); 66 | 67 | it('correct', () => 68 | stylelint.lint(getExtendedConfig(correct)).then(output => { 69 | const { errored } = output; 70 | const { warnings } = output.results[0]; 71 | expect(errored).toBeFalsy(); 72 | expect(warnings).toHaveLength(0); 73 | })); 74 | }); 75 | 76 | describe('stylelint-config-rational-order/plugin', () => { 77 | describe('correct order with enabled plugin', () => { 78 | it('with default values (border in visual section and no empty lines between groups)', () => { 79 | const rules = { 80 | [ruleName]: true, 81 | }; 82 | const correct = ` 83 | a { 84 | position: relative; 85 | display: block; 86 | color: red; 87 | background: white; 88 | border: 1px solid blue; 89 | } 90 | `; 91 | return stylelint.lint(getPluginOptions(correct, rules)).then(output => { 92 | const { errored } = output; 93 | const { warnings } = output.results[0]; 94 | expect(errored).toBeFalsy(); 95 | expect(warnings).toHaveLength(0); 96 | }); 97 | }); 98 | 99 | it('with "border-in-box-model" = true', () => { 100 | const rules = { 101 | [ruleName]: [ 102 | true, 103 | { 104 | 'border-in-box-model': true, 105 | }, 106 | ], 107 | }; 108 | const correct = ` 109 | a { 110 | position: relative; 111 | display: block; 112 | border: 1px solid blue; 113 | color: red; 114 | background: white; 115 | } 116 | `; 117 | return stylelint.lint(getPluginOptions(correct, rules)).then(output => { 118 | const { errored } = output; 119 | const { warnings } = output.results[0]; 120 | expect(errored).toBeFalsy(); 121 | expect(warnings).toHaveLength(0); 122 | }); 123 | }); 124 | 125 | it('with "empty-line-between-groups" = true', () => { 126 | const rules = { 127 | [ruleName]: [ 128 | true, 129 | { 130 | 'empty-line-between-groups': true, 131 | }, 132 | ], 133 | }; 134 | const correct = ` 135 | a { 136 | position: relative; 137 | z-index: 10; 138 | 139 | display: block; 140 | width: auto; 141 | height: auto; 142 | margin: 10px; 143 | padding: 10px; 144 | 145 | color: red; 146 | 147 | background: white; 148 | border: 1px solid blue; 149 | } 150 | `; 151 | return stylelint.lint(getPluginOptions(correct, rules)).then(output => { 152 | const { errored } = output; 153 | const { warnings } = output.results[0]; 154 | expect(errored).toBeFalsy(); 155 | expect(warnings).toHaveLength(0); 156 | }); 157 | }); 158 | 159 | it('with "border-in-box-model" = true AND with "empty-line-between-groups" = true', () => { 160 | const rules = { 161 | [ruleName]: [ 162 | true, 163 | { 164 | 'border-in-box-model': true, 165 | 'empty-line-between-groups': true, 166 | }, 167 | ], 168 | }; 169 | const correct = ` 170 | a { 171 | position: relative; 172 | z-index: 10; 173 | 174 | display: block; 175 | width: auto; 176 | height: auto; 177 | margin: 10px; 178 | padding: 10px; 179 | border: 1px solid blue; 180 | overflow: auto; 181 | 182 | color: red; 183 | 184 | background: white; 185 | } 186 | `; 187 | return stylelint.lint(getPluginOptions(correct, rules)).then(output => { 188 | const { errored } = output; 189 | const { warnings } = output.results[0]; 190 | expect(errored).toBeFalsy(); 191 | expect(warnings).toHaveLength(0); 192 | }); 193 | }); 194 | }); 195 | 196 | describe('wrong order with disabled plugin', () => { 197 | it('correct', () => { 198 | const rules = { 199 | [ruleName]: false, 200 | }; 201 | const wrong = ` 202 | a { 203 | border: 1px solid blue; 204 | position: relative; 205 | display: block; 206 | color: red; 207 | 208 | background: white; 209 | } 210 | `; 211 | return stylelint.lint(getPluginOptions(wrong, rules)).then(output => { 212 | const { errored } = output; 213 | const { warnings } = output.results[0]; 214 | expect(errored).toBeFalsy(); 215 | expect(warnings).toHaveLength(0); 216 | }); 217 | }); 218 | }); 219 | 220 | describe('wrong plugin options', () => { 221 | it('correct', () => { 222 | const rules = { 223 | [ruleName]: [ 224 | true, 225 | { 226 | borderInBoxModel: true, 227 | emptyLineBetweenGroups: true, 228 | 'bla-bla-bla': false, 229 | }, 230 | ], 231 | }; 232 | const wrong = ` 233 | a { 234 | border: 1px solid blue; 235 | position: relative; 236 | display: block; 237 | color: red; 238 | 239 | background: white; 240 | } 241 | `; 242 | return stylelint.lint(getPluginOptions(wrong, rules)).then(output => { 243 | expect(output.errored).toBeTruthy(); 244 | }); 245 | }); 246 | }); 247 | }); 248 | -------------------------------------------------------------------------------- /borderInBoxModel.js: -------------------------------------------------------------------------------- 1 | /* 2 | ================================================================== 3 | DEPRECATED 4 | please check the documentation and use plugin rules 5 | ================================================================== 6 | */ 7 | 8 | const config = require('./config/extendedStylelintOrderConfig'); 9 | 10 | module.exports = config({ 'border-in-box-model': true }); 11 | -------------------------------------------------------------------------------- /config/configCreator.js: -------------------------------------------------------------------------------- 1 | const special = require('../groups/special'); 2 | const positioning = require('../groups/positioning'); 3 | const boxModel = require('../groups/boxModel'); 4 | const typography = require('../groups/typography'); 5 | const visual = require('../groups/visual'); 6 | const animation = require('../groups/animation'); 7 | const misc = require('../groups/misc'); 8 | 9 | module.exports = ({ 10 | 'border-in-box-model': borderInBoxModel = false, 11 | 'empty-line-between-groups': emptyLineBetweenGroups = false, 12 | } = {}) => 13 | [ 14 | ['Special', special], 15 | ['Positioning', positioning], 16 | ['Box Model', boxModel({ border: borderInBoxModel })], 17 | ['Typography', typography], 18 | ['Visual', visual({ border: !borderInBoxModel })], 19 | ['Animation', animation], 20 | ['Misc', misc], 21 | ].map(([groupName, properties]) => ({ 22 | emptyLineBefore: emptyLineBetweenGroups ? 'always' : 'never', 23 | properties, 24 | groupName, 25 | })); 26 | -------------------------------------------------------------------------------- /config/extendedStylelintOrderConfig.js: -------------------------------------------------------------------------------- 1 | const path = require('path'); 2 | const specialProps = require('../groups/special'); 3 | 4 | module.exports = ({ 5 | 'border-in-box-model': borderInBoxModel = false, 6 | 'empty-line-between-groups': emptyLineBetweenGroups = false, 7 | } = {}) => ({ 8 | plugins: ['stylelint-order', path.join(__dirname, '../plugin')], 9 | rules: { 10 | 'order/properties-order': [], 11 | 'property-no-unknown': [ 12 | true, 13 | { 14 | ignoreProperties: specialProps, 15 | }, 16 | ], 17 | 'plugin/rational-order': [ 18 | true, 19 | { 20 | 'border-in-box-model': borderInBoxModel, 21 | 'empty-line-between-groups': emptyLineBetweenGroups, 22 | }, 23 | ], 24 | }, 25 | }); 26 | -------------------------------------------------------------------------------- /groups/animation.js: -------------------------------------------------------------------------------- 1 | module.exports = [ 2 | 'transition', 3 | 'transition-delay', 4 | 'transition-timing-function', 5 | 'transition-duration', 6 | 'transition-property', 7 | 'animation', 8 | 'animation-name', 9 | 'animation-duration', 10 | 'animation-play-state', 11 | 'animation-timing-function', 12 | 'animation-delay', 13 | 'animation-iteration-count', 14 | 'animation-direction', 15 | 'animation-fill-mode', 16 | ]; 17 | -------------------------------------------------------------------------------- /groups/border.js: -------------------------------------------------------------------------------- 1 | module.exports = [ 2 | 'border', 3 | 'border-color', 4 | 'border-style', 5 | 'border-width', 6 | 'border-top', 7 | 'border-top-color', 8 | 'border-top-width', 9 | 'border-top-style', 10 | 'border-right', 11 | 'border-right-color', 12 | 'border-right-width', 13 | 'border-right-style', 14 | 'border-bottom', 15 | 'border-bottom-color', 16 | 'border-bottom-width', 17 | 'border-bottom-style', 18 | 'border-left', 19 | 'border-left-color', 20 | 'border-left-width', 21 | 'border-left-style', 22 | 'border-radius', 23 | 'border-top-left-radius', 24 | 'border-top-right-radius', 25 | 'border-bottom-right-radius', 26 | 'border-bottom-left-radius', 27 | 'border-image', 28 | 'border-image-source', 29 | 'border-image-slice', 30 | 'border-image-width', 31 | 'border-image-outset', 32 | 'border-image-repeat', 33 | 'border-collapse', 34 | 'border-spacing', 35 | ]; 36 | -------------------------------------------------------------------------------- /groups/boxModel.js: -------------------------------------------------------------------------------- 1 | const borderProps = require('./border'); 2 | 3 | const partOne = [ 4 | 'display', 5 | 'flex', 6 | 'flex-basis', 7 | 'flex-direction', 8 | 'flex-flow', 9 | 'flex-grow', 10 | 'flex-shrink', 11 | 'flex-wrap', 12 | 'grid', 13 | 'grid-area', 14 | 'grid-auto-rows', 15 | 'grid-auto-columns', 16 | 'grid-auto-flow', 17 | 'grid-gap', 18 | 'grid-row', 19 | 'grid-row-start', 20 | 'grid-row-end', 21 | 'grid-row-gap', 22 | 'grid-column', 23 | 'grid-column-start', 24 | 'grid-column-end', 25 | 'grid-column-gap', 26 | 'grid-template', 27 | 'grid-template-areas', 28 | 'grid-template-rows', 29 | 'grid-template-columns', 30 | 'gap', 31 | 'align-content', 32 | 'align-items', 33 | 'align-self', 34 | 'justify-content', 35 | 'justify-items', 36 | 'justify-self', 37 | 'order', 38 | 'float', 39 | 'clear', 40 | 'box-sizing', 41 | 'width', 42 | 'min-width', 43 | 'max-width', 44 | 'height', 45 | 'min-height', 46 | 'max-height', 47 | 'margin', 48 | 'margin-top', 49 | 'margin-right', 50 | 'margin-bottom', 51 | 'margin-left', 52 | 'padding', 53 | 'padding-top', 54 | 'padding-right', 55 | 'padding-bottom', 56 | 'padding-left', 57 | ]; 58 | 59 | const partTwo = ['object-fit', 'object-position', 'overflow', 'overflow-x', 'overflow-y']; 60 | 61 | module.exports = ({ border }) => [].concat(partOne, border ? borderProps : [], partTwo); 62 | -------------------------------------------------------------------------------- /groups/misc.js: -------------------------------------------------------------------------------- 1 | module.exports = [ 2 | 'appearance', 3 | 'content', 4 | 'clip', 5 | 'clip-path', 6 | 'counter-reset', 7 | 'counter-increment', 8 | 'resize', 9 | 'user-select', 10 | 'nav-index', 11 | 'nav-up', 12 | 'nav-right', 13 | 'nav-down', 14 | 'nav-left', 15 | 'pointer-events', 16 | 'quotes', 17 | 'touch-action', 18 | 'will-change', 19 | 'zoom', 20 | 'fill', 21 | 'fill-rule', 22 | 'clip-rule', 23 | 'stroke', 24 | ]; 25 | -------------------------------------------------------------------------------- /groups/positioning.js: -------------------------------------------------------------------------------- 1 | module.exports = ['position', 'top', 'right', 'bottom', 'left', 'z-index']; 2 | -------------------------------------------------------------------------------- /groups/special.js: -------------------------------------------------------------------------------- 1 | module.exports = ['composes', '@import', '@extend', '@mixin', '@at-root']; 2 | -------------------------------------------------------------------------------- /groups/typography.js: -------------------------------------------------------------------------------- 1 | module.exports = [ 2 | 'color', 3 | 'font', 4 | 'font-weight', 5 | 'font-size', 6 | 'font-family', 7 | 'font-style', 8 | 'font-variant', 9 | 'font-size-adjust', 10 | 'font-stretch', 11 | 'font-effect', 12 | 'font-emphasize', 13 | 'font-emphasize-position', 14 | 'font-emphasize-style', 15 | 'font-smooth', 16 | 'line-height', 17 | 'direction', 18 | 'letter-spacing', 19 | 'white-space', 20 | 'text-align', 21 | 'text-align-last', 22 | 'text-transform', 23 | 'text-decoration', 24 | 'text-emphasis', 25 | 'text-emphasis-color', 26 | 'text-emphasis-style', 27 | 'text-emphasis-position', 28 | 'text-indent', 29 | 'text-justify', 30 | 'text-outline', 31 | 'text-wrap', 32 | 'text-overflow', 33 | 'text-overflow-ellipsis', 34 | 'text-overflow-mode', 35 | 'text-orientation', 36 | 'text-shadow', 37 | 'vertical-align', 38 | 'word-wrap', 39 | 'word-break', 40 | 'word-spacing', 41 | 'overflow-wrap', 42 | 'tab-size', 43 | 'hyphens', 44 | 'unicode-bidi', 45 | 'columns', 46 | 'column-count', 47 | 'column-fill', 48 | 'column-gap', 49 | 'column-rule', 50 | 'column-rule-color', 51 | 'column-rule-style', 52 | 'column-rule-width', 53 | 'column-span', 54 | 'column-width', 55 | 'page-break-after', 56 | 'page-break-before', 57 | 'page-break-inside', 58 | 'src', 59 | ]; 60 | -------------------------------------------------------------------------------- /groups/visual.js: -------------------------------------------------------------------------------- 1 | const borderProps = require('./border'); 2 | 3 | const partOne = [ 4 | 'list-style', 5 | 'list-style-position', 6 | 'list-style-type', 7 | 'list-style-image', 8 | 'table-layout', 9 | 'empty-cells', 10 | 'caption-side', 11 | 'background', 12 | 'background-color', 13 | 'background-image', 14 | 'background-repeat', 15 | 'background-position', 16 | 'background-position-x', 17 | 'background-position-y', 18 | 'background-size', 19 | 'background-clip', 20 | 'background-origin', 21 | 'background-attachment', 22 | 'background-blend-mode', 23 | ]; 24 | 25 | const partTwo = [ 26 | 'outline', 27 | 'outline-width', 28 | 'outline-style', 29 | 'outline-color', 30 | 'outline-offset', 31 | 'box-shadow', 32 | 'box-decoration-break', 33 | 'transform', 34 | 'transform-origin', 35 | 'transform-style', 36 | 'backface-visibility', 37 | 'perspective', 38 | 'perspective-origin', 39 | 'visibility', 40 | 'cursor', 41 | 'opacity', 42 | 'filter', 43 | 'isolation', 44 | 'backdrop-filter', 45 | 'mix-blend-mode', 46 | ]; 47 | 48 | module.exports = ({ border }) => [].concat(partOne, border ? borderProps : [], partTwo); 49 | -------------------------------------------------------------------------------- /index.js: -------------------------------------------------------------------------------- 1 | const config = require('./config/extendedStylelintOrderConfig'); 2 | 3 | module.exports = config(); 4 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "stylelint-config-rational-order", 3 | "version": "0.1.2", 4 | "description": "Stylelint config that sorts related property declarations by grouping together following the order: Positioning, Box Model, Typography, Visual, Animation, Other.", 5 | "author": "Constverum ", 6 | "license": "Apache-2.0", 7 | "main": "index.js", 8 | "repository": { 9 | "type": "git", 10 | "url": "git+https://github.com/constverum/stylelint-config-rational-order.git" 11 | }, 12 | "bugs": { 13 | "url": "https://github.com/constverum/stylelint-config-rational-order/issues" 14 | }, 15 | "scripts": { 16 | "lint": "node ./node_modules/eslint/bin/eslint.js .", 17 | "test": "node ./node_modules/jest-cli/bin/jest.js" 18 | }, 19 | "keywords": [ 20 | "stylelint", 21 | "stylelint-config", 22 | "stylelint-order", 23 | "stylelint-plugin", 24 | "properties-order", 25 | "css property order", 26 | "declaration-order", 27 | "css declaration order", 28 | "rational-css", 29 | "order-css", 30 | "order" 31 | ], 32 | "dependencies": { 33 | "stylelint": "^9.10.1", 34 | "stylelint-order": "^2.2.1" 35 | }, 36 | "devDependencies": { 37 | "eslint": "^5.16.0", 38 | "eslint-config-airbnb-base": "^13.1.0", 39 | "eslint-config-prettier": "^4.1.0", 40 | "eslint-plugin-import": "^2.16.0", 41 | "eslint-plugin-jest": "^22.4.1", 42 | "eslint-plugin-prettier": "^3.0.1", 43 | "jest": "^24.7.1", 44 | "prettier": "^1.16.4" 45 | }, 46 | "homepage": "https://github.com/constverum/stylelint-config-rational-order" 47 | } 48 | -------------------------------------------------------------------------------- /plugin/index.js: -------------------------------------------------------------------------------- 1 | const stylelint = require('stylelint'); 2 | const propertiesOrderRule = require('stylelint-order/rules/properties-order'); 3 | const configCreator = require('../config/configCreator'); 4 | 5 | const ruleName = 'plugin/rational-order'; 6 | 7 | module.exports = stylelint.createPlugin( 8 | ruleName, 9 | (enabled, options, context) => (postcssRoot, postcssResult) => { 10 | const validOptions = stylelint.utils.validateOptions( 11 | postcssResult, 12 | ruleName, 13 | { 14 | actual: enabled, 15 | possible: [true, false], 16 | }, 17 | { 18 | actual: options, 19 | optional: true, 20 | possible: { 21 | 'border-in-box-model': [true, false], 22 | 'empty-line-between-groups': [true, false], 23 | }, 24 | }, 25 | ); 26 | if (!enabled || !validOptions) { 27 | return; 28 | } 29 | const expectation = configCreator(options); 30 | propertiesOrderRule(expectation, undefined, context)(postcssRoot, postcssResult); 31 | }, 32 | ); 33 | 34 | module.exports.ruleName = ruleName; 35 | --------------------------------------------------------------------------------