css 作用域，包围 css 文件，因此它仅适用于特定选择器内部

Question

我有一个 CSS 文件

@media (prefers-color-scheme: dark) {
  .w-tc-editor {
    --color-fg-default: #c9d1d9;
    --color-canvas-subtle: #161b22;
    --color-prettylights-syntax-comment: #8b949e;
    --color-prettylights-syntax-entity-tag: #7ee787;
    --color-prettylights-syntax-entity: #d2a8ff;
    --color-prettylights-syntax-sublimelinter-gutter-mark: #484f58;
    --color-prettylights-syntax-constant: #79c0ff;
    --color-prettylights-syntax-string: #a5d6ff;
    --color-prettylights-syntax-keyword: #ff7b72;
    --color-prettylights-syntax-markup-bold: #c9d1d9;
  }
}
@media (prefers-color-scheme: light) {
  .w-tc-editor {
    --color-fg-default: #24292f;
    --color-canvas-subtle: #f6f8fa;
    --color-prettylights-syntax-comment: #6e7781;
    --color-prettylights-syntax-entity-tag: #116329;
    --color-prettylights-syntax-entity: #8250df;
    --color-prettylights-syntax-sublimelinter-gutter-mark: #8c959f;
    --color-prettylights-syntax-constant: #0550ae;
    --color-prettylights-syntax-string: #0a3069;
    --color-prettylights-syntax-keyword: #cf222e;
    --color-prettylights-syntax-markup-bold: #24292f;
  }
}
.w-tc-editor[data-color-mode*='dark'],
[data-color-mode*='dark'] .w-tc-editor,
[data-color-mode*='dark'] .w-tc-editor-var,
body[data-color-mode*='dark'] {
  --color-fg-default: #c9d1d9;
  --color-canvas-subtle: #161b22;
  --color-prettylights-syntax-comment: #8b949e;
  --color-prettylights-syntax-entity-tag: #7ee787;
  --color-prettylights-syntax-entity: #d2a8ff;
  --color-prettylights-syntax-sublimelinter-gutter-mark: #484f58;
  --color-prettylights-syntax-constant: #79c0ff;
  --color-prettylights-syntax-string: #a5d6ff;
  --color-prettylights-syntax-keyword: #ff7b72;
  --color-prettylights-syntax-markup-bold: #c9d1d9;
}

等等......

我将此文件的内容作为字符串，我需要一种方法来转换文本，使所有这些规则仅适用于特定元素内的元素....

理想情况下，CSS 嵌套会像这样简单

const scopedCssText = `#my-container { ${cssText} }`;

但这不起作用。

无论什么解决方案都很棒，只要它有效

我尝试向副驾驶询问正则表达式以尝试包含

#my-container > 

在每个选择器之前，但当然它不起作用

我的最终目标是通过扩展在网站上加载已编译的反应应用程序（我不想弄乱这个CSS）

我正在跑步，来自扩展程序：

 chrome.scripting.executeScript({
        target: { tabId: tab.id },
        func: () => {
          let wrapper = document.getElementById('pertento-editor-wrapper');
          if (!wrapper) {
            wrapper = document.createElement('div');
            wrapper.id = 'pertento-editor-wrapper';
            wrapper.style.position = 'fixed';
            wrapper.style.top = 0;
            wrapper.style.left = 0;
            wrapper.style.width = '100%';
            wrapper.style.height = '100%';
            wrapper.style.backgroundColor = 'rgba(0, 0, 0, 0.5)';
            wrapper.style.display = 'none';
            document.body.appendChild(wrapper);
            const script = document.createElement('script');
            script.src = 'http://localhost:3000/editor.js';
            const link = document.createElement('link');
            link.rel = 'stylesheet';
            link.href = 'http://localhost:3000/editor.css';
            document.head.appendChild(link);
            document.body.appendChild(script);
          }
        },
      });

非常感谢

Answer 1

原始解决方案：不相关。

将

css

文件重命名为

scss

或

less

，将其包装在外部选择器中，然后使用 IDE 或在线进行编译。

示例：

#my-container {

    /* your original css */

}

解决方案2：

我们将使用 javascript

less

编译器。

var css = `
  @media (prefers-color-scheme:dark) {
    h1 {
      color: blue;
    }
  }

  h1 {
    color: red;
  }
`

var lessInput = `
  .my-container {
    ${css}
  }
`

function addStyle(css) {
  const style = document.createElement('style');
  style.textContent = css
  document.head.appendChild(style)
}

less.render(lessInput)
  .then(function(output) {
    // console.log(output.css)
    addStyle(output.css)
  });

.my-container {
  border: 1px solid gray;
  padding: 10px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/less.js/4.2.0/less.js"></script>
<h1>H1 - regular</h1>

<div class="my-container">
  <h1>H1 - scoped</h1>
</div>