This library lets you reference classes defined in CSS modules in your Elm views, and then have the actual class names injected into your Elm modules by Webpack at build time.
css : String -> classes -> Helpers classes msg
Use a CSS module in your Elm application.
styles =
css "./styles.css"
{ someClass = "someClass"
, anotherClass = "anotherClass"
}
view =
div [ styles.class .someClass ]
This function returns a record, containing functions for accessing the CSS
module’s class names. See Helpers
for a description of these
functions.
The CSS filename’s path is relative to either 1) a Webpack module root
directory, or 2) the JavaScript file in which your top-level Elm module is
referenced (in which case the path should begin with with ./
).
Important: The CSS filename must be a literal string.
Each of the classes in the list must have the value of the corresponding class name, which will be substituted for a require of the CSS module by the Webpack loader at build time.
Warning: Currently, if you list a class that is not defined in the CSS
module, it will receive a value of undefined
at runtime, which is likely to
result in class="undefined"
.
{ class : (classes -> String) -> Html.Attribute msg
, classList : List ( classes -> String
, Basics.Bool ) -> Html.Attribute msg
, toString : (classes -> String) -> String
}
A set of functions for accessing the class names in a CSS module.
class
and classList
are drop-in replacements for their counterparts in
Html.Attributes
, except they take a record accessor to specify a class name
from your CSS module (e.g. .someClass
).
view =
div
[ classList
[ ( .someClass, True )
, ( .anotherClass, False )
]
]
toString
lets you obtain the raw String
for a given class name, which you
might need if you're mixing CSS Module classes together with plain string class
names.