👨‍🎨 CSS Themes Made Easy. A robust, opinionated solution to manage themes in your web application

  • By Salesforce
  • Last update: Nov 21, 2022
  • Comments: 11

themify Build Status All Contributors commitizen PRs styled with prettier semantic-release

CSS Themes Made Easy

Themify lets you manage your application’s themes in realtime, using a robust solution that’s easily configurable.

Themify is a PostCSS plugin that generates your theme during the build phase. The main concept behind it is to provide two palettes, one light and one dark (resembles the inverse of the light palette).

Under the hood, themify will replace your CSS colors with CSS variables, and also take care to provide a fallback for unsupported browsers (such as IE11).

Introducing Themify: CSS Themes Made Easy

🤓 Features

  • 🖌 Light & Dark palettes - define your theme using a simple JSON format

  • 🎨 Replace your colors in runtime - provide your clients with white-labeling capabilities. Let them choose their own colors and replace them instantly

  • ✏️ Use it inside your CSS - use your theme directly in your SASS files, no JavaScript is required

  • 🏃 Runtime replacement - change the active palette at runtime, either for the entire application or for a specific HTML container

  • 🔥 Legacy Browser Support - support for all major browsers including IE11

Installation

npm install @datorama/themify --save

Usage

Options

Input Type Default Description
createVars boolean true Determines whether CSS variables are automatically generated. This should kept as true, unless you want to inject them yourself.
palette {light: [key: string]: string, dark: [key: string]: string} {} Palette colors
classPrefix string '' A class prefix to append to each generated theme class.
screwIE11 boolean true Whether to generate a fallback for legacy browsers that do not supports CSS Variables.
fallback {cssPath: string | null, dynamicPath: string | null} {} cssPath: An absolute path to the fallback CSS.
dynamicPath: An absolute path to the fallback JSON.

Add themify to your build pipe:

const themifyOptions = {  
  palette : {
    light: {
      'primary-100': '#f2f2f4',
      'primary-200': '#cccece',
      'accent-100': '#e6f9fc',
      'accent-200': '#96e1ed'
    },
    dark: {
      'primary-100': '#505050',
      'primary-200': '#666a6b',
      'accent-100': '#096796',
      'accent-200': '#0a87c6'
    }
  },
  screwIE11 : false,  
  fallback : {  
    cssPath : './dist/theme_fallback.css', // use checksum 
    dynamicPath: './dist/theme_fallback.json'  
  }  
};
Gulp
gulp.src('./main.scss')  
    .pipe(postcss([  
	initThemify(themifyOptions),  
	sass(),  
	themify(themifyOptions)  
     ]))  
    .pipe(rename("bundle.css"))  
    .pipe(gulp.dest('dist'));
Webpack
const isProd = process.env.ENV === 'production';
const basePath = isProd ? './dist' : './src';
const cssPath = `${basePath}/theme_fallback.css`;
const dynamicPath = `${basePath}/theme_fallback.json`;

{
  test: /\.scss$/,
  use: [{loader: "style-loader"}].concat(getLoaders())
}
      
const getLoaders = () => [{
  loader: "css-loader"
},
  {
    loader: 'postcss-loader',
    options: {
      ident: 'postcss2',
      plugins: () => [
        require('@datorama/themify').themify(themifyOptions)
      ]
    }
  },
  {
    loader: "sass-loader"
  },
  {
    loader: 'postcss-loader',
    options: {
      ident: 'postcss1',
      plugins: () => [
        require('@datorama/themify').initThemify(themifyOptions)
      ]
    }
  }
]

Add themify to SASS

In order to use the themify function and other SASS helpers, you need to import the themify library from your main SASS file:

@import 'node_modules/datorama/themify/themify';

The themify function receives as parameters the name of the color defined in the palette map and an optional opacity parameter. Themify will generate CSS selectors for each palette — one for the light and one for the dark.

.my-awesome-selector {
  // color-key: a mandatory key from your palette. For example: primary-100
  // opacity: an optional opacity. Valid values between 0 - 1. Defaults 1.
  background-color: themify(color-key, opacity);

  // Define a different color for dark and light.
  color: themify((dark: color-key-1, light: color-key-2));
}

Basic usage

button {
  background-color: themify(primary-100);
  color: themify(accent-200);
  &:hover {
    background-color: themify(primary-100, 0.5);	
  }
}

The above example will produce the following CSS:

