Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Change Whitelist Option #439

Closed
Ffloriel opened this issue Jun 17, 2020 · 6 comments
Closed

Change Whitelist Option #439

Ffloriel opened this issue Jun 17, 2020 · 6 comments
Milestone

Comments

@Ffloriel
Copy link
Member

@Ffloriel Ffloriel commented Jun 17, 2020

Context

Whitelist started as a simple option whitelist but grew up with the different use-cases and needs that appears with time.
It is now more complex and overly complicated, and somewhat difficult to remember how to use it with the different option.

Below is a recap of the different options:

  • whitelist
whitelist: ['random', 'yep', 'button']

In the example, the selectors .random, #yep, button will be left in the final CSS

  • whitelistPatterns
whitelistPatterns: [/red$/],

In the example, selectors ending with red such as .bg-red

  • whitelistPatternsChildren
whitelistPatternsChildren: [/blue$/]

In the example, children of selectors ending with blue such as blue p or .bg-blue .child-of-bg

  • whitelistPatternsGreedy
whitelistPatternsGreedy: [/^my-module$/],

.my-module.color-blue {} will be left in the final CSS even if color-blue is not seen as used by PurgeCSS.

Changes Proposed

New Option Name

First, the option whitelist will change its name based on #428.
whitelist will be replaced by safelist. It will indicate which selectors are safe to leave in the final CSS.

New Option: Blocklist

Blocklist will block the CSS selectors from appearing in the final output CSS. The selectors will be removed even when they are seen as used by PurgeCSS.

blocklist: ['usedClass', /^nav-/]

Even if nav-links and usedClass are found by an extractor, they will be removed.

Simplify the option

Two forms will be available. The simple form will be:

safelist: ['invisibleClass', /^nav-/]

In this form, safelist is an array that can take a string or a regex.

The complex form will look like:

safelist: {
    standard: ['invisibleClass', /^nav-/],
    deep: [],
    greedy: [],
    keyframes: [],
    variables: []
}

In this form, safelist is an object taking optional properties:

standard is the same as the simple form and replaces whitelist and whitelistPatterns
deep replaces whitelistPatternsChildren
greedy is a new option coming from #424
keyframes can be used to add keyframes to the safelist, when using keyframes: true (#418)
variables can be used to add CSS variables to the safelist, when using variables: true

standard, deep and greedy might have more intuitive and self explanatory names so open to suggestion and comments.

Issues related:

#428
#418
#302

@ruslanchek
Copy link

@ruslanchek ruslanchek commented Jun 18, 2020

[/red$/], probably your proposition lacks that one. Not only black matter, but other colors are also important too. Anyway such a dumb proposal. Our descendants will be laughing at it. Besides that it is racism, it looks like you won't say that people can be black or white or any other color. If I would be black, then I would be laughing at it as well. It's the overhyped hysterical dumbest thing, that puts the US and now the other countries into anarchy mess. Nothing good comes after this.

@ruslanchek
Copy link

@ruslanchek ruslanchek commented Jun 18, 2020

You also have to remove that "Children" things away. Perhaps one day in the future one parent will give a slap to his children. Then a bunch of morons who calls itself society decided to deprecate that word too. Like Children lives matter shit blah-blah.

@Ffloriel
Copy link
Member Author

@Ffloriel Ffloriel commented Jun 18, 2020

@ruslanchek noted. The proposal is more about simplifying the option that renaming it.

whitelist: [''invisibleClass'],
whitelistPatterns: [/^nav-/]
whitelistPatternsChildren: [],
whitelistPatternsGreedy: [],

to something like

safelist: {
    standard: ['invisibleClass', /^nav-/],
    deep: [],
    greedy: [],
    keyframes: [], // new for keyframes
    variables: [] // new for variables
}

the object is also better in my opinion than having multiple whitelistSomething options.

what do you think?

@ruslanchek
Copy link

@ruslanchek ruslanchek commented Jun 20, 2020

@Ffloriel sorry for emotional feedback the situation in the world is frustrating. About the object - that seems good!

Ffloriel added a commit that referenced this issue Jul 4, 2020
- CLI option
- Documentation

#428 #439
@ianhobbs
Copy link

@ianhobbs ianhobbs commented Jul 6, 2020

A small case in my usage. Trying to capture img[data-sizes="auto"] within whitelist is proving to be difficult.

Ffloriel added a commit that referenced this issue Jul 18, 2020
- add safelist for keyframes (#418, #439)
- add safelist for css variables
@Ffloriel
Copy link
Member Author

@Ffloriel Ffloriel commented Jul 19, 2020

  • Rename whitelist to safelist in the code
  • Rename whitelist to safelist in the documentation
  • Add safelist keyframes option
  • Add safelist variables option
  • Add blocklist option
  • Update documentation with new options
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Linked pull requests

Successfully merging a pull request may close this issue.

None yet
3 participants
You can’t perform that action at this time.