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 Process(IParsedClassNameSyntax syntax)
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 ImmutableDictionary StandardSettings
{
"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 ImmutableDictionary StandardSettings
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 ImmutableDictionary StandardSettings
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 ImmutableDictionary StandardSettings
{
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 ImmutableDictionary StandardSettings
{
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();