There are no tracking or monitoring cookies on this site. There are only cookies used for documentation examples related to cookies.
Close

Processing...
This may take a few seconds.

Core Download

Downloading the core

There are three editions of the core. Production, development, and core development.

Use the production (prod) core live. Only fatal errors will show.

For offline development, use the dev edition offline. Both fatal and warning errors will show.

If you are working on enhancing the core, use the core dev edition. Use this only if you are hacking the Active CSS core.

Maximum backwards compatibility is intended for all future releases, to follow in the spirit of CSS, JavaScript and HTML. But sometimes it is necessary to change direction slightly. If that does happen, it's usually pretty quick and easy to update code. The basic flow is stable. Major versions tend to mark major milestones rather than breaking changes. Breaking changes can happen on any release, so be aware of that and always be sure to check on this page before upgrading.

Each new feature is tested before release, but please test your code after every upgrade before deploying live. Let us know if you find any errors on previously working code asap, and these will become priority fixes. Don't assume that we already know that a bug exists, because we may not have ran across your scenario, and by reporting it you may save the day.

Note: If you are upgrading from an old version, go up the line with the releases looking for "BREAKING CHANGE" to see if you need to fix anything in your config. Very few changes to the syntax should require more than a find and replace action to fix.

Version 2.15.0 "Valkyrie"

Release date: 12 November 2023

Production core: 57kB with gzip compression, 181kB minified
Development core: 60kB with gzip compression, 190kB minified

Download all script tag editions from:
https://github.com/Active-CSS/active-css/tree/master/dist/v-2-15-0

Click here for full installation instructions.

Changelog

  • NEW FEATURE: Command for the native dialog element modal.
  • NEW FEATURE: Add reload option to location command.
  • BUG FIX: Fix to fullscreen button not working on docs site.
  • BUG FIX: Fix to host target selector not working in shadow DOM.
  • BUG FIX: Fix to error with checking for escaped single quote in JS expression.
  • BUG FIX: Fix to error with evaluating var containing double quote inside a string.
  • BUG FIX: Fix to // not being recognised if in quotes.
  • BUG FIX: Fix to "o" event details object not being available in conditional statements.
npm editions

Production core: https://www.npmjs.com/package/active-css/v/2.15.0
Development core: https://www.npmjs.com/package/active-css-dev/v/2.15.0
"If you are working on the core" core: https://www.npmjs.com/package/active-css-core-dev/v/2.15.0


Version 2.14.0 "Ellie"

Release date: 24 September 2023

Production core: 57kB with gzip compression, 180kB minified
Development core: 60kB with gzip compression, 188kB minified

Download all script tag editions from:
https://github.com/Active-CSS/active-css/tree/master/dist/v-2-14-0

Changelog

  • NEW FEATURE: New scope() option added to @component for turning pre-rendered HTML into private components following the scoping rules. Nested components follow the hierarchy rules.
  • NEW FEATURE: New toggle-take-class command.
  • NEW FEATURE: Allow event flows and concatenated rendering within the component HTML block.
  • BUG FIX: Dynamic CSS commands now support !important as they should.
  • BUG FIX: The take-class commands will work with the ACSS special combinators, like "<".
  • BUG FIX: Fix to recursion error caused by using pause command with nested "@while true" statements.
  • BUG FIX: Fix to host attribute ref to work as expected in nested components.
  • BUG FIX: Fix to a strictlyPrivate bubbling issue so that the event doesn't bubble beyond the scope.
  • BUG FIX: Fix to a nested component bubbling issue so that the event does bubble to the correct scope.
npm editions

Production core: https://www.npmjs.com/package/active-css/v/2.14.0
Development core: https://www.npmjs.com/package/active-css-dev/v/2.14.0
"If you are working on the core" core: https://www.npmjs.com/package/active-css-core-dev/v/2.14.0

View details


Version 2.13.0 "Shuri"

Release date: 16 July 2023

Production core: 55kB with gzip compression, 172kB minified
Development core: 57kB with gzip compression, 180kB minified

Download all script tag editions from:
https://github.com/Active-CSS/active-css/tree/master/dist/v-2-13-0

Changelog

  • NEW FEATURE: New if-completely-visible-x command for checking if an element is fully visible along its width.
  • NEW FEATURE: New if-completely-visible-y command for checking if an element is fully visible along its height.
  • NEW FEATURE: Files can now be sent via ajax in a standard HTML form using the form-submit category of commands.
  • NEW FEATURE: Allow @if statements to handle variables that have a syntax of $var{@data-attr}.
  • NEW FEATURE: Basic "intersect" event, which uses intersection observer behind the scenes. To fast track the upgrade of this command, send an email to support.
  • MAJOR FIX: Use of the pause command in state-changing nested loops and within @if statements was seriously busted, but all known errors have now been fixed. Please send a message to support if you find a scenario with the pause command that looks broken. It is possible that the event flow is a little bit faster now, as a couple of unnecessary bits were removed while fixing this, but we're probably talking milliseconds.
  • BUG FIX: Links to SPA URLs with hashes should now work as expected and trigger hash events. Eg. links like this should now trigger any popup event, or whatever actions, set up for the hash on the page: <a href="/mygallery#house">House picture</a>.
  • BUG FIX: Fix to not set up duplicate window click and input events when loading new config.
  • BUG FIX: Fix to ajax-form commands to send checkbox values if attributes are set, and not "on".
  • BREAKING CHANGE: This is a possible breaking change for some scenarios, but not all. The updated if-completely-visible command now works on both height and width, as implied by the name of the command. It used to do the visibility check on only the height of an element, and ignore the width. If you need to upgrade your command because it no longer works as it did, change "if-completely-visible" to "if-completely-visible-y", and it should work again.
npm editions

Production core: https://www.npmjs.com/package/active-css/v/2.13.0
Development core: https://www.npmjs.com/package/active-css-dev/v/2.13.0
"If you are working on the core" core: https://www.npmjs.com/package/active-css-core-dev/v/2.13.0

View details


Version 2.12.0 "Lilandra"

Release date: 26 March 2023

