Skip to content

Commit de37ebf

Browse files
pokeypre-commit-ci-lite[bot]
pokey
and
pre-commit-ci-lite[bot]
authored
Add prettier-plugin-tailwindcss (#2245)
Sorts in [this order](https://tailwindcss.com/blog/automatic-class-sorting-with-prettier#how-classes-are-sorted), which seems reasonable ## Checklist - [-] I have added [tests](https://www.cursorless.org/docs/contributing/test-case-recorder/) - [-] I have updated the [docs](https://github.com/cursorless-dev/cursorless/tree/main/docs) and [cheatsheet](https://github.com/cursorless-dev/cursorless/tree/main/cursorless-talon/src/cheatsheet) - [-] I have not broken the cheatsheet --------- Co-authored-by: pre-commit-ci-lite[bot] <117423508+pre-commit-ci-lite[bot]@users.noreply.github.com>
1 parent 918fd78 commit de37ebf

12 files changed

+105
-48
lines changed

‎.prettierrc

+2-1
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
11
{
2-
"trailingComma": "all"
2+
"trailingComma": "all",
3+
"plugins": ["prettier-plugin-tailwindcss"]
34
}

‎package.json

+1
Original file line numberDiff line numberDiff line change
@@ -40,6 +40,7 @@
4040
"eslint-plugin-unicorn": "49.0.0",
4141
"eslint-plugin-unused-imports": "^3.0.0",
4242
"prettier": "3.0.3",
43+
"prettier-plugin-tailwindcss": "0.5.11",
4344
"syncpack": "9.8.4",
4445
"typescript": "^5.2.2"
4546
},

‎packages/cheatsheet/src/lib/cheatsheet.tsx

+5-5
Original file line numberDiff line numberDiff line change
@@ -17,14 +17,14 @@ export const CheatsheetPage: React.FC<CheatsheetPageProps> = ({
1717
}) => {
1818
return (
1919
<main className="dark:text-stone-100">
20-
<h1 className="text-2xl md:text-3xl text-center mt-2 mb-1 xl:mt-4">
20+
<h1 className="mb-1 mt-2 text-center text-2xl md:text-3xl xl:mt-4">
2121
Cursorless Cheatsheet{" "}
22-
<span className="text-sm inline-block align-middle">
22+
<span className="inline-block align-middle text-sm">
2323
<SmartLink to="#legend">
2424
<FontAwesomeIcon icon={faCircleQuestion} />
2525
</SmartLink>
2626
</span>
27-
<small className="text-sm block">
27+
<small className="block text-sm">
2828
See the{" "}
2929
<SmartLink to={"https://www.cursorless.org/docs/"}>
3030
full documentation
@@ -42,7 +42,7 @@ type CheatsheetProps = {
4242
};
4343

4444
const Cheatsheet: React.FC<CheatsheetProps> = ({ cheatsheetInfo }) => (
45-
<div className="p-2 gap-2 md:p-3 md:gap-3 xl:p-4 xl:gap-4 columns-1 md:columns-2 xl:columns-3 xl:max-w-[1600px] xl:mx-auto">
45+
<div className="columns-1 gap-2 p-2 md:columns-2 md:gap-3 md:p-3 xl:mx-auto xl:max-w-[1600px] xl:columns-3 xl:gap-4 xl:p-4">
4646
{cheatsheetInfo.sections
4747
.filter((section) => section.items.length > 0)
4848
.map((section) => (
@@ -64,7 +64,7 @@ type CheatsheetSectionProps = {
6464
};
6565

6666
const CheatsheetSection: React.FC<CheatsheetSectionProps> = ({ children }) => (
67-
<section className=" break-inside-avoid mb-5 md:mb-3 xl:mb-4 last:mb-0">
67+
<section className=" mb-5 break-inside-avoid last:mb-0 md:mb-3 xl:mb-4">
6868
{children}
6969
</section>
7070
);

‎packages/cheatsheet/src/lib/components/CheatsheetLegendComponent.tsx

+5-5
Original file line numberDiff line numberDiff line change
@@ -20,16 +20,16 @@ export default function CheatsheetLegendComponent({
2020
return (
2121
<div
2222
id="legend"
23-
className={`border ${borderClassName} rounded-lg bg-violet-100 dark:bg-violet-900 overflow-hidden`}
23+
className={`border ${borderClassName} overflow-hidden rounded-lg bg-violet-100 dark:bg-violet-900`}
2424
>
25-
<h2 className="text-xl text-center my-1 text-violet-900 dark:text-violet-100">
25+
<h2 className="my-1 text-center text-xl text-violet-900 dark:text-violet-100">
2626
Legend
2727
</h2>
2828
<table className="w-full">
2929
<thead>
3030
<tr className="text bg-violet-300 dark:bg-violet-500">
31-
<th className="px-1 font-normal w-1/2">Term</th>
32-
<th className="px-1 border-l border-violet-400 font-normal">
31+
<th className="w-1/2 px-1 font-normal">Term</th>
32+
<th className="border-l border-violet-400 px-1 font-normal">
3333
Definition
3434
</th>
3535
</tr>
@@ -38,7 +38,7 @@ export default function CheatsheetLegendComponent({
3838
{data.map(({ term, definition, link, id }) => (
3939
<tr
4040
key={id}
41-
className="odd:bg-violet-200 odd:dark:bg-violet-600 dark:bg-violet-800"
41+
className="odd:bg-violet-200 dark:bg-violet-800 odd:dark:bg-violet-600"
4242
>
4343
<td className="px-1">{formatCaptures(`<${term}>`)}</td>
4444
<td className="border-l border-violet-400 px-1">

‎packages/cheatsheet/src/lib/components/CheatsheetListComponent.tsx

+4-4
Original file line numberDiff line numberDiff line change
@@ -24,14 +24,14 @@ export default function CheatsheetListComponent({
2424
return (
2525
<div
2626
id={section.id}
27-
className={`border ${borderClassName} rounded-lg bg-stone-100 dark:bg-stone-700 overflow-hidden`}
27+
className={`border ${borderClassName} overflow-hidden rounded-lg bg-stone-100 dark:bg-stone-700`}
2828
>
29-
<h2 className="text-xl text-center my-1">{section.name}</h2>
29+
<h2 className="my-1 text-center text-xl">{section.name}</h2>
3030
<table className="w-full">
3131
<thead>
3232
<tr className="text bg-stone-300 dark:bg-stone-500">
33-
<th className="px-1 font-normal w-1/2">Spoken form</th>
34-
<th className="px-1 border-l border-stone-400 font-normal">
33+
<th className="w-1/2 px-1 font-normal">Spoken form</th>
34+
<th className="border-l border-stone-400 px-1 font-normal">
3535
Meaning
3636
</th>
3737
</tr>

‎packages/cheatsheet/src/lib/components/CheatsheetNotesComponent.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -5,9 +5,9 @@ export default function CheatsheetNotesComponent(): JSX.Element {
55
return (
66
<div
77
id="notes"
8-
className="p-2 border border-violet-300 dark:border-violet-500 rounded-lg bg-violet-100 dark:bg-violet-900 overflow-hidden"
8+
className="overflow-hidden rounded-lg border border-violet-300 bg-violet-100 p-2 dark:border-violet-500 dark:bg-violet-900"
99
>
10-
<h2 className="text-xl text-center mb-1 text-violet-900 dark:text-violet-100">
10+
<h2 className="mb-1 text-center text-xl text-violet-900 dark:text-violet-100">
1111
Notes
1212
</h2>
1313
<ul>

‎packages/cheatsheet/src/lib/components/formatCaptures.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ export function formatCaptures(input: string) {
1515
return (
1616
<span
1717
key={i}
18-
className="inline-block p-[2px] rounded-md text-[#000000E3] dark:text-[#FFFFFFE3] bg-[#8686864C] dark:bg-[#FFFFFF33]"
18+
className="inline-block rounded-md bg-[#8686864C] p-[2px] text-[#000000E3] dark:bg-[#FFFFFF33] dark:text-[#FFFFFFE3]"
1919
>
2020
<SmartLink to="#legend" noFormatting={true}>
2121
{"["}

‎packages/cursorless-org/src/components/Layout.tsx

+18-18
Original file line numberDiff line numberDiff line change
@@ -8,34 +8,34 @@ import Link from "next/link";
88

99
const components: MDXComponents = {
1010
h1: ({ children }) => (
11-
<h1 className="text-center uppercase text-[1.88em] leading-tight mt-7 tracking-[0.14em] font-semibold">
11+
<h1 className="mt-7 text-center text-[1.88em] font-semibold uppercase leading-tight tracking-[0.14em]">
1212
{children}
1313
</h1>
1414
),
1515
h2: ({ children }) => (
16-
<h2 className="uppercase text-[1.5em] mt-8 mb-4 sm:mb-8 leading-[1.2] font-semibold tracking-[0.08em]">
16+
<h2 className="mb-4 mt-8 text-[1.5em] font-semibold uppercase leading-[1.2] tracking-[0.08em] sm:mb-8">
1717
{children}
1818
</h2>
1919
),
2020
h3: ({ children }) => (
21-
<h3 className="uppercase text-[1.25rem] mt-6 mb-3 sm:mb-6 leading-tight font-medium tracking-[0.08em]">
21+
<h3 className="mb-3 mt-6 text-[1.25rem] font-medium uppercase leading-tight tracking-[0.08em] sm:mb-6">
2222
{children}
2323
</h3>
2424
),
2525
h4: ({ children }) => (
26-
<h4 className="uppercase text-[1.125rem] mt-11 mb-3 sm:mb-6 font-medium tracking-[0.08em]">
26+
<h4 className="mb-3 mt-11 text-[1.125rem] font-medium uppercase tracking-[0.08em] sm:mb-6">
2727
{children}
2828
</h4>
2929
),
3030
hr: () => <hr className="my-8 border-black dark:border-white" />,
31-
ul: ({ children }) => <ul className="list-disc ml-8">{children}</ul>,
32-
ol: ({ children }) => <ol className="list-decimal ml-8">{children}</ol>,
31+
ul: ({ children }) => <ul className="ml-8 list-disc">{children}</ul>,
32+
ol: ({ children }) => <ol className="ml-8 list-decimal">{children}</ol>,
3333
li: ({ children }) => <li className="my-2">{children}</li>,
3434
img: ({ src, alt }) => (
3535
// FIXME: Figure out how to use next/image with MDX
3636
// eslint-disable-next-line @next/next/no-img-element
3737
<img
38-
className="mx-auto my-12 rounded-[4px] border-teal-400 border-[1.5px]"
38+
className="mx-auto my-12 rounded-[4px] border-[1.5px] border-teal-400"
3939
src={src}
4040
alt={alt}
4141
style={{ maxWidth: "100%" }}
@@ -45,34 +45,34 @@ const components: MDXComponents = {
4545
// FIXME: Figure out how to use next/image with MDX
4646
// eslint-disable-next-line @next/next/no-img-element
4747
<img
48-
className="mx-auto my-12 border-teal-400 border p-3 sm:p-6 rounded-sm"
48+
className="mx-auto my-12 rounded-sm border border-teal-400 p-3 sm:p-6"
4949
src={src}
5050
alt={alt}
5151
style={{ maxWidth: "100%" }}
5252
/>
5353
),
5454
CalloutBox: ({ children }) => (
55-
<div className="border-teal-400 border rounded-sm px-7 my-12 pb-6">
55+
<div className="my-12 rounded-sm border border-teal-400 px-7 pb-6">
5656
{children}
5757
</div>
5858
),
5959
Testimonials: ({ children }) => (
60-
<div className="flex flex-col gap-5 mt-8">{children}</div>
60+
<div className="mt-8 flex flex-col gap-5">{children}</div>
6161
),
6262
Testimonial: ({ children, src, name, title, company }) => (
63-
<div className="flex flex-col items-center bg-teal-100 dark:bg-teal-900 border border-teal-400 text-teal-700 dark:text-teal-300 p-3 sm:p-6 rounded-sm">
64-
<blockquote className="mb-5 sm:mb-6 flex flex-col gap-4">
63+
<div className="flex flex-col items-center rounded-sm border border-teal-400 bg-teal-100 p-3 text-teal-700 dark:bg-teal-900 dark:text-teal-300 sm:p-6">
64+
<blockquote className="mb-5 flex flex-col gap-4 sm:mb-6">
6565
{children}
6666
</blockquote>
6767
<div className="flex items-center gap-4">
6868
{/* eslint-disable-next-line @next/next/no-img-element */}
6969
<img
70-
className="rounded-full w-[4.5em] h-[4.5em] border-teal-400 border dark:border-[0.5px]"
70+
className="h-[4.5em] w-[4.5em] rounded-full border border-teal-400 dark:border-[0.5px]"
7171
src={src}
7272
alt={name}
7373
/>
7474
<div className="flex flex-col gap-[0.375rem]">
75-
<div className="text-teal-800 dark:text-teal-200 font-semibold text-[1.2em] leading-none">
75+
<div className="text-[1.2em] font-semibold leading-none text-teal-800 dark:text-teal-200">
7676
{name}
7777
</div>
7878
<div className="text-[0.9em] leading-none">{title}</div>
@@ -82,7 +82,7 @@ const components: MDXComponents = {
8282
</div>
8383
),
8484
Tiers: ({ children }) => (
85-
<div className="my-8 font-medium tracking-[0.1em] text-[1.2em]">
85+
<div className="my-8 text-[1.2em] font-medium tracking-[0.1em]">
8686
{children}
8787
</div>
8888
),
@@ -118,12 +118,12 @@ export function Layout({ title, description, relativeUrl, children }: Props) {
118118
/>
119119
</Head>
120120
<MDXProvider components={components}>
121-
<main className="text-salmon-900 dark:text-salmon-100 font-mono font-normal sm:dark:font-light px-4 pt-8 sm:pt-16 lg:pt-20 pb-8 tracking-[0.08em] leading-6">
122-
<div className="max-w-prose mx-auto">
121+
<main className="text-salmon-900 dark:text-salmon-100 px-4 pb-8 pt-8 font-mono font-normal leading-6 tracking-[0.08em] sm:pt-16 sm:dark:font-light lg:pt-20">
122+
<div className="mx-auto max-w-prose">
123123
<Link href="/">
124124
<Logo
125125
title="Logo"
126-
className="mx-auto align-middle w-[6.284em] h-[6.284em]"
126+
className="mx-auto h-[6.284em] w-[6.284em] align-middle"
127127
/>
128128
</Link>
129129
{children}

‎packages/cursorless-org/src/components/SpamProofEmailLink.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -58,7 +58,7 @@ export function SpamProofEmailLink({
5858
return (
5959
<a
6060
href={href}
61-
className="text-teal-600 hover:text-teal-500 dark:text-teal-500 hover:dark:text-teal-300 underline underline-offset-4"
61+
className="text-teal-600 underline underline-offset-4 hover:text-teal-500 dark:text-teal-500 hover:dark:text-teal-300"
6262
>
6363
{children ?? (
6464
<span className="text-[18px]">

‎packages/cursorless-org/src/components/embedded-video.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ export function EmbeddedVideo({ youtubeSlug }: Props) {
1717
<div style={{ position: "relative", paddingTop: "56.25%" }}>
1818
{isError ? (
1919
<div
20-
className={`text-red-600 text-center w-full h-full flex border border-black`}
20+
className={`flex h-full w-full border border-black text-center text-red-600`}
2121
style={{ position: "absolute", top: 0, left: 0 }}
2222
>
2323
<div className="m-auto">Error loading YouTube video</div>

‎packages/cursorless-org/src/pages/index.tsx

+10-10
Original file line numberDiff line numberDiff line change
@@ -21,33 +21,33 @@ export default function LandingPage() {
2121
<title>{TITLE}</title>
2222
<IndexSocial />
2323
</Head>
24-
<main className="items-center justify-center text-salmon-900 dark:text-salmon-100 font-monoWide font-bold tracking-[0.18em] overflow-auto fixed top-0 bottom-0 left-0 right-0 p-2 sm:p-0 sm:flex ">
24+
<main className="text-salmon-900 dark:text-salmon-100 font-monoWide fixed bottom-0 left-0 right-0 top-0 items-center justify-center overflow-auto p-2 font-bold tracking-[0.18em] sm:flex sm:p-0 ">
2525
{/*
2626
Note that the font scale gets applied to this element so that all nested elements can use
2727
`em` units and will automatically be scaled.
2828
FIXME: We should probably add the font size to the root element so that we can use `rem`
2929
units instead
3030
*/}
3131
<div
32-
className={`h-full flex flex-col text-[10px] sm:m-auto ${smallScaling} ${stretchedScaling}`}
32+
className={`flex h-full flex-col text-[10px] sm:m-auto ${smallScaling} ${stretchedScaling}`}
3333
>
34-
<div className="flex-1 flex flex-col">
34+
<div className="flex flex-1 flex-col">
3535
<header className="flex flex-row items-center ">
36-
<div className="align-middle mr-auto text-2xl uppercase">
36+
<div className="mr-auto align-middle text-2xl uppercase">
3737
Cursorless
3838
</div>
3939
<Logo
4040
title="Logo"
41-
className="align-middle w-[30px] h-[30px] sm:w-[4em] sm:h-[4em]"
41+
className="h-[30px] w-[30px] align-middle sm:h-[4em] sm:w-[4em]"
4242
/>
4343
</header>
4444
<Slogan />
4545
</div>
46-
<div className="border-[0.5px] border-salmon-100 p-[1px]">
46+
<div className="border-salmon-100 border-[0.5px] p-[1px]">
4747
<EmbeddedVideo youtubeSlug={YOUTUBE_SLUG} />
4848
</div>
49-
<div className="flex-1 flex flex-col">
50-
<div className="flex flex-row justify-around sm:justify-center w-full my-auto sm:gap-[12.8em]">
49+
<div className="flex flex-1 flex-col">
50+
<div className="my-auto flex w-full flex-row justify-around sm:justify-center sm:gap-[12.8em]">
5151
<Button text="Docs" href="/docs" isExternal={false} />{" "}
5252
<Button
5353
text="Donate"
@@ -65,7 +65,7 @@ export default function LandingPage() {
6565

6666
function Slogan() {
6767
return (
68-
<h1 className="text-lg leading-[1.048888] uppercase text-center my-auto">
68+
<h1 className="my-auto text-center text-lg uppercase leading-[1.048888]">
6969
<span className="inline-block">Voice coding</span>{" "}
7070
<span className="inline-block">at the speed of thought</span>
7171
</h1>
@@ -74,7 +74,7 @@ function Slogan() {
7474

7575
function NetlifyFooter() {
7676
return (
77-
<footer className="text-center text-xs tracking-widest font-light">
77+
<footer className="text-center text-xs font-light tracking-widest">
7878
<span className="uppercase dark:opacity-50">
7979
This site is powered by{" "}
8080
</span>

‎pnpm-lock.yaml

+55
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)