LukeParke/website
1
0
Fork 0
mirror of https://github.com/LukeHagar/website.git synced 2025-12-09 21:07:46 +00:00
Code Issues Packages Projects Releases Wiki Activity

get prettier-tailwind working

Browse Source
This commit is contained in:
Jesse Winton
2024-09-06 12:35:47 -04:00
parent 034a075bf8
commit ac28d3c38c
6 changed files with 69 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
.prettierrc
View File

@@ -4,6 +4,6 @@
"singleQuote": true, "singleQuote": true,
"trailingComma": "none", "trailingComma": "none",
"printWidth": 100, "printWidth": 100,
"plugins": ["prettier-plugin-tailwindcss", "prettier-plugin-svelte"], "plugins": ["prettier-plugin-svelte", "prettier-plugin-tailwindcss"],
"overrides": [{ "files": "*.svelte", "options": { "parser": "svelte" } }] "overrides": [{ "files": "*.svelte", "options": { "parser": "svelte" } }]
} }

2
package.json
View File

@@ -68,7 +68,7 @@
"postcss": "^8.4.39", "postcss": "^8.4.39",
"prettier": "^3.3.3", "prettier": "^3.3.3",
"prettier-plugin-svelte": "^3.2.5", "prettier-plugin-svelte": "^3.2.5",
"prettier-plugin-tailwindcss": "^0.6.5", "prettier-plugin-tailwindcss": "^0.6.6",
"remeda": "^2.10.0", "remeda": "^2.10.0",
"sass": "^1.77.6", "sass": "^1.77.6",
"svelte": "^4.2.18", "svelte": "^4.2.18",

13
pnpm-lock.yaml generated
View File

@@ -139,8 +139,8 @@ importers:
specifier: ^3.2.5 specifier: ^3.2.5
version: 3.2.6(prettier@3.3.3)(svelte@4.2.18) version: 3.2.6(prettier@3.3.3)(svelte@4.2.18)
prettier-plugin-tailwindcss: prettier-plugin-tailwindcss:
specifier: ^0.6.5 specifier: ^0.6.6
version: 0.6.5(prettier-plugin-svelte@3.2.6(prettier@3.3.3)(svelte@4.2.18))(prettier@3.3.3) version: 0.6.6(prettier-plugin-svelte@3.2.6(prettier@3.3.3)(svelte@4.2.18))(prettier@3.3.3)
remeda: remeda:
specifier: ^2.10.0 specifier: ^2.10.0
version: 2.10.0 version: 2.10.0
@@ -3452,8 +3452,8 @@ packages:
prettier: ^3.0.0 prettier: ^3.0.0
svelte: ^3.2.0 || ^4.0.0-next.0 || ^5.0.0-next.0 svelte: ^3.2.0 || ^4.0.0-next.0 || ^5.0.0-next.0
prettier-plugin-tailwindcss@0.6.5: prettier-plugin-tailwindcss@0.6.6:
resolution: {integrity: sha512-axfeOArc/RiGHjOIy9HytehlC0ZLeMaqY09mm8YCkMzznKiDkwFzOpBvtuhuv3xG5qB73+Mj7OCe2j/L1ryfuQ==} resolution: {integrity: sha512-OPva5S7WAsPLEsOuOWXATi13QrCKACCiIonFgIR6V4lYv4QLp++UXVhZSzRbZxXGimkQtQT86CC6fQqTOybGng==}
engines: {node: '>=14.21.3'} engines: {node: '>=14.21.3'}
peerDependencies: peerDependencies:
'@ianvs/prettier-plugin-sort-imports': '*' '@ianvs/prettier-plugin-sort-imports': '*'
@@ -3467,6 +3467,7 @@ packages:
prettier-plugin-import-sort: '*' prettier-plugin-import-sort: '*'
prettier-plugin-jsdoc: '*' prettier-plugin-jsdoc: '*'
prettier-plugin-marko: '*' prettier-plugin-marko: '*'
prettier-plugin-multiline-arrays: '*'
prettier-plugin-organize-attributes: '*' prettier-plugin-organize-attributes: '*'
prettier-plugin-organize-imports: '*' prettier-plugin-organize-imports: '*'
prettier-plugin-sort-imports: '*' prettier-plugin-sort-imports: '*'
@@ -3493,6 +3494,8 @@ packages:
optional: true optional: true
prettier-plugin-marko: prettier-plugin-marko:
optional: true optional: true
prettier-plugin-multiline-arrays:
optional: true
prettier-plugin-organize-attributes: prettier-plugin-organize-attributes:
optional: true optional: true
prettier-plugin-organize-imports: prettier-plugin-organize-imports:
@@ -7925,7 +7928,7 @@ snapshots:
prettier: 3.3.3 prettier: 3.3.3
svelte: 4.2.18 svelte: 4.2.18
prettier-plugin-tailwindcss@0.6.5(prettier-plugin-svelte@3.2.6(prettier@3.3.3)(svelte@4.2.18))(prettier@3.3.3): prettier-plugin-tailwindcss@0.6.6(prettier-plugin-svelte@3.2.6(prettier@3.3.3)(svelte@4.2.18))(prettier@3.3.3):
dependencies: dependencies:
prettier: 3.3.3 prettier: 3.3.3
optionalDependencies: optionalDependencies:

