Skip to content

Commit

Permalink
Major Redesign to use Project-local tailwind to auto-generate orderin…
Browse files Browse the repository at this point in the history
…g and move to js with jsdoc for types
  • Loading branch information
Trapfether committed Oct 7, 2023
1 parent ae5d26f commit 63f01d2
Show file tree
Hide file tree
Showing 24 changed files with 5,309 additions and 10,444 deletions.
27 changes: 27 additions & 0 deletions .eslintrc.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
module.exports = {
plugins: [],
env: {
module: true,
es2022: true,
node: true
},
extends: ['google'],
parserOptions: {
ecmaVersion: 14
},
ignorePatterns: ["**/dist/*.js"],
rules: {
'max-len': ['error', {code: 150}],
'comma-dangle': ['error', 'never'],
'no-undef': ['error', {typeof: true}],
'no-shadow': ['error', {builtinGlobals: false, hoist: 'functions', allow: []}],
'valid-jsdoc': 'off',
'new-cap': 'off',
'indent': ['error', 2]
},
settings: {
jsdoc: {
mode: 'typescript'
}
}
};
2 changes: 1 addition & 1 deletion .github/CONTRIBUTING.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,4 +4,4 @@ Headwind is open-source and contributions are always welcome. If you're interest

## Pull requests

