Import .styl (CSS) from each Component .ts file

src/Components/App/App.styl

@@ -2,6 +2,9 @@
  * App
  */
 
+@import "./_colors"
+@import "./_logo"
+
 +prefix-classes('icp-')
 
 	#icp-container

src/Components/App/App.tsx

@@ -1,5 +1,6 @@
 import { withSelect } from "@wordpress/data";
 
+import "./App.styl";
 import { Div } from "utils/Components";
 import { store_slug } from "utils/data";
 import { Tabs } from "../Tabs/Tabs";

src/Components/ColorRow/ColorRow.tsx

@@ -1,6 +1,7 @@
 import { useState, useEffect } from "@wordpress/element";
 import { withSelect } from "@wordpress/data";
 
+import "./ColorRow.styl";
 import { generateColorsScheme } from "utils/tools";
 import { store_slug } from "utils/data";
 import { Div } from "utils/Components";

src/Components/ColorRow/ColorRowMenu.tsx

@@ -3,6 +3,7 @@ import { withSelect, withDispatch } from "@wordpress/data";
 import { compose } from "@wordpress/compose";
 import copy from "copy-text-to-clipboard";
 
+import "./ColorRowMenu.styl";
 import { block_types } from "utils/data";
 import { Div, Button, Icon, Span } from "utils/Components";
 

src/Components/Colors/Colors.tsx

@@ -1,5 +1,6 @@
 import { withSelect } from "@wordpress/data";
 
+import "./Colors.styl";
 import { Div } from "utils/Components";
 import { store_slug } from "utils/data";
 import { ColorRow } from "../ColorRow/ColorRow";

src/Components/ColorsHeader/ColorsHeader.tsx

@@ -1,5 +1,6 @@
 import { __ } from "@wordpress/i18n";
 
+import "./ColorsHeader.styl";
 import { Div, H5, Span } from "utils/Components";
 import { ColorsHeaderControlScheme } from "./ColorsHeaderControlScheme";
 

src/Components/Controls/ControlPluginInfo.tsx

@@ -1,5 +1,6 @@
 import { __ } from "@wordpress/i18n";
 
+import "./ControlPluginInfo.styl";
 import { Icon, Div, H3, Span } from "utils/Components";
 import { plugin_title } from "utils/data";
 

src/Components/Media/MediaImage.tsx

@@ -3,6 +3,7 @@ import { useRef } from "@wordpress/element";
 import { withSelect, withDispatch } from "@wordpress/data";
 import RgbQuant from "rgbquant";
 
+import "./MediaImage.styl";
 import { store_slug, rgbquant_options } from "utils/data";
 import { Div, Button, Icon, ImgRef } from "utils/Components";
 

src/Components/Media/MediaPlaceholder.tsx

@@ -1,5 +1,6 @@
 import { __ } from "@wordpress/i18n";
 
+import "./MediaPlaceholder.styl";
 import { Div, Span, Icon } from "utils/Components";
 
 interface Props {

src/Components/Tabs/Tabs.tsx

@@ -2,6 +2,7 @@ import { __ } from "@wordpress/i18n";
 import { compose } from "@wordpress/compose";
 import { withSelect, withDispatch } from "@wordpress/data";
 
+import "./Tabs.styl";
 import { Div, Button } from "utils/Components";
 import { store_slug } from "utils/data";
 

src/Components/ViewPalette/ViewPalette.tsx

@@ -1,6 +1,7 @@
 import { __ } from "@wordpress/i18n";
 import { withSelect } from "@wordpress/data";
 
+import "./ViewPalette.styl";
 import { Div, Span } from "utils/Components";
 import { store_slug } from "utils/data";
 import { Media } from "../Media/Media";

src/Components/ViewSettings/ViewSettings.tsx

@@ -1,3 +1,4 @@
+import "./ViewSettings.styl";
 import { Div } from "utils/Components";
 import { Controls } from "../Controls/Controls";
 

src/index.styl → src/utils/data/stylus_variables.styl

@@ -1,4 +1,2 @@
 $e_standard = cubic-bezier(0.4, 0.0, 0.2, 1)
 $e_deceleration = cubic-bezier(0.0, 0.0, 0.2, 1)
-
-@import "./Components/**/*.styl";

webpack/build.config.babel.js

@@ -7,10 +7,7 @@ import nib from "nib";
 import path from "path";
 
 export default {
-	entry: [
-		path.join(__dirname, "../src/index.ts"),
-		path.join(__dirname, "../src/index.styl")
-	],
+	entry: path.join(__dirname, "../src/index.ts"),
 	output: {
 		path: path.join(__dirname, "../build"),
 		filename: `${name}.js`
@@ -56,7 +53,10 @@ export default {
 						loader: "stylus-loader",
 						options: {
 							use: [nib()],
-							import: ["~nib/index.styl"]
+							import: [
+								"~nib/index.styl",
+								path.join(__dirname, "../src/utils/data/stylus_variables.styl")
+							]
 						}
 					}
 				]