Removing inline styles

docs/index.html

@@ -4,6 +4,7 @@
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+    <link rel="stylesheet" href="dist/index.css">
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/combine/npm/bootstrap@4/dist/css/bootstrap.min.css,npm/prismjs@1/themes/prism-okaidia.min.css">
     <title>svelte-fa - Tiny FontAwesome 5 component for Svelte</title>
   </head>

docs/rollup.config.mjs

@@ -17,10 +17,9 @@ export default {
   external: ['svelte-fa'],
   plugins: [
     svelte({
-      emitCss: false,
+      emitCss: true,
       compilerOptions: {
         legacy: true,
-        css: true,
       },
     }),
     resolve({
@@ -33,6 +32,7 @@ export default {
       extensions: ['.js', '.jsx', '.es6', '.es', '.mjs', '.svelte'],
     }),
     postcss({
+      extract: true,
       extensions: ['.css'],
     }),
   ],

src/fa-layers-text.svelte

@@ -1,8 +1,9 @@
 <script>
+import { onMount } from 'svelte';
+
 import {
-  joinCss,
-  getStyles,
   getTransform,
+  setCustomSize,
 } from './utils';
 
 let clazz = '';
@@ -19,24 +20,45 @@
 export let rotate = '';
 export let flip = false;
 
-let s;
-
-$: s = getStyles(
-  joinCss([
-    joinCss({
-      color,
-      display: 'inline-block',
-      height: 'auto',
-      transform: getTransform(scale, translateX, translateY, rotate, flip, undefined, 'em', 'deg'),
-    }),
-    style,
-  ]),
-  size,
-);
+let containerElement;
+
+onMount(() => {
+  containerElement.style.color = color;
+  containerElement.style.transform = getTransform(scale, translateX, translateY, rotate, flip, undefined, 'em', 'deg');
+  setCustomSize(containerElement, size);
+});
 </script>
 
+<style>
+.container {
+  display: inline-block;
+  height: auto;
+}
+
+.svelte-fa-size-lg {
+  font-size: 1.33333em;
+  line-height: .75em;
+  vertical-align: -.225em;
+}
+
+.svelte-fa-size-sm {
+  font-size: .875em;
+}
+
+.svelte-fa-size-xs {
+  font-size: .75em;
+}
+</style>
+
 <span id={id} class="svelte-fa-layers-text {clazz}">
-  <span style={s}>
+  <span
+    bind:this={containerElement}
+    class="svelte-fa-base container"
+    class:svelte-fa-size-lg={size === 'lg'}
+    class:svelte-fa-size-sm={size === 'sm'}
+    class:svelte-fa-size-xs={size === 'xs'}
+    style={style !== '' ? style : null}
+  >
     <slot></slot>
   </span>
 </span>

src/fa-layers.svelte

@@ -1,6 +1,8 @@
 <script>
+import { onMount } from 'svelte';
+
 import {
-  getStyles,
+  setCustomSize,
 } from './utils';
 
 let clazz = '';
@@ -11,9 +13,9 @@
 export let size = '';
 export let pull = '';
 
-let s;
+let containerElement;
 
-$: s = getStyles(style, size, pull, true);
+onMount(() => { setCustomSize(containerElement, size); });
 </script>
 
 <style>
@@ -42,12 +44,40 @@
 .svelte-fa-layers :global(.svelte-fa-layers-text span) {
   display: inline-block;
 }
+
+.svelte-fa-pull-left {
+  float: left;
+}
+
+.svelte-fa-pull-right {
+  float: right;
+}
+
+.svelte-fa-size-lg {
+  font-size: 1.33333em;
+  line-height: .75em;
+  vertical-align: -.225em;
+}
+
+.svelte-fa-size-sm {
+  font-size: .875em;
+}
+
+.svelte-fa-size-xs {
+  font-size: .75em;
+}
 </style>
 
 <span
   id={id}
-  class="svelte-fa-layers {clazz}"
-  style={s}
+  bind:this={containerElement}
+  class="svelte-fa-layers svelte-fa-base svelte-fa-fw {clazz}"
+  class:svelte-fa-pull-left={pull === 'left'}
+  class:svelte-fa-pull-right={pull === 'right'}
+  class:svelte-fa-size-lg={size === 'lg'}
+  class:svelte-fa-size-sm={size === 'sm'}
+  class:svelte-fa-size-xs={size === 'xs'}
+  style={style !== '' ? style : null}
 >
   <slot></slot>
 </span>

src/fa.svelte

@@ -1,7 +1,9 @@
 <script>
+import { onMount } from 'svelte';
+
 import {
-  getStyles,
   getTransform,
+  setCustomSize,
 } from './utils';
 
 let clazz = '';
@@ -34,17 +36,51 @@
 export let swapOpacity = false;
 
 let i;
-let s;
 let transform;
+let svgElement;
 
-$: i = (icon && icon.icon) || [0, 0, '', [], ''];
+onMount(() => { setCustomSize(svgElement, size); });
 
-$: s = getStyles(style, size, pull, fw);
+$: i = (icon && icon.icon) || [0, 0, '', [], ''];
 
 $: transform = getTransform(scale, translateX, translateY, rotate, flip, 512);
 </script>
 
 <style>
+:global(.svelte-fa-base) {
+  height: 1em;
+  overflow: visible;
+  transform-origin: center;
+  vertical-align: -.125em;
+}
+
+:global(.svelte-fa-fw) {
+  text-align: center;
+  width: 1.25em;
+}
+
+.svelte-fa-pull-left {
+  float: left;
+}
+
+.svelte-fa-pull-right {
+  float: right;
+}
+
+.svelte-fa-size-lg {
+  font-size: 1.33333em;
+  line-height: .75em;
+  vertical-align: -.225em;
+}
+
+.svelte-fa-size-sm {
+  font-size: .875em;
+}
+
+.svelte-fa-size-xs {
+  font-size: .75em;
+}
+
 .spin {
   animation: spin 2s 0s infinite linear;
 }
@@ -66,10 +102,17 @@
 {#if i[4]}
   <svg
     id={id || undefined}
-    class="svelte-fa {clazz}"
+    bind:this={svgElement}
+    class="svelte-fa svelte-fa-base {clazz}"
     class:pulse
+    class:svelte-fa-size-lg={size === 'lg'}
+    class:svelte-fa-size-sm={size === 'sm'}
+    class:svelte-fa-size-xs={size === 'xs'}
+    class:svelte-fa-fw={fw}
+    class:svelte-fa-pull-left={pull === 'left'}
+    class:svelte-fa-pull-right={pull === 'right'}
     class:spin
-    style={s}
+    style={style !== '' ? style : null}
     viewBox="0 0 {i[0]} {i[1]}"
     aria-hidden="true"
     role="img"

src/utils.js

@@ -1,67 +1,9 @@
 const parseNumber = parseFloat;
 
-export function joinCss(obj, separator = ';') {
-  let texts;
-  if (Array.isArray(obj)) {
-    texts = obj.filter((text) => text);
-  } else {
-    texts = [];
-    for (const prop in obj) {
-      if (obj[prop]) {
-        texts.push(`${prop}:${obj[prop]}`);
-      }
-    }
+export function setCustomSize(element, size) {
+  if (size && size !== 'lg' && size !== 'sm' && size !== 'xs') {
+    element.style.fontSize = size.replace('x', 'em');
   }
-  return texts.join(separator);
-}
-
-export function getStyles(style, size, pull, fw) {
-  let float;
-  let width;
-  const height = '1em';
-  let lineHeight;
-  let fontSize;
-  let textAlign;
-  let verticalAlign = '-.125em';
-  const overflow = 'visible';
-
-  if (fw) {
-    textAlign = 'center';
-    width = '1.25em';
-  }
-
-  if (pull) {
-    float = pull;
-  }
-
-  if (size) {
-    if (size == 'lg') {
-      fontSize = '1.33333em';
-      lineHeight = '.75em';
-      verticalAlign = '-.225em';
-    } else if (size == 'xs') {
-      fontSize = '.75em';
-    } else if (size == 'sm') {
-      fontSize = '.875em';
-    } else {
-      fontSize = size.replace('x', 'em');
-    }
-  }
-
-  return joinCss([
-    joinCss({
-      float,
-      width,
-      height,
-      'line-height': lineHeight,
-      'font-size': fontSize,
-      'text-align': textAlign,
-      'vertical-align': verticalAlign,
-      'transform-origin': 'center',
-      overflow,
-    }),
-    style,
-  ]);
 }
 
 export function getTransform(
@@ -87,12 +29,9 @@ export function getTransform(
     }
   }
 
-  return joinCss(
-    [
-      `translate(${parseNumber(translateX) * translateTimes}${translateUnit},${parseNumber(translateY) * translateTimes}${translateUnit})`,
-      `scale(${flipX * parseNumber(scale)},${flipY * parseNumber(scale)})`,
-      rotate && `rotate(${rotate}${rotateUnit})`,
-    ],
-    ' ',
-  );
+  let output = `translate(${parseNumber(translateX) * translateTimes}${translateUnit},${parseNumber(translateY) * translateTimes}${translateUnit}) scale(${flipX * parseNumber(scale)},${flipY * parseNumber(scale)})`;
+  if (rotate) {
+    output += ` rotate(${rotate}${rotateUnit})`;
+  }
+  return output;
 }