Importing GitHub Primer's css

[emwalker]

I'm trying to upgrade from Razzle 3.3.13 to Razzle 4.0.4 and Webpack 4 to Webpack 5, and there's an error that's occurring that I'm having trouble sorting out. The error relates to an import of GitHub Primer CSS and is not raised in Razzle 3.3.13.

If I squint my eyes, I suspect what's going on here is that my Razzle setup is not configured to handle the absolute path /fonts/Inter-Regular.woff, which is relative to node_modules/@primer/css.

There are several lines in different files where this may be happening:

// src/client/index.tsx
import '@primer/css/index.scss?global'

// src/client/global.scss
@import '@primer/css/index.scss';

I've tried several modifications to the Webpack config in razzle.config.js, but none of them worked. I'm not a big JS developer, so I'm not really sure what to do as a next step in troubleshooting this issue. Any help is appreciated.

[squiddy]

All I can say for now is that I can easily reproduce the issue with

• starting a new razzle app (npx create-razzle-app)
• adding primer (yarn add @primer/css)
• adding the scss plugin (yarn add razzle-plugin-scss + razzle.config.js)

(Using webpack 4 though)

The SCSS plugin is using resolve-url-loader in it's loader chain, it deals with relative/absolute paths in CSS files, I'm looking into that now.

[squiddy]

https://github.com/primer/css/blob/v16.3.0/src/marketing/type/typography.scss#L6

@font-face {
  font-family: Inter;
  font-style: normal;
  font-weight: $font-weight-normal;
  src: local("Inter"), local("Inter-Regular"), url("#{$marketing-font-path}Inter-Regular.woff") format("woff");
  font-display: swap;
}

My guess is something in the webpack chain is trying to resolve the url part of that definition, that points by default to /fonts/Inter-Regular.woff.

Update The @primer/css package ships those fonts under node_modules/@primer/css/fonts/Inter-Bold.woff, so by adding that to the include paths for sass should work.

[squiddy]

@emwalker Are you able to share your webpack configuration? I'm a bit clueless how this worked before.

[emwalker]

@squiddy here is my webpack config from my branch that uses Webpack 4 and Razzle 3.3.13:

// webpack.config.js
const path = require('path')

const config = {
  resolve: {
    extensions: ['.mjs', '.js', '.jsx', '.ts', '.tsx', '.css', '.scss'],

    alias: {
      components: path.resolve('src/components'),
      mutations: path.resolve('src/mutations'),
      utils: path.resolve('src/utils'),
    },

  },

  module: {
    rules: [
      {
        test: /\.(gif|jpe?g|png|ico)$/,
        loader: 'url-loader?limit=10000'
      }
    ],
  }
}

module.exports = config

Here is my Razzle config:

// razzle.config.js
'use strict';

const path = require('path');

module.exports = {
  modifyWebpackConfig(opts) {
    const config = Object.assign({}, opts.webpackConfig);

    config.resolve.alias = {
      components: path.resolve(__dirname, './src/components'),
      mutations: path.resolve(__dirname, './src/mutations'),
      utils: path.resolve(__dirname, './src/utils'),
    };

    return config;
  },

  plugins: [
    'scss',
    {
      name: 'typescript',
      options: {
        useBabel: true,
      },
    }
  ],
};

I also have a postcss config, which might or might not be needed, but which doesn't get in the way:

// postcss.config.js
module.exports = {
  plugins: [
    require('postcss-import')
  ]
}

With these configs on Razzle 3 and Webpack 4, I don't encounter the GitHub Primer issue.

[emwalker]

Update The @primer/css package ships those fonts under node_modules/@primer/css/fonts/Inter-Bold.woff, so by adding that to the include paths for sass should work.

I might have misunderstood the suggestion, but this change to my webpack config did not resolve the issue:

diff --git a/webpack.config.js b/webpack.config.js
index bae4310..3bdff7c 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -10,6 +10,11 @@ const config = {
       utils: path.resolve('src/utils'),
     },
 
+    modules: [
+      path.resolve('./src'),
+      path.resolve('./node_modules'),
+      path.resolve('./node_modules/@primer/css'),
+    ]
   },
 
   module: {

[fivethreeo]

You should add the aliases to compilerOptions.paths in your ts/jsconfig. See the docs on that. If css should be loaded without adding extensions add css/scss to extensions. You may need to modify include paths to the sass loader if using sass.