History of Modifications.
Follow the evolution of Marssel: new features, optimizations and bug fixes.
📝 Changelog for Marssel
This document lists notable changes, fixes and new features introduced in the marssel-npm library.
🐛Bug Fixes
-
managers/IconManager.js— Fix persistent icon bug on Firefox:- Changed
createIconStyles()to no longer cache an emptySetif the manifest is not yet loaded (isLoaded: false). This allows the system to retry generating the icon once data is received instead of getting stuck on a cached failure. - Removed the "Icons manifest not loaded yet" nuisance log during high-speed pre-rendering attempts.
- Changed
-
core/Marssel.js— Securing the initialization sequence:- Redesigned the
init()method to guarantee a strict order of execution: Waiting forDOMContentLoaded➔ Complete loading of manifests (Promise.all) ➔ Initialization of styles ➔ Parsing the DOM. - Moved
preprocessAllCompactClasses()after resolving resource promises to eliminate any race conditions between parsing HTML classes and arriving at icon JSON.
- Redesigned the
📚 Documentation
- README: Modification of the README file.
🐛Bug Fixes
-
managers/IconManager.js— Fixed the warning "Icons manifest not loaded yet": Added ainitPromisein the constructor and a guard ininit()to avoid double calls and ensure thatgetIconContent()is never invoked before the manifest has finished loading. -
core/Marssel.js— MovingsetupObservers()after full initialization: TheMutationObserverwas started too early, before the icon manifest was loaded. It is now run in thesetTimeoutalongside other handlers, eliminating premature calls togetIconContent().
🐛Bug Fixes
managers/ModalManager.js— Removed the warning "Modal overlay element not found": Theconsole.warnemitted when initializing theModalManageron pages not containing a#modal-overlayelement has been removed. As this behavior is expected on certain pages, the absence of the overlay is no longer considered an anomaly and the manager stops silently.
📚 Documentation
- README: Modification of the README file.
📚 Documentation
- README: Modification of the README file.
🔧 CI/CD
publish.yml: Changes to the GitHub Actions publishing workflow.
🔧 CI/CD
publish.yml: Creation of the workflow file.github/workflows/publish.ymlto automate publishing to npm.
🔧 CI/CD
- Test: GitHub push test to npmjs.
🔧 Configuration
package.json: Replaced the GitHub Packages registry (https://npm.pkg.github.com/) with the public npmjs registry (https://registry.npmjs.org/) with public access.
🚀 First public version
- Official publication on npm under
@marssel-vb/marssel
🐛Bug Fixes
core/Marssel.js— Fix FOUC on header and footer: Fixed a visual display bug (Flash of Unstyled Content) where theheaderand thefooterappeared briefly without styles when loading the page. The problem was thatprocessCriticalElementsFirst()calledupdateStyles()(asynchronous viarequestAnimationFrame), which delayed the injection of critical styles into the DOM. The method is now replaced byupdateStylesSync()to ensure immediate and synchronous injection of critical element styles beforemarssel-readyis applied on thebody.core/Marssel.js— Guarantee ready styles before revealing the body: Added a call toupdateStylesSync()just before the doublerequestAnimationFramewhich adds themarssel-readyclass. This ensures that all critical styles are present in the stylesheet by the time the body becomes visible, eliminating any residual visual flash.
📚 Documentation
- Installation Guide: Added the recommended CSS block to prevent FOUC specifically on the
headerand thefootervia thebody:not(.marssel-ready) header / footerrules.
🐛Bug Fixes
helpers.js: Fixed escaping the slash character (/) in theescapeValuefunction. The/is now correctly escaped to\/only in the bracketed value, without affecting the rest of the CSS selector. This allows the use of classes such asgrid-column-[1/-1]without breaking other styles.parsed.js: The/character is also allowed innormalizeClassNameso that the class is not filtered before reaching the parser.
🐛Bug Fixes
parsed.js: Fixed filtering of slash character (/) innormalizeClassNamefunction. The/character is now included in the list of allowed characters, allowing the correct use of classes such asgrid-column-[1/-1].
🐛Bug Fixes
- ToastManager: Fixed the toast overlapping bug when several notifications are displayed simultaneously at the same position. The toasts now stack vertically one under the other thanks to a system of flex groups by position.
✨ New Features
- ToastManager: Introduction of position groups (
marssel-toast-group). Each position (top-right,bottom-left, etc.) now has a dedicated flex subcontainer that automatically manages toast stacking and removes itself from the DOM when empty. - ToastStyles: Added
POSITION_GROUP_STYLESstyles for the flex container by position.bottom-*positions useflex-direction: column-reverseso that new toasts always appear on the correct side.
🔨 Optimization and Internal Improvements
- Marssel.js: Added loading of the styles cache on startup via
styleManager.styleCache?.load(), allowing cachedselectorDeclarationsto be restored between navigations. - Marssel.js: Centralization and clarification of the order of initialization of managers (
headerManager,dropdownManager,toastManager,domManager) and addition of the doublerequestAnimationFramefor the application of themarssel-readyclass on thebody. - General cleanup: Removed unnecessary comments in source files to lighten the code.
🐛Bug Fixes
- Readme.md: Improved file.
🔄 Version management
Marssel uses a centralized version system. When updating the package version:
- Update the version in the package.json file.
- Update the utils/version.js file with the same version.
This ensures that cache invalidation works correctly during updates.
✨ New Features
- Manifest path configuration: Added the
pathsoption in the Marssel constructor allowing you to customize the manifest file paths for fonts and icons.const app = new Marssel({ paths: { fontsManifest: "/custom/fonts-manifest.json", iconsManifest: "/custom/icons-manifest.json", }, }); - Improved CLI generators: The
generate-fonts-manifest.mjsandgenerate-icons-manifest.mjsgenerators now support the--fonts,--icons,--manifestand--prettyoptions for full customization.
🔨 Optimization and Internal Improvements
- FontManager: Using paths configurable via
this.marssel.config.paths.fontsManifestinstead of the hardcoded path. - IconManager: Using paths configurable via
this.marssel.config.paths.iconsManifestinstead of hardcoded path. - Backward compatibility: The default paths (
/js/fonts-manifest.jsonand/js/icons-manifest.json) are preserved if thepathsoption is not provided.
📚 Documentation
- Installation Guide: Added complete documentation on generating manifests with npm commands.
- Configuration Guide: New section explaining the use of the
pathsoption. - Section icons: Updated with the correct commands from the npm package.
🐛Bug Fixes
- Added new icons: Added the
share-networkicon. - StyleManager: Added order of breakpoints
xxl>xl>lg>mdetc... - Readme.md: Improved file.
✨ New Features
- Cache system: Persistent cache manager for Marssel styles allows generated styles to be preserved between page navigations.
🐛Bug Fixes
- Added new icons: Added the
gaugeicon. - Deleting icons: Deleting the following icons:
chevron-down,chevron-left,chevron-right,chevron-up,chevron-double-down,chevron-double-up,chevron-double-left,chevron-double-up,ear-fill,inbox,map,pin,zap. - FontManager: Use of
()to enter the font-weight of the font such asfont-[Sora(700)]. - helpers.js: Improved
addHasToHexandcleanValue.
✨ New Features
- Improved handling of critical elements: Added automatic detection of elements with the
.no-lazyclass as critical elements, ensuring their immediate processing even outside the viewport. - Recursive processing of critical children: Child elements of
.no-lazycontainers are now processed recursively to ensure complete and immediate rendering.
🐛Bug Fixes
- Fixed lazy loading on the sidebar: Fixed a critical bug where mobile sidebars and accordions were not displayed correctly when reloading the page at the bottom of the scroll. Critical elements with
.no-lazyand their children are now always processed immediately. - Improved detection of critical elements: The
getCriticalElements()method now automatically includes all elements with the class.no-lazyin the list of critical elements. - Optimization of parent-child processing: Child elements now inherit the critical status of their parent
.no-lazy, avoiding issues with unapplied styles in critical containers.
🔧 Technical Improvements
- Optimized
processElement()method: Added a recursive parent check to detect the.no-lazyclass and force immediate processing of style classes. - Improved
processCriticalElements()method: Recursive processing of all children of critical elements to ensure consistent and complete rendering.
✨ New Features
- New Icons: Added a new series of Marssel icons.
🐛Bug Fixes
- Improved svgs generation: Added the
--onlynewparameter which allows only new icons to be added to default.icons.mjs.
🐛Bug Fixes
- Generation of basic icons: Creation of a generator allowing you to create a base of icons in a json file by retrieving icons from phosphor.
- Fix
Helpers: The slash character (/) is now correctly escaped in CSS class names generated from style values, allowing the use of classes such asgrid-column-[1/-1]. - Fix
DomManager: The period character (.) is now correctly escaped in generated CSS selectors (e.g. for classes with decimals), preventing selector breaks.
✨ New Features
- New Manager:
OffcanvasManager: Integration of the manager for managing offcanvas panels.
🐛Bug Fixes
- Miscellaneous fixes: Multiple fixes on existing managers.
🐛Bug Fixes
- Responsive prefixes in
DomManager: Fixed a major bug inDomManagerthat prevented the use of classless responsive prefixes and being able to concatenate multiple classes, such as lg--[bg-[red]+c-[green]]. Added the ability to use pseudo-classes and !important. - Header
HeaderStyle: Removal of responsive menu and menu-close style.
✨ New Features
- New Icons: Added a new series of Marssel icons.
✨ New Features
- New Icons: Added a new series of Marssel icons.
✨ New Features
- New Icons: Added a new series of Marssel icons.
🐛Bug Fixes
- Pseudo-classes in
DomManager: Fixed a major bug inDomManagerthat prevented styles using pseudo-classes (like:hover,:focus,:active) from being correctly applied in certain scenarios. - Changelog: Preparation and complete restructuring of the
CHANGELOG.mdfile.
✨ New Features
- Icons: New set of icons added.
🐛Bug Fixes
- CSS variables: Fixed a bug in the use of
bg(background) variables. - Animations, Tabs & Toasts: Multiple bug fixes on the animation, Tabs, and Toasts managers for better stability.
cleanValue: Improved the function for better normalization of CSS values.
✨ New Features
- Marssel Icons & Critical CSS: Integration of a first set of Marssel icons and implementation of a system to recover critical CSS without lazy-loading (
no-lazy).
🐛Bug Fixes
- Components: Fix for
borders,dropdown,scrollspy,tooltipand fix application of pseudo-classes. - Critical Elements: Fix correct application of styles on critical elements (header, footer).
✨ New Features
- New Manager:
TabsManager: Integration of the manager for managing the interactive behavior of tabs. - New Manager:
AnimationManager: Added manager to control CSS animations programmatically.
🐛Bug Fixes
- Padding and Syntax: Correction of the application of paddings, the use of
[]brackets, and improvement of the internal syntax. !important: Stabilization of the management of the!importantflag.
🐛Bug Fixes
- Lazyload: Corrections in calling classes before and after
lazyload. - Columns: Fixed the
handleRegularColumnfunction.
🔨 Optimization and Internal Improvements
- Performance Cache: Introduction of
LRUCache(Least Recently Used Cache) in several managers (Dom, Style) to accelerate the parsing of classes and the generation of styles. - General: Optimization of the core of
marssel.jsand internal files.
🐛Bug Fixes
- Themes: Correction in the simplified call of theme colors.
- Managers: Fix on
dropdown styleanddomManager classname generate.
🐛Bug Fixes
- Pseudo-classes: Important fix on the generation of pseudo-class styles and the automatic generation of class names.
marssel-critical-css: Fix on the application of critical styles.
🧹 Maintenance and Configuration
- Package: Multiple fixes and updates to
package.json.
✨ New Features
!importantmanagement: Added support for the management of the!importantflag in the generation of styles.
🐛Bug Fixes
- Colors: Fix theme colors.
parseRGBA: Fixed the function.
✨ New Features
ThemeManager: Added and stabilized theThemeManagerfor dynamic management of theme variables.
🐛Bug Fixes
- FontManager: Fix empty manifest issues.
🔨 Optimization and Internal Improvements
- Code Base: Added a generic system for creating Marssel components.
🐛Bug Fixes
- Lazyload: Fixed
lazyloadwith anchors and scrolling. - DomManager & StyleManager: Fixes on the parent-child system and various
lazyloadbugs.
- Initializing the project Marssel-npm.
- Setting up basic Managers:
Carousel,DOM,Dropdown,Font,Header,Modal,Offcanvas,Popover,Scrollspy,Style,Toast, andTooltip.
📖 Versioning Convention
Marssel follows Semantic Versioning:
- MAJOR (X.0.0): Changes incompatible with previous versions
- MINOR (0.X.0): Added backwards compatible features
- PATCH (0.0.X): Backwards compatible bug fixes