An Interest In:
Web News this Week
- April 27, 2024
- April 26, 2024
- April 25, 2024
- April 24, 2024
- April 23, 2024
- April 22, 2024
- April 21, 2024
Style your Svelte website faster with Stylify
Stylify + Svelte + Vite. Style your Svelte website faster with Stylify. Don't study selectors and syntax. Use pure CSS syntax and get generated CSS with advanced optimization for production.
For easier start, you can checkout the Stylify Stackblitz playground .
Stylify Introduction
Stylify generates CSS dynamically based on what you write. The syntax is similar to css property:value
. Defined utilities are combined with components selectors and in production minified to bare minimum like .color\:red,.button {color:red}
to ._zx, ._ga{color:red}
.
Stylify allows you to get very small bundles, generate additional lazyloaded CSS chunks and style the page by writting HTML and selectors .
Svelte Setup
The easiest way to Setup the Svelte is using cli:
- Run
yarn create vite app
- Select
svelte
orsvelte-ts
- Then
cd app
This way you will get the default Svelte application skeleton.
Stylify Integration
Install the @stylify/unplugin package using NPM or Yarn:
yarn add @stylify/unpluginnpm i @stylify/unplugin
Open the vite.config.js
and copy the following content into it:
import { defineConfig } from 'vite'import { svelte } from '@sveltejs/vite-plugin-svelte'import { vitePlugin } from '@stylify/unplugin';const stylifyPlugin = vitePlugin({ transformIncludeFilter: (id) => { return id.endsWith('svelte'); }, bundles: [{ outputFile: './src/stylify.css', files: ['./src/**/*.svelte'], }]});export default defineConfig({ plugins: [stylifyPlugin, svelte()]});
The last step, open the src/main.js
and add path to stylify.css
:
// ...import './stylify.css'
Styling the website
If yout copy the code bellow into the src/App.svelte
and run yarn dev
you will get a styled Hello World!
text:
<main class="max-width:800px margin:0__auto"> <h1 class="text-align:center margin-top:100px font-size:42px"> Hello World! </h1></main>
Stylify watches any change in the files that matches mask in the bundle files and generates css into the src/stylify.css
.
If you add for example color:blue
the CSS will be automatically updated .
Go ahead and try Stylify directly on Stackblitz.com .
Components
To avoid bloated templates with utilities, you can use
components directly in files, where they are used through content options (expects javascript object without brackets) or in the compiler config.
<!--stylify-components container: 'max-width:800px margin:0__auto', title: 'text-align:center margin-top:100px font-size:42px'/stylify-components--><main class="container"> <h1 class="title"> Hello World! </h1></main>
Variables
If you like clean code, you also want avoid hardcoded values in selectors. Variables can be defined the same way as components:
<!--stylify-variables titleFontSize: '42px', containerWidth: '800px'/stylify-variablesstylify-components container: 'max-width:$containerWidth margin:0__auto', title: 'text-align:center margin-top:100px font-size:$titleFontSize'/stylify-components--><main class="container"> <h1 class="title"> Hello World! </h1></main>
Building for production
If you run yarn build
+ yarn preview
, the svelte markup will be mangled to this:
<main class="_7tcrv"> <h1 class="_88io"> Hello World! </h1></main>
The css is shortened too:
:root {--titleFontSize: 42px;--containerWidth: 800px;}._bcda8,._7tcrv{max-width:800px}._m0vnad,._7tcrv{margin:0 auto}._1vegb8,._88io{text-align:center}._jimir,._88io{margin-top:100px}._qe393,._88io{font-size:42px}
Configure anything youneed
The examples above doesn't include everything Stylify can do:
- You can map nested files in the template
- Style global selectors
- Define custom screens
- Add own macros like
ml:20px
for margin-left - And a lot more
Feel free to checkout the docs to learn more .
Stay in touch:
@8machy
@stylifycss
stylifycss.com
dev.to/machy8
medium.com/@8machy
Original Link: https://dev.to/machy8/style-your-svelte-website-faster-with-stylify-2ed3
Dev To
An online community for sharing and discovering great ideas, having debates, and making friendsMore About this Source Visit Dev To