Skip to content
This repository has been archived by the owner on Feb 11, 2022. It is now read-only.

Replace @import with @use rules as the import rules will be deprecated later this year #712

Merged
merged 15 commits into from Aug 2, 2021
Merged

Replace @import with @use rules as the import rules will be deprecated later this year #712

Show file tree
Hide file tree
Changes from 12 commits
Commits
Show all changes
15 commits
Select commit Hold shift + click to select a range
87c5006
Create index files and use @forward rules
tannerdolby Jul 21, 2021
49c418f
Replace @import with @use for shared-variables module
tannerdolby Jul 21, 2021
f88ec84
Replace @import rules with @use for mdn-minimalist.scss
tannerdolby Jul 21, 2021
d620ae4
Removes last import rules in mdn-miniamlist.scss
tannerdolby Jul 22, 2021
c4ffc56
Load the vars module without a namespace
tannerdolby Jul 22, 2021
781b5c7
Add use rules to load modules without a namespace
tannerdolby Jul 22, 2021
eae30a3
Update module path for index file in /atoms directory
tannerdolby Jul 22, 2021
f65a11b
Replace last few import rules in styleguide and test
tannerdolby Jul 22, 2021
0b68c90
Add extra newline to end of index files so linter is happy
tannerdolby Jul 22, 2021
6015eda
Make tests pass
tannerdolby Jul 22, 2021
7231526
Resolving namespace conflicts in test.scss
tannerdolby Jul 22, 2021
3cc1974
Cleanup test.scss, wrangle last pesky error in test suite
tannerdolby Jul 22, 2021
664d35d
Update the namespace for test-mixins-* modules
tannerdolby Jul 23, 2021
9c7f844
Try using import rules to see if describe is defined
tannerdolby Jul 23, 2021
bca1475
make tests pass
tannerdolby Jul 23, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
3 changes: 3 additions & 0 deletions sass/atoms/_base.scss
View file
Open in desktop
@@ -1,3 +1,6 @@
@use "../vars" as *;
@use "../mixins" as *;

