How is style being injected without content.scss in sites other than github?

[tylertaewook]

I've been exploring using side panels in websites, other than github, for experiment. However, I realized there are weird styles being injected that conflicts with the website's default css.

For example, enabling side panel in google doc (https://docs.google.com) triggers the title input (docs-title-input) element to be gray as well as messing up some minor spacing issues in different buttons.

Interesting point is that this phenomenon still persists even when I entrely disable the style injection from both content.scss, content.tsx, and themes.scss

Where are these styles being injected from, and what are the ways to prevent them so it doesn't conflict with existing websites styles? I know this isn't the direct issue for Gitako's use case, but I would really appreciate any feedback on how this works.

src/content.scss

// @import './styles/index.scss';
// commented out the entire stylesheet

src/content.tsx

import { Scraft } from 'components/Scraft'
import * as React from 'react'
import { createRoot } from 'react-dom/client'
import { insertSideBarMountPoint } from 'utils/DOMHelper'
import './content.scss'

if (document.readyState === 'loading') {
  document.addEventListener('DOMContentLoaded', init)
} else {
  init()
}

async function init() {
//  await injectStyles(browser.runtime.getURL('content.css'))
// commented out this function
  createRoot(insertSideBarMountPoint()).render(<Scraft />)
}

src/styles/themes.scss

@import '@primer/primitives/dist/scss/colors/_dark.scss';

@mixin enableThemes() {
  // default, e.g. when not login, when use in sites other than GitHub
  @include primer-colors-dark();

  // mapping 'canvas' to 'bg', this should be removed once GitHub exposes 'bg' colors
  --color-bg-default-transparent: var(--color-canvas-default-transparent);
  --color-bg-default: var(--color-canvas-default);
  --color-bg-inset: var(--color-canvas-inset);
  --color-bg-overlay: var(--color-canvas-overlay);
  --color-bg-subtle: var(--color-canvas-subtle);

}

[EnixCoda]

It could be from the BaseStyles component usage. But I was not expecting that it would have impact on global styles. Let me know if it really was it.

[tylertaewook]

Yes, that was it.

I commented out the <Theme> </Theme> wrapper in src/components/Sidebar.tsx, which fixed the global style error. However still figuring out how to keep the sidebar styles without affecting the global styles. Currently, it removes all the sidebar styles as well

import { Theme } from '../containers/Theme'

[EnixCoda]

There are few ways to do that.

1. Hack your local BaseStyles component, replace the createGlobalStyle. Refer scripts/fix-deps for examples.
2. Try render Gitako as a web component, in a shadow DOM, that will isolate styles from outside.

1 should be easier