Production core: 50kB with brotli compression, 168kB minified
Development core: 52kB with brotli compression, 176kB minified

Download all script tag editions from:
https://github.com/Active-CSS/active-css/tree/master/dist/v-2-12-0

Changelog

  • NEW FEATURE: New render-when-visible option for components, so that a component only begins the render process when it visibly appears on the page.
  • NEW FEATURE: @pages can now work with <select> elements for page switching in an SPA via a dropdown.
  • NEW FEATURE: New trigger-fresh command, to solve memory leaks for infinite loops.
  • NEW FEATURE: "pages" option added to console-log command.
  • BUG FIX: Fixed and optimised observe event handling through a rewrite of the observe event batch queue system.
  • BUG FIX: Fix to previous sibling combinator to skip non-element nodes.
  • BUG FIX: Fixed issue with attribute referencing when it sometimes wasn't returning an empty string when the attribute wasn't there.
  • BUG FIX: Fixed issue with pause command where it sometimes wasn't firing back into the event flow.
  • BUG FIX: Fixed issue with external trigger command when used with element that was inside a component. It wasn't grabbing the correct scopes for variables and events.
  • BUG FIX: There was a DOM delay causing querySelectorAll to bring back incorrect results when rendering ACSS sub-components which is now fixed.
  • POTENTIAL BREAKING CHANGE: Improved internal /* */ removal in the core and reenforced existing rules about disallowing // comments in config. They are not allowed. Please replace all // comments in config with /* */. Any // comments left in config for this release may cause unexplainable errors.
npm editions

Production core: https://www.npmjs.com/package/active-css/v/2.12.0
Development core: https://www.npmjs.com/package/active-css-dev/v/2.12.0
"If you are working on the core" core: https://www.npmjs.com/package/active-css-core-dev/v/2.12.0

View details


Version 2.11.2 "Enchantress"

Release date: 30 October 2022

Production core: 49kB with brotli compression, 167kB minified
Development core: 51kB with brotli compression, 175kB minified

Download all script tag editions from:
https://github.com/Active-CSS/active-css/tree/master/dist/v-2-11-2

Changelog

  • BUG FIX: Sometimes the mixing of ACSS conditionals with JS failed when placed in a certain order in the line.
  • BUG FIX: Evaluate empty attributes as empty strings in @ references that are actually present, instead of undefined.
  • BREAKING CHANGE: {JSON} variable renamed to $JSON to align to dollar syntax and allow better manipulation.
npm editions

Production core: https://www.npmjs.com/package/active-css/v/2.11.2
Development core: https://www.npmjs.com/package/active-css-dev/v/2.11.2
"If you are working on the core" core: https://www.npmjs.com/package/active-css-core-dev/v/2.11.2

View details


Version 2.11.1 "Violet"

Release date: 12 October 2022

Production core: 49kB with brotli compression, 167kB minified
Development core: 51kB with brotli compression, 175kB minified

Download all script tag editions from:
https://github.com/Active-CSS/active-css/tree/master/dist/v-2-11-1

Changelog

  • BUG FIX: Fix to special combinator breakage. More tests to do, but this should fix the existing breakage to do with the closest combinator. Please report to GitHub any errors holding anything up.
npm editions

Production core: https://www.npmjs.com/package/active-css/v/2.11.1
Development core: https://www.npmjs.com/package/active-css-dev/v/2.11.1
"If you are working on the core" core: https://www.npmjs.com/package/active-css-core-dev/v/2.11.1

View details


Version 2.11.0 "Energizer"

Release date: 9 October 2022

Production core: 49kB with brotli compression, 167kB minified
Development core: 51kB with brotli compression, 175kB minified

Download all script tag editions from:
https://github.com/Active-CSS/active-css/tree/master/dist/v-2-11-0

Changelog

  • NEW FEATURE: New variable type with a dollar prefix, to make things simpler and more predictable. It is highly recommended to switch all variables to this new syntax.
  • NEW FEATURE: New previous adjacent sibling combinator for selectors on targets (-).
  • NEW FEATURE: New previous general sibling combinator for selectors on targets (-~).
  • NEW FEATURE: New escapeHTML function for inline JS to convert string into HTML entities for safe display.
  • NEW FEATURE: New unEscapeHTML function for inline JS to convert HTML-entitied string into raw string.
  • NEW FEATURE: New getVar function for inline JS to fetch a scoped variable based on string name. Variable substitution will eventually get its own proper syntax at some point in order for it to be available everywhere, so this is a stopgap.
  • NEW FEATURE: Enhancements to console-log to allow saner output of variables and elements via the new dollar-prefixed variable type.
  • NEW FEATURE: Pause command now allows variables.
  • NEW FEATURE: Afterajax events added for custom element components to handle ajax errors.
  • NEW FEATURE: Inline JS can now handle object prototypes via dollar-prefixed variables.
  • NEW FEATURE: Ajax returned JSON now gets stored in a general {JSON} object variable - FIXME - should be $JSON.
  • NEW FEATURE: Set up relative path handling for ajax commands.
  • NEW FEATURE: Added JSON option to component syntax to load JSON prior to rendering in order to avoid display flicker.
  • NEW FEATURE: Add afterAjax events for components with failed file loads.
  • DOCUMENTATION REMOVAL: Scoped variables that do not have a dollar prefixing the main variable will no longer be documented and no further bug fixes will occur for those variable types. Window-scoped variables with no dollar prefix are not included in this deprecation. The new dollar-prefixed syntax for ACSS scoped variables is the way forward, because it simplifies syntax and fixes some usage and core issues at the same time. The core code to handle the old variable types is not scheduled to be removed any time soon, but the documentation will no longer show the older way of using variables.
  • POTENTIAL BREAKING CHANGE: "click-on-..." commands now also focus by default. May run related ACSS focus events twice if a focus command is also manually set.
  • POTENTIAL BREAKING CHANGE: New dollar variable syntax may or may not have affected the usage of the old variable style. No backward-compatibility errors are known at the time of release, but if you do find any errors with previously working code, you can report them via GitHub. The solution that will be recommended is a switch to the new dollar variable syntax, because trying to fix core errors with those variable types is very hard on the brains. A switch to dollar syntax should be done anyway because the new syntax is more predictable and easier to work with, for the developer as well as the core developer.
  • BREAKING CHANGE: Non-chromium Edge is no longer supported for the render command.
  • DEPRECATION NOTICE: load-images will be removed in version 3. Setting the src attribute with set-attribute does the same thing.
  • BUG FIX: Allow CSS transition command to maintain its own comma-delimited structure rather than using the chaining syntax of ACSS.
  • BUG FIX: Fix to form submit/check not including custom elements with name/value pairs.
