Skip to navigation Skip to navigation Skip to content

Releases

This page summarizes all Hydrogen releases, past, present, and future.

Upcoming features #

You can follow along with Hydrogen's development by visiting the project's public Github project that contains tabs for the next upcoming release, backlog content, and known bugs.

Found a bug or want to request a new feature? Head on over to Hydrogen's Github repository and submit a ticket. Once the ticket is triaged, it will be added to the proejct and you'll be able to follow along for updates.

Full release history #

Hydrogen releases generally follow the semantic versioning standard and fall into one of two channels:

  • Stable, production-ready releases
  • Experimental beta releases

Stable major releases

Major releases contain significant architectural restructuring and include breaking changes that require migration to continue using.

Stable minor releases

Minor releases include important new features and functionality that are always backwards compatible with existing releases.

Stable patch releases

Patch releases contain minor enhancements, optimizations, and bugfixes that are always backwards compatible with existing releases.

Experimental beta releases

Beta releases contain bleeding-edge features that might result in breaking changes, bugs, and/or methodologies that are subject to change. Use a beta release if you're interested in testing upcoming features or want to contribute towards Hydrogen's code.

Below is Hydrogen's documented release history, in chronological order. Releases are tagged based on the categories described above, and where a release contained breaking changes, a red tag has been included.

2.1.0 #

This minor release enhances the query configuration so that you can configure more than just media queries, adds a few quality of life features, fixes a few bugs, and updates the documentation site.

minor • Released: July 9, 2024 •⚠️ Warning

✨ New features (5) #
  • Allows for other @rule configurations in the media settings, which enables the use of container queries.
  • Exports the build and watch scripts from the module's main index file.
  • Hydrogen now returns its processed CSS as a string for use by other frameworks.
  • Allows you to control whether Hydrogen writes a CSS file.
  • Adds the ability to toggle Lightning CSS' error recovery to prevent it from exiting the build.
🛠️ Optimizations (2) #
  • Centralizes results logging to help make output more consistent.
  • Deprecates data-h2-container custom syntax in favor of the native CSS property; adds data-h2-wrapper as a replacement for the custom syntax.
🪲 Bugfixes (2) #
  • Warning: Addresses inconsistencies created by the random order of the cascade generated based on file-read order.
    • All properties are now written in alphabetical order, which forces shortcut properties (e.g. margin) to always be overridden by their specific variants (e.g. margin-right).
    • In practice, this means that if you apply a shortcut property and one or more of its variants to the same element, the specific variants will always take precedence.
    • This change is labelled with a warning because Hydrogen's output order is liable to change, meaning certain projects might experience a swap in the way overridden properties display.
  • Fixes a bug where the build would log as "succeeded" when warnings were output.
📚 Documentation (2) #
  • Reworks the homepage layout with a reduced header and updated copy.
  • Adds new information about incompatibilities between flex-grid and margin.

2.0.5 #

This release fixes a log bug and updates the error output when Lightning CSS fails for easier debugging.

patch • Released: March 14, 2024

🛠️ Optimizations (1) #
  • Enhances the error output when Lightning CSS fails so that it includes the line and column values for the CSS location in hydrogen.raw.css.
🪲 Bugfixes (1) #
  • Fixes a bug that prevented the generate_logs configuration from working, which also caused the compile to fail.
📚 Documentation (1) #
  • Removes outstanding references to Autoprefixer and CSSnano from the CONTRIBUTE.md file.

2.0.4 #

This release adds support for configurable font weight values and introduces a new default set based on the common language found on MDN. It also migrates Hydrogen away from PostCSS, Autoprefixer, and CSSnano in favor of Lightning CSS.

patch • Released: March 14, 2024

✨ New features (1) #
  • Adds support for configurable font weight values.
🛠️ Optimizations (1) #
  • Migrates away from CSSnano and Autoprefixer in favor of Lightning CSS, which has resulted in some serious speed gains (the documentation site dropped from ~500ms to ~180ms).
🪲 Bugfixes (2) #
  • Removes references to an old clean.js file that was causing errors for projects using Hydrogen through PNPM.
  • Fixes a bug where the :children selector wouldn't style pseudo elements due to the automatically added :not statement.

2.0.3 #

This release focuses primarily on improvements to the documentation website, including a new menu, search capabilities, and more. Alongside these updates, a minor bugfix was also included that addresses color keys being ignored in the shadow attribute.

patch • Released: September 30, 2023

🪲 Bugfixes (1) #
  • Fixes a bug where data-h2-shadow wasn't processing configured color values.
📚 Documentation (3) #
  • Reworks the menu on both desktop and mobile so that page content is nested inside of its relevant page and so that the menu opens to and highlights your current location for better navigation.
  • Adds a search bar to the documentation menu to help you quickly find specific pages or terms.
  • Adds a new glossary page for variable generated during Hydrogen's build that you can use in your CSS.

2.0.2 #

This release adds more granular control to line-height settings, reworks Hydrogen's internal testing framework, and fixes a handful of bugs. You'll also notice significant improvements to the documentation website, including code highlighting, a release RSS feed, and more.

patch • Released: June 26, 2023

✨ New features (1) #
  • Updates the typography configuration to accept line-height configurations for each level in the type scale.
