Динамически внедрять теги стилей для каждого компонента с помощью Rollup и scss

Question

Я создаю библиотеку компонентов React, исходный код которой имеет следующую общую структуру:

- src
  - common.scss (contains things like re-usable css variables)
  - components
    - button
      - index.js
      - button.scss
    - dialog
      - index.js
      - dialog.scss

Мои компоненты отвечают за импорт собственных стилей для каждого компонента (используя scss), поэтому, например, button/index.js имеет следующую строку:

import "./button.scss";

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

// app.js
import "mylib/src/common.scss" // load global styles
import Button from 'mylib/src/components/button/index.js'
import Dialog from 'mylib/src/components/dialog/index.js'

// ...application code...

Когда мое приложение использует веб-пакет вместе с style-loader, CSS для каждого компонента добавляется как теги style в head динамически при первом использовании компонента. Это хороший выигрыш в производительности, так как стилевое оформление для каждого компонента не нужно анализировать браузером до тех пор, пока оно действительно не понадобится.

Теперь я хочу распространить свою библиотеку, используя Rollup , поэтому пользователи приложения будут делать что-то вроде этого:

import { Button, Dialog } from 'mylib'
import "mylib/common.css" // load global styles

// ...application code...

Когда я использую rollup-plugin-scss, он просто объединяет стили для каждого компонента, а не добавляет их динамически, как раньше.

Есть ли метод, который я могу включить в свою сборку Rollup, чтобы мои стили для каждого компонента динамически добавлялись как теги style в тег head по мере их использования?