[email protected] dependency is deprecated

[cmglez10]

What are you trying to do?
I'm getting warning "npm WARN deprecated [email protected]: See https://github.com/lydell/source-map-resolve#deprecated ". This warning is from the dependencies "stylus" of package "@angular-devkit/build-angular".

Will it be fix in next release?

What troubleshooting steps have you tried?
Warning comes in production build or during "npm install"
npm i
npm WARN deprecated [email protected]: See https://github.com/lydell/source-map-resolve#deprecated

Reproduction
Steps to reproduce:

npm i
Environment
Angular:
CDK/Material:
Browser(s):
Operating System (e.g. Windows, macOS, Ubuntu):

[pcart-grandjean]

According to source-map-resolve, we should learn how to stop using it. I checked quickly and I see that it is only used once in css in the source-map-support.js file. But I am not sure on what it does, so I can't really propose an alternative and submit it in a PR. I hope somebody will soon.

[thepuzzlemaster]

I also came across this issue, but as a result of an upgrade to webpack 5. Webpack 5 no longer polyfills the url module, so I'm getting an error from this module (css), which is using source-map-resolve, which uses the url module.

[prescience-data]

@pcart-grandjean Definitely agree there should be a more current approach taken given the points he makes.

[holblin]

I worked on removing the source-map support. This will solve the issue. Trying to reach out to the rework members before going into the fork route (and discussing with my company for the PR route).
ref: #164

[Anutrix]

lib/stringify/source-map-support.js seems to be only file that uses source-map-resolve. And that too just resolveSync function seems to be used.
Is it used in any other place in current master branch?

If not maybe we can directly use to code by creating a simple js file in this project itself with required code.

Pretty sure it can further optimized(e.g, by running coverage, minimize, etc.)
[Maybe me or anyone else interested can try if you people are okay/interested with this approach]
but for what it's worth, here's the code from upstream with other exported functions and their dependent functions removed:

var atob = require("atob")
var urlLib = require("url")
var pathLib = require("path")
var decodeUriComponentLib = require("decode-uri-component")



function resolveUrl(/* ...urls */) {
    return Array.prototype.reduce.call(arguments, function (resolved, nextUrl) {
        return urlLib.resolve(resolved, nextUrl)
    })
}

function convertWindowsPath(aPath) {
    return pathLib.sep === "\\" ? aPath.replace(/\\/g, "/").replace(/^[a-z]:\/?/i, "/") : aPath
}

function customDecodeUriComponent(string) {
    // `decodeUriComponentLib` turns `+` into ` `, but that's not wanted.
    return decodeUriComponentLib(string.replace(/\+/g, "%2B"))
}

function parseMapToJSON(string, data) {
    try {
        return JSON.parse(string.replace(/^\)\]\}'/, ""))
    } catch (error) {
        error.sourceMapData = data
        throw error
    }
}

function readSync(read, url, data) {
    var readUrl = customDecodeUriComponent(url)
    try {
        return String(read(readUrl))
    } catch (error) {
        error.sourceMapData = data
        throw error
    }
}