🛠️ Optimizations (7) #
  • Migrates internal development testing away from custom JavaScript in favor of Jest.
  • Overhauls the lib directory structure for clearer build step identification and consistent structure.
  • Further updates and minimizes console output by replacing the "system" label with Hydrogen's version and appending timers to their relevant behaviours.
  • Restructures the releases directory for better organization and glob references.
  • Updates repo-specific documentation to better reflect the build process and addition of Jest testing.
  • Deprecates the term "copy" in favor of "body" when referring to paragraph-sized text.
  • Adds error codes for better toolchain integration.
🪲 Bugfixes (6) #
  • Fixes a bug where configured color values used inside of CSS gradient definitions were improperly replaced when two configured colors were used and one contained a color modifier.
    • For example: data-h2-background="base(linear-gradient(90deg, primary, primary.darkest))"
  • Fixes a bug where font sizes weren't always respected on iOS.
  • Fixes a bug where PostCSS would increase in run time during the watch command due to cached data not being purged.
  • Fixes a bug where the :hover selector wasn't properly wrapped in the (hover:hover) media query when used in the :children query modifier, resulting in an uneven experience on touch devices.
  • Fixes a bug where Hydrogen incorrectly identified the data-h2 wrapper attribute if it was referenced in CSS files.
  • Fixes a bug where Hydrogen reported a successful compile despite there being errors logged to the console.

2.0.1 #

This release contains a handful of minor quality of life changes, including reduced console output and better development console error logging.

patch • Released: February 27, 2023

✨ New features (1) #
  • Console output has been reduced even further when the verbose option is disabled.
🛠️ Optimizations (1) #
  • Adds an optional development environment variable H2DEBUG that can be used to force every function to log errors to the console.
    • This is primarily for development work and debugging on Hydrogen and not for use by end users.
🪲 Bugfixes (1) #
  • Fixes a bug that prevented CSS compilation if the unsupported fallback value was missing from gradient theme configurations.

2.0.0 #

This release reworks almost every single feature and option, enabling more reliable output, faster compile times, and loads of new features and options.

major • Released: February 1, 2023 •🚨 Breaking

✨ New features (9) #
  • Breaking: Hydrogen 2.0.0 represents a completely new approach to CSS that differs drastically from version 1.0.0.
    • Rather than compiling a Sass library and then selectively generating a CSS file for your project, Hydrogen now actively parses data-h2 attribute values using JavaScript and creates CSS on the fly.
    • This approach is significantly faster and more accurate than the previous approach and opens up a world of new possibilities that you can discover in the 2.0.0 documentation.
  • While version 1.0.0 supported over 25 different style properties, this release shatters that limitation by enabling support for every single CSS property out there.
    • Not only can you use any CSS property at your disposal, 2.0.0 supports the use of configured settings
  • 2.0.0 introduces new functionality that enables support for custom, automatically applied themes.
    • By adding the theme's key value to your site's data-h2 wrapper attribute, you can restyle your project in seconds.
    • This functionality also enables the ability to specify unique styles per-theme, meaning you can alter layouts, media, and more.
  • Alongside themes, 2.0.0 also adds support for configuring values that apply to dark mode automatically.
    • This feature also allows you to control how dark mode is applied; whether through media queries or a manual toggle.
    • Each theme you define has access to its own unique styles for light and dark modes, allowing you to customize them as much as you need.
  • 2.0.0 introduces new query-specific references that allow more granular control over the target of your styles.
    • The :selectors[] allows you to apply styles only if the element contains specific selectors (classes, ids, attributes).
    • The :children[] allows you to apply styles to children nested inside the current element, allowing you to bulk style similar elements.
  • A new vertical rhythm and typography system has been implemented that allows you to granularly control how typography appears on your project on a per-media query basis.
    • These typography settings now also directly impact and inform an automatically generated heading typography scale that accounts for default line height.
    • New whitespace multipliers have been added that allow you to apply multiples of your base line-height as units of space, creating unity and consistency between the interface and the typography.
  • Color configurations have been overhauled and improved through the addition of color modifiers.
    • Out of the box, for each of your color configurations, Hydrogen generates 6 alternate colors: light, lighter, lightest, dark, lighter, darkest.
    • Color opacity modifiers have also been improved and now support dynamic calculation, meaning they are no longer limited to fixed values.
    • Alongside default modifiers, you can now also define custom modifiers for your colors, allowing you to set unique values for specific contexts.
  • 2.0.0 introduces a handful of helpful validation steps to help catch unexpected errors in your code.
    • Hydrogen will now validate your configuration file before each run to ensure there aren't any syntax errors.
    • It will also validate each attribute's parsed CSS to try and catch invalid CSS syntax.
  • Hydrogen's CLI commands now accept a series of optional flags, allowing you to customize the output based on environment and build contexts.
🛠️ Optimizations (5) #
  • Hydrogen's documentation has been completely rebuilt from the ground up using 11ty.
  • CSS construction has been improved to leverage the use of CSS variables throughout, allowing for greater control and manipulation by both the system and the end user.
  • The system's code structure and documentation have been significantly improved and organized for better maintenance, debugging, and community contribution.
  • 2.0.0 updates and enhances Hydrogen's console output. Along with more helpful output, you'll find new formatting, configurable settings, detailed timers, and more.
  • Hydrogen now offers a new debugging tool that generates log files containing parsed data that can offer insight into where the tool might be failing.

