ignore object syntax doesn't work

[maxisam]

I tried something like

{
file: 'file.scss',
all: true
}

And it doesn't work.

Anyway, it is a great project. Thanks!

[acalvo]

Hey!

It works for me if I put the path and not only the file name. For example, if the actual file I want to exclude is src/app/users/xxx/user-zzz.component.scss, this would be the config file:

{
  "path": "src/app",
  "globalStyles": "src/scss/styles.scss",
  "styleExt": ".scss",
  "ignore": [
    "mat-",
    {
      "file": "users/xxx/user-zzz.component.scss",
      "all": true
    }
  ]
}

Hope it helps :)

[nicholasconfer]

Update

Tested further and can confirm that under any situation, an ignored scss file is not ignored if it is imported in a scss file that is checked.

Original

@acalvo I can confirm the file ignore works for component scss files.

It appears however that ignore breaks specifically when using the file object to ignore an imported file in the global styles.

{
  "path": "src/app",
  "ignore": [{ "file": "styles/_tailwind.scss", "all": true }],
  "styleExt": ".scss",
  "globalStyles": "src/app/styles/styles.scss",
  "includePaths": ["src/app/styles/"]
}

Consider the code example above, and assume styles.scss (the global style) has

@import 'tailwind';

The ignore file rule won't work under this condition. It appears to give two issues on testing.

1. CSS that should be ignored throws an unused css error
2. Imports that it can't follow throw an error. In my example I'm utilizing tailwind for Angular (supported in v11.2). Since Tailwind has a built in css purge, we'd want to ignore it. The imports are set up in the recommended setup.

[nicholasconfer]

@acalvo Was able to fix my tailwind issue (point 2 in comment above) by updating my import statements to...

@import '~tailwindcss/base'; @import '~tailwindcss/components'; @import '~tailwindcss/utilities';

Note, the issue I stated above about imported files not being ignored still appears to be an issue, and not just in global styles, but in any part of the application.

Appreciate your help, this has been a great tool to use.

[ivanblazevic]

@nicholasconfer Ignore option when configured as a object is analysing only files which are tied to the component (html/scss pair - I should update readme on that though) - it does not analyse global styling. However, there is one possible option we could do; to introduce new option e.g. ignoreImports: ["tailwind"] - if this option is configured, then library would compile import file alone, extracted all class names it contains and ignore all of them automatically (just like you would add all of them into ignore option as array of strings) - note that in that case there is no possibility to "not ignore" class which has same name defined in the component styling e.g.:

tailwind has class called: text-center

and from some reason you override that class in component styling, class will be still ignored since it has the same name which was found in the import file - it is a bit tricky situation but in general I do not think that should be a big problem or some undesired behaviour. If you have any concerns let me know, otherwise we could go with that approach.