Preserving indentation in package-lock.json

[9oelM]

Hi, thank you for writing such a useful library. I got one little thing to suggest so I dropped by here.

I have upgraded with the following versions by running npx browserslist@latest --update-db:

Latest version:     1.0.30001228
Installed versions: 1.0.30001156, 1.0.30001214

Everything just seems to be working fine. However I found that the entire lines in package-lock.json are perceived to be changed by Git due to indentation. In the screen capture below, right side is after upgrading; Left is before. As you can see, there is no practical change, but it seems that caniuse-lite would write output with a default indentation of 2 spaces, regardless of any existing indentation (which in my case was tab).

To help understand even more easily, I just copied & pasted the files.

Before running npx browserslist@latest --update-db

{
    "name": "@presence/client",
    "version": "0.1.0",
    "lockfileVersion": 1,
    "requires": true,
    "dependencies": {
        "@babel/code-frame": {
            "version": "7.10.4",
            "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.10.4.tgz",
            "integrity": "sha512-vG6SvB6oYEhvgisZNFRmRCUkLz11c7rp+tbNTynGqc6mS1d5ATd/sGyV6W0KZZnXRKMTzZDRgQT3Ou9jhpAfUg==",
            "requires": {
                "@babel/highlight": "^7.10.4"
            }
        },
        "@babel/compat-data": {
            "version": "7.12.5",
            "resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.12.5.tgz",
            "integrity": "sha512-DTsS7cxrsH3by8nqQSpFSyjSfSYl57D6Cf4q8dW3LK83tBKBDCkfcay1nYkXq1nIHXnpX8WMMb/O25HOy3h1zg==",
            "dev": true
        },
        "@babel/core": {
            "version": "7.12.3",
            "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.12.3.tgz",
            "integrity": "sha512-0qXcZYKZp3/6N2jKYVxZv0aNCsxTSVCiK72DTiTYZAu7sjg73W0/aynWjMbiGd87EQL4WyA8reiJVh92AVla9g==",

After running

{
  "name": "@presence/client",
  "version": "0.1.0",
  "lockfileVersion": 1,
  "requires": true,
  "dependencies": {
    "@babel/code-frame": {
      "version": "7.10.4",
      "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.10.4.tgz",
      "integrity": "sha512-vG6SvB6oYEhvgisZNFRmRCUkLz11c7rp+tbNTynGqc6mS1d5ATd/sGyV6W0KZZnXRKMTzZDRgQT3Ou9jhpAfUg==",
      "requires": {
        "@babel/highlight": "^7.10.4"
      }
    },
    "@babel/compat-data": {
      "version": "7.12.5",
      "resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.12.5.tgz",
      "integrity": "sha512-DTsS7cxrsH3by8nqQSpFSyjSfSYl57D6Cf4q8dW3LK83tBKBDCkfcay1nYkXq1nIHXnpX8WMMb/O25HOy3h1zg==",
      "dev": true
    },
    "@babel/core": {
      "version": "7.12.3",
      "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.12.3.tgz",
      "integrity": "sha512-0qXcZYKZp3/6N2jKYVxZv0aNCsxTSVCiK72DTiTYZAu7sjg73W0/aynWjMbiGd87EQL4WyA8reiJVh92AVla9g==",

So.. down to the conclusion: it would be nice if npx browserslist@latest --update-db could preserve any existing indentation mechanism to help deduce only useful diffs.

But after a little inspection into the source code.. I wonder if npx browserslist@latest --update-db actually makes a change in package-lock.json? Could it be something else causing the problem?

[ai]

Am I right that npm always use 2 spaces, and you have Tabs because of some other tool?

I like to have keep format, but I do not want to spend time to writing it. So please send PR.

[ehoogeveen-medweb]

We recently changed the indentation in our project, and I noticed that package-lock.json inherits the indentation of package.json. Though this may only happen if package-lock.json has been recreated from scratch (I didn't test it much).

[gregersn]

One way to work around this, is to run the package-lock.json file through e.g. prettier after it is updated, to clean up the white space usage.

[nickmccurdy]

I think Prettier would be overkill for this use case. A full Prettier installion through npm is 3.9 MB. While Prettier is good at folding related code onto one line so it's easier to read, it could conflict with automatic formats from other tools, and package locks often don't need to be read by humans.

I think a simpler and faster approach would be to use parsers directly, for example:

JSON.stringify(JSON.parse(packageLock), undefined, space)

Note that in order to support Yarn and pnpm, a Yaml parser would be necessary, and to support Bun, a proprietary binary parser would be necessary.

Alternatively we could call out to different package managers, but I don't think there's a unified API for all lockfiles yet.