2.0.0-beta.41 #

beta • Released: January 31, 2023 •🚨 Breaking

🛠️ Optimizations (2) #
  • Breaking: Removes the method setting from the dark mode configuration in favor of a more global mode.method setting. This will apply the same method to all future modes to help avoid potential conflicts between application methodologies.
  • Breaking: Updates the following settings' keys to help make the purpose of the setting more explicit:
    • modes.dark.auto_apply_styles > modes.dark.auto_apply_styles
    • modes.dark.auto_apply_styles_modifiers > modes.dark.swap_default_modifiers
    • processing.reset_styles > processing.include_reset_css
    • processing.var_export > processing.export_variable_file
    • processing.prefixing > processing.browser_prefix_css
    • processing.minification > processing.minify_css
    • logging.logs > logging.generate_logs
    • logging.timers > logging.show_timers
    • logging.verbose > logging.verbose_console_output
🪲 Bugfixes (3) #
  • Fixes a bug with configured properties that conflicted with values containing the configured key. Matches now look for preceding dash (-) and underscore (_) characters to account for this.
  • Fixes a bug where timers and console output called before settings had been parsed ignored CLI flags.
  • Fixes a bug with the init script that caused an error if the input or output directories were specified inside directories that didn't yet exist.

2.0.0-beta.40 #

beta • Released: January 26, 2023 •🚨 Breaking

✨ New features (1) #
  • Breaking: Enhances the functionality from the previous release by enabling the fixed use of any configured color in dark mode when the automatic setting is enabled.
    • This means that if you set black to automatically swap to white but need black explicitly in dark mode, you can simply define :dark(black).

2.0.0-beta.39 #

beta • Released: January 26, 2023 •🚨 Breaking

✨ New features (2) #
  • Breaking: Fixes the behaviour of modifiers requiring their opposite to be used in :dark mode if the automatic_modifiers setting is enabled.
    • For example. previously, you'd need to use :dark(primary.light) to access primary.dark but Hydrogen is now smart enough to process the color literally by swapping the opposite color in.
  • Updates the console output to display the current Hydrogen version being run.
🪲 Bugfixes (2) #
  • Breaking: Fixes a bug that occurred if you tried to use multiple transition values that was caused by transition being given compatibility support.It has been removed, which has caused a breaking change and requires transition attributes to be reformatted to match standard CSS syntax.
  • Fixes a bug with the setup script requiring the color module before it has been installed.

2.0.0-beta.38 #

beta • Released: January 12, 2023

✨ New features (1) #
  • Re-adds previous visibility functionality under a new custom property named visually-hidden.

2.0.0-beta.37 #

beta • Released: January 10, 2023

🪲 Bugfixes (1) #
  • Fixes a bug that was causing color opacity modifiers to break because of the way the value was being parsed as a number.

2.0.0-beta.36 #

beta • Released: January 10, 2023

🪲 Bugfixes (1) #
  • Fixes a bug where color key replacement in attribute parsing wasn't accounting for dash or underscore characters.

2.0.0-beta.35 #

beta • Released: January 8, 2023

✨ New features (1) #
  • Adds support and an accompanying setting to enable automatic swapping of automated color modifiers in dark mode. For example, if primary.dark is used in light mode, it will automatically swap to primary.light when dark mode is toggled.
🛠️ Optimizations (1) #
  • Default shadow values have been darkened in dark mode.
🪲 Bugfixes (4) #
  • Fixes CLI flags by allowing them to accept an empty value or 'true' to enable them.
  • Opacity modifiers now process single digit decimals as their x10 counterpart. For example, .3 will now be processed as .30.
  • Fixes a bug with space unit processing where the unit value was omitted, causing some properties to break.
  • Fixes a bug where flex-grid's gap property was being ignored.

2.0.0-beta.34 #

beta • Released: January 6, 2023 •🚨 Breaking

✨ New features (2) #
  • Breaking: Adds support for parsing configured colors (and their modifiers) as well as space multipliers inside of almost all standard CSS properties.
  • The snippets file has been updated with many common CSS properties for ease-of-use.
🛠️ Optimizations (5) #
  • Breaking: CSS properties and their syntax have been prioritized over Hydrogen's custom attributes, resulting in a handful of breaking changes that were necessary for future proofing the project.
  • Breaking: As a part of processing configured values, color modifiers now have to be appended to color keys as a suffix, rather than a prefix.
  • Scripts have been rewritten and broken apart for better maintenance, testing, and synchronous error reporting.
  • The property model has been updated to include new categories to better support existing CSS properties.
  • Repetitive data has been centralized and standardized to make maintenance and access much easier.
🪲 Bugfixes (5) #
  • Breaking: Hydrogen now presents a targeted error if it can't find your input or output directories, rather than providing unrelated error information,
  • Breaking: Offset was preventing the use of the true CSS offset value, so it has been removed in favor of location.
  • Breaking: Support for z-index has been migrated away from being an alias for layer in favor of true CSS z-index syntax, but this means that existing uses of z-index will no longer apply a position value.
  • Fixes an error that caused the watch script to retain error/warning counts accumulated from previous runs.
  • Fixed a bug where captions were being assigned the wrong variable, resulting in incorrect computed values.