npm editions

Production core: https://www.npmjs.com/package/active-css/v/2.11.0
Development core: https://www.npmjs.com/package/active-css-dev/v/2.11.0
"If you are working on the core" core: https://www.npmjs.com/package/active-css-core-dev/v/2.11.0

View details


Version 2.10.0 "Lightspeed"

Release date: 1 May 2022

Production core: 48kB with brotli compression, 161kB minified
Development core: 50kB with brotli compression, 169kB minified

Download all script tag editions from:
https://github.com/Active-CSS/active-css/tree/master/dist/v-2-10-0

Changelog

  • NEW FEATURE: Components can now load HTML and CSS directly from files or template elements, as opposed to embedding structure in config. (Not that there is anything wrong with that older way - this is just another way of using components and gives you more options.)
  • NEW FEATURE: Components and all ajax requests now allow ACSS variables, with the accept-vars option. By default, any ACSS variables in external files will not be evaluated when loaded unless the accept-vars option is specifically specified, for security reasons. ACSS variables hidden inside user content should be escaped on the server with a backslash, by the developer, to avoid variable evaluation when loaded.
  • NEW FEATURE: Custom element components now have a intuitive and easy way to get loading indicators whilst waiting to render. The child elements of custom elements get removed by default when the component is loaded.
  • NEW FEATURE: New toggle-attribute action command.
  • NEW FEATURE: New fullscreen action command.
  • NEW FEATURE: New empty action command.
  • NEW FEATURE: New innerhtmlchange event.
  • NEW FEATURE: New cross-DOM if-has conditional.
  • NEW FEATURE: Allow attribute referencing {@attr} in delay labels
  • NEW FEATURE: Allow variables in delay time syntax for action commands.
  • NEW FEATURE: New header options added to ajax commands.
  • NEW FEATURE: New csrf option added to ajax commands so forms work easily with back-ends like Laravel.
  • BUG FIX: Fix to, and clarification of, the purpose of the closest combinator <, so it works intuitively as part of a complex selector.
  • BUG FIX: Fixed a bug to do with set-attribute/set-property with regard handling spaces, double-quotes and backslashes.
  • BUG FIX: Fixed an error that was caused by external JS changing the URL in an SPA context, if the URL changed to an incomplete URL.
  • BUG FIX: Functions should now work in embedded JavaScript, such as in the run command. Note that // for comments is still not supported anywhere in ACSS, including JavaScript embedded in config.
  • BUG FIX: Fixed selector drilling into a shadow DOM, eg. #myShadowHost -> shadow -> div.
  • BUG FIX: Fixed weird barfness caused by pause and after stack being used in the same event flow.
  • BUG FIX: Fixed cancel-timer not always working in context of private components.
  • BUG FIX: Forms no longer send disabled fields to server on ajax form submit.
  • DEPRECATION: The fullscreen-on and fullscreen-exit have now been deprecated and will be removed at some point. Replace with the new fullscreen action command.
  • BREAKING CHANGE: The child elements of custom element components now get removed by default when the component is loaded. Use the {$CHILDREN} variable to redraw children in the component itself if necessary.
  • BREAKING CHANGE: Events such as afterBackgroundColor, afterFunc, etc. have been removed as functionality, because ACSS action commands run sequentially now and as such these events are no longer necessary. The afterAjax family of events have not been removed, as they are still very much needed. This removal has given the core a good performance boost. There are alternatives to doing the same thing. If you are using these types of events currently, simply take the action commands from the "after" event and place them in sequence immediately after your main action command to fix things. If that isn't possible to do, trigger your existing "after" event as a custom event immediately after your main action command and call your "after" event that way. Eg. "background-color: green; #myDiv { trigger: afterBackgroundColor; }". In other words, the afterBackgroundColor event can stay as it is in your config, but it becomes a custom event which is triggered from where you need it to trigger. It will just need the additional trigger command to work. Note: Do not touch your afterAjax events because none of the ajax events are planned for removal.
npm editions

Production core: https://www.npmjs.com/package/active-css/v/2.10.0
Development core: https://www.npmjs.com/package/active-css-dev/v/2.10.0
"If you are working on the core" core: https://www.npmjs.com/package/active-css-core-dev/v/2.10.0

View details


Version 2.9.1 "Oracle"

Release date: 9 January 2022

Production core: 45kB with brotli compression, 151kB minified
Development core: 47kB with brotli compression, 159kB minified

Download all script tag editions from:
https://github.com/Active-CSS/active-css/tree/master/dist/v-2-9-1

Changelog

  • Fix to a infinite loop problem with the observe event in some scenarios.
npm editions

Production core: https://www.npmjs.com/package/active-css/v/2.9.1
Development core: https://www.npmjs.com/package/active-css-dev/v/2.9.1
"If you are working on the core" core: https://www.npmjs.com/package/active-css-core-dev/v/2.9.1

View details


Version 2.9.0 "Thundra"

Release date: 2 January 2022

Production core: 45kB with brotli compression, 151kB minified
Development core: 47kB with brotli compression, 159kB minified

Download all script tag editions from:
https://github.com/Active-CSS/active-css/tree/master/dist/v-2-9-0

