From 87d02204f7bc81cc8555608c7100b4229071affd Mon Sep 17 00:00:00 2001 From: Phil Scott Date: Sun, 10 Apr 2022 14:50:20 -0400 Subject: [PATCH] Adds loads of more utilities * AlignContent * AlignItems * AlignSelf * FlexBasis * JustifyContent * JustifyItems * JustifySelf * PlaceContent * PlaceItems * PlaceSelf * Overflow * FontSmoothing * LineHeight * WordBreak --- src/MonorailCss/Plugins/Effects/Opacity.cs | 31 +++++++ .../Plugins/FlexBoxAndGrid/AlignContent.cs | 23 +++++ .../Plugins/FlexBoxAndGrid/AlignItems.cs | 22 +++++ .../Plugins/FlexBoxAndGrid/AlignSelf.cs | 23 +++++ .../Plugins/FlexBoxAndGrid/Flex.cs | 65 +------------- .../Plugins/FlexBoxAndGrid/FlexBasis.cs | 51 +++++++++++ .../Plugins/FlexBoxAndGrid/FlexDirection.cs | 22 +++++ .../Plugins/FlexBoxAndGrid/FlexGrow.cs | 16 ++++ .../Plugins/FlexBoxAndGrid/FlexShrink.cs | 16 ++++ .../Plugins/FlexBoxAndGrid/FlexWrap.cs | 21 +++++ .../Plugins/FlexBoxAndGrid/JustifyContent.cs | 23 +++++ .../Plugins/FlexBoxAndGrid/JustifyItems.cs | 21 +++++ .../Plugins/FlexBoxAndGrid/JustifySelf.cs | 22 +++++ .../Plugins/FlexBoxAndGrid/PlaceContent.cs | 24 +++++ .../Plugins/FlexBoxAndGrid/PlaceItems.cs | 21 +++++ .../Plugins/FlexBoxAndGrid/PlaceSelf.cs | 22 +++++ src/MonorailCss/Plugins/Layout/Overflow.cs | 27 ++++++ src/MonorailCss/Plugins/SizeHelpers.cs | 25 ++++++ src/MonorailCss/Plugins/Sizing/Height.cs | 34 +++++++ src/MonorailCss/Plugins/Sizing/MaxWidth.cs | 88 ------------------- src/MonorailCss/Plugins/Sizing/Width.cs | 34 +++++++ .../Plugins/Typography/FontSmoothing.cs | 42 +++++++++ .../Plugins/Typography/LineHeight.cs | 31 +++++++ .../Plugins/Typography/WordBreak.cs | 39 ++++++++ .../Plugins/Flex/GapTests.cs | 23 +++++ 25 files changed, 614 insertions(+), 152 deletions(-) create mode 100644 src/MonorailCss/Plugins/Effects/Opacity.cs create mode 100644 src/MonorailCss/Plugins/FlexBoxAndGrid/AlignContent.cs create mode 100644 src/MonorailCss/Plugins/FlexBoxAndGrid/AlignItems.cs create mode 100644 src/MonorailCss/Plugins/FlexBoxAndGrid/AlignSelf.cs create mode 100644 src/MonorailCss/Plugins/FlexBoxAndGrid/FlexBasis.cs create mode 100644 src/MonorailCss/Plugins/FlexBoxAndGrid/FlexDirection.cs create mode 100644 src/MonorailCss/Plugins/FlexBoxAndGrid/FlexGrow.cs create mode 100644 src/MonorailCss/Plugins/FlexBoxAndGrid/FlexShrink.cs create mode 100644 src/MonorailCss/Plugins/FlexBoxAndGrid/FlexWrap.cs create mode 100644 src/MonorailCss/Plugins/FlexBoxAndGrid/JustifyContent.cs create mode 100644 src/MonorailCss/Plugins/FlexBoxAndGrid/JustifyItems.cs create mode 100644 src/MonorailCss/Plugins/FlexBoxAndGrid/JustifySelf.cs create mode 100644 src/MonorailCss/Plugins/FlexBoxAndGrid/PlaceContent.cs create mode 100644 src/MonorailCss/Plugins/FlexBoxAndGrid/PlaceItems.cs create mode 100644 src/MonorailCss/Plugins/FlexBoxAndGrid/PlaceSelf.cs create mode 100644 src/MonorailCss/Plugins/Layout/Overflow.cs create mode 100644 src/MonorailCss/Plugins/SizeHelpers.cs create mode 100644 src/MonorailCss/Plugins/Sizing/Height.cs create mode 100644 src/MonorailCss/Plugins/Sizing/Width.cs create mode 100644 src/MonorailCss/Plugins/Typography/FontSmoothing.cs create mode 100644 src/MonorailCss/Plugins/Typography/LineHeight.cs create mode 100644 src/MonorailCss/Plugins/Typography/WordBreak.cs create mode 100644 test/MonorailCss.Tests/Plugins/Flex/GapTests.cs diff --git a/src/MonorailCss/Plugins/Effects/Opacity.cs b/src/MonorailCss/Plugins/Effects/Opacity.cs new file mode 100644 index 0000000..cf09f63 --- /dev/null +++ b/src/MonorailCss/Plugins/Effects/Opacity.cs @@ -0,0 +1,31 @@ +using System.Collections.Immutable; + +namespace MonorailCss.Plugins.Effects; + +/// +/// The opacity plugin. +/// +public class Opacity : BaseUtilityPlugin +{ + /// + protected override string Property => "opacity"; + + protected override ImmutableDictionary Utilities => new Dictionary() + { + { "opacity-0", "0" }, + { "opacity-5", "0.05" }, + { "opacity-10", "0.1" }, + { "opacity-20", "0.2" }, + { "opacity-25", "0.25" }, + { "opacity-30", "0.3" }, + { "opacity-40", "0.4" }, + { "opacity-50", "0.5" }, + { "opacity-60", "0.6" }, + { "opacity-70", "0.7" }, + { "opacity-75", "0.75" }, + { "opacity-80", "0.8" }, + { "opacity-90", "0.9" }, + { "opacity-95", "0.95" }, + { "opacity-100", "1" }, + }.ToImmutableDictionary(); +} \ No newline at end of file diff --git a/src/MonorailCss/Plugins/FlexBoxAndGrid/AlignContent.cs b/src/MonorailCss/Plugins/FlexBoxAndGrid/AlignContent.cs new file mode 100644 index 0000000..1049f5a --- /dev/null +++ b/src/MonorailCss/Plugins/FlexBoxAndGrid/AlignContent.cs @@ -0,0 +1,23 @@ +using System.Collections.Immutable; + +namespace MonorailCss.Plugins.FlexBoxAndGrid; + +/// +/// The align-content plugin. +/// +public class AlignContent : BaseUtilityPlugin +{ + /// + protected override string Property => "align-content"; + + /// + protected override ImmutableDictionary Utilities => new Dictionary + { + { "content-center", "center" }, + { "content-start", "flex-start" }, + { "content-end", "flex-end" }, + { "content-between", "space-between" }, + { "content-around", "space-around" }, + { "content-evenly", "space-evenly" }, + }.ToImmutableDictionary(); +} \ No newline at end of file diff --git a/src/MonorailCss/Plugins/FlexBoxAndGrid/AlignItems.cs b/src/MonorailCss/Plugins/FlexBoxAndGrid/AlignItems.cs new file mode 100644 index 0000000..9720d16 --- /dev/null +++ b/src/MonorailCss/Plugins/FlexBoxAndGrid/AlignItems.cs @@ -0,0 +1,22 @@ +using System.Collections.Immutable; + +namespace MonorailCss.Plugins.FlexBoxAndGrid; + +/// +/// The align-items plugin. +/// +public class AlignItems : BaseUtilityPlugin +{ + /// + protected override string Property => "align-items"; + + /// + protected override ImmutableDictionary Utilities => new Dictionary + { + { "items-start", "flex-start" }, + { "items-end", "flex-end" }, + { "items-center", "center" }, + { "items-baseline", "baseline" }, + { "items-stretch", "stretch" }, + }.ToImmutableDictionary(); +} \ No newline at end of file diff --git a/src/MonorailCss/Plugins/FlexBoxAndGrid/AlignSelf.cs b/src/MonorailCss/Plugins/FlexBoxAndGrid/AlignSelf.cs new file mode 100644 index 0000000..0b0b29f --- /dev/null +++ b/src/MonorailCss/Plugins/FlexBoxAndGrid/AlignSelf.cs @@ -0,0 +1,23 @@ +using System.Collections.Immutable; + +namespace MonorailCss.Plugins.FlexBoxAndGrid; + +/// +/// The align-self plugin. +/// +public class AlignSelf : BaseUtilityPlugin +{ + /// + protected override string Property => "align-self"; + + /// + protected override ImmutableDictionary Utilities => new Dictionary + { + { "self-auto", "auto" }, + { "self-start", "flex-start" }, + { "self-end", "flex-end" }, + { "self-center", "center" }, + { "self-stretch", "stretch" }, + { "self-baseline", "baseline" }, + }.ToImmutableDictionary(); +} \ No newline at end of file diff --git a/src/MonorailCss/Plugins/FlexBoxAndGrid/Flex.cs b/src/MonorailCss/Plugins/FlexBoxAndGrid/Flex.cs index 3656718..40ce720 100644 --- a/src/MonorailCss/Plugins/FlexBoxAndGrid/Flex.cs +++ b/src/MonorailCss/Plugins/FlexBoxAndGrid/Flex.cs @@ -15,67 +15,4 @@ public class Flex : BaseUtilityPlugin { { "flex-1", "1 1 0;" }, { "flex-auto", "1 1 auto" }, { "flex-initial", "0 1 auto" }, { "flex-none", "none" }, }.ToImmutableDictionary(); -} - -/// -/// The flex-grow plugin. -/// -public class FlexGrow : BaseUtilityPlugin -{ - /// - protected override string Property => "flex-grow"; - - /// - protected override ImmutableDictionary Utilities => - new Dictionary() { { "grow", "1" }, { "grow-0", "0" }, }.ToImmutableDictionary(); -} - -/// -/// The flex-shrink plugin. -/// -public class FlexShrink : BaseUtilityPlugin -{ - /// - protected override string Property => "flex-shrink"; - - /// - protected override ImmutableDictionary Utilities => - new Dictionary() { { "shrink", "1" }, { "shrink-0", "0" }, }.ToImmutableDictionary(); -} - -/// -/// The flex-direction plugin. -/// -public class FlexDirection : BaseUtilityPlugin -{ - /// - protected override string Property => "flex-direction"; - - /// - protected override ImmutableDictionary Utilities => - new Dictionary() - { - { "flex-row", "row" }, - { "flex-row-reverse", "row-reverse" }, - { "flex-col", "column" }, - { "flex-col-reverse", "column-reverse" }, - }.ToImmutableDictionary(); -} - -/// -/// The flex-shrink plugin. -/// -public class FlexWrap : BaseUtilityPlugin -{ - /// - protected override string Property => "flex-wrap"; - - /// - protected override ImmutableDictionary Utilities => - new Dictionary() - { - { "flex-wrap", "wrap" }, - { "flex-wrap-reverse", "wrap-reverse" }, - { "flex-nowrap", "nowrap" }, - }.ToImmutableDictionary(); -} +} \ No newline at end of file diff --git a/src/MonorailCss/Plugins/FlexBoxAndGrid/FlexBasis.cs b/src/MonorailCss/Plugins/FlexBoxAndGrid/FlexBasis.cs new file mode 100644 index 0000000..a2de2c2 --- /dev/null +++ b/src/MonorailCss/Plugins/FlexBoxAndGrid/FlexBasis.cs @@ -0,0 +1,51 @@ +namespace MonorailCss.Plugins.FlexBoxAndGrid; + +/// +/// The flex-basis plugin. +/// +public class FlexBasis : BaseUtilityNamespacePlugin +{ + /// + /// Initializes a new instance of the class. + /// + /// The design system + public FlexBasis(DesignSystem designSystem) + { + Values = designSystem.Spacing.AddRange(SizeHelpers.Percentages).Add("auto", "auto"); + } + + /// + protected override CssNamespaceToPropertyMap NamespacePropertyMapList => new() + { + { "basis", "flex-basis" }, + }; + + /// + protected override CssSuffixToValueMap Values { get; } +} + +/// +/// The gap plugin. +/// +public class Gap : BaseUtilityNamespacePlugin +{ + /// + /// Initializes a new instance of the class. + /// + /// The design system. + public Gap(DesignSystem designSystem) + { + Values = designSystem.Spacing; + } + + /// + protected override CssNamespaceToPropertyMap NamespacePropertyMapList => new() + { + { "gap", "gap" }, + { "gap-x", "column-gap" }, + { "gap-y", "row-gap" }, + }; + + /// + protected override CssSuffixToValueMap Values { get; } +} \ No newline at end of file diff --git a/src/MonorailCss/Plugins/FlexBoxAndGrid/FlexDirection.cs b/src/MonorailCss/Plugins/FlexBoxAndGrid/FlexDirection.cs new file mode 100644 index 0000000..47b7768 --- /dev/null +++ b/src/MonorailCss/Plugins/FlexBoxAndGrid/FlexDirection.cs @@ -0,0 +1,22 @@ +using System.Collections.Immutable; + +namespace MonorailCss.Plugins.FlexBoxAndGrid; + +/// +/// The flex-direction plugin. +/// +public class FlexDirection : BaseUtilityPlugin +{ + /// + protected override string Property => "flex-direction"; + + /// + protected override ImmutableDictionary Utilities => + new Dictionary() + { + { "flex-row", "row" }, + { "flex-row-reverse", "row-reverse" }, + { "flex-col", "column" }, + { "flex-col-reverse", "column-reverse" }, + }.ToImmutableDictionary(); +} \ No newline at end of file diff --git a/src/MonorailCss/Plugins/FlexBoxAndGrid/FlexGrow.cs b/src/MonorailCss/Plugins/FlexBoxAndGrid/FlexGrow.cs new file mode 100644 index 0000000..1c3500c --- /dev/null +++ b/src/MonorailCss/Plugins/FlexBoxAndGrid/FlexGrow.cs @@ -0,0 +1,16 @@ +using System.Collections.Immutable; + +namespace MonorailCss.Plugins.FlexBoxAndGrid; + +/// +/// The flex-grow plugin. +/// +public class FlexGrow : BaseUtilityPlugin +{ + /// + protected override string Property => "flex-grow"; + + /// + protected override ImmutableDictionary Utilities => + new Dictionary() { { "grow", "1" }, { "grow-0", "0" }, }.ToImmutableDictionary(); +} \ No newline at end of file diff --git a/src/MonorailCss/Plugins/FlexBoxAndGrid/FlexShrink.cs b/src/MonorailCss/Plugins/FlexBoxAndGrid/FlexShrink.cs new file mode 100644 index 0000000..81d7e7c --- /dev/null +++ b/src/MonorailCss/Plugins/FlexBoxAndGrid/FlexShrink.cs @@ -0,0 +1,16 @@ +using System.Collections.Immutable; + +namespace MonorailCss.Plugins.FlexBoxAndGrid; + +/// +/// The flex-shrink plugin. +/// +public class FlexShrink : BaseUtilityPlugin +{ + /// + protected override string Property => "flex-shrink"; + + /// + protected override ImmutableDictionary Utilities => + new Dictionary() { { "shrink", "1" }, { "shrink-0", "0" }, }.ToImmutableDictionary(); +} \ No newline at end of file diff --git a/src/MonorailCss/Plugins/FlexBoxAndGrid/FlexWrap.cs b/src/MonorailCss/Plugins/FlexBoxAndGrid/FlexWrap.cs new file mode 100644 index 0000000..a58e72e --- /dev/null +++ b/src/MonorailCss/Plugins/FlexBoxAndGrid/FlexWrap.cs @@ -0,0 +1,21 @@ +using System.Collections.Immutable; + +namespace MonorailCss.Plugins.FlexBoxAndGrid; + +/// +/// The flex-shrink plugin. +/// +public class FlexWrap : BaseUtilityPlugin +{ + /// + protected override string Property => "flex-wrap"; + + /// + protected override ImmutableDictionary Utilities => + new Dictionary() + { + { "flex-wrap", "wrap" }, + { "flex-wrap-reverse", "wrap-reverse" }, + { "flex-nowrap", "nowrap" }, + }.ToImmutableDictionary(); +} \ No newline at end of file diff --git a/src/MonorailCss/Plugins/FlexBoxAndGrid/JustifyContent.cs b/src/MonorailCss/Plugins/FlexBoxAndGrid/JustifyContent.cs new file mode 100644 index 0000000..3b98809 --- /dev/null +++ b/src/MonorailCss/Plugins/FlexBoxAndGrid/JustifyContent.cs @@ -0,0 +1,23 @@ +using System.Collections.Immutable; + +namespace MonorailCss.Plugins.FlexBoxAndGrid; + +/// +/// The justify-content plugin. +/// +public class JustifyContent : BaseUtilityPlugin +{ + /// + protected override string Property => "justify-content"; + + /// + protected override ImmutableDictionary Utilities => new Dictionary() + { + { "justify-start", "flex-start" }, + { "justify-end", "flex-end" }, + { "justify-center", "center" }, + { "justify-between", "space-between" }, + { "justify-around", "space-around" }, + { "justify-evenly", "space-evenly" }, + }.ToImmutableDictionary(); +} \ No newline at end of file diff --git a/src/MonorailCss/Plugins/FlexBoxAndGrid/JustifyItems.cs b/src/MonorailCss/Plugins/FlexBoxAndGrid/JustifyItems.cs new file mode 100644 index 0000000..1ee3101 --- /dev/null +++ b/src/MonorailCss/Plugins/FlexBoxAndGrid/JustifyItems.cs @@ -0,0 +1,21 @@ +using System.Collections.Immutable; + +namespace MonorailCss.Plugins.FlexBoxAndGrid; + +/// +/// The justify-items plugin. +/// +public class JustifyItems : BaseUtilityPlugin +{ + /// + protected override string Property => "justify-items"; + + /// + protected override ImmutableDictionary Utilities => new Dictionary() + { + { "justify-items-start", "start" }, + { "justify-items-end", "end" }, + { "justify-items-center", "center" }, + { "justify-items-stretch", "stretch" }, + }.ToImmutableDictionary(); +} \ No newline at end of file diff --git a/src/MonorailCss/Plugins/FlexBoxAndGrid/JustifySelf.cs b/src/MonorailCss/Plugins/FlexBoxAndGrid/JustifySelf.cs new file mode 100644 index 0000000..afd719d --- /dev/null +++ b/src/MonorailCss/Plugins/FlexBoxAndGrid/JustifySelf.cs @@ -0,0 +1,22 @@ +using System.Collections.Immutable; + +namespace MonorailCss.Plugins.FlexBoxAndGrid; + +/// +/// The justify-self plugin. +/// +public class JustifySelf : BaseUtilityPlugin +{ + /// + protected override string Property => "justify-self"; + + /// + protected override ImmutableDictionary Utilities => new Dictionary() + { + { "justify-self-auto", "auto" }, + { "justify-self-start", "start" }, + { "justify-self-end", "end" }, + { "justify-self-center", "center" }, + { "justify-self-stretch", "stretch" }, + }.ToImmutableDictionary(); +} \ No newline at end of file diff --git a/src/MonorailCss/Plugins/FlexBoxAndGrid/PlaceContent.cs b/src/MonorailCss/Plugins/FlexBoxAndGrid/PlaceContent.cs new file mode 100644 index 0000000..bf35159 --- /dev/null +++ b/src/MonorailCss/Plugins/FlexBoxAndGrid/PlaceContent.cs @@ -0,0 +1,24 @@ +using System.Collections.Immutable; + +namespace MonorailCss.Plugins.FlexBoxAndGrid; + +/// +/// The place-content plugin. +/// +public class PlaceContent : BaseUtilityPlugin +{ + /// + protected override string Property => "place-content"; + + /// + protected override ImmutableDictionary Utilities => new Dictionary + { + { "place-content-center", "center" }, + { "place-content-start", "start" }, + { "place-content-end", "end" }, + { "place-content-between", "space-between" }, + { "place-content-around", "space-around" }, + { "place-content-evenly", "space-evenly" }, + { "place-content-stretch", "stretch" }, + }.ToImmutableDictionary(); +} \ No newline at end of file diff --git a/src/MonorailCss/Plugins/FlexBoxAndGrid/PlaceItems.cs b/src/MonorailCss/Plugins/FlexBoxAndGrid/PlaceItems.cs new file mode 100644 index 0000000..1101681 --- /dev/null +++ b/src/MonorailCss/Plugins/FlexBoxAndGrid/PlaceItems.cs @@ -0,0 +1,21 @@ +using System.Collections.Immutable; + +namespace MonorailCss.Plugins.FlexBoxAndGrid; + +/// +/// The place-items plugin. +/// +public class PlaceItems : BaseUtilityPlugin +{ + /// + protected override string Property => "place-items"; + + /// + protected override ImmutableDictionary Utilities => new Dictionary + { + { "place-items-start", "start" }, + { "place-items-end", "end" }, + { "place-items-center", "center" }, + { "place-items-stretch", "stretch" }, + }.ToImmutableDictionary(); +} \ No newline at end of file diff --git a/src/MonorailCss/Plugins/FlexBoxAndGrid/PlaceSelf.cs b/src/MonorailCss/Plugins/FlexBoxAndGrid/PlaceSelf.cs new file mode 100644 index 0000000..8f547d3 --- /dev/null +++ b/src/MonorailCss/Plugins/FlexBoxAndGrid/PlaceSelf.cs @@ -0,0 +1,22 @@ +using System.Collections.Immutable; + +namespace MonorailCss.Plugins.FlexBoxAndGrid; + +/// +/// The place-self plugin. +/// +public class PlaceSelf : BaseUtilityPlugin +{ + /// + protected override string Property => "place-self"; + + /// + protected override ImmutableDictionary Utilities => new Dictionary + { + { "place-self-auto", "auto" }, + { "place-self-start", "start" }, + { "place-self-end", "end" }, + { "place-self-center", "center" }, + { "place-self-stretch", "stretch" }, + }.ToImmutableDictionary(); +} \ No newline at end of file diff --git a/src/MonorailCss/Plugins/Layout/Overflow.cs b/src/MonorailCss/Plugins/Layout/Overflow.cs new file mode 100644 index 0000000..ccaec98 --- /dev/null +++ b/src/MonorailCss/Plugins/Layout/Overflow.cs @@ -0,0 +1,27 @@ +using System.Collections.Immutable; + +namespace MonorailCss.Plugins.Layout; + +/// +/// The overflow plugin. +/// +public class Overflow : BaseUtilityNamespacePlugin +{ + /// + protected override CssNamespaceToPropertyMap NamespacePropertyMapList => new CssNamespaceToPropertyMap() + { + { "overflow", "overflow" }, + { "overflow-x", "overflow-x " }, + { "overflow-y", "overflow-y " }, + }; + + /// + protected override CssSuffixToValueMap Values => new CssSuffixToValueMap() + { + { "auto", "auto" }, + { "hidden", "hidden" }, + { "clip", "clip" }, + { "visible", "visible" }, + { "scroll", "scroll" }, + }; +} \ No newline at end of file diff --git a/src/MonorailCss/Plugins/SizeHelpers.cs b/src/MonorailCss/Plugins/SizeHelpers.cs new file mode 100644 index 0000000..df25473 --- /dev/null +++ b/src/MonorailCss/Plugins/SizeHelpers.cs @@ -0,0 +1,25 @@ +using System.Collections.Immutable; + +namespace MonorailCss.Plugins; + +internal static class SizeHelpers +{ + public static readonly ImmutableDictionary Percentages = new Dictionary() + { + { "1/2", "50%" }, + { "1/3", "33.333333%" }, + { "2/3", "66.666667%" }, + { "1/4", "25%" }, + { "2/4", "50%" }, + { "3/4", "75%" }, + { "1/5", "20%" }, + { "2/5", "40%" }, + { "3/5", "60%" }, + { "4/5", "80%" }, + { "1/6", "16.666667%" }, + { "2/6", "33.333333%" }, + { "3/6", "50%" }, + { "4/6", "66.666667%" }, + { "5/6", "83.333333%" }, + }.ToImmutableDictionary(); +} \ No newline at end of file diff --git a/src/MonorailCss/Plugins/Sizing/Height.cs b/src/MonorailCss/Plugins/Sizing/Height.cs new file mode 100644 index 0000000..c6a591d --- /dev/null +++ b/src/MonorailCss/Plugins/Sizing/Height.cs @@ -0,0 +1,34 @@ +namespace MonorailCss.Plugins.Sizing; + +/// +/// The max-width plugin. +/// +public class Height : BaseUtilityNamespacePlugin +{ + private const string Namespace = "h"; + + /// + /// Initializes a new instance of the class. + /// + /// The design system. + public Height(DesignSystem designSystem) + { + Values = SizeHelpers.Percentages + .AddRange(designSystem.Spacing) + .AddRange(new Dictionary() + { + { "auto", "auto" }, + { "full", "100%" }, + { "screen", "100vh" }, + { "min", "min-content" }, + { "max", "max-content" }, + { "fit", "fit-content" }, + }); + } + + /// + protected override CssNamespaceToPropertyMap NamespacePropertyMapList => new() { { Namespace, "height" }, }; + + /// + protected override CssSuffixToValueMap Values { get; } +} \ No newline at end of file diff --git a/src/MonorailCss/Plugins/Sizing/MaxWidth.cs b/src/MonorailCss/Plugins/Sizing/MaxWidth.cs index 6834e57..27ab9c8 100644 --- a/src/MonorailCss/Plugins/Sizing/MaxWidth.cs +++ b/src/MonorailCss/Plugins/Sizing/MaxWidth.cs @@ -42,94 +42,6 @@ public MaxWidth(DesignSystem designSystem) /// protected override CssNamespaceToPropertyMap NamespacePropertyMapList => new() { { Namespace, "max-width" }, }; - /// - protected override CssSuffixToValueMap Values { get; } -} - -internal static class SizeHelpers -{ - public static readonly ImmutableDictionary Percentages = new Dictionary() - { - { "1/2", "50%" }, - { "1/3", "33.333333%" }, - { "2/3", "66.666667%" }, - { "1/4", "25%" }, - { "2/4", "50%" }, - { "3/4", "75%" }, - { "1/5", "20%" }, - { "2/5", "40%" }, - { "3/5", "60%" }, - { "4/5", "80%" }, - { "1/6", "16.666667%" }, - { "2/6", "33.333333%" }, - { "3/6", "50%" }, - { "4/6", "66.666667%" }, - { "5/6", "83.333333%" }, - }.ToImmutableDictionary(); -} - -/// -/// The max-width plugin. -/// -public class Width : BaseUtilityNamespacePlugin -{ - private const string Namespace = "w"; - - /// - /// Initializes a new instance of the class. - /// - /// The design system. - public Width(DesignSystem designSystem) - { - Values = SizeHelpers.Percentages - .AddRange(designSystem.Spacing) - .AddRange(new Dictionary() - { - { "auto", "auto" }, - { "full", "100%" }, - { "screen", "100vh" }, - { "min", "min-content" }, - { "max", "max-content" }, - { "fit", "fit-content" }, - }); - } - - /// - protected override CssNamespaceToPropertyMap NamespacePropertyMapList => new() { { Namespace, "width" }, }; - - /// - protected override CssSuffixToValueMap Values { get; } -} - -/// -/// The max-width plugin. -/// -public class Height : BaseUtilityNamespacePlugin -{ - private const string Namespace = "h"; - - /// - /// Initializes a new instance of the class. - /// - /// The design system. - public Height(DesignSystem designSystem) - { - Values = SizeHelpers.Percentages - .AddRange(designSystem.Spacing) - .AddRange(new Dictionary() - { - { "auto", "auto" }, - { "full", "100%" }, - { "screen", "100vh" }, - { "min", "min-content" }, - { "max", "max-content" }, - { "fit", "fit-content" }, - }); - } - - /// - protected override CssNamespaceToPropertyMap NamespacePropertyMapList => new() { { Namespace, "height" }, }; - /// protected override CssSuffixToValueMap Values { get; } } \ No newline at end of file diff --git a/src/MonorailCss/Plugins/Sizing/Width.cs b/src/MonorailCss/Plugins/Sizing/Width.cs new file mode 100644 index 0000000..5a815f1 --- /dev/null +++ b/src/MonorailCss/Plugins/Sizing/Width.cs @@ -0,0 +1,34 @@ +namespace MonorailCss.Plugins.Sizing; + +/// +/// The max-width plugin. +/// +public class Width : BaseUtilityNamespacePlugin +{ + private const string Namespace = "w"; + + /// + /// Initializes a new instance of the class. + /// + /// The design system. + public Width(DesignSystem designSystem) + { + Values = SizeHelpers.Percentages + .AddRange(designSystem.Spacing) + .AddRange(new Dictionary() + { + { "auto", "auto" }, + { "full", "100%" }, + { "screen", "100vh" }, + { "min", "min-content" }, + { "max", "max-content" }, + { "fit", "fit-content" }, + }); + } + + /// + protected override CssNamespaceToPropertyMap NamespacePropertyMapList => new() { { Namespace, "width" }, }; + + /// + protected override CssSuffixToValueMap Values { get; } +} \ No newline at end of file diff --git a/src/MonorailCss/Plugins/Typography/FontSmoothing.cs b/src/MonorailCss/Plugins/Typography/FontSmoothing.cs new file mode 100644 index 0000000..fe25f60 --- /dev/null +++ b/src/MonorailCss/Plugins/Typography/FontSmoothing.cs @@ -0,0 +1,42 @@ +using MonorailCss.Css; + +namespace MonorailCss.Plugins.Typography; + +/// +/// The font-smoothing plugin. +/// +public class FontSmoothing : IUtilityPlugin +{ + /// + public IEnumerable Process(IParsedClassNameSyntax syntax) + { + if (syntax is not UtilitySyntax utilitySyntax) + { + yield break; + } + + CssDeclarationList declaration; + if (utilitySyntax.Name == "antialiased") + { + declaration = new CssDeclarationList() + { + new("-webkit-font-smoothing", "antialiased"), + new("-moz-osx-font-smoothing", "grayscale"), + }; + } + else if (utilitySyntax.Name == "subpixel-antialiased") + { + declaration = new CssDeclarationList() + { + new("-webkit-font-smoothing", "auto"), + new("-moz-osx-font-smoothing", "auto"), + }; + } + else + { + yield break; + } + + yield return new CssRuleSet(utilitySyntax.OriginalSyntax, declaration); + } +} \ No newline at end of file diff --git a/src/MonorailCss/Plugins/Typography/LineHeight.cs b/src/MonorailCss/Plugins/Typography/LineHeight.cs new file mode 100644 index 0000000..dfcd2a7 --- /dev/null +++ b/src/MonorailCss/Plugins/Typography/LineHeight.cs @@ -0,0 +1,31 @@ +using System.Collections.Immutable; + +namespace MonorailCss.Plugins.Typography; + +/// +/// The line-height plugin. +/// +public class LineHeight : BaseUtilityPlugin +{ + /// + protected override string Property => "line-height"; + + /// + protected override ImmutableDictionary Utilities => new Dictionary() + { + { "leading-3", ".75rem" }, /* 12px */ + { "leading-4", "1rem" }, /* 16px */ + { "leading-5", "1.25rem" }, /* 20px */ + { "leading-6", "1.5rem" }, /* 24px */ + { "leading-7", "1.75rem" }, /* 28px */ + { "leading-8", "2rem" }, /* 32px */ + { "leading-9", "2.25rem" }, /* 36px */ + { "leading-10", "2.5rem" }, /* 40px */ + { "leading-none", "1" }, + { "leading-tight", "1.25" }, + { "leading-snug", "1.375" }, + { "leading-normal", "1.5" }, + { "leading-relaxed", "1.625" }, + { "leading-loose", "2" }, + }.ToImmutableDictionary(); +} \ No newline at end of file diff --git a/src/MonorailCss/Plugins/Typography/WordBreak.cs b/src/MonorailCss/Plugins/Typography/WordBreak.cs new file mode 100644 index 0000000..d03dec9 --- /dev/null +++ b/src/MonorailCss/Plugins/Typography/WordBreak.cs @@ -0,0 +1,39 @@ +using MonorailCss.Css; + +namespace MonorailCss.Plugins.Typography; + +/// +/// The word break plugin. +/// +public class WordBreak : IUtilityPlugin +{ + /// + public IEnumerable Process(IParsedClassNameSyntax syntax) + { + if (syntax is not UtilitySyntax utilitySyntax) + { + yield break; + } + + CssDeclarationList declarations; + switch (utilitySyntax.Name) + { + case "break-normal": + declarations = new CssDeclarationList() + { + new("overflow-wrap", "normal"), new("break-words", "normal"), + }; + break; + case "break-words": + declarations = new CssDeclarationList() { new("overflow-wrap", "break-word"), }; + break; + case "break-all": + declarations = new CssDeclarationList() { new("word-break", "break-all"), }; + break; + default: + yield break; + } + + yield return new CssRuleSet(utilitySyntax.OriginalSyntax, declarations); + } +} \ No newline at end of file diff --git a/test/MonorailCss.Tests/Plugins/Flex/GapTests.cs b/test/MonorailCss.Tests/Plugins/Flex/GapTests.cs new file mode 100644 index 0000000..68ccff6 --- /dev/null +++ b/test/MonorailCss.Tests/Plugins/Flex/GapTests.cs @@ -0,0 +1,23 @@ +namespace MonorailCss.Tests.Plugins.Flex; + +public class GapTests +{ + [Fact] + public void Can_handle_gap() + { + var framework = new CssFramework(MonorailCss.DesignSystem.Default).WithCssReset(string.Empty); + var result = framework.Process(new[] {"gap-2", "gap-x-4", "gap-y-8"}); +result.ShouldBeCss(@" +.gap-2 { + gap:0.5rem; +} +.gap-x-4 { + column-gap:1rem; +} +.gap-y-8 { + row-gap:2rem; +} + +"); + } +} \ No newline at end of file