html {
background-color: $white;
box-sizing: border-box;
Expand Down
2 changes: 2 additions & 0 deletions sass/atoms/_blockquote.scss
View file
Open in desktop
@@ -1,4 +1,6 @@
@use "sass:math";
@use "../mixins/" as *;
@use "../vars/" as *;

blockquote {
@include blockquote();
Expand Down
2 changes: 2 additions & 0 deletions sass/atoms/_buttons-ghost.scss
View file
Open in desktop
@@ -1,3 +1,5 @@
@use "../vars/" as *;

/* Turns off background and border and set cursor to pointer. */
.ghost {
background: none;
Expand Down
2 changes: 2 additions & 0 deletions sass/atoms/_buttons.scss
View file
Open in desktop
@@ -1,4 +1,6 @@
@use "sass:math";
@use "../mixins/" as *;
@use "../vars/" as *;

.button,
a.button {
Expand Down
3 changes: 3 additions & 0 deletions sass/atoms/_callout.scss
View file
Open in desktop
@@ -1,3 +1,6 @@
@use "../mixins/" as *;
@use "../vars/" as *;

.callout {
background-color: $mdn-blue200;
border-radius: $default-border-radius;
Expand Down
1 change: 1 addition & 0 deletions sass/atoms/_code.scss
View file
Open in desktop
@@ -1,4 +1,5 @@
@use "sass:math";
@use "../vars/" as *;

code {
background-color: $mdn-neutral100;
Expand Down
1 change: 1 addition & 0 deletions sass/atoms/_examples.scss
View file
Open in desktop
@@ -1,4 +1,5 @@
@use "sass:math";
@use "../vars/" as *;

.sample-code-frame {
border: $thin-primary-border;
Expand Down
2 changes: 2 additions & 0 deletions sass/atoms/_forms.scss
View file
Open in desktop
@@ -1,3 +1,5 @@
@use "../vars/" as *;

form {
.field-group {
margin-bottom: 20px;
Expand Down
1 change: 1 addition & 0 deletions sass/atoms/_icons.scss
View file
Open in desktop
@@ -1,4 +1,5 @@
@use "sass:math";
@use "../vars/" as *;

.icon {
background-position: 0 0;
Expand Down
20 changes: 20 additions & 0 deletions sass/atoms/_index.scss
View file
Open in desktop
@@ -0,0 +1,20 @@
@forward "../atoms/base";
@forward "../atoms/typography";
@forward "../atoms/blockquote";
@forward "../atoms/links";
@forward "../atoms/lists";
@forward "../atoms/icons";
@forward "../atoms/callout";
@forward "../atoms/notifications";
@forward "../atoms/meta";
@forward "../atoms/pre";
@forward "../atoms/code";
@forward "../atoms/kbd";
@forward "../atoms/buttons";
@forward "../atoms/buttons-ghost";
@forward "../atoms/forms";
@forward "../atoms/tables";
@forward "../atoms/properties-table";
@forward "../atoms/overlays";
@forward "../atoms/utils";
@forward "../atoms/examples";
1 change: 1 addition & 0 deletions sass/atoms/_kbd.scss
View file
Open in desktop
@@ -1,4 +1,5 @@
@use "sass:math";
@use "../vars/" as *;

/* https://developer.mozilla.org/en-US/docs/Web/HTML/Element/kbd */
kbd {
Expand Down
2 changes: 2 additions & 0 deletions sass/atoms/_links.scss
View file
Open in desktop
@@ -1,4 +1,6 @@
@use "sass:math";
@use "../vars/" as *;
@use "../mixins/" as *;

a {
color: $link-color;
Expand Down
2 changes: 2 additions & 0 deletions sass/atoms/_lists.scss
View file
Open in desktop
@@ -1,3 +1,5 @@
@use "../vars/" as *;

dl {
dt {
font-weight: bold;
Expand Down
1 change: 1 addition & 0 deletions sass/atoms/_meta.scss
View file
Open in desktop
@@ -1,4 +1,5 @@
@use "sass:math";
@use "../vars/" as *;

/* General Badges */
.badge {
Expand Down
2 changes: 2 additions & 0 deletions sass/atoms/_notifications.scss
View file
Open in desktop
@@ -1,3 +1,5 @@
@use "../vars/" as *;

/* notification text styles */
.neutral {
color: $mdn-blue600;
Expand Down
2 changes: 2 additions & 0 deletions sass/atoms/_overlays.scss
View file
Open in desktop
@@ -1,3 +1,5 @@
@use "../vars/" as *;

/* Style for general page overlay. Currently used with
the main menu on mobile. */
.page-overlay {
Expand Down
2 changes: 2 additions & 0 deletions sass/atoms/_pre.scss
View file
Open in desktop
@@ -1,3 +1,5 @@
@use "../vars/" as *;

pre {
background-color: $mdn-neutral100;
border-left: $code-example-border;
Expand Down
2 changes: 2 additions & 0 deletions sass/atoms/_properties-table.scss
View file
Open in desktop
@@ -1,4 +1,6 @@
@use "sass:math";
@use "../mixins/" as *;
@use "../vars/" as *;

/*
* Property tables, for an example see :
Expand Down
2 changes: 2 additions & 0 deletions sass/atoms/_tables.scss
View file
Open in desktop
@@ -1,4 +1,6 @@
@use "sass:math";
@use "../mixins/" as *;
@use "../vars/" as *;

table {
border: $standard-light-border;
Expand Down
3 changes: 3 additions & 0 deletions sass/atoms/_typography.scss
View file
Open in desktop
@@ -1,3 +1,6 @@
@use "../mixins/" as *;
@use "../vars/" as *;

@font-face {
font-display: swap;
font-family: zillaslab;
Expand Down
1 change: 1 addition & 0 deletions sass/atoms/_utils.scss
View file
Open in desktop
@@ -1,3 +1,4 @@
@use "../mixins/" as *;
/*
* Hide an element visually, but not from screen readers
*/
Expand Down
43 changes: 5 additions & 38 deletions sass/mdn-minimalist.scss
View file
Open in desktop
@@ -1,38 +1,5 @@
@import "./lib/reset";

@import "./vars/mdn-web-docs-palette";
@import "./vars/backgrounds";
@import "./vars/color-gradients";
@import "./vars/layout";
@import "./vars/borders";
@import "./vars/shadows";
@import "./vars/typography";

@import "./mixins/animation";
@import "./mixins/buttons";
@import "./mixins/links";
@import "./mixins/typography";
@import "./mixins/utils";

@import "./atoms/base";
@import "./atoms/typography";
@import "./atoms/blockquote";
@import "./atoms/links";
@import "./atoms/lists";
@import "./atoms/icons";
@import "./atoms/callout";
@import "./atoms/notifications";
@import "./atoms/meta";
@import "./atoms/pre";
@import "./atoms/code";
@import "./atoms/kbd";
@import "./atoms/buttons";
@import "./atoms/buttons-ghost";
@import "./atoms/forms";
@import "./atoms/tables";
@import "./atoms/properties-table";
@import "./atoms/overlays";
@import "./atoms/utils";
@import "./atoms/examples";

@import "./utils/utils";
@use "sass:math";
@use "./vars" as *;
@use "./atoms" as *;
@use "./lib/reset";
@use "./utils/utils";
2 changes: 2 additions & 0 deletions sass/mixins/_buttons.scss
View file
Open in desktop
@@ -1,3 +1,5 @@
@use "../vars" as *;

/*
* Sets base, hover, focus and active state styles for solid buttons.
* @param `$bg-color` - background color for default state [default: `$mdn-blue600`]
Expand Down
5 changes: 5 additions & 0 deletions sass/mixins/_index.scss
View file
Open in desktop
@@ -0,0 +1,5 @@
@forward "./animation";
@forward "./buttons";
@forward "./links";
@forward "./typography";
@forward "./utils";
2 changes: 2 additions & 0 deletions sass/mixins/_links.scss
View file
Open in desktop
@@ -1,3 +1,5 @@
@use "../vars/" as *;

@mixin highlighted-link-state() {
background-color: $mdn-blue700;
color: $text-color-inverted;
Expand Down
3 changes: 3 additions & 0 deletions sass/mixins/_typography.scss
View file
Open in desktop
@@ -1,3 +1,6 @@
@use "../vars/" as *;
@use "./utils" as *;

@mixin set-heading-font-family() {
font-family: $heading-font-family;
}
Expand Down
2 changes: 2 additions & 0 deletions sass/mixins/_utils.scss
View file
Open in desktop
@@ -1,3 +1,5 @@
@use "../vars/" as *;

/* Used with flexbox and grid. The new syntax is to use `gap`, but here
we also provide the fallback of `grid-gap`. This is also why we need
the stylelint-disable-line as the order is important */
Expand Down
4 changes: 1 addition & 3 deletions sass/shared-variables.module.scss
View file
Open in desktop
@@ -1,6 +1,4 @@
@import "./vars/mdn-web-docs-palette";
@import "./vars/backgrounds";
@import "./vars/color-gradients";
@use "./vars" as *;

:export {
mdn-red100: $mdn-red100;
Expand Down
2 changes: 2 additions & 0 deletions sass/vars/_borders.scss
View file
Open in desktop
@@ -1,4 +1,6 @@
@use "sass:math";
@use "./mdn-web-docs-palette" as *;
@use "./layout" as *;

$standard-light-border: 1px solid $mdn-neutral400;
$standard-primary-border: math.div($base-unit, 3) solid $mdn-blue700;
Expand Down
2 changes: 2 additions & 0 deletions sass/vars/_color-gradients.scss
View file
Open in desktop
@@ -1,3 +1,5 @@
@use "./mdn-web-docs-palette" as *;

/* Gradients */
$blockquote-gradient: linear-gradient(to right, $mdn-blue700, $mdn-blue300);
$standard-gradient: linear-gradient(to right, $mdn-blue300, $mdn-green100);
Expand Down
7 changes: 7 additions & 0 deletions sass/vars/_index.scss
View file
Open in desktop
@@ -0,0 +1,7 @@
@forward "./backgrounds";
@forward "./borders";
@forward "./color-gradients";
@forward "./layout";
@forward "./mdn-web-docs-palette";
@forward "./shadows";
@forward "./typography";
2 changes: 2 additions & 0 deletions sass/vars/_shadows.scss
View file
Open in desktop
@@ -1,3 +1,5 @@
@use "./mdn-web-docs-palette" as *;

$button-active-state-shadow: 1px 1px 0 3px $mdn-blue300,
-1px -1px 0 3px $mdn-blue300;
$light-gray-shadow: 0 1px 2px 1px $mdn-neutral200;
2 changes: 2 additions & 0 deletions styleguide/assets/molecules/_swatch-library.scss
View file
Open in desktop
@@ -1,3 +1,5 @@
@use "../vars/" as *;

ul.swatch-library {
display: flex;
flex-wrap: wrap;
Expand Down
24 changes: 12 additions & 12 deletions styleguide/assets/styleguide.scss
View file
Open in desktop
@@ -1,16 +1,16 @@
@import "../../sass/vars/mdn-web-docs-palette";
@import "./vars/layout";
@import "../../sass/vars/typography";
@use "../../sass/vars/mdn-web-docs-palette";
@use "./vars/layout";
@use "../../sass/vars/typography";

@import "./utils/layout";
@use "./utils/layout";

@import "./atoms/logo";
@import "./atoms/samples";
@import "./atoms/tables";
@use "./atoms/logo";
@use "./atoms/samples";
@use "./atoms/tables";

@import "./molecules/button-gallery";
@import "./molecules/swatch-library";
@import "./molecules/toc";
@use "./molecules/button-gallery";
@use "./molecules/swatch-library";
@use "./molecules/toc";

@import "./organisms/main";
@import "./organisms/footer";
@use "./organisms/main";
@use "./organisms/footer";
24 changes: 8 additions & 16 deletions test/sass/test.scss
View file
Open in desktop
@@ -1,19 +1,11 @@
/* Requirements */
@import "../../node_modules/sass-true/sass/true";

@import "../../sass/vars/mdn-web-docs-palette";
@import "../../sass/vars/layout";
@import "../../sass/vars/typography";

@import "../../sass/mixins/buttons";
@import "../../sass/mixins/links";
@import "../../sass/mixins/typography";
@import "../../sass/mixins/utils";

@import "../../sass/atoms/buttons";
@use "../../node_modules/sass-true/sass/true";
@use "../../sass/vars/" as *;
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is where using index files are super nice! We can simply import the entire directory of stylesheets as a single module rather than worrying about using the "expected" ones which sometimes can be a pain to keep track of.

@use "../../sass/mixins/" as *;
@use "../../sass/atoms/" as *;

/* Tests */
@import "./test-mixins-buttons";
@import "./test-mixins-links";
@import "./test-mixins-typography";
@import "./test-mixins-utils";
@use "./test-mixins-buttons";
@use "./test-mixins-links";
@use "./test-mixins-typography";
@use "./test-mixins-utils";