Changelog

  • NEW FEATURE: New fade-in, fade-out and fade-to commands.
  • NEW FEATURE: New observe event.
  • NEW FEATURE: New {JSON} special variable for auto-wrapping of JSON results for handy iteration.
  • NEW FEATURE: New print command.
  • NEW FEATURE: New if-empty-trimmed conditional.
  • NEW FEATURE: Allow attributes to be fetched hierarchically from triggered custom events.
  • NEW FEATURE: Add scope option to take-class command.
  • NEW FEATURE: Allow certain ACSS conditionals to have default option of self where self can be implied.
  • NEW FEATURE: Internal optimizations made to the event flow to offset necessary improvements to the core.
  • BUG FIX: Consolidated internal selector parsing for target selectors and action commands, to allow "<" and "->" to work anywhere in a chain within a selector. Note: if you discover anything to do with selectors that is not yet working as expected, please let us know.
  • BUG FIX: Allow host attributes to be fetched from anywhere in a component.
  • BUG FIX: Allow reactive variables to work if undefined at first use.
  • BUG FIX: Fix to variable assignment of window variables, as that wasn't always working as expected.
  • BUG FIX: Fix to HTML variables that look like this: myVar.$myHTMLVariable, which had stopped working at some point.
  • BUG FIX: Get the focus-on/click-on action commands correctly working in components/shadow DOMs.
  • BUG FIX: Various other minor fixes.
npm editions

Production core: https://www.npmjs.com/package/active-css/v/2.9.0
Development core: https://www.npmjs.com/package/active-css-dev/v/2.9.0
"If you are working on the core" core: https://www.npmjs.com/package/active-css-core-dev/v/2.9.0

View details


Version 2.8.0 "Echo"

Release date: 19 September 2021

Production core: 43kB with brotli compression, 143kB minified
Development core: 45kB with brotli compression, 151kB minified

Download all script tag editions from:
https://github.com/Active-CSS/active-css/tree/master/dist/v-2-8-0

Changelog

  • NEW FEATURE: Allow regular CSS rules inside ACSS config. CSS at-rules that are experimental or make no sense for a dynamic context have not been included in this upgrade.
  • DOCS FIX: Replace all references to "inline ACSS" with the correct term, "embedded ACSS".
  • BREAKING CHANGE: inlineTag:loaded event now becomes embedded:loaded. This is a "find and replace" fix for existing config.
  • BUG FIX: Allow empty embedded ACSS style tags but show a warning in the developer core edition. Previously an empty tag would simply stop valid config from loading.
npm editions

Production core: https://www.npmjs.com/package/active-css/v/2.8.0
Development core: https://www.npmjs.com/package/active-css-dev/v/2.8.0
"If you are working on the core" core: https://www.npmjs.com/package/active-css-core-dev/v/2.8.0

View details


Version 2.7.0 "M"

Release date: 3 August 2021

Production core: 42kB with brotli compression, 139kB minified
Development core: 44kB with brotli compression, 147kB minified

Download all script tag editions from:
https://github.com/Active-CSS/active-css/tree/master/dist/v-2-7-0

Changelog

  • NEW FEATURE: @if, @else if, @else, @while, @for control flow statements.
  • NEW FEATURE: break, continue, exit and exit-target control flow commands.
  • NEW FEATURE: Allow all control flow statements to wrap around action commands as well as target selectors.
  • BREAKING CHANGE: Pause/await now works as expected with regular or parallel event flows. To use a parallel event flow, type parallel at the end of the target selector before the opening brace, preceded by a space.
  • BREAKING CHANGE: All @each loop right-hand variables now need curly braces. This brings variable handling into consistency with other areas. The rules are to use no curlies when assigning, but do use curlies when referencing (except inside raw JavaScript like the run command, where curly braces are never surrounding ACSS variables).
npm editions

Production core: https://www.npmjs.com/package/active-css/v/2.7.0
Development core: https://www.npmjs.com/package/active-css-dev/v/2.7.0
"If you are working on the core" core: https://www.npmjs.com/package/active-css-core-dev/v/2.7.0

View details


Version 2.6.1 "Octavia"

Release date: 8 June 2021

Production core: 39kB with brotli compression, 131kB minified
Development core: 41kB with brotli compression, 139kB minified

Download all script tag editions from:
https://github.com/Active-CSS/active-css/tree/master/dist/v-2-6-1

Changelog

  • BUG FIX: Fix to ACSS router handling conflicting with "div" when used on its own as a target selector.
npm editions

Production core: https://www.npmjs.com/package/active-css/v/2.6.1
Development core: https://www.npmjs.com/package/active-css-dev/v/2.6.1
"If you are working on the core" core: https://www.npmjs.com/package/active-css-core-dev/v/2.6.1

View details


Version 2.6.0 "Celsius"

Release date: 7 June 2021

Production core: 39kB with brotli compression, 131kB minified
Development core: 41kB with brotli compression, 139kB minified

Download all script tag editions from:
https://github.com/Active-CSS/active-css/tree/master/dist/v-2-6-0

Changelog

  • NEW FEATURE: New pause command.
  • NEW FEATURE: New await option for all delayed action commands, including ajax commands.
  • BUG FIX: Fix to ignore template tag contents when processing events.
npm editions

Production core: https://www.npmjs.com/package/active-css/v/2.6.0
Development core: https://www.npmjs.com/package/active-css-dev/v/2.6.0
"If you are working on the core" core: https://www.npmjs.com/package/active-css-core-dev/v/2.6.0

View details


Version 2.5.2 "Lyja"

Release date: 22 May 2021

Production core: 37kB with brotli compression, 125kB minified
Development core: 39kB with brotli compression, 133kB minified

Download all script tag editions from:
https://github.com/Active-CSS/active-css/tree/master/dist/v-2-5-2

Changelog

  • NEW FEATURE: Added general ajax error event (afterAjaxError, etc.) which runs after an ajax error coded event.
  • BUG FIX: Fixed issue to do with rendering inner table tags from render command sometimes not working due to preceding whitespace.
npm editions

Production core: https://www.npmjs.com/package/active-css/v/2.5.2
Development core: https://www.npmjs.com/package/active-css-dev/v/2.5.2
"If you are working on the core" core: https://www.npmjs.com/package/active-css-core-dev/v/2.5.2

View details


Version 2.5.1 "Elsa"

Release date: 12 May 2021

