Я не нахожу, что CSS styleled-компоненты должны внедряться в DOM

Question

Я пытаюсь попасть под капот библиотеки стилевых компонентов. чтение этой статьи мне очень помогло: Как работают стилевые компоненты

Но есть кое-что, что я не могу полностью понять: В статье описывается, как styleled-компонент создает тег style в разделе head и во время выполнения вставляет туда компонентный стиль. , поэтому я создал проект минимальной реакции, и пользовательский интерфейс работает нормально, за исключением того, что я не см. введенный стиль CSS в DOM. Я вижу пустой стилизованный тег в голове: <style data-styled-components=""></style>. почесывая голову, как css удается успешно применить ... Я даже понизил версию библиотеки до 3.3.3, так же, как в статье - и она все еще не работает. Предполагая, что будет более эффективно просить переполнение стека, чем в статье, может кто-то здесь может помочь?

• webpack-config:

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

const config = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'), // base path where to send compiled assets
  },
  module: {
    rules: [
      {
        test: /\.m?js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
        },
      },
      {
        // config for sass compilation
        test: /\.css$/,
        use: [
          {
            loader: MiniCssExtractPlugin.loader,
          },
          'css-loader'
        ],
      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      // plugin for inserting scripts automatically into html
      template: 'src/index.html',
    }),
    new MiniCssExtractPlugin({
      // plugin for controlling how compiled css will be outputted and named
      filename: '[name].css',
    }),
  ],
};

module.exports = config;

• код реакции

import React from 'react'
import styled  from 'styled-components'
import ReactDOM from 'react-dom';


let counter = 6

const Button = styled.button`
  color: coral; 
  padding: 0.25rem 1rem; 
  border: solid 2px coral; 
  border-radius: 3px;
  margin: 0.5rem;
  font-size: ${({size}) => {  return size }}px; 
`

const MyButton = (props) => {
    return (<Button onClick={()=>update()} size={props.size}> Hi, I am your new button </Button>)
}

const update=()=>{
    counter ++;
    ReactDOM.render(<MyButton size={counter}/>, document.getElementById('root'))
}

export default MyButton

: