Merge branch 'release/1.0.0'

Author: Michael Vurchio

.gitignore

@@ -0,0 +1,2 @@
+node_modules
+.DS_Store

CHANGELOG.md

@@ -1,5 +1,10 @@
 # Svelte preprocess CSS Modules, changelog
 
+# 1.0.0 
+- Ability to use the same class on multiple elments
+- Use with svelte loader Ok
+- Add test
+
 # 0.1.1
 - Fix modules exports
 - Fix `includePaths` check

README.md

@@ -8,7 +8,7 @@ npm install --save-dev svelte-preprocess-cssmodules
 
 ## Rollup Configuration
 
-To be used with the plugin `rollup-plugin-svelte`.
+To be used with the plugin [`rollup-plugin-svelte`](https://github.com/sveltejs/rollup-plugin-svelte).
 
 ```js
 import svelte from 'rollup-plugin-svelte';
@@ -27,6 +27,37 @@ export default {
 }
 ```
 
+## Webpack Configuration
+
+To be used with the loader [`svelte-loader`](https://github.com/sveltejs/svelte-loader).
+
+```js
+const cssModules = require('svelte-preprocess-cssmodules');
+
+module.exports = {
+  ...
+  module: {
+    rules: [
+      {
+        test: /\.svelte$/,
+        exclude: /node_modules/,
+        use: [
+          {
+            loader: 'svelte-loader',
+            options: {
+              preprocess: [
+                cssModules(),
+              ]
+            }
+          }
+        ]
+      }
+    ]
+  }
+  ...
+}
+```
+
 ## Options
 Pass an object of the following properties
 
@@ -36,6 +67,7 @@ Pass an object of the following properties
 | `includePaths` | `{Array}` | `[]` (Any) | An array of paths to be processed |
 
 
+
 ## Usage on Svelte Component
 
 **On the HTML markup** (not the CSS), Prefix any class name that require CSS Modules by *$style.*  => `$style.My_CLASSNAME`
@@ -79,8 +111,7 @@ CSS Modules classname are generated to the html class values prefixed by `$style
 
 ```html
 <style>
-  .blue { color: blue;
-  }
+  .blue { color: blue;}
   .red-2iBDzf { color: red; }
   .text-center { text-align: center; }
 </style>
@@ -145,6 +176,47 @@ kebab-case or camelCase, name the classes the way you're more comfortable with.
 <span class="redMajenta-2wdRa3">Majenta</span>
 ```
 
+### Use class multiple times
+A class can be naturally used on multiple elements.
+
+*Before*
+
+```html
+<style>
+  .red { color: red; }
+  .blue { color: blue; }
+  .bold { font-weight: bold; }
+</style>
+
+<p class="$style.red $style.bold">My red text</p>
+<p class="$style.blue $style.bold">My blue text</p>
+```
+
+*After*
+
+```html
+<style>
+  .red-en-6pb { color: red; }
+  .blue-oVk-n1 { color: blue; }
+  .bold-2jIMhI { font-weight: bold; }
+</style>
+
+<p class="red-en-6pb bold-2jIMhI">My red text</p>
+<p class="blue-oVk-n1 bold-2jIMhI">My blue text</p>
+```
+
+### Work with class directives
+Toggling a class on an element.
+
+```html
+<style>
+  .bold { font-weight: bold; }
+</style>
+
+<p class:$style.bold={isActive}>My red text</p>
+<p class="{isActive ? '$style.bold' : ''}">My blue text</p>
+```
+
 ## Example
 
 *Rollup Config*

example/webpack/App.svelte

@@ -0,0 +1,87 @@
+<script>
+  import Time from './Time.svelte';
+</script>
+
+<style>
+.overlay {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 5;
+  background-color: rgba(0, 0, 0, 0.5);
+}
+.modal {
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  z-index: 10;
+  width: 400px;
+  height: 80%;
+  font-family: 'Helvetica Neue', Helvetica, Arial;
+  background-color: #fff;
+  transform: translateX(-50%) translateY(-50%);
+  -webkit-font-smoothing: antialiased;
+}
+
+section {
+  flex: 0 1 auto;
+  flex-direction: column;
+  display: flex;
+  height: 100%;
+}
+
+header {
+  padding: 1rem;
+  font-size: 1.2rem;
+  font-weight: bold;
+  border-bottom: 1px solid #d9d9d9;
+}
+
+.body {
+  padding: 1rem;
+  flex: 1 0 0;
+  min-height: 0;
+  max-height: 100%;
+  overflow: scroll;
+  -webkit-overflow-scrolling: touch;
+}
+
+footer {
+  padding: 1rem;
+  text-align: right;
+  border-top: 1px solid #d9d9d9;
+}
+button {
+  padding: .5em 1em;
+  min-width: 100px;
+  font-size: .8rem;
+  font-weight: 600;
+  background: #fff;
+  border: 1px solid #ccc;
+  border-radius: 5px;
+}
+.cancel {
+  background-color: #f2f2f2;
+}
+.active {
+  font-weight: 700;
+}
+</style>
+
+<div class="$style.overlay" />
+<div class="$style.modal">
+  <section>
+    <header class="$style.active">My Modal title</header>
+    <div class="$style.body">
+      <Time />
+      <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Placeat, deserunt.</p>
+      <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Placeat, deserunt. Lorem ipsum dolor sit amet. </p>
+    </div>
+    <footer>
+      <button class="$style.active">Ok</button>
+      <button class="$style.cancel">Cancel</button>
+    </footer>
+  </section>
+</div>

example/webpack/Time.svelte

@@ -0,0 +1,28 @@
+<script>
+  import { onDestroy } from 'svelte';
+
+  let date = new Date();
+  const active = true;
+  $: time = `${date.getHours()}:${date.getMinutes()}:${date.getSeconds()}`;
+  
+  const interval = setInterval(() => date = new Date(), 1000);
+
+  onDestroy(() => {
+    clearInterval(interval);
+  })
+</script>
+
+<style>
+  div {
+    text-align: right;
+    font-size: 1.2rem;
+    font-family: monospace;
+  }
+  .bold {
+    font-weight: bold;
+  }
+</style>
+
+<div
+  class="$style.datetime"
+  class:$style.bold={true}>{time}</div>

example/webpack/dist/bundle.js

@@ -0,0 +1,10 @@
+<!doctype html>
+<html>
+  <head>
+    <title>Svelte CSS modules loader</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script src="bundle.js"></script>
+  </body>
+</html>

example/webpack/dist/index.html

@@ -0,0 +1,5 @@
+import App from './App.svelte'
+
+new App({
+  target: document.getElementById('app')
+})