css-import-resolve v1.0.2
CSS Import Resolve
CSS Import Resolve is an algorithm for resolving imports in CSS.
See the CSS Import Resolve specification for more details.
npm install css-import-resolve
import { resolveAsync } from 'css-import-resolve'
// where `id` is location stylesheet you are resolving, and
const id = 'path/to/css'
// where `cwd` is the current working directory
const cwd = process.cwd()
resolveAsync(id, cwd).then(file => { /* file is an absolute path */ })
Resolve Algorithm
When @import
is called, the following high-level algorithm is used to resolve
the location of the CSS file, found within url(id)
from cwd
:
- if
id
begins with/
cwd
is the filesystem root
- resolve as a file using
cwd/id
asfile
- otherwise, resolve as a directory using
cwd/id
asdir
- otherwise, if
id
does not begin with/
,./
, or../
- resolve as a module using
cwd
andid
- resolve as a module using
- otherwise, throw
"CSS Module not found"
Resolve as a File
- resolve
file
as the file - otherwise, resolve
file.css
as the file
Resolve as a Directory
- resolve the JSON contents of
dir/package.json
aspkg
- if
pkg
has anexports.css.import
field- resolve
dir/pkg.exports.css.import
as the file
- resolve
- if
pkg
has anexports.css.default
field- resolve
dir/pkg.exports.css.default
as the file
- resolve
- if
pkg
has anexports.css
field- resolve
dir/pkg.exports.css
as the file
- resolve
- if
pkg
has astyle
field- resolve
dir/pkg.style
as the file
- resolve
- otherwise, resolve
dir/index.css
as the file
- if
Resolve as a Module
- for each
dir
in the node modules directory usingcwd
- resolve as a file using
dir/id
asfile
- otherwise, resolve as a directory using
dir/id
asdir
- resolve as a file using
Node Modules Directory
segments
iscwd
split by/
count
is the length ofsegments
dirs
is an empty list- while
count
is greater than0
- if
segments[count]
is notnode_modules
- push a new item to
dirs
as the/
-joinedsegments[0 - count]
andnode_modules
- push a new item to
count
iscount
minus1
- if
- return
dirs
resolveSync
import { resolveSync } from 'css-import-resolve'
const fileOrNull = resolveSync('path/to/css', process.cwd())
Options
import { resolveSync } from 'css-import-resolve'
const id = 'path/to/css'
const cwd = process.cwd()
// resolve files as css modules
const opts = {
extensions: ['module.css'],
indexes: ['index.module.css'],
packageProps: ['exports.icss.import', 'exports.icss.default', 'exports.icss']
}
resolveSync(id, cwd, opts)
baseUrl
The baseUrl
parameter sets the base directory used by non-relative paths during resolution.
extensions
The extensions
parameter sets the list of file extensions checked during resolution. Its default value is ["css"]
.
indexes
The index
parameter sets the list of index files in a directory that are checked during resolution. Its default value is ["index.css"]
.
packageProps
The packageProps
parameter sets the list of fields in a package.json
that are checked during resolution. Its default value is ["exports.css.import", "exports.css.default", "exports.css", "style"]
.
fileResolverAsyncCache
The fileResolverAsyncCache
parameter sets the object used to cache asynchronous results during resolution, allowing duplicate checks to resolve without revisiting a file system.
fileResolverSyncCache
The fileResolverSyncCache
parameter sets the object used to cache asynchronous results during resolution, allowing duplicate checks to resolve without revisiting a file system.