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

feature_request(option): automatic generation of HTML lists #996

Open
Kristinita opened this issue Sep 16, 2022 · 10 comments
Open

feature_request(option): automatic generation of HTML lists #996

Kristinita opened this issue Sep 16, 2022 · 10 comments

Comments

@Kristinita
Copy link

Kristinita commented Sep 16, 2022

1. Summary

It would be nice, if PurgeCSS automatically generated a list of HTML for content key, based on files settings.

2. Example of desired behavior

Example of desired purgecss.coffee configuration for Grunt:

module.exports =

	options:
		# [INFO] Suggested option
		autoGenerateTargetsContent: true
		# [INFO] Folder of my project
		cwd: "output/"
		# [INFO] List of all HTML files of my project
		#
		# [INFO] “cwd” setting applied for this option,
		# the full path — "output/**/*.html"
		contentProject: ["**/*.html"]

	kiraexampletarget:
		files:
			# [INFO] The full path — "output/theme/css/Bulma/bulma-modules.css"
			"theme/css/KiraExampleTheme.css": ["theme/css/Bulma/KiraExampleTheme.css"]

When I run command:

grunt purgecss:kiraexampletarget

PurgeCSS will search all files in my output/**/*.html that contain theme/css/KiraExampleTheme.css. Styles can be added in a variety of ways:

<!-- [INFO] 1. Simple adding styles -->
<link rel="stylesheet" href="../theme/css/KiraExampleTheme.css">
<!-- [INFO] 2. Relative path to links can be different -->
<link rel="stylesheet" href="./theme/css/KiraExampleTheme.css">
<!-- [INFO] 3. Critical CSS loading:
https://www.filamentgroup.com/lab/async-css.html#a-modern-approach -->
<link rel="preload" href="../theme/css/KiraExampleTheme.css" as="style" onload="this.rel='stylesheet'">
<!-- [INFO] 4. Asynchronous CSS loading:
https://www.filamentgroup.com/lab/load-css-simpler/#the-code -->
<link rel="stylesheet" href="../theme/css/KiraExampleTheme.css" media="print" onload="this.media='all'">
<!-- [INFO] 5. Deferred CSS loading:
https://github.com/shinsenter/defer.js/#Defer.css -->
<script>
	Defer.css("../theme/css/KiraExampleTheme.css", "kira-styles", 1000);
</script>

If HTML file contains theme/css/KiraExampleTheme.css added by any method, PurgeCSS add this file to the list — the value of content key.

For example, 2 of my files in **/*.html contain theme/css/KiraExampleTheme.cssoutput/KiraFirstFolder/KiraFirstExample.html and output/KiraFolderSecond/KiraExampleSecond.html. PurgeCSS will treat these 2 files as key of value "content". That is, PurgeCSS will work as if the configuration were:

module.exports =

	kiraexampletarget:
		options:
			content: [
				"output/KiraFirstFolder/KiraFirstExample.html"
				"output/KiraFolderSecond/KiraExampleSecond.html"
			]
		files:
			"output/theme/css/KiraExampleTheme.css": ["output/theme/css/Bulma/KiraExampleTheme.css"]

3. Reasons for the desirability of feature

3.1. Automation

Currently, users are forced to manually add values for the content key. This takes a lot of time, especially if the site is large.

Also, as changes are made to the site, PurgeCSS users have to constantly check the values of the content key. It also takes time.

3.2. Accuracy

Errors can occur when manually adding values for the content key. The user may not add the necessary HTML files, or vice versa, add extra files. The user may forget to make changes to the PurgeCSS configuration after making changes to the site.

Automatic generation of values of the content key would prevent such user errors.

Thanks.

@github-actions
Copy link

This issue is stale because it has been open 90 days with no activity. Remove stale label or comment or this will be closed in 5 days.

@github-actions github-actions bot added the Stale label Dec 16, 2022
@Kristinita
Copy link
Author

This issue is still relevant.

Thanks.

@github-actions github-actions bot removed the Stale label Dec 17, 2022
@github-actions
Copy link

This issue is stale because it has been open 90 days with no activity. Remove stale label or comment or this will be closed in 5 days.

@github-actions github-actions bot added the Stale label Mar 17, 2023
@Kristinita
Copy link
Author

This issue is still relevant.

Thanks.

@github-actions github-actions bot removed the Stale label Mar 19, 2023
@github-actions
Copy link

This issue is stale because it has been open 90 days with no activity. Remove stale label or comment or this will be closed in 5 days.

@github-actions github-actions bot added the Stale label Jun 18, 2023
@Kristinita
Copy link
Author

This issue is still relevant.

Thanks.

@github-actions github-actions bot removed the Stale label Jun 19, 2023
Copy link

This issue is stale because it has been open 90 days with no activity. Remove stale label or comment or this will be closed in 5 days.

@github-actions github-actions bot added the Stale label Dec 17, 2023
@Kristinita
Copy link
Author

This issue is still relevant.

Thanks.

@github-actions github-actions bot removed the Stale label Dec 18, 2023
Copy link

This issue is stale because it has been open 90 days with no activity. Remove stale label or comment or this will be closed in 5 days.

@github-actions github-actions bot added the Stale label Jun 16, 2024
@Kristinita
Copy link
Author

This issue is still relevant.

Thanks.

@github-actions github-actions bot removed the Stale label Jun 17, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant