A starter template to help you quickly launch a new project with Svelte / Sveltekit, Typescript, TailwindCSS, and Pug. We call it the "Skinnypug" stack.  

About this Template
Core Technologies
Plugins, Adapters, Misc
Getting Started
About Sveltekit
Using Pug with Svelte
Folder Shortcuts
Editor & Extenstions

This starter was developed for the [Lightning Jar ](https://lightningjar.com) team. It's designed to get one up and running quickly on a new project using the core technologies Svelte, Sveltekit, Typescript, TailwindCSS, Pug + a few other bells and whistles ( see the full breakdown below).

Sveltekit - Application Framework
Svelte - Component Framework
Vite - Front-end Build Tool
Pug - HTML Template Engine
Typescript - JS Preprocessor
TailwindCSS - CSS Framework
Autoprefixer - CSS Vendor Prefixing
PostCSS - CSS Transformations

Prettier - Formatting
ESLint - Linting
Playwright - Testing

eslint-config-prettier
eslint-plugin-svelte3
prettier-plugin-tailwindcss
sveltejs/adapter-auto
svelte-check
svelte-preprocess
tailwindcss/typography
tailwindcss/forms
tslib
typescript-eslint/eslint-plugin
typescript-eslint/parser

Once you've created a project and installed dependencies with npm install (or pnpm install or yarn), start a development server:

npm run dev

# or start the server and open the app in a new browser tab
npm run dev -- --open

To create a production version of your app:

npm run build

You can preview the production build with npm run preview.

Sveltekit is still in the final stages of beta. Specifically, it is in release candidate phase for 1.0 while the SvelteKit team addresses reported issues and add polish.

While there are no more planned breaking changes before 1.0, it is still likely that there are bugs, and things will break and change.

Because of this fact, there are two dev dependencies in this package which are set to pull in the latest releases (see below).

• "@sveltejs/adapter-auto": "next",
• "@sveltejs/kit": "next",

As soon as SvelteKit officially releases 1.0 this starter will switch to pulling in only official releases, and the starter will become more reliably stable. For now, I will watch SvelteKit releases notes, and test daily.

If you get stuck working with SvelteKit yuo can reach out for help in the SvelteKit Discord chatroom.

I love Pug, and the first thing I figured out when I started working with Svelte, was how to use Pug inside Svelte files. Thankfully other devs had already solved the technical challenges for me.

This starter uses the svelte-preprocess package.It is a Svelte preprocessor with sensible defaults and support for: PostCSS, SCSS, Less, Stylus, CoffeeScript, TypeScript, Pug and much more.

Note: Special syntax is required to write Pug inside Svelte templates. Some basics are included below. You can learn more here.**

Because some of Svelte's template syntax is invalid in Pug svelte-preprocess provides some pug mixins to represent svelte's {#...}{/...} blocks: +if(), +else(), +elseif(), +each(), +key(), +await(), +then(), +catch(), +html(), +const(), +debug().

ul
  +if('posts && posts.length > 1')
    +each('posts as post')
      li
        a(rel="prefetch" href="blog/{post.slug}") {post.title}
    +else()
      span No posts :c

Pug encodes everything inside an element attribute to html entities, so attr="{foo && bar}" becomes attr="foo && bar". To prevent this from happening, instead of using the = operator use != which won't encode your attribute value:

button(disabled!="{foo && bar}")

This is also necessary to pass callbacks:

button(on:click!="{(e) => doTheThing(e)}")

It is not possible to use template literals for attribute values. You can't write attr=`Hello ${value ? 'Foo' : 'Bar'}`, instead write attr="Hello {value ? 'Foo' : 'Bar'}".

To spread props into a pug element, wrap the {...object} expression with quotes ".

This:

button.big(type="button" disabled "{...slide.props}") Send

Becomes:

<button class="big" type="button" disabled {...slide.props}> Send </button>

Syntax to use Svelte Element directives with Pug

input(bind:value="{foo}")
input(on:input="{bar}")

The following shortcuts and corresponding folders come pre-configured in this template:

• $atoms: './src/lib/components/atoms'
• $components: './src/lib/components'
• $functions: path.resolve('./src/lib/functions'
• $lib: './src/lib'
• $molecules: './src/lib/components/molecules'
• $organisms: './src/lib/components/organisms'
• $settings: './src/lib/settings'
• $stores: './src/lib/stores'
• $types: './src/lib/types'
• $utils: './src/lib/utils'

If you are using VSCode, we recommend these extensions:

• Svelte for VS Code
• ESLint
• Prettier ESLint
• Tailwind CSS Intellisense
• Playwright Test for VSCode