Svelte Css Short Name Preprocess

Want a Svelte site built?

Hire a Svelte developer

Download

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: ```javascript 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
1. Don't use shadowed variables in your JS code;
2. 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

<details>
<summary>Simple</summary>

if you have some *.svelte file like the next one:
```sveltehtml
<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;
Support dynamic svelte class-names;
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

Top categories

Want a Svelte site built?

Hire a Svelte developer