From 7ba9bfe4370006a6e8ae3c9a6a59b857f844ac49 Mon Sep 17 00:00:00 2001 From: Austin Sullivan Date: Tue, 31 Jan 2023 10:11:50 -0500 Subject: [PATCH 1/2] fix(docs): fix styles not being applied --- packages/module/buildCSS.js | 20 +++++++++++++++++++ packages/module/package.json | 4 +++- .../react-console/examples/ReactConsole.md | 5 +++++ .../extensions/react-console/react.js | 5 +++++ .../patternfly-docs/patternfly-docs.css.js | 2 ++ yarn.lock | 5 +++++ 6 files changed, 40 insertions(+), 1 deletion(-) create mode 100644 packages/module/buildCSS.js diff --git a/packages/module/buildCSS.js b/packages/module/buildCSS.js new file mode 100644 index 0000000..fa54ace --- /dev/null +++ b/packages/module/buildCSS.js @@ -0,0 +1,20 @@ +const fs = require('fs'); +const path = require('path') + +const consoleStylesPath = require.resolve('@patternfly/react-styles').replace('dist', 'css').replace('js', 'components').replace('index.js', 'Consoles') + +const files = fs.readdirSync(consoleStylesPath) + +const consoleCSSFiles = files.filter(fileName => fileName.match(/\.css$/)) + +const outputDirPath = path.resolve('./dist/css') + +if (!fs.existsSync(outputDirPath)) { + fs.mkdirSync(outputDirPath) +} + +consoleCSSFiles.forEach(fileName => { + const src = path.join(consoleStylesPath, fileName) + const dest = path.join(outputDirPath, fileName) + fs.copyFileSync(src, dest) +}) diff --git a/packages/module/package.json b/packages/module/package.json index c0b5d0e..b4198b7 100644 --- a/packages/module/package.json +++ b/packages/module/package.json @@ -5,7 +5,8 @@ "main": "dist/esm/index.js", "module": "dist/esm/index.js", "scripts": { - "build": "yarn build:esm && yarn build:cjs", + "build": "yarn build:css && yarn build:esm && yarn build:cjs", + "build:css": "node ./buildCSS.js", "build:esm": "tsc --build --verbose ./tsconfig.json", "build:cjs": "tsc --build --verbose ./tsconfig.cjs.json", "clean": "rimraf dist", @@ -34,6 +35,7 @@ "dependencies": { "@novnc/novnc": "^1.3.0", "@patternfly/react-core": "^4.273.3", + "@patternfly/react-styles": "^4.92.3", "@spice-project/spice-html5": "^0.2.1", "@types/file-saver": "^2.0.1", "file-saver": "^1.3.8", diff --git a/packages/module/patternfly-docs/content/extensions/react-console/examples/ReactConsole.md b/packages/module/patternfly-docs/content/extensions/react-console/examples/ReactConsole.md index 05dcd6f..10f101f 100644 --- a/packages/module/patternfly-docs/content/extensions/react-console/examples/ReactConsole.md +++ b/packages/module/patternfly-docs/content/extensions/react-console/examples/ReactConsole.md @@ -14,6 +14,11 @@ React console lives in its own package at [`@patternfly/react-console`](https:// import { AccessConsoles, SerialConsole, VncConsole, DesktopViewer } from '@patternfly/react-console'; import { SerialConsoleCustom } from './SerialConsoleCustom.jsx'; import { debounce } from '@patternfly/react-core'; +import '@patternfly/react-console/dist/css/AccessConsoles.css'; +import '@patternfly/react-console/dist/css/DesktopViewer.css'; +import '@patternfly/react-console/dist/css/SerialConsole.css'; +import '@patternfly/react-console/dist/css/VncConsole.css'; +import '@patternfly/react-console/dist/css/xterm.css'; ## Examples diff --git a/packages/module/patternfly-docs/generated/extensions/react-console/react.js b/packages/module/patternfly-docs/generated/extensions/react-console/react.js index 0e7e982..23ab6a0 100644 --- a/packages/module/patternfly-docs/generated/extensions/react-console/react.js +++ b/packages/module/patternfly-docs/generated/extensions/react-console/react.js @@ -3,6 +3,11 @@ import { AutoLinkHeader, Example, Link as PatternflyThemeLink } from '@patternfl import { AccessConsoles, SerialConsole, VncConsole, DesktopViewer } from '@patternfly/react-console'; import { SerialConsoleCustom } from '../../../content/extensions/react-console/examples/./SerialConsoleCustom.jsx'; import { debounce } from '@patternfly/react-core'; +import '@patternfly/react-console/dist/css/AccessConsoles.css'; +import '@patternfly/react-console/dist/css/DesktopViewer.css'; +import '@patternfly/react-console/dist/css/SerialConsole.css'; +import '@patternfly/react-console/dist/css/VncConsole.css'; +import '@patternfly/react-console/dist/css/xterm.css'; const pageData = { "id": "React console", "section": "extensions", diff --git a/packages/module/patternfly-docs/patternfly-docs.css.js b/packages/module/patternfly-docs/patternfly-docs.css.js index 240ac3b..65793f3 100644 --- a/packages/module/patternfly-docs/patternfly-docs.css.js +++ b/packages/module/patternfly-docs/patternfly-docs.css.js @@ -6,3 +6,5 @@ import '@patternfly/patternfly/patternfly-addons.css'; import '@patternfly/documentation-framework/global.css'; // Add your extension CSS below + +import '@patternfly/react-styles/css/components/Consoles/SerialConsole.css'; diff --git a/yarn.lock b/yarn.lock index 2899bd4..6638677 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1742,6 +1742,11 @@ resolved "https://registry.yarnpkg.com/@patternfly/react-styles/-/react-styles-4.91.6.tgz#2cd4f0d5dca7774fe6a64505b8a3e7bd2abd66c6" integrity sha512-3wCYkvGRgbx6u5JrCaUNcpDvyTOrgvXU/Mh2hs8s/njBUDpyuyRb+gkFoE3l3Ro3Lk0DnRLYpIjCSjl38Bd0iA== +"@patternfly/react-styles@^4.92.3": + version "4.92.3" + resolved "https://registry.yarnpkg.com/@patternfly/react-styles/-/react-styles-4.92.3.tgz#046acee6e38c996cf41c288819eca17c3634a782" + integrity sha512-jC8F71trFWVYM7YVTP/3MBLwLZDCY3tgHeAmSKdcw6R607LK4rtCzfw5lt2IHNmAjQ0ggqDlJGWsJAfGMe4iPA== + "@patternfly/react-styles@^4.92.5": version "4.92.5" resolved "https://registry.yarnpkg.com/@patternfly/react-styles/-/react-styles-4.92.5.tgz#a4b91c02e3a8e6b107785a3c06542436f4b81f73" From bab3544ca78f61abea05bfb90ebc4c1845d1eb6c Mon Sep 17 00:00:00 2001 From: Austin Sullivan Date: Tue, 31 Jan 2023 10:33:43 -0500 Subject: [PATCH 2/2] fix(build): build css after building js --- packages/module/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/module/package.json b/packages/module/package.json index b4198b7..2ad5299 100644 --- a/packages/module/package.json +++ b/packages/module/package.json @@ -5,7 +5,7 @@ "main": "dist/esm/index.js", "module": "dist/esm/index.js", "scripts": { - "build": "yarn build:css && yarn build:esm && yarn build:cjs", + "build": "yarn build:esm && yarn build:cjs && yarn build:css", "build:css": "node ./buildCSS.js", "build:esm": "tsc --build --verbose ./tsconfig.json", "build:cjs": "tsc --build --verbose ./tsconfig.cjs.json",