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.