Refactor to lodash-es

[jeddy3]

Using https://webuild.envato.com/blog/automating-the-migration-of-lodash-to-lodash-es-in-a-large-codebase-with-jscodeshift/

[stephenwade]

I'll be happy to take this on. I think this is blocked on #5291 – I tried to do this now but found errors like this one when running the test suite:

    Details:

    /Users/stephen/git/stylelint/node_modules/lodash-es/lodash.js:10
    export { default as add } from './add.js';
    ^^^^^^

    SyntaxError: Unexpected token 'export'

By the way, just switching to importing individual files from Lodash reduces the bundle size from 855 KB to 822 KB (I used the instructions in #5291 (comment) to compare bundle sizes):

-const _ = require('lodash');
+const get = require('lodash/get');
+const isEmpty = require('lodash/isEmpty');
+const last = require('lodash/last');

https://github.com/stylelint/stylelint/compare/v14...stephenwade:lodash-slash?expand=1

[m-allanson]

@stephenwade I have some unfinished work (from last year) with stylelint and lodash. Maybe there’s something you can borrow from it? https://github.com/m-allanson/codemod-lodash-requires

[jeddy3]

I'll be happy to take this on.

Fantastic.

I think this is blocked on #5291

Yes, that's right. Migrating to lodash-es will likely be one of the last things we do before releasing 14.0.0.

I have some unfinished work (from last year) with stylelint and lodash. Maybe there’s something you can borrow from it? https://github.com/m-allanson/codemod-lodash-requires

I used your codemod yesterday while conducting my own tests 😄. Worked like a charm.

I can't find a definitive answer for which module formats is best. It looks to be either:

• import get from "lodash/get"
• import { get } from "lodash-es"

The latter seems to result in a leaner bundle in benchmarks.

Does anyone know the definitive answer?

[ybiquitous]

Related to #4412?

[jeddy3]

Yes, once we've migrated we can pick up that issue to see if any lodash functions can be replaced with native ones.

I suspect once 14.0.0 is out, there'll be quite a few issues in the backlog that are either fixed, unblocked and no longer relevant. We should do a run-through at some point after release.

[stephenwade]

I just landed eslint/eslint#14287 to remove Lodash from ESLint. I'd be happy to work on the same for Stylelint.

[stephenwade]

I can't find a definitive answer for which module formats is best. It looks to be either:

import get from "lodash/get"
import { get } from "lodash-es"
The latter seems to result in a leaner bundle in benchmarks.

Does anyone know the definitive answer?

I searched for a while yesterday but found conflicting opinions online. When we finish #5291, we can see what the module sizes look like for this project.

[jeddy3]

I just landed eslint/eslint#14287 to remove Lodash from ESLint.

@stephenwade That's a fantastic piece of work.

If you'd like to work on #4412, then that would be fabulous.

I don't think it's blocked by anything and will either:

• reduce the amount of lodash we eventually move to either lodash-es or individual modules (e.g. lodash/get)
• remove the need to do it entirely

Please branch off v14 (targeting "node": "^12.20.0 || ^14.13.1 || >=16.0.0"), which will let you know which native features are available to you (and linted by ESLint). It's probably best to do separate pull requests for each lodash function you replace, to make reviewing a bit easier.