Built-in CSS Support

Aleph.js allows you to import CSS files with ESM syntax:

import '../style.css'

or external styles:

import 'https://esm.sh/tailwindcss/dist/tailwind.min.css'

How It Works

Aleph's built-in CSS Loader transpiles .css file as JS module that will be ignored in Deno runtime and be applied in browser.

import '../style.css';

will become:

import '../style.css.js'

the style.css.js file looks like:

import { applyCSS } from 'https://deno.land/x/aleph/framework/core/style.ts'
applyCSS('/style/app.css', `${CSS_CODE}`)

// Support HMR in development mode.
import.meta.hot.accept()

Using link Tag

If you import CSS files using ESM syntax above, these CSS files will not be removed when page(component) unmounted. To improve this, Aleph's compiler checks all the link JSX elements with rel="stylesheet" then transpiles them as ES modules, and these CSS files will be cleaned up automatically when current page(component) unmounted (we call it JSX Magic).

import React from 'https://esm.sh/react'

export default function App() {
  return (
    <>
      <link rel="stylesheet" href="../style/app.css" />
      <h1>Hi :)</h1>
    </>
  )
}

Inline CSS

Aleph.js supports Inline CSS, that means you can write CSS in .tsx files directly, this concept is called CSS-in-JS:

import React from 'https://esm.sh/react'

export default function App() {
  const color = 'black'
  return (
    <>
      <style>{`
        h1 {
          font-size: 2em;
          color: ${color};
        }
      `}</style>
      <h1>Hi :)</h1>
    </>
  )
}

CSS Modules

Any CSS file ending with .module.css is considered a CSS modules file:

import React from 'https://esm.sh/react'
import styles from '../style/app.module.css'

export default function App() {
  return (
    <>
      <h1 className={styles.title}>Hi :)</h1>
    </>
  )
}

With Aleph's JSX Magic you can use the scoped class names via $CLASSNAME magic trick that gives you a better developer experience, when the CSS Modules is loaded by the link tag.

import React from 'https://esm.sh/react'

export default function App() {
  return (
    <>
      <link rel="stylesheet" href="../style/app.module.css" />
      <h1 className="$title">Hi :)</h1>
    </>
  )
}

CSS modules behavior can be configured via the css.modules options, the options are passed on to postcss-modules.

// aleph.config.ts

export default <Config>{
  css: {
    modules: {
      scopeBehaviour: 'global', // can be 'global' or 'local'
    }
  }
}

PostCSS

If the aleph.config.ts contains valid css.postcss config, it will be automatically applied to all imported CSS.

// aleph.config.ts

export default <Config>{
  css: {
    postcss: {
      plugins: ['postcss-nested', 'autoprefixer']
    }
  }
}

Global Stylesheet

To add a global stylesheet to your application, import the CSS files in app.tsx.

CSS Imports (@import)

Aleph.js use esbuild to bundle your css code that means you can use @import syntax safety. Or you can put the imported CSS files into the public directory then import them with absolute URLs.