@openedx/frontend-base 1.0.0-alpha.39 → 1.0.0-alpha.40

package/dist/shell/layer-order.scss

@@ -0,0 +1 @@
+@layer paragon, shell, app, site, brand;

package/dist/shell/style.scss

@@ -1,5 +1,3 @@
-@layer paragon, shell, app, site, brand;
-
 .flex-basis-0 {
   flex-basis: 0 !important;
 }

package/dist/tools/webpack/common-config/all/getStylesheetRule.d.ts

@@ -1,2 +1,12 @@
 import { RuleSetRule } from 'webpack';
+export declare const PARAGON_PACKAGE: {
+    name: string;
+};
+export declare const SHELL_PACKAGE: {
+    name: string;
+};
+export declare const BRAND_PACKAGE: {
+    name: RegExp;
+};
+export declare const APP_RESOURCE: RegExp;
 export default function getStylesheetRule(mode: 'dev' | 'production'): RuleSetRule;

package/dist/tools/webpack/common-config/all/getStylesheetRule.js

@@ -3,6 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.APP_RESOURCE = exports.BRAND_PACKAGE = exports.SHELL_PACKAGE = exports.PARAGON_PACKAGE = void 0;
 exports.default = getStylesheetRule;
 const autoprefixer_1 = __importDefault(require("autoprefixer"));
 const cssnano_1 = __importDefault(require("cssnano"));
@@ -25,10 +26,11 @@ const postcssWrapLayer_1 = __importDefault(require("./postcssWrapLayer"));
  *            precedence of runtime brand CSS (which is injected unlayered via
  *            <link> tags and thus beats every layered rule).
  */
-const PARAGON_RESOURCE = /@openedx[\\/]paragon[\\/]/;
-const SHELL_RESOURCE = /(@openedx[\\/]frontend-base|frontend-base[\\/]shell)[\\/]/;
-const BRAND_RESOURCE = /@(open)?edx[\\/]brand(-[^\\/]+)?[\\/]/;
-const NODE_MODULES = /[\\/]node_modules[\\/]/;
+exports.PARAGON_PACKAGE = { name: '@openedx/paragon' };
+exports.SHELL_PACKAGE = { name: '@openedx/frontend-base' };
+exports.BRAND_PACKAGE = { name: /^@(open)?edx\/brand(-.+)?$/ };
+// The site/app split is positional (my project vs. a dep), so it is path-based.
+exports.APP_RESOURCE = /[\\/](node_modules|packages)[\\/]/;
 /*
  * There are a few things we need to do here.
  *
@@ -43,7 +45,7 @@ function getStylesheetRule(mode) {
         test: /(.scss|.css)$/,
         oneOf: [
             {
-                resource: PARAGON_RESOURCE,
+                descriptionData: exports.PARAGON_PACKAGE,
                 // We need Paragon to not elide CSS: we have to be able to import it
                 // directly from shell/style.ts
                 sideEffects: true,
@@ -53,21 +55,21 @@ function getStylesheetRule(mode) {
                 ],
             },
             {
-                resource: SHELL_RESOURCE,
+                descriptionData: exports.SHELL_PACKAGE,
                 use: [
                     mini_css_extract_plugin_1.default.loader,
                     ...getStyleUseConfig(mode, 'shell'),
                 ],
             },
             {
-                resource: BRAND_RESOURCE,
+                descriptionData: exports.BRAND_PACKAGE,
                 use: [
                     mini_css_extract_plugin_1.default.loader,
                     ...getStyleUseConfig(mode, 'brand'),
                 ],
             },
             {
-                resource: { not: [NODE_MODULES] },
+                resource: { not: [exports.APP_RESOURCE] },
                 use: [
                     getFirstLoader(mode),
                     ...getStyleUseConfig(mode, 'site'),

package/dist/tools/webpack/common-config/site/getHtmlWebpackPlugin.js

@@ -6,11 +6,19 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.default = getHtmlWebpackPlugin;
 const html_webpack_plugin_1 = __importDefault(require("html-webpack-plugin"));
 const path_1 = __importDefault(require("path"));
-// Generates an HTML file in the output directory.
+/*
+ * Generates an HTML file in the output directory.
+ *
+ * `cssLayerOrder` is listed first so its <link> is injected before any other
+ * stylesheet. That file contains the `@layer paragon, shell, app, site, brand;`
+ * statement, which locks in cascade-layer priority before any layer name is
+ * mentioned by the rest of the CSS the browser parses.
+ */
 function getHtmlWebpackPlugin() {
     return new html_webpack_plugin_1.default({
-        inject: true, // Appends script tags linking to the webpack bundles at the end of the body
+        inject: true,
         template: path_1.default.resolve(process.cwd(), 'public/index.html'),
-        chunks: ['app'],
+        chunks: ['cssLayerOrder', 'app'],
+        chunksSortMode: 'manual',
     });
 }

package/dist/tools/webpack/webpack.config.build.js

@@ -19,6 +19,7 @@ const config = {
     mode: 'production',
     devtool: 'source-map',
     entry: {
+        cssLayerOrder: '@openedx/frontend-base/shell/layer-order.scss',
         app: '@openedx/frontend-base/shell/site',
     },
     output: {

package/dist/tools/webpack/webpack.config.dev.js

@@ -17,6 +17,7 @@ const resolvedSiteConfigPath = (0, getResolvedSiteConfigPath_1.default)('site.co
 const resolvedSiteI18nPath = (0, getResolvedSiteI18nPath_1.default)('src/i18n');
 const config = {
     entry: {
+        cssLayerOrder: '@openedx/frontend-base/shell/layer-order.scss',
         app: '@openedx/frontend-base/shell/site',
     },
     output: {

package/dist/tools/webpack/webpack.config.dev.shell.js

@@ -19,6 +19,7 @@ const resolvedSiteConfigPath = (0, getResolvedSiteConfigPath_1.default)('shell/s
 const resolvedSiteI18nPath = (0, getResolvedSiteI18nPath_1.default)('test-site/src/i18n');
 const config = {
     entry: {
+        cssLayerOrder: path_1.default.resolve(process.cwd(), 'shell/layer-order.scss'),
         app: path_1.default.resolve(process.cwd(), 'shell/site'),
     },
     output: {
@@ -85,9 +86,10 @@ const config = {
             filename: '[name].css',
         }),
         new html_webpack_plugin_1.default({
-            inject: true, // Appends script tags linking to the webpack bundles at the end of the body
+            inject: true,
             template: path_1.default.resolve(process.cwd(), 'shell/public/index.html'),
-            chunks: ['app'],
+            chunks: ['cssLayerOrder', 'app'],
+            chunksSortMode: 'manual',
         }),
         new react_refresh_webpack_plugin_1.default(),
         new fork_ts_checker_webpack_plugin_1.default(),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openedx/frontend-base",
-  "version": "1.0.0-alpha.39",
+  "version": "1.0.0-alpha.40",
   "description": "Build tools, setup and config for frontend apps",
   "publishConfig": {
     "access": "public"
@@ -9,6 +9,7 @@
     ".": "./dist/index.js",
     "./tools": "./dist/tools/index.js",
     "./tools/tsconfig.json": "./dist/tools/typescript/tsconfig.json",
+    "./shell/layer-order.scss": "./dist/shell/layer-order.scss",
     "./shell/style": "./dist/shell/style.js",
     "./shell/site": "./dist/shell/site.js"
   },