feat(olmo): add css support and cdn compatibility

.eslintrc.js

@@ -1,26 +1,27 @@
+/* eslint-disable import/no-extraneous-dependencies */
 const { createConfig } = require('@edx/frontend-build');
 
 module.exports = createConfig('eslint', {
   rules: {
     // Temporarily update the 'indent', 'template-curly-spacing' and
     // 'no-multiple-empty-lines' rules since they are causing eslint
-    // to fail for no apparent reason since upgrading 
+    // to fail for no apparent reason since upgrading
     // @edx/frontend-build from v3 to v5:
     // - TypeError: Cannot read property 'range' of null
-    'indent': [
+    indent: [
       'error',
       2,
-      { 'ignoredNodes': ['TemplateLiteral', 'SwitchCase'] }
+      { ignoredNodes: ['TemplateLiteral', 'SwitchCase'] },
     ],
     'template-curly-spacing': 'off',
     'jsx-a11y/label-has-associated-control': ['error', {
       labelComponents: [],
       labelAttributes: [],
       controlComponents: [],
       assert: 'htmlFor',
-      depth: 25
+      depth: 25,
     }],
-    'sort-imports': ['error', {ignoreCase: true, ignoreDeclarationSort: true}],
+    'sort-imports': ['error', { ignoreCase: true, ignoreDeclarationSort: true }],
     'import/order': [
       'error',
       {

package.json

@@ -15,7 +15,8 @@
     "lint": "fedx-scripts eslint --ext .js --ext .jsx .",
     "snapshot": "fedx-scripts jest --updateSnapshot",
     "start": "fedx-scripts webpack-dev-server --progress",
-    "test": "fedx-scripts jest --coverage --passWithNoTests"
+    "test": "fedx-scripts jest --coverage --passWithNoTests",
+    "replace-variables": "paragon replace-variables -p src -t usage"
   },
   "husky": {
     "hooks": {
@@ -34,8 +35,8 @@
   "dependencies": {
     "@edx/brand": "npm:@edx/[email protected]",
     "@edx/frontend-component-cookie-policy-banner": "2.2.0",
-    "@edx/frontend-platform": "4.2.0",
-    "@edx/paragon": "20.20.0",
+    "@edx/frontend-platform": "npm:@edunext/[email protected]",
+    "@edx/paragon": "22.0.0-alpha.13",
     "@fortawesome/fontawesome-svg-core": "6.2.1",
     "@fortawesome/free-brands-svg-icons": "6.2.1",
     "@fortawesome/free-regular-svg-icons": "6.2.1",
@@ -73,7 +74,7 @@
   },
   "devDependencies": {
     "@edx/browserslist-config": "^1.1.1",
-    "@edx/frontend-build": "11.0.2",
+    "@edx/frontend-build": "github:edunext/frontend-build#ednx-release/css-variables",
     "@edx/reactifex": "1.1.0",
     "babel-plugin-formatjs": "10.3.31",
     "enzyme": "3.11.0",
@@ -85,4 +86,4 @@
     "jest": "27.5.1",
     "react-test-renderer": "16.14.0"
   }
-}
+}

src/base-component/index.jsx

@@ -1 +1,2 @@
+/* eslint-disable no-restricted-exports */
 export { default } from './BaseComponent';

src/common-components/FormGroup.jsx

@@ -37,7 +37,6 @@ const FormGroup = (props) => {
         onClick={handleClick}
         onChange={props.handleChange}
         controlClassName={props.borderClass}
-
         trailingElement={props.trailingElement}
         floatingLabel={props.floatingLabel}
       >
@@ -71,7 +70,7 @@ FormGroup.defaultProps = {
   className: '',
   errorMessage: '',
   handleBlur: null,
-  handleChange: () => {},
+  handleChange: () => { },
   handleClick: null,
   handleFocus: null,
   helpText: [],

src/common-components/Logistration.jsx

@@ -1,3 +1,4 @@
+/* eslint-disable react/jsx-no-useless-fragment */
 import React, { useEffect, useState } from 'react';
 
 import { getConfig } from '@edx/frontend-platform';
@@ -99,7 +100,7 @@ const Logistration = (props) => {
                     )}
                   </>
                 )}
-              { key && (
+              {key && (
                 <Redirect to={updatePathWithQueryParams(key)} />
               )}
               <div id="main-content" className="main-content">

src/common-components/NotFoundPage.jsx

@@ -2,16 +2,16 @@ import React from 'react';
 
 import { FormattedMessage } from '@edx/frontend-platform/i18n';
 
-export default function NotFoundPage() {
-  return (
-    <div className="container-fluid d-flex py-5 justify-content-center align-items-start text-center">
-      <p className="my-0 py-5 text-muted mw-32em">
-        <FormattedMessage
-          id="error.notfound.message"
-          defaultMessage="The page you're looking for is unavailable or there's an error in the URL. Please check the URL and try again."
-          description="error message when a page does not exist"
-        />
-      </p>
-    </div>
-  );
-}
+const NotFoundPage = () => (
+  <div className="container-fluid d-flex py-5 justify-content-center align-items-start text-center">
+    <p className="my-0 py-5 text-muted mw-32em">
+      <FormattedMessage
+        id="error.notfound.message"
+        defaultMessage="The page you're looking for is unavailable or there's an error in the URL. Please check the URL and try again."
+        description="error message when a page does not exist"
+      />
+    </p>
+  </div>
+);
+
+export default NotFoundPage;

src/common-components/RedirectLogistration.jsx

@@ -1,3 +1,4 @@
+/* eslint-disable react/jsx-no-useless-fragment */
 import React from 'react';
 
 import { getConfig } from '@edx/frontend-platform';
@@ -7,7 +8,7 @@ import { Redirect } from 'react-router-dom';
 import { WELCOME_PAGE } from '../data/constants';
 import { setCookie } from '../data/utils';
 
-function RedirectLogistration(props) {
+const RedirectLogistration = (props) => {
   const {
     finishAuthUrl, redirectUrl, redirectToWelcomePage, success, optionalFields,
   } = props;
@@ -44,7 +45,7 @@ function RedirectLogistration(props) {
     window.location.href = finalRedirectUrl;
   }
   return <></>;
-}
+};
 
 RedirectLogistration.defaultProps = {
   finishAuthUrl: null,

src/common-components/SocialAuthProviders.jsx

@@ -1,3 +1,4 @@
+/* eslint-disable react/jsx-no-useless-fragment */
 import React from 'react';
 
 import { getConfig } from '@edx/frontend-platform';
@@ -9,7 +10,7 @@ import PropTypes from 'prop-types';
 import { LOGIN_PAGE, SUPPORTED_ICON_CLASSES } from '../data/constants';
 import messages from './messages';
 
-function SocialAuthProviders(props) {
+const SocialAuthProviders = (props) => {
   const { intl, referrer, socialAuthProviders } = props;
 
   function handleSubmit(e) {
@@ -34,13 +35,11 @@ function SocialAuthProviders(props) {
         </div>
       )
         : (
-          <>
-            <div className="font-container" aria-hidden="true">
-              <FontAwesomeIcon
-                icon={SUPPORTED_ICON_CLASSES.includes(provider.iconClass) ? ['fab', provider.iconClass] : faSignInAlt}
-              />
-            </div>
-          </>
+          <div className="font-container" aria-hidden="true">
+            <FontAwesomeIcon
+              icon={SUPPORTED_ICON_CLASSES.includes(provider.iconClass) ? ['fab', provider.iconClass] : faSignInAlt}
+            />
+          </div>
         )}
       <span id="provider-name" className="notranslate mr-auto pl-2" aria-hidden="true">{provider.name}</span>
       <span className="sr-only">
@@ -52,7 +51,7 @@ function SocialAuthProviders(props) {
   ));
 
   return <>{socialAuth}</>;
-}
+};
 
 SocialAuthProviders.defaultProps = {
   referrer: LOGIN_PAGE,

src/common-components/SwitchContent.jsx

@@ -21,7 +21,7 @@ const onChildExit = (htmlNode) => {
   }
 };
 
-function SwitchContent({ expression, cases, className }) {
+const SwitchContent = ({ expression, cases, className }) => {
   const getContent = (caseKey) => {
     if (cases[caseKey]) {
       if (typeof cases[caseKey] === 'string') {
@@ -46,7 +46,7 @@ function SwitchContent({ expression, cases, className }) {
       {getContent(expression)}
     </TransitionReplace>
   );
-}
+};
 
 SwitchContent.propTypes = {
   expression: PropTypes.string,

src/common-components/UnAuthOnlyRoute.jsx

@@ -1,3 +1,4 @@
+/* eslint-disable react/jsx-no-useless-fragment */
 import React, { useEffect, useState } from 'react';
 
 import { getConfig } from '@edx/frontend-platform';

src/common-components/data/reducers.js

@@ -1,3 +1,4 @@
+/* eslint-disable default-param-last */
 import { COMPLETE_STATE, PENDING_STATE } from '../../data/constants';
 import { THIRD_PARTY_AUTH_CONTEXT } from './actions';
 

src/common-components/data/sagas.js

@@ -15,14 +15,12 @@ import {
 export function* fetchThirdPartyAuthContext(action) {
   try {
     yield put(getThirdPartyAuthContextBegin());
-    const { fieldDescriptions, optionalFields, thirdPartyAuthContext } = yield call(
-      getThirdPartyAuthContext, action.payload.urlParams,
-    );
+    const {
+      fieldDescriptions, optionalFields, thirdPartyAuthContext,
+    } = yield call(getThirdPartyAuthContext, action.payload.urlParams);
 
     yield put(setCountryFromThirdPartyAuthContext(thirdPartyAuthContext.countryCode));
-    yield put(getThirdPartyAuthContextSuccess(
-      fieldDescriptions, optionalFields, thirdPartyAuthContext,
-    ));
+    yield put(getThirdPartyAuthContextSuccess(fieldDescriptions, optionalFields, thirdPartyAuthContext));
   } catch (e) {
     yield put(getThirdPartyAuthContextFailure());
     logError(e);

src/common-components/tests/Logistration.test.jsx

@@ -1,3 +1,4 @@
+/* eslint-disable no-import-assign */
 import React from 'react';
 import { Provider } from 'react-redux';
 

src/common-components/tests/UnAuthOnlyRoute.test.jsx

@@ -1,18 +1,23 @@
+/* eslint-disable no-import-assign */
+/* eslint-disable import/no-import-module-exports */
 import React from 'react';
 
 import * as auth from '@edx/frontend-platform/auth';
 import { mount } from 'enzyme';
-import { MemoryRouter, BrowserRouter as Router, Switch } from 'react-router-dom';
 
 import { UnAuthOnlyRoute } from '..';
 import { LOGIN_PAGE } from '../../data/constants';
 
+import { MemoryRouter, BrowserRouter as Router, Switch } from 'react-router-dom';
+
 jest.mock('@edx/frontend-platform/auth');
 
 const RRD = require('react-router-dom');
 // Just render plain div with its children
 // eslint-disable-next-line react/prop-types
-RRD.BrowserRouter = ({ children }) => <div>{ children }</div>;
+RRD.BrowserRouter = function ({ children }) {
+  return <div>{children}</div>;
+};
 module.exports = RRD;
 
 const TestApp = () => (

src/data/utils/dataUtils.js

@@ -41,9 +41,7 @@ export const updatePathWithQueryParams = (path) => {
   }
 
   if (queryParams.indexOf('track=pwreset') > -1) {
-    queryParams = queryParams.replace(
-      '?track=pwreset&', '?',
-    ).replace('?track=pwreset', '').replace('&track=pwreset', '').replace('?&', '?');
+    queryParams = queryParams.replace('?track=pwreset&', '?').replace('?track=pwreset', '').replace('&track=pwreset', '').replace('?&', '?');
   }
 
   return `${path}${queryParams}`;

src/field-renderer/FieldRenderer.jsx

@@ -1,3 +1,4 @@
+/* eslint-disable react/prop-types */
 import React from 'react';
 
 import { Form, Icon } from '@edx/paragon';

src/field-renderer/index.jsx

@@ -1 +1,2 @@
+/* eslint-disable no-restricted-exports */
 export { default } from './FieldRenderer';

src/forgot-password/ForgotPasswordPage.jsx

@@ -96,8 +96,10 @@ const ForgotPasswordPage = (props) => {
   return (
     <BaseComponent>
       <Helmet>
-        <title>{intl.formatMessage(messages['forgot.password.page.title'],
-          { siteName: getConfig().SITE_NAME })}
+        <title>{intl.formatMessage(
+          messages['forgot.password.page.title'],
+          { siteName: getConfig().SITE_NAME },
+        )}
         </title>
       </Helmet>
       <div>

src/forgot-password/index.js

@@ -1,3 +1,4 @@
+/* eslint-disable no-restricted-exports */
 export { default } from './ForgotPasswordPage';
 export { default as reducer } from './data/reducers';
 export { FORGOT_PASSWORD } from './data/actions';

src/forgot-password/tests/ForgotPasswordPage.test.jsx

@@ -1,3 +1,4 @@
+/* eslint-disable no-import-assign */
 import React from 'react';
 import { Provider } from 'react-redux';
 
@@ -83,9 +84,7 @@ describe('ForgotPasswordPage', () => {
     const validationMessage = 'We were unable to contact you.Enter a valid email address below.';
     const wrapper = mount(reduxWrapper(<IntlForgotPasswordPage {...props} />));
 
-    wrapper.find('input#email').simulate(
-      'change', { target: { value: 'invalid-email', name: 'email' } },
-    );
+    wrapper.find('input#email').simulate('change', { target: { value: 'invalid-email', name: 'email' } });
     await act(async () => { await wrapper.find('button.btn-brand').simulate('click'); });
     wrapper.update();
 
@@ -97,7 +96,7 @@ describe('ForgotPasswordPage', () => {
       forgotPassword: { status: INTERNAL_SERVER_ERROR },
     });
     const expectedMessage = 'We were unable to contact you.'
-                            + 'An error has occurred. Try refreshing the page, or check your internet connection.';
+      + 'An error has occurred. Try refreshing the page, or check your internet connection.';
     const wrapper = mount(reduxWrapper(<IntlForgotPasswordPage {...props} />));
 
     expect(wrapper.find('#validation-errors').first().text()).toEqual(expectedMessage);
@@ -204,8 +203,8 @@ describe('ForgotPasswordPage', () => {
       },
     });
     const successMessage = 'Check your emailWe sent an email to  with instructions to reset your password. If you do not '
-                           + 'receive a password reset message after 1 minute, verify that you entered the correct email address,'
-                           + ' or check your spam folder. If you need further assistance, contact technical support.';
+      + 'receive a password reset message after 1 minute, verify that you entered the correct email address,'
+      + ' or check your spam folder. If you need further assistance, contact technical support.';
 
     const wrapper = mount(reduxWrapper(<IntlForgotPasswordPage {...props} />));
     expect(wrapper.find('.alert-success').text()).toEqual(successMessage);
@@ -219,8 +218,8 @@ describe('ForgotPasswordPage', () => {
       },
     });
     const successMessage = 'Invalid password reset link'
-                            + 'This password reset link is invalid. It may have been used already. '
-                            + 'Enter your email below to receive a new link.';
+      + 'This password reset link is invalid. It may have been used already. '
+      + 'Enter your email below to receive a new link.';
 
     const wrapper = mount(reduxWrapper(<IntlForgotPasswordPage {...props} />));
     expect(wrapper.find('.alert-danger').text()).toEqual(successMessage);

src/index.scss

@@ -1,6 +1,4 @@
-@import "~@edx/brand/paragon/fonts";
-@import "~@edx/brand/paragon/variables";
-@import "~@edx/paragon/scss/core/core";
+@use "@edx/paragon/styles/css/core/custom-media-breakpoints.css" as paragonCustomMediaBreakpoints;
 @import "~@edx/brand/paragon/overrides";
 
 @import "@edx/frontend-component-cookie-policy-banner/build/_cookie-policy-banner";

src/login/LoginFailure.jsx

@@ -1,3 +1,4 @@
+/* eslint-disable react/prop-types */
 import React from 'react';
 
 import { getConfig } from '@edx/frontend-platform';
@@ -174,7 +175,7 @@ const LoginFailureMessage = (props) => {
   return (
     <Alert id="login-failure-alert" className="mb-5" variant="danger" icon={Error}>
       <Alert.Heading>{intl.formatMessage(messages['login.failure.header.title'])}</Alert.Heading>
-      { errorList }
+      {errorList}
     </Alert>
   );
 };
@@ -188,7 +189,7 @@ LoginFailureMessage.defaultProps = {
 
 LoginFailureMessage.propTypes = {
   loginError: PropTypes.shape({
-    context: PropTypes.object,
+    context: PropTypes.shape({}),
     email: PropTypes.string,
     errorCode: PropTypes.string,
     redirectUrl: PropTypes.string,