fix(component): ship components package with header injected styles

CreativeCreate · web-flow · commit afee9ffae8ad · 2020-09-14T21:15:24.000-05:00
Ship components package with header injected styles (also relate to "fix #254" "fix #569"). We inject SCSS as <style> into <head> including bootstrap styles during the build process. This way we can skip shipping & referencing of .scss files. Please note: now that there's no need for a .scss references in the front-end, the main.scss reference in the front-end must be removed. BREAKING CHANGE: we skip shipping & referencing of main.scss files. Now that there's no need for a .scss references in the front-end, the main.scss reference in the front-end must be removed. "fix #254", "fix #569"
diff --git a/package.json b/package.json
@@ -11,7 +11,8 @@
   "typings": "dist/index.d.ts",
   "files": [
     "dist",
-    "scss"
+    "scss",
+    "!main.scss"
   ],
   "repository": {
     "type": "git",
diff --git a/scss/main.scss b/scss/main.scss
@@ -8,8 +8,5 @@
 
 /* Other CSS Imports */
 
-@import '~react-toastify/dist/ReactToastify.min.css';
 
-/* all scss files in src/components should be imported here */
-@import "../src/components/Toaster/toaster.scss";
-@import "../src/components/Callout/callout.scss";
+/* All component level SCSS files are imported @ component level */
diff --git a/src/components/Callout/Callout.tsx b/src/components/Callout/Callout.tsx
@@ -3,6 +3,8 @@ import React, { CSSProperties } from 'react'
 
 import { ColorVariant } from '../../interfaces'
 
+import './callout.scss'
+
 interface Props {
   /**
    * Defines the title of the callout.
diff --git a/src/components/Toaster/index.tsx b/src/components/Toaster/index.tsx
@@ -4,6 +4,9 @@ import { ToastContainer, toast, Slide } from 'react-toastify'
 import { titleWithMessage, titleWithoutMessage } from './components'
 import { ToastProps, ToasterProps } from './interfaces'
 
+import 'react-toastify/dist/ReactToastify.min.css'
+import './toaster.scss'
+
 export const Toast: any = (
   type: ToastProps['type'],
   title: ToastProps['title'],
diff --git a/tsdx.config.js b/tsdx.config.js
@@ -12,10 +12,12 @@ module.exports = {
             preset: 'default',
           }),
         ],
-        inject: false,
-        // only write out CSS for the first bundle (avoids pointless extra files):
-        extract: !!options.writeMeta,
-        modules: true,
+        // inject SCSS as <style> into <head>
+        // including bootstrap styles
+        // to skip shipping & references of .scss files  
+        inject: true,
+        // to reuse bs4 and other package css styles
+        modules: false,
       }),
     )
     return config
