Struct Number 

pub struct Number<Str, ArrayStr, MapStr> {
    pub namespace: Str,
    pub prop: PropertyName<Str, ArrayStr>,
    pub divide_by: Option<f32>,
    pub has_auto: Option<bool>,
    pub has_empty: Option<bool>,
    pub has_negative: Option<bool>,
    pub template: Option<PropertyName<Str, ArrayStr>>,
    pub extra_rule_css: Option<ArrayStr>,
    pub extra_css: Option<MapStr>,
    pub extra_class: Option<Str>,
    pub extra_slash: Option<ExtraSlash<Str, MapStr>>,
}

Define a plugin which supports any number as modifier.

The number must be an integer (signed integers can be supported by enabling Number::has_negative).

Example

use encre_css::{Config, generate};
use encre_css::prelude::build_plugin::*;

const PLUGIN: StaticPlugin = Plugin::Number(Number {
   namespace: "z",
   prop: SingleProp("z-index"),
   has_negative: Some(true),
   has_auto: Some(true),
   ..Number::default()
});

let mut config = Config::default();
config.register_plugin(&PLUGIN);

let generated = generate(["z-20", "-z-5", "z-auto"], &config);

assert!(generated.ends_with(r".-z-5 {
  z-index: -5;
}

.z-20 {
  z-index: 20;
}

.z-auto {
  z-index: auto;
}"));

Example in TOML

[[custom_plugins]]

[custom_plugins.Number]
namespace = "z"
prop = "z-index"
has_negative = true
has_auto = true

Fields

namespace: Str

The namespace (i.e common prefix) that all classes need to start with in order to be matched by this plugin.

prop: PropertyName<Str, ArrayStr>

The CSS property name of the generated CSS rule.

It can be a single property using PropertyName::SingleProp or a list of properties using PropertyName::MultipleProps, in which case the value will be copied for all properties.

divide_by: Option<f32>

A float by which to divide the number given in the utility class.

It can for example be used to support classes having a percentage between 1-100 but which need to generate a CSS property value between 0-1.

Example

use encre_css::{Config, generate};
use encre_css::prelude::build_plugin::*;

const PLUGIN: StaticPlugin = Plugin::Number(Number {
    namespace: "custom-opacity",
    prop: SingleProp("opacity"),
    divide_by: Some(100.0),
    ..Number::default()
});

let mut config = Config::default();
config.register_plugin(&PLUGIN);

let generated = generate(["custom-opacity-80", "custom-opacity-2"], &config);

assert!(generated.ends_with(r".custom-opacity-2 {
  opacity: 0.02;
}

.custom-opacity-80 {
  opacity: 0.8;
}"));

has_auto: Option<bool>

Automatically add support for the auto modifier.

If this method is called, an auto modifier will generate an auto CSS property value.

has_empty: Option<bool>

Automatically add support for an empty modifier.

If this method is called, an empty modifier will generate a 1 CSS property value.

has_negative: Option<bool>

Automatically add support for negative modifiers.

template: Option<PropertyName<Str, ArrayStr>>

Define a format string used to modify the generated CSS value…

In practice, you give a string containing a {} placeholder to this field (wrapped in the same PropertyName variant as the prop field) and it will be replaced during CSS generation by the value matched by the plugin kind and options.

For instance, it can be used to specify a CSS unit when using the Number plugin kind or to wrap the value in a CSS function like translate or blur.

You should use the same property name variant as prop, otherwise the plugin matches will be silently ignored. Check the examples below to see two correct usages.

Example

use encre_css::{Config, generate};
use encre_css::prelude::build_plugin::*;

pub(crate) const PLUGIN_SINGLE_PROP: StaticPlugin = Plugin::Number(Number {
    namespace: "custom-stroke",
    prop: SingleProp("stroke-width"),
    template: Some(SingleProp("{}px")),
    ..Number::default()
});

pub(crate) const PLUGIN_MULTIPLE_PROPS: StaticPlugin = Plugin::Number(Number {
    namespace: "custom-move",
    prop: MultipleProps(&["translate", "rotate"]),
    template: Some(MultipleProps(&["{}px", "{}deg"])),
    ..Number::default()
});

let mut config = Config::default();
config.register_plugin(&PLUGIN_SINGLE_PROP);
config.register_plugin(&PLUGIN_MULTIPLE_PROPS);

let generated = generate(["custom-stroke-42", "custom-move-3"], &config);

assert!(generated.ends_with(".custom-stroke-42 {
  stroke-width: 42px;
}

.custom-move-3 {
  translate: 3px;
  rotate: 3deg;
}"));

Example in TOML

[[custom_plugins]]

[custom_plugins.Number]
namespace = "custom-stroke"
prop = "stroke-width"
template = "{}px"

[[custom_plugins]]

[custom_plugins.Number]
namespace = "custom-move"
prop = ["translate", "rotate"]
template = ["{}px", "{}deg"]

extra_rule_css: Option<ArrayStr>

Add one or several extra CSS line(s) inside the CSS rule generated for the utility class.

This field takes an array which represents the CSS lines that will be properly indented and added, one after another, in the order they are defined, to the CSS rule.

Example

use encre_css::{Config, generate};
use encre_css::prelude::build_plugin::*;

const PLUGIN: StaticPlugin = Plugin::Spacing(Spacing {
    namespace: "custom-translate-x",
    prop: SingleProp("--translate-x"),
    extra_rule_css: Some(&["transform: translate(var(--translate-x), 12px);"]),
    ..Spacing::default()
});

let mut config = Config::default();
config.register_plugin(&PLUGIN);

let generated = generate(["custom-translate-x-8"], &config);

assert!(generated.ends_with(".custom-translate-x-8 {
  --translate-x: 2rem;
  transform: translate(var(--translate-x), 12px);
}"));

Example in TOML

[[custom_plugins]]

[custom_plugins.Spacing]
namespace = "custom-translate-x"
prop = "--translate-x"
extra_rule_css = ["transform: translate(var(--translate-x), 12px);"]

extra_css: Option<MapStr>

Add one or several extra CSS line(s) outside the CSS rule generated for the utility class.

The argument is a map which allows choosing the added CSS based on the modifier value.

Example

use encre_css::{Config, generate};
use encre_css::prelude::build_plugin::*;

const SPIN_ANIMATION: &str = "@keyframes anim-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}\n\n";

const FADE_IN_ANIMATION: &str = "@keyframes anim-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}\n\n";

const PLUGIN: StaticPlugin = Plugin::ListValues(ListValues {
    prop: SingleProp("animation"),
    values: map! {
        "custom-animate-spin" => "anim-spin",
        "custom-animate-fade-in" => "anim-fade-in",
    },
    extra_css: Some(map! {
        "custom-animate-spin" => SPIN_ANIMATION,
        "custom-animate-fade-in" => FADE_IN_ANIMATION,
    }),
    ..ListValues::default()
});

let mut config = Config::default();
config.register_plugin(&PLUGIN);

let generated = generate(["custom-animate-spin"], &config);

assert!(generated.ends_with("@keyframes anim-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.custom-animate-spin {
  animation: anim-spin;
}"));

Example in TOML

[[custom_plugins]]

[custom_plugins.ListValues]
prop = "animation"

[custom_plugins.ListValues.values]
custom-animate-spin = "anim-spin"
custom-animate-fade-in = "anim-fade-in"

[custom_plugins.ListValues.extra_css]
custom-animate-spin = """@keyframes anim-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}\n\n"""
custom-animate-fade-in = """@keyframes anim-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}\n\n"""

extra_class: Option<Str>

Add a suffix string to the class selector of the generated CSS rule.

Example

use encre_css::{Config, generate};
use encre_css::prelude::build_plugin::*;

pub(crate) const PLUGIN: StaticPlugin = Plugin::Spacing(Spacing {
    namespace: "custom-divide",
    prop: SingleProp("margin-inline"),
    extra_class: Some(" > :not(:last-child)"),
    ..Spacing::default()
});

let mut config = Config::default();
config.register_plugin(&PLUGIN);

let generated = generate(["custom-divide-2"], &config);

assert!(generated.ends_with(".custom-divide-2 > :not(:last-child) {
  margin-inline: 0.5rem;
}"));

Example in TOML

[[custom_plugins]]

[custom_plugins.Spacing]
namespace = "custom-divide"
prop = "margin-inline"
extra_class = " > :not(:last-child)"

extra_slash: Option<ExtraSlash<Str, MapStr>>

Add support for an extra slash (/) followed by a value for the utility classes handled by this plugin.

In practice, you give it a map with the accepted values after the slash as keys and the values you need to insert into the CSS value as values, as well as a default value in case no slash is found. Then, you add the placeholder {/} to your CSS values (or templates) and it will be replaced with the specified value.

Example

use encre_css::{Config, generate};
use encre_css::prelude::build_plugin::*;

pub(crate) const PLUGIN: StaticPlugin = Plugin::ListValues(ListValues {
    prop: SingleProp("background-image"),
    values: map! {
        "custom-bg-img" => "linear-gradient(to top in {/}, #00aaff, #00ffaa)",
    },
    extra_slash: Some(ExtraSlash {
        values: map! {
            "increasing" => "oklch increasing hue",
            "oklab" => "oklab",
        },
        default: "oklab",
    }),
    ..ListValues::default()
});

let mut config = Config::default();
config.register_plugin(&PLUGIN);

let generated = generate(["custom-bg-img", "custom-bg-img/increasing"], &config);

assert!(generated.ends_with(".custom-bg-img {
  background-image: linear-gradient(to top in oklab, #00aaff, #00ffaa);
}

.custom-bg-img\\/increasing {
  background-image: linear-gradient(to top in oklch increasing hue, #00aaff, #00ffaa);
}"));

Example in TOML

[[custom_plugins]]

[custom_plugins.ListValues]
prop = "background-image"

[custom_plugins.ListValues.values]
custom-bg-img = "linear-gradient(to top in {/}, #00aaff, #00ffaa)"

[custom_plugins.ListValues.extra_slash]
default = "oklab"

[custom_plugins.ListValues.extra_slash.values]
increasing = "oklch increasing hue"
oklab = "oklab"

Implementations

impl<ArrayStr, MapStr> Number<&'static str, ArrayStr, MapStr>

pub const fn default() -> Self

Make a default Number plugin kind.

All required fields are initialized with empty values and optional fields are initialized with None.

You should at least set Number::namespace and Number::prop after calling this function.

This function is intended to be used as an automatic filler for default values using the struct update syntax.

The difference with Number::default_dynamic is that this function can only be used to build a plugin using static structures like &[]s, &'static strs.

Example

use encre_css::prelude::build_plugin::*;

const PLUGIN: StaticPlugin = Plugin::Number(Number {
    namespace: "z",
    prop: SingleProp("z-index"),
    ..Number::default()
});

impl<ArrayStr, MapStr> Number<String, ArrayStr, MapStr>

pub fn default_dynamic() -> Self

Make a default Number plugin kind.

All required fields are initialized with empty values and optional fields are initialized with None.

You should at least set Number::namespace and Number::prop after calling this function.

This function is intended to be used as an automatic filler for default values using the struct update syntax.

The difference with Number::default is that this function can only be used to build a plugin using heap-allocated structures like Strings, Vecs.

Example

use encre_css::prelude::build_plugin::*;

fn main() {
    // Note: the DynamicPlugin type hint is required to help the compiler
    // find the concrete types of type parameters
    let _plugin: DynamicPlugin = Plugin::Number(Number {
        namespace: "z".to_string(),
        prop: SingleProp("z-index".to_string()),
        ..Number::default_dynamic()
    });
}

This example is equivalent to the one of Number::default.

Trait Implementations

impl<Str: Clone, ArrayStr: Clone, MapStr: Clone> Clone for Number<Str, ArrayStr, MapStr>

fn clone(&self) -> Number<Str, ArrayStr, MapStr>

Returns a duplicate of the value.

fn clone_from(&mut self, source: &Self)

Performs copy-assignment from source.

impl<Str: Debug, ArrayStr: Debug, MapStr: Debug> Debug for Number<Str, ArrayStr, MapStr>

fn fmt(&self, f: &mut Formatter<'_>) -> Result

Formats the value using the given formatter.

impl<'de, Str, ArrayStr, MapStr> Deserialize<'de> for Number<Str, ArrayStr, MapStr>

where Str: Deserialize<'de>, ArrayStr: Deserialize<'de>, MapStr: Deserialize<'de>,

fn deserialize<__D>(__deserializer: __D) -> Result<Self, __D::Error>

where __D: Deserializer<'de>,

Deserialize this value from the given Serde deserializer.

impl<Str, ArrayStr, MapStr> Serialize for Number<Str, ArrayStr, MapStr>

where Str: Serialize, ArrayStr: Serialize, MapStr: Serialize,

fn serialize<__S>(&self, __serializer: __S) -> Result<__S::Ok, __S::Error>

where __S: Serializer,

Serialize this value into the given Serde serializer.