Production core: 37kB with brotli compression, 125kB minified
Development core: 39kB with brotli compression, 133kB minified

Download all script tag editions from:
https://github.com/Active-CSS/active-css/tree/master/dist/v-2-5-1

Changelog

  • NEW FEATURE: Downloadable docs.
  • NEW FEATURE: Bookmarkable SPA hash support.
  • NEW FEATURE: New add-hash, remove-hash and load-as-ajax commands.
  • NEW FEATURE: html-entity-decode option added to set-attribute and set-property commands.
  • NEW FEATURE: starting-from selector option added to click-on-next, etc. commands.
  • NEW FEATURE: If-var conditional now supports array comparison and whether array is empty or not if no second parameter specified.
  • BUG FIX: Clean removal and addition of embedded ACSS between pages.
  • BUG FIX: Internally escape variable for rendering only at the point of rendering and not before, plus fixes to auto-escaping issues.
  • BUG FIX: Allow target selector actions to continue running to the end after the target selector has been removed from the DOM, if the command isn't intended to affect the target selector itself. The prior workaround was to set off a custom event instead, but it isn't needed now.
  • BUG FIX: Allow vars commands in JS to handle $ prefix variables.
  • BUG FIX: Allow reactivity to be set up on attributes when the attribute hasn't been setup yet.
  • BUG FIX: Fix to ajax-pre-get sometimes getting content twice from the server.
  • BUG FIX: Display fix to component table rendering.
npm editions

Production core: https://www.npmjs.com/package/active-css/v/2.5.1a
Development core: https://www.npmjs.com/package/active-css-dev/v/2.5.1a
"If you are working on the core" core: https://www.npmjs.com/package/active-css-core-dev/v/2.5.1a

View details


Version 2.5.0 "Wanda"

Release date: 17 March 2021

Production core: 35kB with brotli compression, 117kB minified
Development core: 37kB with brotli compression, 126kB minified

Download all script tag editions from:
https://github.com/Active-CSS/active-css/tree/master/dist/v-2-5-0

Changelog

  • NEW FEATURE: New strictlyPrivateEvents option for total component event encapsulation (replaces prior "privateEvents" option).
  • NEW FEATURE: New session-storage and local-storage options added to var action command, with complex variable support and full DOM reactivity.
  • NEW FEATURE: New var-delete action command.
  • NEW FEATURE: New end-of-field option added to focus-on action commands to allow putting the cursor at the end of the line on focus.
  • NEW FEATURE: New {$RAND...} variables for handling different types of random strings with optional varying lengths.
  • NEW FEATURE: New element property variable type {@@property} to complement existing {@attribute} variable type for when you need dynamic values.
  • NEW FEATURE: New options added to console-log action command - target and variables to help with debug actions.
  • NEW FEATURE: Added proper support for variable referencing within array items.
  • BREAKING CHANGE: Change prior privateEvents behaviour so that inner component elements can be targeted from outside the component.
    To upgrade from the latest version of the core, in your config @component lines, replace privateEvents to strictlyPrivateEvents. The new strictlyPrivateEvents option has the same behaviour as the prior privateEvents option.
    See the Components section of the docs to get the full info on why this is an improvement and what you can now do because of the change.
  • BREAKING CHANGE: There were lots of fixes to do with using complex variables (arrays inside objects, etc.) in this release. Hopefully these have all been solved now. There shouldn't be too much breakage, if anything, but if you do use variables you should test your code and check how they are being used in your config. Any breaking changes will be in the area of how double-quotes are being used with variables. If you need some visual references on how variables are used, you can check out the Concept Examples in the docs - specifically the new "Todo" example to see how variables are used in there. If you do find anything strange with variables that you cannot resolve, please do file a bug report as it will get addressed promptly.
  • SECURITY FIX: Disallow dynamic DevTools insertion of Active CSS in production core.
  • SECURITY FIX: Remove possibility of double evaluation with variables due to progressive substitution when evaluating for render and at other times.
  • BUG FIX: Fix for the issue of delayed actions not running after component is removed.
  • BUG FIX: Fix to custom triggering of events in and out of components when chained.
  • BUG FIX: Fix to clickoutside event as it wasn't working when set on inner shadow DOM elements.
  • BUG FIX: Fix to custom event trigger delays so they work as expected in components.
  • BUG FIX: Fix config lazy-loading.
  • BUG FIX: Memory clean-up and loads of stability fixes and optimizations.
  • BUG FIX: Fix variable scoping issues with the run, create-command and create-conditional commands.
  • BUG FIX: Fix to ensure document title setting always removes HTML entities correctly.
  • BUG FIX: Fix several issues to do with handling complex variables, variable re-assignment and using variables in components.
npm editions

Production core: https://www.npmjs.com/package/active-css/v/2.5.0
Development core: https://www.npmjs.com/package/active-css-dev/v/2.5.0
"If you are working on the core" core: https://www.npmjs.com/package/active-css-core-dev/v/2.5.0

View details


Version 2.4.3 "Elena"

Release date: 24 January 2021

Production core: 32kB with brotli compression, 106kB minified
Development core: 34kB with brotli compression, 115kB minified

Download all script tag editions from:
https://github.com/Active-CSS/active-css/tree/master/dist/v-2-4-3

Changelog

  • BUG FIX: Fix to the multiple renders in same target selector related to implementation of {$CHILDREN}.
  • BUG FIX: Fix to var command for assigning a value to an array item.
npm editions

Production core: https://www.npmjs.com/package/active-css/v/2.4.3
Development core: https://www.npmjs.com/package/active-css-dev/v/2.4.3
"If you are working on the core" core: https://www.npmjs.com/package/active-css-core-dev/v/2.4.3

View details


Version 2.4.2 "Carla"

Release date: 30 December 2020

Production core: 32kB with brotli compression, 106kB minified
Development core: 34kB with brotli compression, 115kB minified

Download all script tag editions from:
https://github.com/Active-CSS/active-css/tree/master/dist/v-2-4-2

Changelog

  • NEW FEATURE: Support for setting native CSS variables dynamically.
npm editions

