From 9cb28ecdc07e406350dbb888d36d5425d3668b9e Mon Sep 17 00:00:00 2001 From: Jean-Louis Leysens Date: Tue, 1 Mar 2022 11:57:16 +0100 Subject: [PATCH 1/5] filthy hackses to scope CSS to screen and projection --- src/core/public/core_system.ts | 15 +++++++++++++++ 1 file changed, 15 insertions(+) diff --git a/src/core/public/core_system.ts b/src/core/public/core_system.ts index 3d3331d54792b..c10b66be78301 100644 --- a/src/core/public/core_system.ts +++ b/src/core/public/core_system.ts @@ -237,6 +237,21 @@ export class CoreSystem { this.rootDomElement.appendChild(notificationsTargetDomElement); this.rootDomElement.appendChild(overlayTargetDomElement); + // HACKS: scope all current styles to screen or projection media + const setTargetMedia = (el: HTMLElement) => { + el.setAttribute('media', 'screen, projection'); + }; + document.querySelectorAll('link').forEach(setTargetMedia); + document.querySelectorAll('style').forEach(setTargetMedia); + const originalCreateElement = document.createElement.bind(document); + document.createElement = (tagName: string) => { + const el = originalCreateElement(tagName); + if (tagName === 'link' || tagName === 'style') { + setTargetMedia(el); + } + return el; + }; + this.rendering.start({ application, chrome, From 98dbc32bbc2f2d9cbdd2b55224718596a4b19e99 Mon Sep 17 00:00:00 2001 From: Jean-Louis Leysens Date: Tue, 1 Mar 2022 13:53:00 +0100 Subject: [PATCH 2/5] rather use a mutation observer --- src/core/public/core_system.ts | 20 ++++++++++++-------- 1 file changed, 12 insertions(+), 8 deletions(-) diff --git a/src/core/public/core_system.ts b/src/core/public/core_system.ts index c10b66be78301..f79db106bddd7 100644 --- a/src/core/public/core_system.ts +++ b/src/core/public/core_system.ts @@ -243,14 +243,18 @@ export class CoreSystem { }; document.querySelectorAll('link').forEach(setTargetMedia); document.querySelectorAll('style').forEach(setTargetMedia); - const originalCreateElement = document.createElement.bind(document); - document.createElement = (tagName: string) => { - const el = originalCreateElement(tagName); - if (tagName === 'link' || tagName === 'style') { - setTargetMedia(el); - } - return el; - }; + new MutationObserver((mutations) => { + mutations.forEach((mutation) => { + mutation.addedNodes.forEach((node) => { + if ( + node instanceof HTMLElement && + (node.tagName.toLowerCase() === 'link' || node.tagName.toLowerCase() === 'style') + ) { + setTargetMedia(node); + } + }); + }); + }).observe(document.head, { childList: true, subtree: true }); this.rendering.start({ application, From b4996cfe9c9ff6b82a74834343085fec34a70f5c Mon Sep 17 00:00:00 2001 From: Jean-Louis Leysens Date: Wed, 2 Mar 2022 14:23:00 +0100 Subject: [PATCH 3/5] rather use webpack --- package.json | 2 +- .../src/worker/webpack.config.ts | 35 +++++++++++++++---- src/core/public/core_system.ts | 8 ++--- src/plugins/dashboard/public/plugin.tsx | 2 ++ yarn.lock | 10 +++++- 5 files changed, 43 insertions(+), 14 deletions(-) diff --git a/package.json b/package.json index c87ce15f455ca..647b1dfbcadd5 100644 --- a/package.json +++ b/package.json @@ -873,7 +873,7 @@ "spawn-sync": "^1.0.15", "string-replace-loader": "^2.2.0", "strong-log-transformer": "^2.1.0", - "style-loader": "^1.1.3", + "style-loader": "^2.0.0", "stylelint": "13.8.0", "stylelint-scss": "^3.18.0", "superagent": "^3.8.2", diff --git a/packages/kbn-optimizer/src/worker/webpack.config.ts b/packages/kbn-optimizer/src/worker/webpack.config.ts index 9454456a35c9a..15943a8165621 100644 --- a/packages/kbn-optimizer/src/worker/webpack.config.ts +++ b/packages/kbn-optimizer/src/worker/webpack.config.ts @@ -36,6 +36,25 @@ const nodeModulesButNotKbnPackages = (path: string) => { return !path.includes(`node_modules${Path.sep}@kbn${Path.sep}`); }; +const mediaAwareStyleLoaders = [ + { + resourceQuery: /print/, + loader: 'style-loader', + options: { + attributes: { media: 'print' }, + media: 'print', // it looks like style-loader might be bugged + }, + }, + { + resourceQuery: undefined, + loader: 'style-loader', + options: { + attributes: { media: 'screen, projection' }, + media: 'screen, projection', // it looks like style-loader might be bugged + }, + }, +]; + export function getWebpackConfig(bundle: Bundle, bundleRefs: BundleRefs, worker: WorkerConfig) { const ENTRY_CREATOR = require.resolve('./entry_point_creator'); @@ -129,13 +148,15 @@ export function getWebpackConfig(bundle: Bundle, bundleRefs: BundleRefs, worker: }, ], }, + { + test: /\.css$/, + include: /node_modules/, + oneOf: mediaAwareStyleLoaders, + }, { test: /\.css$/, include: /node_modules/, use: [ - { - loader: 'style-loader', - }, { loader: 'css-loader', options: { @@ -144,6 +165,11 @@ export function getWebpackConfig(bundle: Bundle, bundleRefs: BundleRefs, worker: }, ], }, + { + test: /\.scss$/, + exclude: nodeModulesButNotKbnPackages, + oneOf: mediaAwareStyleLoaders, + }, { test: /\.scss$/, exclude: nodeModulesButNotKbnPackages, @@ -151,9 +177,6 @@ export function getWebpackConfig(bundle: Bundle, bundleRefs: BundleRefs, worker: ...worker.themeTags.map((theme) => ({ resourceQuery: `?${theme}`, use: [ - { - loader: 'style-loader', - }, { loader: 'css-loader', options: { diff --git a/src/core/public/core_system.ts b/src/core/public/core_system.ts index f79db106bddd7..32776366d2e44 100644 --- a/src/core/public/core_system.ts +++ b/src/core/public/core_system.ts @@ -237,19 +237,15 @@ export class CoreSystem { this.rootDomElement.appendChild(notificationsTargetDomElement); this.rootDomElement.appendChild(overlayTargetDomElement); - // HACKS: scope all current styles to screen or projection media + // HACKS: scope all current tags to screen or projection media const setTargetMedia = (el: HTMLElement) => { el.setAttribute('media', 'screen, projection'); }; document.querySelectorAll('link').forEach(setTargetMedia); - document.querySelectorAll('style').forEach(setTargetMedia); new MutationObserver((mutations) => { mutations.forEach((mutation) => { mutation.addedNodes.forEach((node) => { - if ( - node instanceof HTMLElement && - (node.tagName.toLowerCase() === 'link' || node.tagName.toLowerCase() === 'style') - ) { + if (node instanceof HTMLElement && node.tagName.toLowerCase() === 'link') { setTargetMedia(node); } }); diff --git a/src/plugins/dashboard/public/plugin.tsx b/src/plugins/dashboard/public/plugin.tsx index 2f63062ccf60c..1ddb1c587e237 100644 --- a/src/plugins/dashboard/public/plugin.tsx +++ b/src/plugins/dashboard/public/plugin.tsx @@ -79,6 +79,8 @@ import { dashboardFeatureCatalog } from './dashboard_strings'; import { replaceUrlHashQuery } from '../../kibana_utils/public'; import { SpacesPluginStart } from './services/spaces'; +import './print.scss'; + export interface DashboardFeatureFlagConfig { allowByValueEmbeddables: boolean; } diff --git a/yarn.lock b/yarn.lock index 68816f9b172a9..4432ac7a878e8 100644 --- a/yarn.lock +++ b/yarn.lock @@ -27764,7 +27764,7 @@ style-it@^2.1.3: dependencies: react-lib-adler32 "^1.0.3" -style-loader@^1.1.3, style-loader@^1.3.0: +style-loader@^1.3.0: version "1.3.0" resolved "https://registry.yarnpkg.com/style-loader/-/style-loader-1.3.0.tgz#828b4a3b3b7e7aa5847ce7bae9e874512114249e" integrity sha512-V7TCORko8rs9rIqkSrlMfkqA63DfoGBBJmK1kKGCcSi+BWb4cqz0SRsnp4l6rU5iwOEd0/2ePv68SV22VXon4Q== @@ -27772,6 +27772,14 @@ style-loader@^1.1.3, style-loader@^1.3.0: loader-utils "^2.0.0" schema-utils "^2.7.0" +style-loader@^2.0.0: + version "2.0.0" + resolved "https://registry.yarnpkg.com/style-loader/-/style-loader-2.0.0.tgz#9669602fd4690740eaaec137799a03addbbc393c" + integrity sha512-Z0gYUJmzZ6ZdRUqpg1r8GsaFKypE+3xAzuFeMuoHgjc9KZv3wMyCRjQIWEbhoFSq7+7yoHXySDJyyWQaPajeiQ== + dependencies: + loader-utils "^2.0.0" + schema-utils "^3.0.0" + style-search@^0.1.0: version "0.1.0" resolved "https://registry.yarnpkg.com/style-search/-/style-search-0.1.0.tgz#7958c793e47e32e07d2b5cafe5c0bf8e12e77902" From 35aed7d4059aaeb60b4a9361599f4803a05f8c65 Mon Sep 17 00:00:00 2001 From: Jean-Louis Leysens Date: Wed, 2 Mar 2022 14:25:56 +0100 Subject: [PATCH 4/5] Revert "rather use webpack", style-loader has a bug for media attr This reverts commit b4996cfe9c9ff6b82a74834343085fec34a70f5c. --- package.json | 2 +- .../src/worker/webpack.config.ts | 35 ++++--------------- src/core/public/core_system.ts | 8 +++-- src/plugins/dashboard/public/plugin.tsx | 2 -- yarn.lock | 10 +----- 5 files changed, 14 insertions(+), 43 deletions(-) diff --git a/package.json b/package.json index 647b1dfbcadd5..c87ce15f455ca 100644 --- a/package.json +++ b/package.json @@ -873,7 +873,7 @@ "spawn-sync": "^1.0.15", "string-replace-loader": "^2.2.0", "strong-log-transformer": "^2.1.0", - "style-loader": "^2.0.0", + "style-loader": "^1.1.3", "stylelint": "13.8.0", "stylelint-scss": "^3.18.0", "superagent": "^3.8.2", diff --git a/packages/kbn-optimizer/src/worker/webpack.config.ts b/packages/kbn-optimizer/src/worker/webpack.config.ts index 15943a8165621..9454456a35c9a 100644 --- a/packages/kbn-optimizer/src/worker/webpack.config.ts +++ b/packages/kbn-optimizer/src/worker/webpack.config.ts @@ -36,25 +36,6 @@ const nodeModulesButNotKbnPackages = (path: string) => { return !path.includes(`node_modules${Path.sep}@kbn${Path.sep}`); }; -const mediaAwareStyleLoaders = [ - { - resourceQuery: /print/, - loader: 'style-loader', - options: { - attributes: { media: 'print' }, - media: 'print', // it looks like style-loader might be bugged - }, - }, - { - resourceQuery: undefined, - loader: 'style-loader', - options: { - attributes: { media: 'screen, projection' }, - media: 'screen, projection', // it looks like style-loader might be bugged - }, - }, -]; - export function getWebpackConfig(bundle: Bundle, bundleRefs: BundleRefs, worker: WorkerConfig) { const ENTRY_CREATOR = require.resolve('./entry_point_creator'); @@ -148,15 +129,13 @@ export function getWebpackConfig(bundle: Bundle, bundleRefs: BundleRefs, worker: }, ], }, - { - test: /\.css$/, - include: /node_modules/, - oneOf: mediaAwareStyleLoaders, - }, { test: /\.css$/, include: /node_modules/, use: [ + { + loader: 'style-loader', + }, { loader: 'css-loader', options: { @@ -165,11 +144,6 @@ export function getWebpackConfig(bundle: Bundle, bundleRefs: BundleRefs, worker: }, ], }, - { - test: /\.scss$/, - exclude: nodeModulesButNotKbnPackages, - oneOf: mediaAwareStyleLoaders, - }, { test: /\.scss$/, exclude: nodeModulesButNotKbnPackages, @@ -177,6 +151,9 @@ export function getWebpackConfig(bundle: Bundle, bundleRefs: BundleRefs, worker: ...worker.themeTags.map((theme) => ({ resourceQuery: `?${theme}`, use: [ + { + loader: 'style-loader', + }, { loader: 'css-loader', options: { diff --git a/src/core/public/core_system.ts b/src/core/public/core_system.ts index 32776366d2e44..f79db106bddd7 100644 --- a/src/core/public/core_system.ts +++ b/src/core/public/core_system.ts @@ -237,15 +237,19 @@ export class CoreSystem { this.rootDomElement.appendChild(notificationsTargetDomElement); this.rootDomElement.appendChild(overlayTargetDomElement); - // HACKS: scope all current tags to screen or projection media + // HACKS: scope all current styles to screen or projection media const setTargetMedia = (el: HTMLElement) => { el.setAttribute('media', 'screen, projection'); }; document.querySelectorAll('link').forEach(setTargetMedia); + document.querySelectorAll('style').forEach(setTargetMedia); new MutationObserver((mutations) => { mutations.forEach((mutation) => { mutation.addedNodes.forEach((node) => { - if (node instanceof HTMLElement && node.tagName.toLowerCase() === 'link') { + if ( + node instanceof HTMLElement && + (node.tagName.toLowerCase() === 'link' || node.tagName.toLowerCase() === 'style') + ) { setTargetMedia(node); } }); diff --git a/src/plugins/dashboard/public/plugin.tsx b/src/plugins/dashboard/public/plugin.tsx index 1ddb1c587e237..2f63062ccf60c 100644 --- a/src/plugins/dashboard/public/plugin.tsx +++ b/src/plugins/dashboard/public/plugin.tsx @@ -79,8 +79,6 @@ import { dashboardFeatureCatalog } from './dashboard_strings'; import { replaceUrlHashQuery } from '../../kibana_utils/public'; import { SpacesPluginStart } from './services/spaces'; -import './print.scss'; - export interface DashboardFeatureFlagConfig { allowByValueEmbeddables: boolean; } diff --git a/yarn.lock b/yarn.lock index 4432ac7a878e8..68816f9b172a9 100644 --- a/yarn.lock +++ b/yarn.lock @@ -27764,7 +27764,7 @@ style-it@^2.1.3: dependencies: react-lib-adler32 "^1.0.3" -style-loader@^1.3.0: +style-loader@^1.1.3, style-loader@^1.3.0: version "1.3.0" resolved "https://registry.yarnpkg.com/style-loader/-/style-loader-1.3.0.tgz#828b4a3b3b7e7aa5847ce7bae9e874512114249e" integrity sha512-V7TCORko8rs9rIqkSrlMfkqA63DfoGBBJmK1kKGCcSi+BWb4cqz0SRsnp4l6rU5iwOEd0/2ePv68SV22VXon4Q== @@ -27772,14 +27772,6 @@ style-loader@^1.3.0: loader-utils "^2.0.0" schema-utils "^2.7.0" -style-loader@^2.0.0: - version "2.0.0" - resolved "https://registry.yarnpkg.com/style-loader/-/style-loader-2.0.0.tgz#9669602fd4690740eaaec137799a03addbbc393c" - integrity sha512-Z0gYUJmzZ6ZdRUqpg1r8GsaFKypE+3xAzuFeMuoHgjc9KZv3wMyCRjQIWEbhoFSq7+7yoHXySDJyyWQaPajeiQ== - dependencies: - loader-utils "^2.0.0" - schema-utils "^3.0.0" - style-search@^0.1.0: version "0.1.0" resolved "https://registry.yarnpkg.com/style-search/-/style-search-0.1.0.tgz#7958c793e47e32e07d2b5cafe5c0bf8e12e77902" From 1767dea13ccd39adca43926fd2e3578953572dfc Mon Sep 17 00:00:00 2001 From: Jean-Louis Leysens Date: Fri, 4 Mar 2022 15:24:21 +0100 Subject: [PATCH 5/5] got a way to scope styles to either screen or print media --- .../src/worker/webpack.config.ts | 33 +++++++++++++++---- src/core/public/core_system.ts | 6 +++- src/plugins/dashboard/public/plugin.tsx | 2 ++ src/plugins/dashboard/public/print.scss | 3 ++ 4 files changed, 37 insertions(+), 7 deletions(-) create mode 100644 src/plugins/dashboard/public/print.scss diff --git a/packages/kbn-optimizer/src/worker/webpack.config.ts b/packages/kbn-optimizer/src/worker/webpack.config.ts index 9454456a35c9a..51327a30a447d 100644 --- a/packages/kbn-optimizer/src/worker/webpack.config.ts +++ b/packages/kbn-optimizer/src/worker/webpack.config.ts @@ -36,6 +36,23 @@ const nodeModulesButNotKbnPackages = (path: string) => { return !path.includes(`node_modules${Path.sep}@kbn${Path.sep}`); }; +const mediaAwareStyleLoaders = [ + { + resourceQuery: /print/, + loader: 'style-loader', + options: { + attributes: { 'data-print-media-style': 'true' }, + }, + }, + { + resourceQuery: undefined, + loader: 'style-loader', + options: { + attributes: { media: 'screen, projection' }, + }, + }, +]; + export function getWebpackConfig(bundle: Bundle, bundleRefs: BundleRefs, worker: WorkerConfig) { const ENTRY_CREATOR = require.resolve('./entry_point_creator'); @@ -129,13 +146,15 @@ export function getWebpackConfig(bundle: Bundle, bundleRefs: BundleRefs, worker: }, ], }, + { + test: /\.css$/, + include: /node_modules/, + oneOf: mediaAwareStyleLoaders, + }, { test: /\.css$/, include: /node_modules/, use: [ - { - loader: 'style-loader', - }, { loader: 'css-loader', options: { @@ -144,6 +163,11 @@ export function getWebpackConfig(bundle: Bundle, bundleRefs: BundleRefs, worker: }, ], }, + { + test: /\.scss$/, + exclude: nodeModulesButNotKbnPackages, + oneOf: mediaAwareStyleLoaders, + }, { test: /\.scss$/, exclude: nodeModulesButNotKbnPackages, @@ -151,9 +175,6 @@ export function getWebpackConfig(bundle: Bundle, bundleRefs: BundleRefs, worker: ...worker.themeTags.map((theme) => ({ resourceQuery: `?${theme}`, use: [ - { - loader: 'style-loader', - }, { loader: 'css-loader', options: { diff --git a/src/core/public/core_system.ts b/src/core/public/core_system.ts index f79db106bddd7..c836ed6ac8092 100644 --- a/src/core/public/core_system.ts +++ b/src/core/public/core_system.ts @@ -239,7 +239,11 @@ export class CoreSystem { // HACKS: scope all current styles to screen or projection media const setTargetMedia = (el: HTMLElement) => { - el.setAttribute('media', 'screen, projection'); + if (el.getAttribute('data-print-media-style') === 'true') { + el.setAttribute('media', 'print'); + } else { + el.setAttribute('media', 'screen, projection'); + } }; document.querySelectorAll('link').forEach(setTargetMedia); document.querySelectorAll('style').forEach(setTargetMedia); diff --git a/src/plugins/dashboard/public/plugin.tsx b/src/plugins/dashboard/public/plugin.tsx index 2f63062ccf60c..ae6a81c79c3db 100644 --- a/src/plugins/dashboard/public/plugin.tsx +++ b/src/plugins/dashboard/public/plugin.tsx @@ -79,6 +79,8 @@ import { dashboardFeatureCatalog } from './dashboard_strings'; import { replaceUrlHashQuery } from '../../kibana_utils/public'; import { SpacesPluginStart } from './services/spaces'; +import './print.scss?v8light&print'; + export interface DashboardFeatureFlagConfig { allowByValueEmbeddables: boolean; } diff --git a/src/plugins/dashboard/public/print.scss b/src/plugins/dashboard/public/print.scss new file mode 100644 index 0000000000000..a28db86880b37 --- /dev/null +++ b/src/plugins/dashboard/public/print.scss @@ -0,0 +1,3 @@ +html { + background-color: rgb(255, 0, 0); +}