reepolee / svelte-routify-windi-vite Goto Github PK

View Code? Open in Web Editor NEW

52.0 52.0 10.0 237 KB

Svelte Starter template with Routify file-based router, WindiCSS Tailwind compiler and Vite

JavaScript 15.86% HTML 6.16% Svelte 41.09% CSS 1.98% TypeScript 34.90%

svelte-routify-windi-vite's People

Contributors

Stargazers

Watchers

Forkers

colinaut adeelasd jdkdev mzaini30 schelmo taocode saiashirwad kevinsia andrewriveradev vjunjoced iamgdevvv mybigman

svelte-routify-windi-vite's Issues

How to use variants inside @apply in svelte component styles?

Hey! Great starter template.
However, when I am trying to use the variants inside @apply of the svelte components, I get this error:

I know it is probably not related to this repo at all, but you are awesome and might have some knowledge on how to tackle this problem.

[FEATURE] Shortcut to Download This Template

I create a shortcut to download this template quickly:

npm init aqua

Windi CSS Compilation Cornercases

I'm using this template to make an internal tool and ran into a couple of issues, nothing that you can't circumvent with a little cheating but they do ruin the experience a bit. They are all related to Windi or how the svelte file is parsed for Windi, I'm not sure if this is the right place for it though but I wanted these problems outlined for other who might face these issues.

1. Conditionally applied classes within class aren't detected by windi

<span class="{foo?"bg-blue-500":"bg-red-600"}"></span>
Here Windi will not consider bg-blue-500 or bg-red-600 in it's compiled css, whether this is the best or worst way to implement such a feature is a debate for another day but the easiest fix I have is to make a hidden component and shove these classes in it.

2. `@apply hover:bg-red-300` in a svelte files style tag fails to compile

There's a compilation error when there's a : in an @apply statement. I moved the definition to the style.css file and everything compiled and worked as normal.

VS Code Tailwindcss-intellisense operability

For Tailwindcss-intellisense to work in VS Code it needs to have the tailwindcss repository as a dev dependency. I mean you can work with out autocomplete but it's a chore. I forked this and added it. Didn't know if you wanted to add it yourself but I thought I'd mention it.

btw thanks for making this starter! It's nice and fast to work with!

Not able to import types and interfaces from other *.svelte files

import type {filetype} from "../Modules.svelte";

The above code gives an error. Similar code when tested with svelte template, worked fine.

HTML Accessibility/Spec issue with <main> element

I noticed that the current code uses the <main>element as a container in the _layout.svelte file and on the index.svelte. According to W3C spec:

There must not be more than one <main> element in a document. The <main> element must NOT be a descendant of an <article>, <aside>, <footer>, <header>, or <nav> element.

There are a few solutions to this. The easiest is just to use a generic<div> on the index.svelte page or on the layout page or both. You could get way more specific with the semantic html but as this is more of an example code starter it's probably best just to use the generic <div>, rather than restructure everything with perfect semantic html. Leave the latter to the person using it.

This Template

SRC directory

Output Directory

`dist/index.html` (formatted)

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <title>Routify Windi Vite</title>
  <link rel="icon" type="image/png" href="/assets/favicon.png">

  <!-- Is this a replacement for the `app.js` file needed by tossr?  -->
  <script type="module" crossorigin src="/assets/index.343938c9.js"></script>

  <!-- or this?  -->
  <link rel="modulepreload" href="/assets/vendor.988e13b5.js">
  <link rel="stylesheet" href="/assets/index.2b71573f.css">
</head>

<body>
  <div id="app"></div>
</body>

</html>

ToSSR usage

const { tossr } = require('tossr')

const template = 'dist/index.html'
const script = 'dist/app.js'
const url = '/blog/ssr-is-fun'

const html = await tossr(template, script, url)

In this case, is the app.js script still needed?

reepolee / svelte-routify-windi-vite Goto Github PK

svelte-routify-windi-vite's People

Contributors

Stargazers

Watchers

Forkers

svelte-routify-windi-vite's Issues

1. Conditionally applied classes within class aren't detected by windi

2. @apply hover:bg-red-300 in a svelte files style tag fails to compile

This Template

SRC directory

Output Directory

dist/index.html (formatted)

ToSSR usage

CC:

Reference

Recommend Projects

Recommend Topics

Recommend Org

Jobs

2. `@apply hover:bg-red-300` in a svelte files style tag fails to compile

`dist/index.html` (formatted)