2.0.0-beta.33 #

beta • Released: November 3, 2022

✨ New features (2) #
  • Enhanced the parser to accurately find query values located inside of backtick characters.
  • Adds a new verbose setting to control how much console output Hydrogen produces.
🪲 Bugfixes (1) #
  • Fixed a bug caused by the Glob package where it doesn't accept "\" characters, causing the build to fail on Windows.

2.0.0-beta.32 #

beta • Released: November 1, 2022

🛠️ Optimizations (1) #
  • Added new test functionality that supports running full Hydrogen builds and returning test results.
🪲 Bugfixes (1) #
  • Fixed a bug where attributes were ignored during file processing if there was whitespace between key/value pairs.

2.0.0-beta.31 #

beta • Released: October 31, 2022

✨ New features (1) #
  • Hydrogen will now check for configuration files until it reaches a dead end, allowing you to store your configuration multiple parent directories above the command.
🪲 Bugfixes (1) #
  • Fixed a bug where the process script was failing due to an invalid promise rejection.

2.0.0-beta.30 #

beta • Released: October 30, 2022 •🚨 Breaking

✨ New features (6) #
  • Breaking: Adds support for themes, each with their own default and dark mode settings.
  • Breaking: Provides new configuration options for automating dark mode, including the addition of a new :all mode modifier that will force a style to persist across modes.
  • Adds support for all CSS properties.
  • Adds support for the :selectors modifier.
  • Adds support for attribute selectors inside the :children modifier.
  • Hydrogen now returns a promise when a build completes/fails for easier integration with projects and build tools.
🛠️ Optimizations (7) #
  • Breaking: The configuration model has been overhauled to better categorize information and to add support for themes.
  • Breaking: Color variable exports have been reformatted to export as red, blue, and green values.
  • Rearranges and optimizes certain function calls so that they are called less frequently and perform faster.
  • Adds new error and system logging for better debugging.
  • Separates and defines important data models using JSDocs for better documentation and function typing.
  • Adds new contextual console information including the number of input files processed during a build.
  • Begins the addition of per-function unit tests for more reliable change monitoring and bug prevention.
🪲 Bugfixes (3) #
  • Breaking: Fixed a bug with opacity modifiers on colors, but caused a breaking change as a result that requires them to be written using the full percentage number (e.g. 10 for 10%).
  • Fixes a bug that caused the compiler to duplicate CSS (and therefore increase build time) during incremental watch runs.
  • Fixes a bug where none wasn't properly parsed by the max-height/width and min-height/width properties.

2.0.0-beta.29 #

beta • Released: September 20, 2022

🪲 Bugfixes (1) #
  • Fixes a bug where :state modifiers applied to children rather than the element they were applied to.

2.0.0-beta.28 #

beta • Released: September 20, 2022

✨ New features (3) #
  • The documentation website has been migrated into this repository so that the entire application is centralized.
  • Adds support for the fill property.
  • Adds a new font size for display style type that is calculated at a level above H1 in the type scale.
🛠️ Optimizations (2) #
  • The setup script has been reworked to include the documentation environment.
  • Logs passed to the console have been centralized and reworked for more flexibility.
🪲 Bugfixes (2) #
  • Hydrogen now executes based on the location of the configuration, rather than where you've run its command.
  • Fixes a bug with transform where decimals in multipliers weren't processed properly.

2.0.0-beta.27 #

beta • Released: September 8, 2022 •🚨 Breaking

✨ New features (6) #
  • Adds support for CSS validation during CSS construction. This allows Hydrogen to warn you against invalid CSS before it gets processed, preventing errors and providing opportunities to fix otherwise hidden problems.
  • Updates the development setup script and adds new refresh and testing scripts.
  • Adds support for unique command flags that provide command line level control over certain build settings.
    • --config='' allows you to pass a directory containing a hydrogen.config.json file.
    • --quiet, --quiet=false allows you to enable/disable timer output in the console.
    • --validate, --validate==false allows you to enable/disable CSS validation.
    • --prefix, --prefix=false allows you to enable/disable Autoprefixer.
    • --logs, --logs=false allows you to enable/disable Hydrogen's log output.
    • --minify, --minify=false allows you to enable/disable CSSnano.
  • Adds support for the transform property, including parsing of whitespace multipliers contained within the CSS declaration.
  • Adds support for the line-height property, along with its alias, leading.
  • Adds support for a new fraction-based column syntax for flex-item elements inside of a flex-grid.
    • The new syntax looks like this: data-h2-flex-item='base(1/2)'
