Sass imports from node_modules

Open
  • Is something wrong?
#132 1 comment 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Assessment

Difficulty
5/5
Estimated time
Over a week
Newbie friendliness
25/100
Issue type
Feature
Clarity
Needs clarification
Activity status
Stale
Tech stack
javascript, node.js, sass, webpack
Domain
build-system, tooling

Research direction

Start by reading the Sass lookup function in node-filing-cabinet's index.js around the referenced line, then compare it with the custom resolver in wp-calypso's bin/render-stylesheet.js. Determine where support for Sass imports from node_modules and varying dependency locations belongs, and define completion around resolving those imports without breaking existing directory handling.

Written by the indexing model from the issue text.

Description

Howdy! In sass, you can use sass-loader with Webpack to resolve Sass imports from node modules. This can look something like the following:

@import 'npm-package/stylesheet'

// etc

This should resolve to node_modules/npm-package/stylesheet.scss. Unfortunately, cabinet + sass-lookup doesn't quite handle this use case. You can get it to resolve using just cabinet, by passing node_modules as a directory, but dependency tree doesn't accept multiple directories in general, so that won't work for our use case. I was wondering what a good path would be towards implementing support.

A really naive implementation could be something like this as the lookup function for sass in cabinet.

function sassResolver(options) {
  let { directory } = options;
  if (typeof directory === 'string') {
    directory = [ directory ];
  }
  directory.push( 'node_modules' );
  return sassLookup({ ...options, directory })
}

This does work, but it wouldn't be able to handle different node_modules locations, such as in monorepos. One could also add a custom resolver like this: https://github.com/Automattic/wp-calypso/blob/6ef9f9278aaf368cd629ba69c33c4768dc7ea08d/bin/render-stylesheet.js#L16-L23. But I'm not sure where exactly to put that -- would the sass-lookup package be a good fit?

What are your thoughts?

Dominant language
JavaScript
Stars
776
Forks
82
No merged PRs in 30d

Getting set up

This project ships no dev container, Dockerfile or contributing guide, so setting up is up to you: start from its README, and see our first-contribution guide for the general steps.

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from dependents/node-dependency-tree

All issues in dependents/node-dependency-tree

Similar issues

More JavaScript issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.