svelte-css-short-name-preprocess
Caveats
- Use in production at your own risk since there are no another feedbacks yet;
- The package may transform your JS code since it supports replacement for svelte shorthands for class directive;
- This doesn't affect result svelte-prefixed class-names;
Motivation
I didn't find any package for generating short css names for classes in svelte and I decided to make it myself.
Requirements
- Node.js 12+
- Svelte 3+
Installation
npm i svelte-css-short-name-preprocess --save-dev- add to your
svelte.config.js:
const autoPreprocess = require("svelte-preprocess");
const cssShortNamePreprocess = require('svelte-css-short-name-preprocess');
module.exports = {
preprocess: [
autoPreprocess({
defaults: {
script: "typescript",
},
}),
cssShortNamePreprocess({ srcPath: 'src' }), // read API section below to configure
],
};Rules
- Don't use shadowed variables in your JS code;
- Don't use string concatenations for your classnames and another difficult computations;
API
constructor options
| Option | Required | Type | Default | Description |
|---|---|---|---|---|
| srcPath | false | string | 'src' | Path to *.svelte sources relative to the project root. |
| jsBindEnabled | false | boolean | false | EXPERIMENTAL. You can use this option to enable minification for svelte class directive shorthans. THIS WILL AFFECT ON YOUR JS CODE. |
Examples
Simple
if you have some *.svelte file like the next one:
<script lang="typescript">
</script>
<div class="App">
</div>
<style>
.App {
background-color: gray;
}
</style>
you will get the next result in a browser:
Simple multiline class names
<div class="root test-class
meow peow
end">
</div>TailwindCSS
App.svele:
<script lang="typescript">
import TailwindWidget from './Tailwind/TailwindWidget.svelte';
</script>
<div class="App">
<TailwindWidget />
</div>
<style>
.App {
background-color: gray;
}
</style>
./Tailwind/TailwindWidget.svelte:
<script lang="typescript">
import './TailwindStyles.svelte';
</script>
<div class="rounded-full py-3 px-6 bg-green-500">
Tailwind Button
</div>
<div class="rounded-full py-3 px-6 bg-green-500">
Tailwind Button
</div>
<style></style>
./Tailwind/TailwindStyles.svelte:
<style global>
@tailwind base;
@tailwind components;
@tailwind utilities;
</style>
result:
Dynamic (without JS bind)
<script lang="typescript">
import './Tailwind/TailwindStyles.svelte';
import Toggle from './Toggle/Toggle.svelte';
let toggle = false;
function handleToggle(e) {
toggle = e.detail.value;
}
</script>
<div class="App hello1 {toggle ? 'por' : 'meow'} " class:active={toggle}>
<Toggle label="Switch background" on:toggle={handleToggle}/>
</div>
<style>
.App.active {
background-color: #9ca3af;
}
</style>
You can easily get a short css names for ternary operator (even nested)
Note: this example won't transform your active css class since it's not related with any JS variable directly, it's bound with toggle. You can see bound example below.
Dynamic (with JS bind, EXPERIMENTAL)
This is an EXPERIMENTAL feature, since there is a high risk to use it with such simple background as I had time for this yet.
RegExp:
new RegExp(`(?<!(function\\s|bind:|['"].*))\\b${key}\\b`, 'gm')Maybe, it can affect some JS code what I couldn't expect, but, anyway, it works fine with simple components;
Let's move on to example:
<script>
import { createEventDispatcher } from 'svelte';
const dispatch = createEventDispatcher();
export let label = 'label';
let checked = false;
function onToggle() {
dispatch('toggle', {
value: checked
});
}
</script>
<div class="flex items-center justify-center w-full mb-12">
<label for="toggleB" class="flex items-center cursor-pointer">
<div class="relative">
<input type="checkbox" id="toggleB" class="sr-only" bind:checked={checked} on:change={onToggle}>
<div class="block bg-gray-600 w-14 h-8 rounded-full"></div>
<div class:checked class="dot absolute left-1 top-1 bg-white w-6 h-6 rounded-full transition"></div>
</div>
<div class="ml-3 text-gray-700 font-medium">
{label}
</div>
</label>
</div>
<style>
.dot.checked {
transform: translateX(100%);
background-color: #48bb78;
}
</style>
All code that related with class name based on checked variable will be shortened with new name, expect of bind:checked part, since it's not related with styles.
TODO
- [ ] Migrate to TypeScript;
- [X] Support dynamic svelte class-names;
- [X] Provide a way to affect css-framework class-names;
- [ ] Tests;
Support
If you like this package, you can support me via Patreon: https://www.patreon.com/naararouter