.dark button, button {
  background-color: rgba(var(--primary-100), 1);
  color: rgba(var(--accent-200), 1);
}
.dark button:hover, button:hover {
  background-color: rgba(var(--primary-100), 0.5);	
}

And the following fallback for IE11:

button {
  background-color: #f2f2f4;
  color: #666a6b;
}
 
.dark button {
  background-color: #505050;
  color: #0a87c6;
}

button:hover {
  background-color: rgba(242, 242, 244, 0.5);	
}

.dark button:hover {
  background-color: rgba(80, 80, 80, 0.5);	
}

A different color for each palette

Sometimes we need more control over the colors so it's possible to specify explicitly one color for light and another color for dark:

button {
  background-color: themify((dark: primary-100, light: accent-200));
}

The above example will produce the following CSS:

.button {
  background-color: rgba(var(--accent-200), 1);
}

.dark button {
  background-color: rgba(var(--primary-100), 1);
}

Advanced usage

themify can be combined with every valid CSS:

button {
  border: 1px solid themify(primary-100);
  background: linear-gradient(themify(accent-200), themify(accent-100));
}

Even in your animations:

.element {  
  animation: pulse 5s infinite;  
}  
  
@keyframes pulse {
  0% {  
    background-color: themify(accent-100);  
  }  
  100% {  
    background-color: themify(accent-200);  
  }  
}

Runtime replacement

First, we'll create our own theme service.

import {loadCSSVariablesFallback, replaceColors, Theme} from '@datorama/themify/utils';
const palette = require('path_to_my_json_pallete');

/** fallback for CSS variables support */
const themeCSSFallback = 'path/theme_fallback.css';
const themeJSONFallback = 'path/theme_fallback.json';

export class MyThemeService {
	
  constructor(){
    /**
    * load the CSS fallback file, in case the browser do not support CSS Variables.
    * Required only if you set screwIE11 option to false. 
    *
    * callback - load event for the CSS file
    */
    loadCSSVariablesFallback(themeCSSFallback, callback);	
  }

  /**  
   * Replace the theme colors at runtime 
   * @param partialTheme a partial theme configuration.  
   */
   setColors(partialTheme: Theme){
     replaceColors(themeJSONFallback, partialTheme, palette);
   }

}

Now let's use this service in our web application:

const themeService = new MyThemeService();

/** replace the colors at runtime **/
themeService.setColors({
  light: {
    'primary-100': '#0c93e4'
  }
});

Changing the active palette

In order to switch between the dark and light palettes, simply add the appropriate class to the desired HTML element.

p {
  /** #96e1ed in light and #0a87c6 in dark */
  color: themify(accent-200);
}
<p>I'm from the light palette</p>
<div class="dark">
  <p>I'm from the dark palette</p>	
</div>

Theme class helpers

You can take advantage of your themes not just in your CSS, but also directly in your HTML, by generating a CSS class for each color you define.

In order to achieve this, use the generateThemeHelpers mixin, and pass the CSS properties you want to generate. For example:

// generates the following predefined classes, for each color  
$themeRules: (  
  'color',  
  'border-top-color',  
  'border-bottom-color',  
  'border-right-color',  
  'border-left-color',  
  'background-color',  
  'fill',  
  'stroke',  
  // PSEUDO_CLASSES  
  'color:h:f:a:vi'  
);  
@include generateThemeHelpers($themeRules);

This will generate the following CSS:

.dark .primary-100-color, .primary-100-color {  
  color: rgba(var(--primary-100), 1)  
}

.dark .primary-200-color, .primary-200-color {  
  color: rgba(var(--primary-100), 1)  
}

.dark .primary-100-color\:vi:visited, .primary-100-color\:vi:visited {  
  color: rgba(var(--primary-100), 1)  
}

and so on..

As you see, you can pass any CSS property, including pseudo classes. The following SASS map details the pseudo class keys and their values:

$PSEUDO_CLASSES: (  
  ':a': ':active',  
  ':c': ':checked',  
  ':d': ':default',  
  ':di': ':disabled',  
  ':e': ':empty',  
  ':en': ':enabled',  
  ':fi': ':first',  
  ':fc': ':first-child',  
  ':fot': ':first-of-type',  
  ':fs': ':fullscreen',  
  ':f': ':focus',  
  ':h': ':hover',  
  ':ind': ':indeterminate',  
  ':ir': ':in-range',  
  ':inv': ':invalid',  
  ':lc': ':last-child',  
  ':lot': ':last-of-type',  
  ':l': ':left',  
  ':li': ':link',  
  ':oc': ':only-child',  
  ':oot': ':only-of-type',  
  ':o': ':optional',  
  ':oor': ':out-of-range',  
  ':ro': ':read-only',  
  ':rw' : ':read-write',  
  ':req': ':required',  
  ':r': ':right',  
  ':rt' : ':root',  
  ':s': ':scope',  
  ':t' : ':target',  
  ':va': ':valid',  
  ':vi': ':visited'  
);

