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

[Tyler Kim]

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);

}

[Enix]

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.