Thinking of submitting a pull request? Please check the [issues page](https://github.com/heybourn/headwind/issues) to ensure your idea is not already being implemented or discussed.
Thinking of submitting a pull request? Please check the [issues page](prettier/issues) to ensure your idea is not already being implemented or discussed.
4 changes: 1 addition & 3 deletions .github/FUNDING.yml
Original file line number Diff line number Diff line change
@@ -1,3 +1 @@
# These are supported funding model platforms

open_collective: headwind
# the project is not currently looking for funding
1 change: 1 addition & 0 deletions .gitignore
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
/out
/node_modules
/dist
.DS_Store
*.vsix
.history
4 changes: 2 additions & 2 deletions .vscode/launch.json
Original file line number Diff line number Diff line change
Expand Up @@ -14,9 +14,9 @@
"--extensionDevelopmentPath=${workspaceFolder}"
],
"outFiles": [
"${workspaceFolder}/out/**/*.js"
"${workspaceFolder}/dist/**/*.js"
],
"preLaunchTask": "npm: watch"
"preLaunchTask": "npm: build"
}
]
}
13 changes: 0 additions & 13 deletions .vscode/tasks.json
Original file line number Diff line number Diff line change
Expand Up @@ -3,18 +3,5 @@
{
"version": "2.0.0",
"tasks": [
{
"type": "npm",
"script": "watch",
"problemMatcher": "$tsc-watch",
"isBackground": true,
"presentation": {
"reveal": "never"
},
"group": {
"kind": "build",
"isDefault": true
}
}
]
}
2 changes: 2 additions & 0 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
Expand Up @@ -12,3 +12,5 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
* Overhauled class detecting regex for javascript/javascriptreact/typescript/typescriptreact, thanks [@petertriho](https://github.com/petertriho) in [#109](https://github.com/heybourn/headwind/pull/109)
* Support multiple class name regexes per language and optional separator and replacement options, thanks [@han-tyumi](https://github.com/han-tyumi) in [#112](https://github.com/heybourn/headwind/pull/112)
* Fix `cmd+shift+t` overriding default vscode keymap for reopening previously closed tabs, thanks [@tylerjlawson](https://github.com/tylerjlawson) in [#163](https://github.com/heybourn/headwind/pull/163)
* Forked from [heybourn/headwind] to [Trapfether/tailwind-raw-reorder] to continue development. Old repo is inactive.
* Initial rework of the extension to use the same approach as the [Prettier Tailwind plugin]
72 changes: 30 additions & 42 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,38 +1,32 @@
# Headwind
# Tailwind Raw Reorder

[![CircleCI](https://circleci.com/gh/heybourn/headwind.svg?style=svg)](https://circleci.com/gh/heybourn/headwind)

Headwind is an opinionated Tailwind CSS class sorter for Visual Studio Code. It enforces consistent ordering of classes by parsing your code and reprinting class tags to follow a given order.
Tailwind Raw Reorder is an opinionated Tailwind CSS class sorter for Visual Studio Code. It enforces consistent ordering of classes by parsing your code and reprinting class tags to follow a given order.

> Headwind runs on save, will remove duplicate classes and can even sort entire workspaces.
> Tailwind Raw Reorder runs on save, will remove duplicate classes and can even sort entire workspaces.
---

**[Get it from the VS Code Marketplace →](https://marketplace.visualstudio.com/items?itemName=heybourn.headwind)**
<!-- **[Get it from the VS Code Marketplace →](https://marketplace.visualstudio.com/items?itemName=heybourn.headwind)** -->

**[Use PHPStorm? Get @WalrusSoup's Headwind port →](https://plugins.jetbrains.com/plugin/13376-tailwind-formatter/)**

<img src="https://github.com/heybourn/headwind/blob/master/img/explainer.gif?raw=true" alt="Explainer" width="750px">
<!-- <img src="https://github.com/heybourn/headwind/blob/master/img/explainer.gif?raw=true" alt="Explainer" width="750px"> -->

## Usage

You can install Headwind via the VS Code Marketplace, or package it yourself using [vsce](https://code.visualstudio.com/api/working-with-extensions/publishing-extension). Headwind works globally once installed and will run on save if a `tailwind.config.js` file is present within your working directory.
You can install Tailwind Raw Reorder via the VS Code Marketplace, or package it yourself using [vsce](https://code.visualstudio.com/api/working-with-extensions/publishing-extension). Tailwind Raw Reorder works globally once installed and will run on save if a `tailwind.config.js` file is present within your working directory.

You can also trigger Headwind by:
You can also trigger Tailwind Raw Reorder by:

* Pressing ALT + Shift + T on Mac
* Pressing CTRL + ALT + T on Windows
* Pressing CTRL + ALT + T on Linux


Headwind can sort individual files by running 'Sort Tailwind CSS Classes' via the Command Palette. Workspaces can also be sorted by running 'Sort Tailwind CSS Classes on Entire Workspace'.
Tailwind Raw Reorder can sort individual files by running 'Sort Tailwind CSS Classes' via the Command Palette. Workspaces can also be sorted by running 'Sort Tailwind CSS Classes on Entire Workspace'.

Any breakpoints or unknown classes will be moved to the end of the class list, whilst duplicate classes will be removed.

## Customisation

Headwind ships with a default class order (located in [package.json](package.json)). You can edit this (and other settings) to your liking on the extension settings page.

### `headwind.classRegex`:

An object with language IDs as keys and their values determining the regex to search for Tailwind CSS classes.
Expand Down Expand Up @@ -125,52 +119,36 @@ The result of `valueMatch` should be the class text _exactly_, with no other cha

Good example value: `valueMatch w-64 h-full bg-blue-400 relative`

**Note**: Changes made to Headwind's JSON configuration options may not take effect immediately. When experimenting with custom `classRegex`, after each change you should open the control pallete (Ctrl/Cmd + Shift + P) and run `Developer: Reload Window` to ensure changes are applied.
**Note**: Changes made to Tailwind Raw Reorder's JSON configuration options may not take effect immediately. When experimenting with custom `classRegex`, after each change you should open the control pallete (Ctrl/Cmd + Shift + P) and run `Developer: Reload Window` to ensure changes are applied.

<hr>

### `headwind.defaultSortOrder`:

An array that determines Headwind's default sort order.

### `headwind.removeDuplicates`:

Headwind will remove duplicate class names by default. This can be toggled on or off.

`"headwind.removeDuplicates": false`

### `headwind.prependCustomClasses`:
### `tailwind-raw-reorder.runOnSave`:

Headwind will append custom class names by default. They can be prepended instead.
Tailwind Raw Reorder will run on save by default (if a `tailwind.config.js` file is present within your working directory). This can be toggled on or off.

`"headwind.prependCustomClasses": true`

### `headwind.runOnSave`:

Headwind will run on save by default (if a `tailwind.config.js` file is present within your working directory). This can be toggled on or off.

`"headwind.runOnSave": false`
`"tailwind-raw-reorder.runOnSave": false`

## Contributing

Headwind is open-source and contributions are always welcome. If you're interested in submitting a pull request, please take a moment to review [CONTRIBUTING.md](.github/CONTRIBUTING.md).
Tailwind Raw Reorder is open-source and contributions are always welcome. If you're interested in submitting a pull request, please take a moment to review [CONTRIBUTING.md](.github/CONTRIBUTING.md).

## Contributors

### Code Contributors

This project exists thanks to all the people who contribute. [[Contribute](CONTRIBUTING.md)].
<a href="https://github.com/heybourn/headwind/graphs/contributors"><img src="https://opencollective.com/headwind/contributors.svg?width=890&button=false" /></a>
<!-- <a href="https://github.com/heybourn/headwind/graphs/contributors"><img src="https://opencollective.com/headwind/contributors.svg?width=890&button=false" /></a> -->

### Financial Contributors
<!-- ### Financial Contributors
Become a financial contributor and help us sustain our community. [[Contribute](https://opencollective.com/headwind/contribute)]
Become a financial contributor and help us sustain our community. [[Contribute](https://opencollective.com/headwind/contribute)] -->

#### Individuals
<!-- #### Individuals
<a href="https://opencollective.com/headwind"><img src="https://opencollective.com/headwind/individuals.svg?width=890"></a>
<a href="https://opencollective.com/headwind"><img src="https://opencollective.com/headwind/individuals.svg?width=890"></a> -->

#### Organizations
<!-- #### Organizations
Support this project with your organization. Your logo will show up here with a link to your website. [[Contribute](https://opencollective.com/headwind/contribute)]
Expand All @@ -183,4 +161,14 @@ Support this project with your organization. Your logo will show up here with a
<a href="https://opencollective.com/headwind/organization/6/website"><img src="https://opencollective.com/headwind/organization/6/avatar.svg"></a>
<a href="https://opencollective.com/headwind/organization/7/website"><img src="https://opencollective.com/headwind/organization/7/avatar.svg"></a>
<a href="https://opencollective.com/headwind/organization/8/website"><img src="https://opencollective.com/headwind/organization/8/avatar.svg"></a>
<a href="https://opencollective.com/headwind/organization/9/website"><img src="https://opencollective.com/headwind/organization/9/avatar.svg"></a>
<a href="https://opencollective.com/headwind/organization/9/website"><img src="https://opencollective.com/headwind/organization/9/avatar.svg"></a> -->

### Forked from [heybourn/headwind]

This project was forked from [[heybourn/headwind](https://github.com/heybourn/headwind)] to continue development. Old repo is inactive as of 2023 Oct 6th.

Thanks to all the contributors of the original project.

## License

Tailwind Raw Reorder is open-source software licensed under the [MIT license](LICENSE.md).
85 changes: 85 additions & 0 deletions build.mjs
Original file line number Diff line number Diff line change
@@ -0,0 +1,85 @@
import fs from 'fs'
import path from 'path'
import { fileURLToPath } from 'url'
import esbuild from 'esbuild'

/**
* @returns {import('esbuild').Plugin}
*/
function patchRecast() {
return {
// https://github.com/benjamn/recast/issues/611
name: 'patch-recast',
setup(build) {
build.onLoad({ filter: /recast\/lib\/patcher\.js$/ }, async (args) => {
let original = await fs.promises.readFile(args.path, 'utf8')

return {
contents: original
.replace(
'var nls = needsLeadingSpace(lines, oldNode.loc, newLines);',
'var nls = oldNode.type !== "TemplateElement" && needsLeadingSpace(lines, oldNode.loc, newLines);',
)
.replace(
'var nts = needsTrailingSpace(lines, oldNode.loc, newLines)',
'var nts = oldNode.type !== "TemplateElement" && needsTrailingSpace(lines, oldNode.loc, newLines)',
),
}
})
},
}
}

/**
* @returns {import('esbuild').Plugin}
*/
function patchCjsInterop() {
return {
name: 'patch-cjs-interop',
setup(build) {
build.onEnd(async () => {
let outfile = './dist/index.js'

let content = await fs.promises.readFile(outfile)

// Prepend `createRequire`
let code = [
`import {createRequire} from 'module'`,
`import {dirname as __global__dirname__} from 'path'`,
`import {fileURLToPath} from 'url'`,

// CJS interop fixes
`const require=createRequire(import.meta.url)`,
`const __filename=fileURLToPath(import.meta.url)`,
`const __dirname=__global__dirname__(__filename)`,
]

content = `${code.join('\n')}\n${content}`

fs.promises.writeFile(outfile, content)
})
},
}
}

const __dirname = path.dirname(fileURLToPath(import.meta.url))

let context = await esbuild.context({
bundle: true,
platform: 'node',
target: 'node14.21.3',
external: ["vscode"],
minify: true,
entryPoints: [path.resolve(__dirname, './src/index.js')],
outfile: path.resolve(__dirname, './dist/index.js'),
format: 'cjs',
plugins: [patchRecast()],
})

await context.rebuild()

if (process.argv.includes('--watch')) {
await context.watch()
}

await context.dispose()
Binary file removed icon.png
Binary file not shown.
4 changes: 0 additions & 4 deletions jest.config.js

This file was deleted.

Loading

0 comments on commit 63f01d2

Please sign in to comment.