Skip to content

How to migrate from v1 to v2

Jump to bottom
Jack Domleo edited this page Oct 20, 2021 · 4 revisions

Checka11y.css v2 comes with an important update to the way we use Sass. If you are only using the .css of Checka11y.css and you are not using the Sass of Checka11y.css, then v2 will have no impact and no breaking changes to you.

Dropped support for node-sass

Firstly, Sass have deprecated the node-sass package. So we have migrated to use sass and have dropped all support for node-sass.

Renamed the Sass !default variables

We took this opportunity to rename some of our !default Sass variables to make them less generic.

  • $text-warning -> $checka11y-text-warning
  • $bg-warning -> $checka11y-bg-warning
  • $border-warning -> $checka11y-border-warning
  • $text-error -> $checka11y-text-error
  • $bg-error -> $checka11y-bg-error
  • $border-error -> $checka11y-border-error
  • $font-family -> $checka11y-font-family
  • $font-size -> $checka11y-font-size
  • $font-weight -> $checka11y-font-weight

Replaced all instances of @import with @use

Secondly, we refactored the project to replace the @import at-rule with the @use at-rule. We did this because Sass are deprecating the use of @import.

So what does this mean for you?

Well, this will only cause a breaking change for you if you are overriding any of the Checka11y.css Sass !default variables, as described in the above point. If you are not overriding any of these using Sass, you can carry on using @import "~checka11y-css/src/checka11y"; exactly as you were before.

However, if you are overriding the !default Sass variables, then it is likely you are currently doing something like this:

$font-family: 'Open Sans', sans-serif;
$font-size: 24px;

@import "~checka11y-css/src/checka11y";

The above code will work with [email protected] because you are defining the variables before importing checka11y-css, which means they get overridden. However, the new @use syntax in [email protected] will not work like this. We will refactor the above code to work with [email protected].

@use '~checka11y-css/src/checka11y' as * with (
  $font-family: 'Open Sans', sans-serif,
  $font-size: 24px
);

Useful resources

Clone this wiki locally