-
Notifications
You must be signed in to change notification settings - Fork 31
How to migrate from v1 to v2
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.
Firstly, Sass have deprecated the node-sass package. So we have migrated to use sass and have dropped all support for node-sass.
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
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 checka11y-css@1.x because you are defining the variables before importing checka11y-css, which means they get overridden. However, the new @use syntax in checka11y-css@2.x will not work like this. We will refactor the above code to work with checka11y-css@2.x.
@use '~checka11y-css/src/checka11y' as * with (
$font-family: 'Open Sans', sans-serif,
$font-size: 24px
);