Production core: https://www.npmjs.com/package/active-css/v/2.4.2
Development core: https://www.npmjs.com/package/active-css-dev/v/2.4.2
"If you are working on the core" core: https://www.npmjs.com/package/active-css-core-dev/v/2.4.2

View details


Version 2.4.1 "Agnes"

Release date: 28 December 2020

Production core: 32kB with brotli compression, 106kB minified
Development core: 34kB with brotli compression, 115kB minified

Download all script tag editions from:
https://github.com/Active-CSS/active-css/tree/master/dist/v-2-4-1

Changelog

  • BUG FIXES: Re-introduce native template and slots support.
npm editions

Production core: https://www.npmjs.com/package/active-css/v/2.4.1
Development core: https://www.npmjs.com/package/active-css-dev/v/2.4.1
"If you are working on the core" core: https://www.npmjs.com/package/active-css-core-dev/v/2.4.1

View details


Version 2.4.0 "Lance"

Release date: 27 December 2020

Production core: 32kB with brotli compression, 106kB minified
Development core: 34kB with brotli compression, 115kB minified

Download all script tag editions from:
https://github.com/Active-CSS/active-css/tree/master/dist/v-2-4-0

Changelog

  • NEW FEATURE: Added "samesite" option to set-cookie command.
  • NEW FEATURE: New document-title command.
  • NEW FEATURE: New render-replace command.
  • NEW FEATURE: New stop-event-propagation and stop-immediate-event-propagation commands and a fix to stop-propagation.
  • NEW FEATURE: CI pipeline set up for the core, with basic tests setup for most of the action commands. More tests needed though.
  • NEW FEATURE: Full implementation of embedded Active CSS, so that dynamic addition and removal of Active CSS style tags works as expected.
  • NEW FEATURE: New "shadow" target selector option for applying actions inside a shadow DOM, eg. #hostTag -> shadow -> p {...}.
  • NEW FEATURE: Complete removal of reactive variable placeholders from the DOM.
  • NEW FEATURE: New {$HTML}, {$HTML_ESCAPED} and {$HTML_NOVARS} variables for use in privateVars components.
  • NEW FEATURE: New if-max-width, if-max-height, if-min-width and if-min-height conditionals.
  • NEW FEATURE: Introduction of "privateEvents", "privateVars" and "strictlyPrivateVars" for components.
  • NEW FEATURE: Added a simple way to create client-generated iframes.
  • NEW FEATURE: Support for metakey as a keyboard event. Added more key events.
  • NEW FEATURE: Added "<" CSS selector for use in the target selector only. Like .closest() but starting with the parent element.
    This means that elements can be targeted like this: "strong < p" which returns all unique p tag parents of strong tags. Multiple "<"s are allowed in a selector.
  • NEW FEATURE: Added parameter to create-element command for permanent assignment of a component without the need for additional rendering when drawn.
  • NEW FEATURE: New code editor for the docs website built as an Active CSS component.
  • NEW FEATURE: Overall speed improvements and optimizations to the core due to more targeted reactive variable updating.
  • BUG FIX: Fixes to native custom element lifecycle events so they work as expected (docs still to do on that).
  • BUG FIX: Proper "after" events added for load-style, load-script and ajax-pre-get commands.
  • BUG FIX: Allow load-style and load-scripts to work in a shadow DOM + allow the same stylesheet to work in multiple shadow DOMs.
  • BUG FIX: The var command was trying to evaluate too many variables on the right-hand side of the equation - this is now fixed.
  • BUG FIX: Internal clarification of host variable referencing.
  • BUG FIXES: A bunch more fixes.
  • DEPRECATION: The "private" option for @component declarations has been deprecated.
npm editions

Production core: https://www.npmjs.com/package/active-css/v/2.4.0
Development core: https://www.npmjs.com/package/active-css-dev/v/2.4.0
"If you are working on the core" core: https://www.npmjs.com/package/active-css-core-dev/v/2.4.0

View details


Version 2.3.0 "Phil"

Release date: 17 August 2020

Production core: 26kB with brotli compression, 88kB minified
Development core: 29kB with brotli compression, 97kB minified

Download all script tag editions from:
https://github.com/Active-CSS/active-css/tree/master/dist/v-2-3-0

