CSS Loader for Erect

It loads your CSS isomorphically between server and client using Erect DocumentState manager

Key aspacts

• Generates CSS files with File Loader
• Uses Webpack CSS Loader under the hood
• Generates typings for your CSS

Typings

/* Header.css */
.header {
  background-color: green;
}

.header h4 {
  font-weight: bold;
}

.header .side-nav {
  font-weight: bold;
}

// Header.d.ts
import { RenderRequest } from '@erect/core';

export const loadStyles: (req: RenderRequest) => void;

export interface IHeaderCss {
  header: string;
  'side-nav': string;
  sideNav: string;
}

export const getStyles: (req: RenderRequest) => IHeaderCss;

Usage

import '@erect/static';
import { mount } from '@erect/core';
import headerCss from './header.css';

mount()
  .render((req) => {
    const styles = headerCss.getStyles(req);
    return req.renderStatic(req.html `
      <header class="${styles.header}">
        <nav class=${styles.navBar}>
          <ul>
            <li>item</li>
          </ul>
        </nav>
      </header>
    `);
  });  

Options

typings boolean

It's true by default, it generates typings and emit generated css files, make sure to use this only when targeting client

file object

Pass File Loader options

css object

Pass CSS Loader options

use array

Pass an array of loaders to process module after CSS Loader and before File Loader

silent boolean

No log output

typingsBanner string

Append a banner message to generated typings