Now you can use the generated CSS classes directly in your HTML:
<a class="primary-100-color primary-200-color:a">
	The default color is primary-100
	The active color will be primary-200
</a>

Known issues

  • We discovered that Safari doesn't support the following syntax when it comes to borders with CSS variables:
/** This will NOT work */
border: 1px solid themify(primary-100);

/** This will work */
border-color: themify(primary-100);

/** This will work */
border: themify(primary-100) 1px solid;
  • Safari doesn't support box-shadow.

Contributors

Thanks goes to these wonderful people (emoji key):


Netanel Basal

📖 💻 🤔

bh86

📖 💻 🤔

This project follows the all-contributors specification. Contributions of any kind welcome!

License

Apache © datorama

Github

https://github.com/salesforce/themify

Comments(11)

  • 1

    build(deps): bump node-fetch from 2.6.0 to 2.6.1

    Bumps node-fetch from 2.6.0 to 2.6.1.

    Release notes

    Sourced from node-fetch's releases.

    v2.6.1

    This is an important security release. It is strongly recommended to update as soon as possible.

    See CHANGELOG for details.

    Changelog

    Sourced from node-fetch's changelog.

    v2.6.1

    This is an important security release. It is strongly recommended to update as soon as possible.

    • Fix: honor the size option after following a redirect.
    Commits
    • b5e2e41 update version number
    • 2358a6c Honor the size option after following a redirect and revert data uri support
    • 8c197f8 docs: Fix typos and grammatical errors in README.md (#686)
    • 1e99050 fix: Change error message thrown with redirect mode set to error (#653)
    • 244e6f6 docs: Show backers in README
    • 6a5d192 fix: Properly parse meta tag when parameters are reversed (#682)
    • 47a24a0 chore: Add opencollective badge
    • 7b13662 chore: Add funding link
    • 5535c2e fix: Check for global.fetch before binding it (#674)
    • 1d5778a docs: Add Discord badge
    • Additional commits viewable in compare view
    Maintainer changes

    This version was pushed to npm by akepinski, a new releaser for node-fetch since your current version.


    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

  • 2

    build(deps): bump handlebars from 4.1.2 to 4.7.6

    Bumps handlebars from 4.1.2 to 4.7.6.

    Changelog

    Sourced from handlebars's changelog.

    v4.7.6 - April 3rd, 2020

    Chore/Housekeeping:

    Compatibility notes:

    • Restored Node.js compatibility

    Commits

    v4.7.5 - April 2nd, 2020

    Chore/Housekeeping:

    • Node.js version support has been changed to v6+ Reverted in 4.7.6

    Compatibility notes:

    • Node.js < v6 is no longer supported Reverted in 4.7.6

    Commits

    v4.7.4 - April 1st, 2020

    Chore/Housekeeping:

    Compatibility notes:

    • No incompatibilities are to be expected

    Commits

    v4.7.3 - February 5th, 2020

    Chore/Housekeeping:

    • #1644 - Download links to aws broken on handlebarsjs.com - access denied (@Tea56)
    • Fix spelling and punctuation in changelog - d78cc73

    Bugfixes:

    • Add Type Definition for Handlebars.VERSION, Fixes #1647 - 4de51fe
    • Include Type Definition for runtime.js in Package - a32d05f

    Compatibility notes:

    Commits
    Maintainer changes

    This version was pushed to npm by erisds, a new releaser for handlebars since your current version.


    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

  • 3

    build(deps-dev): bump node-sass from 4.12.0 to 4.13.1

    Bumps node-sass from 4.12.0 to 4.13.1.

    Release notes

    Sourced from node-sass's releases.

    v4.13.1

    Community

    Supported Environments

    OS Architecture Node
    Windows x86 & x64 0.10, 0.12, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13
    OSX x64 0.10, 0.12, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13
    Linux* x86 & x64 0.10, 0.12, 1, 2, 3, 4, 5, 6, 7, 8**, 9**, 10**^, 11**^, 12**^, 13**^
    Alpine Linux x64 6, 8, 10, 11, 12, 13
    FreeBSD i386 amd64 8, 10, 12, 13

    *Linux support refers to Ubuntu, Debian, and CentOS 5+ ** Not available on CentOS 5 ^ Only available on x64

    v4.13.0

    Features

    Community

    Dependencies

    Supported Environments

    OS Architecture Node
    Windows x86 & x64 0.10, 0.12, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13
    OSX x64 0.10, 0.12, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13
    Linux* x86 & x64 0.10, 0.12, 1, 2, 3, 4, 5, 6, 7, 8**, 9**, 10**^, 11**^, 12**^, 13**^
    Alpine Linux x64 6, 8, 10, 11, 12, 13
    FreeBSD i386 amd64 6, 8, 10, 12, 13

    *Linux support refers to Ubuntu, Debian, and CentOS 5+

    Changelog

    Sourced from node-sass's changelog.

    v4.13.1

    https://github.com/sass/node-sass/releases/tag/v4.13.1

    v4.13.0

    https://github.com/sass/node-sass/releases/tag/v4.13.0

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

  • 4

    issue with @import insturctions

    trying to @import 'node_modules/datorama/themify/dist/themify';

    results in File to import not found or unreadable: node_modules/datorama/themify/dist/themify.

    workaround: @import 'node_modules/@datorama/themify/themify';

    am I missing something or is this a mistake in the guide?

    I'd be happy to open a PR if this is indeed a mistake

  • 5

    The automated release is failing 🚨

    :rotating_light: The automated release from the master branch failed. :rotating_light:

    I recommend you give this issue a high priority, so other packages depending on you could benefit from your bug fixes and new features.

    You can find below the list of errors reported by semantic-release. Each one of them has to be resolved in order to automatically publish your package. I’m sure you can resolve this 💪.

    Errors are usually caused by a misconfiguration or an authentication problem. With each error reported below you will find explanation and guidance to help you to resolve it.

    Once all the errors are resolved, semantic-release will release your package the next time you push a commit to the master branch. You can also manually restart the failed CI job that runs semantic-release.

    If you are not sure how to resolve this, here is some links that can help you:

    If those don’t help, or if this issue is reporting something you think isn’t right, you can always ask the humans behind semantic-release.


    Missing package.json file.

    A package.json file at the root of your project is required to release on npm.

    Please follow the npm guideline to create a valid package.json file.


    Good luck with your project ✨

    Your semantic-release bot :package::rocket:

  • 6

    build(deps): bump decode-uri-component from 0.2.0 to 0.2.2

    Bumps decode-uri-component from 0.2.0 to 0.2.2.

    Release notes

    Sourced from decode-uri-component's releases.

    v0.2.2

    • Prevent overwriting previously decoded tokens 980e0bf

    https://github.com/SamVerschueren/decode-uri-component/compare/v0.2.1...v0.2.2

    v0.2.1

    • Switch to GitHub workflows 76abc93
    • Fix issue where decode throws - fixes #6 746ca5d
    • Update license (#1) 486d7e2
    • Tidelift tasks a650457
    • Meta tweaks 66e1c28

    https://github.com/SamVerschueren/decode-uri-component/compare/v0.2.0...v0.2.1

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

  • 7

    build(deps): bump engine.io from 3.2.1 to 6.2.1

    Bumps engine.io from 3.2.1 to 6.2.1.

    Release notes

    Sourced from engine.io's releases.

    6.2.1

    :warning: This release contains an important security fix :warning:

    A malicious client could send a specially crafted HTTP request, triggering an uncaught exception and killing the Node.js process:

    Error: read ECONNRESET
        at TCP.onStreamRead (internal/stream_base_commons.js:209:20)
    Emitted 'error' event on Socket instance at:
        at emitErrorNT (internal/streams/destroy.js:106:8)
        at emitErrorCloseNT (internal/streams/destroy.js:74:3)
        at processTicksAndRejections (internal/process/task_queues.js:80:21) {
      errno: -104,
      code: 'ECONNRESET',
      syscall: 'read'
    }
    

    Please upgrade as soon as possible.

    Bug Fixes

    • catch errors when destroying invalid upgrades (#658) (425e833)

    6.2.0

    Features

    • add the "maxPayload" field in the handshake details (088dcb4)

    So that clients in HTTP long-polling can decide how many packets they have to send to stay under the maxHttpBufferSize value.

    This is a backward compatible change which should not mandate a new major revision of the protocol (we stay in v4), as we only add a field in the JSON-encoded handshake data:

    0{"sid":"lv_VI97HAXpY6yYWAAAC","upgrades":["websocket"],"pingInterval":25000,"pingTimeout":5000,"maxPayload":1000000}
    

    Links

    6.1.3

    Bug Fixes

    • typings: allow CorsOptionsDelegate as cors options (#641) (a463d26)
    • uws: properly handle chunked content (#642) (3367440)

    ... (truncated)

    Changelog

    Sourced from engine.io's changelog.

    6.2.1 (2022-11-20)

    :warning: This release contains an important security fix :warning:

    A malicious client could send a specially crafted HTTP request, triggering an uncaught exception and killing the Node.js process:

    Error: read ECONNRESET
        at TCP.onStreamRead (internal/stream_base_commons.js:209:20)
    Emitted 'error' event on Socket instance at:
        at emitErrorNT (internal/streams/destroy.js:106:8)
        at emitErrorCloseNT (internal/streams/destroy.js:74:3)
        at processTicksAndRejections (internal/process/task_queues.js:80:21) {
      errno: -104,
      code: 'ECONNRESET',
      syscall: 'read'
    }
    

    Please upgrade as soon as possible.

    Bug Fixes

    • catch errors when destroying invalid upgrades (#658) (425e833)

    3.6.0 (2022-06-06)

    Bug Fixes

    Features

    • decrease the default value of maxHttpBufferSize (58e274c)

    This change reduces the default value from 100 mb to a more sane 1 mb.

    This helps protect the server against denial of service attacks by malicious clients sending huge amounts of data.

    See also: https://github.com/advisories/GHSA-j4f2-536g-r55m

    • increase the default value of pingTimeout (f55a79a)

    ... (truncated)

    Commits
    • 24b847b chore(release): 6.2.1
    • 425e833 fix: catch errors when destroying invalid upgrades (#658)
    • 99adb00 chore(deps): bump xmlhttprequest-ssl and engine.io-client in /examples/latenc...
    • d196f6a chore(deps): bump minimatch from 3.0.4 to 3.1.2 (#660)
    • 7c1270f chore(deps): bump nanoid from 3.1.25 to 3.3.1 (#659)
    • 535a01d ci: add Node.js 18 in the test matrix
    • 1b71a6f docs: remove "Vanilla JS" highlight from README (#656)
    • 917d1d2 refactor: replace deprecated String.prototype.substr() (#646)
    • 020801a chore: add changelog for version 3.6.0
    • ed1d6f9 test: make test script work on Windows (#643)
    • Additional commits viewable in compare view

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

  • 8

    build(deps): bump copy-props from 2.0.4 to 2.0.5

    Bumps copy-props from 2.0.4 to 2.0.5.

    Release notes

    Sourced from copy-props's releases.

    2.0.5

    Fix

    • Avoids prototype pollution (#7)

    Doc

    • Update license years.
    • Transfer ownership to Gulp Team (#6)

    Build

    • Update dependencies: each-props (>=1.3.2), is-plain-object (>=5.0.0).

    Test

    • Expand test versions to v11〜v14.
    Changelog

    Sourced from copy-props's changelog.

    Changelog

    3.0.1 (2021-10-31)

    Bug Fixes

    • ci: Rename prettierignore typo & avoid formatting web (192badf)
    • Update dependencies (ba8a51c)

    3.0.0 (2021-09-25)

    ⚠ BREAKING CHANGES

    • Normalize repository, dropping node <10.13 support (#8)

    Miscellaneous Chores

    • Normalize repository, dropping node <10.13 support (#8) (85b1165)
    Commits
    • 40b7974 2.0.5
    • 2c738f5 Fix: Avoids prototype pollution (#7)
    • 4cac863 Merge: Transfer ownership to Gulp Team (#6)
    • 54a791d Doc: Transfer ownership to Gulp Team
    • 196fc9e Merge: Update dependencies and expand ci test versions (#5)
    • e89907f Test: Update npm to v4 when nodejs is v5 because of npm install error.
    • e970322 Test: Run coveralls when nodejs >= 6 because of its supports
    • 063e534 Test: Add nodejs v11-v14 into ci test versions
    • 72270af Doc: Update license years
    • f60b928 Build: Update versions of dependencies
    • See full diff in compare view

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

  • 9

    build(deps): bump shell-quote from 1.6.1 to 1.7.3

    Bumps shell-quote from 1.6.1 to 1.7.3.

    Release notes

    Sourced from shell-quote's releases.

    v1.7.2

    • Fix a regression introduced in 1.6.3. This reverts the Windows path quoting fix. (144e1c2)

    v1.7.1

    • Fix $ being removed when not part of an environment variable name. (@​Adman in #32)

    v1.7.0

    • Add support for parsing >> and >& redirection operators. (@​forivall in #16)
    • Add support for parsing <( process substitution operator. (@​cuonglm in #15)

    v1.6.3

    • Fix Windows path quoting problems. (@​dy in #34)

    v1.6.2

    • Remove dependencies in favour of native methods. (@​zertosh in #21)
    Changelog

    Sourced from shell-quote's changelog.

    1.7.3

    • Fix a security issue where the regex for windows drive letters allowed some shell meta-characters to escape the quoting rules. (CVE-2021-42740)

    1.7.2

    • Fix a regression introduced in 1.6.3. This reverts the Windows path quoting fix. (144e1c2)

    1.7.1

    • Fix $ being removed when not part of an environment variable name. (@​Adman in #32)

    1.7.0

    • Add support for parsing >> and >& redirection operators. (@​forivall in #16)
    • Add support for parsing <( process substitution operator. (@​cuonglm in #15)

    1.6.3

    • Fix Windows path quoting problems. (@​dy in #34)

    1.6.2

    • Remove dependencies in favour of native methods. (@​zertosh in #21)
    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

  • 10

    build(deps-dev): bump node-sass from 4.12.0 to 7.0.0

    Bumps node-sass from 4.12.0 to 7.0.0.

    Release notes

    Sourced from node-sass's releases.

    v7.0.0

    Breaking changes

    Features

    Dependencies

    Community

    • Remove double word "support" from documentation (@​pzrq, #3159)

    Misc

    Supported Environments

    OS Architecture Node
    Windows x86 & x64 12, 14, 16, 17
    OSX x64 12, 14, 16, 17
    Linux* x64 12, 14, 16, 17
    Alpine Linux x64 12, 14, 16, 17
    FreeBSD i386 amd64 12, 14

    *Linux support refers to major distributions like Ubuntu, and Debian

    v6.0.1

    Dependencies

    Misc

    Supported Environments

    ... (truncated)

    Changelog

    Sourced from node-sass's changelog.

    v4.14.0

    https://github.com/sass/node-sass/releases/tag/v4.14.0

    v4.13.1

    https://github.com/sass/node-sass/releases/tag/v4.13.1

    v4.13.0

    https://github.com/sass/node-sass/releases/tag/v4.13.0

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

  • 11

    build(deps): bump node-fetch from 2.6.0 to 2.6.7

    Bumps node-fetch from 2.6.0 to 2.6.7.

    Release notes

    Sourced from node-fetch's releases.

    v2.6.7

    Security patch release

    Recommended to upgrade, to not leak sensitive cookie and authentication header information to 3th party host while a redirect occurred

    What's Changed

    Full Changelog: https://github.com/node-fetch/node-fetch/compare/v2.6.6...v2.6.7

    v2.6.6

    What's Changed

    Full Changelog: https://github.com/node-fetch/node-fetch/compare/v2.6.5...v2.6.6

    v2.6.2

    fixed main path in package.json

    v2.6.1

    This is an important security release. It is strongly recommended to update as soon as possible.

    See CHANGELOG for details.

    Changelog

    Sourced from node-fetch's changelog.

    Changelog

    All notable changes will be recorded here.

    The format is based on Keep a Changelog, and this project adheres to Semantic Versioning.

    What's Changed

    New Contributors

    Full Changelog: https://github.com/node-fetch/node-fetch/compare/v3.1.0...v3.1.2

    3.1.0

    What's Changed

    ... (truncated)

    Commits
    • 1ef4b56 backport of #1449 (#1453)
    • 8fe5c4e 2.x: Specify encoding as an optional peer dependency in package.json (#1310)
    • f56b0c6 fix(URL): prefer built in URL version when available and fallback to whatwg (...
    • b5417ae fix: import whatwg-url in a way compatible with ESM Node (#1303)
    • 18193c5 fix v2.6.3 that did not sending query params (#1301)
    • ace7536 fix: properly encode url with unicode characters (#1291)
    • 152214c Fix(package.json): Corrected main file path in package.json (#1274)
    • b5e2e41 update version number
    • 2358a6c Honor the size option after following a redirect and revert data uri support
    • 8c197f8 docs: Fix typos and grammatical errors in README.md (#686)
    • Additional commits viewable in compare view
    Maintainer changes

    This version was pushed to npm by endless, a new releaser for node-fetch since your current version.


    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.