🛠️ Optimizations (11) #
  • Breaking: Overhauls the configuration data model for better categorization and to increase ease of validation for optional items.
    • Adds new configuration options inside of the new build object.
    • base_query_key allows you to optionally set a custom key for the base media query, which has been removed from the media configuration.
    • validation allows you to enable/disable the new CSS validation feature.
    • minification allows you to enable/disable CSSnano.
    • prefixing allows you to enable/disable Autoprefixer.
    • quiet allows you to enable/disable timer output in the console.
  • Breaking: Reworks gap so that it better aligns with other syntax choices around columns/rows/axes. Passing 1 option now sets a gap value on both, while 2 options applies to column and row respectively.
  • Breaking: Reworks overflow so that it better aligns with other syntax choices around columns/rows/axes. Passing 1 option now sets an overflow value on both axes, while 2 options applies to x and y respectively.
  • Breaking: Simplifies the flex-grid syntax even further to accept 2 (alignment, gutter) or 3 (alignment, column_gutter, row_gutter) values.
  • Completely rewrites the query parsing script for cleaner and more reliable output, particularly when it comes to complex brackets nested inside of modifiers.
    • This also removed the parser's dependency on spaces as a delimiter for queries.
  • Adds z-index as an alias for layer.
  • Error reporting has been reworked to provide clearer headings and more detailed information, including things like invalid settings and the build step in which the error occurred.
  • Completely overhauls settings validation and validation output.
  • Completely overhauls internal testing and provides a more robust testing framework for catching bugs faster and more consistently.
  • Overhauls the property data model to be more concise and easier to manipulate.
  • Consolidated scripting for basic and size-only properties to make bugs less likely and code easier to maintain.
🪲 Bugfixes (5) #
  • Fixes a bug where CSS colors using a . character were inadvertently resulting in an error.
  • Fixes a bug where queries that weren't separated by a space were parsed as a single query, resulting in an error.
  • Fixes a bug where non-unit values passed to the container attribute would result in a string inside of a calc function.
  • Fixes a bug where visibility was setting overflow to auto rather than visible, causing unexpected scroll bars.
  • Fixes incorrect timer reporting for the PostCSS processing step (prefixing and minification).

2.0.0-beta.26 #

beta • Released: September 8, 2022

🪲 Bugfixes (1) #
  • Blank version due to an incorrect NPM publish.

2.0.0-beta.25 #

beta • Released: August 22, 2022

✨ New features (2) #
  • Adds a new :id[] modifier that allows you to target the element only if a target ID been applied to it.
    • Like classes and children, IDs are specified inside square brackets.
  • Adds a snippet for single queries with options.
🛠️ Optimizations (1) #
  • Updates snippets to be more concise now that there are many modifier types.
🪲 Bugfixes (2) #
  • Fixes a bug that was preventing the use of pseudo selectors in the children modifier.
  • Prevents the use of 'id', 'class', and 'children' as media query keys during validation.

2.0.0-beta.24 #

beta • Released: August 22, 2022

✨ New features (5) #
  • Adds a new :class[] modifier that allows you to target the element only if a class or classes have been applied to it.
    • Classes are specified inside square brackets as a comma separated list and without a '.'
    • This is particularly useful when styles need to change based on state - you can apply a class when the state changes and the styles will activate.
  • Adds a new :children[] modifier that allows you to target an elements children with styles.
    • Children can be targeted using any valid CSS selector, including tags, classes, ids, and data attributes.
    • This is helpful for bulk styling child elements and reduces a significant amount of markup bloat.
    • The :children[] modifier can be overwritten by applying the same property to a child in the event you need a single (or multiple) children to deviate from the standard.
  • The CSS variable file's contents is now included in hydrogen.css so that you no longer have to load a separate file.
    • The option to generate a file still remains, but half the variables were being loaded by hydrogen.css already and it made more sense to avoid duplication of variables when loading both files by eliminating the need to load the variable file entirely if you were already loading Hydrogen.
  • Adds the ability to store your configuration file in the parent directory of the Node process to help support NPM workspaces.
  • Adds a new feedback link to the info object in the configuration file.
🛠️ Optimizations (2) #
  • Optimizes the way certain properties override each other so that they only affect CSS values that they are intended to change.
  • Adds a new development README file in the lib directory that outlines the basic build flow.
🪲 Bugfixes (1) #
  • Fixes the broken settings link in the info object in the configuration file.

2.0.0-beta.23 #

beta • Released: August 4, 2022

✨ New features (1) #
  • Adds development scripts in the root package.json for quick test setup and compiling without the need to navigate to the tests folder.
🪲 Bugfixes (1) #
  • Updated the cssnano configuration to use the default preset with a series of exclusions, rather than the lite preset to ensure that duplicate rules are removed from Hydrogen's final output.

2.0.0-beta.22 #

beta • Released: July 19, 2022

✨ New features (7) #
  • Adds support for data-h2-flex-grow.
  • Adds support for data-h2-justify-items.
  • Adds support for data-h2-outline.
  • Reworks the way attributes are parsed by the system using a data model file that will help enforce consistency and access to more robust metadata over time.
  • Adds a new npx h2-clean script that will remove any log files Hydrogen has created.
  • Log files and the debug CSS file are now placed in the /hydrogen-logs directory, nested inside of a timestamp directory.
  • Radius now supports a 3 value syntax that matches its CSS counterpart.
🛠️ Optimizations (5) #
  • Updates Node and NPM version requirements.
  • Reworks property scripts and reorganizes them, along with better code documentation.
  • Adds basic VS Code extension recommendations, settings, and forces basic Prettier-specific styling.
  • Log files now include line breaks for legibility.
  • Changelog data is now organized by major and minor releases.
