Merge pull request #19 from Synthetixio/webpack-config

fix(webpack): fixed the webpack config
Synthetixio · Mar 28, 2022 · e0e2a99 · e0e2a99
2 parents 2d00182 + 2abc93d
commit e0e2a99
Show file tree

Hide file tree

Showing 5 changed files with 47 additions and 33 deletions.
diff --git a/src/stories/Carousel.stories.tsx b/src/stories/Carousel.stories.tsx
@@ -15,10 +15,10 @@ Template.args = {
 		<div
 			style={{
 				minHeight: '100px',
-				minWidth: '394px',
+				minWidth: '500px',
 				color: 'white',
 				textAlign: 'center',
-				border: '1px red solid',
+				border: '1px solid red',
 			}}
 			key={1}
 		>
@@ -28,10 +28,10 @@ Template.args = {
 			key={2}
 			style={{
 				minHeight: '100px',
-				minWidth: '394px',
+				minWidth: '500px',
 				color: 'white',
 				textAlign: 'center',
-				border: '1px red solid',
+				border: '1px solid red',
 			}}
 		>
 			2
@@ -40,10 +40,10 @@ Template.args = {
 			key={3}
 			style={{
 				minHeight: '100px',
-				minWidth: '394px',
+				minWidth: '500px',
 				color: 'white',
 				textAlign: 'center',
-				border: '1px red solid',
+				border: '1px solid red',
 			}}
 		>
 			3
@@ -52,10 +52,10 @@ Template.args = {
 			key={4}
 			style={{
 				minHeight: '100px',
-				minWidth: '394px',
+				minWidth: '500px',
 				color: 'white',
 				textAlign: 'center',
-				border: '1px red solid',
+				border: '1px solid red',
 			}}
 		>
 			4
@@ -64,10 +64,10 @@ Template.args = {
 			key={5}
 			style={{
 				minHeight: '100px',
-				minWidth: '394px',
+				minWidth: '500px',
 				color: 'white',
 				textAlign: 'center',
-				border: '1px red solid',
+				border: '1px solid red',
 			}}
 		>
 			5
@@ -77,10 +77,10 @@ Template.args = {
 			key={6}
 			style={{
 				minHeight: '100px',
-				minWidth: '394px',
+				minWidth: '500px',
 				color: 'white',
 				textAlign: 'center',
-				border: '1px red solid',
+				border: '1px solid red',
 			}}
 		>
 			6
@@ -90,10 +90,10 @@ Template.args = {
 			key={7}
 			style={{
 				minHeight: '100px',
-				minWidth: '394px',
+				minWidth: '500px',
 				color: 'white',
 				textAlign: 'center',
-				border: '1px red solid',
+				border: '1px solid red',
 			}}
 		>
 			7
@@ -102,10 +102,10 @@ Template.args = {
 			key={9}
 			style={{
 				minHeight: '100px',
-				minWidth: '394px',
+				minWidth: '500px',
 				color: 'white',
 				textAlign: 'center',
-				border: '1px red solid',
+				border: '1px solid red',
 			}}
 		>
 			8
@@ -114,10 +114,10 @@ Template.args = {
 			key={10}
 			style={{
 				minHeight: '100px',
-				minWidth: '394px',
+				minWidth: '500px',
 				color: 'white',
 				textAlign: 'center',
-				border: '1px red solid',
+				border: '1px solid red',
 			}}
 		>
 			9
@@ -126,10 +126,10 @@ Template.args = {
 			key={10}
 			style={{
 				minHeight: '100px',
-				minWidth: '394px',
+				minWidth: '500px',
 				color: 'white',
 				textAlign: 'center',
-				border: '1px red solid',
+				border: '1px solid red',
 			}}
 		>
 			10

diff --git a/src/styles/index.ts b/src/styles/index.ts
@@ -3,7 +3,17 @@ import fonts from './fonts';
 import { device } from './breakpoints';
 import { rem } from '../constants';
 import spacings from './spacings';
+
+// Just for Webpack
 import './main.css';
+import './fonts/Inter-Bold.woff';
+import './fonts/Inter-Bold.woff2';
+import './fonts/Inter-Regular.woff';
+import './fonts/Inter-Regular.woff2';
+import './fonts/Lustra Text Regular.woff';
+import './fonts/Lustra Text Regular.woff2';
+import './fonts/GT-America-Regular.woff';
+import './fonts/GT-America-Regular.woff2';
 
 const theme = {
 	rem: rem.toString().concat('px'),

diff --git a/src/styles/main.css b/src/styles/main.css
@@ -48,15 +48,15 @@ input::-webkit-inner-spin-button {
 	background-color: rgba(255, 255, 255, 0.2);
 }
 
-.lighter-20 {
+.lighter-40 {
 	background-color: rgba(255, 255, 255, 0.4);
 }
 
-.lighter-20 {
+.lighter-60 {
 	background-color: rgba(255, 255, 255, 0.6);
 }
 
-.lighter-20 {
+.lighter-80 {
 	background-color: rgba(255, 255, 255, 0.8);
 }
 
@@ -78,8 +78,6 @@ input::-webkit-inner-spin-button {
 		url('./fonts/Inter-Bold.woff') format('woff');
 }
 
-/* GT America */
-
 @font-face {
 	font-family: 'GT America';
 	font-style: normal;

diff --git a/tsconfig.json b/tsconfig.json
@@ -16,7 +16,8 @@
 		"strictNullChecks": true,
 		"suppressImplicitAnyIndexErrors": true,
 		"allowSyntheticDefaultImports": true,
-		"strict": true
+		"strict": true,
+		"sourceMap": true
 	},
 	"include": ["src"],
 	"exclude": ["node_modules", "dist", "node_modules", "src/**/*.test.tsx", "src/**/*.stories.tsx"]

diff --git a/webpack.config.js b/webpack.config.js
@@ -10,11 +10,6 @@ module.exports = {
 				use: 'ts-loader',
 				exclude: /node_modules/,
 			},
-			{
-				test: /\.css$/i,
-				use: ['style-loader', 'css-loader'],
-				sideEffects: true,
-			},
 			{
 				test: /\.(woff(2)?|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/,
 				use: [
@@ -27,13 +22,23 @@ module.exports = {
 					},
 				],
 			},
+			{
+				test: /\.css/i,
+				use: {
+					loader: 'file-loader',
+					options: {
+						name: '[name].[ext]',
+						outputPath: 'styles/',
+					},
+				},
+			},
 		],
 	},
 	resolve: {
-		extensions: ['.tsx', '.ts', '.js', 'css'],
+		extensions: ['.tsx', '.ts', '.js', '.css', '.woff', '.woff2'],
 	},
 	output: {
-		filename: 'bundle.js',
 		path: path.resolve(__dirname, 'dist'),
+		filename: '[name].js',
 	},
 };