var innerRegex = /[#@] sourceMappingURL=([^\s'"]*)/

var sourceMappingURLRegex = RegExp(
    "(?:" +
    "/\\*" +
    "(?:\\s*\r?\n(?://)?)?" +
    "(?:" + innerRegex.source + ")" +
    "\\s*" +
    "\\*/" +
    "|" +
    "//(?:" + innerRegex.source + ")" +
    ")" +
    "\\s*"
)

function getSourceMappingUrl(code) {
    var match = code.match(sourceMappingURLRegex)
    return match ? match[1] || match[2] || "" : null
}

function resolveSourceMapSync(code, codeUrl, read) {
    var mapData = resolveSourceMapHelper(code, codeUrl)
    if (!mapData || mapData.map) {
        return mapData
    }
    mapData.map = readSync(read, mapData.url, mapData)
    mapData.map = parseMapToJSON(mapData.map, mapData)
    return mapData
}

var dataUriRegex = /^data:([^,;]*)(;[^,;]*)*(?:,(.*))?$/

/**
 * The media type for JSON text is application/json.
 *
 * {@link https://tools.ietf.org/html/rfc8259#section-11 | IANA Considerations }
 *
 * `text/json` is non-standard media type
 */
var jsonMimeTypeRegex = /^(?:application|text)\/json$/

/**
 * JSON text exchanged between systems that are not part of a closed ecosystem
 * MUST be encoded using UTF-8.
 *
 * {@link https://tools.ietf.org/html/rfc8259#section-8.1 | Character Encoding}
 */
var jsonCharacterEncoding = "utf-8"

function base64ToBuf(b64) {
    var binStr = atob(b64)
    var len = binStr.length
    var arr = new Uint8Array(len)
    for (var i = 0; i < len; i++) {
        arr[i] = binStr.charCodeAt(i)
    }
    return arr
}

function decodeBase64String(b64) {
    if (typeof TextDecoder === "undefined" || typeof Uint8Array === "undefined") {
        return atob(b64)
    }
    var buf = base64ToBuf(b64);
    // Note: `decoder.decode` method will throw a `DOMException` with the
    // `"EncodingError"` value when an coding error is found.
    var decoder = new TextDecoder(jsonCharacterEncoding, { fatal: true })
    return decoder.decode(buf);
}

function resolveSourceMapHelper(code, codeUrl) {
    codeUrl = convertWindowsPath(codeUrl)

    var url = getSourceMappingUrl(code)
    if (!url) {
        return null
    }

    var dataUri = url.match(dataUriRegex)
    if (dataUri) {
        var mimeType = dataUri[1] || "text/plain"
        var lastParameter = dataUri[2] || ""
        var encoded = dataUri[3] || ""
        var data = {
            sourceMappingURL: url,
            url: null,
            sourcesRelativeTo: codeUrl,
            map: encoded
        }
        if (!jsonMimeTypeRegex.test(mimeType)) {
            var error = new Error("Unuseful data uri mime type: " + mimeType)
            error.sourceMapData = data
            throw error
        }
        try {
            data.map = parseMapToJSON(
                lastParameter === ";base64" ? decodeBase64String(encoded) : decodeURIComponent(encoded),
                data
            )
        } catch (error) {
            error.sourceMapData = data
            throw error
        }
        return data
    }

    var mapUrl = resolveUrl(codeUrl, url)
    return {
        sourceMappingURL: url,
        url: mapUrl,
        sourcesRelativeTo: mapUrl,
        map: null
    }
}

function resolveSourcesSync(map, mapUrl, read, options) {
    var result = {
        sourcesResolved: [],
        sourcesContent: []
    }

    if (!map.sources || map.sources.length === 0) {
        return result
    }

    resolveSourcesHelper(map, mapUrl, options, function (fullUrl, sourceContent, index) {
        result.sourcesResolved[index] = fullUrl
        if (read !== null) {
            if (typeof sourceContent === "string") {
                result.sourcesContent[index] = sourceContent
            } else {
                var readUrl = customDecodeUriComponent(fullUrl)
                try {
                    result.sourcesContent[index] = String(read(readUrl))
                } catch (error) {
                    result.sourcesContent[index] = error
                }
            }
        }
    })

    return result
}

var endingSlash = /\/?$/

function resolveSourcesHelper(map, mapUrl, options, fn) {
    options = options || {}
    mapUrl = convertWindowsPath(mapUrl)
    var fullUrl
    var sourceContent
    var sourceRoot
    for (var index = 0, len = map.sources.length; index < len; index++) {
        sourceRoot = null
        if (typeof options.sourceRoot === "string") {
            sourceRoot = options.sourceRoot
        } else if (typeof map.sourceRoot === "string" && options.sourceRoot !== false) {
            sourceRoot = map.sourceRoot
        }
        // If the sourceRoot is the empty string, it is equivalent to not setting
        // the property at all.
        if (sourceRoot === null || sourceRoot === '') {
            fullUrl = resolveUrl(mapUrl, map.sources[index])
        } else {
            // Make sure that the sourceRoot ends with a slash, so that `/scripts/subdir` becomes
            // `/scripts/subdir/<source>`, not `/scripts/<source>`. Pointing to a file as source root
            // does not make sense.
            fullUrl = resolveUrl(mapUrl, sourceRoot.replace(endingSlash, "/"), map.sources[index])
        }
        sourceContent = (map.sourcesContent || [])[index]
        fn(fullUrl, sourceContent, index)
    }
}

function resolveSync(code, codeUrl, read, options) {
    var mapData
    if (code === null) {
        var mapUrl = codeUrl
        mapData = {
            sourceMappingURL: null,
            url: mapUrl,
            sourcesRelativeTo: mapUrl,
            map: null
        }
        mapData.map = readSync(read, mapUrl, mapData)
        mapData.map = parseMapToJSON(mapData.map, mapData)
    } else {
        mapData = resolveSourceMapSync(code, codeUrl, read)
        if (!mapData) {
            return null
        }
    }
    var result = resolveSourcesSync(mapData.map, mapData.sourcesRelativeTo, read, options)
    mapData.sourcesResolved = result.sourcesResolved
    mapData.sourcesContent = result.sourcesContent
    return mapData
}

module.exports = {
    resolveSync: resolveSync
}

LICENSE

Sry about the long code snippet(this one's about 240 lines).

[holblin]

From what I saw, it's not used anywhere else. For our purpose, we don't need source-map files so I directly strip those. I will post my changes as soon as I got the green light from my company. Adding back the source map code shouldn't be too hard then but I will personally let other people do it ;-)

[tverilytt]

@holblin Any news on this?!

[holblin]

Yes, we have fork the repository and it's also published into npmjs.
It's currently in rc release and I have some vacation planned so I don't think there will be a lot of updates during the next 2 weeks but I might take a look just after or at least release it in version 4.0.0

https://github.com/adobe/css-tools

[tverilytt]

Thanks for that, sounds great, happy holidays :-)

[holblin]

The version 4.0.0 has been released today on npmjs ;-)

https://www.npmjs.com/package/@adobe/css-tools

[osdiab]

a year later, what's the status of this?

[pcart-grandjean]

a year later, what's the status of this?

Apparently simply use @adobe/css-tools instead.