diff --git a/projects/js-packages/publicize-components/changelog/fix-social-dataviews-styles-being-added-globally b/projects/js-packages/publicize-components/changelog/fix-social-dataviews-styles-being-added-globally new file mode 100644 index 0000000000000..31d9c15df3a10 --- /dev/null +++ b/projects/js-packages/publicize-components/changelog/fix-social-dataviews-styles-being-added-globally @@ -0,0 +1,4 @@ +Significance: patch +Type: fixed + +Fixed dataviews styles imported in share status being added globally diff --git a/projects/js-packages/publicize-components/src/components/share-status/styles.module.scss b/projects/js-packages/publicize-components/src/components/share-status/styles.module.scss index 37ae6871549f4..115b563e81960 100644 --- a/projects/js-packages/publicize-components/src/components/share-status/styles.module.scss +++ b/projects/js-packages/publicize-components/src/components/share-status/styles.module.scss @@ -1,5 +1,3 @@ -@import '@wordpress/dataviews/build-style/style.css'; - .trigger-wrapper { margin-top: 1rem; padding-block: 1rem; @@ -65,6 +63,16 @@ } .dataview-wrapper { + /** + * We have to use scoped import to avoid styles being added globally. + * By importing the styles here, all the styles from dataviews package will be scoped to this component. + * @see https://github.com/Automattic/jetpack/issues/39981 + */ + // Use :global scope to avoid CSS encapsulation + :global { + // Use import without ".css" extension to avoid it being rendered as URL + @import '@wordpress/dataviews/build-style/style'; + } // Hide the table actions :global(.dataviews__view-actions) { diff --git a/projects/plugins/jetpack/changelog/fix-social-dataviews-styles-being-added-globally b/projects/plugins/jetpack/changelog/fix-social-dataviews-styles-being-added-globally new file mode 100644 index 0000000000000..8d80f66cb4235 --- /dev/null +++ b/projects/plugins/jetpack/changelog/fix-social-dataviews-styles-being-added-globally @@ -0,0 +1,4 @@ +Significance: patch +Type: bugfix + +Fixed dataviews styles imported in share status being added globally diff --git a/projects/plugins/social/changelog/fix-social-dataviews-styles-being-added-globally b/projects/plugins/social/changelog/fix-social-dataviews-styles-being-added-globally new file mode 100644 index 0000000000000..31d9c15df3a10 --- /dev/null +++ b/projects/plugins/social/changelog/fix-social-dataviews-styles-being-added-globally @@ -0,0 +1,4 @@ +Significance: patch +Type: fixed + +Fixed dataviews styles imported in share status being added globally