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

Link to this macro

__using__(format)

View Source (macro)

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 map
  • compile_string/1 - takes a list of class names, produces a string of the AST. Formatting rules are applied from the live_view_native_stylesheet application config.
Link to this function

unmatched_handler(unmatched, map)

View Source