CSS Modules for Elixir
Clone or download
Latest commit 4c38331 Nov 8, 2017
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.circleci Add dialyzer Oct 6, 2017
config Initial setup Sep 26, 2017
lib/ex_css_modules Join class names function Nov 6, 2017
test Join class names function Nov 6, 2017
.gitignore Initial setup Sep 26, 2017
CHANGELOG.MD Release v0.0.5 Nov 7, 2017
LICENSE Initial setup Sep 26, 2017
README.md Update README.md Nov 8, 2017
mix.exs Release v0.0.5 Nov 7, 2017
mix.lock Add dialyzer Oct 6, 2017

README.md

ExCSSModules

CSS Modules for Elixir. Build to integrate well with the Phoenix Framework.

Hex.pm CircleCI

ExCSSModules defines two ways to read the stylesheet: embedded and read.

If you said the embed_stylesheet option to the use macro the stylesheet definitions JSON have to be compiled before the application is compiled. This flag is used for production to optimize read times.

If you don't set the flag or set it to false, the stylesheet definition JSON files are read live from the server which creates a lot of IO for each request.

Installation

Install from Hex.pm:

def deps do
  [{:ex_css_modules, "~> 0.0.5"}]
end

Usage

To use ExCSSModules in a view compile the CSS file (ie: through brunch of webpack) and add the following to the view:

defmodule MyApplication.ExampleView do
  use ExCSSModules.View, stylesheet: Path.relative_to_cwd("assets/css/views/example.css")
end

This allows you to use the class and class_name functions in the template and views as followed:

CSS:

.title {
  font-size: huge;
}

Template:

  <h1 <%= class "title" %>>Hello world</h1>

Output:

  <h1 class="_2313dsc-title">Hello world</h1>

Advanced usage

Phoenix.View

ExCSSModules is made for the Phoenix framework and can be easily be automatically be added to your view definition in web.ex. At Defacto we automatically parse the View name and extract the correct stylesheet from it:

def view() do
  quote do
    use Phoenix.View, root: "lib/my_application_web/templates",
                      namespace: MyApplicationWeb
    use ExCSSModules.View, namespace: MyApplicationWeb,
                           stylesheet: Path.join(
                            "assets/css/templates",
                            __MODULE__
                            |> Module.split
                            |> Enum.map(&Phoenix.Naming.underscore/1)
                            |> Enum.join("/")
                            |> String.replace_suffix("_view", ".css")
                           )
    ...
  end
end

ExCSSModules

ExCSSModules works perfectly with ExCell. By adding the following to your web.ex definition for cells you can automatically add the stylesheet in the same directory as your ExCell Cell:

def cell() do
  quote do
    use ExCell.Cell, namespace: MyApplicationWeb
    use ExCSSModules.View, namespace: MyApplicationWeb,
                           stylesheet: __ENV__.file
                                      |> Path.dirname
                                      |> Path.join("./style.css")
    ...
  end
end