🪲 Bugfixes (2) #
  • Fixes a bug where options inside of an attribute that were missing a media query stopped the compiler completely.
  • Fixes a bug where key/value pair attributes weren't parsed if the value started on a new line.

2.0.0-beta.21 #

beta • Released: July 11, 2022

✨ New features (1) #
  • Adds state support for :focus-visible.
🛠️ Optimizations (1) #
  • Reorganizes the cascade order of states to better reflect expected control.

2.0.0-beta.20 #

beta • Released: July 10, 2022

✨ New features (2) #
  • Hydrogen will now properly error with instructions if you try to run it in a directory that doesn't contain a configuration file.
  • Adds a warning if Hydrogen can't find at least 1 instance of the data-h2 attribute in your code.

2.0.0-beta.19 #

beta • Released: July 7, 2022 •🚨 Breaking

✨ New features (3) #
  • Breaking: Reworks the color scale configuration into a custom modifier setting.
    • The modifier configuration no longer has to be set - tints and shades will automatically generate for you regardless, unless you choose to overwrite them using their key.
    • This also means you can create custom modifiers, as long as their key isn't set to the name of the color
    • This also breaks the current iteration of exported color variables, which have new name syntax.
  • Adds a third syntax for borders that allows a single 'none' value to be used to remove borders entirely.
  • Adds a new key option for position called 'center' that applies not only a CSS position, but a top, left, and transform value to mathematically center an object inside of a relative element.

2.0.0-beta.18 #

beta • Released: June 30, 2022 •🚨 Breaking

🛠️ Optimizations (1) #
  • Breaking: Migrates all config keys away from camelCase in favor of underscores for legibility and accessibility.
🪲 Bugfixes (1) #
  • Fixes a bug where automated dark color scale values were incorrect in the variable export file when compared to the actual Hydrogen output.

2.0.0-beta.17 #

beta • Released: June 28, 2022 •🚨 Breaking

🪲 Bugfixes (1) #
  • Breaking: Hydrogen now requires a data-h2 attribute to be present on a parent element for Hydrogen attributes to work.
    • Completely overhauls how dark mode works due to a severe specificity bug where light class elements would overwrite base elements inside of media queries.
    • If dark mode is set to toggle, you can apply 'dark' to the data-h2 attribute's value to toggle dark mode styles.,Dark mode now requires a config that specifies whether the user wants to use preference-based dark mode or toggle-based.,Toggle based now requires minor JavaScript to work properly, as you'll need to add and remove the dark value to the parent data-h2 element.,This also highlights the importance of the cascade in Hydrogen's output, and the documentation should reflect that merging media queries will break the output completely.

2.0.0-beta.16 #

beta • Released: June 27, 2022

🪲 Bugfixes (1) #
  • Fixes a bug introduced in beta.16 where the variable file was calculating rem values for the whitespace unit by default, causing calc functions to break.

2.0.0-beta.15 #

beta • Released: June 27, 2022 •🚨 Breaking

✨ New features (1) #
  • Adds support for a third container value that will apply padding to the left or right.
🛠️ Optimizations (3) #
  • Breaking: Removes support for the Sass variable export given that Sass supports CSS variables, making the output more uniform and consistent.
  • Updates the default values for media and typography to reflect the new syntax and validation.
  • Updates the whitespace parser to swap 0 to 0px for consistency across all attributes in the same way it swaps out 'none'.
🪲 Bugfixes (4) #
  • Breaking: Reworks media queries and requires that they do not contain repeating values at the end of their key.
    • This is the result of a complex bug that occurs due to the wildcard selector used with the data-attributes. The wildcard causes queries like xl(green) to trigger matching queries such as l(green).,There were two options discussed to solve this problem: moving away from the wildcard selector in favor of the more concrete ~ selector, or adding more robust validation to media queries to avoid repetition.,While moving to the ~ selector was preferred, it required that whitespace be stripped out of attribute values entirely; something that isn't possible due to whitespace requirements by certain CSS values.
  • Fixes a whitespace variable bug caused by the variable scripts not being updated to work with the new typography configuration.
  • Adds validation to prevent bad query values from causing an error.
  • Adds validation to prevent empty query matches from making it into the parser.

2.0.0-beta.14 #

beta • Released: June 22, 2022

✨ New features (1) #
  • Adds reset styles to buttons, inputs, select elements, and text areas.
🛠️ Optimizations (1) #
  • Migrates the watch script away from node-watch in favor of chokidar.
🪲 Bugfixes (3) #
  • Completely reworks all path references to take advantage of process.cwd() and Node's path module.
  • Fixes a bug where div elements were being assigned the base font size, making it difficult to overwrite.
  • Fixes a bug with overlay not assigning a relative position to the pseudo element's parent.

2.0.0-beta.13 #

beta • Released: June 17, 2022

🛠️ Optimizations (1) #
  • The process script has been reworked so that Autoprefixer is now run through CSSnano, and CSSnano's preset has been set to lite for improved speed.
    • This is also meant to prevent Hydrogen from being overly prescriptive about how its file is minimized, so by using lite, the changes are restricted to autoprefixing, removing empty selectors/queries, removing comments, and whitespace normalization.
🪲 Bugfixes (2) #
  • All query values are now checked for extra opening and closing parentheses to prevent unexpected PostCSS syntax errors.
  • CSS colors are now parsed for dot characters to prevent unexpected PostCSS syntax errors.

