@openedx/frontend-base 1.0.0-alpha.32 → 1.0.0-alpha.33

package/dist/shell/site.config.dev.d.ts

@@ -1,4 +1,4 @@
 import { SiteConfig } from '../types';
-import './app.scss';
+import './style';
 declare const siteConfig: SiteConfig;
 export default siteConfig;

package/dist/shell/site.config.dev.js

@@ -1,7 +1,7 @@
 import { EnvironmentTypes } from '../types';
 import { devFooterApp, devHeaderApp, devHomeApp, devUserApp, slotShowcaseApp } from './dev';
 import { footerApp, headerApp, shellApp } from '.';
-import './app.scss';
+import './style';
 const siteConfig = {
     apps: [
         shellApp,

package/dist/shell/site.config.dev.js.map

@@ -1 +1 @@
-{"version":3,"file":"site.config.dev.js","sourceRoot":"","sources":["../../shell/site.config.dev.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAc,MAAM,UAAU,CAAC;AACxD,OAAO,EAAE,YAAY,EAAE,YAAY,EAAE,UAAU,EAAE,UAAU,EAAE,eAAe,EAAE,MAAM,OAAO,CAAC;AAC5F,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,GAAG,CAAC;AAEnD,OAAO,YAAY,CAAC;AAEpB,MAAM,UAAU,GAAe;IAC7B,IAAI,EAAE;QACJ,QAAQ;QACR,SAAS;QACT,SAAS;QACT,UAAU;QACV,UAAU;QACV,YAAY;QACZ,YAAY;QACZ,eAAe;KAChB;IAED,cAAc,EAAE;QACd;YACE,IAAI,EAAE,mCAAmC;YACzC,GAAG,EAAE,4CAA4C;SAClD;QACD;YACE,IAAI,EAAE,mCAAmC;YACzC,GAAG,EAAE,4CAA4C;SAClD;QACD;YACE,IAAI,EAAE,kCAAkC;YACxC,GAAG,EAAE,qCAAqC;SAC3C;KACF;IAED,UAAU;IACV,MAAM,EAAE,OAAO;IACf,QAAQ,EAAE,kBAAkB;IAC5B,OAAO,EAAE,mCAAmC;IAC5C,WAAW,EAAE,gBAAgB,CAAC,WAAW;IAEzC,gBAAgB;IAChB,QAAQ,EAAE,oCAAoC;IAC9C,SAAS,EAAE,qCAAqC;IAEhD,WAAW;IACX,UAAU,EAAE,8BAA8B;IAC1C,oBAAoB,EAAE,+BAA+B;CACtD,CAAC;AAEF,eAAe,UAAU,CAAC","sourcesContent":["import { EnvironmentTypes, SiteConfig } from '../types';\nimport { devFooterApp, devHeaderApp, devHomeApp, devUserApp, slotShowcaseApp } from './dev';\nimport { footerApp, headerApp, shellApp } from '.';\n\nimport './app.scss';\n\nconst siteConfig: SiteConfig = {\n  apps: [\n    shellApp,\n    headerApp,\n    footerApp,\n    devUserApp,\n    devHomeApp,\n    devHeaderApp,\n    devFooterApp,\n    slotShowcaseApp,\n  ],\n\n  externalRoutes: [\n    {\n      role: 'org.openedx.frontend.role.profile',\n      url: 'http://apps.local.openedx.io:1995/profile/'\n    },\n    {\n      role: 'org.openedx.frontend.role.account',\n      url: 'http://apps.local.openedx.io:1997/account/'\n    },\n    {\n      role: 'org.openedx.frontend.role.logout',\n      url: 'http://local.openedx.io:8000/logout'\n    },\n  ],\n\n  // General\n  siteId: 'shell',\n  siteName: 'My Open edX Site',\n  baseUrl: 'http://apps.local.openedx.io:8080',\n  environment: EnvironmentTypes.DEVELOPMENT,\n\n  // Frontend URLs\n  loginUrl: 'http://local.openedx.io:8000/login',\n  logoutUrl: 'http://local.openedx.io:8000/logout',\n\n  // API URLs\n  lmsBaseUrl: 'http://local.openedx.io:8000',\n  runtimeConfigJsonUrl: '/api/frontend_site_config/v1/',\n};\n\nexport default siteConfig;\n"]}
+{"version":3,"file":"site.config.dev.js","sourceRoot":"","sources":["../../shell/site.config.dev.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAc,MAAM,UAAU,CAAC;AACxD,OAAO,EAAE,YAAY,EAAE,YAAY,EAAE,UAAU,EAAE,UAAU,EAAE,eAAe,EAAE,MAAM,OAAO,CAAC;AAC5F,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,GAAG,CAAC;AAEnD,OAAO,SAAS,CAAC;AAEjB,MAAM,UAAU,GAAe;IAC7B,IAAI,EAAE;QACJ,QAAQ;QACR,SAAS;QACT,SAAS;QACT,UAAU;QACV,UAAU;QACV,YAAY;QACZ,YAAY;QACZ,eAAe;KAChB;IAED,cAAc,EAAE;QACd;YACE,IAAI,EAAE,mCAAmC;YACzC,GAAG,EAAE,4CAA4C;SAClD;QACD;YACE,IAAI,EAAE,mCAAmC;YACzC,GAAG,EAAE,4CAA4C;SAClD;QACD;YACE,IAAI,EAAE,kCAAkC;YACxC,GAAG,EAAE,qCAAqC;SAC3C;KACF;IAED,UAAU;IACV,MAAM,EAAE,OAAO;IACf,QAAQ,EAAE,kBAAkB;IAC5B,OAAO,EAAE,mCAAmC;IAC5C,WAAW,EAAE,gBAAgB,CAAC,WAAW;IAEzC,gBAAgB;IAChB,QAAQ,EAAE,oCAAoC;IAC9C,SAAS,EAAE,qCAAqC;IAEhD,WAAW;IACX,UAAU,EAAE,8BAA8B;IAC1C,oBAAoB,EAAE,+BAA+B;CACtD,CAAC;AAEF,eAAe,UAAU,CAAC","sourcesContent":["import { EnvironmentTypes, SiteConfig } from '../types';\nimport { devFooterApp, devHeaderApp, devHomeApp, devUserApp, slotShowcaseApp } from './dev';\nimport { footerApp, headerApp, shellApp } from '.';\n\nimport './style';\n\nconst siteConfig: SiteConfig = {\n  apps: [\n    shellApp,\n    headerApp,\n    footerApp,\n    devUserApp,\n    devHomeApp,\n    devHeaderApp,\n    devFooterApp,\n    slotShowcaseApp,\n  ],\n\n  externalRoutes: [\n    {\n      role: 'org.openedx.frontend.role.profile',\n      url: 'http://apps.local.openedx.io:1995/profile/'\n    },\n    {\n      role: 'org.openedx.frontend.role.account',\n      url: 'http://apps.local.openedx.io:1997/account/'\n    },\n    {\n      role: 'org.openedx.frontend.role.logout',\n      url: 'http://local.openedx.io:8000/logout'\n    },\n  ],\n\n  // General\n  siteId: 'shell',\n  siteName: 'My Open edX Site',\n  baseUrl: 'http://apps.local.openedx.io:8080',\n  environment: EnvironmentTypes.DEVELOPMENT,\n\n  // Frontend URLs\n  loginUrl: 'http://local.openedx.io:8000/login',\n  logoutUrl: 'http://local.openedx.io:8000/logout',\n\n  // API URLs\n  lmsBaseUrl: 'http://local.openedx.io:8000',\n  runtimeConfigJsonUrl: '/api/frontend_site_config/v1/',\n};\n\nexport default siteConfig;\n"]}

package/dist/shell/style.d.ts

@@ -0,0 +1,3 @@
+import '@openedx/paragon/dist/core.min.css';
+import '@openedx/paragon/dist/light.min.css';
+import './style.scss';

package/dist/shell/style.js

@@ -0,0 +1,10 @@
+/*
+ * Shell style manifest.  Each import is a separate webpack module, which
+ * keeps Paragon's CSS and the shell's own SCSS as independent compilation
+ * units: the build pipeline wraps each in the `shell` cascade layer by
+ * resource path.  See ADR 0008.
+ */
+import '@openedx/paragon/dist/core.min.css';
+import '@openedx/paragon/dist/light.min.css';
+import './style.scss';
+//# sourceMappingURL=style.js.map

package/dist/shell/style.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"style.js","sourceRoot":"","sources":["../../shell/style.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AACH,OAAO,oCAAoC,CAAC;AAC5C,OAAO,qCAAqC,CAAC;AAC7C,OAAO,cAAc,CAAC","sourcesContent":["/*\n * Shell style manifest.  Each import is a separate webpack module, which\n * keeps Paragon's CSS and the shell's own SCSS as independent compilation\n * units: the build pipeline wraps each in the `shell` cascade layer by\n * resource path.  See ADR 0008.\n */\nimport '@openedx/paragon/dist/core.min.css';\nimport '@openedx/paragon/dist/light.min.css';\nimport './style.scss';\n"]}

package/dist/shell/{app.scss → style.scss}

@@ -1,5 +1,4 @@
-@use "@openedx/paragon/dist/core.min.css";
-@use "@openedx/paragon/dist/light.min.css";
+@layer paragon, shell, app, site, brand;
 
 .flex-basis-0 {
   flex-basis: 0 !important;

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

@@ -1,8 +1,2 @@
 import { RuleSetRule } from 'webpack';
-/**
- * There are a few things we need to do here.
- *
- * - We only want to use MiniCssExtractPlugin on dependencies in dev, but not on our source code.
- * - We only want CssNano in production.
- */
 export default function getStylesheetRule(mode: 'dev' | 'production'): RuleSetRule;

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

@@ -10,49 +10,87 @@ const mini_css_extract_plugin_1 = __importDefault(require("mini-css-extract-plug
 const path_1 = __importDefault(require("path"));
 const postcss_custom_media_1 = __importDefault(require("postcss-custom-media"));
 const postcss_rtlcss_1 = __importDefault(require("postcss-rtlcss"));
-/**
+const postcssWrapLayer_1 = __importDefault(require("./postcssWrapLayer"));
+/*
+ * Resource matchers for each cascade layer.
+ * Order declared at the site level: `paragon, shell, app, site, brand` (later wins).
+ *
+ * - paragon: @openedx/paragon base styles.  First so everything else can override.
+ * - shell:   frontend-base shell styles.
+ * - app:     catch-all for any other stylesheet pulled from node_modules.
+ *            Keeps apps from clobbering site or brand overrides without requiring
+ *            app packages to follow any naming convention or self-declaration.
+ * - site:    the composing site's own source tree (anything outside node_modules).
+ * - brand:   @openedx/brand-* packages, last so build-time brand matches the
+ *            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[\\/]/;
+/*
  * There are a few things we need to do here.
  *
  * - We only want to use MiniCssExtractPlugin on dependencies in dev, but not on our source code.
  * - We only want CssNano in production.
+ * - Each resource class (paragon, shell, app, site, brand) is wrapped in its
+ *   own cascade layer by a PostCSS plugin so the cascade order is
+ *   `paragon, shell, app, site, brand`.
  */
 function getStylesheetRule(mode) {
+    return {
+        test: /(.scss|.css)$/,
+        oneOf: [
+            {
+                resource: PARAGON_RESOURCE,
+                // We need Paragon to not elide CSS: we have to be able to import it
+                // directly from shell/style.ts
+                sideEffects: true,
+                use: [
+                    mini_css_extract_plugin_1.default.loader,
+                    ...getStyleUseConfig(mode, 'paragon'),
+                ],
+            },
+            {
+                resource: SHELL_RESOURCE,
+                use: [
+                    mini_css_extract_plugin_1.default.loader,
+                    ...getStyleUseConfig(mode, 'shell'),
+                ],
+            },
+            {
+                resource: BRAND_RESOURCE,
+                use: [
+                    mini_css_extract_plugin_1.default.loader,
+                    ...getStyleUseConfig(mode, 'brand'),
+                ],
+            },
+            {
+                resource: { not: [NODE_MODULES] },
+                use: [
+                    getFirstLoader(mode),
+                    ...getStyleUseConfig(mode, 'site'),
+                ],
+            },
+            {
+                use: [
+                    getFirstLoader(mode),
+                    ...getStyleUseConfig(mode, 'app'),
+                ],
+            },
+        ],
+    };
+}
+function getFirstLoader(mode) {
+    // In dev we keep site/app styles in JS bundles so hot-reloading works;
+    // in production everything is extracted to CSS files.
     if (mode === 'production') {
-        // In the production case, all files should go through MiniCssExtractPlugin.
-        return {
-            test: /(.scss|.css)$/,
-            use: [
-                mini_css_extract_plugin_1.default.loader,
-                ...getStyleUseConfig(mode),
-            ],
-        };
-    }
-    else {
-        // In the dev case, only our @openedx dependencies go through MiniCssExtractPlugin.
-        // We are not extracting CSS from the javascript bundles in development because extracting
-        // prevents hot-reloading from working, it increases build time, and we don't care about
-        // flash-of-unstyled-content issues in development.
-        return {
-            test: /(.scss|.css)$/,
-            oneOf: [
-                {
-                    resource: /(@openedx\/paragon|@(open)?edx\/brand)/,
-                    use: [
-                        mini_css_extract_plugin_1.default.loader,
-                        ...getStyleUseConfig(mode),
-                    ],
-                },
-                {
-                    use: [
-                        require.resolve('style-loader'), // creates style nodes from JS strings
-                        ...getStyleUseConfig(mode),
-                    ],
-                },
-            ]
-        };
+        return mini_css_extract_plugin_1.default.loader;
     }
+    return require.resolve('style-loader');
 }
-function getStyleUseConfig(mode) {
+function getStyleUseConfig(mode, layer) {
     return [
         {
             loader: require.resolve('css-loader'), // translates CSS into CommonJS
@@ -71,7 +109,7 @@ function getStyleUseConfig(mode) {
             loader: require.resolve('postcss-loader'),
             options: {
                 postcssOptions: {
-                    plugins: getPostCssLoaderPlugins(mode), // Different behavior for dev and production.
+                    plugins: getPostCssLoaderPlugins(mode, layer),
                 },
             },
         },
@@ -93,10 +131,7 @@ function getStyleUseConfig(mode) {
         },
     ];
 }
-/**
- * This exists just to conditionally include CssNano in production.
- */
-function getPostCssLoaderPlugins(mode) {
+function getPostCssLoaderPlugins(mode, layer) {
     const plugins = [
         (0, autoprefixer_1.default)({
             remove: false, // Prevents removing vendor prefixes
@@ -108,5 +143,6 @@ function getPostCssLoaderPlugins(mode) {
         plugins.push((0, cssnano_1.default)());
     }
     plugins.push((0, postcss_custom_media_1.default)());
+    plugins.push((0, postcssWrapLayer_1.default)({ layer }));
     return plugins;
 }

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

@@ -0,0 +1,4 @@
+import { Plugin } from 'postcss';
+export default function postcssWrapLayer({ layer }: {
+    layer: string;
+}): Plugin;

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

@@ -0,0 +1,32 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = postcssWrapLayer;
+const postcss_1 = require("postcss");
+/*
+ * Wraps every top-level rule in the stylesheet in a single `@layer <name> { ... }`
+ * block, so that downstream cascade-layer ordering applies uniformly to everything
+ * produced by this compilation unit.
+ *
+ * Nodes left at the root (not moved into the layer):
+ * - `@charset`, `@import`, `@use`, `@forward` (must stay at the top of a stylesheet)
+ * - `@layer` statements and blocks (already layered, or declaring layer order)
+ */
+function postcssWrapLayer({ layer }) {
+    const keepAtTop = new Set(['charset', 'import', 'use', 'forward', 'layer']);
+    return {
+        postcssPlugin: 'postcss-wrap-layer',
+        Once(root) {
+            const layerRule = new postcss_1.AtRule({ name: 'layer', params: layer });
+            root.each(node => {
+                if (node.type === 'atrule' && keepAtTop.has(node.name)) {
+                    return;
+                }
+                node.remove();
+                layerRule.append(node);
+            });
+            if (layerRule.nodes && layerRule.nodes.length > 0) {
+                root.append(layerRule);
+            }
+        },
+    };
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openedx/frontend-base",
-  "version": "1.0.0-alpha.32",
+  "version": "1.0.0-alpha.33",
   "description": "Build tools, setup and config for frontend apps",
   "publishConfig": {
     "access": "public"
@@ -9,7 +9,7 @@
     ".": "./dist/index.js",
     "./tools": "./dist/tools/index.js",
     "./tools/tsconfig.json": "./dist/tools/typescript/tsconfig.json",
-    "./shell/app.scss": "./dist/shell/app.scss",
+    "./shell/style": "./dist/shell/style.js",
     "./shell/site": "./dist/shell/site.js"
   },
   "files": [
@@ -53,7 +53,8 @@
   },
   "sideEffects": [
     "*.css",
-    "*.scss"
+    "*.scss",
+    "**/shell/style.{js,ts}"
   ],
   "homepage": "https://github.com/openedx/frontend-base#readme",
   "dependencies": {