Type safe CSS with elm-css

Use the power of Type inference to ensure the correctness of the styles in your application.

DISCLAIMER

This example is using an older version of elm-css, please make sure you are installing the correct versions.

npm install [email protected] [email protected] -g
elm-app install rtfeldman/elm-css 9.1.0 -y
elm-app install rtfeldman/elm-css-helpers 2.1.0 -y

Changes

src/index.js

Import the compiled stylesheet.

import './main.css';

src/SharedStyles.elm

module SharedStyles exposing (CssClasses(..), triviaNamespace)

import Html.CssHelpers exposing (withNamespace)


type CssClasses
    = ConfigForm
    | TriviaContainer


triviaNamespace =
    withNamespace "trivia"

src/Stylesheets.elm

The module, that controls the compilation of CSS file.

port module Stylesheets exposing (..)

import Css.File exposing (CssCompilerProgram, CssFileStructure)
import TriviaCss


port files : CssFileStructure -> Cmd msg


fileStructure : CssFileStructure
fileStructure =
    Css.File.toFileStructure
        [ ( "src/main.css", Css.File.compile [ TriviaCss.css ] ) ]


main : CssCompilerProgram
main =
    Css.File.compiler files fileStructure

src/TriviaCss.elm

The actual stylesheet witht CSS rules.

module TriviaCss exposing (..)

import Css exposing (..)
import Css.Elements exposing (body)
import Css.Namespace exposing (namespace)
import SharedStyles exposing (triviaNamespace, CssClasses(..))


css =
    (stylesheet << namespace triviaNamespace.name)
        [ class ConfigForm
            [ maxWidth (px 300)
            , margin2 (px 0) auto
            ]
        , class TriviaContainer
            [ textAlign center ]
        ]

Running the example

npm install [email protected] [email protected] -g
elm-app install rtfeldman/elm-css 9.1.0 -y
elm-app install rtfeldman/elm-css-helpers 2.1.0 -y
elm-css src/Stylesheets.elm
elm-app build

This project is bootstrapped with Create Elm App.