Pass content and css as raw data

[jsnanigans]

Proposed changes

The Idea is that I can pass HTML or whatever content directly instead of just the file path.

Types of changes

Updated functions that gets CSS content and HTML selectors.
Created extractRawSelector

• Bugfix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to not work as expected)

Checklist

Put an x in the boxes that apply. You can also fill these out after creating the PR. If you're unsure about any of them, don't hesitate to ask. We're here to help! This is simply a reminder of what we are going to look for before merging your code.

• Lint and unit tests pass locally with my changes
• I have added tests that prove my fix is effective or that my feature works
• I have added necessary documentation (if appropriate)

Further comments

Im not sure if the syntax is acceptable, if you pass a array of strings in content and css it will behave like before, but if its a object instead of a array, for content you pass raw with the eg. HTML and extension to make the extractors work. For css you just pass a object with the css in raw

like this:

const purgecss = new Purgecss({
  content: [{
    raw: '<span class="stay"></span>',
    extension: 'html'
  }],
  css: [{
    raw: '.stay {display: inline}; .remove {display: block}'
    }]
})

[Ffloriel]

Thanks for the PR. This is an interesting feature.
I was thinking of a way to use purgecss to remove unused css with individual vue component. Being able to select the raw content + the extensions could help with this task.

What use cases are you thinking about for this?

[Ffloriel]

give a valid css for the test, with ; after inline

[Ffloriel]

add assertion to test that used css are present, like .stay

[Ffloriel]

use for...of instead of forEach, it stays consistent with extractFileSelector

[Ffloriel]

use for...of instead of forEach

[Ffloriel]

use destructuring to get option properties

[jsnanigans]

Thanks for the feedback, the for..of is new to me :)

I am using this in a custom plugin for webpack, the part of it that uses purgecss just gets the chunks and assets and purges the css, then replaces the asset with the purged css, this all happens before any files are written.

[jsnanigans]

I just noticed that if you accept this merge you could remove options.stdin since it does almost the same thing, but with this PR it would be possible to mix files and standard input for content and css

[giraffekey]

Please add an example of this to the usage section, I just wrote all this:

const temp = path.resolve(__dirname, "../temp")
fs.mkdirSync(temp)
const fd = fs.openSync(path.join(temp, "temp.css"), "w")
fs.writeSync(fd, css, 0, "utf8")

const purgecss = new PurgeCSS()

css = (await purgecss.purge({
	content: config.purge,
	css: [path.join(temp, "temp.css")],
}))[0].css

fs.rmdirSync(temp, { recursive: true })

Only to find this PR immediately after :P
Would be nice if the information were more accessible