Use (S)CSS setup from @worpress/scripts

[MAILPOET-5015]

packages/js/components/.gitignore

@@ -1,3 +1,4 @@
 /build
 /build-module
+/build-style
 /build-types

packages/js/components/package.json

@@ -1,7 +1,10 @@
 {
   "name": "@mailpoet/components",
   "private": true,
-  "sideEffects": false,
+  "sideEffects": [
+    "build-style/**",
+    "src/**/*.scss"
+  ],
   "version": "0.1.0",
   "type": "module",
   "module": "build-module/index.js",

packages/js/components/src/dummy/index.tsx

@@ -1,3 +1,5 @@
+import styles from './style.module.scss';
+
 export function Dummy(): JSX.Element {
-  return <div>Dummy component</div>;
+  return <div className={styles.dummy}>Dummy component</div>;
 }

packages/js/components/src/dummy/style.module.scss

@@ -0,0 +1,3 @@
+.dummy {
+  color: red;
+}

packages/js/components/src/global.d.ts

@@ -0,0 +1,2 @@
+declare module '*.module.css';
+declare module '*.module.scss';

packages/js/components/src/index.ts

@@ -1 +1,3 @@
+import './style.scss';
+
 export * from './dummy';

packages/js/components/webpack.config.js

@@ -5,6 +5,16 @@ import { WebpackEmitAllPlugin } from '../../../tools/webpack/webpack-emit-all-pl
 
 const dirname = new URL('.', import.meta.url).pathname;
 
+const miniCssExtractPlugin = defaultConfig.plugins.find(
+  (plugin) => plugin.constructor.name === 'MiniCssExtractPlugin',
+);
+
+miniCssExtractPlugin.options = {
+  ...miniCssExtractPlugin.options,
+  filename: path.join('../build-style', 'style.css'),
+  experimentalUseImportModule: false,
+};
+
 const plugins = [
   ...defaultConfig.plugins.filter(
     (plugin) => plugin.constructor.name !== 'DependencyExtractionWebpackPlugin',