Please remove the .css require from react modules

[elisechant]

Bug Report

• I’ve read and understood the Contributing guidelines and have done my best effort to follow them.
• I’ve read and agree to the Code of Conduct.
• I’ve searched for any related issues and avoided creating a duplicate issue.

What happened

React ES modules have .css require statements in them which causes several issues and is an anti-pattern.

For example @gov.au/button -> node_modules/@gov.au/buttons/lib/js/react.es5.js:6

'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
exports['default'] = void 0;
var _react = _interopRequireDefault(require('react'));
var _propTypes = _interopRequireDefault(require('prop-types'));
require('../css/styles.css');

Line 6 require('../css/styles.css'); is not good for the following reasons listed here https://nextjs.org/docs/messages/css-npm:

Importing CSS files within node_modules cannot be supported because we cannot know the correct behavior:

• Should the file be consumed as Global CSS or CSS Modules?
• If Global, in what order does the file need to be injected?
• If Modules, what are the emitted class names? As-is, camel-case, snake case?
• Etc...

One issue is your packages by default are not supported by standard a Next.js install.

What I expected to happen

It would be great if we could import css separately, perhaps directly from pancake?

import '../../../../pancake/css/pancake.min.css'

Perhaps we don't need pancake for React components. Build tools like webpack are already quite optimised to shake out unneeded code.