[Question] How to put styles first with `import/order`?

[wenfangdu]

With:

{
  "import/order": [
    "error",
    {
      "newlines-between": "never",
      "warnOnUnassignedImports": true
    }
  ]
}

The following code throws:


But I want to put styles first, is there a way to turn this error off?

[chamomile98]

      {
        pattern: '{@,.}/**/*.{css,scss,less}',
        group: 'builtin',
        position: 'before',
      },

[wenfangdu]

@chamomile98 Thanks, here's my working setup:

{
  "import/order": [
    "warn",
    {
      "newlines-between": "never",
      "pathGroups": [
        {
          "group": "builtin",
          "pattern": "**/*.{css,scss}",
          "position": "before"
        }
      ],
      "warnOnUnassignedImports": true
    }
  ]
}

[chamomile98]

@chamomile98 Thanks, here's my working setup:

{
  "import/order": [
    "warn",
    {
      "newlines-between": "never",
      "pathGroups": [
        {
          "group": "builtin",
          "pattern": "**/*.{css,scss}",
          "position": "before"
        }
      ],
      "warnOnUnassignedImports": true
    }
  ]
}

**/*.{css,scss} -> ./**/*.{css,scss}

[wenfangdu]

**/*.{css,scss} -> ./**/*.{css,scss}

@chamomile98 That's not necessary, as it shrinks the lint coverage.

[ljharb]

Those two patterns should be identical, but the leading dot is nice because it’s explicit. Have you tried it?

[chamomile98]

**/*.{css,scss} -> ./**/*.{css,scss}

@chamomile98 That's not necessary, as it shrinks the lint coverage.

6

[wenfangdu]

Those two patterns should be identical, but the leading dot is nice because it’s explicit. Have you tried it?

@ljharb ./**/*.{css,scss} only covers imports like import './app.scss', but doesn't cover:

• import '../foo/bar.scss'
• import '@/foo/bar.scss'

[ljharb]

it absolutely should on the first one, since ./../foo/.bar.scss matches that glob. Certainly the second one wouldn't match, but that's a different pattern, and I assume you'd want to specify rules differently for relative paths vs external code.

[wenfangdu]

it absolutely should on the first one, since ./../foo/.bar.scss matches that glob.

@ljharb I've tried it, both won't match:

Certainly the second one wouldn't match, but that's a different pattern, and I assume you'd want to specify rules differently for relative paths vs external code.

@/foo/bar.scss is aliased path, and @ is src, so it's not external code.

[wenfangdu]

      {
        pattern: '{@,.}/**/*.{css,scss,less}',
        group: 'builtin',
        position: 'before',
      },

@chamomile98 You were right, the leading {@,.}/ can't be omitted, as it matches both import './app.css' and import '@/app.scss', using only **/*.{css,scss} won't match import './app.css', so my current setup is this:

{
  "import/order": [
    "warn",
    {
      "newlines-between": "never",
      "pathGroups": [
        {
          "group": "builtin",
          "pattern": "{.,@}/**/*.{css,scss}",
          "position": "before"
        }
      ],
      "warnOnUnassignedImports": true
    }
  ]
}

[hyperupcall]

In general, behavior can be non-intuitive if you don't properly set pathGroupsExcludedImportTypes to []. Maybe doing so gets the behavior your looking for? If I remember correctly, builtin is in the array by the default, so you don't want that being excluded.

[wenfangdu]

@hyperupcall Could you please give an example where "pathGroupsExcludedImportTypes": [] is useful? I'm a bit confused after reading the doc.