Changelog

  • NEW FEATURE: Nested loops.
  • NEW FEATURE: Sequential target selector execution.
  • NEW FEATURE: Sequential action command execution. (Note that these changes will work with old config and allows optimization. To optimize, remove "after stack" or "after 0s" and place commands and target selectors sequentially if they aren't already in the right sequence. Only do this with synchronous commands though. You still need the afterAjax event for ajax commands.)
  • PERFORMANCE UPGRADE: Faster initialization.
npm editions

Production core: https://www.npmjs.com/package/active-css/v/2.3.0
Development core: https://www.npmjs.com/package/active-css-dev/v/2.3.0
"If you are working on the core" core: https://www.npmjs.com/package/active-css-core-dev/v/2.3.0

View details


Version 2.2.4 "Leo"

Release date: 13 July 2020

Production core: 26kB with brotli compression, 87kB minified
Development core: 28kB with brotli compression, 95kB minified

Download all script tag editions from:
https://github.com/Active-CSS/active-css/tree/master/dist/v-2-2-4

Changelog

  • BUG FIX: fix to further isolate delayed actions with a new internal ID for added config commands so we can pinpoint exactly which ones get cancelled or cleaned up. Also, improve clean-up by not trying to run actions on elements that are not there - this was only partially working and not having this would have been affecting performance where a lot of cancel-timer actions were taking place.
npm editions

Production core: https://www.npmjs.com/package/active-css/v/2.2.4
Development core: https://www.npmjs.com/package/active-css-dev/v/2.2.4
"If you are working on the core" core: https://www.npmjs.com/package/active-css-core-dev/v/2.2.4

View details


Version 2.2.3 "AIDA"

Release date: 13 July 2020

Production core: 26kB with brotli compression, 87kB minified
Development core: 28kB with brotli compression, 95kB minified

Download all script tag editions from:
https://github.com/Active-CSS/active-css/tree/master/dist/v-2-2-3

Changelog

  • BUG FIX: fix to cancel-timer so that clashing un-delayed actions don't clean up the internal record of the same delayed actions on the same element before the action has completed - making it impossible to run cancel-timer on the element for similar delayed actions.
npm editions

Production core: https://www.npmjs.com/package/active-css/v/2.2.3
Development core: https://www.npmjs.com/package/active-css-dev/v/2.2.3
"If you are working on the core" core: https://www.npmjs.com/package/active-css-core-dev/v/2.2.3

View details


Version 2.2.2 "Campbell"

Release date: 12 July 2020

Production core: 26kB with brotli compression, 87kB minified
Development core: 28kB with brotli compression, 95kB minified

Download all script tag editions from:
https://github.com/Active-CSS/active-css/tree/master/dist/v-2-2-2

Changelog

  • BUG FIX: fix to multiple rendering of pre-gotten ajax return strings - this was causing a major performance hit when switching pages as well as causing weird stuff.
  • BUG FIX: fix to attribute binding in shadow DOMs not always working correctly.
npm editions

Production core: https://www.npmjs.com/package/active-css/v/2.2.2
Development core: https://www.npmjs.com/package/active-css-dev/v/2.2.2
"If you are working on the core" core: https://www.npmjs.com/package/active-css-core-dev/v/2.2.2

View details


Version 2.2.1 "Izel"

Release date: 11 July 2020

Production core: 26kB with brotli compression, 87kB minified
Development core: 28kB with brotli compression, 95kB minified

Download all script tag editions from:
https://github.com/Active-CSS/active-css/tree/master/dist/v-2-2-1

Changelog

  • NEW FEATURE: New variable type - HTML variables, in the format {$varname} (or {item.$varname} in an array or loop). This variable can contain raw HTML, which is necessary sometimes in ajax return variables. This variable type does not support data-binding. It might do later. Dunno yet.
  • NEW FEATURE: upgrade to "remove" command so that it works with "me", "self" and "this".
  • BUG FIX: fix to "location" command so that it actually works when used within a component.
  • BUG FIX: fix to only html-escape variables when rendering, and not for any other command type.
  • BUG FIX: fix to "if-var" so it can be checked to see if a variable exists when only using one parameter.
  • BUG FIX: fix to attribute binding storage format that was causing popstate errors and probably other things.
  • BUG FIX: fix to erroring popstate event on Chrome.
  • BUG FIX: fix to component temporary tag removal.
npm editions

Production core: https://www.npmjs.com/package/active-css/v/2.2.1
Development core: https://www.npmjs.com/package/active-css-dev/v/2.2.1
"If you are working on the core" core: https://www.npmjs.com/package/active-css-core-dev/v/2.2.1

View details


Version 2.2.0 "Johnson"

Release date: 8 July 2020

Production core: 26kB with brotli compression, 86kB minified
Development core: 28kB with brotli compression, 95kB minified

Download all script tag editions from:
https://github.com/Active-CSS/active-css/tree/master/dist/v-2-2-0

Changelog

  • NEW FEATURE: "@command" - new syntax in addition to the existing create-command and create-conditional action commands.
  • NEW FEATURE: Private variable scoping is now an optional parameter for all components regardless of DOM area, so nested shadow DOM components can now be scoped to one variable area if required, and so components no longer have to be shadow DOM to benefit from variable isolation.
  • NEW FEATURE: All component types (shadow DOM, private, non-private/"global") now allow scoped events by default and will respond to beforeComponentOpen and componentOpen events.
  • NEW FEATURE: New "if-var" conditional command.
  • NEW FEATURE: Introduce "@conditional" as alternative conditional declaration syntax, in addition to existing shorthand "?".
  • NEW FEATURE: Allow intuitive grouped conditionals syntax "@conditional first, second {}", or "?first, second {}" as an additional option to existing syntax ("?first, ?second {}" and "@conditional first, @conditional second {}").
  • BREAKING CHANGE: For shadow DOM components to have private variable scoping, they must now have the "private" parameter in the @component line as well as the existing "shadow [open (default)/closed]" parameters.
  • BREAKING CHANGE: "beforeShadowOpen" event is now "beforeComponentOpen", and "shadowOpen" event is now "componentOpen" to work identically for both scoped components and shadow DOM components.
  • BREAKING CHANGE: External reference to "o.shadowDoc" has now been renamed to "o.compDoc" to reflect the component area for both scoped components and shadow DOM components.
  • BREAKING CHANGE: External reference to "o.shadowRef" has now been renamed to "o.compRef" to reflect the component area for both scoped components and shadow DOM components.
  • BUG FIX: Fixed a bug with the var command for a specific syntax parsing scenario.
npm editions

Production core: https://www.npmjs.com/package/active-css/v/2.2.0
Development core: https://www.npmjs.com/package/active-css-dev/v/2.2.0
"If you are working on the core" core: https://www.npmjs.com/package/active-css-core-dev/v/2.2.0

View details


Version 2.1.2 "Antoine"

Release date: 15 June 2020

Production core: 25kB with brotli compression, 84kB minified
Development core: 27kB with brotli compression, 92kB minified

Download all script tag editions from:
https://github.com/Active-CSS/active-css/tree/master/dist/v-2-1-2

Changelog

  • BUG FIX: Fix to variable binding within shadow DOM element attributes so that it works as expected.
npm editions

Production core: https://www.npmjs.com/package/active-css/v/2.1.2
Development core: https://www.npmjs.com/package/active-css-dev/v/2.1.2
"If you are working on the core" core: https://www.npmjs.com/package/active-css-core-dev/v/2.1.2

View details


Version 2.1.1 "Melinda"

Release date: 14 June 2020

Production core: 25kB with brotli compression, 84kB minified
Development core: 27kB with brotli compression, 92kB minified

Download all script tag editions from:
https://github.com/Active-CSS/active-css/tree/master/dist/v-2-1-1

Changelog

  • NEW FEATURE: Basic support for old Edge on production core - but no support for shadow DOM features.
  • BUG FIX: Fix for complex object/array data binding not working as expected.
  • BUG FIX: Fix for ajax rendering bound variables in shadow DOM sometimes not updating.
  • DEPRECATED: Babel core versions. Base code is in ES6 and ES5 conversion and below won't work anyway. Put back in 5 years when ES6 is old.
npm editions

Production core: https://www.npmjs.com/package/active-css/v/2.1.1
Development core: https://www.npmjs.com/package/active-css-dev/v/2.1.1
Babel production core: https://www.npmjs.com/package/active-css-babel/v/2.1.1
Babel development core: https://www.npmjs.com/package/active-css-babel-dev/v/2.1.1
"If you are working on the core" core: https://www.npmjs.com/package/active-css-core-dev/v/2.1.1

View details


Version 2.1.0 "Alphonso"

Release date: 9 June 2020

Production core: 23kB with brotli compression, 78kB minified
Development core: 25kB with brotli compression, 87kB minified

Download all script tag editions from:
https://github.com/Active-CSS/active-css/tree/master/dist/v-2-1-0

Changelog

  • NEW FEATURE: Allow embedded Active CSS in a style tag with type="text/acss".
npm editions

Production core: https://www.npmjs.com/package/active-css/v/2.1.0
Development core: https://www.npmjs.com/package/active-css-dev/v/2.1.0
Babel production core: https://www.npmjs.com/package/active-css-babel/v/2.1.0
Babel development core: https://www.npmjs.com/package/active-css-babel-dev/v/2.1.0
"If you are working on the core" core: https://www.npmjs.com/package/active-css-core-dev/v/2.1.0

View details


Version 2.0.1 "Simmons"

Release date: 20 May 2020

Production core: 23kB with brotli compression, 77kB minified
Development core: 25kB with brotli compression, 86kB minified

Download all script tag editions from:
https://github.com/Active-CSS/active-css/tree/master/dist/v-2-0-1

Changelog

  • BUG FIX: Fixed messaging so it doesn't clash with extensions.
npm editions

Production core: https://www.npmjs.com/package/active-css/v/2.0.2
Development core: https://www.npmjs.com/package/active-css-dev/v/2.0.1
Babel production core: https://www.npmjs.com/package/active-css-babel/v/2.0.1
Babel development core: https://www.npmjs.com/package/active-css-babel-dev/v/2.0.1
"If you are working on the core" core: https://www.npmjs.com/package/active-css-core-dev/v/2.0.1

View details


Version 2.0.0 "Terrigen"

Release date: 17 May 2020

Production core: 23kB with brotli compression, 77kB minified
Development core: 25kB with brotli compression, 86kB minified

Download all script tag editions from:
https://github.com/Active-CSS/active-css/tree/master/dist/v-2-0-0

Changelog

  • NEW FEATURE: JavaScript expressions.
  • NEW FEATURE: New "every" action command parameter.
  • NEW FEATURE: Cancel specific delayed/intervaled actions by using a label on the specific action.
  • NEW FEATURE: New create-command action command.
  • NEW FEATURE: New create-conditional action command.
  • NEW FEATURE: New create-element action command.
  • NEW FEATURE: Data binding and custom element attribute binding.
  • NEW FEATURE: Auto-scoped variables.
  • NEW FEATURE: Single level @each loop support.
  • NEW FEATURE: Conditional functions can now also be written directly in the event selector, to more align with CSS syntax.
  • NEW FEATURE: Shadow DOM support + isolated events and variables.
  • NEW FEATURE: Regular CSS commands can now be written into Active CSS events.
  • NEW FEATURE: Support for international character sets.
  • NEW FEATURE: Babel core scripts available in production and development editions.
  • NEW FEATURE: Core fully open source on the MIT license and forkable on github.
  • NEW FEATURE: Merged Elements and Panel Chrome DevTools extensions and updated to support version 2 core changes.
  • NEW FEATURE: focus-on-first now focuses on the first field in a selector group to align with focus-on-last and is not now an alternative syntax to focus-on. The command had this effect anyway - but the change of name makes it more obvious.
  • NEW FEATURE: HTML variables, which act as a quick way to output inner HTML.
  • BREAKING CHANGE: page-list {} is now @pages {} to more align to CSS syntax.
  • BREAKING CHANGE: Ajax variables removed - syntax now the same as regular variables - no dollar, eg. {results}.
  • BREAKING CHANGE: Removed quick-html command. For simplicity in avoiding XSS, no variables can now contain HTML, with the exception being {$STRING}.
  • BREAKING CHANGE: Cancel-delayed and cancel-delayed-all renamed to cancel-timer and cancel-timer-all.
  • BREAKING CHANGE: Creating an action command as an external function is no longer supported due to core commands no longer being public. Use "create-command" instead.
  • BREAKING CHANGE: Components are now written in @component wrapper syntax to more align with CSS syntax - see the components docs.
  • BUG FIX: Re-introduced the select-all and select-none commands into the main core for the DevTools extension.
  • BUG FIX: Fixed an issue of {$RAND} not always working. It now works in all the same places as attribute substitution.
  • BUG FIXES & OPTIMIZATIONS: An assortment of other bug fixes and optimizations.
npm editions

Production core: https://www.npmjs.com/package/active-css/v/2.0.0
Development core: https://www.npmjs.com/package/active-css-dev/v/2.0.0
Babel production core: https://www.npmjs.com/package/active-css-babel/v/2.0.0
Babel development core: https://www.npmjs.com/package/active-css-babel-dev/v/2.0.0
"If you are working on the core" core: https://www.npmjs.com/package/active-css-core-dev/v/2.0.0

View details


Version 1.0.0 "1"

Release date: 1 January 2020

Production core: 15kB with brotli compression, 50kB minified
Development core: 20kB with brotli compression, 64kB minified

Download both versions from:
https://github.com/Active-CSS/active-css/tree/master/dist/v-1-0-0

Changelog

  • Initial public release
npm editions

This is the same core as above but different version control for npm.

Production core: https://www.npmjs.com/package/causejs/v/1.0.5
Development core: https://www.npmjs.com/package/causejs-dev/v/1.0.5

View details