Gathering detailed insights and metrics for postcss-import-alias-resolver
Gathering detailed insights and metrics for postcss-import-alias-resolver
Gathering detailed insights and metrics for postcss-import-alias-resolver
Gathering detailed insights and metrics for postcss-import-alias-resolver
A tool to easily create custom alias resolver for postcss-import.
npm install postcss-import-alias-resolver
Typescript
Module System
Node Version
NPM Version
72.7
Supply Chain
98.9
Quality
75.1
Maintenance
100
Vulnerability
100
License
JavaScript (100%)
Total Downloads
509,086
Last Day
23
Last Week
1,096
Last Month
4,430
Last Year
92,871
4 Stars
5 Commits
1 Forks
1 Watchers
1 Branches
1 Contributors
Updated on Jan 27, 2023
Minified
Minified + Gzipped
Latest Version
0.1.1
Package Id
postcss-import-alias-resolver@0.1.1
Unpacked Size
10.17 kB
Size
3.40 kB
File Count
3
NPM Version
6.0.1
Node Version
10.1.0
Cumulative downloads
Total Downloads
Last Day
91.7%
23
Compared to previous day
Last Week
3.6%
1,096
Compared to previous week
Last Month
6%
4,430
Compared to previous month
Last Year
2.3%
92,871
Compared to previous year
A tool to easily create custom alias resolver for postcss-import.
There are already modules that do this, but I encountered a situation when I couldn't make my setup to resolve everything correctly, either aliases or modules or direct link were not resolving. So I made my own configurable resolver.
1npm i postcss-import-alias-resolver
0.1.1
added resolution via package.json main field0.1.0
initial working sampleWebpack example
1const resolver = require('postcss-import-alias-resolver'); 2const postcssLoader = { 3 loader: 'postcss-loader', 4 options: { 5 plugins: { 6 'postcss-import': { 7 resolve: resolver(options) 8 } 9 } 10 } 11}
You can define aliases, extensions and modules directories to look in. You can also pass webpack config and it will take those settings from config.resolve
object. By default aliases are prefixed with '~' so '@': 'src/assets'
will become '~@': 'src/assets'
, this is done for compatibility with some environments and IDEs and can be disabled.
Options example
1resolver({ 2 alias: { 3 '@': path.resolve(__dirname, 'assets'), 4 'comps': path.resolve(__dirname, 'src/components'), 5 'static': path.resolve(__dirname, '/public'), 6 }, 7 extensions: ['.css'], 8 modules: ['assets/libs', 'node_modules'], 9 10 dontPrefix: false, // do not enforce '~' prefix to aliases 11 12 webpackConfig: require('./webpack.conf.js'), 13 mergeAlias: 'extend', 14 mergeModules: 'extend', 15 mergeExtensions: 'replace', 16 17 onResolve(id, base, resolvedPath) { 18 console.log(`id ${id} resolved to ${resolvedPath}`) 19 // if you want to override then return new path 20 if (override === true) 21 return 'some/new/path' 22 }, 23 onFail(id, base) { 24 console.log(`failed to resolve id ${id} from ${base}`) 25 // if you want to override then return new path 26 if (override === true) 27 return 'some/new/path' 28 }, 29})
Structure example
/Users/user/dev/project
├── webpack.conf.js
├── node_modules
│ └── bulma
│ └── package.json
│ └── "main": "./lib/index.css"
├── public
│ └── file.css
├── assets
│ └── some.css
│ └── libs
│ └── bootstrap
│ └── index.css
└── src
└── components
├── base.css
└── theme.css
Resolve example with above config and structure
1@import "~static/file.css"; 2/* /Users/user/dev/project/public//file.css */ 3 4@import "~@/some.css"; 5/* /Users/user/dev/project/assets/some.css */ 6 7@import "~bootstrap"; 8/* /Users/user/dev/project/assets/libs/bootstrap/index.css */ 9 10@import "~bulma"; 11/* /Users/user/dev/project/node_modules/bulma/lib/index.css */ 12 13@import "~comps/theme"; 14/* /Users/user/dev/project/src/components/theme.css */
resolver(options)
Creates a resolver with set options Options object accepts:
alias
: an object with key/value pairs as alias/path:
1let alias = { 2 '@': path.resolve(__dirname, 'assets'), 3 'src': path.resolve(__dirname, 'src'), 4 'static': path.resolve(__dirname, '/public'), 5}
extensions
: list of extensions to try when looking for a file, if not passed and no webpack config then defaults to ['.css']
modules
: list of directories to look into when aliases didn't match, if not passed and no webpack config then defaults to ['node_modules']
moduleFields
: list of fields to look in package.json, default ['main']
webpackConfig
: an object with webpack configuration that contains resolve
fieldmergeAlias
: merge strategy for aliases 'extend'
or 'replace'
, defaults to 'extend'
mergeModules
: merge strategy for modules 'extend'
or 'replace'
, defaults to 'extend'
mergeExtensions
: merge strategy for extensions 'extend'
or 'replace'
, defaults to 'replace'
dontPrefix
: bool, if true then ~
prefix wont be enforced on aliases and it will look for exact matchlogging
: 'none'
'fail'
'match'
'all'
onResolve
: function that will be called on each successful resolve, receives id, base, resolvedPath
, if it returns a string then it will replace resolved path.onFail
: function that will be called on each failed resolve, receives id, base
, if it returns a string then it will replace resolved path.No vulnerabilities found.
Reason
no binaries found in the repo
Reason
8 existing vulnerabilities detected
Details
Reason
Found 0/5 approved changesets -- score normalized to 0
Reason
project is archived
Details
Reason
no SAST tool detected
Details
Reason
no effort to earn an OpenSSF best practices badge detected
Reason
security policy file not detected
Details
Reason
project is not fuzzed
Details
Reason
license file not detected
Details
Reason
branch protection not enabled on development/release branches
Details
Score
Last Scanned on 2025-06-23
The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.
Learn More