2.0.0-beta.12 #

beta • Released: June 15, 2022

🪲 Bugfixes (1) #
  • Introduces a temporary while loop to check for the existence of the raw CSS file before running PostCSS.
    • Forces the read of the raw CSS output to be synchronous to avoid it trying to process PostCSS on an empty file.

2.0.0-beta.11 #

beta • Released: June 15, 2022

🛠️ Optimizations (2) #
  • Adds a debug configuration option that generates a series of log files for Hydrogen's media array, attribute parsing, and value generation processes.
  • The configuration validation script now checks to see if color keys are reserved keywords or numbers that would conflict with opacity modifiers.
🪲 Bugfixes (2) #
  • Fixes a bug where Hydrogen's own files were being scraped and processed for attributes.
  • Fixes a bug where empty media queries (e.g. b()) would result in undefined CSS, breaking the parse script.

2.0.0-beta.10 #

beta • Released: June 12, 2022

✨ New features (4) #
  • Adds support for the cursor property.
  • Adds support for the list-style property.
  • Adds support for both grid-column and grid-row so that you can specify a grid item's placement and size.
  • Adds support for both min-height and min-width.

2.0.0-beta.9 #

beta • Released: June 12, 2022

✨ New features (1) #
  • The configuration validation script now prevents you from using reserved dark-mode or pseudo class words as media query keys.
🛠️ Optimizations (2) #
  • Reworked how media queries and their modifiers are parsed, away from REGEX towards a more consistent execution that relies on splitting the query at ':' characters and interpreting the values independently.
    • This opens the door for further query modifiers in the future, like custom configured themes.
  • Hover styles are now applied through the hover media query to prevent them from activating on devices that do not support hover effects.
🪲 Bugfixes (1) #
  • The cascade order was broken for pseudo-classes when an element with a dark modifier applied a light class.
    • This was the result of the light class coming after the hover declaration in the cascade, making it take priority.,To fix this, the media array was completely rewritten and restructured so that the output provided the expected behaviour of interactions like hover overwriting light mode styles.,The array now outputs in the following order: standard attributes, light class attributes, dark class attributes, standard pseudo class attributes, light class pseudo class attributes, dark class pseudo class attributes, preference-based dark attributes, and finally preference-based dark pseudo class attributes.

1.1.20 #

patch • Released: June 30, 2022

🪲 Bugfixes (1) #
  • Rolls back an accidental package publish of the 2.0.0 beta.

1.1.17 #

patch • Released: January 26, 2022

🪲 Bugfixes (1) #
  • Updates all instances of the project referring to itself to use path.resolve to ensure that the routing always works.

1.1.16 #

patch • Released: November 29, 2021

🪲 Bugfixes (1) #
  • Fixes a bug where the content value didn't reset the flex value.

1.1.15 #

patch • Released: November 29, 2021

✨ New features (2) #
  • Adds support for the text-transform utility, allowing users to customize text to be capitalized, lowercase, or uppercase.
  • Adds support for the auto and content values in the flex-item parameter. These values will allow flex grid items to grow to fill the remaining space or to assume the width of their contents respectively.

1.1.14 #

patch • Released: November 29, 2021

🪲 Bugfixes (1) #
  • Fixes a bug where Hydrogen wouldn't compile if the flex grid was disabled because it was still trying to process the order utility.

1.1.13 #

patch • Released: November 22, 2021

🪲 Bugfixes (3) #
  • Fixes a bug where the new utility generation script was appending defaults to the end of the configuration array, resulting in them being prioritized last.
  • Sets transition all for these properties rather than dedicated values because when used in concert, the last one would always take precendence.
  • Fixes a bug that broke the production build script if the flex grid was disabled.

1.1.12 #

patch • Released: November 15, 2021

🛠️ Optimizations (5) #
  • When checking the user's markup, rather than compiling all files into a single text file that is then scraped, the clean script now processes each file independently.
  • The clean script's scraping logic has been rewritten so that the CSS matching expression is now up to 40 times faster.
  • Basic utilities now share a centralized set of scripts, rather than each utility having its own.
  • Begins preliminary work on deprecating the folders configuration in favor of simplified, more consistent input and output configurations.
  • Adds a transition so that state changes now ease from one value to another.
🪲 Bugfixes (2) #
  • Duplicate keys for most configuration options are now handled by prioritizing the user's first definition using that key, including over legacy default values.
  • Position's sticky value now comes with a default top value of 0 so that it works without the need for another attribute; this value can be overidden by location.

1.1.11 #

patch • Released: October 29, 2021

🪲 Bugfixes (1) #
  • Switches to the synchronous version of fs.WriteFile to avoid failures when scripts execute slowly.

1.1.10 #

patch • Released: September 29, 2021

🪲 Bugfixes (1) #
  • Adds ignore values to the markup scraper so that Hydrogen doesn't scrape its own files, causing it to crash.

1.1.9 #

patch • Released: September 28, 2021

🪲 Bugfixes (1) #
  • Fixes a resulting bug from the previous version that caused the production version of the watch script to fail.

1.1.8 #

patch • Released: September 27, 2021

