Added

• RuleContainer will now contain all of the rules before handing them off to the renderer for the rendering step. This has been done to improve compatibility with Publish and to support concurrency for future improvements.

Improved

• StyleSheetRenderer is now a struct and will only be instantiated during the CSS generation step.
• Generator has been moved from Sparkle to SparkleTools

—

Created via Raycast

Added

• A new insert(_ rules:) method has been added to add multiple rules at once.

Fixed

• A crash that would occur when trying to insert rules by calling the insert(_ rule:) method multiple times, for example in a for loop.

—

Created via Raycast

Added

• The new protocol MeasurementValue is now available and groups all values representing measurements, such as pixels, ems and so on.
• The clamp function is now available and is represented by the Clamp type.
• The calc function is now available and is represented by the Calculation type.
• The operators +, -, * and / have been extended to the MeasurementValue types. Using one of these operators will create the corresponding Calculation.
• The LinearScale function is now available and allows scaling a value between a range of dimensions and viewport widths. This can be useful for linearly scaling the font size.
• The IdentifiedValue type is now available and allows values to be identified by a name. This significantly improves the readability of the CSS stylesheet by replacing values in the classes with identifiers.

Improved

• The modifiers that used Unit values now use a generic MeasurementValue. This allows modifiers to take in a measurement or a function such as clamp or calc.
• The Percentage type is now a MeasurementValue, allowing it to be used as a measurement for properties such as width.

Removed

• Unit has been removed in favour of the new types for the measurements that represent each measurement individually (EM, REM, Pixel, Viewport.Height, Viewport.Width, Zero, Auto).

—

Created via Raycast

Improved

• The Edge model now as a Set which convienently gives premade sets, such as all, horizontal and vertical
• Both the padding and margin modifiers have been improved to support the new Edge.Set
• The Edge and padding and margin modifier methods are now tested

—

Created via Raycast

Added

Thanks to colours and gradients, you can now make your website more colourful and stylish!

• New objects that represent colours have been added:
  • RGB to create colours with RGB components.
  • HSL to create colours with HSL components.
  • NamedColor: an enumeration of colours available in the CSS library.
  • Hex to create colours from their hexadecimal representation.
• As well as gradients:
  • Gradient.
  • LinearGradient.
• Helper modifiers to apply styles have been added:
  • backgroundStyle(_ style:) applies a colour or gradient as the element's background.
  • foregroundStyle(_ style:) applies a colour or gradient as the element's foreground. Using this modifier automatically clips the background to achieve text with gradients! 🎉
  • Declarations that set the background-color, background-image and color CSS properties.

Fixes

• An issue with the escaping of characters in CSS selector names.

Added

• New types that represent values for font-related properties:
  • Font.Family
  • Font.Stretch
  • Font.Style
  • Font.Variant
  • Font.Weight
  • Text.Alignment
  • Text.Decoration and Text.Decoration.Style
  • Text.Transform
• Support for local fonts with Font.Face.

Improvements

• Import has been renamed into Source.
• A new extension on Value to synthesize the conformance to the Renderable protocol for RawRepresentable types.

Removed

• The Declaration initializer that allowed an array of values has been removed since it's not always possible to predict how these values should be rendered in CSS. Instead, use a wrapper value type to represent values such as margins on all edges with different values (margin: 8px 4px 2px 12px;).
• Rules and declarations that allowed margins and padding to be set on different edges simultaneously.

Added

• A new Indentation type has been added to customise rendered CSS and HTML indentation.
• New HTMLRenderer and components renderer objects have been added to render HTML documents and components into strings.
• New CSS renderer objects have been added to render the single components of the stylesheets.

Improvements

• Rules are now sorted! The new sorting algorithm is based on selector priorities (universal selector *, element, identifier and then class) and their contents.
• The rendering of CSS Attributes has been moved to a new AttributeRenderer.

Added

• Support for the CSS @import rule, which allows importing stylesheets or resources, such as fonts, in stylesheets. You can add Import objects to the StyleSheetRenderer.

Improvements

• The Renderer class has been renamed to StyleSheetRenderer.

Added

• New CSS properties:
  • box-sizing
  • display
  • flex-direction
  • justify-content
  • align-content
  • align-items
  • padding
  • min-width
  • width
  • max-width
  • min-height
  • height
  • max-height
• New viewport Unit:
  • vw
  • vh

Improvements

• The Rule type now supports selectors, meaning that rules selecting identifiers, elements and all elements in a document can now be created.
• The Site type now provides a new method that allows configuration of the Renderer object, which allows additional rules to be inserted outside of the document. This is usually needed to create universal rules.

Fixes

• Fixed an issue with some classes that included the dot . character in their name. The rendering of Unit values that support floating point values now escapes any point contained in the rule's name.
• Fixed an issue where the attributes would not be applied to a component that wraps an AttributedComponent.

Added

• New HTML elements (a, article, aside, blockquote, body, div, footer, h1, h2, h3, h4, h5, h6, head, header, image, link, li, main, menu, meta, nav, ol, p, script, section, span, text, title, video).
• New attributes (defer, height, identifier, rel, src, width).