Promote better deprecation communication and compatibility

[thisisdano]

We're handling deprecations more gracefully. Occasionally the design system will deprecate variables or functionality. Now we'll display a deprecation message in the terminal when compiling USWDS Sass to better communicate these changes. We're also improving backward compatibility by supporting deprecated variables, functions, and mixins throughout the major version cycle. This way, we can continue to improve how our code is structured while minimizing the effects of this restructuring on your projects.

This is how the deprecation warning prints in the terminal:

--------------------------------------------------------------------
✉ USWDS Notifications
--------------------------------------------------------------------
2.4.0: If your component settings aren't working as expected, make
sure you're importing the components settings in your Sass entry
point (often styles.scss) with `@import "uswds-theme-components"`.
A bug in 2.0 omitted that import.
--------------------------------------------------------------------
2.2.0: We changed the names of some settings.
$theme-navigation-width → $theme-header-min-width
$theme-megamenu-logo-text-width → $theme-header-logo-text-width
--------------------------------------------------------------------
2.0.2: We changed the names of some settings and mixins.
$theme-title-font-size → $theme-display-font-size
@include title → @include display
@include typeset-title → @include typeset-display
--------------------------------------------------------------------
These are notifications from the USWDS team, not necessarily a
problem with your code.

Disable notifications using $theme-show-notifications: false
--------------------------------------------------------------------

Success criteria

• Deprecated or changed variables, mixins, and functions continue to work throughout the major version
• Accurate warning shows on compile, with the changed functionality and its replacement
• Warning may be disabled

Fixes #3254

[mejiaj]

@thisisdano on a watch task this changelog update message would run every SCSS update right?

Do you have any thoughts on possibly moving the changelog message as a gulp task and maybe we can take advantage of:

const log = require('fancy-log');
const c = require('ansi-colors');

[thisisdano]

It would yeah — I don't think I know how to make run only once. I do worry that it's too "heavy", but I also think that's important to get a notification in the build process in addition to release notes, etc. Perhaps there is a better way?

For me, the downside to a gulp-based solution is it's too tied to uswds-gulp — if we can build it into the Sass itself, it should work regardless of how a user compiles.

The upside it it looks less like an error and could maybe have more sophisticated logic. Even so, I'm inclined to keep it in Sass.

[thisisdano]

Perhaps this needs more time to bake and we should wait for a later release

[thisisdano]

On second thought, I think this is better to get in right now. Then we can work to improve it.
@mejiaj Anything you consider a blocking issue here?

[mejiaj]

No sir, seems good to go. I'll see if I can prototype something on my end and see how/if we can improve. But as of now, you're right. It's good info for users.