Migrate to Webpack (Issue #10310)

2020-06-01 13:56:19 +01:00 · 2020-06-01 13:56:19 +01:00 · 665323b14e
--- a/.eslintrc.js
+++ b/.eslintrc.js
@ -1,22 +1,35 @@
 module.exports = {
    env: {
-        'jasmine': true
+        'jasmine': true,
+        'commonjs': true
    },
    extends: [
        '@mozilla-protocol/eslint-config',
        'plugin:json/recommended'
    ],
    /**
-     * Provide a set of overrides for `gulpfile.js` in the root directory.
-     * Ideally we want to extend @mozilla-protocol/eslint-config/index-node,
-     * however ESLint does not currently allow extends inside glob overrides.
-     * (see https://github.com/eslint/eslint/issues/8813)
+     * A set of overrides for JavaScript assets where we support ES2015+.
     * */
    overrides: [
        {
-            files: ['gulpfile.js', 'tests/unit/karma.conf.js'],
+            files: [
+                'media/js/firefox/welcome/**/*.js',
+                'media/js/firefox/whatsnew/**/*.js'
+            ],
+            env: {
+                'es6': true
+            },
+            parserOptions: {
+                ecmaVersion: 8
+            }
+        },
+        {
+            files: [
+                'webpack.config.js',
+                'webpack.static.config.js',
+                'tests/unit/karma.conf.js'
+            ],
            env: {
-                'commonjs': true,
                'node': true,
                'es6': true
            },
--- a/.gitignore
+++ b/.gitignore
@ -55,4 +55,5 @@ package-lock.json
 static_build
 static_final
 static
+assets
 npm-debug.log
--- a/8
+++ b/8
@ -11,14 +11,13 @@ COPY package.json yarn.lock ./

 # install dependencies
 RUN yarn install --pure-lockfile
-RUN yarn global add gulp-cli@2.2.1

 # copy supporting files and media
-COPY .eslintrc.js .eslintignore .stylelintrc .stylelintignore gulpfile.js ./
+COPY .eslintrc.js .eslintignore .stylelintrc .stylelintignore webpack.config.js webpack.static.config.js ./
 COPY ./media ./media
 COPY ./tests/unit ./tests/unit

-RUN gulp build --production
+RUN npm run build


 ########
@ -113,7 +112,8 @@ FROM app-base AS release

 RUN bin/run-sync-all.sh

-COPY --from=assets /app/static_final /app/static_final
+COPY --from=assets /app/assets /app/assets
+
 RUN honcho run --env docker/envfiles/prod.env docker/bin/build_staticfiles.sh

 RUN echo "${GIT_SHA}" > ./root_files/revision.txt
--- a/bedrock/base/templatetags/helpers.py
+++ b/bedrock/base/templatetags/helpers.py
@ -122,7 +122,7 @@ def js_bundle(name):

    Bundles are defined in the "media/static-bundles.json" file.
    """
-    path = 'js/BUNDLES/{}.js'.format(name)
+    path = 'js/{}.js'.format(name)
    path = staticfiles_storage.url(path)
    return jinja2.Markup(JS_TEMPLATE % path)

@ -133,7 +133,7 @@ def css_bundle(name):

    Bundles are defined in the "media/static-bundles.json" file.
    """
-    path = 'css/BUNDLES/{}.css'.format(name)
+    path = 'css/{}.css'.format(name)
    path = staticfiles_storage.url(path)
    return jinja2.Markup(CSS_TEMPLATE % path)

--- a/bedrock/settings/base.py
+++ b/bedrock/settings/base.py
@ -403,7 +403,7 @@ STATICFILES_FINDERS = (
    'django.contrib.staticfiles.finders.FileSystemFinder',
 )
 STATICFILES_DIRS = (
-    path('static_final'),
+    path('assets'),
 )
 if DEBUG:
    STATICFILES_DIRS += (path('media'),)
--- a/docker-compose.yml
+++ b/docker-compose.yml
@ -11,15 +11,15 @@ services:
      target: assets
    image: mozmeao/bedrock_assets:${GIT_COMMIT:-latest}
    platform: linux/amd64
-    command: gulp
+    command: npm run watch
    ports:
      - "8000-8010:8000-8010"
    volumes:
      - ./media/:/app/media:delegated
      - ./bedrock/:/app/bedrock:delegated
+      - ./assets/:/app/assets:delegated
    environment:
      BS_PROXY_URL: "app:8080"
-      BS_OPEN_BROWSER: "false"

  # the django app
  app:
@ -45,6 +45,7 @@ services:
      - ./wsgi/:/app/wsgi:delegated
      - ./locale/:/app/locale:delegated
      - ./l10n/:/app/l10n:delegated
+      - ./assets/:/app/assets:delegated

  # run the tests against local changes
  test:
--- a/docs/coding.rst
+++ b/docs/coding.rst
@ -8,6 +8,99 @@
 Developing on Bedrock
 =====================

+Asset Management and Bundling
+-----------------------------
+
+Bedrock uses `Webpack <https://webpack.js.org/>`_ to manage front-end
+asset processing and bundling. This includes processing and minifying
+JavaScript and SCSS/CSS bundles, as well as managing static assets
+such as images, fonts, and other common file types.
+
+When developing on bedrock you can start Webpack by running ``make run``
+when using Docker, or ``npm start`` when running bedrock locally.
+
+Once Webpack has finished compiling, a local development server
+will be available at `localhost:8000 <http://localhost:8000/>`_. When
+Webpack detects changes to a JS/SCSS file, it will automatically
+recompile the bundle and then refresh any page running locally in the
+browser.
+
+Webpack Configuration
+~~~~~~~~~~~~~~~~~~~~~
+
+We have two main Webpack config files in the root directory:
+
+The ``webpack.static.config.js`` file is responsible for copying static
+assets, such as images and fonts, from the ``/media/`` directory over to
+the ``/assets/`` directory. This is required so Django can serve them
+correctly.
+
+The ``webpack.config.js`` file is responsible for processing JS and SCSS
+files in the ``/media/`` directory and compiling them into the ``/assets/``
+directory. This config file also starts a local development server and
+watches for file changes.
+
+We use two separate config files to keep responsibilities clearly defined,
+and to make the configs both shorter and easier to follow.
+
+.. note::
+
+    Because of the large number of files used in bedrock, only JS and SCSS
+    files managed by ``webpack.config.js`` are watched for changes when in
+    development mode. This helps save on memory consumption. The implication
+    of this is that files handled by ``webpack.static.config.js``
+    are only copied over when Webpack first runs. If you update an image for
+    example, then you will need to stop and restart Webpack to pick up the
+    change. This is not true for JS and SCSS files, which will be watched
+    for change automatically.
+
+Asset Bundling
+~~~~~~~~~~~~~~
+
+Asset bundles for both JS and SCSS are defined in ``./media/static-bundles.json``.
+This is the file where you can define the bundle names that will get used in page
+templates. For example, a CSS bundle can be defined as:
+
+```json
+"css": [
+    {
+        "files": [
+            "css/firefox/new/basic/download.scss"
+        ],
+        "name": "firefox_new_download"
+    }
+]
+```
+
+Which can then be referenced in a page template using:
+
+```jinja
+{{ css_bundle('firefox_new_download') }}
+```
+
+A JS bundle can be defied as:
+
+```json
+"js": [
+    {
+        "files": [
+            "protocol/js/protocol-modal.js",
+            "js/firefox/new/basic/download.js"
+        ],
+        "name": "firefox_new_download"
+    }
+]
+```
+Which can then be referenced in a page template using:
+
+```jinja
+{{ js_bundle('firefox_new_download') }}
+```
+
+Once you define a bundle in ``static-bundles.json``, the ``webpack.config.js``
+file will use these as entrypoints for compiling JS and CSS and watching for
+changes.
+
 Writing URL Patterns
 --------------------

--- a/docs/install.rst
+++ b/docs/install.rst
@ -111,10 +111,6 @@ The node dependencies for running the site can be installed with ``yarn``::

    $ yarn

-You'll also need to install the `Gulp <http://gulpjs.com/>`_ cli globally::
-
-    $ npm install -g gulp-cli
-
 .. note::

    Bedrock uses yarn to ensure that Node.js
@ -204,8 +200,9 @@ refreshing of the page works by injecting a small JS snippet into the page that
 and will refresh the page when it receives a signal. It also injects a script that shows a small notification in the
 top-right corner of the page to inform you that a refresh is happening and when the page connects to or is disconnected
 from the browsersync service. We've not seen issues with this, but since it is modifying the page it is possible that this
-could conflict with something on the page itself. Please let us know if you suspect this is happening for you. This notification
-can be disabled in the browsersync options in the ``gulpfile.js`` by setting ``notify: false`` in the ``browser-sync`` task.
+could conflict with something on the page itself. Please let us know if you suspect this is happening for you. This
+notification can be disabled in the browsersync options in ``webpack.config.js`` by setting ``notify: false`` in the
+``BrowserSyncPlugin`` config.

 Prod Mode
 ---------
--- a/gulpfile.js
+++ b/gulpfile.js
@ -1,370 +0,0 @@
-/* This Source Code Form is subject to the terms of the Mozilla Public
- * License, v. 2.0. If a copy of the MPL was not distributed with this
- * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
-
-'use strict';
-
-const gulp = require('gulp');
-const cached = require('gulp-cached');
-const filter = require('gulp-filter');
-const log = require('fancy-log');
-const colors = require('ansi-colors');
-const gulpif = require('gulp-if');
-const sass = require('gulp-sass');
-const cleanCSS = require('gulp-clean-css');
-const uglify = require('gulp-uglify');
-const concat = require('gulp-concat');
-const sourcemaps = require('gulp-sourcemaps');
-const del = require('del');
-const argv = require('yargs').argv;
-const browserSync = require('browser-sync').create();
-const merge = require('merge-stream');
-const staticBundles = require('./media/static-bundles.json');
-
-// directory for building LESS, SASS, and bundles
-const buildDir = 'static_build';
-
-// directory for the final assets ready for consumption
-const finalDir = 'static_final';
-
-const cachedOpts = {
-    optimizeMemory: true
-};
-
-global.watching = false;
-
-// gulp build --production
-const production = !!argv.production;
-
-const allBundleFiles = (fileType, fileExt) => {
-    let allFiles = [];
-    staticBundles[fileType].forEach(bundle => {
-        bundle.files.forEach(bFile => {
-            if (bFile.endsWith(fileExt)) {
-                allFiles.push(bFile);
-            }
-        });
-    });
-    return allFiles;
-};
-
-const handleError = task => {
-    return err => {
-        log.warn(colors.bold(colors.red(`[ERROR] ${task}:`)), colors.red(err));
-    };
-};
-
-const bundleCssFiles = bundle => {
-    let bundleFilename = `css/BUNDLES/${bundle.name}.css`;
-    if (global.watching) {
-        log.info(`building: ${bundleFilename}`);
-    }
-    let cssFiles = bundle.files.map(fileName => {
-        if (!fileName.endsWith('.css')) {
-            return fileName.replace(/\.scss$/i, '.css');
-        }
-        return fileName;
-    });
-    return gulp.src(cssFiles, {base: finalDir, 'cwd': finalDir})
-        .pipe(concat(bundleFilename))
-        .pipe(gulp.dest(finalDir));
-};
-
-const bundleJsFiles = bundle => {
-    let bundleFilename = `js/BUNDLES/${bundle.name}.js`;
-    if (global.watching) {
-        log.info(`building: ${bundleFilename}`);
-    }
-    return gulp.src(bundle.files, {base: finalDir, cwd: finalDir})
-        .pipe(gulpif(!production, sourcemaps.init()))
-        .pipe(concat(bundleFilename))
-        .pipe(gulpif(!production, sourcemaps.write({
-            'includeContent': true
-        })))
-        .pipe(gulp.dest(finalDir));
-};
-
-/***********************
- * Start Tasks
- */
-
-/**
- * Delete the static_build directory and start fresh.
- */
-function clean(cb) {
-    del([buildDir, finalDir]).then(() => {
-        cb();
-    });
-}
-
-/**
- * Copy assets from various sources into the static_build dir for processing.
- */
-function assetsCopy() {
-    return merge([
-        // SASS and LESS go to build dir
-        gulp.src([
-            'media/**/*.scss',
-            'node_modules/@mozilla-protocol/core/**/*',
-            '!node_modules/@mozilla-protocol/core/*'])
-            .pipe(gulpif(global.watching, cached('all', cachedOpts)))
-            .pipe(gulp.dest(buildDir)),
-        // Everything else goes to final dir
-        gulp.src([
-            'media/**/*',
-            '!media/**/*.scss',
-            'node_modules/@mozilla-protocol/core/**/*',
-            '!node_modules/@mozilla-protocol/core/**/*.scss',
-            '!node_modules/@mozilla-protocol/core/*'])
-            .pipe(gulpif(global.watching, cached('all', cachedOpts)))
-            .pipe(gulp.dest(finalDir)),
-    ]);
-}
-
-/**
- * Find all SASS files from bundles in the static_build directory and compile them.
- */
-function sassCompileAllFiles() {
-    return gulp.src(allBundleFiles('css', '.scss'), { base: buildDir, cwd: buildDir })
-        .pipe(gulpif(!production, sourcemaps.init()))
-        .pipe(sass({
-            sourceComments: !production,
-            outputStyle: production ? 'compressed' : 'nested'
-        }).on('error', handleError('SASS')))
-        .pipe(gulpif(!production, sourcemaps.write({
-            'includeContent': true
-        })))
-        .pipe(gulp.dest(finalDir));
-}
-
-/**
- * Watch and only compile those SASS files that have changed
- */
-function sassWatch(cb) {
-    const sassWatcher = gulp.watch(buildDir + '/css/**/*.scss', {base: buildDir});
-
-    sassWatcher.on('change', function(path) {
-        return gulp.src(path, {base: buildDir})
-            // filter out internal imports (files starting with "_" )
-            .pipe(filter(file => {
-                return !file.relative.startsWith('_');
-            }))
-            .pipe(sourcemaps.init())
-            .pipe(sass({
-                sourceComments: !production,
-                outputStyle: production ? 'compressed' : 'nested'
-            }).on('error', handleError('SASS')))
-            .pipe(sourcemaps.write({
-                'includeContent': true
-            }))
-            .pipe(gulp.dest(finalDir));
-    });
-
-    cb();
-}
-
-/**
- * Combine the CSS files after SASS/LESS compilation into bundles
- * based on definitions in the `media/static-bundles.json` file.
- */
-function cssCompileBundles() {
-    return merge(staticBundles.css.map(bundleCssFiles));
-}
-
-/**
- * Watch for changes to CSS files in the `static_final` directory
- * and recompile bundles when necessary.
- */
-function cssWatch(cb) {
-    const cssWatcher = gulp.watch(finalDir + '/css/**/*.css');
-
-    cssWatcher.on('change', function(path) {
-        let modBundles = staticBundles.css.filter(bundle => {
-            let contains = false;
-            bundle.files.every(filename => {
-                let cssfn = filename.replace(/\.scss$/i, '.css');
-                if (path.endsWith(cssfn)) {
-                    contains = true;
-                    return false;
-                }
-                return true;
-            });
-            return contains;
-        });
-        if (modBundles) {
-            modBundles.map(bundleCssFiles);
-            browserSync.reload();
-        }
-    });
-
-    cb();
-}
-
-/**
- * Combine the JS files into bundles
- * based on definitions in the `media/static-bundles.json` file.
- */
-function jsCompileBundles() {
-    return merge(staticBundles.js.map(bundleJsFiles));
-}
-
-/**
- * Watch for changes to JS files in the `static_final` directory
- * and recompile bundles when necessary.
- */
-function jsWatch(cb) {
-    const jsWatcher = gulp.watch(finalDir + '/js/**/*.js');
-
-    jsWatcher.on('change', function(path) {
-        let modBundles = staticBundles.js.filter(bundle => {
-            let contains = false;
-            bundle.files.every(filename => {
-                if (path.endsWith(filename)) {
-                    contains = true;
-                    return false;
-                }
-                return true;
-            });
-            return contains;
-        });
-        if (modBundles) {
-            modBundles.map(bundleJsFiles);
-            browserSync.reload();
-        }
-    });
-
-    cb();
-}
-
-/**
- * Minify all of the CSS files after compilation.
- */
-function cssMinify() {
-    return gulp.src(finalDir + '/css/**/*.css', {base: buildDir})
-        .pipe(cleanCSS({
-            compatibility: {
-                properties: {
-                    iePrefixHack: true, // controls keeping IE prefix hack used in oldIE.scss
-                },
-            }
-        }).on('error', handleError('CLEANCSS')))
-        .pipe(gulp.dest(finalDir));
-}
-
-/**
- * Minify all of the JS files after compilation.
- */
-function jsMinify() {
-    return gulp.src(finalDir + '/js/**/*.js', {base: buildDir})
-        .pipe(uglify({ie8: true}).on('error', handleError('UGLIFY')))
-        .pipe(gulp.dest(finalDir));
-}
-
-/**
- * Watch for changes in the `media` directory and copy changed files to
- * either `static_build` or `static_final` depending on the file type.
- */
-function assetsWatch(cb) {
-    const assetsWatcher = gulp.watch(['media/**/*', '!media/**/*.scss'], {base: 'media'});
-    const cssWatcher = gulp.watch('media/**/*.scss', {base: 'media'});
-    // send everything but scss to the final dir
-    assetsWatcher.on('change', function(path) {
-        return gulp.src(path, {base: 'media'})
-            .pipe(cached('all', cachedOpts))
-            .pipe(gulp.dest(finalDir));
-    });
-    // send scss to the build dir
-    cssWatcher.on('change', function(path) {
-        return gulp.src(path, {base: 'media'})
-            .pipe(cached('all', cachedOpts))
-            .pipe(gulp.dest(buildDir));
-    });
-
-    cb();
-}
-
-/**
- * Start the browser-sync daemon for local development.
- */
-function browserSyncTask(cb) {
-    const proxyURL = process.env.BS_PROXY_URL || 'localhost:8080';
-    const openBrowser = !(process.env.BS_OPEN_BROWSER === 'false');
-    browserSync.init({
-        port: 8000,
-        proxy: proxyURL,
-        open: openBrowser,
-        notify: true,
-        reloadDelay: 300,
-        reloadDebounce: 500,
-        injectChanges: false,
-        ui: {
-            port: 8001
-        },
-        serveStatic: [{
-            route: '/media',
-            dir: finalDir
-        }]
-    });
-    cb();
-}
-
-/**
- * Reload tasks used by `gulp watch`.
- */
-function reloadBrowser(cb) {
-    browserSync.reload();
-    cb();
-}
-
-const reloadSass = gulp.series(
-    sassCompileAllFiles,
-    reloadBrowser
-);
-
-// --------------------------
-// DEV/WATCH TASK
-// --------------------------
-function devWatch(cb) {
-    global.watching = true;
-
-    // --------------------------
-    // watch:sass library files
-    // --------------------------
-    gulp.watch(buildDir + '/css/**/_*.scss', reloadSass);
-
-    // --------------------------
-    // watch:html
-    // --------------------------
-    gulp.watch('bedrock/*/templates/**/*.html', reloadBrowser);
-
-    log.info(colors.green('Watching for changes...'));
-
-    cb();
-}
-
-/**
- * Build all assets in prep for production.
- * Pass the `--production` flag to turn off sourcemaps.
- */
-const buildTask = gulp.series(
-    clean,
-    assetsCopy,
-    sassCompileAllFiles,
-    gulp.parallel(jsCompileBundles, cssCompileBundles),
-    gulp.parallel(jsMinify, cssMinify)
-);
-gulp.task('build', buildTask);
-
-const defaultTask = gulp.series(
-    clean,
-    assetsCopy,
-    sassCompileAllFiles,
-    gulp.parallel(jsCompileBundles, cssCompileBundles),
-    assetsWatch,
-    browserSyncTask,
-    gulp.parallel(sassWatch, cssWatch, jsWatch),
-    devWatch
-);
-gulp.task('default', defaultTask);
-
-module.exports = defaultTask;
--- a/media/css/base/banners/eu-mr1-banner.scss
+++ b/media/css/base/banners/eu-mr1-banner.scss
@ -5,8 +5,8 @@
 $font-path: '/media/fonts';
 $image-path: '/media/protocol/img';

-@import '../../../protocol/css/includes/lib';
-@import '../../../protocol/css/includes/fonts/metropolis';
+@import '~@mozilla-protocol/core/protocol/css/includes/lib';
+@import '~@mozilla-protocol/core/protocol/css/includes/fonts/metropolis';

 #eu-mr1-banner {
    &.c-banner {
--- a/media/css/base/banners/firefox-app-store.scss
+++ b/media/css/base/banners/firefox-app-store.scss
@ -5,7 +5,7 @@
 $font-path: '/media/fonts';
 $image-path: '/media/protocol/img';

-@import '../../../protocol/css/includes/lib';
+@import '~@mozilla-protocol/core/protocol/css/includes/lib';

 #firefox-app-store-banner {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
--- a/media/css/base/banners/fundraiser.scss
+++ b/media/css/base/banners/fundraiser.scss
@ -5,7 +5,7 @@
 $font-path: '/media/fonts';
 $image-path: '/media/protocol/img';

-@import '../../../protocol/css/includes/lib';
+@import '~@mozilla-protocol/core/protocol/css/includes/lib';
@import 'includes/base';

@keyframes swoosh {
--- a/media/css/base/banners/includes/_base.scss
+++ b/media/css/base/banners/includes/_base.scss
@ -5,7 +5,7 @@
 $font-path: '/media/fonts';
 $image-path: '/media/protocol/img';

-@import '../../../../protocol/css/includes/lib';
+@import '~@mozilla-protocol/core/protocol/css/includes/lib';

 .c-banner {
    @include clearfix;
--- a/media/css/base/banners/mobile-compare.scss
+++ b/media/css/base/banners/mobile-compare.scss
@ -5,7 +5,7 @@
 $font-path: '/media/fonts';
 $image-path: '/media/protocol/img';

-@import '../../../protocol/css/includes/lib';
+@import '~@mozilla-protocol/core/protocol/css/includes/lib';

 #mobile-compare-banner {
    &.c-banner {
--- a/media/css/base/page-not-found.scss
+++ b/media/css/base/page-not-found.scss
@ -2,7 +2,7 @@
 // License, v. 2.0. If a copy of the MPL was not distributed with this
 // file, You can obtain one at http://mozilla.org/MPL/2.0/.

-@import '../../protocol/css/includes/lib';
+@import '~@mozilla-protocol/core/protocol/css/includes/lib';

 $font-path: '/media/fonts';
 $image-path: '/media/protocol/img';
--- a/media/css/contentful/firefox/c-article.scss
+++ b/media/css/contentful/firefox/c-article.scss
@ -7,5 +7,5 @@ $image-path: '/media/protocol/img';

 $brand-theme: 'firefox';

-@import '../../../protocol/css/includes/lib';
-@import '../../../protocol/css/components/article';
+@import '~@mozilla-protocol/core/protocol/css/includes/lib';
+@import '~@mozilla-protocol/core/protocol/css/components/article';
--- a/media/css/contentful/firefox/c-call-out.scss
+++ b/media/css/contentful/firefox/c-call-out.scss
@ -7,5 +7,5 @@ $image-path: '/media/protocol/img';

 $brand-theme: 'firefox';

-@import '../../../protocol/css/includes/lib';
-@import '../../../protocol/css/components/call-out';
+@import '~@mozilla-protocol/core/protocol/css/includes/lib';
+@import '~@mozilla-protocol/core/protocol/css/components/call-out';
--- a/media/css/contentful/firefox/c-hero.scss
+++ b/media/css/contentful/firefox/c-hero.scss
@ -7,5 +7,5 @@ $image-path: '/media/protocol/img';

 $brand-theme: 'firefox';

-@import '../../../protocol/css/includes/lib';
-@import '../../../protocol/css/components/hero';
+@import '~@mozilla-protocol/core/protocol/css/includes/lib';
+@import '~@mozilla-protocol/core/protocol/css/components/hero';
--- a/media/css/contentful/firefox/c-logo.scss
+++ b/media/css/contentful/firefox/c-logo.scss
@ -7,30 +7,30 @@ $image-path: '/media/protocol/img';

 $brand-theme: 'firefox';

-@import '../../../protocol/css/includes/lib';
+@import '~@mozilla-protocol/core/protocol/css/includes/lib';

-@import '../../../protocol/css/components/logos/logo';
-@import '../../../protocol/css/components/logos/logo-product-family';
-@import '../../../protocol/css/components/logos/logo-product-firefox';
-@import '../../../protocol/css/components/logos/logo-product-beta';
-@import '../../../protocol/css/components/logos/logo-product-developer';
-@import '../../../protocol/css/components/logos/logo-product-nightly';
-@import '../../../protocol/css/components/logos/logo-product-focus';
-@import '../../../protocol/css/components/logos/logo-product-monitor';
-@import '../../../protocol/css/components/logos/logo-product-lockwise';
-@import '../../../protocol/css/components/logos/logo-product-mozilla';
-@import '../../../protocol/css/components/logos/logo-product-vpn';
-@import '../../../protocol/css/components/logos/logo-product-pocket';
-@import '../../../protocol/css/components/logos/wordmark';
-@import '../../../protocol/css/components/logos/wordmark-product-family';
-@import '../../../protocol/css/components/logos/wordmark-product-firefox';
-@import '../../../protocol/css/components/logos/wordmark-product-beta';
-@import '../../../protocol/css/components/logos/wordmark-product-developer';
-@import '../../../protocol/css/components/logos/wordmark-product-nightly';
-@import '../../../protocol/css/components/logos/wordmark-product-focus';
-@import '../../../protocol/css/components/logos/wordmark-product-monitor';
-@import '../../../protocol/css/components/logos/wordmark-product-lockwise';
-@import '../../../protocol/css/components/logos/wordmark-product-mozilla';
-@import '../../../protocol/css/components/logos/wordmark-product-vpn';
-@import '../../../protocol/css/components/logos/wordmark-product-pocket';
+@import '~@mozilla-protocol/core/protocol/css/components/logos/logo';
+@import '~@mozilla-protocol/core/protocol/css/components/logos/logo-product-family';
+@import '~@mozilla-protocol/core/protocol/css/components/logos/logo-product-firefox';
+@import '~@mozilla-protocol/core/protocol/css/components/logos/logo-product-beta';
+@import '~@mozilla-protocol/core/protocol/css/components/logos/logo-product-developer';
+@import '~@mozilla-protocol/core/protocol/css/components/logos/logo-product-nightly';
+@import '~@mozilla-protocol/core/protocol/css/components/logos/logo-product-focus';
+@import '~@mozilla-protocol/core/protocol/css/components/logos/logo-product-monitor';
+@import '~@mozilla-protocol/core/protocol/css/components/logos/logo-product-lockwise';
+@import '~@mozilla-protocol/core/protocol/css/components/logos/logo-product-mozilla';
+@import '~@mozilla-protocol/core/protocol/css/components/logos/logo-product-vpn';
+@import '~@mozilla-protocol/core/protocol/css/components/logos/logo-product-pocket';
+@import '~@mozilla-protocol/core/protocol/css/components/logos/wordmark';
+@import '~@mozilla-protocol/core/protocol/css/components/logos/wordmark-product-family';
+@import '~@mozilla-protocol/core/protocol/css/components/logos/wordmark-product-firefox';
+@import '~@mozilla-protocol/core/protocol/css/components/logos/wordmark-product-beta';
+@import '~@mozilla-protocol/core/protocol/css/components/logos/wordmark-product-developer';
+@import '~@mozilla-protocol/core/protocol/css/components/logos/wordmark-product-nightly';
+@import '~@mozilla-protocol/core/protocol/css/components/logos/wordmark-product-focus';
+@import '~@mozilla-protocol/core/protocol/css/components/logos/wordmark-product-monitor';
+@import '~@mozilla-protocol/core/protocol/css/components/logos/wordmark-product-lockwise';
+@import '~@mozilla-protocol/core/protocol/css/components/logos/wordmark-product-mozilla';
+@import '~@mozilla-protocol/core/protocol/css/components/logos/wordmark-product-vpn';
+@import '~@mozilla-protocol/core/protocol/css/components/logos/wordmark-product-pocket';

--- a/media/css/contentful/firefox/c-picto.scss
+++ b/media/css/contentful/firefox/c-picto.scss
@ -7,5 +7,5 @@ $image-path: '/media/protocol/img';

 $brand-theme: 'firefox';

-@import '../../../protocol/css/includes/lib';
-@import '../../../protocol/css/components/picto';
+@import '~@mozilla-protocol/core/protocol/css/includes/lib';
+@import '~@mozilla-protocol/core/protocol/css/components/picto';
--- a/media/css/contentful/firefox/c-section-heading.scss
+++ b/media/css/contentful/firefox/c-section-heading.scss
@ -7,5 +7,5 @@ $image-path: '/media/protocol/img';

 $brand-theme: 'firefox';

-@import '../../../protocol/css/includes/lib';
-@import '../../../protocol/css/components/section-heading';
+@import '~@mozilla-protocol/core/protocol/css/includes/lib';
+@import '~@mozilla-protocol/core/protocol/css/components/section-heading';
--- a/media/css/contentful/firefox/c-split.scss
+++ b/media/css/contentful/firefox/c-split.scss
@ -7,7 +7,7 @@ $image-path: '/media/protocol/img';

 $brand-theme: 'firefox';

-@import '../../../protocol/css/includes/lib';
-@import '../../../protocol/css/components/split';
+@import '~@mozilla-protocol/core/protocol/css/includes/lib';
+@import '~@mozilla-protocol/core/protocol/css/components/split';

@import '../patch';
--- a/media/css/contentful/firefox/t-card-layout.scss
+++ b/media/css/contentful/firefox/t-card-layout.scss
@ -7,5 +7,5 @@ $image-path: '/media/protocol/img';

 $brand-theme: 'firefox';

-@import '../../../protocol/css/includes/lib';
-@import '../../../protocol/css/templates/card-layout';
+@import '~@mozilla-protocol/core/protocol/css/includes/lib';
+@import '~@mozilla-protocol/core/protocol/css/templates/card-layout';
--- a/media/css/contentful/firefox/t-multi-column.scss
+++ b/media/css/contentful/firefox/t-multi-column.scss
@ -7,7 +7,7 @@ $image-path: '/media/protocol/img';

 $brand-theme: 'firefox';

-@import '../../../protocol/css/includes/lib';
-@import '../../../protocol/css/templates/multi-column';
+@import '~@mozilla-protocol/core/protocol/css/includes/lib';
+@import '~@mozilla-protocol/core/protocol/css/templates/multi-column';

@import '../patch';
--- a/media/css/contentful/general.scss
+++ b/media/css/contentful/general.scss
@ -7,41 +7,41 @@ $image-path: '/media/protocol/img';

 $brand-theme: 'firefox';

-@import '../../protocol/css/includes/lib';
-@import '../../protocol/css/components/hero';
-@import '../../protocol/css/components/article';
-@import '../../protocol/css/components/call-out';
-@import '../../protocol/css/components/picto';
-@import '../../protocol/css/components/section-heading';
-@import '../../protocol/css/components/split';
-@import '../../protocol/css/templates/card-layout';
-@import '../../protocol/css/templates/multi-column';
-@import '../../protocol/css/base/utilities/backgrounds';
+@import '~@mozilla-protocol/core/protocol/css/includes/lib';
+@import '~@mozilla-protocol/core/protocol/css/components/hero';
+@import '~@mozilla-protocol/core/protocol/css/components/article';
+@import '~@mozilla-protocol/core/protocol/css/components/call-out';
+@import '~@mozilla-protocol/core/protocol/css/components/picto';
+@import '~@mozilla-protocol/core/protocol/css/components/section-heading';
+@import '~@mozilla-protocol/core/protocol/css/components/split';
+@import '~@mozilla-protocol/core/protocol/css/templates/card-layout';
+@import '~@mozilla-protocol/core/protocol/css/templates/multi-column';
+@import '~@mozilla-protocol/core/protocol/css/base/utilities/backgrounds';

-@import '../../protocol/css/components/logos/logo';
-@import '../../protocol/css/components/logos/logo-product-family';
-@import '../../protocol/css/components/logos/logo-product-firefox';
-@import '../../protocol/css/components/logos/logo-product-beta';
-@import '../../protocol/css/components/logos/logo-product-developer';
-@import '../../protocol/css/components/logos/logo-product-nightly';
-@import '../../protocol/css/components/logos/logo-product-focus';
-@import '../../protocol/css/components/logos/logo-product-monitor';
-@import '../../protocol/css/components/logos/logo-product-lockwise';
-@import '../../protocol/css/components/logos/logo-product-mozilla';
-@import '../../protocol/css/components/logos/logo-product-vpn';
-@import '../../protocol/css/components/logos/logo-product-pocket';
-@import '../../protocol/css/components/logos/wordmark';
-@import '../../protocol/css/components/logos/wordmark-product-family';
-@import '../../protocol/css/components/logos/wordmark-product-firefox';
-@import '../../protocol/css/components/logos/wordmark-product-beta';
-@import '../../protocol/css/components/logos/wordmark-product-developer';
-@import '../../protocol/css/components/logos/wordmark-product-nightly';
-@import '../../protocol/css/components/logos/wordmark-product-focus';
-@import '../../protocol/css/components/logos/wordmark-product-monitor';
-@import '../../protocol/css/components/logos/wordmark-product-lockwise';
-@import '../../protocol/css/components/logos/wordmark-product-mozilla';
-@import '../../protocol/css/components/logos/wordmark-product-vpn';
-@import '../../protocol/css/components/logos/wordmark-product-pocket';
+@import '~@mozilla-protocol/core/protocol/css/components/logos/logo';
+@import '~@mozilla-protocol/core/protocol/css/components/logos/logo-product-family';
+@import '~@mozilla-protocol/core/protocol/css/components/logos/logo-product-firefox';
+@import '~@mozilla-protocol/core/protocol/css/components/logos/logo-product-beta';
+@import '~@mozilla-protocol/core/protocol/css/components/logos/logo-product-developer';
+@import '~@mozilla-protocol/core/protocol/css/components/logos/logo-product-nightly';
+@import '~@mozilla-protocol/core/protocol/css/components/logos/logo-product-focus';
+@import '~@mozilla-protocol/core/protocol/css/components/logos/logo-product-monitor';
+@import '~@mozilla-protocol/core/protocol/css/components/logos/logo-product-lockwise';
+@import '~@mozilla-protocol/core/protocol/css/components/logos/logo-product-mozilla';
+@import '~@mozilla-protocol/core/protocol/css/components/logos/logo-product-vpn';
+@import '~@mozilla-protocol/core/protocol/css/components/logos/logo-product-pocket';
+@import '~@mozilla-protocol/core/protocol/css/components/logos/wordmark';
+@import '~@mozilla-protocol/core/protocol/css/components/logos/wordmark-product-family';
+@import '~@mozilla-protocol/core/protocol/css/components/logos/wordmark-product-firefox';
+@import '~@mozilla-protocol/core/protocol/css/components/logos/wordmark-product-beta';
+@import '~@mozilla-protocol/core/protocol/css/components/logos/wordmark-product-developer';
+@import '~@mozilla-protocol/core/protocol/css/components/logos/wordmark-product-nightly';
+@import '~@mozilla-protocol/core/protocol/css/components/logos/wordmark-product-focus';
+@import '~@mozilla-protocol/core/protocol/css/components/logos/wordmark-product-monitor';
+@import '~@mozilla-protocol/core/protocol/css/components/logos/wordmark-product-lockwise';
+@import '~@mozilla-protocol/core/protocol/css/components/logos/wordmark-product-mozilla';
+@import '~@mozilla-protocol/core/protocol/css/components/logos/wordmark-product-vpn';
+@import '~@mozilla-protocol/core/protocol/css/components/logos/wordmark-product-pocket';


 .mzp-u-center {
--- a/media/css/contentful/mozilla/c-article.scss
+++ b/media/css/contentful/mozilla/c-article.scss
@ -7,5 +7,5 @@ $image-path: '/media/protocol/img';

 $brand-theme: 'mozilla';

-@import '../../../protocol/css/includes/lib';
-@import '../../../protocol/css/components/article';
+@import '~@mozilla-protocol/core/protocol/css/includes/lib';
+@import '~@mozilla-protocol/core/protocol/css/components/article';
--- a/media/css/contentful/mozilla/c-call-out.scss
+++ b/media/css/contentful/mozilla/c-call-out.scss
@ -7,5 +7,5 @@ $image-path: '/media/protocol/img';

 $brand-theme: 'mozilla';

-@import '../../../protocol/css/includes/lib';
-@import '../../../protocol/css/components/call-out';
+@import '~@mozilla-protocol/core/protocol/css/includes/lib';
+@import '~@mozilla-protocol/core/protocol/css/components/call-out';
--- a/media/css/contentful/mozilla/c-hero.scss
+++ b/media/css/contentful/mozilla/c-hero.scss
@ -7,5 +7,5 @@ $image-path: '/media/protocol/img';

 $brand-theme: 'mozilla';

-@import '../../../protocol/css/includes/lib';
-@import '../../../protocol/css/components/hero';
+@import '~@mozilla-protocol/core/protocol/css/includes/lib';
+@import '~@mozilla-protocol/core/protocol/css/components/hero';
--- a/media/css/contentful/mozilla/c-logo.scss
+++ b/media/css/contentful/mozilla/c-logo.scss
@ -7,30 +7,30 @@ $image-path: '/media/protocol/img';

 $brand-theme: 'mozilla';

-@import '../../../protocol/css/includes/lib';
+@import '~@mozilla-protocol/core/protocol/css/includes/lib';

-@import '../../../protocol/css/components/logos/logo';
-@import '../../../protocol/css/components/logos/logo-product-family';
-@import '../../../protocol/css/components/logos/logo-product-firefox';
-@import '../../../protocol/css/components/logos/logo-product-beta';
-@import '../../../protocol/css/components/logos/logo-product-developer';
-@import '../../../protocol/css/components/logos/logo-product-nightly';
-@import '../../../protocol/css/components/logos/logo-product-focus';
-@import '../../../protocol/css/components/logos/logo-product-monitor';
-@import '../../../protocol/css/components/logos/logo-product-lockwise';
-@import '../../../protocol/css/components/logos/logo-product-mozilla';
-@import '../../../protocol/css/components/logos/logo-product-vpn';
-@import '../../../protocol/css/components/logos/logo-product-pocket';
-@import '../../../protocol/css/components/logos/wordmark';
-@import '../../../protocol/css/components/logos/wordmark-product-family';
-@import '../../../protocol/css/components/logos/wordmark-product-firefox';
-@import '../../../protocol/css/components/logos/wordmark-product-beta';
-@import '../../../protocol/css/components/logos/wordmark-product-developer';
-@import '../../../protocol/css/components/logos/wordmark-product-nightly';
-@import '../../../protocol/css/components/logos/wordmark-product-focus';
-@import '../../../protocol/css/components/logos/wordmark-product-monitor';
-@import '../../../protocol/css/components/logos/wordmark-product-lockwise';
-@import '../../../protocol/css/components/logos/wordmark-product-mozilla';
-@import '../../../protocol/css/components/logos/wordmark-product-vpn';
-@import '../../../protocol/css/components/logos/wordmark-product-pocket';
+@import '~@mozilla-protocol/core/protocol/css/components/logos/logo';
+@import '~@mozilla-protocol/core/protocol/css/components/logos/logo-product-family';
+@import '~@mozilla-protocol/core/protocol/css/components/logos/logo-product-firefox';
+@import '~@mozilla-protocol/core/protocol/css/components/logos/logo-product-beta';
+@import '~@mozilla-protocol/core/protocol/css/components/logos/logo-product-developer';
+@import '~@mozilla-protocol/core/protocol/css/components/logos/logo-product-nightly';
+@import '~@mozilla-protocol/core/protocol/css/components/logos/logo-product-focus';
+@import '~@mozilla-protocol/core/protocol/css/components/logos/logo-product-monitor';
+@import '~@mozilla-protocol/core/protocol/css/components/logos/logo-product-lockwise';
+@import '~@mozilla-protocol/core/protocol/css/components/logos/logo-product-mozilla';
+@import '~@mozilla-protocol/core/protocol/css/components/logos/logo-product-vpn';
+@import '~@mozilla-protocol/core/protocol/css/components/logos/logo-product-pocket';
+@import '~@mozilla-protocol/core/protocol/css/components/logos/wordmark';
+@import '~@mozilla-protocol/core/protocol/css/components/logos/wordmark-product-family';
+@import '~@mozilla-protocol/core/protocol/css/components/logos/wordmark-product-firefox';
+@import '~@mozilla-protocol/core/protocol/css/components/logos/wordmark-product-beta';
+@import '~@mozilla-protocol/core/protocol/css/components/logos/wordmark-product-developer';
+@import '~@mozilla-protocol/core/protocol/css/components/logos/wordmark-product-nightly';
+@import '~@mozilla-protocol/core/protocol/css/components/logos/wordmark-product-focus';
+@import '~@mozilla-protocol/core/protocol/css/components/logos/wordmark-product-monitor';
+@import '~@mozilla-protocol/core/protocol/css/components/logos/wordmark-product-lockwise';
+@import '~@mozilla-protocol/core/protocol/css/components/logos/wordmark-product-mozilla';
+@import '~@mozilla-protocol/core/protocol/css/components/logos/wordmark-product-vpn';
+@import '~@mozilla-protocol/core/protocol/css/components/logos/wordmark-product-pocket';

--- a/media/css/contentful/mozilla/c-picto.scss
+++ b/media/css/contentful/mozilla/c-picto.scss
@ -7,5 +7,5 @@ $image-path: '/media/protocol/img';

 $brand-theme: 'mozilla';

-@import '../../../protocol/css/includes/lib';
-@import '../../../protocol/css/components/picto';
+@import '~@mozilla-protocol/core/protocol/css/includes/lib';
+@import '~@mozilla-protocol/core/protocol/css/components/picto';
--- a/media/css/contentful/mozilla/c-section-heading.scss
+++ b/media/css/contentful/mozilla/c-section-heading.scss
@ -7,5 +7,5 @@ $image-path: '/media/protocol/img';

 $brand-theme: 'mozilla';

-@import '../../../protocol/css/includes/lib';
-@import '../../../protocol/css/components/section-heading';
+@import '~@mozilla-protocol/core/protocol/css/includes/lib';
+@import '~@mozilla-protocol/core/protocol/css/components/section-heading';
--- a/media/css/contentful/mozilla/c-split.scss
+++ b/media/css/contentful/mozilla/c-split.scss
@ -7,7 +7,7 @@ $image-path: '/media/protocol/img';

 $brand-theme: 'mozilla';

-@import '../../../protocol/css/includes/lib';
-@import '../../../protocol/css/components/split';
+@import '~@mozilla-protocol/core/protocol/css/includes/lib';
+@import '~@mozilla-protocol/core/protocol/css/components/split';

@import '../patch';
--- a/media/css/contentful/mozilla/t-card-layout.scss
+++ b/media/css/contentful/mozilla/t-card-layout.scss
@ -7,5 +7,5 @@ $image-path: '/media/protocol/img';

 $brand-theme: 'mozilla';

-@import '../../../protocol/css/includes/lib';
-@import '../../../protocol/css/templates/card-layout';
+@import '~@mozilla-protocol/core/protocol/css/includes/lib';
+@import '~@mozilla-protocol/core/protocol/css/templates/card-layout';
--- a/media/css/contentful/mozilla/t-multi-column.scss
+++ b/media/css/contentful/mozilla/t-multi-column.scss
@ -7,7 +7,7 @@ $image-path: '/media/protocol/img';

 $brand-theme: 'mozilla';

-@import '../../../protocol/css/includes/lib';
-@import '../../../protocol/css/templates/multi-column';
+@import '~@mozilla-protocol/core/protocol/css/includes/lib';
+@import '~@mozilla-protocol/core/protocol/css/templates/multi-column';

@import '../patch';
--- a/media/css/csrf-failure.scss
+++ b/media/css/csrf-failure.scss
@ -2,7 +2,7 @@
 // License, v. 2.0. If a copy of the MPL was not distributed with this
 // file, You can obtain one at http://mozilla.org/MPL/2.0/.

-@import '../protocol/css/includes/lib';
+@import '~@mozilla-protocol/core/protocol/css/includes/lib';

 main {
    min-height: 350px;
--- a/media/css/exp/opt-out.scss
+++ b/media/css/exp/opt-out.scss
@ -3,5 +3,5 @@
 // file, You can obtain one at http://mozilla.org/MPL/2.0/.


-@import '../../protocol/css/includes/lib';
-@import '../../protocol/css/components/article';
+@import '~@mozilla-protocol/core/protocol/css/includes/lib';
+@import '~@mozilla-protocol/core/protocol/css/components/article';
--- a/media/css/firefox/accounts-2019.scss
+++ b/media/css/firefox/accounts-2019.scss
@ -2,8 +2,8 @@
 // License, v. 2.0. If a copy of the MPL was not distributed with this
 // file, You can obtain one at http://mozilla.org/MPL/2.0/.

-@import '../../protocol/css/includes/lib';
-@import '../../protocol/css/components/emphasis-box';
+@import '~@mozilla-protocol/core/protocol/css/includes/lib';
+@import '~@mozilla-protocol/core/protocol/css/components/emphasis-box';
@import '../protocol/components/fxa-form';

 .c-section-title {
--- a/media/css/firefox/all/all-unified-old-ie.scss
+++ b/media/css/firefox/all/all-unified-old-ie.scss
@ -5,7 +5,7 @@
 $font-path: '/media/fonts';
 $image-path: '/media/protocol/img';

-@import '../../../protocol/css/includes/lib';
+@import '~@mozilla-protocol/core/protocol/css/includes/lib';

 .c-selection-form {
    display: none;
--- a/media/css/firefox/all/all-unified.scss
+++ b/media/css/firefox/all/all-unified.scss
@ -5,11 +5,11 @@
 $font-path: '/media/fonts';
 $image-path: '/media/protocol/img';

-@import '../../../protocol/css/includes/lib';
-@import '../../../protocol/css/includes/forms/lib';
-@import '../../../protocol/css/templates/main-with-sidebar';
-@import '../../../protocol/css/components/modal';
-@import '../../../protocol/css/components/sidebar-menu';
+@import '~@mozilla-protocol/core/protocol/css/includes/lib';
+@import '~@mozilla-protocol/core/protocol/css/includes/forms/lib';
+@import '~@mozilla-protocol/core/protocol/css/templates/main-with-sidebar';
+@import '~@mozilla-protocol/core/protocol/css/components/modal';
+@import '~@mozilla-protocol/core/protocol/css/components/sidebar-menu';

 .c-product-select-form {
    @include clearfix;
--- a/media/css/firefox/browsers-products.scss
+++ b/media/css/firefox/browsers-products.scss
@ -6,10 +6,10 @@ $font-path: '/media/fonts';
 $image-path: '/media/protocol/img';
 $brand-theme: 'firefox';

-@import '../../protocol/css/includes/lib';
-@import '../../protocol/css/components/emphasis-box';
-@import '../../protocol/css/components/split';
-@import '../../protocol/css/components/zap';
+@import '~@mozilla-protocol/core/protocol/css/includes/lib';
+@import '~@mozilla-protocol/core/protocol/css/components/emphasis-box';
+@import '~@mozilla-protocol/core/protocol/css/components/split';
+@import '~@mozilla-protocol/core/protocol/css/components/zap';
@import '../protocol/components/fxa-form';
@import '../protocol/components/custom-menu-list';
@import './sticky-promo';
--- a/media/css/firefox/browsers/best-browser.scss
+++ b/media/css/firefox/browsers/best-browser.scss
@ -5,9 +5,9 @@
 $font-path: '/media/fonts';
 $image-path: '/media/protocol/img';

-@import "../../../protocol/css/includes/lib";
-@import "../../../protocol/css/components/article";
-@import "../../../protocol/css/components/call-out";
+@import "~@mozilla-protocol/core/protocol/css/includes/lib";
+@import "~@mozilla-protocol/core/protocol/css/components/article";
+@import "~@mozilla-protocol/core/protocol/css/components/call-out";

 .seo-hero {
    background: $color-purple-90 url('/media/img/firefox/browsers/best-browser/hero-pattern.png') 55% 60% no-repeat;
--- a/media/css/firefox/browsers/browser-history.scss
+++ b/media/css/firefox/browsers/browser-history.scss
@ -5,9 +5,9 @@
 $font-path: '/media/fonts';
 $image-path: '/media/protocol/img';

-@import '../../../protocol/css/includes/lib';
-@import '../../../protocol/css/components/article';
-@import "../../../protocol/css/components/call-out";
+@import '~@mozilla-protocol/core/protocol/css/includes/lib';
+@import '~@mozilla-protocol/core/protocol/css/components/article';
+@import "~@mozilla-protocol/core/protocol/css/components/call-out";


 .mzp-c-article {
--- a/media/css/firefox/browsers/chromebook.scss
+++ b/media/css/firefox/browsers/chromebook.scss
@ -5,13 +5,13 @@
 $font-path: '/media/fonts';
 $image-path: '/media/protocol/img';

-@import '../../../protocol/css/includes/lib';
-@import '../../../protocol/css/components/card';
-@import '../../../protocol/css/components/logos/logo-product-firefox';
-@import '../../../protocol/css/components/section-heading';
-@import '../../../protocol/css/components/split';
+@import '~@mozilla-protocol/core/protocol/css/includes/lib';
+@import '~@mozilla-protocol/core/protocol/css/components/card';
+@import '~@mozilla-protocol/core/protocol/css/components/logos/logo-product-firefox';
+@import '~@mozilla-protocol/core/protocol/css/components/section-heading';
+@import '~@mozilla-protocol/core/protocol/css/components/split';
+@import '~@mozilla-protocol/core/protocol/css/templates/card-layout';
@import '../../protocol/components/custom-menu-list';
-@import '../../../protocol/css/templates/card-layout';

 .mzp-c-split .mzp-c-logo {
    margin: -$spacing-lg 0 $spacing-xl;
--- a/media/css/firefox/browsers/incognito-browser.scss
+++ b/media/css/firefox/browsers/incognito-browser.scss
@ -5,9 +5,9 @@
 $font-path: '/media/fonts';
 $image-path: '/media/protocol/img';

-@import '../../../protocol/css/includes/lib';
-@import '../../../protocol/css/components/article';
-@import "../../../protocol/css/components/call-out";
+@import '~@mozilla-protocol/core/protocol/css/includes/lib';
+@import '~@mozilla-protocol/core/protocol/css/components/article';
+@import "~@mozilla-protocol/core/protocol/css/components/call-out";


 .mzp-c-article {
--- a/media/css/firefox/browsers/mobile.scss
+++ b/media/css/firefox/browsers/mobile.scss
@ -5,11 +5,11 @@
 $font-path: '/media/fonts';
 $image-path: '/media/protocol/img';

-@import '../../../protocol/css/includes/lib';
-@import '../../../protocol/css/components/split';
-@import '../../../protocol/css/components/logos/wordmark';
-@import '../../../protocol/css/components/logos/wordmark-product-firefox';
-@import '../../../protocol/css/components/logos/wordmark-product-focus';
+@import '~@mozilla-protocol/core/protocol/css/includes/lib';
+@import '~@mozilla-protocol/core/protocol/css/components/split';
+@import '~@mozilla-protocol/core/protocol/css/components/logos/wordmark';
+@import '~@mozilla-protocol/core/protocol/css/components/logos/wordmark-product-firefox';
+@import '~@mozilla-protocol/core/protocol/css/components/logos/wordmark-product-focus';

@media #{$mq-lg} {
    .c-page-header::before {
--- a/media/css/firefox/browsers/quantum.scss
+++ b/media/css/firefox/browsers/quantum.scss
@ -5,12 +5,12 @@
 $font-path: '/media/fonts';
 $image-path: '/media/protocol/img';

-@import "../../../protocol/css/includes/lib";
-@import "../../../protocol/css/components/split";
-@import '../../../protocol/css/components/emphasis-box';
-@import '../../../protocol/css/components/logos/logo-product-firefox';
-@import '../../../protocol/css/components/picto';
-@import '../../../protocol/css/templates/multi-column';
+@import "~@mozilla-protocol/core/protocol/css/includes/lib";
+@import "~@mozilla-protocol/core/protocol/css/components/split";
+@import '~@mozilla-protocol/core/protocol/css/components/emphasis-box';
+@import '~@mozilla-protocol/core/protocol/css/components/logos/logo-product-firefox';
+@import '~@mozilla-protocol/core/protocol/css/components/picto';
+@import '~@mozilla-protocol/core/protocol/css/templates/multi-column';


 .mzp-c-split .mzp-c-logo {
--- a/media/css/firefox/browsers/update-browser.scss
+++ b/media/css/firefox/browsers/update-browser.scss
@ -5,9 +5,9 @@
 $font-path: '/media/fonts';
 $image-path: '/media/protocol/img';

-@import '../../../protocol/css/includes/lib';
-@import '../../../protocol/css/components/article';
-@import "../../../protocol/css/components/call-out";
+@import '~@mozilla-protocol/core/protocol/css/includes/lib';
+@import '~@mozilla-protocol/core/protocol/css/components/article';
+@import "~@mozilla-protocol/core/protocol/css/components/call-out";


 .mzp-c-article {
--- a/media/css/firefox/browsers/what-is-a-browser.scss
+++ b/media/css/firefox/browsers/what-is-a-browser.scss
@ -5,8 +5,8 @@
 $font-path: '/media/fonts';
 $image-path: '/media/protocol/img';

-@import '../../../protocol/css/includes/lib';
-@import '../../../protocol/css/components/article';
+@import '~@mozilla-protocol/core/protocol/css/includes/lib';
+@import '~@mozilla-protocol/core/protocol/css/components/article';


 .mzp-c-article {
--- a/media/css/firefox/browsers/windows-64-bit.scss
+++ b/media/css/firefox/browsers/windows-64-bit.scss
@ -5,9 +5,9 @@
 $font-path: '/media/fonts';
 $image-path: '/media/protocol/img';

-@import '../../../protocol/css/includes/lib';
-@import '../../../protocol/css/components/article';
-@import '../../../protocol/css/components/call-out';
+@import '~@mozilla-protocol/core/protocol/css/includes/lib';
+@import '~@mozilla-protocol/core/protocol/css/components/article';
+@import '~@mozilla-protocol/core/protocol/css/components/call-out';

 .mzp-c-hero {
    background: $color-purple-90;
--- a/media/css/firefox/channel.scss
+++ b/media/css/firefox/channel.scss
@ -5,13 +5,13 @@
 $font-path: '/media/fonts';
 $image-path: '/media/protocol/img';

-@import '../../protocol/css/includes/lib';
-@import '../../protocol/css/components/hero';
-@import '../../protocol/css/components/picto';
+@import '~@mozilla-protocol/core/protocol/css/includes/lib';
+@import '~@mozilla-protocol/core/protocol/css/components/hero';
+@import '~@mozilla-protocol/core/protocol/css/components/picto';
+@import '~@mozilla-protocol/core/protocol/css/components/newsletter-form';
+@import '~@mozilla-protocol/core/protocol/css/components/call-out';
+@import '~@mozilla-protocol/core/protocol/css/components/emphasis-box';
@import '../protocol/components/sub-navigation';
-@import '../../protocol/css/components/newsletter-form';
-@import '../../protocol/css/components/call-out';
-@import '../../protocol/css/components/emphasis-box';

 //* -------------------------------------------------------------------------- */
 // Content
--- a/media/css/firefox/compare/compare-details.scss
+++ b/media/css/firefox/compare/compare-details.scss
@ -2,9 +2,8 @@
 // License, v. 2.0. If a copy of the MPL was not distributed with this
 // file, You can obtain one at http://mozilla.org/MPL/2.0/.

-@import "../../../protocol/css/includes/lib";
-@import '../../../protocol/css/components/menu-list';
-
+@import "~@mozilla-protocol/core/protocol/css/includes/lib";
+@import '~@mozilla-protocol/core/protocol/css/components/menu-list';

 //* -------------------------------------------------------------------------- */
 // Hero
--- a/media/css/firefox/compare/compare.scss
+++ b/media/css/firefox/compare/compare.scss
@ -2,8 +2,8 @@
 // License, v. 2.0. If a copy of the MPL was not distributed with this
 // file, You can obtain one at http://mozilla.org/MPL/2.0/.

-@import "../../../protocol/css/includes/lib";
-@import "../../../protocol/css/components/split";
+@import "~@mozilla-protocol/core/protocol/css/includes/lib";
+@import "~@mozilla-protocol/core/protocol/css/components/split";
@import '../../protocol/components/sub-navigation';

 //* -------------------------------------------------------------------------- */
--- a/media/css/firefox/developer/developer.scss
+++ b/media/css/firefox/developer/developer.scss
@ -2,8 +2,8 @@
 // License, v. 2.0. If a copy of the MPL was not distributed with this
 // file, You can obtain one at http://mozilla.org/MPL/2.0/.

-@import '../../../protocol/css/includes/lib';
-@import '../../../protocol/css/components/split';
+@import '~@mozilla-protocol/core/protocol/css/includes/lib';
+@import '~@mozilla-protocol/core/protocol/css/components/split';
@import 'includes/engage';
@import 'includes/features';
@import 'includes/gallery-grid';
--- a/media/css/firefox/developer/includes/engage.scss
+++ b/media/css/firefox/developer/includes/engage.scss
@ -1,6 +1,6 @@
-@import '../../../../protocol/css/includes/lib';
-@import '../../../../protocol/css/templates/multi-column';
-@import '../../../../protocol/css/components/picto';
+@import '~@mozilla-protocol/core/protocol/css/includes/lib';
+@import '~@mozilla-protocol/core/protocol/css/templates/multi-column';
+@import '~@mozilla-protocol/core/protocol/css/components/picto';

 $brand-theme: 'firefox';

--- a/media/css/firefox/developer/includes/features.scss
+++ b/media/css/firefox/developer/includes/features.scss
@ -1,4 +1,4 @@
-@import '../../../../protocol/css/includes/lib';
+@import '~@mozilla-protocol/core/protocol/css/includes/lib';

 .t-features {
    @include text-body-sm;
--- a/media/css/firefox/developer/includes/gallery-grid.scss
+++ b/media/css/firefox/developer/includes/gallery-grid.scss
@ -1,4 +1,4 @@
-@import '../../../../protocol/css/includes/lib';
+@import '~@mozilla-protocol/core/protocol/css/includes/lib';

 //*------------------------------------------------------------------*/
 // Gallery grid
--- a/media/css/firefox/developer/includes/highlights.scss
+++ b/media/css/firefox/developer/includes/highlights.scss
@ -1,4 +1,4 @@
-@import '../../../../protocol/css/includes/lib';
+@import '~@mozilla-protocol/core/protocol/css/includes/lib';

 //*------------------------------------------------------------------*/
 // Engagement
--- a/media/css/firefox/developer/includes/intro.scss
+++ b/media/css/firefox/developer/includes/intro.scss
@ -1,4 +1,4 @@
-@import '../../../../protocol/css/includes/lib';
+@import '~@mozilla-protocol/core/protocol/css/includes/lib';

 //*------------------------------------------------------------------*/
 // Intro
--- a/media/css/firefox/developer/includes/newsletter.scss
+++ b/media/css/firefox/developer/includes/newsletter.scss
@ -1,5 +1,5 @@
-@import '../../../../protocol/css/includes/lib';
-@import '../../../../protocol/css/components/newsletter-form';
+@import '~@mozilla-protocol/core/protocol/css/includes/lib';
+@import '~@mozilla-protocol/core/protocol/css/components/newsletter-form';

 //*------------------------------------------------------------------*/
 // Newsletter
--- a/media/css/firefox/enterprise/landing.scss
+++ b/media/css/firefox/enterprise/landing.scss
@ -5,15 +5,15 @@
 $font-path: '/media/fonts';
 $image-path: '/media/protocol/img';

-@import "../../../protocol/css/includes/lib";
-@import '../../../protocol/css/components/call-out';
-@import '../../../protocol/css/components/feature-card';
-@import '../../../protocol/css/components/split';
-@import '../../../protocol/css/components/button';
-@import '../../../protocol/css/components/logos/wordmark';
-@import '../../../protocol/css/components/logos/wordmark-product-firefox';
-@import '../../../protocol/css/components/picto';
-@import '../../../protocol/css/templates/multi-column';
+@import "~@mozilla-protocol/core/protocol/css/includes/lib";
+@import '~@mozilla-protocol/core/protocol/css/components/call-out';
+@import '~@mozilla-protocol/core/protocol/css/components/feature-card';
+@import '~@mozilla-protocol/core/protocol/css/components/split';
+@import '~@mozilla-protocol/core/protocol/css/components/button';
+@import '~@mozilla-protocol/core/protocol/css/components/logos/wordmark';
+@import '~@mozilla-protocol/core/protocol/css/components/logos/wordmark-product-firefox';
+@import '~@mozilla-protocol/core/protocol/css/components/picto';
+@import '~@mozilla-protocol/core/protocol/css/templates/multi-column';
@import '../../protocol/components/custom-menu-list';
@import '../../protocol/components/sub-navigation';

--- a/media/css/firefox/facebook-container.scss
+++ b/media/css/firefox/facebook-container.scss
@ -5,13 +5,13 @@
 $font-path: "/media/fonts";
 $image-path: "/media/protocol/img";

-@import "../../protocol/css/includes/lib";
-@import "../../protocol/css/components/split";
-@import "../../protocol/css/components/logos/logo";
-@import "../../protocol/css/components/logos/logo-product-firefox";
-@import "../../protocol/css/templates/card-layout";
-@import "../../protocol/css/components/call-out";
-@import "../../protocol/css/components/feature-card";
+@import "~@mozilla-protocol/core/protocol/css/includes/lib";
+@import "~@mozilla-protocol/core/protocol/css/components/split";
+@import "~@mozilla-protocol/core/protocol/css/components/logos/logo";
+@import "~@mozilla-protocol/core/protocol/css/components/logos/logo-product-firefox";
+@import "~@mozilla-protocol/core/protocol/css/templates/card-layout";
+@import "~@mozilla-protocol/core/protocol/css/components/call-out";
+@import "~@mozilla-protocol/core/protocol/css/components/feature-card";

 //* -------------------------------------------------------------------------- */
 // Components
--- a/media/css/firefox/faq.scss
+++ b/media/css/firefox/faq.scss
@ -5,10 +5,10 @@
 $font-path: "/media/fonts";
 $image-path: "/media/protocol/img";

-@import "../../protocol/css/includes/lib";
-@import "../../protocol/css/components/split";
-@import "../../protocol/css/components/logos/logo";
-@import "../../protocol/css/components/logos/logo-product-firefox";
+@import "~@mozilla-protocol/core/protocol/css/includes/lib";
+@import "~@mozilla-protocol/core/protocol/css/components/split";
+@import "~@mozilla-protocol/core/protocol/css/components/logos/logo";
+@import "~@mozilla-protocol/core/protocol/css/components/logos/logo-product-firefox";

 /*
 * Split
@ -20,8 +20,9 @@ $image-path: "/media/protocol/img";
        margin-left: auto;
        margin-right: auto;
        margin-bottom: $spacing-md;
+
        @media #{$mq-lg} {
-             margin-left: inherit;
+            margin-left: inherit;
            margin-right: inherit;
            margin-bottom: $layout-md;
        }
--- a/media/css/firefox/features/adblocker.scss
+++ b/media/css/firefox/features/adblocker.scss
@ -5,9 +5,9 @@
 $font-path: '/media/fonts';
 $image-path: '/media/protocol/img';

-@import "../../../protocol/css/includes/lib";
-@import "../../../protocol/css/components/hero";
-@import "../../../protocol/css/components/call-out";
+@import "~@mozilla-protocol/core/protocol/css/includes/lib";
+@import "~@mozilla-protocol/core/protocol/css/components/hero";
+@import "~@mozilla-protocol/core/protocol/css/components/call-out";

 //* -------------------------------------------------------------------------- */
 // Custom layout
--- a/media/css/firefox/features/detail.scss
+++ b/media/css/firefox/features/detail.scss
@ -5,12 +5,12 @@
 $font-path: '/media/fonts';
 $image-path: '/media/protocol/img';

-@import '../../../protocol/css/includes/lib';
-@import '../../../protocol/css/components/feature-card';
-@import '../../../protocol/css/components/picto';
-@import '../../../protocol/css/components/section-heading';
-@import '../../../protocol/css/components/split';
-@import '../../../protocol/css/templates/multi-column';
+@import '~@mozilla-protocol/core/protocol/css/includes/lib';
+@import '~@mozilla-protocol/core/protocol/css/components/feature-card';
+@import '~@mozilla-protocol/core/protocol/css/components/picto';
+@import '~@mozilla-protocol/core/protocol/css/components/section-heading';
+@import '~@mozilla-protocol/core/protocol/css/components/split';
+@import '~@mozilla-protocol/core/protocol/css/templates/multi-column';

 .c-hero {
    .c-hero-icon {
--- a/media/css/firefox/features/index.scss
+++ b/media/css/firefox/features/index.scss
@ -4,11 +4,11 @@

 $image-path: '/media/protocol/img';

-@import '../../../protocol/css/includes/lib';
-@import '../../../protocol/css/components/split';
-@import '../../../protocol/css/components/picto';
-@import '../../../protocol/css/components/section-heading';
-@import '../../../protocol/css/templates/multi-column';
+@import '~@mozilla-protocol/core/protocol/css/includes/lib';
+@import '~@mozilla-protocol/core/protocol/css/components/split';
+@import '~@mozilla-protocol/core/protocol/css/components/picto';
+@import '~@mozilla-protocol/core/protocol/css/components/section-heading';
+@import '~@mozilla-protocol/core/protocol/css/templates/multi-column';

 .c-hero-desc {
    @include text-body-xl;
--- a/media/css/firefox/features/picture-in-picture.scss
+++ b/media/css/firefox/features/picture-in-picture.scss
@ -5,11 +5,11 @@
 $font-path: '/media/fonts';
 $image-path: '/media/protocol/img';

-@import "../../../protocol/css/includes/lib";
-@import "../../../protocol/css/components/hero";
-@import "../../../protocol/css/components/feature-card";
-@import "../../../protocol/css/components/picto";
-@import "../../../protocol/css/templates/multi-column";
+@import "~@mozilla-protocol/core/protocol/css/includes/lib";
+@import "~@mozilla-protocol/core/protocol/css/components/hero";
+@import "~@mozilla-protocol/core/protocol/css/components/feature-card";
+@import "~@mozilla-protocol/core/protocol/css/components/picto";
+@import "~@mozilla-protocol/core/protocol/css/templates/multi-column";

 .mzp-c-hero.mzp-t-dark {
    background: $color-ink-80;
--- a/media/css/firefox/features/safebrowser.scss
+++ b/media/css/firefox/features/safebrowser.scss
@ -5,9 +5,9 @@
 $font-path: '/media/fonts';
 $image-path: '/media/protocol/img';

-@import "../../../protocol/css/includes/lib";
-@import "../../../protocol/css/components/article";
-@import "../../../protocol/css/components/call-out";
+@import "~@mozilla-protocol/core/protocol/css/includes/lib";
+@import "~@mozilla-protocol/core/protocol/css/components/article";
+@import "~@mozilla-protocol/core/protocol/css/components/call-out";

 .mzp-c-hero {
    background: $color-purple-90;
--- a/media/css/firefox/features/tips.scss
+++ b/media/css/firefox/features/tips.scss
@ -5,15 +5,15 @@
 $font-path: '/media/fonts';
 $image-path: '/media/protocol/img';

-@import "../../../protocol/css/includes/lib";
-@import "../../../protocol/css/components/split";
-@import "../../../protocol/css/components/card";
-@import '../../../protocol/css/templates/card-layout';
-@import "../../../protocol/css/components/section-heading";
-@import "../../../protocol/css/components/zap";
-@import "../../../protocol/css/components/call-out";
-@import "../../../protocol/css/components/logos/logo-product-firefox";
-@import "../../../protocol/css/components/modal";
+@import "~@mozilla-protocol/core/protocol/css/includes/lib";
+@import "~@mozilla-protocol/core/protocol/css/components/split";
+@import "~@mozilla-protocol/core/protocol/css/components/card";
+@import '~@mozilla-protocol/core/protocol/css/templates/card-layout';
+@import "~@mozilla-protocol/core/protocol/css/components/section-heading";
+@import "~@mozilla-protocol/core/protocol/css/components/zap";
+@import "~@mozilla-protocol/core/protocol/css/components/call-out";
+@import "~@mozilla-protocol/core/protocol/css/components/logos/logo-product-firefox";
+@import "~@mozilla-protocol/core/protocol/css/components/modal";

 // Play button on videos
 .mzp-c-card-media-wrapper {
--- a/media/css/firefox/firstrun/firstrun.scss
+++ b/media/css/firefox/firstrun/firstrun.scss
@ -6,8 +6,8 @@ $font-path: '/media/fonts';
 $image-path: '/media/protocol/img';
 $break-large: 1305px;

-@import '../../../protocol/css/includes/lib';
-@import '../../../protocol/css/components/emphasis-box';
+@import '~@mozilla-protocol/core/protocol/css/includes/lib';
+@import '~@mozilla-protocol/core/protocol/css/components/emphasis-box';
@import '../../protocol/components/fxa-form';


--- a/media/css/firefox/firstrun/nightly.scss
+++ b/media/css/firefox/firstrun/nightly.scss
@ -5,12 +5,12 @@
 $font-path: '/media/fonts';
 $image-path: '/media/protocol/img';

-@import '../../../protocol/css/includes/lib';
-@import '../../../protocol/css/components/picto-card';
-@import '../../../protocol/css/components/picto';
-@import '../../../protocol/css/templates/multi-column';
-@import '../../../protocol/css/components/hero';
-@import '../../../protocol/css/templates/card-layout';
+@import '~@mozilla-protocol/core/protocol/css/includes/lib';
+@import '~@mozilla-protocol/core/protocol/css/components/picto-card';
+@import '~@mozilla-protocol/core/protocol/css/components/picto';
+@import '~@mozilla-protocol/core/protocol/css/templates/multi-column';
+@import '~@mozilla-protocol/core/protocol/css/components/hero';
+@import '~@mozilla-protocol/core/protocol/css/templates/card-layout';

 main {
    background-color: $color-ink-80;
--- a/media/css/firefox/flashback/flashback.scss
+++ b/media/css/firefox/flashback/flashback.scss
@ -5,7 +5,7 @@
 $font-path: '/media/fonts';
 $image-path: '/media/protocol/img';

-@import "../../../protocol/css/includes/lib";
+@import "~@mozilla-protocol/core/protocol/css/includes/lib";

@mixin down-arrow($color) {
    $downarrow: '<?xml version="1.0" encoding="utf-8"?><svg viewBox="0 0 50 54" width="50px" height="54px" xmlns="http://www.w3.org/2000/svg" xmlns:bx="https://boxy-svg.com"><path style="stroke: #{$color}; fill: rgba(0,0,0,0); stroke-width: 9px; stroke-linejoin: round; stroke-linecap: round;" d="M 6.76 28.842 C 8.723 30.855 25.377 48.01 25.398 48.007 C 25.398 48.007 43.025 29.144 43.419 28.8"/><path style="stroke: #{$color}; fill: rgba(0,0,0,0); stroke-width: 9px; stroke-linejoin: round; stroke-linecap: round;" d="M 6.8 5.764 C 8.763 7.777 25.417 24.932 25.438 24.929 C 25.438 24.929 43.065 6.066 43.459 5.722" bx:origin="0.48441 0.5"/></svg>';
--- a/media/css/firefox/home/ie9.scss
+++ b/media/css/firefox/home/ie9.scss
@ -5,7 +5,7 @@
 $font-path: '/media/fonts';
 $image-path: '/media/protocol/img';

-@import '../../../protocol/css/includes/lib';
+@import '~@mozilla-protocol/core/protocol/css/includes/lib';

 .js-fx-only {
    display: none;
--- a/media/css/firefox/home/master.scss
+++ b/media/css/firefox/home/master.scss
@ -6,14 +6,14 @@ $font-path: '/media/fonts';
 $image-path: '/media/protocol/img';
 $brand-theme: 'firefox';

-@import '../../../protocol/css/includes/lib';
-@import '../../../protocol/css/components/logos/wordmark';
-@import '../../../protocol/css/components/logos/wordmark-product-firefox';
-@import '../../../protocol/css/components/logos/wordmark-product-monitor';
-@import '../../../protocol/css/components/logos/wordmark-product-vpn';
-@import '../../../protocol/css/components/logos/wordmark-product-pocket';
-@import '../../../protocol/css/components/zap';
-@import '../../../protocol/css/components/split';
+@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-firefox';
+@import '~@mozilla-protocol/core/protocol/css/components/logos/wordmark-product-monitor';
+@import '~@mozilla-protocol/core/protocol/css/components/logos/wordmark-product-vpn';
+@import '~@mozilla-protocol/core/protocol/css/components/logos/wordmark-product-pocket';
+@import '~@mozilla-protocol/core/protocol/css/components/zap';
+@import '~@mozilla-protocol/core/protocol/css/components/split';
@import '../../protocol/components/custom-menu-list';
@import '../sticky-promo';

--- a/media/css/firefox/installer-help.scss
+++ b/media/css/firefox/installer-help.scss
@ -5,9 +5,9 @@
 $font-path: '/media/fonts';
 $image-path: '/media/protocol/img';

-@import "../../protocol/css/includes/lib";
-@import '../../protocol/css/components/hero';
-@import '../../protocol/css/templates/card-layout';
+@import "~@mozilla-protocol/core/protocol/css/includes/lib";
+@import '~@mozilla-protocol/core/protocol/css/components/hero';
+@import '~@mozilla-protocol/core/protocol/css/templates/card-layout';

 .mzp-c-card {
    .mzp-c-card-desc {
--- a/media/css/firefox/lockwise/lockwise.scss
+++ b/media/css/firefox/lockwise/lockwise.scss
@ -5,13 +5,13 @@
 $font-path: '/media/fonts';
 $image-path: '/media/protocol/img';

-@import '../../../protocol/css/includes/lib';
-@import '../../../protocol/css/components/picto';
-@import '../../../protocol/css/components/split';
-@import '../../../protocol/css/templates/card-layout';
-@import '../../../protocol/css/templates/multi-column';
-@import '../../../protocol/css/components/logos/wordmark';
-@import '../../../protocol/css/components/logos/wordmark-product-lockwise';
+@import '~@mozilla-protocol/core/protocol/css/includes/lib';
+@import '~@mozilla-protocol/core/protocol/css/components/picto';
+@import '~@mozilla-protocol/core/protocol/css/components/split';
+@import '~@mozilla-protocol/core/protocol/css/templates/card-layout';
+@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-lockwise';

 // split

--- a/media/css/firefox/mobile/get-app.scss
+++ b/media/css/firefox/mobile/get-app.scss
@ -5,7 +5,7 @@
 $font-path: '/media/fonts';
 $image-path: '/media/protocol/img';

-@import '../../../protocol/css/includes/lib';
+@import '~@mozilla-protocol/core/protocol/css/includes/lib';


 //* -------------------------------------------------------------------------- */
--- a/media/css/firefox/mobile/mobile.scss
+++ b/media/css/firefox/mobile/mobile.scss
@ -6,14 +6,14 @@ $font-path: '/media/fonts';
 $image-path: '/media/protocol/img';
 $brand-theme: 'firefox';

-@import '../../../protocol/css/includes/lib';
-@import '../../../protocol/css/components/call-out';
-@import '../../../protocol/css/components/emphasis-box';
-@import '../../../protocol/css/components/hero';
-@import '../../../protocol/css/components/logos/wordmark';
-@import '../../../protocol/css/components/logos/wordmark-product-firefox';
-@import '../../../protocol/css/components/split';
-@import '../../../protocol/css/templates/multi-column';
+@import '~@mozilla-protocol/core/protocol/css/includes/lib';
+@import '~@mozilla-protocol/core/protocol/css/components/call-out';
+@import '~@mozilla-protocol/core/protocol/css/components/emphasis-box';
+@import '~@mozilla-protocol/core/protocol/css/components/hero';
+@import '~@mozilla-protocol/core/protocol/css/components/logos/wordmark';
+@import '~@mozilla-protocol/core/protocol/css/components/logos/wordmark-product-firefox';
+@import '~@mozilla-protocol/core/protocol/css/components/split';
+@import '~@mozilla-protocol/core/protocol/css/templates/multi-column';

 //* -------------------------------------------------------------------------- */

--- a/media/css/firefox/more.scss
+++ b/media/css/firefox/more.scss
@ -4,12 +4,11 @@

 $font-path: '/media/fonts';
 $image-path: '/media/protocol/img';
-@import '../../protocol/css/includes/lib';
-
-@import '../../protocol/css/components/split';
-@import '../../protocol/css/components/card';
-@import '../../protocol/css/templates/card-layout';

+@import '~@mozilla-protocol/core/protocol/css/includes/lib';
+@import '~@mozilla-protocol/core/protocol/css/components/split';
+@import '~@mozilla-protocol/core/protocol/css/components/card';
+@import '~@mozilla-protocol/core/protocol/css/templates/card-layout';

 //* -------------------------------------------------------------------------- */
 // Primary CTA (page top)
--- a/media/css/firefox/more/misinformation.scss
+++ b/media/css/firefox/more/misinformation.scss
@ -6,12 +6,12 @@ $font-path: '/media/fonts';
 $image-path: '/media/protocol/img';
 $brand-theme: 'firefox';

-@import "../../../protocol/css/includes/lib";
-@import '../../../protocol/css/templates/multi-column';
-@import "../../../protocol/css/components/split";
-@import "../../../protocol/css/components/call-out";
-@import "../../../protocol/css/components/picto";
-@import '../../../protocol/css/components/logos/logo-product-firefox';
+@import "~@mozilla-protocol/core/protocol/css/includes/lib";
+@import '~@mozilla-protocol/core/protocol/css/templates/multi-column';
+@import "~@mozilla-protocol/core/protocol/css/components/split";
+@import "~@mozilla-protocol/core/protocol/css/components/call-out";
+@import "~@mozilla-protocol/core/protocol/css/components/picto";
+@import '~@mozilla-protocol/core/protocol/css/components/logos/logo-product-firefox';

 // -------------------------------------------------------------------------- //
 // Page Hero
--- a/media/css/firefox/new/basic/download.scss
+++ b/media/css/firefox/new/basic/download.scss
@ -5,9 +5,9 @@
 $font-path: '/media/fonts';
 $image-path: '/media/protocol/img';

-@import '../../../../protocol/css/includes/lib';
-@import '../../../../protocol/css/components/hero';
-@import '../../../../protocol/css/components/notification-bar';
+@import '~@mozilla-protocol/core/protocol/css/includes/lib';
+@import '~@mozilla-protocol/core/protocol/css/components/hero';
+@import '~@mozilla-protocol/core/protocol/css/components/notification-bar';

 // notification

--- a/media/css/firefox/new/basic/ie.scss
+++ b/media/css/firefox/new/basic/ie.scss
@ -5,5 +5,5 @@
 $font-path: '/media/fonts';
 $image-path: '/media/protocol/img';

-@import '../../../../protocol/css/includes/lib';
+@import '~@mozilla-protocol/core/protocol/css/includes/lib';
@import '../../../protocol/components/navigation-ie';
--- a/media/css/firefox/new/basic/platform.scss
+++ b/media/css/firefox/new/basic/platform.scss
@ -5,9 +5,9 @@
 $font-path: '/media/fonts';
 $image-path: '/media/protocol/img';

-@import '../../../../protocol/css/includes/lib';
-@import '../../../../protocol/css/components/picto-card';
-@import '../../../../protocol/css/templates/card-layout';
+@import '~@mozilla-protocol/core/protocol/css/includes/lib';
+@import '~@mozilla-protocol/core/protocol/css/components/picto-card';
+@import '~@mozilla-protocol/core/protocol/css/templates/card-layout';


 .t-platform .mzp-c-card-picto-content {
--- a/media/css/firefox/new/basic/thanks.scss
+++ b/media/css/firefox/new/basic/thanks.scss
@ -5,10 +5,10 @@
 $font-path: '/media/fonts';
 $image-path: '/media/protocol/img';

-@import '../../../../protocol/css/includes/lib';
-@import '../../../../protocol/css/components/call-out';
-@import '../../../../protocol/css/components/emphasis-box';
-@import '../../../../protocol/css/components/notification-bar';
+@import '~@mozilla-protocol/core/protocol/css/includes/lib';
+@import '~@mozilla-protocol/core/protocol/css/components/call-out';
+@import '~@mozilla-protocol/core/protocol/css/components/emphasis-box';
+@import '~@mozilla-protocol/core/protocol/css/components/notification-bar';

 // Hide the /thanks download button as selection is made via JS automatically.
 #thanks-download-button {
--- a/media/css/firefox/new/common/thanks-messaging.scss
+++ b/media/css/firefox/new/common/thanks-messaging.scss
@ -5,7 +5,7 @@
 $font-path: '/media/fonts';
 $image-path: '/media/protocol/img';

-@import '../../../../protocol/css/includes/lib';
+@import '~@mozilla-protocol/core/protocol/css/includes/lib';

 /**
 * Conditional messaging for supported / unsupported
--- a/media/css/firefox/new/desktop/download.scss
+++ b/media/css/firefox/new/desktop/download.scss
@ -4,18 +4,17 @@

 $font-path: '/media/fonts';
 $image-path: '/media/protocol/img';
-@import '../../../../protocol/css/includes/lib';

-@import '../../../../protocol/css/components/emphasis-box';
-@import '../../../../protocol/css/components/modal';
-@import '../../../../protocol/css/components/notification-bar';
-@import '../../../../protocol/css/components/section-heading';
-@import '../../../../protocol/css/components/zap';
-@import '../../../../protocol/css/templates/card-layout';
+@import '~@mozilla-protocol/core/protocol/css/includes/lib';
+@import '~@mozilla-protocol/core/protocol/css/components/emphasis-box';
+@import '~@mozilla-protocol/core/protocol/css/components/modal';
+@import '~@mozilla-protocol/core/protocol/css/components/notification-bar';
+@import '~@mozilla-protocol/core/protocol/css/components/section-heading';
+@import '~@mozilla-protocol/core/protocol/css/components/zap';
+@import '~@mozilla-protocol/core/protocol/css/templates/card-layout';
@import '../../../protocol/components/sub-navigation';
@import '../../sticky-promo';

-
 // --------------------------------------------------------------------------
 // Protocol over-rides
 // https://github.com/mozilla/protocol/issues/345
--- a/media/css/firefox/new/desktop/ie8.scss
+++ b/media/css/firefox/new/desktop/ie8.scss
@ -5,7 +5,7 @@
 $font-path: '/media/fonts';
 $image-path: '/media/protocol/img';

-@import '../../../../protocol/css/includes/lib';
+@import '~@mozilla-protocol/core/protocol/css/includes/lib';
@import '../../../protocol/components/navigation-ie';

 $h-grid-lg: 80px;
--- a/media/css/firefox/new/desktop/ie9.scss
+++ b/media/css/firefox/new/desktop/ie9.scss
@ -5,8 +5,7 @@
 $font-path: '/media/fonts';
 $image-path: '/media/protocol/img';

-@import '../../../../protocol/css/includes/lib';
-
+@import '~@mozilla-protocol/core/protocol/css/includes/lib';

 .c-menu-item .c-menu-item-desc {
    display: none;
--- a/media/css/firefox/new/desktop/thanks-ie.scss
+++ b/media/css/firefox/new/desktop/thanks-ie.scss
@ -5,5 +5,5 @@
 $font-path: '/media/fonts';
 $image-path: '/media/protocol/img';

-@import '../../../../protocol/css/includes/lib';
+@import '~@mozilla-protocol/core/protocol/css/includes/lib';
@import '../../../protocol/components/navigation-ie';
--- a/media/css/firefox/new/desktop/thanks.scss
+++ b/media/css/firefox/new/desktop/thanks.scss
@ -5,12 +5,11 @@
 $font-path: '/media/fonts';
 $image-path: '/media/protocol/img';

-@import '../../../../protocol/css/includes/lib';
-@import '../../../../protocol/css/components/emphasis-box';
-@import '../../../../protocol/css/components/notification-bar';
-@import '../../../../protocol/css/components/zap';
-@import '../../../../protocol/css/templates/card-layout';
-
+@import '~@mozilla-protocol/core/protocol/css/includes/lib';
+@import '~@mozilla-protocol/core/protocol/css/components/emphasis-box';
+@import '~@mozilla-protocol/core/protocol/css/components/notification-bar';
+@import '~@mozilla-protocol/core/protocol/css/components/zap';
+@import '~@mozilla-protocol/core/protocol/css/templates/card-layout';

 // --------------------------------------------------------------------------
 // Protocol over-rides
--- a/media/css/firefox/new/yandex/download-yandex.scss
+++ b/media/css/firefox/new/yandex/download-yandex.scss
@ -4,9 +4,9 @@

 $font-path: '/media/fonts';
 $image-path: '/media/protocol/img';
-@import '../../../../protocol/css/includes/lib';

-@import '../../../../protocol/css/components/call-out';
+@import '~@mozilla-protocol/core/protocol/css/includes/lib';
+@import '~@mozilla-protocol/core/protocol/css/components/call-out';


 //* ====================================================================== */
--- a/media/css/firefox/pocket.scss
+++ b/media/css/firefox/pocket.scss
@ -5,15 +5,14 @@
 $font-path: '/media/fonts';
 $image-path: '/media/protocol/img';

-@import '../../protocol/css/includes/lib';
-@import '../../protocol/css/components/logos/wordmark';
-@import '../../protocol/css/components/logos/wordmark-product-pocket';
-@import '../../protocol/css/components/billboard';
-@import '../../protocol/css/components/call-out';
-@import '../../protocol/css/components/split';
-@import '../../protocol/css/components/hero';
-@import '../../protocol/css/templates/card-layout';
-
+@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-pocket';
+@import '~@mozilla-protocol/core/protocol/css/components/billboard';
+@import '~@mozilla-protocol/core/protocol/css/components/call-out';
+@import '~@mozilla-protocol/core/protocol/css/components/split';
+@import '~@mozilla-protocol/core/protocol/css/components/hero';
+@import '~@mozilla-protocol/core/protocol/css/templates/card-layout';

 .pocket-hero {
    &.mzp-c-split {
--- a/media/css/firefox/privacy/book.scss
+++ b/media/css/firefox/privacy/book.scss
@ -5,14 +5,14 @@
 $font-path: '/media/fonts';
 $image-path: '/media/protocol/img';

-@import '../../../protocol/css/includes/lib';
-@import '../../../protocol/css/components/split';
-@import '../../../protocol/css/components/card';
-@import '../../../protocol/css/components/hero';
-@import '../../../protocol/css/components/picto';
-@import '../../../protocol/css/templates/card-layout';
-@import '../../../protocol/css/templates/multi-column';
-@import '../../../protocol/css/components/inline-list';
+@import '~@mozilla-protocol/core/protocol/css/includes/lib';
+@import '~@mozilla-protocol/core/protocol/css/components/split';
+@import '~@mozilla-protocol/core/protocol/css/components/card';
+@import '~@mozilla-protocol/core/protocol/css/components/hero';
+@import '~@mozilla-protocol/core/protocol/css/components/picto';
+@import '~@mozilla-protocol/core/protocol/css/templates/card-layout';
+@import '~@mozilla-protocol/core/protocol/css/templates/multi-column';
+@import '~@mozilla-protocol/core/protocol/css/components/inline-list';

 //* -------------------------------------------------------------------------- */
 // Split component adjustments
--- a/media/css/firefox/privacy/common.scss
+++ b/media/css/firefox/privacy/common.scss
@ -6,16 +6,15 @@ $font-path: '/media/fonts';
 $image-path: '/media/protocol/img';
 $brand-theme: 'firefox';

-@import '../../../protocol/css/includes/lib';
-@import '../../../protocol/css/components/call-out';
-@import '../../../protocol/css/components/split';
-@import '../../../protocol/css/templates/multi-column';
-@import '../../../protocol/css/components/picto';
-@import '../../../protocol/css/components/picto-card';
-@import '../../../protocol/css/templates/card-layout';
+@import '~@mozilla-protocol/core/protocol/css/includes/lib';
+@import '~@mozilla-protocol/core/protocol/css/components/call-out';
+@import '~@mozilla-protocol/core/protocol/css/components/split';
+@import '~@mozilla-protocol/core/protocol/css/templates/multi-column';
+@import '~@mozilla-protocol/core/protocol/css/components/picto';
+@import '~@mozilla-protocol/core/protocol/css/components/picto-card';
+@import '~@mozilla-protocol/core/protocol/css/templates/card-layout';
@import '../../protocol/components/sub-navigation';

-
 /* -------------------------------------------------------------------------- */
 // Privacy Notice Call Out

--- a/media/css/firefox/privacy/products.scss
+++ b/media/css/firefox/privacy/products.scss
@ -5,14 +5,14 @@
 $font-path: '/media/fonts';
 $image-path: '/media/protocol/img';

-@import '../../../protocol/css/includes/lib';
-@import '../../../protocol/css/components/emphasis-box';
+@import '~@mozilla-protocol/core/protocol/css/includes/lib';
+@import '~@mozilla-protocol/core/protocol/css/components/emphasis-box';
+@import '~@mozilla-protocol/core/protocol/css/components/logos/wordmark';
+@import '~@mozilla-protocol/core/protocol/css/components/logos/wordmark-product-monitor';
+@import '~@mozilla-protocol/core/protocol/css/components/logos/wordmark-product-vpn';
+@import '~@mozilla-protocol/core/protocol/css/components/logos/wordmark-product-pocket';
+@import '~@mozilla-protocol/core/protocol/css/components/logos/wordmark-product-firefox';
@import '../../protocol/components/fxa-form';
-@import '../../../protocol/css/components/logos/wordmark';
-@import '../../../protocol/css/components/logos/wordmark-product-monitor';
-@import '../../../protocol/css/components/logos/wordmark-product-vpn';
-@import '../../../protocol/css/components/logos/wordmark-product-pocket';
-@import '../../../protocol/css/components/logos/wordmark-product-firefox';

 .t-medium .mzp-l-content,
 .t-medium .mzp-c-split-container {
--- a/media/css/firefox/privacy/promise.scss
+++ b/media/css/firefox/privacy/promise.scss
@ -5,10 +5,9 @@
 $font-path: '/media/fonts';
 $image-path: '/media/protocol/img';

-@import '../../../protocol/css/includes/lib';
-@import '../../../protocol/css/components/picto';
-@import '../../../protocol/css/templates/multi-column';
-
+@import '~@mozilla-protocol/core/protocol/css/includes/lib';
+@import '~@mozilla-protocol/core/protocol/css/components/picto';
+@import '~@mozilla-protocol/core/protocol/css/templates/multi-column';

 /* -------------------------------------------------------------------------- */
 // Main Hero
--- a/media/css/firefox/releasenotes.scss
+++ b/media/css/firefox/releasenotes.scss
@ -4,11 +4,11 @@

 $font-path: '/media/fonts';
 $image-path: '/media/protocol/img';
-@import '../../protocol/css/includes/lib';

-@import '../../protocol/css/templates/main-with-sidebar';
-@import '../../protocol/css/components/article';
-@import '../../protocol/css/components/call-out';
+@import '~@mozilla-protocol/core/protocol/css/includes/lib';
+@import '~@mozilla-protocol/core/protocol/css/templates/main-with-sidebar';
+@import '~@mozilla-protocol/core/protocol/css/components/article';
+@import '~@mozilla-protocol/core/protocol/css/components/call-out';
@import '../protocol/components/sub-navigation';


--- a/media/css/firefox/releases-index.scss
+++ b/media/css/firefox/releases-index.scss
@ -4,7 +4,7 @@

 $font-path: '/media/fonts';
 $image-path: '/media/protocol/img';
-@import '../../protocol/css/includes/lib';
+@import '~@mozilla-protocol/core/protocol/css/includes/lib';


 .c-logo {
--- a/media/css/firefox/retention/thank-you.scss
+++ b/media/css/firefox/retention/thank-you.scss
@ -5,8 +5,8 @@
 $font-path: '/media/fonts';
 $image-path: '/media/protocol/img';

-@import '../../../protocol/css/includes/lib';
-@import '../../../protocol/css/components/newsletter-form';
+@import '~@mozilla-protocol/core/protocol/css/includes/lib';
+@import '~@mozilla-protocol/core/protocol/css/components/newsletter-form';

@font-face {
    font-family: Antonio;
--- a/media/css/firefox/seo.scss
+++ b/media/css/firefox/seo.scss
@ -5,11 +5,11 @@
 $font-path: '/media/fonts';
 $image-path: '/media/protocol/img';

-@import "../../protocol/css/includes/lib";
-@import "../../protocol/css/components/article";
-@import "../../protocol/css/components/call-out";
-@import "../../protocol/css/components/split";
-@import '../../protocol/css/components/logos/logo-product-firefox';
+@import "~@mozilla-protocol/core/protocol/css/includes/lib";
+@import "~@mozilla-protocol/core/protocol/css/components/article";
+@import "~@mozilla-protocol/core/protocol/css/components/call-out";
+@import "~@mozilla-protocol/core/protocol/css/components/split";
+@import '~@mozilla-protocol/core/protocol/css/components/logos/logo-product-firefox';

 .c-hero-desc {
    @include text-body-xl;
--- a/media/css/firefox/set-as-default/landing.scss
+++ b/media/css/firefox/set-as-default/landing.scss
@ -5,11 +5,10 @@
 $font-path: '/media/fonts';
 $image-path: '/media/protocol/img';

-@import '../../../protocol/css/includes/lib';
-@import '../../../protocol/css/components/hero';
-@import '../../../protocol/css/components/picto';
-@import '../../../protocol/css/templates/multi-column';
-
+@import '~@mozilla-protocol/core/protocol/css/includes/lib';
+@import '~@mozilla-protocol/core/protocol/css/components/hero';
+@import '~@mozilla-protocol/core/protocol/css/components/picto';
+@import '~@mozilla-protocol/core/protocol/css/templates/multi-column';

 .mzp-c-hero {
    .mzp-c-hero-title {
--- a/Показать больше
+++ b/Показать больше