CSS Modules: Terribly over-engineered scoped tag classes

0-MyComponent.js

import styles from './MyComponent.css';

import React, { Component } from 'react';
import { tag } from 'react-css-modules';

const { DIV, H1, H2, P, EM } = tag(styles);

export default class MyComponent extends Component {

  render() {
    <DIV>
      <H1>Heading</H1>
      <H2>Subheading</H2>
      <P>Paragraph with <EM>emphasis</EM>.</P>
    </DIV>
  }

};

1-MyComponent.css

.DIV {
  padding: 20px;
}

.H1 {
  font-size: 32px;
}

.H2 {
  font-size: 24px;
}

.P {
  font-size: 16px;
}

.EM {
  font-style: italic;
  font-weight: bold;
}

2-react-css-modules_index.js

modules.exports = {
  tag: function(styles) { /* magic goes here... */  }
};