View Source LiveViewNative.Stylesheet (live_view_native_stylesheet v0.3.0)
Add LiveView Native Stylesheet to your app
Stylesheets are format-specific. The rules for parsing style rules are defined in each client library. This library provides support for defining and compiling stylesheets.
Configuration
You must configure your application to know which files to parse class names from. LiveView Native Stylesheets borrows the same class name extracting logic as Tailwind:
Tailwind - Dynamic class names
config :live_view_native,
content: [
swiftui: [
"lib/**/*swiftui*"
],
jetpack: [
"lib/**/*jetpack*"
]
],
output: "priv/static/assets/"
Because class names may be shared betweeen different formats you should try to ensure
that the content
pattern for that format is as targetd as possible.
You can also search dependencies by adding a tuple {opt_app_name, pattern}
to the list
for a format:
content: [
swifti: [
"lib/**/*swiftui*",
{:my_custom_lib, "lib/**/*swiftui*"},
{:other_lib, [
"lib/**/*swiftui*",
"priv/**/*swiftui*"
]}
]
],
output: "priv/static/assets/"
Optional configuration
By default LiveView Native Stylesheet will emit the most concise format possible.
In dev
mode you may want to expand the formatting and include annotations:
config :live_view_native_stylesheet,
annotations: true,
pretty: true
With annotations tured on the native clients will have more information on how to report erors and warnings in its logger.
Importing other sheets
Class names defined in another sheet can be importd into your sheet. The classes will be defined below your definitions which gives your classes priority. Search order for a matching class is in the order of the imports defined.
defmodule MyAppWeb.Style.SwifUI do
use LiveViewNative.Stylesheet, :swiftui
@import LiveViewnative.SwiftUI.UtilityClasses
end
To prevent child sheets from producing their own stylesheet when compiled set @export
to true
defmodule MyStyleLib.SwiftUI do
use LiveViewNative.Stylesheet, :swiftui
@export true
~SHEET"""
...
"""
end
Summary
Functions
Using in a module allows for stylesheet compilation
Functions
Using in a module allows for stylesheet compilation
defmodule MyAppWeb.Style.SwiftUI do
use LiveViewNative.Stylesheet, :swiftui
~SHEET"""
"padding:" <> padding do
padding({padding})
end
"""
end
The following functions are injected into the module:
compile_ast/1
- takes a list of class names, produces AST as an Elixir mapcompile_string/1
- takes a list of class names, produces a string of the AST. Formatting rules are applied from thelive_view_native_stylesheet
application config.