2
src/lib/components/ui/Badge.svelte
View File

@@ -9,7 +9,7 @@
<span <span
class={classNames( class={classNames(
'badge text-xs self-start uppercase font-aeonik-fono text-white py-[0.375rem] px-3 rounded-[0.375rem] backdrop-blur-2xl', 'badge font-aeonik-fono self-start rounded-[0.375rem] py-[0.375rem] px-3 text-xs uppercase text-white backdrop-blur-2xl',
classes classes
)} )}
{...props} {...props}

91
src/lib/components/ui/Button.svelte
View File

@@ -1,56 +1,71 @@
<script lang="ts"> <script lang="ts">
import { classNames } from '$lib/utils/classnames'; import { classNames } from '$lib/utils/classnames';
import type { HTMLButtonAttributes, HTMLAnchorAttributes } from 'svelte/elements'; import type { HTMLButtonAttributes, HTMLAnchorAttributes } from 'svelte/elements';
import { cva, type VariantProps } from 'cva'; import { cva, type VariantProps } from 'cva';
import InlineTag from './InlineTag.svelte';
const button = cva( const button = cva(
[ [
'flex w-fit justify-center text-center no-underline select-none min-w-10 bg-origin-border text-white font-medium items-center gap-2 rounded-lg border border-transparent button duration-200' 'flex w-fit justify-center px-[0.875rem] h-10 transition-all text-center no-underline select-none min-w-10 bg-origin-border text-white font-medium items-center gap-2 rounded-lg border border-transparent button duration-200'
], ],
{ {
variants: { variants: {
variant: { variant: {
primary: [ primary: [
'px-[0.875rem] py-[0.4375rem] bg-[linear-gradient(135deg,_var(--color-accent)_0%,_var(--color-accent)_61%,_var(--color-secondary-100)_100%)]', 'bg-[linear-gradient(135deg,_var(--color-accent)_0%,_var(--color-accent)_61%,_var(--color-secondary-100)_100%)]',
'hover:shadow-[0_0_2rem_var(--color-accent-200)] active:not:disabled:shadow-[0_0_2rem_var(--color-accent-200)]' 'hover:shadow-[0_0_2rem_var(--color-accent-200)] active:not:disabled:shadow-[0_0_2rem_var(--color-accent-200)]'
], ],
secondary: [ secondary: [
'bg-[#fd366e0a] relative', 'bg-[#fd366e0a] relative',
'hover:shadow-[0_-6px_10px_0px_rgba(253,54,110,0.08)_inset]' 'hover:shadow-[0_-6px_10px_0px_rgba(253,54,110,0.08)_inset]'
], ],
text: [ text: [
'bg-transparent border-transparent', 'bg-transparent border-transparent text-white',
'hover:backdrop-blur-md hover:bg-[linear-gradient(135deg,_rgba(255,_255,_255,_0.06)_0%,_rgba(255,_255,_255,_0.10)_54.74%,_rgba(255,_255,_255,_0.06)_100%)]' 'hover:backdrop-blur-md hover:bg-[linear-gradient(135deg,_rgba(255,_255,_255,_0.06)_0%,_rgba(255,_255,_255,_0.10)_54.74%,_rgba(255,_255,_255,_0.06)_100%)]'
] ]
}
} }
} }
); }
);
type ButtonProps = type ButtonProps =
| (HTMLButtonAttributes & { href?: undefined }) | (HTMLButtonAttributes & { href?: undefined })
| (HTMLAnchorAttributes & { href: string }); | (HTMLAnchorAttributes & { href: string });
type $$Props = ButtonProps & VariantProps<typeof button>; type $$Props = ButtonProps & VariantProps<typeof button>;
export let href: $$Props['href'] = undefined; export let href: $$Props['href'] = undefined;
export let variant: $$Props['variant'] = 'primary'; export let variant: $$Props['variant'] = 'primary';
const { class: classes, ...props } = $$restProps; const { class: classes, ...props } = $$restProps;
const buttonClasses = classNames(button({ variant }), classes, { const buttonClasses = classNames(button({ variant }), classes, {
secondary: variant === 'secondary', secondary: variant === 'secondary',
'leading-tight': $$slots.icon 'leading-tight': $$slots.icon
}); });
</script> </script>
{#if href} {#if href}
<a {...props} {href} class={buttonClasses}> <a {...props} href={href} class={buttonClasses}>
<slot name="icon" /> {#if $$slots.icon}
<slot name="icon" />
{/if}
<slot /> <slot />
{#if $$slots.tag}
<InlineTag>
<slot name="tag" />
</InlineTag>
{/if}
</a> </a>
{:else} {:else}
<button {...props} class={buttonClasses}> <button {...props} class={buttonClasses}>
<slot name="icon" /> {#if $$slots.icon}
<slot name="icon" />
{/if}
<slot /> <slot />
{#if $$slots.tag}
<InlineTag>
<slot name="tag" />
</InlineTag>
{/if}
</button> </button>
{/if} {/if}

5
src/lib/components/ui/InlineTag.svelte Normal file
View File

@@ -0,0 +1,5 @@
<div
class="tracking-none text-sub-body text-greyscale-900 dark:text-greyscale-100 py-0.25 -mr-0.5 rounded-[.25rem] bg-black/[0.08] px-1 dark:bg-white/[0.12]"
>
<slot />
</div>