Stylelint-no-unresolved-module NPM

stylelint-no-unresolved-module

Ensures that module (import-like or url) can be resolved to a module on the file system.

Nodes which are considered "modules":

@import at-rule in CSS and SCSS files
@use and @forward at-rule as Sass modules
url declaration value for various declaration properties

Features:

enhanced-resolve to resolve each resource
Handling partials for Sass files

Install

npm install stylelint-no-unresolved-module --save

Usage

Add this config to your .stylelintrc:

{
	"plugins": ["stylelint-no-unresolved-module"],
	"rules": {
		"plugin/no-unresolved-module": {
			"alias": {
				"assets": "pebbles"
			},
			"modules": ["node_modules", "local_modules"]
		}
	}
}

Assuming file system like this:

.
├── package.json
├── index.css
├── milo/
│   └── macy.css
├── node_modules/
│   └── josie/
│       ├── package.json
│       ├── rusty.css
│       └── index.css
└── local_modules/
    ├── pebbles/
    │   └── tucker.png
    └── shelby/
        └── shelby.css

Assuming code is run from ./index.css:

/**
 * These resources can be resolved */

@import url('josie');
@import url('shelby/shelby.css');
@import url('./milo/macy.css');

body {
	background: url('assets/tucker.jpg');
}

/**
 * These resources can’t be resolved */

@import url('shelby');
@import url('josie/misty.css');
@import url('./milo/index.css');

body {
	background: url('assets/sandy.jpg');
}

Options

Plugin accepts either boolean (true) or object configuration.

If boolean, it will use default configuration:

No aliases
Look only inside node_modules for non-relative resource paths

If object configuration, following properties are valid:

cwd

Type: string
Default: process.cwd()

Root directory from where to start resolving resources. If it’s not defined, directory of file will be used. Useful for situations where you don’t have original file.