✨ New features (7) #
  • Adds a new configuration option for exporting your settings as Sass variables where possible; this means you can now import things like your whitespace scale into Sass files outside of Hydrogen.
  • Adds a default configuration in the color settings for transparent.
  • Adds the ability to use negative whitespace values in the margin attribute.
  • Adds the opacity attribute so that you can now control an element's opacity.
  • Adds support for the order attribute when flex grids are enabled, allowing you to control the order of your grid items.
  • Adds support for the overlay attribute, allowing you to add an overlay to an element.
  • Adds support for the layer attribute, allowing you to create layers and apply them to elements, along with positioning.
🛠️ Optimizations (6) #
  • Removes some legacy code and cleans up some dependencies in the script files.
  • Adds Prettier support.
  • Updates the default set of variables to be more thoughtful and use standardized nomenclature.
  • Renames the default theme colors to use agnostic language (e.g. purple => primary).
  • Overhauls color variants so that they can be overwritten with custom values or disabled entirely.
  • Renames the default radius keys to be more descriptive.

1.1.7 #

patch • Released: September 9, 2021

🪲 Bugfixes (1) #
  • Fixes a typo (a missing $) that completely broke the overflow attribute.

1.1.6 #

patch • Released: September 8, 2021

🛠️ Optimizations (1) #
  • Updates and fixes NPM warnings where possible, including to gulp-sass v5.0.0.
🪲 Bugfixes (1) #
  • An improperly set environment variable had broken the init script.

1.1.5 #

patch • Released: August 6, 2021

✨ New features (1) #
  • Enhances the clean script to accept key-value pairs when scanning markup and scripts.

1.1.4 #

patch • Released: August 6, 2021

🛠️ Optimizations (1) #
  • Updates the alpha Sass functions to use rgba over color.adjust, as it seems to have stopped working.

1.1.3 #

patch • Released: August 6, 2021

✨ New features (1) #
  • The clean script now warns the user if they try to use an opacity value that isn't defined in their configuration.
🛠️ Optimizations (1) #
  • Enhances color opacity so that the user can specify target opacities, rather than toggling the array on/off, offering more control and less bloat.

1.1.2 #

patch • Released: August 4, 2021

✨ New features (2) #
  • Adds a new watch script that will only rerun the build script if the user modifies the configuration file, otherwise it only performs the code match and CSS file construction.
  • The init script now copies the default settings file over to the user's project to ensure that future updates don't break their configuration.
🛠️ Optimizations (2) #
  • Enhances the clean script such that it now searches individually compiled utility files rather than the library in its entirety on each call, speeding things up.
  • Reworks the compile script to meet the newly optimized requirements and adds compression to help alleviate large file implications.

1.1.1 #

patch • Released: August 2, 2021

🛠️ Optimizations (1) #
  • The clean scripts now remove duplicate entries once the markup has been scraped to help reduce build time.
🪲 Bugfixes (1) #
  • Fixes an issue where the clean script wasn't properly accounting for CSS rules that required multiple selectors to work.

1.1.0 #

minor • Released: July 23, 2021 •🚨 Breaking

✨ New features (5) #
  • The init script now asks for a scripts folder alongside the markup folder because state management that happens in JavaScript needs to be considered when compiling the production files.
  • Adds support for the width attribute, allowing the user to configure custom width values.
  • Adds support for state management through the use of ":x" syntax, allowing for control over hover (:h), active (:a), focus (:f), and disabled (:d).
  • Adds support for normal and stretch prop values when defining a grid.
  • Adds support for the normal prop value.
🛠️ Optimizations (6) #
  • Breaking: Alters the configuration file to use the word key over name for syntax consistency with other tools.
  • The init script will now fail if the directories entered in the prompt do not yet exist.
  • Reworks a lot of the scripting into more centralized, reusable chunks.
  • Removes the need for a Gulpfile for internal development and migrates to node execution of Gulp scripts.
  • Ensures that that debug configuration properly applies to the compile script, as well as the build script.
  • Updates the use of "/" characters in Sass math functions to resolve deprecation warnings.

1.0.7 #

patch • Released: June 23, 2021

🛠️ Optimizations (1) #
  • Updates dependencies to fix security warnings; certain dependencies are blocked and waiting on patches.

1.0.6 #

patch • Released: April 26, 2021

🛠️ Optimizations (1) #
  • Enhances the init script so that the output it creates is more consistent.
🪲 Bugfixes (1) #
  • Fixes a color function bug that was causing the init script to fail.

1.0.5 #

patch • Released: April 25, 2021

🪲 Bugfixes (1) #
  • Fixes the display attribute not being properly escaped, causing quotations in the CSS.

1.0.4 #

patch • Released: April 25, 2021

✨ New features (1) #
  • Enhances the build scripts so that they provide helpful console output regarding processes as they run, the amount of time they take, and other descriptive messaging.

1.0.0 #

major • Released: April 25, 2021

✨ New features (3) #
  • Adds a basic README file.
  • Adds a handful of basic reset styles to ensure consistency.
  • Adds support for a whitespace configuration in the settings file.
🛠️ Optimizations (1) #
  • Updates the build scripts so that output is more standardized.
🪲 Bugfixes (1) #
  • Adds specificity to margin and padding so that they override reset styles.