├── .eslintrc.cjs ├── .gitignore ├── .prettierrc.cjs ├── LICENSE ├── README.md ├── package-lock.json ├── package.json ├── src └── index.js └── test ├── .prettierrc.cjs ├── package-lock.json └── package.json /.eslintrc.cjs: -------------------------------------------------------------------------------- 1 | module.exports = { extends: ['@alexanderniebuhr/eslint-config'] } 2 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | dist 2 | node_modules 3 | test.* -------------------------------------------------------------------------------- /.prettierrc.cjs: -------------------------------------------------------------------------------- 1 | module.exports = { ...require('@alexanderniebuhr/prettier-config') } 2 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2022 Alexander Niebuhr 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | 2 | # prettier-plugin-unocss 3 | 4 | A prettier plugin to sort classes based on the defined order of unocss. 5 | 6 | 7 | ## Installation 8 | 9 | Install my-project with npm 10 | 11 | ```bash 12 | npm install my-project 13 | cd my-project 14 | ``` 15 | 16 | ## FAQ 17 | 18 | #### Question 1 19 | 20 | Answer 1 21 | 22 | #### Question 2 23 | 24 | Answer 2 25 | 26 | 27 | ## Authors 28 | 29 | - [@alexanderniebuhr](https://github.com/alexanderniebuhr) 30 | 31 | 32 | ## Acknowledgements 33 | 34 | - [unocss/unocss](https://github.com/unocss/unocss) 35 | - [tailwind/prettier-plugin-tailwindcss](https://github.com/tailwindlabs/prettier-plugin-tailwindcss) 36 | 37 | 38 | ## License 39 | [MIT](https://choosealicense.com/licenses/mit/)
40 | Copyright © 2022 [Alexander Niebuhr](https://github.com/alexanderniebuhr) 41 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@alexanderniebuhr/prettier-plugin-unocss", 3 | "description": "", 4 | "version": "0.0.4", 5 | "author": { 6 | "name": "Alexander Niebuhr", 7 | "email": "tech@nbhr.io" 8 | }, 9 | "bugs": { 10 | "url": "https://github.com/alexanderniebuhr/prettier-plugin-unocss/issues" 11 | }, 12 | "dependencies": { 13 | "@unocss/preset-uno": "0.25.1", 14 | "import-fresh": "3.3.0", 15 | "prettier": "2.5.1" 16 | }, 17 | "devDependencies": { 18 | "@alexanderniebuhr/style": "1.1.0", 19 | "@unocss/core": "0.26.0", 20 | "@unocss/preset-typography": "0.26.0", 21 | "esbuild": "0.14.23", 22 | "prettier-plugin-svelte": "2.6.0", 23 | "unocss": "0.26.0" 24 | }, 25 | "files": [ 26 | "dist" 27 | ], 28 | "homepage": "https://github.com/alexanderniebuhr/prettier-plugin-unocss", 29 | "keywords": [ 30 | "plugin", 31 | "prettier", 32 | "unocss" 33 | ], 34 | "license": "MIT", 35 | "main": "dist/index.js", 36 | "repository": { 37 | "type": "git", 38 | "url": "git+https://github.com/alexanderniebuhr/prettier-plugin-unocss" 39 | }, 40 | "scripts": { 41 | "build": "esbuild src/index.js --format=cjs --outfile=dist/index.js", 42 | "prepublishOnly": "npm run build" 43 | } 44 | } 45 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import presetUno from '@unocss/preset-uno' 2 | import requireFresh from 'import-fresh' 3 | import { existsSync } from 'fs' 4 | import { dirname, resolve } from 'path' 5 | import { resolveConfigFile } from 'prettier' 6 | import prettierParserHTML from 'prettier/parser-html' 7 | 8 | let sveltePlugin = null 9 | let rules 10 | 11 | function uniq(value) { 12 | return Array.from(new Set(value)) 13 | } 14 | function toArray(value) { 15 | return Array.isArray(value) ? value : [value] 16 | } 17 | 18 | function sortUtillities(a, b) { 19 | if (a.includes(':')) return 1 20 | if (b.includes(':')) return -1 21 | 22 | //for each index and value of rules array 23 | let aSortIndex = 0 24 | let bSortIndex = 0 25 | 26 | for (let [index, value] of rules.entries()) { 27 | if (typeof value[0] === 'string') { 28 | if (new RegExp(value[0], 'g').test(a)) aSortIndex = index 29 | if (new RegExp(value[0], 'g').test(b)) bSortIndex = index 30 | } else { 31 | if (value[0].test(a)) aSortIndex = index 32 | if (value[0].test(b)) bSortIndex = index 33 | } 34 | } 35 | 36 | if (bSortIndex < aSortIndex) { 37 | return 1 38 | } else if (bSortIndex == aSortIndex) { 39 | return a < b ? -1 : 1 40 | } else { 41 | return -1 42 | } 43 | } 44 | 45 | function format(input, regex, options) { 46 | let prettierConfigPath = resolveConfigFile.sync(options.filepath) 47 | let baseDir = prettierConfigPath 48 | ? dirname(prettierConfigPath) 49 | : process.env.VSCODE_CWD ?? process.cwd() 50 | let unoConfigPath = resolve(baseDir, 'unocss.config.cjs') 51 | 52 | if (existsSync(unoConfigPath)) { 53 | console.log('config exists') 54 | 55 | let unoConfig = requireFresh(unoConfigPath) 56 | console.log(unoConfig) 57 | 58 | rules = uniq([ 59 | ...unoConfig.presets.flatMap((p) => toArray(p['rules'] || [])), 60 | ...toArray(unoConfig['rules'] || []), 61 | ]) 62 | } else { 63 | console.log('config does not exist') 64 | 65 | rules = presetUno().rules 66 | } 67 | 68 | const output = input.replace(regex, (match) => { 69 | if (match.includes('{')) return match 70 | if (match.includes('}')) return match 71 | const groups = [] 72 | const groupRegex = /([!\w][\w:_/-]*?):\(([\w\s/-]*?)\)/g 73 | const utils = match.replace(groupRegex, (group, variant, utillities) => { 74 | groups.push(`${variant}:(${utillities.split(' ').sort(sortUtillities).join(' ')})`) 75 | return '' 76 | }) 77 | return (utils.split(' ').sort(sortUtillities).join(' ') + ' ' + groups.join(' ')).trim() 78 | }) 79 | return output 80 | } 81 | 82 | function makeChoice(choice) { 83 | return { value: choice, description: choice } 84 | } 85 | 86 | export const options = { 87 | svelteSortOrder: { 88 | since: '0.6.0', 89 | category: 'Svelte', 90 | type: 'choice', 91 | default: 'options-scripts-markup-styles', 92 | description: 'Sort order for scripts, markup, and styles', 93 | choices: [ 94 | makeChoice('options-scripts-markup-styles'), 95 | makeChoice('options-scripts-styles-markup'), 96 | makeChoice('options-markup-styles-scripts'), 97 | makeChoice('options-markup-scripts-styles'), 98 | makeChoice('options-styles-markup-scripts'), 99 | makeChoice('options-styles-scripts-markup'), 100 | makeChoice('scripts-options-markup-styles'), 101 | makeChoice('scripts-options-styles-markup'), 102 | makeChoice('markup-options-styles-scripts'), 103 | makeChoice('markup-options-scripts-styles'), 104 | makeChoice('styles-options-markup-scripts'), 105 | makeChoice('styles-options-scripts-markup'), 106 | makeChoice('scripts-markup-options-styles'), 107 | makeChoice('scripts-styles-options-markup'), 108 | makeChoice('markup-styles-options-scripts'), 109 | makeChoice('markup-scripts-options-styles'), 110 | makeChoice('styles-markup-options-scripts'), 111 | makeChoice('styles-scripts-options-markup'), 112 | makeChoice('scripts-markup-styles-options'), 113 | makeChoice('scripts-styles-markup-options'), 114 | makeChoice('markup-styles-scripts-options'), 115 | makeChoice('markup-scripts-styles-options'), 116 | makeChoice('styles-markup-scripts-options'), 117 | makeChoice('styles-scripts-markup-options'), 118 | // Deprecated, keep in 2.x for backwards-compatibility. svelte:options will be moved to the top 119 | makeChoice('scripts-markup-styles'), 120 | makeChoice('scripts-styles-markup'), 121 | makeChoice('markup-styles-scripts'), 122 | makeChoice('markup-scripts-styles'), 123 | makeChoice('styles-markup-scripts'), 124 | makeChoice('styles-scripts-markup'), 125 | ], 126 | }, 127 | svelteStrictMode: { 128 | category: 'Svelte', 129 | type: 'boolean', 130 | default: false, 131 | description: 'More strict HTML syntax: self-closed tags, quotes in attributes', 132 | }, 133 | svelteAllowShorthand: { 134 | category: 'Svelte', 135 | type: 'boolean', 136 | default: true, 137 | description: 138 | 'Option to enable/disable component attribute shorthand if attribute name and expressions are same', 139 | }, 140 | svelteIndentScriptAndStyle: { 141 | category: 'Svelte', 142 | type: 'boolean', 143 | default: true, 144 | description: 145 | 'Whether or not to indent the code inside