From 32562cbbdf21c78084c165e27e91e5224be9742a Mon Sep 17 00:00:00 2001 From: Ian Date: Thu, 25 Jul 2024 12:01:12 -0400 Subject: [PATCH 1/3] (fix) Don't generate warning from mini-css about order --- .../action-menu-button/action-menu-button.component.tsx | 2 +- .../action-menu-button/action-menu-button.module.scss | 7 +++---- .../src/workspaces/container/action-menu.module.scss | 2 +- .../notification/workspace-notification.component.tsx | 2 +- packages/shell/esm-app-shell/webpack.config.js | 2 +- 5 files changed, 7 insertions(+), 8 deletions(-) diff --git a/packages/framework/esm-styleguide/src/workspaces/action-menu-button/action-menu-button.component.tsx b/packages/framework/esm-styleguide/src/workspaces/action-menu-button/action-menu-button.component.tsx index ba49f268b..f5e6cda39 100644 --- a/packages/framework/esm-styleguide/src/workspaces/action-menu-button/action-menu-button.component.tsx +++ b/packages/framework/esm-styleguide/src/workspaces/action-menu-button/action-menu-button.component.tsx @@ -3,8 +3,8 @@ import React from 'react'; import classNames from 'classnames'; import { Button, IconButton } from '@carbon/react'; import { useLayoutType } from '@openmrs/esm-react-utils'; -import styles from './action-menu-button.module.scss'; import { useWorkspaces } from '../workspaces'; +import styles from './action-menu-button.module.scss'; interface TagsProps { getIcon: (props: object) => JSX.Element; diff --git a/packages/framework/esm-styleguide/src/workspaces/action-menu-button/action-menu-button.module.scss b/packages/framework/esm-styleguide/src/workspaces/action-menu-button/action-menu-button.module.scss index 07eadfaaf..802448c7a 100644 --- a/packages/framework/esm-styleguide/src/workspaces/action-menu-button/action-menu-button.module.scss +++ b/packages/framework/esm-styleguide/src/workspaces/action-menu-button/action-menu-button.module.scss @@ -1,6 +1,6 @@ @use '@carbon/styles/scss/spacing'; @use '@carbon/styles/scss/type'; -@import '@openmrs/esm-styleguide/src/vars'; +@use '@openmrs/esm-styleguide/src/vars' as *; .container { margin-top: spacing.$spacing-02; @@ -20,7 +20,7 @@ & > span { margin-top: spacing.$spacing-02; - @include type.type-style("body-compact-01"); + @include type.type-style('body-compact-01'); color: $text-02; } @@ -78,7 +78,6 @@ /* Tablet */ :global(.omrs-breakpoint-lt-desktop) { - .container { margin-bottom: 0; margin-top: 0; @@ -102,7 +101,7 @@ & > span { color: $interactive-01; - @include type.type-style("heading-compact-01"); + @include type.type-style('heading-compact-01'); } svg { diff --git a/packages/framework/esm-styleguide/src/workspaces/container/action-menu.module.scss b/packages/framework/esm-styleguide/src/workspaces/container/action-menu.module.scss index 4f4bc4dfc..2d6974872 100644 --- a/packages/framework/esm-styleguide/src/workspaces/container/action-menu.module.scss +++ b/packages/framework/esm-styleguide/src/workspaces/container/action-menu.module.scss @@ -1,5 +1,5 @@ @use '@carbon/styles/scss/spacing'; -@import '@openmrs/esm-styleguide/src/vars'; +@use '@openmrs/esm-styleguide/src/vars' as *; $icon-button-size: 2.5rem; $actionPanelOffset: 3rem; diff --git a/packages/framework/esm-styleguide/src/workspaces/notification/workspace-notification.component.tsx b/packages/framework/esm-styleguide/src/workspaces/notification/workspace-notification.component.tsx index 053618ea6..f5a15dff7 100644 --- a/packages/framework/esm-styleguide/src/workspaces/notification/workspace-notification.component.tsx +++ b/packages/framework/esm-styleguide/src/workspaces/notification/workspace-notification.component.tsx @@ -6,7 +6,6 @@ import { navigate } from '@openmrs/esm-navigation'; import { reportError } from '@openmrs/esm-error-handling'; import { escapeRegExp } from 'lodash-es'; import { type SingleSpaCustomEventDetail } from 'single-spa'; -import styles from './workspace-notification.module.scss'; import { cancelPrompt, canCloseWorkspaceWithoutPrompting, @@ -16,6 +15,7 @@ import { resetWorkspaceStore, useWorkspaces, } from '../workspaces'; +import styles from './workspace-notification.module.scss'; export interface WorkspaceNotificationProps { contextKey: string; diff --git a/packages/shell/esm-app-shell/webpack.config.js b/packages/shell/esm-app-shell/webpack.config.js index 2a5e45c55..2cf3ff869 100644 --- a/packages/shell/esm-app-shell/webpack.config.js +++ b/packages/shell/esm-app-shell/webpack.config.js @@ -217,7 +217,7 @@ module.exports = (env, argv = {}) => { test: /openmrs-esm-styleguide\.css$/, use: [ isProd - ? { loader: require.resolve(MiniCssExtractPlugin.loader) } + ? { loader: require.resolve(MiniCssExtractPlugin.loader), options: { ignoreOrder: true } } : { loader: require.resolve('style-loader') }, { loader: require.resolve('css-loader') }, ], From 9f7124a9b09b9ecab3b7e86f6e012319ef4d99fc Mon Sep 17 00:00:00 2001 From: Ian Date: Thu, 25 Jul 2024 12:57:45 -0400 Subject: [PATCH 2/3] Property got moved from the docs I was looking at --- packages/shell/esm-app-shell/webpack.config.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/shell/esm-app-shell/webpack.config.js b/packages/shell/esm-app-shell/webpack.config.js index 2cf3ff869..8525635a6 100644 --- a/packages/shell/esm-app-shell/webpack.config.js +++ b/packages/shell/esm-app-shell/webpack.config.js @@ -217,7 +217,7 @@ module.exports = (env, argv = {}) => { test: /openmrs-esm-styleguide\.css$/, use: [ isProd - ? { loader: require.resolve(MiniCssExtractPlugin.loader), options: { ignoreOrder: true } } + ? { loader: require.resolve(MiniCssExtractPlugin.loader), options: { emit: { ignoreOrder: true } } } : { loader: require.resolve('style-loader') }, { loader: require.resolve('css-loader') }, ], From 1009baaaf657de90054369a1e73f5a9e5e7fcef7 Mon Sep 17 00:00:00 2001 From: Ian Date: Thu, 25 Jul 2024 13:11:46 -0400 Subject: [PATCH 3/3] Found the right docs --- packages/shell/esm-app-shell/package.json | 1 + packages/shell/esm-app-shell/webpack.config.js | 3 ++- packages/tooling/openmrs/package.json | 2 +- yarn.lock | 12 +++++++----- 4 files changed, 11 insertions(+), 7 deletions(-) diff --git a/packages/shell/esm-app-shell/package.json b/packages/shell/esm-app-shell/package.json index 0706ba348..753624217 100644 --- a/packages/shell/esm-app-shell/package.json +++ b/packages/shell/esm-app-shell/package.json @@ -43,6 +43,7 @@ "i18next-browser-languagedetector": "^6.1.8", "import-map-overrides": "^3.0.0", "lodash-es": "4.17.21", + "mini-css-extract-plugin": "^2.9.0", "react": "^18.1.0", "react-dom": "^18.1.0", "react-i18next": "^11.18.6", diff --git a/packages/shell/esm-app-shell/webpack.config.js b/packages/shell/esm-app-shell/webpack.config.js index 8525635a6..a3be9324a 100644 --- a/packages/shell/esm-app-shell/webpack.config.js +++ b/packages/shell/esm-app-shell/webpack.config.js @@ -217,7 +217,7 @@ module.exports = (env, argv = {}) => { test: /openmrs-esm-styleguide\.css$/, use: [ isProd - ? { loader: require.resolve(MiniCssExtractPlugin.loader), options: { emit: { ignoreOrder: true } } } + ? { loader: require.resolve(MiniCssExtractPlugin.loader) } : { loader: require.resolve('style-loader') }, { loader: require.resolve('css-loader') }, ], @@ -377,6 +377,7 @@ module.exports = (env, argv = {}) => { isProd && new MiniCssExtractPlugin({ filename: 'openmrs.[contenthash].css', + ignoreOrder: true, }), new DefinePlugin({ 'process.env.BUILD_VERSION': JSON.stringify(`${version}-${timestamp}`), diff --git a/packages/tooling/openmrs/package.json b/packages/tooling/openmrs/package.json index bce4f143d..0eb4b29ac 100644 --- a/packages/tooling/openmrs/package.json +++ b/packages/tooling/openmrs/package.json @@ -45,7 +45,7 @@ "html-webpack-plugin": "^5.5.0", "inquirer": "^7.3.3", "lodash-es": "^4.17.21", - "mini-css-extract-plugin": "^2.4.5", + "mini-css-extract-plugin": "^2.9.0", "node-watch": "^0.7.4", "npm-registry-fetch": "^14.0.3", "pacote": "^15.0.0", diff --git a/yarn.lock b/yarn.lock index 2bf32d3a1..01b53d04a 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2959,6 +2959,7 @@ __metadata: i18next-browser-languagedetector: "npm:^6.1.8" import-map-overrides: "npm:^3.0.0" lodash-es: "npm:4.17.21" + mini-css-extract-plugin: "npm:^2.9.0" react: "npm:^18.1.0" react-dom: "npm:^18.1.0" react-i18next: "npm:^11.18.6" @@ -13498,14 +13499,15 @@ __metadata: languageName: node linkType: hard -"mini-css-extract-plugin@npm:^2.4.5": - version: 2.6.1 - resolution: "mini-css-extract-plugin@npm:2.6.1" +"mini-css-extract-plugin@npm:^2.9.0": + version: 2.9.0 + resolution: "mini-css-extract-plugin@npm:2.9.0" dependencies: schema-utils: "npm:^4.0.0" + tapable: "npm:^2.2.1" peerDependencies: webpack: ^5.0.0 - checksum: 10/368e104453b7631c54a9c537077a4824383892f126259fc0cc0139b356f99e9d3c082297eb933c9c301166bf93f71fdeb9a8bdaef85f71a061300d5a16234f69 + checksum: 10/4c9ee9c0c6160a64a4884d5a92a1a5c0b68d556cd00f975cf6c8a79b51ac90e6130a37b3832b17d377d0cb1b31c0313c8c023458d4f69e95fe3424a8b43d834f languageName: node linkType: hard @@ -14286,7 +14288,7 @@ __metadata: html-webpack-plugin: "npm:^5.5.0" inquirer: "npm:^7.3.3" lodash-es: "npm:^4.17.21" - mini-css-extract-plugin: "npm:^2.4.5" + mini-css-extract-plugin: "npm:^2.9.0" node-watch: "npm:^0.7.4" npm-registry-fetch: "npm:^14.0.3" pacote: "npm:^15.0.0"