From 63acd049eb0864edf8462540d3f4497f06391b5f Mon Sep 17 00:00:00 2001 From: Phil Scott Date: Sat, 9 Apr 2022 13:34:41 -0400 Subject: [PATCH] Making setting public for Prose configuration --- src/MonorailCss/Css/CssColor.cs | 4 +- src/MonorailCss/Css/CssDeclarationList.cs | 41 ++- src/MonorailCss/Css/CssProperties.cs | 8 +- src/MonorailCss/Css/CssRuleSet.cs | 53 ++- src/MonorailCss/Plugins/CssSettings.cs | 21 +- src/MonorailCss/Plugins/Prose.cs | 345 ++++++++++-------- .../DesignSystem/CssSettingsTests.cs | 39 ++ test/MonorailCss.Tests/FrameworkTests.cs | 21 +- test/MonorailCss.Tests/Plugins/ProseTests.cs | 27 +- .../Plugins/ShouldlyExtensions.cs | 14 + 10 files changed, 396 insertions(+), 177 deletions(-) create mode 100644 test/MonorailCss.Tests/DesignSystem/CssSettingsTests.cs diff --git a/src/MonorailCss/Css/CssColor.cs b/src/MonorailCss/Css/CssColor.cs index 9a8f902..650499c 100644 --- a/src/MonorailCss/Css/CssColor.cs +++ b/src/MonorailCss/Css/CssColor.cs @@ -54,7 +54,7 @@ public CssColor(int r, int g, int b) /// Color in the format of rgb( r g b). public string AsRgb() { - return $"rgb({_r} {_g} {_b})"; + return $"rgba({_r}, {_g}, {_b}, 1)"; } /// @@ -64,6 +64,6 @@ public string AsRgb() /// The color in the format of rgb(r g b / opacity). public string AsRgbWithOpacity(string opacity) { - return $"rgb({_r} {_g} {_b} / {opacity})"; + return $"rgba({_r}, {_g}, {_b}, {opacity})"; } } \ No newline at end of file diff --git a/src/MonorailCss/Css/CssDeclarationList.cs b/src/MonorailCss/Css/CssDeclarationList.cs index 8a0ce43..264265c 100644 --- a/src/MonorailCss/Css/CssDeclarationList.cs +++ b/src/MonorailCss/Css/CssDeclarationList.cs @@ -1,5 +1,6 @@ using System.Collections; using System.Collections.Concurrent; +using System.Collections.Immutable; namespace MonorailCss.Css; @@ -75,23 +76,55 @@ IEnumerator IEnumerable.GetEnumerator() /// public class CssRuleSetList : IEnumerable { - private readonly List _declarations = new(); + private ImmutableDictionary _declarations = ImmutableDictionary.Empty; /// /// Adds a new rule set to the list. /// /// The rule set to add. - public void Add(CssRuleSet ruleSet) => _declarations.Add(ruleSet); + public void Add(CssRuleSet ruleSet) + { + if (_declarations.TryGetValue(ruleSet.Selector, out var existingRuleSet)) + { + _declarations = _declarations.SetItem(ruleSet.Selector, existingRuleSet + ruleSet); + } + else + { + _declarations = _declarations.Add(ruleSet.Selector, ruleSet); + } + } /// public IEnumerator GetEnumerator() { - return _declarations.GetEnumerator(); + return _declarations.Values.GetEnumerator(); } /// IEnumerator IEnumerable.GetEnumerator() { - return _declarations.GetEnumerator(); + return _declarations.Values.GetEnumerator(); + } + + /// + /// Adds two rule set lists together. + /// + /// The first rule set. + /// The second rule set. + /// A new rule set with the existing rules. + public static CssRuleSetList operator +(CssRuleSetList ruleSet1, CssRuleSetList ruleSet2) + { + var newRuleSetList = new CssRuleSetList(); + foreach (var ruleSet in ruleSet1) + { + newRuleSetList.Add(ruleSet); + } + + foreach (var ruleSet in ruleSet2) + { + newRuleSetList.Add(ruleSet); + } + + return newRuleSetList; } } \ No newline at end of file diff --git a/src/MonorailCss/Css/CssProperties.cs b/src/MonorailCss/Css/CssProperties.cs index 3ece57e..30587ff 100644 --- a/src/MonorailCss/Css/CssProperties.cs +++ b/src/MonorailCss/Css/CssProperties.cs @@ -1,11 +1,15 @@ using System.Diagnostics.CodeAnalysis; using CaseExtensions; +#pragma warning disable CS1591 +#pragma warning disable SA1600 namespace MonorailCss.Css; -// ReSharper disable UnusedMember.Global +/// +/// Collection of stand CSS property names. +/// [SuppressMessage("StyleCop.CSharp.MaintainabilityRules", "SA1401:Fields should be private")] -internal static class CssProperties +public static class CssProperties { // future me will convert these to constants. public static string Background = nameof(Background).ToKebabCase(); diff --git a/src/MonorailCss/Css/CssRuleSet.cs b/src/MonorailCss/Css/CssRuleSet.cs index c2c06ce..1dda13b 100644 --- a/src/MonorailCss/Css/CssRuleSet.cs +++ b/src/MonorailCss/Css/CssRuleSet.cs @@ -14,7 +14,28 @@ public record CssStylesheet(ImmutableList MediaRules); /// /// The CSS selector. /// The CSS declaration list. -public record CssRuleSet(CssSelector Selector, CssDeclarationList DeclarationList); +public record CssRuleSet(CssSelector Selector, CssDeclarationList DeclarationList) +{ + /// + /// Adds two rule sets together. + /// + /// The first rule set. + /// The second rule set. + /// A new instance of the two rule sets combined. + /// Throws if the rule sets have different selectors. + public static CssRuleSet operator +(CssRuleSet ruleSet1, CssRuleSet ruleSet2) + { + if (ruleSet1.Selector.Equals(ruleSet2.Selector) == false) + { + throw new InvalidOperationException("Cannot add ruleset with different selectors."); + } + + return ruleSet1 with + { + DeclarationList = ruleSet1.DeclarationList + ruleSet2.DeclarationList, + }; + } +} /// /// Represents a CSS selector. @@ -41,6 +62,28 @@ public override string ToString() return sb.ToString(); } + /// + public virtual bool Equals(CssSelector? other) + { + if (ReferenceEquals(null, other)) + { + return false; + } + + if (ReferenceEquals(this, other)) + { + return true; + } + + return Selector == other.Selector && PseudoClass == other.PseudoClass && PseudoElement == other.PseudoElement; + } + + /// + public override int GetHashCode() + { + return HashCode.Combine(Selector, PseudoClass, PseudoElement); + } + /// /// Returns a new CSS selector from a string. /// @@ -61,10 +104,4 @@ public record CssDeclaration(string Property, string Value); /// /// A list of media rules features. /// The defined rule sets for the media rule feature. -public record CssMediaRule(ImmutableList Features, ImmutableList RuleSets); - -/// -/// Represents the root media rule with no features. -/// -/// The rule sets. -public record RootMediaRule(ImmutableList RuleSets) : CssMediaRule(ImmutableList.Empty, RuleSets); \ No newline at end of file +public record CssMediaRule(ImmutableList Features, ImmutableList RuleSets); \ No newline at end of file diff --git a/src/MonorailCss/Plugins/CssSettings.cs b/src/MonorailCss/Plugins/CssSettings.cs index cc29d16..ead7ad6 100644 --- a/src/MonorailCss/Plugins/CssSettings.cs +++ b/src/MonorailCss/Plugins/CssSettings.cs @@ -3,17 +3,32 @@ namespace MonorailCss.Plugins; -internal record CssSettings +/// +/// Configuration of a CSS settings. +/// +public record CssSettings { + /// + /// Gets the declarations for the root element. + /// public CssDeclarationList Css { get; init; } = new(); - public ImmutableList ChildRules { get; init; } = ImmutableList.Empty; + /// + /// Gets the child rules for the element. + /// + public CssRuleSetList ChildRules { get; init; } = new CssRuleSetList(); + /// + /// Combines two settings together. The right operator will override. + /// + /// The first settings. + /// The second settings. + /// A new settings instance. public static CssSettings operator +(CssSettings settings1, CssSettings settings2) { return settings1 with { - ChildRules = settings1.ChildRules.AddRange(settings2.ChildRules), + ChildRules = settings1.ChildRules + settings2.ChildRules, Css = settings1.Css + settings2.Css, }; } diff --git a/src/MonorailCss/Plugins/Prose.cs b/src/MonorailCss/Plugins/Prose.cs index fb500f6..ad24354 100644 --- a/src/MonorailCss/Plugins/Prose.cs +++ b/src/MonorailCss/Plugins/Prose.cs @@ -21,10 +21,13 @@ public class Settings : ISettings /// /// Gets the names of the colors to create a gray scale prose modifiers. /// - public string[] GrayScales { get; init; } = new[] - { - ColorNames.Gray, - }; + public string[] GrayScales { get; init; } = new[] { ColorNames.Gray, }; + + /// + /// Gets ths custom settings to apply to the default settings.. + /// + public Func> CustomSettings { get; init; } = + _ => ImmutableDictionary.Empty; } private readonly DesignSystem _designSystem; @@ -45,8 +48,19 @@ public Prose(DesignSystem designSystem, CssFramework framework, Settings setting _framework = framework; _settings = settings; - _configuredSettings = StandardSettings - .Add("DEFAULT", DefaultSettings() + StandardSettings["base"] + StandardSettings[ColorNames.Gray]); + var defaultSettings = DefaultSettings() + StandardSettings["base"] + StandardSettings[ColorNames.Gray]; + + var customSettings = _settings.CustomSettings(_designSystem); + + _configuredSettings = StandardSettings.Add("DEFAULT", defaultSettings); + foreach (var customSetting in customSettings) + { + _configuredSettings = _configuredSettings.ContainsKey(customSetting.Key) + ? _configuredSettings.SetItem( + customSetting.Key, + _configuredSettings[customSetting.Key] + customSetting.Value) + : _configuredSettings.Add(customSetting.Key, customSetting.Value); + } } /// @@ -72,18 +86,12 @@ public IEnumerable Process(IParsedClassNameSyntax syntax) foreach (var childRule in settings.ChildRules) { - yield return childRule with - { - Selector = $"{syntax.OriginalSyntax} {childRule.Selector}", - }; + yield return childRule with { Selector = $"{syntax.OriginalSyntax} {childRule.Selector}", }; } } /// - public ImmutableArray Namespaces => new[] - { - _settings.Namespace, - }.ToImmutableArray(); + public ImmutableArray Namespaces => new[] { _settings.Namespace, }.ToImmutableArray(); /// public IEnumerable<(string Modifier, IVariant Variant)> GetVariants() @@ -112,83 +120,96 @@ public IEnumerable<(string Modifier, IVariant Variant)> GetVariants() return ($"{ns}-{modifer}", new SelectorVariant(selector)); } - private CssSettings DefaultSettings() => new() + private CssSettings DefaultSettings() { - Css = new CssDeclarationList - { - new(CssProperties.Color, _framework.GetCssVariableWithPrefix("prose-body")), - }, - ChildRules = new[] + var defaultSettings = new CssSettings() { - new CssRuleSet("a", new CssDeclarationList - { - new(CssProperties.Color, _framework.GetCssVariableWithPrefix("prose-links")), - new(CssProperties.TextDecoration, "underline"), - }), - new CssRuleSet("pre", new CssDeclarationList() + Css = + new CssDeclarationList { new(CssProperties.Color, _framework.GetCssVariableWithPrefix("prose-body")), }, + ChildRules = new CssRuleSetList() { - new(CssProperties.Color, _framework.GetCssVariableWithPrefix("prose-pre-code")), - new(CssProperties.BackgroundColor, _framework.GetCssVariableWithPrefix("prose-pre-bg")), - new("overflow-x", "auto"), - new(CssProperties.FontWeight, "300"), - }), - new CssRuleSet("pre code", new CssDeclarationList() - { - new(CssProperties.BackgroundColor, "transparent"), - new(CssProperties.BorderWidth, "0"), - new(CssProperties.BorderRadius, "0"), - new(CssProperties.Padding, "0"), - new(CssProperties.FontWeight, "inherit"), - new(CssProperties.Color, "inherit"), - new(CssProperties.FontSize, "inherit"), - new(CssProperties.FontFamily, "inherit"), - new(CssProperties.LineHeight, "inherit"), - }), - new CssRuleSet("ol", new CssDeclarationList { new(CssProperties.ListStyleType, "decimal") }), - new CssRuleSet("ol[type=\"A\"]", new CssDeclarationList { new(CssProperties.ListStyleType, "upper-alpha") }), - new CssRuleSet("ol[type=\"a\"]", new CssDeclarationList { new(CssProperties.ListStyleType, "lower-alpha") }), - new CssRuleSet("ol[type=\"I\"]", new CssDeclarationList { new(CssProperties.ListStyleType, "upper-roman") }), - new CssRuleSet("ol[type=\"i\"]", new CssDeclarationList { new(CssProperties.ListStyleType, "lower-roman") }), - new CssRuleSet("ol[type=\"1\"]", new CssDeclarationList { new(CssProperties.ListStyleType, "decimal") }), - new CssRuleSet("ul", new CssDeclarationList { new(CssProperties.ListStyleType, "disc") }), - new CssRuleSet("h1", new CssDeclarationList - { - new(CssProperties.FontWeight, "800"), - new(CssProperties.Color, _framework.GetCssVariableWithPrefix("prose-headings")), - }), - new CssRuleSet("h1 strong", new CssDeclarationList - { - new(CssProperties.FontWeight, "900"), - }), - new CssRuleSet("h2", new CssDeclarationList - { - new(CssProperties.FontWeight, "700"), - new(CssProperties.Color, _framework.GetCssVariableWithPrefix("prose-headings")), - }), - new CssRuleSet("h2 strong", new CssDeclarationList - { - new(CssProperties.FontWeight, "800"), - }), - new CssRuleSet("h3", new CssDeclarationList - { - new(CssProperties.FontWeight, "600"), - new(CssProperties.Color, _framework.GetCssVariableWithPrefix("prose-headings")), - }), - new CssRuleSet("h3 strong", new CssDeclarationList - { - new(CssProperties.FontWeight, "700"), - }), - new CssRuleSet("h4", new CssDeclarationList - { - new(CssProperties.FontWeight, "600"), - new(CssProperties.Color, _framework.GetCssVariableWithPrefix("prose-headings")), - }), - new CssRuleSet("h4 strong", new CssDeclarationList - { - new(CssProperties.FontWeight, "700"), - }), - }.ToImmutableList(), - }; + new( + "a", + new CssDeclarationList + { + new(CssProperties.Color, _framework.GetCssVariableWithPrefix("prose-links")), + new(CssProperties.TextDecoration, "underline"), + }), + new("pre", new CssDeclarationList() + { + new(CssProperties.Color, _framework.GetCssVariableWithPrefix("prose-pre-code")), + new(CssProperties.BackgroundColor, _framework.GetCssVariableWithPrefix("prose-pre-bg")), + new("overflow-x", "auto"), + new(CssProperties.FontWeight, "300"), + }), + new("pre code", new CssDeclarationList() + { + new(CssProperties.BackgroundColor, "transparent"), + new(CssProperties.BorderWidth, "0"), + new(CssProperties.BorderRadius, "0"), + new(CssProperties.Padding, "0"), + new(CssProperties.FontWeight, "inherit"), + new(CssProperties.Color, "inherit"), + new(CssProperties.FontSize, "inherit"), + new(CssProperties.FontFamily, "inherit"), + new(CssProperties.LineHeight, "inherit"), + }), + new("ol", new CssDeclarationList { new(CssProperties.ListStyleType, "decimal") }), + new( + "ol[type=\"A\"]", + new CssDeclarationList { new(CssProperties.ListStyleType, "upper-alpha") }), + new( + "ol[type=\"a\"]", + new CssDeclarationList { new(CssProperties.ListStyleType, "lower-alpha") }), + new( + "ol[type=\"I\"]", + new CssDeclarationList { new(CssProperties.ListStyleType, "upper-roman") }), + new( + "ol[type=\"i\"]", + new CssDeclarationList { new(CssProperties.ListStyleType, "lower-roman") }), + new( + "ol[type=\"1\"]", + new CssDeclarationList { new(CssProperties.ListStyleType, "decimal") }), + new( + "ul", new CssDeclarationList { new(CssProperties.ListStyleType, "disc") }), + new( + "h1", + new CssDeclarationList + { + new(CssProperties.FontWeight, "800"), + new(CssProperties.Color, _framework.GetCssVariableWithPrefix("prose-headings")), + }), + new( + "h1 strong", + new CssDeclarationList { new(CssProperties.FontWeight, "900"), }), + new( + "h2", + new CssDeclarationList + { + new(CssProperties.FontWeight, "700"), + new(CssProperties.Color, _framework.GetCssVariableWithPrefix("prose-headings")), + }), + new("h2 strong", new CssDeclarationList { new(CssProperties.FontWeight, "800"), }), + new( + "h3", + new CssDeclarationList + { + new(CssProperties.FontWeight, "600"), + new(CssProperties.Color, _framework.GetCssVariableWithPrefix("prose-headings")), + }), + new("h3 strong", new CssDeclarationList { new(CssProperties.FontWeight, "700"), }), + new( + "h4", + new CssDeclarationList + { + new(CssProperties.FontWeight, "600"), + new(CssProperties.Color, _framework.GetCssVariableWithPrefix("prose-headings")), + }), + new("h4 strong", new CssDeclarationList { new(CssProperties.FontWeight, "700"), }), + }, + }; + return defaultSettings; + } private ImmutableDictionary StandardSettings { @@ -199,28 +220,28 @@ private CssSettings DefaultSettings() => new() { "base", new CssSettings() { - Css = new CssDeclarationList - { - new(CssProperties.FontSize, Rem(16)), - new(CssProperties.LineHeight, Rounds(28 / 18m)), - }, - ChildRules = new CssRuleSet[] - { - new("p", new CssDeclarationList - { - new(CssProperties.MarginTop, Em(20, 16)), new(CssProperties.MarginBottom, Em(20, 16)), - }), - new("a", new CssDeclarationList + Css = + new CssDeclarationList { - new(CssProperties.Color, _framework.GetCssVariableWithPrefix("prose-links")), - }), - new("h1", new CssDeclarationList - { - new(CssProperties.FontSize, Em(36, 16)), - new(CssProperties.MarginTop, "0"), - new(CssProperties.MarginBottom, Em(32, 36)), - new(CssProperties.LineHeight, Rounds(40 / 36m)), - }), + new(CssProperties.FontSize, Rem(16)), new(CssProperties.LineHeight, Rounds(28 / 18m)), + }, + ChildRules = new CssRuleSetList() + { + new( + "p", + new CssDeclarationList + { + new(CssProperties.MarginTop, Em(20, 16)), + new(CssProperties.MarginBottom, Em(20, 16)), + }), + new( + "h1", new CssDeclarationList + { + new(CssProperties.FontSize, Em(36, 16)), + new(CssProperties.MarginTop, "0"), + new(CssProperties.MarginBottom, Em(32, 36)), + new(CssProperties.LineHeight, Rounds(40 / 36m)), + }), new("h2", new CssDeclarationList { new(CssProperties.FontSize, Em(24, 16)), @@ -235,12 +256,14 @@ private CssSettings DefaultSettings() => new() new(CssProperties.MarginBottom, Em(12, 20)), new(CssProperties.LineHeight, Rounds(32 / 20m)), }), - new("h4", new CssDeclarationList - { - new(CssProperties.MarginTop, Em(24, 16)), - new(CssProperties.MarginBottom, Em(8, 16)), - new(CssProperties.LineHeight, Rounds(24 / 16m)), - }), + new( + "h4", + new CssDeclarationList + { + new(CssProperties.MarginTop, Em(24, 16)), + new(CssProperties.MarginBottom, Em(8, 16)), + new(CssProperties.LineHeight, Rounds(24 / 16m)), + }), new("pre", new CssDeclarationList { new(CssProperties.FontSize, Em(14, 16)), @@ -252,21 +275,25 @@ private CssSettings DefaultSettings() => new() new(CssProperties.PaddingLeft, Em(16, 14)), new(CssProperties.PaddingRight, Em(16, 14)), }), - new("ol", new CssDeclarationList - { - new(CssProperties.MarginTop, Em(20, 16)), - new(CssProperties.MarginBottom, Em(20, 16)), - new(CssProperties.PaddingLeft, Em(20, 16)), - }), - new("ul", new CssDeclarationList - { - new(CssProperties.MarginTop, Em(20, 16)), - new(CssProperties.MarginBottom, Em(20, 16)), - new(CssProperties.PaddingLeft, Em(20, 16)), - }), + new( + "ol", + new CssDeclarationList + { + new(CssProperties.MarginTop, Em(20, 16)), + new(CssProperties.MarginBottom, Em(20, 16)), + new(CssProperties.PaddingLeft, Em(20, 16)), + }), + new( + "ul", + new CssDeclarationList + { + new(CssProperties.MarginTop, Em(20, 16)), + new(CssProperties.MarginBottom, Em(20, 16)), + new(CssProperties.PaddingLeft, Em(20, 16)), + }), new("ol > li", new CssDeclarationList { new(CssProperties.PaddingLeft, Em(6, 16)) }), new("ul > li", new CssDeclarationList { new(CssProperties.PaddingLeft, Em(6, 16)) }), - }.ToImmutableList(), + }, } }, { @@ -274,22 +301,34 @@ private CssSettings DefaultSettings() => new() { Css = new CssDeclarationList { - new(_framework.GetVariableNameWithPrefix("prose-body"), _framework.GetCssVariableWithPrefix("prose-invert-body")), - new(_framework.GetVariableNameWithPrefix("prose-links"), _framework.GetCssVariableWithPrefix("prose-invert-links")), - new(_framework.GetVariableNameWithPrefix("prose-headings"), _framework.GetCssVariableWithPrefix("prose-invert-headings")), - new(_framework.GetVariableNameWithPrefix("prose-code"), _framework.GetCssVariableWithPrefix("prose-invert-code")), - new(_framework.GetVariableNameWithPrefix("prose-pre-code"), _framework.GetCssVariableWithPrefix("prose-invert-pre-code")), - new(_framework.GetVariableNameWithPrefix("prose-pre-bg"), _framework.GetCssVariableWithPrefix("prose-invert-pre-bg")), + new( + _framework.GetVariableNameWithPrefix("prose-body"), + _framework.GetCssVariableWithPrefix("prose-invert-body")), + new( + _framework.GetVariableNameWithPrefix("prose-links"), + _framework.GetCssVariableWithPrefix("prose-invert-links")), + new( + _framework.GetVariableNameWithPrefix("prose-headings"), + _framework.GetCssVariableWithPrefix("prose-invert-headings")), + new( + _framework.GetVariableNameWithPrefix("prose-code"), + _framework.GetCssVariableWithPrefix("prose-invert-code")), + new( + _framework.GetVariableNameWithPrefix("prose-pre-code"), + _framework.GetCssVariableWithPrefix("prose-invert-pre-code")), + new( + _framework.GetVariableNameWithPrefix("prose-pre-bg"), + _framework.GetCssVariableWithPrefix("prose-invert-pre-bg")), }, } }, { - "sm", new CssSettings + "sm", + new CssSettings { Css = new CssDeclarationList { - new(CssProperties.FontSize, Rem(14)), - new(CssProperties.LineHeight, Rounds(24 / 14m)), + new(CssProperties.FontSize, Rem(14)), new(CssProperties.LineHeight, Rounds(24 / 14m)), }, } }, @@ -302,17 +341,33 @@ private CssSettings DefaultSettings() => new() { Css = new CssDeclarationList { - new(_framework.GetVariableNameWithPrefix("prose-body"), _designSystem.Colors[scale][ColorLevels._700].AsRgb()), - new(_framework.GetVariableNameWithPrefix("prose-headings"), _designSystem.Colors[scale][ColorLevels._900].AsRgb()), - new(_framework.GetVariableNameWithPrefix("prose-links"), _designSystem.Colors[scale][ColorLevels._900].AsRgb()), - new(_framework.GetVariableNameWithPrefix("prose-code"), _designSystem.Colors[scale][ColorLevels._900].AsRgb()), - new(_framework.GetVariableNameWithPrefix("prose-pre-code"), _designSystem.Colors[scale][ColorLevels._200].AsRgb()), - new(_framework.GetVariableNameWithPrefix("prose-pre-bg"), _designSystem.Colors[scale][ColorLevels._800].AsRgb()), - new(_framework.GetVariableNameWithPrefix("prose-invert-body"), _designSystem.Colors[scale][ColorLevels._300].AsRgb()), + new( + _framework.GetVariableNameWithPrefix("prose-body"), + _designSystem.Colors[scale][ColorLevels._700].AsRgb()), + new( + _framework.GetVariableNameWithPrefix("prose-headings"), + _designSystem.Colors[scale][ColorLevels._900].AsRgb()), + new( + _framework.GetVariableNameWithPrefix("prose-links"), + _designSystem.Colors[scale][ColorLevels._900].AsRgb()), + new( + _framework.GetVariableNameWithPrefix("prose-code"), + _designSystem.Colors[scale][ColorLevels._900].AsRgb()), + new( + _framework.GetVariableNameWithPrefix("prose-pre-code"), + _designSystem.Colors[scale][ColorLevels._200].AsRgb()), + new( + _framework.GetVariableNameWithPrefix("prose-pre-bg"), + _designSystem.Colors[scale][ColorLevels._800].AsRgb()), + new( + _framework.GetVariableNameWithPrefix("prose-invert-body"), + _designSystem.Colors[scale][ColorLevels._300].AsRgb()), new(_framework.GetVariableNameWithPrefix("prose-invert-headings"), "white"), new(_framework.GetVariableNameWithPrefix("prose-invert-links"), "white"), new(_framework.GetVariableNameWithPrefix("prose-invert-code"), "white"), - new(_framework.GetVariableNameWithPrefix("prose-invert-pre-code"), _designSystem.Colors[scale][ColorLevels._300].AsRgb()), + new( + _framework.GetVariableNameWithPrefix("prose-invert-pre-code"), + _designSystem.Colors[scale][ColorLevels._300].AsRgb()), new(_framework.GetVariableNameWithPrefix("prose-invert-pre-bg"), "rgb(0 0 0 / 50%)"), }, } diff --git a/test/MonorailCss.Tests/DesignSystem/CssSettingsTests.cs b/test/MonorailCss.Tests/DesignSystem/CssSettingsTests.cs new file mode 100644 index 0000000..84441d3 --- /dev/null +++ b/test/MonorailCss.Tests/DesignSystem/CssSettingsTests.cs @@ -0,0 +1,39 @@ +using System.Collections.Immutable; +using MonorailCss.Css; +using MonorailCss.Plugins; +using Shouldly; + +namespace MonorailCss.Tests.DesignSystem; + +public class CssSettingsTests +{ + [Fact] + public void Can_combine() + { + var setting1 = new CssSettings() + { + Css = new CssDeclarationList() { new(CssProperties.BorderWidth, "1"), new(CssProperties.Float, "left"), }, + ChildRules = new CssRuleSetList() + { + new("a", + new CssDeclarationList() { new(CssProperties.Height, "4px"), new(CssProperties.Width, "2px") }) + } + }; + + var setting2 = new CssSettings() + { + Css = new CssDeclarationList() + { + new(CssProperties.BorderWidth, "4"), new(CssProperties.Display, "block"), + }, + ChildRules = new CssRuleSetList() + { + new("a", + new CssDeclarationList() { new(CssProperties.Height, "2px"), new(CssProperties.Margin, "2px") }) + } + }; + + var newSettings = setting1 + setting2; + newSettings.Css.Count.ShouldBe(3); + } +} \ No newline at end of file diff --git a/test/MonorailCss.Tests/FrameworkTests.cs b/test/MonorailCss.Tests/FrameworkTests.cs index 7006648..aa346be 100644 --- a/test/MonorailCss.Tests/FrameworkTests.cs +++ b/test/MonorailCss.Tests/FrameworkTests.cs @@ -13,34 +13,35 @@ public void Smoke_Test() r.ShouldBeCss(@" .bg-blue-100 { --monorail-bg-opacity:1; - background-color:rgb(219 234 254 / var(--monorail-bg-opacity)); + background-color:rgba(219, 234, 254, var(--monorail-bg-opacity)); } .dark .dark\:bg-blue-50 { --monorail-bg-opacity:1; - background-color:rgb(239 246 255 / var(--monorail-bg-opacity)); + background-color:rgba(239, 246, 255, var(--monorail-bg-opacity)); } .hover\:bg-blue-200:hover { --monorail-bg-opacity:1; - background-color:rgb(191 219 254 / var(--monorail-bg-opacity)); + background-color:rgba(191, 219, 254, var(--monorail-bg-opacity)); } .prose h1 .prose-h1\:bg-blue-200 { --monorail-bg-opacity:1; - background-color:rgb(191 219 254 / var(--monorail-bg-opacity)); + background-color:rgba(191, 219, 254, var(--monorail-bg-opacity)); } @media (min-width:640px) { - .hover\:sm\:bg-blue-300:hover { + .dark .dark\:sm\:bg-blue-500 { --monorail-bg-opacity:1; - background-color:rgb(147 197 253 / var(--monorail-bg-opacity)); + background-color:rgba(59, 130, 246, var(--monorail-bg-opacity)); } - .sm\:bg-blue-400 { + .hover\:sm\:bg-blue-300:hover { --monorail-bg-opacity:1; - background-color:rgb(96 165 250 / var(--monorail-bg-opacity)); + background-color:rgba(147, 197, 253, var(--monorail-bg-opacity)); } - .dark .dark\:sm\:bg-blue-500 { + .sm\:bg-blue-400 { --monorail-bg-opacity:1; - background-color:rgb(59 130 246 / var(--monorail-bg-opacity)); + background-color:rgba(96, 165, 250, var(--monorail-bg-opacity)); } } + "); } diff --git a/test/MonorailCss.Tests/Plugins/ProseTests.cs b/test/MonorailCss.Tests/Plugins/ProseTests.cs index 6085ee4..fb351d8 100644 --- a/test/MonorailCss.Tests/Plugins/ProseTests.cs +++ b/test/MonorailCss.Tests/Plugins/ProseTests.cs @@ -1,4 +1,7 @@ -using MonorailCss.Plugins; +using System.Collections.Immutable; +using MonorailCss.Css; +using MonorailCss.Plugins; +using MonorailCss.Plugins.Borders; using Shouldly; namespace MonorailCss.Tests.Plugins; @@ -8,9 +11,27 @@ public class ProseTests [Fact] public void Prose_works() { + var proseSettings = new Prose.Settings() + { + CustomSettings = designSystem => new Dictionary() + { + { "DEFAULT", new CssSettings() { ChildRules = new CssRuleSetList() + { + new("a", new CssDeclarationList() + { + new(CssProperties.FontWeight, "inherit"), + new(CssProperties.TextDecoration, "none"), + new(CssProperties.BorderBottomWidth, "1px"), + new(CssProperties.Color, designSystem.Colors[ColorNames.Blue][ColorLevels._500].AsRgb()) + }) + } } } + }.ToImmutableDictionary() + }; var framework = new CssFramework(MonorailCss.DesignSystem.Default) - .WithCssReset(string.Empty); - var cssSheet = framework.Process(new[] { "prose", "prose-sm" }); + .WithCssReset(string.Empty) + .WithSettings(proseSettings); + var cssSheet = framework.Process(new[] { "prose" }); + cssSheet.ShouldContainElementWithCssProperty(".prose a", CssProperties.Color, "rgba(59, 130, 246, 1)"); } [Fact] diff --git a/test/MonorailCss.Tests/Plugins/ShouldlyExtensions.cs b/test/MonorailCss.Tests/Plugins/ShouldlyExtensions.cs index d0d7581..6289f56 100644 --- a/test/MonorailCss.Tests/Plugins/ShouldlyExtensions.cs +++ b/test/MonorailCss.Tests/Plugins/ShouldlyExtensions.cs @@ -8,6 +8,20 @@ namespace MonorailCss.Tests.Plugins; [ShouldlyMethods] public static class ShouldlyExtensions { + public static void ShouldContainElementWithCssProperty(this string value, string element, string property, + string propertyValue) + { + var parser = new CssParser(); + var styleSheet = parser.ParseStyleSheet(value); + styleSheet.Rules.OfType().ShouldContain(i => i.SelectorText.Equals(element)); + styleSheet.Rules.OfType() + .First(i => i.SelectorText == element) + .Style.ShouldSatisfyAllConditions( + i => i.ShouldContain(prop => prop.Name == property), + i => i.ShouldContain(prop => prop.Name == property && prop.Value == propertyValue) + ); + } + public static void ShouldBeCss(this string value,[LanguageInjection(InjectedLanguage.CSS)] string expected) { var parser = new CssParser();