svelte-css-short-name-preprocess v0.3.3

svelte-css-short-name-preprocess

Caveats

1. Use in production at your own risk since there are no another feedbacks yet;
2. 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

1. npm i svelte-css-short-name-preprocess --save-dev
2. 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 (section in development)

(empty yet)

API

constructor options

Examples (section in development)

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:

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:

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