Migrate /products to use Sass @use (Issue #10896) (#15875)

mozilla · Jan 24, 2025 · aa2f6a0 · aa2f6a0
1 parent c4815c6
commit aa2f6a0
Show file tree

Hide file tree

Showing 15 changed files with 47 additions and 90 deletions.
diff --git a/media/css/products/landing.scss b/media/css/products/landing.scss
@@ -2,10 +2,7 @@
 // License, v. 2.0. If a copy of the MPL was not distributed with this
 // file, You can obtain one at https://mozilla.org/MPL/2.0/.
 
-$font-path: '/media/protocol/fonts';
-$image-path: '/media/protocol/img';
-
-@import '~@mozilla-protocol/core/protocol/css/includes/lib';
+@use '~@mozilla-protocol/core/protocol/css/includes/lib' as *;
 
 
 // hide the privacy notice to match the other buttons

diff --git a/media/css/products/monitor/waitlist.scss b/media/css/products/monitor/waitlist.scss
@@ -2,10 +2,7 @@
 // License, v. 2.0. If a copy of the MPL was not distributed with this
 // file, You can obtain one at https://mozilla.org/MPL/2.0/.
 
-$font-path: '/media/protocol/fonts';
-$image-path: '/media/protocol/img';
-
-@import '~@mozilla-protocol/core/protocol/css/includes/lib';
+@use '~@mozilla-protocol/core/protocol/css/includes/lib' as *;
 
 .section-subscribe {
     .mzp-l-content:first-child {

diff --git a/media/css/products/vpn/article.scss b/media/css/products/vpn/article.scss
@@ -2,12 +2,9 @@
 // License, v. 2.0. If a copy of the MPL was not distributed with this
 // file, You can obtain one at https://mozilla.org/MPL/2.0/.
 
-$font-path: '/media/protocol/fonts';
-$image-path: '/media/protocol/img';
-
-@import '~@mozilla-protocol/core/protocol/css/includes/lib';
-@import '~@mozilla-protocol/core/protocol/css/components/logos/wordmark';
-@import '~@mozilla-protocol/core/protocol/css/components/logos/wordmark-product-vpn';
+@use '~@mozilla-protocol/core/protocol/css/includes/lib' as * with ($font-path: '/media/protocol/fonts', $image-path: '/media/protocol/img');
+@use '~@mozilla-protocol/core/protocol/css/components/logos/wordmark';
+@use '~@mozilla-protocol/core/protocol/css/components/logos/wordmark-product-vpn';
 
 .vpn-hero {
     .mzp-l-content {

diff --git a/media/css/products/vpn/common-refresh.scss b/media/css/products/vpn/common-refresh.scss
@@ -2,11 +2,8 @@
 // License, v. 2.0. If a copy of the MPL was not distributed with this
 // file, You can obtain one at https://mozilla.org/MPL/2.0/.
 
-$font-path: '/media/protocol/fonts';
-$image-path: '/media/protocol/img';
-
-@import 'includes/lib';
-@import '~@mozilla-protocol/core/protocol/css/includes/lib';
+@use '~@mozilla-protocol/core/protocol/css/includes/lib' as *;
+@use 'includes/lib' as *;
 
 main {
     h1, h2, h3, h4, h5, h6 {

diff --git a/media/css/products/vpn/common.scss b/media/css/products/vpn/common.scss
@@ -2,13 +2,10 @@
 // License, v. 2.0. If a copy of the MPL was not distributed with this
 // file, You can obtain one at https://mozilla.org/MPL/2.0/.
 
-$font-path: '/media/protocol/fonts';
-$image-path: '/media/protocol/img';
-
-@import '~@mozilla-protocol/core/protocol/css/includes/lib';
-@import 'includes/lib';
-@import '~@mozilla-protocol/core/protocol/css/components/logos/wordmark';
-@import '~@mozilla-protocol/core/protocol/css/components/logos/wordmark-product-vpn';
+@use '~@mozilla-protocol/core/protocol/css/includes/lib' as * with ($font-path: '/media/protocol/fonts', $image-path: '/media/protocol/img');
+@use '~@mozilla-protocol/core/protocol/css/components/logos/wordmark';
+@use '~@mozilla-protocol/core/protocol/css/components/logos/wordmark-product-vpn';
+@use 'includes/lib' as *;
 
 
 // * -------------------------------------------------------------------------- */

diff --git a/media/css/products/vpn/components/block.scss b/media/css/products/vpn/components/block.scss
@@ -2,11 +2,8 @@
 // License, v. 2.0. If a copy of the MPL was not distributed with this
 // file, You can obtain one at https://mozilla.org/MPL/2.0/.
 
-$font-path: '/media/protocol/fonts';
-$image-path: '/media/protocol/img';
-
-@import '~@mozilla-protocol/core/protocol/css/includes/lib';
-@import '../includes/lib';
+@use '~@mozilla-protocol/core/protocol/css/includes/lib' as *;
+@use '../includes/lib' as *;
 
 // * -------------------------------------------------------------------------- */
 // Content Block

diff --git a/media/css/products/vpn/components/hero.scss b/media/css/products/vpn/components/hero.scss
@@ -2,11 +2,8 @@
 // License, v. 2.0. If a copy of the MPL was not distributed with this
 // file, You can obtain one at https://mozilla.org/MPL/2.0/.
 
-$font-path: '/media/protocol/fonts';
-$image-path: '/media/protocol/img';
-
-@import '~@mozilla-protocol/core/protocol/css/includes/lib';
-@import '../includes/lib';
+@use '~@mozilla-protocol/core/protocol/css/includes/lib' as *;
+@use '../includes/lib' as *;
 
 // * -------------------------------------------------------------------------- */
 // Hero component

diff --git a/media/css/products/vpn/components/unsupported-language.scss b/media/css/products/vpn/components/unsupported-language.scss
@@ -2,11 +2,8 @@
 // License, v. 2.0. If a copy of the MPL was not distributed with this
 // file, You can obtain one at https://mozilla.org/MPL/2.0/.
 
-$font-path: '/media/protocol/fonts';
-$image-path: '/media/protocol/img';
-
-@import '~@mozilla-protocol/core/protocol/css/includes/lib';
-@import '../includes/lib';
+@use '~@mozilla-protocol/core/protocol/css/includes/lib' as *;
+@use '../includes/lib' as *;
 
 .vpn-unsupported-language {
     background: url('/media/img/products/vpn/common/lang-bubble.svg') top right no-repeat,

diff --git a/media/css/products/vpn/download.scss b/media/css/products/vpn/download.scss
@@ -2,11 +2,9 @@
 // License, v. 2.0. If a copy of the MPL was not distributed with this
 // file, You can obtain one at https://mozilla.org/MPL/2.0/.
 
-$font-path: '/media/protocol/fonts';
-$image-path: '/media/protocol/img';
 $vpn-download-mq-2xl: '(min-width: 1450px)';
 
-@import '~@mozilla-protocol/core/protocol/css/includes/lib';
+@use '~@mozilla-protocol/core/protocol/css/includes/lib' as *;
 
 .vpn-downloads {
     background-color: $color-marketing-gray-10;

diff --git a/media/css/products/vpn/features.scss b/media/css/products/vpn/features.scss
@@ -2,13 +2,10 @@
 // License, v. 2.0. If a copy of the MPL was not distributed with this
 // file, You can obtain one at https://mozilla.org/MPL/2.0/.
 
-$font-path: '/media/protocol/fonts';
-$image-path: '/media/protocol/img';
-
-@import 'includes/lib';
-@import '~@mozilla-protocol/core/protocol/css/includes/lib';
-@import '~@mozilla-protocol/core/protocol/css/components/logos/wordmark';
-@import '~@mozilla-protocol/core/protocol/css/components/logos/wordmark-product-vpn';
+@use '~@mozilla-protocol/core/protocol/css/includes/lib' as * with ($font-path: '/media/protocol/fonts', $image-path: '/media/protocol/img');
+@use '~@mozilla-protocol/core/protocol/css/components/logos/wordmark';
+@use '~@mozilla-protocol/core/protocol/css/components/logos/wordmark-product-vpn';
+@use 'includes/lib' as *;
 
 .c-features-main-header {
     text-align: center;

diff --git a/media/css/products/vpn/invite.scss b/media/css/products/vpn/invite.scss
@@ -2,15 +2,12 @@
 // License, v. 2.0. If a copy of the MPL was not distributed with this
 // file, You can obtain one at https://mozilla.org/MPL/2.0/.
 
-$font-path: '/media/protocol/fonts';
-$image-path: '/media/protocol/img';
-
-@import '~@mozilla-protocol/core/protocol/css/includes/lib';
-@import '~@mozilla-protocol/core/protocol/css/components/forms/form';
-@import '~@mozilla-protocol/core/protocol/css/components/forms/field';
-@import '~@mozilla-protocol/core/protocol/css/components/forms/choice';
-@import '~@mozilla-protocol/core/protocol/css/components/forms/status';
-@import '~@mozilla-protocol/core/protocol/css/components/forms/set';
+@use '~@mozilla-protocol/core/protocol/css/includes/lib' as *;
+@use '~@mozilla-protocol/core/protocol/css/components/forms/form';
+@use '~@mozilla-protocol/core/protocol/css/components/forms/field';
+@use '~@mozilla-protocol/core/protocol/css/components/forms/choice';
+@use '~@mozilla-protocol/core/protocol/css/components/forms/status';
+@use '~@mozilla-protocol/core/protocol/css/components/forms/set';
 
 // * -------------------------------------------------------------------------- */
 // Newsletter Form

diff --git a/media/css/products/vpn/landing-refresh.scss b/media/css/products/vpn/landing-refresh.scss
@@ -2,12 +2,9 @@
 // License, v. 2.0. If a copy of the MPL was not distributed with this
 // file, You can obtain one at https://mozilla.org/MPL/2.0/.
 
-$font-path: '/media/protocol/fonts';
-$image-path: '/media/protocol/img';
-
-@import 'includes/lib';
-@import 'pricing-refresh';
-@import '~@mozilla-protocol/core/protocol/css/includes/lib';
+@use 'pricing-refresh';
+@use '~@mozilla-protocol/core/protocol/css/includes/lib' as *;
+@use 'includes/lib' as *;
 
 // * -------------------------------------------------------------------------- */
 // Smooth Scroll

diff --git a/media/css/products/vpn/platform-download.scss b/media/css/products/vpn/platform-download.scss
@@ -2,10 +2,7 @@
 // License, v. 2.0. If a copy of the MPL was not distributed with this
 // file, You can obtain one at https://mozilla.org/MPL/2.0/.
 
-$font-path: '/media/protocol/fonts';
-$image-path: '/media/protocol/img';
-
-@import '~@mozilla-protocol/core/protocol/css/includes/lib';
+@use '~@mozilla-protocol/core/protocol/css/includes/lib' as *;
 
 .platform-download-header {
     background-color: $color-marketing-gray-10;

diff --git a/media/css/products/vpn/pricing-refresh.scss b/media/css/products/vpn/pricing-refresh.scss
@@ -2,15 +2,13 @@
 // License, v. 2.0. If a copy of the MPL was not distributed with this
 // file, You can obtain one at https://mozilla.org/MPL/2.0/.
 
-$font-path: '/media/protocol/fonts';
-$image-path: '/media/protocol/img';
-
-@import 'includes/lib';
-@import 'components/unsupported-language';
-@import '~@mozilla-protocol/core/protocol/css/includes/lib';
-@import '~@mozilla-protocol/core/protocol/css/templates/multi-column';
-@import '~@mozilla-protocol/core/protocol/css/components/logos/wordmark';
-@import '~@mozilla-protocol/core/protocol/css/components/logos/wordmark-product-vpn';
+@use '~@mozilla-protocol/core/protocol/css/includes/lib' as * with ($font-path: '/media/protocol/fonts', $image-path: '/media/protocol/img');
+@use '~@mozilla-protocol/core/protocol/css/templates/multi-column';
+@use '~@mozilla-protocol/core/protocol/css/components/logos/wordmark';
+@use '~@mozilla-protocol/core/protocol/css/components/logos/wordmark-product-vpn';
+
+@use 'includes/lib' as *;
+@use 'components/unsupported-language';
 
 // * -------------------------------------------------------------------------- */
 // Horizontal pricing (default)

diff --git a/media/css/products/vpn/resource-center.scss b/media/css/products/vpn/resource-center.scss
@@ -2,17 +2,14 @@
 // License, v. 2.0. If a copy of the MPL was not distributed with this
 // file, You can obtain one at https://mozilla.org/MPL/2.0/.
 
-$font-path: '/media/protocol/fonts';
-$image-path: '/media/protocol/img';
-
-@import '~@mozilla-protocol/core/protocol/css/includes/lib';
-@import '~@mozilla-protocol/core/protocol/css/components/inline-list';
-@import '~@mozilla-protocol/core/protocol/css/includes/fonts/metropolis';
-@import '~@mozilla-protocol/core/protocol/css/includes/fonts/inter';
-@import '~@mozilla-protocol/core/protocol/css/components/logos/wordmark';
-@import '~@mozilla-protocol/core/protocol/css/components/logos/wordmark-product-vpn';
-@import '~@mozilla-protocol/core/protocol/css/components/breadcrumb';
-@import '../../cms/rich-text';
+@use '~@mozilla-protocol/core/protocol/css/includes/lib' as * with ($font-path: '/media/protocol/fonts', $image-path: '/media/protocol/img');
+@use '~@mozilla-protocol/core/protocol/css/components/inline-list';
+@use '~@mozilla-protocol/core/protocol/css/includes/fonts/metropolis';
+@use '~@mozilla-protocol/core/protocol/css/includes/fonts/inter';
+@use '~@mozilla-protocol/core/protocol/css/components/logos/wordmark';
+@use '~@mozilla-protocol/core/protocol/css/components/logos/wordmark-product-vpn';
+@use '~@mozilla-protocol/core/protocol/css/components/breadcrumb';
+@use '../../cms/rich-text';
 
 .resource-center-page-header {
     .mzp-l-content {