From 6c7eb7c7cf853e101d5c37186d82ade2410c3c6d Mon Sep 17 00:00:00 2001
From: Arctic Ice Studio <development@arcticicestudio.com>
Date: Mon, 3 Dec 2018 10:43:01 +0100
Subject: [PATCH] Use explicit CSS module imports for typefaces
Instead of using the default entry point of the pakages defined in the
`main` field the CSS modules should be imported directly. This fixes the
imports for tests with Jest that are then handled with the implemented
mock for file imports. It improves the DX by showing that these packages
are CSS styles instead of a JS module and removes the need to add
exception/ignore comments for ESLint. The only disadvantage it that it
might be necessary to update the import when the package maintainer
changes the `main` file when updating to a newer version.
GH-53
---
src/components/containers/core/Root/Root.jsx | 9 ++++-----
1 file changed, 4 insertions(+), 5 deletions(-)
diff --git a/src/components/containers/core/Root/Root.jsx b/src/components/containers/core/Root/Root.jsx
index 06a443f6..d8482766 100644
--- a/src/components/containers/core/Root/Root.jsx
+++ b/src/components/containers/core/Root/Root.jsx
@@ -11,13 +11,12 @@ import React, { Fragment } from "react";
import PropTypes from "prop-types";
import { ThemeProvider, createGlobalStyle } from "styled-components";
import modernNormalize from "styled-modern-normalize";
+
import theme, { globals, normalize } from "styles/theme";
-/* eslint-disable import/extensions */
-import "inter-ui";
-import "typeface-rubik";
-import "typeface-source-code-pro";
-/* eslint-enable import/extensions */
+import "inter-ui/inter-ui.css";
+import "typeface-rubik/index.css";
+import "typeface-source-code-pro/index.css";
/**
* A React component that injects global CSS inline styles in page headers.