Префикс css селекторов для создания стилей из безопасного API - PullRequest
Новая
       74

Префикс css селекторов для создания стилей из безопасного API

0 голосов
/ 03 мая 2020

Давайте предположим, что пользователь может добавить стили для каждого компонента в админ-панели, и я получаю его в виде строки на моем сервере Node: 

const stylesFromAPI = ".p { color: red } .bg { background: lime }";

Как добавить префикс к этим стилям перед добавлением в мой документ, чтобы избежать конфликтов ? Мне нужно что-то вроде CSS модулей, но работа со строками (не как загрузчик модулей): 

const stylesFromAPI = css(".p { color: red } .bg { background: lime }"); // returns hashedClassname685946898456
<SomeCompontent className={stylesFromAPI} />

производит: 

<style>
  .hashedClassname685946898456 .p { color: red }
  .hashedClassname685946898456 .bg { background: lime }
</style>
<div class="hashedClassname685946898456"></div>

1 Ответ

0 голосов
/ 05 мая 2020

Shadow DOM здесь кажется разумным вариантом. Вы можете создавать свои теги стиля внутри теневого DOM, не имея дело с префиксами селектора. Например, используя пакет реагировать-тень : 

import root from 'react-shadow';

Затем в JSX что-то вроде: 

<root.div>
    <style type="text/css">
        {/* CSS string here */}
    </style>
    <div>
        {/* Stuff here */}
    </div>
</root.div>

Проверьте рабочий пример этого здесь: https://github.com/joshdavenport/stack-overflow-61566764-react-css-shadow-dom

Основным недостатком здесь является то, что ваши стили вне теневого DOM не будут применяться. Те, кто использует теневой DOM для компонентов, считают это хорошей вещью, просто пытается охватить CSS, а не . Не знаю, что вы делаете, так что я не могу точно сказать, будет ли это проблемой для вас.

Если это так, вы можете повторно импортировать ваши стили в теневой DOM, хотя я не могу точно указать, как это сделать, не зная, какой упаковщик используется и как он используется.

В качестве альтернативы вы можете отделить импортированный CSS с помощью пакета css, перебрать селекторы с префиксом всех случайно сгенерированным классом, а затем повторно stringify .

...