Svelte True Css Modules

Introduction

Svelte True CSS Modules is a preprocessor CSS modules for Svelte.

Learn more about css modules

Example

Running through the module attribute and using the name of the classes through a variable anywhere.

<script>
  // some code...
  let styles
  // some code...

  console.log(styles.main__title) // main__title_yr8Fgz23
</script>

<div class="{styles.main}">
  <h1 class="{styles.main__title}">Some title</h1>
</div>

<style module>
  .main {
    background-color: white;
  }

  .main__title {
    font-size: 72px;
  }
</style>

Installation

npm install --save-dev @naumstory/svelte-true-css-modules

Rollup

To be used with the plugin rollup-plugin-svelte.

import svelte from 'rollup-plugin-svelte';
import trueCssModules from '@naumstory/svelte-true-css-modules';

export default {
  ...
  plugins: [
    svelte({
      preprocess: [
        trueCssModules(),
      ]
    }),
  ]
  ...
}

Webpack

To be used with the loader svelte-loader.

const cssModules = require('@naumstory/svelte-true-css-modules');

module.exports = {
  ...
  module: {
    rules: [
      {
        test: /\.svelte$/,
        exclude: /node_modules/,
        use: [
          {
            loader: 'svelte-loader',
            options: {
              preprocess: [
                trueCssModules(),
              ]
            }
          }
        ]
      }
    ]
  }
  ...
}

Options

Pass an object of the following properties

Usage

To use css modules in the svelte component, add a module attribute to the style tag

<style module>
  .main {
    background-color: white;
  }

  .main__title {
    font-size: 72px;
  }
</style>

To access the processed class names, you need to add the variable styles to any convenient location (a custom variable name can be specified in the plugin options).

<script>
  // some code...
  let styles
  // some code...
</script>

Now you can use the new class names in the template and in any other place you need.

<script>
  // some code...
  let styles
  // some code...

  console.log(styles.main__title) // main__title_yr8Fgz23
</script>

<div class="{styles.main}">
  <h1 class="{styles.main__title}">Some title</h1>
</div>

<style module>
  .main {
    background-color: white;
  }

  .main__title {
    font-size: 72px;
  }
</style>