Showing preview only (3,570K chars total). Download the full file or copy to clipboard to get everything.
Repository: FullHuman/purgecss
Branch: main
Commit: cb889ebed5a0
Files: 327
Total size: 3.3 MB
Directory structure:
gitextract_hi2eqa2v/
├── .github/
│ ├── CODE_OF_CONDUCT.md
│ ├── FUNDING.yml
│ ├── ISSUE_TEMPLATE/
│ │ ├── bug_report.yml
│ │ └── feature_request.md
│ ├── ISSUE_TEMPLATE.md
│ ├── PULL_REQUEST_TEMPLATE.md
│ ├── dependabot.yml
│ └── workflows/
│ ├── build-and-test.yml
│ ├── publish.yml
│ └── stale-issues.yml
├── .gitignore
├── .husky/
│ ├── .gitignore
│ └── pre-commit
├── .vscode/
│ └── launch.json
├── CHANGELOG.md
├── CONTRIBUTING.md
├── LICENSE
├── README.md
├── SECURITY.md
├── docs/
│ ├── .vuepress/
│ │ ├── client.ts
│ │ ├── config.ts
│ │ ├── public/
│ │ │ ├── browserconfig.xml
│ │ │ ├── robots.txt
│ │ │ └── site.webmanifest
│ │ ├── styles/
│ │ │ └── index.scss
│ │ └── theme/
│ │ ├── client.ts
│ │ ├── components/
│ │ │ └── CarbonAds.vue
│ │ ├── index.ts
│ │ └── layouts/
│ │ └── Layout.vue
│ ├── CLI.md
│ ├── README.md
│ ├── ant_design.md
│ ├── api.md
│ ├── comparison.md
│ ├── configuration.md
│ ├── css_modules.md
│ ├── extractors.md
│ ├── fr/
│ │ ├── CLI.md
│ │ ├── README.md
│ │ ├── ant_design.md
│ │ ├── api.md
│ │ ├── comparison.md
│ │ ├── configuration.md
│ │ ├── css_modules.md
│ │ ├── extractors.md
│ │ ├── getting-started.md
│ │ ├── guides/
│ │ │ ├── hugo.md
│ │ │ ├── next.md
│ │ │ ├── nuxt.md
│ │ │ ├── razzle.md
│ │ │ ├── react.md
│ │ │ ├── vue.md
│ │ │ └── wordpress.md
│ │ ├── introduction.md
│ │ ├── plugins/
│ │ │ ├── gatsby.md
│ │ │ ├── grunt.md
│ │ │ ├── gulp.md
│ │ │ ├── postcss.md
│ │ │ └── webpack.md
│ │ └── safelisting.md
│ ├── getting-started.md
│ ├── guides/
│ │ ├── hugo.md
│ │ ├── next.md
│ │ ├── nuxt.md
│ │ ├── razzle.md
│ │ ├── react.md
│ │ ├── vue.md
│ │ └── wordpress.md
│ ├── introduction.md
│ ├── plugins/
│ │ ├── gatsby.md
│ │ ├── grunt.md
│ │ ├── gulp.md
│ │ ├── postcss.md
│ │ └── webpack.md
│ └── safelisting.md
├── eslint.config.mjs
├── firebase.json
├── jest.config.ts
├── lerna.json
├── package.json
├── packages/
│ ├── grunt-purgecss/
│ │ ├── Gruntfile.js
│ │ ├── README.md
│ │ ├── __tests__/
│ │ │ ├── fixtures/
│ │ │ │ ├── expected/
│ │ │ │ │ ├── footer.css
│ │ │ │ │ ├── menu.css
│ │ │ │ │ ├── profile.css
│ │ │ │ │ └── simple.css
│ │ │ │ └── src/
│ │ │ │ ├── footer.css
│ │ │ │ ├── menu.css
│ │ │ │ ├── profile.css
│ │ │ │ └── simple/
│ │ │ │ ├── simple.css
│ │ │ │ └── simple.html
│ │ │ └── index.test.ts
│ │ ├── build.ts
│ │ ├── jest.config.ts
│ │ ├── package.json
│ │ ├── src/
│ │ │ ├── index.ts
│ │ │ └── types/
│ │ │ └── index.d.ts
│ │ └── tsconfig.json
│ ├── gulp-purgecss/
│ │ ├── README.md
│ │ ├── __tests__/
│ │ │ ├── buffer.test.ts
│ │ │ ├── stream.test.ts
│ │ │ └── test.html
│ │ ├── build.ts
│ │ ├── jest.config.ts
│ │ ├── package.json
│ │ ├── src/
│ │ │ ├── index.ts
│ │ │ └── types/
│ │ │ └── index.ts
│ │ └── tsconfig.json
│ ├── postcss-purgecss/
│ │ ├── README.md
│ │ ├── __tests__/
│ │ │ ├── fixtures/
│ │ │ │ ├── expected/
│ │ │ │ │ ├── font-keyframes.css
│ │ │ │ │ ├── other-plugins.css
│ │ │ │ │ └── simple.css
│ │ │ │ └── src/
│ │ │ │ ├── config-test/
│ │ │ │ │ ├── expected.css
│ │ │ │ │ ├── index.css
│ │ │ │ │ ├── index.html
│ │ │ │ │ └── purgecss.config.js
│ │ │ │ ├── font-keyframes/
│ │ │ │ │ ├── font-keyframes.css
│ │ │ │ │ └── font-keyframes.html
│ │ │ │ ├── other-plugins/
│ │ │ │ │ ├── other-plugins.css
│ │ │ │ │ └── other-plugins.html
│ │ │ │ └── simple/
│ │ │ │ ├── simple.css
│ │ │ │ └── simple.html
│ │ │ └── index.test.ts
│ │ ├── build.ts
│ │ ├── jest.config.ts
│ │ ├── package.json
│ │ ├── src/
│ │ │ ├── index.ts
│ │ │ └── types/
│ │ │ └── index.ts
│ │ └── tsconfig.json
│ ├── purgecss/
│ │ ├── README.md
│ │ ├── __tests__/
│ │ │ ├── attributes.test.ts
│ │ │ ├── chaining-rules.test.ts
│ │ │ ├── cli/
│ │ │ │ ├── cli-config-file.test.ts
│ │ │ │ ├── cli-console-output.test.ts
│ │ │ │ ├── cli-file-output.test.ts
│ │ │ │ ├── cli-multiple-files-output.test.ts
│ │ │ │ ├── cli-options.test.ts
│ │ │ │ └── cli-preserve-paths.test.ts
│ │ │ ├── comments.test.ts
│ │ │ ├── css-variables.test.ts
│ │ │ ├── delimited.test.ts
│ │ │ ├── font-faces.test.ts
│ │ │ ├── globs.test.ts
│ │ │ ├── index.test.ts
│ │ │ ├── keyframes.test.ts
│ │ │ ├── media-queries.test.ts
│ │ │ ├── performance.test.ts
│ │ │ ├── pseudo-class.test.ts
│ │ │ ├── pseudo-elements.test.ts
│ │ │ ├── purgecss.config.js
│ │ │ ├── raw-css-name.test.ts
│ │ │ ├── rejected.test.ts
│ │ │ ├── rejectedCss.test.ts
│ │ │ ├── safelist.test.ts
│ │ │ ├── skipped-content.test.ts
│ │ │ ├── sourcemap.test.ts
│ │ │ ├── test_examples/
│ │ │ │ ├── assets/
│ │ │ │ │ ├── bootstrap.css
│ │ │ │ │ └── tailwind.css
│ │ │ │ ├── attributes/
│ │ │ │ │ ├── attribute_selector.css
│ │ │ │ │ └── attribute_selector.html
│ │ │ │ ├── chaining-rules/
│ │ │ │ │ ├── index.css
│ │ │ │ │ └── index.html
│ │ │ │ ├── cli/
│ │ │ │ │ ├── nested/
│ │ │ │ │ │ └── src/
│ │ │ │ │ │ ├── content.html
│ │ │ │ │ │ ├── level1/
│ │ │ │ │ │ │ ├── level2/
│ │ │ │ │ │ │ │ └── nested.css
│ │ │ │ │ │ │ └── middle.css
│ │ │ │ │ │ └── root.css
│ │ │ │ │ └── simple/
│ │ │ │ │ └── src/
│ │ │ │ │ ├── content.html
│ │ │ │ │ ├── index.js
│ │ │ │ │ ├── style.css
│ │ │ │ │ └── style2.css
│ │ │ │ ├── comments/
│ │ │ │ │ ├── ignore_comment.css
│ │ │ │ │ ├── ignore_comment.html
│ │ │ │ │ ├── ignore_comment_range.css
│ │ │ │ │ └── ignore_comment_range.html
│ │ │ │ ├── css-variables/
│ │ │ │ │ ├── variables.css
│ │ │ │ │ └── variables.html
│ │ │ │ ├── delimited/
│ │ │ │ │ ├── delimited.css
│ │ │ │ │ └── delimited.html
│ │ │ │ ├── font-faces/
│ │ │ │ │ ├── font_face.css
│ │ │ │ │ └── font_face.html
│ │ │ │ ├── keyframes/
│ │ │ │ │ ├── index.css
│ │ │ │ │ ├── index.html
│ │ │ │ │ ├── keyframes.css
│ │ │ │ │ └── keyframes.html
│ │ │ │ ├── media-queries/
│ │ │ │ │ ├── media_queries.css
│ │ │ │ │ └── media_queries.html
│ │ │ │ ├── others/
│ │ │ │ │ ├── remove_unused.css
│ │ │ │ │ ├── remove_unused.js
│ │ │ │ │ ├── special_characters.css
│ │ │ │ │ └── special_characters.js
│ │ │ │ ├── pseudo-class/
│ │ │ │ │ ├── is.css
│ │ │ │ │ ├── is.html
│ │ │ │ │ ├── not.css
│ │ │ │ │ ├── not.html
│ │ │ │ │ ├── nth_child.css
│ │ │ │ │ ├── nth_child.html
│ │ │ │ │ ├── pseudo_class.css
│ │ │ │ │ ├── pseudo_class.js
│ │ │ │ │ ├── pseudo_selector.css
│ │ │ │ │ ├── pseudo_selector.html
│ │ │ │ │ ├── where.css
│ │ │ │ │ └── where.html
│ │ │ │ ├── pseudo-elements/
│ │ │ │ │ ├── pseudo-elements.css
│ │ │ │ │ └── pseudo-elements.html
│ │ │ │ ├── rejected/
│ │ │ │ │ ├── simple.css
│ │ │ │ │ └── simple.js
│ │ │ │ ├── rejectedCss/
│ │ │ │ │ ├── empty-parent-node.css
│ │ │ │ │ ├── empty-parent-node.js
│ │ │ │ │ ├── simple.css
│ │ │ │ │ └── simple.js
│ │ │ │ ├── safelist/
│ │ │ │ │ ├── blocklist.css
│ │ │ │ │ ├── blocklist.html
│ │ │ │ │ ├── safelist.css
│ │ │ │ │ ├── safelist.html
│ │ │ │ │ ├── safelist_css_variables.css
│ │ │ │ │ ├── safelist_css_variables.html
│ │ │ │ │ ├── safelist_keyframes.css
│ │ │ │ │ ├── safelist_keyframes.html
│ │ │ │ │ ├── safelist_patterns_children.css
│ │ │ │ │ ├── safelist_patterns_children.html
│ │ │ │ │ ├── safelist_patterns_greedy.css
│ │ │ │ │ └── safelist_patterns_greedy.html
│ │ │ │ ├── skipped-content/
│ │ │ │ │ ├── simple.css
│ │ │ │ │ ├── skippedFolder/
│ │ │ │ │ │ └── skipped.html
│ │ │ │ │ └── unskipped.html
│ │ │ │ └── sourcemap/
│ │ │ │ ├── content.html
│ │ │ │ ├── css/
│ │ │ │ │ └── styles.css
│ │ │ │ └── stylus/
│ │ │ │ └── styles.styl
│ │ │ └── utils.ts
│ │ ├── build.ts
│ │ ├── jest.config.ts
│ │ ├── package.json
│ │ ├── src/
│ │ │ ├── ExtractorResultSets.ts
│ │ │ ├── VariablesStructure.ts
│ │ │ ├── bin.ts
│ │ │ ├── constants.ts
│ │ │ ├── index.ts
│ │ │ ├── internal-safelist.ts
│ │ │ ├── options.ts
│ │ │ └── types/
│ │ │ └── index.ts
│ │ └── tsconfig.json
│ ├── purgecss-from-html/
│ │ ├── README.md
│ │ ├── __tests__/
│ │ │ ├── data.ts
│ │ │ └── index.test.ts
│ │ ├── build.ts
│ │ ├── jest.config.ts
│ │ ├── package.json
│ │ ├── src/
│ │ │ └── index.ts
│ │ └── tsconfig.json
│ ├── purgecss-from-jsx/
│ │ ├── README.md
│ │ ├── __tests__/
│ │ │ ├── data.ts
│ │ │ └── index.test.ts
│ │ ├── build.ts
│ │ ├── jest.config.ts
│ │ ├── package.json
│ │ ├── src/
│ │ │ └── index.ts
│ │ └── tsconfig.json
│ ├── purgecss-from-pug/
│ │ ├── README.md
│ │ ├── __tests__/
│ │ │ ├── data.ts
│ │ │ └── index.test.ts
│ │ ├── build.ts
│ │ ├── jest.config.ts
│ │ ├── package.json
│ │ ├── src/
│ │ │ └── index.ts
│ │ └── tsconfig.json
│ ├── purgecss-from-tsx/
│ │ ├── README.md
│ │ ├── __tests__/
│ │ │ ├── data.ts
│ │ │ └── index.test.ts
│ │ ├── build.ts
│ │ ├── jest.config.ts
│ │ ├── package.json
│ │ ├── src/
│ │ │ └── index.ts
│ │ └── tsconfig.json
│ ├── purgecss-webpack-plugin/
│ │ ├── README.md
│ │ ├── __tests__/
│ │ │ ├── cases/
│ │ │ │ ├── path-and-safelist-functions/
│ │ │ │ │ ├── expected/
│ │ │ │ │ │ └── styles.css
│ │ │ │ │ ├── src/
│ │ │ │ │ │ ├── content.html
│ │ │ │ │ │ ├── index.js
│ │ │ │ │ │ └── style.css
│ │ │ │ │ └── webpack.config.js
│ │ │ │ ├── simple/
│ │ │ │ │ ├── expected/
│ │ │ │ │ │ └── styles.css
│ │ │ │ │ ├── purgecss.config.js
│ │ │ │ │ ├── src/
│ │ │ │ │ │ ├── content.html
│ │ │ │ │ │ ├── index.js
│ │ │ │ │ │ └── style.css
│ │ │ │ │ └── webpack.config.js
│ │ │ │ └── simple-with-exclusion/
│ │ │ │ ├── expected/
│ │ │ │ │ ├── bundle.css
│ │ │ │ │ └── legacy.css
│ │ │ │ ├── src/
│ │ │ │ │ ├── index.js
│ │ │ │ │ ├── legacy.js
│ │ │ │ │ ├── style.css
│ │ │ │ │ └── style_that_we_want_to_purge.css
│ │ │ │ └── webpack.config.js
│ │ │ └── index.test.ts
│ │ ├── build.ts
│ │ ├── jest.config.ts
│ │ ├── package.json
│ │ ├── src/
│ │ │ ├── index.ts
│ │ │ └── types/
│ │ │ └── index.ts
│ │ └── tsconfig.json
│ ├── purgecss-with-wordpress/
│ │ ├── LICENSE
│ │ ├── README.md
│ │ ├── index.js
│ │ └── package.json
│ ├── rollup-plugin-purgecss/
│ │ ├── README.md
│ │ ├── __tests__/
│ │ │ ├── assets/
│ │ │ │ ├── actual_a.css
│ │ │ │ ├── expect_a.css
│ │ │ │ ├── test_a.css
│ │ │ │ └── test_a.html
│ │ │ ├── fixtures/
│ │ │ │ └── basic/
│ │ │ │ └── index.js
│ │ │ └── index.test.ts
│ │ ├── build.ts
│ │ ├── jest.config.ts
│ │ ├── package.json
│ │ ├── src/
│ │ │ ├── index.ts
│ │ │ └── types/
│ │ │ └── index.ts
│ │ └── tsconfig.json
│ └── vue-cli-plugin-purgecss/
│ ├── README.md
│ ├── generator/
│ │ ├── index.js
│ │ └── templates/
│ │ └── postcss.config.js
│ ├── index.js
│ └── package.json
├── scripts/
│ ├── build.ts
│ └── verify-commit.ts
├── tsconfig.json
└── types/
├── acorn-jsx/
│ └── index.d.ts
├── acorn-jsx-walk/
│ └── index.d.ts
└── vinyl-sourcemaps-apply/
└── index.d.ts
================================================
FILE CONTENTS
================================================
================================================
FILE: .github/CODE_OF_CONDUCT.md
================================================
# Contributor Covenant Code of Conduct
## Our Pledge
In the interest of fostering an open and welcoming environment, we as contributors and maintainers pledge to making participation in our project and our community a harassment-free experience for everyone, regardless of age, body size, disability, ethnicity, gender identity and expression, level of experience, nationality, personal appearance, race, religion, or sexual identity and orientation.
## Our Standards
Examples of behavior that contributes to creating a positive environment include:
* Using welcoming and inclusive language
* Being respectful of differing viewpoints and experiences
* Gracefully accepting constructive criticism
* Focusing on what is best for the community
* Showing empathy towards other community members
Examples of unacceptable behavior by participants include:
* The use of sexualized language or imagery and unwelcome sexual attention or advances
* Trolling, insulting/derogatory comments, and personal or political attacks
* Public or private harassment
* Publishing others' private information, such as a physical or electronic address, without explicit permission
* Other conduct which could reasonably be considered inappropriate in a professional setting
## Our Responsibilities
Project maintainers are responsible for clarifying the standards of acceptable behavior and are expected to take appropriate and fair corrective action in response to any instances of unacceptable behavior.
Project maintainers have the right and responsibility to remove, edit, or reject comments, commits, code, wiki edits, issues, and other contributions that are not aligned to this Code of Conduct, or to ban temporarily or permanently any contributor for other behaviors that they deem inappropriate, threatening, offensive, or harmful.
## Scope
This Code of Conduct applies both within project spaces and in public spaces when an individual is representing the project or its community. Examples of representing a project or community include using an official project e-mail address, posting via an official social media account, or acting as an appointed representative at an online or offline event. Representation of a project may be further defined and clarified by project maintainers.
## Enforcement
Instances of abusive, harassing, or otherwise unacceptable behavior may be reported by contacting the project team at florielfedry@gmail.com. The project team will review and investigate all complaints, and will respond in a way that it deems appropriate to the circumstances. The project team is obligated to maintain confidentiality with regard to the reporter of an incident. Further details of specific enforcement policies may be posted separately.
Project maintainers who do not follow or enforce the Code of Conduct in good faith may face temporary or permanent repercussions as determined by other members of the project's leadership.
## Attribution
This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4, available at [http://contributor-covenant.org/version/1/4][version]
[homepage]: http://contributor-covenant.org
[version]: http://contributor-covenant.org/version/1/4/
================================================
FILE: .github/FUNDING.yml
================================================
# These are supported funding model platforms
github: ['Ffloriel']
patreon: # Replace with a single Patreon username
open_collective: # Replace with a single Open Collective username
ko_fi: # Replace with a single Ko-fi username
tidelift: # Replace with a single Tidelift platform-name/package-name e.g., npm/babel
community_bridge: # Replace with a single Community Bridge project-name e.g., cloud-foundry
liberapay: # Replace with a single Liberapay username
issuehunt: # Replace with a single IssueHunt username
otechie: # Replace with a single Otechie username
custom: # Replace with up to 4 custom sponsorship URLs e.g., ['link1', 'link2']
================================================
FILE: .github/ISSUE_TEMPLATE/bug_report.yml
================================================
name: Bug Report
description: File a bug report
title: "[Bug]: "
labels: [bug]
assignees:
- octocat
body:
- type: markdown
attributes:
value: |
Thanks for taking the time to fill out this bug report!
Please, search if a similar issue has not been posted before submitting a new one.
- type: textarea
id: describe-the-bug
attributes:
label: Describe the bug
description: A clear and concise description of what the bug is
placeholder: Unexpected behavior...
value: "A bug"
validations:
required: true
- type: textarea
id: to-reproduce
attributes:
label: To Reproduce
description: Steps to reproduce the behavior or a minimal repository
placeholder: 1. Go to '...', 2. Click on '...'
value: "steps"
validations:
required: true
- type: textarea
id: expected-behavior
attributes:
label: Expected Behavior
description: A clear and concise description of what you expected to happen
placeholder: "Expecting..."
value: "expected behavior"
validations:
required: true
- type: textarea
id: environment
attributes:
label: Environment
description: "Add information about OS, Package, Version"
placeholder: "OS: macOS, Package: postcss-purgecss, Version: 4.0.1"
value: "environment"
validations:
required: true
- type: textarea
id: context
attributes:
label: Add any other context about the problem here
description: Additional context
value: "context"
- type: checkboxes
id: terms
attributes:
label: Code of Conduct
description: By submitting this issue, you agree to follow our [Code of Conduct](https://github.com/FullHuman/purgecss/blob/main/.github/CODE_OF_CONDUCT.md)
options:
- label: I agree to follow this project's Code of Conduct
required: true
================================================
FILE: .github/ISSUE_TEMPLATE/feature_request.md
================================================
---
name: Feature request
about: Suggest an idea for this project
title: ''
labels: Feature request
assignees: ''
---
**Is your feature request related to a problem? Please describe.**
A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]
**Describe the solution you'd like**
A clear and concise description of what you want to happen.
**Describe alternatives you've considered**
A clear and concise description of any alternative solutions or features you've considered.
**Additional context**
Add any other context or screenshots about the feature request here.
================================================
FILE: .github/ISSUE_TEMPLATE.md
================================================
Before you open an issue, please check if a similar issue already exists or has been closed before.
### When reporting a bug, please try to include the following:
- [ ] A descriptive title
- [ ] An *isolated* way to reproduce the behavior (example: GitHub repository with code isolated to the issue that anyone can clone to observe the problem)
- [ ] What package and version you're using, and the platform(s) you're running it on
- [ ] The behavior you expect to see, and the actual behavior
### When you open an issue for a feature request, please add as much detail as possible:
- [ ] A descriptive title
- [ ] A description of the problem you're trying to solve, including *why* you think this is a problem
- [ ] An overview of the suggested solution
- [ ] If the feature changes current behavior, reasons why your solution is better
================================================
FILE: .github/PULL_REQUEST_TEMPLATE.md
================================================
## Proposed changes
Describe the big picture of your changes here to communicate to the maintainers why we should accept this pull request. If it fixes a bug or resolves a feature request, be sure to link to that issue.
## Types of changes
What types of changes does your code introduce?
_Put an `x` in the boxes that apply_
- [ ] 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
If this is a relatively large or complex change, kick off the discussion by explaining why you chose the solution you did and what alternatives you considered, etc...
================================================
FILE: .github/dependabot.yml
================================================
version: 2
updates:
- package-ecosystem: npm
directory: "/"
schedule:
interval: monthly
open-pull-requests-limit: 10
reviewers:
- Ffloriel
ignore:
- dependency-name: commander
versions:
- 7.0.0
- 7.1.0
- dependency-name: eslint
versions:
- 7.21.0
- dependency-name: "@typescript-eslint/parser"
versions:
- 4.14.1
- package-ecosystem: github-actions
directory: "/"
schedule:
interval: monthly
================================================
FILE: .github/workflows/build-and-test.yml
================================================
name: Build / Test
permissions:
contents: read
on: [push, pull_request]
jobs:
build:
runs-on: ubuntu-latest
strategy:
matrix:
node-version: [20.x]
steps:
- uses: actions/checkout@v6
- name: Use Node.js ${{ matrix.node-version }}
uses: actions/setup-node@v6
with:
node-version: ${{ matrix.node-version }}
- name: npm install, lerna bootstrap, run build and test
run: |
npm i -g npm
npm i
npm run build --if-present
npm run lint
npm run test -- -- --coverage
- name: Coveralls GitHub Action
uses: coverallsapp/github-action@v2.3.7
with:
github-token: ${{ secrets.GITHUB_TOKEN }}
base-path: ./packages/purgecss
env:
CI: true
================================================
FILE: .github/workflows/publish.yml
================================================
name: Publish to npm
on:
workflow_dispatch:
inputs:
dry-run:
description: 'Run in dry-run mode (no actual publish)'
required: false
default: false
type: boolean
otp:
description: 'npm OTP code (if 2FA is enabled)'
required: false
type: string
permissions:
contents: read
id-token: write
jobs:
publish:
runs-on: ubuntu-latest
steps:
- name: Checkout repository
uses: actions/checkout@v6
with:
fetch-depth: 0
- name: Setup Node.js
uses: actions/setup-node@v6
with:
node-version: '24.x'
registry-url: 'https://registry.npmjs.org'
- name: Install dependencies
run: |
npm i -g npm
npm ci
- name: Build packages
run: npm run build
- name: Run tests
run: npm run test
- name: Publish packages (dry-run)
if: ${{ inputs.dry-run == true || inputs.dry-run == 'true' }}
run: npx lerna publish from-package --no-private --yes --no-git-tag-version --no-push
env:
NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
npm_config_dry_run: true
- name: Publish packages
if: ${{ inputs.dry-run == false || inputs.dry-run == 'false' }}
run: |
if [ -n "${{ inputs.otp }}" ]; then
npx lerna publish from-package --no-private --yes --otp ${{ inputs.otp }}
else
npx lerna publish from-package --no-private --yes
fi
env:
NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
================================================
FILE: .github/workflows/stale-issues.yml
================================================
name: 'Close stale issues and PRs'
on:
schedule:
- cron: '0 0 * * *'
jobs:
stale:
runs-on: ubuntu-latest
steps:
- uses: actions/stale@v10
with:
stale-issue-message: '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.'
stale-pr-message: 'This PR 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.'
days-before-stale: 180
days-before-close: 5
exempt-all-issue-assignees: true
exempt-all-issue-milestones: true
exempt-issue-labels: bug
================================================
FILE: .gitignore
================================================
docs/api-reference/
packages/*/lib/
packages/purgecss/bin/
packages/grunt-purgecss/tasks/
docs/.vuepress/dist/
.firebase/
.firebaserc
.DS_Store
packages/purgecss-webpack-plugin/__tests__/js
packages/grunt-purgecss/__tests__/tmp
.temp
.cache
npm-shrinkwrap.json
yarn.lock
# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
# Runtime data
pids
*.pid
*.seed
*.pid.lock
# Directory for instrumented libs generated by jscoverage/JSCover
lib-cov
# Coverage directory used by tools like istanbul
coverage
# nyc test coverage
.nyc_output
# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
.grunt
# Bower dependency directory (https://bower.io/)
bower_components
# node-waf configuration
.lock-wscript
# Compiled binary addons (http://nodejs.org/api/addons.html)
build/Release
# Dependency directories
node_modules/
jspm_packages/
# Typescript v1 declaration files
typings/
# Optional npm cache directory
.npm
# Optional eslint cache
.eslintcache
# Optional REPL history
.node_repl_history
# Output of 'npm pack'
*.tgz
# Yarn Integrity file
.yarn-integrity
# dotenv environment variables file
.env
================================================
FILE: .husky/.gitignore
================================================
_
================================================
FILE: .husky/pre-commit
================================================
npm run prettier
================================================
FILE: .vscode/launch.json
================================================
{
// Use IntelliSense to learn about possible attributes.
// Hover to view descriptions of existing attributes.
// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
"version": "0.2.0",
"configurations": [
{
"type": "node",
"name": "vscode-jest-tests",
"request": "launch",
"args": [
"--runInBand"
],
"cwd": "${workspaceFolder}",
"console": "integratedTerminal",
"internalConsoleOptions": "neverOpen",
"disableOptimisticBPs": true,
"program": "${workspaceFolder}/node_modules/jest/bin/jest"
}
]
}
================================================
FILE: CHANGELOG.md
================================================
# [8.0.0](https://github.com/FullHuman/purgecss/compare/v7.0.2...v8.0.0)
### BREAKING CHANGES
- Revert the changes from v7.0.2 that modified the import of the PostCSS plugin. This was causing issues (see [#1295](https://github.com/FullHuman/purgecss/issues/1295). The PostCSS plugin should now be imported via a default import:
```ts
import purgeCSSPlugin from '@fullhuman/postcss-purgecss';
```
### Features
* feat: add --preserve-paths option to CLI for maintaining folder hierarchy ([aa5ac9d](https://github.com/FullHuman/purgecss/commit/aa5ac9d)), closes [#377](https://github.com/FullHuman/purgecss/issues/377)
### Bug fixes
* fix: for code scanning alert no. 5: Incomplete multi-character sanitization (#1403) ([3f39411](https://github.com/FullHuman/purgecss/commit/3f39411)), closes [#1403](https://github.com/FullHuman/purgecss/issues/1403)
* fix: enhance setOptions to support both ES modules and CommonJS config exports ([4ad48c4](https://github.com/FullHuman/purgecss/commit/4ad48c4)), closes [#1340](https://github.com/FullHuman/purgecss/issues/1340)
* fix: fix glob expression illegal operations on directories (#1308) ([b27293f](https://github.com/FullHuman/purgecss/commit/b27293f)), closes [#1308](https://github.com/FullHuman/purgecss/issues/1308) [#1266](https://github.com/FullHuman/purgecss/issues/1266)
* fix: update import statements for purgeCSSPlugin in documentation and source files ([e5cbce2](https://github.com/FullHuman/purgecss/commit/e5cbce2)), closes [#1295](https://github.com/FullHuman/purgecss/issues/1295)
* fix(#995): preserve relative paths in source maps ([4f6c4d9](https://github.com/FullHuman/purgecss/commit/4f6c4d9)), closes [#995](https://github.com/FullHuman/purgecss/issues/995)
* fix: enhance keyframes handling to preserve animations referenced via CSS variables ([076c027](https://github.com/FullHuman/purgecss/commit/076c027)), closes [#478](https://github.com/FullHuman/purgecss/issues/478)
### Changes (commits since v7.0.2)
* Add French documentation for PurgeCSS guides and plugins ([b9f4309](https://github.com/FullHuman/purgecss/commit/b9f4309))
* fix for "Workflow does not contain permissions" ([eb6d3b8](https://github.com/FullHuman/purgecss/commit/eb6d3b8))
* fix(#995): preserve relative paths in source maps ([4f6c4d9](https://github.com/FullHuman/purgecss/commit/4f6c4d9)), closes [#995](https://github.com/FullHuman/purgecss/issues/995)
* v8.0.0 ([2e315a5](https://github.com/FullHuman/purgecss/commit/2e315a5))
* chore: format ([6c0c84e](https://github.com/FullHuman/purgecss/commit/6c0c84e))
* chore: format ([7ad2fb7](https://github.com/FullHuman/purgecss/commit/7ad2fb7))
* docs: add breaking changes for v7 about named export for postcss plugin ([7d86fb5](https://github.com/FullHuman/purgecss/commit/7d86fb5))
* docs: add changelog for v7 ([bafb8a1](https://github.com/FullHuman/purgecss/commit/bafb8a1))
* docs: add SEO enhancements and sitemap support to documentation ([6505b7d](https://github.com/FullHuman/purgecss/commit/6505b7d))
* docs: remove outdated TailwindCSS sponsor image ([3949790](https://github.com/FullHuman/purgecss/commit/3949790))
* docs: update sponsorship images and remove outdated link ([bdf87e4](https://github.com/FullHuman/purgecss/commit/bdf87e4))
* docs: use named export for postcss plugin ([8eb027d](https://github.com/FullHuman/purgecss/commit/8eb027d))
* feat: add --preserve-paths option to CLI for maintaining folder hierarchy ([aa5ac9d](https://github.com/FullHuman/purgecss/commit/aa5ac9d)), closes [#377](https://github.com/FullHuman/purgecss/issues/377)
* feat: enhance keyframes handling to preserve animations referenced via CSS variables ([076c027](https://github.com/FullHuman/purgecss/commit/076c027)), closes [#478](https://github.com/FullHuman/purgecss/issues/478)
* build(deps-dev): bump @eslint/eslintrc from 3.1.0 to 3.2.0 (#1303) ([8308cdb](https://github.com/FullHuman/purgecss/commit/8308cdb)), closes [#1303](https://github.com/FullHuman/purgecss/issues/1303)
* build(deps-dev): bump @eslint/js from 9.11.1 to 9.39.0 (#1391) ([2348f82](https://github.com/FullHuman/purgecss/commit/2348f82)), closes [#1391](https://github.com/FullHuman/purgecss/issues/1391)
* build(deps-dev): bump @rollup/plugin-typescript from 12.1.0 to 12.1.2 (#1312) ([9387a9b](https://github.com/FullHuman/purgecss/commit/9387a9b)), closes [#1312](https://github.com/FullHuman/purgecss/issues/1312)
* build(deps-dev): bump @rollup/plugin-typescript from 12.1.2 to 12.3.0 (#1407) ([5902189](https://github.com/FullHuman/purgecss/commit/5902189)), closes [#1407](https://github.com/FullHuman/purgecss/issues/1407)
* build(deps-dev): bump @types/glob from 8.0.0 to 9.0.0 (#1408) ([aa30f0f](https://github.com/FullHuman/purgecss/commit/aa30f0f)), closes [#1408](https://github.com/FullHuman/purgecss/issues/1408)
* build(deps-dev): bump @types/jest from 29.5.13 to 29.5.14 (#1301) ([cb3d1c4](https://github.com/FullHuman/purgecss/commit/cb3d1c4)), closes [#1301](https://github.com/FullHuman/purgecss/issues/1301)
* build(deps-dev): bump @types/node from 22.13.0 to 25.0.3 (#1406) ([ca242ee](https://github.com/FullHuman/purgecss/commit/ca242ee)), closes [#1406](https://github.com/FullHuman/purgecss/issues/1406)
* build(deps-dev): bump @types/node from 22.8.6 to 22.13.0 (#1322) ([0d9f594](https://github.com/FullHuman/purgecss/commit/0d9f594)), closes [#1322](https://github.com/FullHuman/purgecss/issues/1322)
* build(deps-dev): bump @typescript-eslint/parser from 8.14.0 to 8.46.2 (#1390) ([67b5b0c](https://github.com/FullHuman/purgecss/commit/67b5b0c)), closes [#1390](https://github.com/FullHuman/purgecss/issues/1390)
* build(deps-dev): bump @vuepress/plugin-search (#1320) ([00251a7](https://github.com/FullHuman/purgecss/commit/00251a7)), closes [#1320](https://github.com/FullHuman/purgecss/issues/1320)
* build(deps-dev): bump @vuepress/plugin-search (#1372) ([307f8d2](https://github.com/FullHuman/purgecss/commit/307f8d2)), closes [#1372](https://github.com/FullHuman/purgecss/issues/1372)
* build(deps-dev): bump @vuepress/theme-default (#1405) ([047f0ea](https://github.com/FullHuman/purgecss/commit/047f0ea)), closes [#1405](https://github.com/FullHuman/purgecss/issues/1405)
* build(deps-dev): bump axios from 1.7.7 to 1.13.2 (#1401) ([bb14e06](https://github.com/FullHuman/purgecss/commit/bb14e06)), closes [#1401](https://github.com/FullHuman/purgecss/issues/1401)
* build(deps-dev): bump eslint from 9.39.1 to 9.39.2 (#1409) ([4a24603](https://github.com/FullHuman/purgecss/commit/4a24603)), closes [#1409](https://github.com/FullHuman/purgecss/issues/1409)
* build(deps-dev): bump eslint-plugin-tsdoc from 0.3.0 to 0.4.0 (#1304) ([447d424](https://github.com/FullHuman/purgecss/commit/447d424)), closes [#1304](https://github.com/FullHuman/purgecss/issues/1304)
* build(deps-dev): bump form-data from 4.0.0 to 4.0.4 (#1374) ([0853fd4](https://github.com/FullHuman/purgecss/commit/0853fd4)), closes [#1374](https://github.com/FullHuman/purgecss/issues/1374)
* build(deps-dev): bump globals from 15.11.0 to 16.5.0 (#1393) ([cfc4939](https://github.com/FullHuman/purgecss/commit/cfc4939)), closes [#1393](https://github.com/FullHuman/purgecss/issues/1393)
* build(deps-dev): bump lodash from 4.17.21 to 4.17.23 (#1414) ([f79b815](https://github.com/FullHuman/purgecss/commit/f79b815)), closes [#1414](https://github.com/FullHuman/purgecss/issues/1414)
* build(deps-dev): bump prettier from 3.3.3 to 3.4.2 (#1315) ([504f025](https://github.com/FullHuman/purgecss/commit/504f025)), closes [#1315](https://github.com/FullHuman/purgecss/issues/1315)
* build(deps-dev): bump prettier from 3.4.2 to 3.7.4 (#1413) ([bb778ad](https://github.com/FullHuman/purgecss/commit/bb778ad)), closes [#1413](https://github.com/FullHuman/purgecss/issues/1413)
* build(deps-dev): bump rollup from 4.53.3 to 4.54.0 (#1410) ([14052e6](https://github.com/FullHuman/purgecss/commit/14052e6)), closes [#1410](https://github.com/FullHuman/purgecss/issues/1410)
* build(deps-dev): bump vuepress from 2.0.0-rc.19 to 2.0.0-rc.26 ([a0bcec5](https://github.com/FullHuman/purgecss/commit/a0bcec5))
* build(deps-dev): update @typescript-eslint packages to version 8.48.1 ([52c16f4](https://github.com/FullHuman/purgecss/commit/52c16f4))
* build(deps-dev): update conventional-changelog-cli to conventional-changelog version 7.1.1 ([2745ee9](https://github.com/FullHuman/purgecss/commit/2745ee9))
* build(deps-dev): update conventional-changelog-cli to conventional-changelog version 7.1.1 ([69d8bbb](https://github.com/FullHuman/purgecss/commit/69d8bbb))
* build(deps): bump actions/checkout from 4 to 6 (#1399) ([f1f9930](https://github.com/FullHuman/purgecss/commit/f1f9930)), closes [#1399](https://github.com/FullHuman/purgecss/issues/1399)
* build(deps): bump actions/setup-node from 4 to 6 (#1389) ([256eea7](https://github.com/FullHuman/purgecss/commit/256eea7)), closes [#1389](https://github.com/FullHuman/purgecss/issues/1389)
* build(deps): bump actions/stale from 9 to 10 (#1384) ([3f67275](https://github.com/FullHuman/purgecss/commit/3f67275)), closes [#1384](https://github.com/FullHuman/purgecss/issues/1384)
* build(deps): bump coverallsapp/github-action from 2.3.4 to 2.3.6 (#1319) ([53edc4f](https://github.com/FullHuman/purgecss/commit/53edc4f)), closes [#1319](https://github.com/FullHuman/purgecss/issues/1319)
* build(deps): bump coverallsapp/github-action from 2.3.6 to 2.3.7 (#1398) ([9f760aa](https://github.com/FullHuman/purgecss/commit/9f760aa)), closes [#1398](https://github.com/FullHuman/purgecss/issues/1398)
* build(deps): bump js-yaml, @microsoft/api-documenter and lerna (#1402) ([1505cac](https://github.com/FullHuman/purgecss/commit/1505cac)), closes [#1402](https://github.com/FullHuman/purgecss/issues/1402)
* build(deps): bump nanoid from 3.3.7 to 3.3.8 (#1307) ([5e13f33](https://github.com/FullHuman/purgecss/commit/5e13f33)), closes [#1307](https://github.com/FullHuman/purgecss/issues/1307)
* build(deps): bump postcss from 8.5.1 to 8.5.6 (#1371) ([c5b9e06](https://github.com/FullHuman/purgecss/commit/c5b9e06)), closes [#1371](https://github.com/FullHuman/purgecss/issues/1371)
* build(deps): bump postcss-selector-parser from 6.1.2 to 7.0.0 (#1306) ([23cf540](https://github.com/FullHuman/purgecss/commit/23cf540)), closes [#1306](https://github.com/FullHuman/purgecss/issues/1306)
* build(deps): bump postcss-selector-parser from 7.0.0 to 7.1.1 (#1404) ([b1f2eab](https://github.com/FullHuman/purgecss/commit/b1f2eab)), closes [#1404](https://github.com/FullHuman/purgecss/issues/1404)
* build(deps): bump tmp and inquirer (#1400) ([9a05d07](https://github.com/FullHuman/purgecss/commit/9a05d07)), closes [#1400](https://github.com/FullHuman/purgecss/issues/1400)
* build(deps): bump typescript from 5.6.3 to 5.9.3 (#1412) ([0ee0b45](https://github.com/FullHuman/purgecss/commit/0ee0b45)), closes [#1412](https://github.com/FullHuman/purgecss/issues/1412)
* fix: for code scanning alert no. 5: Incomplete multi-character sanitization (#1403) ([3f39411](https://github.com/FullHuman/purgecss/commit/3f39411)), closes [#1403](https://github.com/FullHuman/purgecss/issues/1403)
* fix: enhance setOptions to support both ES modules and CommonJS config exports ([4ad48c4](https://github.com/FullHuman/purgecss/commit/4ad48c4)), closes [#1340](https://github.com/FullHuman/purgecss/issues/1340)
* fix: fix glob expression illegal operations on directories (#1308) ([b27293f](https://github.com/FullHuman/purgecss/commit/b27293f)), closes [#1308](https://github.com/FullHuman/purgecss/issues/1308) [#1266](https://github.com/FullHuman/purgecss/issues/1266)
* fix: update import statements for purgeCSSPlugin in documentation and source files ([e5cbce2](https://github.com/FullHuman/purgecss/commit/e5cbce2)), closes [#1295](https://github.com/FullHuman/purgecss/issues/1295)
# [7.0.0](https://github.com/FullHuman/purgecss/compare/v6.0.0...v7.0.1)
### Bug Fixes
* fix: fix issue where pseudo classes like :where, :not, :is were always removed at root level ([89024ce](https://github.com/FullHuman/purgecss/commit/89024ce)), closes [#1282](https://github.com/FullHuman/purgecss/issues/1282) [#978](https://github.com/FullHuman/purgecss/issues/978)
* build: add named export for postcss plugin ([87d15b7](https://github.com/FullHuman/purgecss/commit/87d15b7)), closes [#1263](https://github.com/FullHuman/purgecss/issues/1263)
### Features
* feat(purgecss-from-pug): returns ExtractorResultDetailed instead of selectors ([fb51dc6](https://github.com/FullHuman/purgecss/commit/fb51dc6))
### BREAKING CHANGES
- PostCSS plugin should now be imported via purgeCSSPlugin
```ts
import { purgeCSSPlugin } from '@fullhuman/postcss-purgecss';
```
- drop support for node 18
# [](https://github.com/FullHuman/purgecss/compare/v6.0.0...v) (2024-03-29)
# [6.0.0](https://github.com/FullHuman/purgecss/compare/v5.0.0...v6.0.0) (2024-03-29)
### Bug Fixes
- collect of used variables for changed selector ([#1217](https://github.com/FullHuman/purgecss/issues/1217)) ([9fbb592](https://github.com/FullHuman/purgecss/commit/9fbb5920164d3ffd296c0eaab6a4d2b4477b418c))
- **gulp-purgecss:** move vinyl-sourcemaps-apply to deps [#999](https://github.com/FullHuman/purgecss/issues/999) ([7858b7a](https://github.com/FullHuman/purgecss/commit/7858b7a910efda13162095d8f528fb9e668cc190))
### Features
- **purgecss:** add support for :where and :is [#978](https://github.com/FullHuman/purgecss/issues/978) ([bb5782b](https://github.com/FullHuman/purgecss/commit/bb5782bff296805f95c6bae0ce434be314bd1580))
- warn if no files are found [#642](https://github.com/FullHuman/purgecss/issues/642) ([6188505](https://github.com/FullHuman/purgecss/commit/61885055f46bc36c839f77c07e7d680378083567))
# [](https://github.com/FullHuman/purgecss/compare/v5.0.0...v) (2022-09-13)
# [5.0.0](https://github.com/FullHuman/purgecss/compare/v4.1.3...v5.0.0) (2022-09-13)
### Bug Fixes
- add safelist variables to postcss-purgecss [#840](https://github.com/FullHuman/purgecss/issues/840) ([c822058](https://github.com/FullHuman/purgecss/commit/c822058a703a0544c0bb683427937d9683688742))
- **gulp-purgecss:** support skippedContentGlobs option [#853](https://github.com/FullHuman/purgecss/issues/853) ([b72de77](https://github.com/FullHuman/purgecss/commit/b72de77323fd74d5d53695409fef26e369656839))
- Purgecss webpack plugin/only filter fix ([#933](https://github.com/FullHuman/purgecss/issues/933)) ([f8e4c2c](https://github.com/FullHuman/purgecss/commit/f8e4c2c48440c26ca612b2486a6e9561be6f56d0))
- **purgecss-webpack-plugin:** add sourcemap support [#409](https://github.com/FullHuman/purgecss/issues/409) ([b3f73ed](https://github.com/FullHuman/purgecss/commit/b3f73ed5293fa1d840aff98b5796f635343d48ec))
- **purgecss-webpack-plugin:** export as named export as well as default ([#821](https://github.com/FullHuman/purgecss/issues/821)) ([a6a2c8e](https://github.com/FullHuman/purgecss/commit/a6a2c8e0634324cc9ab276e02d5447d5d6c1e6e3))
- wrong path import ([4f3ddd0](https://github.com/FullHuman/purgecss/commit/4f3ddd0a47ec29cf8a723bd68ebc4b724e03dc7e))
### Features
- add source map support [#526](https://github.com/FullHuman/purgecss/issues/526) ([f2a9c5a](https://github.com/FullHuman/purgecss/commit/f2a9c5ac575af9a1e3f85be63b758fb9c37077e1))
- **gulp-purgecss:** add support for gulp-sourcemaps [#257](https://github.com/FullHuman/purgecss/issues/257) ([55c26d2](https://github.com/FullHuman/purgecss/commit/55c26d2790b8502f115180cfe02aba5720c84b7b))
- **postcss-purgecss:** load options from purgecss config ([4de3bd8](https://github.com/FullHuman/purgecss/commit/4de3bd8e198985670502f77c57567eb43fcccbd4))
- **purgecss-webpack-plugin:** load config file automatically [#767](https://github.com/FullHuman/purgecss/issues/767) ([726faaa](https://github.com/FullHuman/purgecss/commit/726faaa1e6eeb96f6c6b223d1ba925f9d7f33cba))
### BREAKING CHANGES
- **purgecss-webpack-plugin:** drop webpack 4 support
# [](https://github.com/FullHuman/purgecss/compare/v5.0.0...v) (2022-09-13)
# [4.1.0](https://github.com/FullHuman/purgecss/compare/v4.0.3...v4.1.0) (2021-11-28)
### Bug Fixes
- Allow Absolute Paths ([#679](https://github.com/FullHuman/purgecss/issues/679)) ([15335a2](https://github.com/FullHuman/purgecss/commit/15335a2f4643a60593ab071064ad51db8f47ce77))
- css variable removed when declared in wrong order ([89ece42](https://github.com/FullHuman/purgecss/commit/89ece42929a3fd62b2a84fb0b57c0ac16c98908f)), closes [#518](https://github.com/FullHuman/purgecss/issues/518)
- Fix interaction with other plugins ([#647](https://github.com/FullHuman/purgecss/issues/647)) ([fb08e3a](https://github.com/FullHuman/purgecss/commit/fb08e3a3c27a1b25e4f023cbcbfca35a0cc2b43e))
- **grunt-purgecss:** Fix plugin not ouputting all files ([#723](https://github.com/FullHuman/purgecss/issues/723)) ([646e419](https://github.com/FullHuman/purgecss/commit/646e419cac01b3e647cc77ffebcfd5c31d087e23))
- **gulp-purgecss:** fix support for stream input ([fd5d3bf](https://github.com/FullHuman/purgecss/commit/fd5d3bf578344f2512d1c0961d8dbbb1f3b8d0d5))
- Keep keyframe decimals for prefixed [@keyframes](https://github.com/keyframes) ([#749](https://github.com/FullHuman/purgecss/issues/749)) ([b804441](https://github.com/FullHuman/purgecss/commit/b80444195c08e2ae62f5e5f249a1e346b1d70097))
- **purgecss-from-pug:** class attribute with multiple values not correctly handled with pug ([#678](https://github.com/FullHuman/purgecss/issues/678)) ([ba6285d](https://github.com/FullHuman/purgecss/commit/ba6285def36c304ca7ae3fa5999cec378065060c)), closes [#677](https://github.com/FullHuman/purgecss/issues/677)
### Features
- add dynamicAttributes option ([2f9cc65](https://github.com/FullHuman/purgecss/commit/2f9cc653ba77b0eb58ebed40269bcb6923b3fe83))
- add option to ouput unused css ([#763](https://github.com/FullHuman/purgecss/issues/763)) ([3a3d958](https://github.com/FullHuman/purgecss/commit/3a3d9582f28434acceaca5622f82c39f598a85e1))
- add purgecss-from-tsx ([#716](https://github.com/FullHuman/purgecss/issues/716)) ([e556afc](https://github.com/FullHuman/purgecss/commit/e556afc6401a56886f10f8fda7f729853c0735e7))
- export all types [#780](https://github.com/FullHuman/purgecss/issues/780) ([1a959c6](https://github.com/FullHuman/purgecss/commit/1a959c6700bf82975fd52ac32ec1012b3e2e1b5b))
- new purgecss-from-jsx plugin ([#692](https://github.com/FullHuman/purgecss/issues/692)) ([3570c7d](https://github.com/FullHuman/purgecss/commit/3570c7db9a4028e494ad684a7689f2cc5a99a585))
# [](https://github.com/FullHuman/purgecss/compare/v4.0.3...v) (2021-06-07)
### Bug Fixes
- Allow Absolute Paths ([#679](https://github.com/FullHuman/purgecss/issues/679)) ([15335a2](https://github.com/FullHuman/purgecss/commit/15335a2f4643a60593ab071064ad51db8f47ce77))
- **purgecss-from-pug:** class attribute with multiple values not correctly handled with pug ([#678](https://github.com/FullHuman/purgecss/issues/678)) ([ba6285d](https://github.com/FullHuman/purgecss/commit/ba6285def36c304ca7ae3fa5999cec378065060c)), closes [#677](https://github.com/FullHuman/purgecss/issues/677)
- css variable removed when declared in wrong order ([89ece42](https://github.com/FullHuman/purgecss/commit/89ece42929a3fd62b2a84fb0b57c0ac16c98908f)), closes [#518](https://github.com/FullHuman/purgecss/issues/518)
- Fix interaction with other plugins ([#647](https://github.com/FullHuman/purgecss/issues/647)) ([fb08e3a](https://github.com/FullHuman/purgecss/commit/fb08e3a3c27a1b25e4f023cbcbfca35a0cc2b43e))
### Features
- add dynamicAttributes option ([2f9cc65](https://github.com/FullHuman/purgecss/commit/2f9cc653ba77b0eb58ebed40269bcb6923b3fe83))
## [4.0.3](https://github.com/FullHuman/purgecss/compare/v4.0.2...v4.0.3) (2021-03-20)
### Features
- add dynamic attributes option ([9b0fdc3](https://github.com/FullHuman/purgecss/commit/9b0fdc3219b1b24856e302e0798e4d22ab006a5a)), closes [#588](https://github.com/FullHuman/purgecss/issues/588)
- add skippedContentGlobs option to webpack and gulp plugin ([e3dce1a](https://github.com/FullHuman/purgecss/commit/e3dce1a43791d32f5967d4aa320f2ec80690b299))
## [4.0.2](https://github.com/FullHuman/purgecss/compare/v4.0.1...v4.0.2) (2021-02-21)
## [4.0.1](https://github.com/FullHuman/purgecss/compare/v4.0.0...v4.0.1) (2021-02-21)
### Bug Fixes
- attribute selector with spaces being removed ([418dc7e](https://github.com/FullHuman/purgecss/commit/418dc7e0a7a30b57e1d7d9d10272e8f47eeb46fb)), closes [#392](https://github.com/FullHuman/purgecss/issues/392)
- webpack plugin option blocklist types ([5b029c2](https://github.com/FullHuman/purgecss/commit/5b029c21eb0269bc464d8e5f5a4ab9c3eed23064))
### Features
- add option blocklist to webpack plugin ([#610](https://github.com/FullHuman/purgecss/issues/610)) ([0148cea](https://github.com/FullHuman/purgecss/commit/0148cea584f9a09c26846b505dbb4945b4c1b536))
# [4.0.0](https://github.com/FullHuman/purgecss/compare/v3.1.3...v4.0.0) (2021-01-17)
### Bug Fixes
- **test:** webpack test type error ([c41ad27](https://github.com/FullHuman/purgecss/commit/c41ad27fac09fca62343ba5bdc0a6b7f53aeb757))
### Features
- **postcss-purgecss:** remove compatibility with postcss 7 ([48ce28f](https://github.com/FullHuman/purgecss/commit/48ce28fa10cb4bd72385f2ac0b25303f67c581be)), closes [#488](https://github.com/FullHuman/purgecss/issues/488) [#540](https://github.com/FullHuman/purgecss/issues/540)
### BREAKING CHANGES
- **postcss-purgecss:** dropping support for postcss 7
Drop PostCSS 7 support, use @fullhuman/postcss-purgecss 3.0 with PostCSS 7.
# [](https://github.com/FullHuman/purgecss/compare/v3.1.3-alpha.0...v) (2020-12-15)
- **postcss-purgecss** remove postcss 8 as peer dependency
- **purgecss-webpack-plugin** fix backward compatibility with webpack 4
# [3.1](https://github.com/FullHuman/purgecss/compare/v3.1.0-alpha.0...v) (2020-12-14)
- **PurgeCSS** Update to PostCSS 8
- **postcss-purgecss** Add compatibility with PostCSS 8
- **purgecss-webpack-plugin** Fix deprecation warning with Webpack 5
### Bug Fixes
- ci update to postcss 8.2 ([72302ff](https://github.com/FullHuman/purgecss/commit/72302ffa475a2f74af4211c5a3caa70f2de4abfd))
- safelist option in CLI ([43dbe3c](https://github.com/FullHuman/purgecss/commit/43dbe3c498292a9c1ef2166d8c714275fcb9d62a)), closes [#513](https://github.com/FullHuman/purgecss/issues/513)
# [3.0](https://github.com/FullHuman/purgecss/compare/v2.3.0...v) (2020-09-06)
### Features
- **CLI:** add blocklist option ([3961afb](https://github.com/FullHuman/purgecss/commit/3961afbc6d90eae83fe4862a4498857fa7ba3ff6))
- add blocklist option ([04223f7](https://github.com/FullHuman/purgecss/commit/04223f7fe27f8d818961a53900a7c5293d2322b6))
- add safelist option, replace whitelist
- add safelist keyframes and css variables ([dc59d30](https://github.com/FullHuman/purgecss/commit/dc59d309a4a4be9845c40966a19f9705c42a33a1)), closes [#418](https://github.com/FullHuman/purgecss/issues/418) [#439](https://github.com/FullHuman/purgecss/issues/439)
# [](https://github.com/FullHuman/purgecss/compare/v2.0.1-alpha.0...v) (2019-11-23)
## [2.0.1-alpha.0](https://github.com/FullHuman/purgecss/compare/1.4.0...v2.0.1-alpha.0) (2019-10-08)
### Features
- **postcss-purgecss:** add package ([2b0616f](https://github.com/FullHuman/purgecss/commit/2b0616fb9adc69255171aae53ef22580d131852b))
# [1.4.0](https://github.com/FullHuman/purgecss/compare/v1.3.0...1.4.0) (2019-09-01)
- Merged https://github.com/FullHuman/purgecss/commit/bc9f3b5b9d670832f0d1cca7bc7facfb253fb60b, ensure classes beginning with numbers are properly purged
- Merged https://github.com/FullHuman/purgecss/pull/214, fix font-face processing
- update dependencies
# [1.3.0](https://github.com/FullHuman/purgecss/compare/1.2.0...v1.3.0) (2019-04-20)
- Merged https://github.com/FullHuman/purgecss/pull/183, adding `defaultExtractor` option
- remove ignore comment once purged, issue https://github.com/FullHuman/purgecss/issues/121
# [1.2.0](https://github.com/FullHuman/purgecss/compare/1.1.0...1.2.0) (2019-04-05)
- fix issue https://github.com/FullHuman/purgecss/issues/148, so the default extract is used for any file type that is not specified
- Merged https://github.com/FullHuman/purgecss/pull/167, fixing issue #166
- Merged https://github.com/FullHuman/purgecss/pull/176, fixing invalid json output by the CLI
- Update dependencies
- Update dev dependencies, including babel 7
### Bug Fixes
- **package:** update postcss to version 7.0.0 ([3657c4d](https://github.com/FullHuman/purgecss/commit/3657c4de55be13b3cddec91288b8d3ff2ec5dbc6))
- **package:** update postcss-selector-parser to version 6.0.0 ([8dd2442](https://github.com/FullHuman/purgecss/commit/8dd244216951eebaddf70323bf28298d40b4af3c))
# [1.0.0](https://github.com/FullHuman/purgecss/compare/v0.20.1...1.0.0) (2018-05-22)
- Merge https://github.com/FullHuman/purgecss/pull/81, fixing https://github.com/FullHuman/purgecss/issues/80
- Change default extractor, does not return error for empty file anymore
- Remove legacy option
- Add rejected option https://github.com/FullHuman/purgecss/issues/55
- Add range ignore comment (`purgecss start ignore` and `purgecss end ignore`) https://github.com/FullHuman/purgecss/issues/66
### Reverts
- Revert "adds keepChildren ability from whitelistPatterns Object[]" ([c52c81b](https://github.com/FullHuman/purgecss/commit/c52c81b248ba01ded6e6ac4965871af426821eec))
- Revert "fixes style code" ([2213be6](https://github.com/FullHuman/purgecss/commit/2213be632b4bf6ec28d06c63866fdd4e85c2adfc))
## [0.20.1](https://github.com/FullHuman/purgecss/compare/v0.20.0...v0.20.1) (2018-03-12)
# [0.20.0](https://github.com/FullHuman/purgecss/compare/v0.19.0...v0.20.0) (2018-01-30)
- https://github.com/FullHuman/purgecss/pull/48, fix https://github.com/FullHuman/purgecss/issues/41
- New option `fontFace` to remove unused font-face declaration
- Remove unused vendor-prefixed keyframes rules
- Update dependencies
# [0.18.0](https://github.com/FullHuman/purgecss/compare/v0.16.0...v0.18.0) (2018-01-04)
- Change default extractor regex, fixing https://github.com/FullHuman/purgecss/issues/37
- Update dependencies
- Use files property in package.json: importing only necessary files.
# [0.16.0](https://github.com/FullHuman/purgecss/compare/v0.14.0...v0.16.0) (2017-12-18)
- `keyframes` option set to `false` by default, `keyframes: true` causing issue with bootstrap https://github.com/FullHuman/purgecss/issues/33
- Update dependencies.
# [0.14.0](https://github.com/FullHuman/purgecss/compare/v0.9.0...v0.14.0) (2017-12-07)
- Merge PR https://github.com/FullHuman/purgecss/pull/29 by @jsnanigans: add
`raw` for content option to pass a raw string instead of a filepath.
- Fix incorrect logic that removes attributes selectors.
- Update dependencies.
# [0.9.0](https://github.com/FullHuman/purgecss/compare/v0.8.0...v0.9.0) (2017-11-07)
# [0.8.0](https://github.com/FullHuman/purgecss/compare/v0.4.0...v0.8.0) (2017-10-23)
# [0.4.0](https://github.com/FullHuman/purgecss/compare/v0.3.0...v0.4.0) (2017-07-31)
# [0.3.0](https://github.com/FullHuman/purgecss/compare/v0.2.0...v0.3.0) (2017-07-23)
# 0.2.0 (2017-07-16)
================================================
FILE: CONTRIBUTING.md
================================================
## [Code of Conduct](./.github/CODE_OF_CONDUCT.md)
FullHuman has adopted the Contributor Covenant Code of Conduct for all of its
project. Please read the text so that you understand how to conduct while
contributing to this project.
## Semantic Versioning
Purgecss use [SemVer](http://semver.org/) for versioning.
## Sending a Pull Request
**Before submitting a pull request,** please make sure the following is done:
1. Fork [the repository](https://github.com/FullHuman/purgecss)
and create your branch from `main`.
2. If you've added code that should be tested, add tests!
3. If you've changed APIs, update the documentation.
4. Ensure the test suite passes (`npm test`).
4. Make sure your code lints (`npm run lint`).
### Development Workflow
After cloning Purgecss, run `npm i && npm run bootstrap` to fetch its dependencies. Then, you can run
several commands:
* `npm run build` will build cjs and es module of all PurgeCSS packages in their `lib` folder.
* `npm run lint` checks the code style.
* `npm test` runs the complete test suite.
* `npm test -- --watch` runs an interactive test watcher.
* `npm test <pattern>` runs tests with matching filenames.
* `npm run build` creates the cjs and es module of all Purgecss packages in their `lib` folder.
Make sure that your pull request contains unit tests for any new functionality.
This way we can ensure that we don't break your code in the future.
### License
This project is licensed under the MIT License - see the [LICENSE](LICENSE) file
for details.
================================================
FILE: LICENSE
================================================
MIT License
Copyright (c) 2020 Full Human
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
================================================
FILE: README.md
================================================
# PurgeCSS
[](https://www.npmjs.com/package/purgecss)
<p align="center">
<img src="https://i.imgur.com/UEiUiJ0.png" height="200" width="200" alt="PurgeCSS logo"/>
</p>
## What is PurgeCSS?
When you are building a website, chances are that you are using a css framework like Bootstrap, Materializecss, Foundation, etc... But you will only use a small set of the framework and a lot of unused css styles will be included.
This is where PurgeCSS comes into play. PurgeCSS analyzes your content and your css files. Then it matches the selectors used in your css files with the ones in your content files. It removes unused selectors from your css, resulting in smaller css files.
You can try PurgeCSS online at [purgecss.full-human.com](https://purgecss.full-human.com).
## Sponsors 🥰
[<img src="https://avatars.githubusercontent.com/u/133211198?v=4" height="85" style="margin-right: 10px">](https://www.bairesdev.com/sponsoring-open-source-projects/)
## Documentation
You can find the PurgeCSS documentation on [this website](https://purgecss.com).
### Table of Contents
#### PurgeCSS
- [Configuration](https://purgecss.com/configuration.html)
- [Command Line Interface](https://purgecss.com/CLI.html)
- [Programmatic API](https://purgecss.com/api.html)
- [Safelisting](https://purgecss.com/safelisting.html)
- [Extractors](https://purgecss.com/extractors.html)
- [Comparison](https://purgecss.com/comparison.html)
#### Plugins
- [PostCSS](https://purgecss.com/plugins/postcss.html)
- [Webpack](https://purgecss.com/plugins/webpack.html)
- [Gulp](https://purgecss.com/plugins/gulp.html)
- [Grunt](https://purgecss.com/plugins/grunt.html)
- [Gatsby](https://purgecss.com/plugins/gatsby.html)
#### Guides
- [Vue.js](https://purgecss.com/guides/vue.html)
- [Nuxt.js](https://purgecss.com/guides/nuxt.html)
- [React.js](https://purgecss.com/guides/react.html)
- [Next.js](https://purgecss.com/guides/next.html)
- [Razzle](https://purgecss.com/guides/razzle.html)
- [Hugo](https://purgecss.com/guides/hugo.html)
## Getting Started
#### Installation
```sh
npm install purgecss --save-dev
```
## Usage
```js
import { PurgeCSS } from "purgecss";
const purgeCSSResults = await new PurgeCSS().purge({
content: ["**/*.html"],
css: ["**/*.css"],
});
```
## Packages
This repository is a monorepo that we manage using [Lerna](https://github.com/lerna/lerna). That means that we actually publish [several packages](/packages) to npm from the same codebase, including:
| Package | Version | Description |
| ------------------------------------------------------------ | ------------------------------------------------------------------------------------------- | ------------------------------------------ |
| [purgecss](/packages/purgecss) |  | The core of PurgeCSS |
| [postcss-purgecss](/packages/postcss-purgecss) |  | PostCSS plugin for PurgeCSS |
| [purgecss-webpack-plugin](/packages/purgecss-webpack-plugin) |  | Webpack plugin for PurgeCSS |
| [gulp-purgecss](/packages/gulp-purgecss) |  | Gulp plugin for PurgeCSS |
| [grunt-purgecss](/packages/grunt-purgecss) |  | Grunt plugin for PurgeCSS |
| [rollup-plugin-purgecss](/packages/rollup-plugin-purgecss) |  | Rollup plugin for PurgeCSS |
| [purgecss-from-html](/packages/purgecss-from-html) |  | Html extractor for PurgeCSS |
| [purgecss-from-pug](/packages/purgecss-from-pug) |  | Pug extractor for PurgeCSS |
| [purgecss-with-wordpress](/packages/purgecss-with-wordpress) |  | Collection of safelist items for WordPress |
| [vue-cli-plugin-purgecss](/packages/vue-cli-plugin-purgecss) |  | Vue CLI Plugin for PurgeCSS |
================================================
FILE: SECURITY.md
================================================
# Security Policy
## Supported Versions
This is the list of versions of PurgeCSS which are currently being supported with security updates.
| Version | Supported |
| ------- | ------------------ |
| 5.0.x | :white_check_mark: |
| < 5.0 | :x: |
## Reporting a Vulnerability
To report a vulnerability, please report it directly on GitHub. If you are not able to report it on GitHub,
you can send an email with the details to contact@full-human.com. The vulnerability report must include a
proof-of-concept of the exploit, or at least a few pointers that can help us assess the risk level.
Your report will be acknowledged within 2 business days.
================================================
FILE: docs/.vuepress/client.ts
================================================
import { defineClientConfig } from "@vuepress/client";
export default defineClientConfig({
enhance() {},
setup() {},
rootComponents: [],
});
================================================
FILE: docs/.vuepress/config.ts
================================================
import { defineUserConfig } from "vuepress";
import localTheme from "./theme/index";
import { searchPlugin } from "@vuepress/plugin-search";
import { viteBundler } from "@vuepress/bundler-vite";
import { markdownTabPlugin } from "@vuepress/plugin-markdown-tab";
import { sitemapPlugin } from "@vuepress/plugin-sitemap";
// Sidebar configuration for reuse across locales
const getEnglishSidebar = () => [
{
text: "PurgeCSS",
children: [
{
text: "About PurgeCSS",
link: "/introduction",
},
{
text: "Getting Started",
link: "/getting-started",
},
{
text: "Configuration",
link: "/configuration",
},
{
text: "Command Line Interface",
link: "/CLI",
},
{
text: "Programmatic API",
link: "/api",
},
{
text: "Safelisting",
link: "/safelisting",
},
{
text: "Extractors",
link: "/extractors",
},
],
},
{
text: "Plugins",
children: [
{
text: "PostCSS",
link: "/plugins/postcss",
},
{
text: "Webpack",
link: "/plugins/webpack",
},
{
text: "Gulp",
link: "/plugins/gulp",
},
{
text: "Grunt",
link: "/plugins/grunt",
},
{
text: "Gatsby",
link: "/plugins/gatsby",
},
],
},
{
text: "Guides",
children: [
{
text: "Vue",
link: "/guides/vue",
},
{
text: "React",
link: "/guides/react",
},
{
text: "Next.js",
link: "/guides/next",
},
{
text: "Nuxt.js",
link: "/guides/nuxt",
},
{
text: "Razzle",
link: "/guides/razzle",
},
{
text: "WordPress",
link: "/guides/wordpress",
},
{
text: "Hugo",
link: "/guides/hugo",
},
],
},
{
text: "Comparison",
link: "/comparison",
},
{
text: "Common Questions",
children: [
{
text: "How to use with CSS modules",
link: "/css_modules",
},
{
text: "How to use with Ant Design",
link: "/ant_design",
},
],
},
];
const getFrenchSidebar = () => [
{
text: "PurgeCSS",
children: [
{
text: "À propos de PurgeCSS",
link: "/fr/introduction",
},
{
text: "Démarrage rapide",
link: "/fr/getting-started",
},
{
text: "Configuration",
link: "/fr/configuration",
},
{
text: "Interface en ligne de commande",
link: "/fr/CLI",
},
{
text: "API programmatique",
link: "/fr/api",
},
{
text: "Liste blanche",
link: "/fr/safelisting",
},
{
text: "Extracteurs",
link: "/fr/extractors",
},
],
},
{
text: "Plugins",
children: [
{
text: "PostCSS",
link: "/fr/plugins/postcss",
},
{
text: "Webpack",
link: "/fr/plugins/webpack",
},
{
text: "Gulp",
link: "/fr/plugins/gulp",
},
{
text: "Grunt",
link: "/fr/plugins/grunt",
},
{
text: "Gatsby",
link: "/fr/plugins/gatsby",
},
],
},
{
text: "Guides",
children: [
{
text: "Vue",
link: "/fr/guides/vue",
},
{
text: "React",
link: "/fr/guides/react",
},
{
text: "Next.js",
link: "/fr/guides/next",
},
{
text: "Nuxt.js",
link: "/fr/guides/nuxt",
},
{
text: "Razzle",
link: "/fr/guides/razzle",
},
{
text: "WordPress",
link: "/fr/guides/wordpress",
},
{
text: "Hugo",
link: "/fr/guides/hugo",
},
],
},
{
text: "Comparaison",
link: "/fr/comparison",
},
{
text: "Questions fréquentes",
children: [
{
text: "Utilisation avec les modules CSS",
link: "/fr/css_modules",
},
{
text: "Utilisation avec Ant Design",
link: "/fr/ant_design",
},
],
},
];
export default defineUserConfig({
bundler: viteBundler({
viteOptions: {},
vuePluginOptions: {},
}),
locales: {
"/": {
lang: "en-US",
title: "PurgeCSS",
description: "PurgeCSS is a tool to remove unused CSS from your project",
},
"/fr/": {
lang: "fr-FR",
title: "PurgeCSS",
description:
"PurgeCSS est un outil pour supprimer le CSS inutilisé de votre projet",
},
},
head: [
// Canonical URL
["link", { rel: "canonical", href: "https://purgecss.com" }],
// Open Graph meta tags
["meta", { property: "og:site_name", content: "PurgeCSS" }],
["meta", { property: "og:type", content: "website" }],
[
"meta",
{ property: "og:image", content: "https://purgecss.com/og-image.png" },
],
["meta", { property: "og:image:width", content: "1200" }],
["meta", { property: "og:image:height", content: "630" }],
[
"meta",
{ property: "og:image:alt", content: "PurgeCSS - Remove unused CSS" },
],
// Twitter Card meta tags
["meta", { name: "twitter:card", content: "summary_large_image" }],
["meta", { name: "twitter:site", content: "@paborodulin" }],
[
"meta",
{
name: "twitter:title",
content: "PurgeCSS - Remove unused CSS from your project",
},
],
[
"meta",
{
name: "twitter:description",
content:
"PurgeCSS analyzes your content and CSS files, removing unused selectors for smaller CSS files.",
},
],
[
"meta",
{
name: "twitter:image",
content: "https://purgecss.com/og-image.png",
},
],
// Additional SEO meta tags
["meta", { name: "author", content: "Full Human" }],
[
"meta",
{
name: "keywords",
content:
"purgecss, css, unused css, remove css, optimize css, tailwindcss, postcss, webpack, purge",
},
],
[
"link",
{
rel: "apple-touch-icon",
sizes: "180x180",
href: "/apple-touch-icon.png",
},
],
[
"link",
{
rel: "icon",
type: "image/png",
sizes: "32x32",
href: "/favicon-32x32.png",
},
],
[
"link",
{
rel: "icon",
type: "image/png",
sizes: "16x16",
href: "/favicon-16x16.png",
},
],
[
"link",
{
rel: "manifest",
href: "/site.webmanifest",
},
],
[
"link",
{
rel: "mask-icon",
href: "/safari-pinned-tab.svg",
color: "#000000",
},
],
[
"meta",
{
name: "msapplication-TileColor",
content: "#ffffff",
},
],
[
"meta",
{
name: "theme-color",
content: "#ffffff",
},
],
[
"script",
{
async: true,
src: "https://www.googletagmanager.com/gtag/js?id=G-G2R9DBD8HD",
},
],
[
"script",
{},
`
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-G2R9DBD8HD');
`,
],
],
theme: localTheme({
logo: "/logo.png",
repo: "FullHuman/purgecss",
locales: {
"/": {
selectLanguageName: "English",
selectLanguageText: "Languages",
navbar: [
{
text: "API Reference",
link: "/api-reference/",
},
],
sidebar: {
"/": getEnglishSidebar(),
},
},
"/fr/": {
selectLanguageName: "Français",
selectLanguageText: "Langues",
navbar: [
{
text: "Référence API",
link: "/api-reference/",
},
],
sidebar: {
"/fr/": getFrenchSidebar(),
},
},
},
}),
plugins: [
searchPlugin(),
markdownTabPlugin({
// Enable code tabs
codeTabs: true,
// Enable tabs
tabs: true,
}),
sitemapPlugin({
hostname: "https://purgecss.com",
changefreq: "weekly",
}),
],
});
================================================
FILE: docs/.vuepress/public/browserconfig.xml
================================================
<?xml version="1.0" encoding="utf-8"?>
<browserconfig>
<msapplication>
<tile>
<square150x150logo src="/mstile-150x150.png"/>
<TileColor>#ffffff</TileColor>
</tile>
</msapplication>
</browserconfig>
================================================
FILE: docs/.vuepress/public/robots.txt
================================================
# PurgeCSS Documentation
# https://purgecss.com
User-agent: *
Allow: /
# Sitemap location
Sitemap: https://purgecss.com/sitemap.xml
================================================
FILE: docs/.vuepress/public/site.webmanifest
================================================
{
"name": "PurgeCSS - Remove unused CSS",
"short_name": "PurgeCSS",
"description": "PurgeCSS is a tool to remove unused CSS from your project",
"icons": [
{
"src": "/android-chrome-192x192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "/android-chrome-512x512.png",
"sizes": "512x512",
"type": "image/png"
}
],
"theme_color": "#ffffff",
"background_color": "#ffffff",
"display": "standalone",
"start_url": "/",
"scope": "/"
}
================================================
FILE: docs/.vuepress/styles/index.scss
================================================
// $accentColor = #2b668c
:root {
// brand colors
--c-brand: #2b668c;
--c-brand-light: #2b668c;
// background colors
--c-bg: #ffffff;
--c-bg-light: #f3f4f5;
--c-bg-lighter: #eeeeee;
--c-bg-navbar: var(--c-bg);
--c-bg-sidebar: var(--c-bg);
--c-bg-arrow: #cccccc;
// text colors
--c-text: #2c3e50;
--c-text-accent: var(--c-brand);
--c-text-light: #3a5169;
--c-text-lighter: #4e6e8e;
--c-text-lightest: #6a8bad;
--c-text-quote: #999999;
// border colors
--c-border: #eaecef;
--c-border-dark: #dfe2e5;
// custom container colors
--c-tip: #2b668c;
--c-tip-bg: var(--c-bg-light);
--c-tip-title: var(--c-text);
--c-tip-text: var(--c-text);
--c-tip-text-accent: var(--c-text-accent);
--c-warning: #e7c000;
--c-warning-bg: #fffae3;
--c-warning-title: #ad9000;
--c-warning-text: #746000;
--c-warning-text-accent: var(--c-text);
--c-danger: #cc0000;
--c-danger-bg: #ffe0e0;
--c-danger-title: #990000;
--c-danger-text: #660000;
--c-danger-text-accent: var(--c-text);
--c-details-bg: #eeeeee;
// badge component colors
--c-badge-tip: var(--c-tip);
--c-badge-warning: var(--c-warning);
--c-badge-danger: var(--c-danger);
// transition vars
--t-color: 0.3s ease;
--t-transform: 0.3s ease;
// code blocks vars
--code-bg-color: #282c34;
--code-hl-bg-color: rgba(0, 0, 0, 0.66);
--code-ln-color: #9e9e9e;
--code-ln-wrapper-width: 3.5rem;
// font vars
--font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
--font-family-code: Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace;
// layout vars
--navbar-height: 3.6rem;
--navbar-padding-v: 0.7rem;
--navbar-padding-h: 1.5rem;
--sidebar-width: 20rem;
--sidebar-width-mobile: calc(var(--sidebar-width) * 0.82);
--content-width: 740px;
--homepage-width: 960px;
}
// plugin-back-to-top
.back-to-top {
--back-to-top-color: var(--c-brand);
--back-to-top-color-hover: var(--c-brand-light);
}
// plugin-docsearch
.DocSearch {
--docsearch-primary-color: var(--c-brand);
--docsearch-text-color: var(--c-text);
--docsearch-highlight-color: var(--c-brand);
--docsearch-muted-color: var(--c-text-quote);
--docsearch-container-background: rgba(9, 10, 17, 0.8);
--docsearch-modal-background: var(--c-bg-light);
--docsearch-searchbox-background: var(--c-bg-lighter);
--docsearch-searchbox-focus-background: var(--c-bg);
--docsearch-searchbox-shadow: inset 0 0 0 2px var(--c-brand);
--docsearch-hit-color: var(--c-text-light);
--docsearch-hit-active-color: var(--c-bg);
--docsearch-hit-background: var(--c-bg);
--docsearch-hit-shadow: 0 1px 3px 0 var(--c-border-dark);
--docsearch-footer-background: var(--c-bg);
}
// plugin-external-link-icon
.external-link-icon {
--external-link-icon-color: var(--c-text-quote);
}
// plugin-medium-zoom
.medium-zoom-overlay {
--medium-zoom-bg-color: var(--c-bg);
}
// plugin-nprogress
#nprogress {
--nprogress-color: var(--c-brand);
}
// plugin-pwa-popup
.pwa-popup {
--pwa-popup-text-color: var(--c-text);
--pwa-popup-bg-color: var(--c-bg);
--pwa-popup-border-color: var(--c-brand);
--pwa-popup-shadow: 0 4px 16px var(--c-brand);
--pwa-popup-btn-text-color: var(--c-bg);
--pwa-popup-btn-bg-color: var(--c-brand);
--pwa-popup-btn-hover-bg-color: var(--c-brand-light);
}
// plugin-search
.search-box {
--search-bg-color: var(--c-bg);
--search-accent-color: var(--c-brand);
--search-text-color: var(--c-text);
--search-border-color: var(--c-border);
--search-item-text-color: var(--c-text-lighter);
--search-item-focus-bg-color: var(--c-bg-light);
}
html.dark {
// brand colors
--c-brand: #2b668c;
--c-brand-light: #2b668c;
// background colors
--c-bg: #000000;
--c-bg-light: #2b313a;
--c-bg-lighter: #262c34;
// text colors
--c-text: #adbac7;
--c-text-light: #96a7b7;
--c-text-lighter: #8b9eb0;
--c-text-lightest: #8094a8;
// border colors
--c-border: #3e4c5a;
--c-border-dark: #34404c;
// custom container colors
--c-tip: #2b668c;
--c-warning: #ceab00;
--c-warning-bg: #7e755b;
--c-warning-title: #ceac03;
--c-warning-text: #362e00;
--c-danger: #940000;
--c-danger-bg: #806161;
--c-danger-title: #610000;
--c-danger-text: #3a0000;
--c-details-bg: #323843;
// code blocks vars
--code-hl-bg-color: #363b46;
}
// plugin-docsearch
html.dark .DocSearch {
--docsearch-logo-color: var(--c-text);
--docsearch-modal-shadow: inset 1px 1px 0 0 #2c2e40, 0 3px 8px 0 #000309;
--docsearch-key-shadow: inset 0 -2px 0 0 #282d55, inset 0 0 1px 1px #51577d,
0 2px 2px 0 rgba(3, 4, 9, 0.3);
--docsearch-key-gradient: linear-gradient(-225deg, #444950, #1c1e21);
--docsearch-footer-shadow: inset 0 1px 0 0 rgba(73, 76, 106, 0.5),
0 -4px 8px 0 rgba(0, 0, 0, 0.2);
}
================================================
FILE: docs/.vuepress/theme/client.ts
================================================
import { defineClientConfig } from "@vuepress/client";
import Layout from "./layouts/Layout.vue";
export default defineClientConfig({
layouts: {
Layout,
},
});
================================================
FILE: docs/.vuepress/theme/components/CarbonAds.vue
================================================
<template>
<div class="carbon-ads"></div>
</template>
<script>
export default {
name: 'CarbonAds',
mounted () {
this.load()
},
watch: {
'$route' (to, from) {
if (
to.path !== from.path
// Only reload if the ad has been loaded
// otherwise it's possible that the script is appended but
// the ads are not loaded yet. This would result in duplicated ads.
&& this.$el.querySelector('#carbonads')
) {
this.$el.innerHTML = ''
this.load()
}
}
},
methods: {
load () {
const s = document.createElement('script')
s.id = '_carbonads_js'
s.src = `//cdn.carbonads.com/carbon.js?serve=CE7DKKJJ&placement=wwwpurgecsscom`
this.$el.appendChild(s)
}
}
}
</script>
<style scoped lang="scss">
.carbon-ads {
min-height: 102px;
padding: 1.5rem 1.5rem 0;
margin-bottom: -0.5rem;
font-size: 0.75rem;
}
a {
color: #444;
font-weight: normal;
display: inline;
}
.carbon-img {
float: left;
margin-right: 1rem;
border: 1px solid black;
}
img {
display: block;
}
.carbon-poweredby {
color: #999;
display: block;
margin-top: 0.5em;
}
$MQMobile: 719px !default;
@media (max-width: $MQMobile) {
.carbon-img img {
width: 100px;
height: 77px;
}
}
</style>
================================================
FILE: docs/.vuepress/theme/index.ts
================================================
import { getDirname, path } from "@vuepress/utils";
import { defaultTheme, DefaultThemeOptions } from "@vuepress/theme-default";
const __dirname = getDirname(import.meta.url);
const localTheme = (options: DefaultThemeOptions) => {
return {
name: "vuepress-theme-local",
extends: defaultTheme(options),
// path to the client config of your theme
clientConfigFile: path.resolve(__dirname, "client.ts"),
};
};
export default localTheme;
================================================
FILE: docs/.vuepress/theme/layouts/Layout.vue
================================================
<template>
<Layout>
<template #sidebar-top>
<CarbonAds/>
</template>
</Layout>
</template>
<script setup>
import Layout from '../../../../node_modules/@vuepress/theme-default/lib/client/layouts/Layout.vue'
import CarbonAds from '../components/CarbonAds.vue'
</script>
================================================
FILE: docs/CLI.md
================================================
---
title: CLI
lang: en-US
meta:
- name: description
content: PurgeCSS is a tool for removing CSS that you're not actually using in your project. You can use its command line interface to use it as part of your development workflow.
- itemprop: description
content: PurgeCSS is a tool for removing CSS that you're not actually using in your project. You can use its command line interface to use it as part of your development workflow.
- property: og:url
content: https://purgecss.com/CLI
- property: og:site_name
content: purgecss.com
- property: og:image
content: https://i.imgur.com/UEiUiJ0.png
- property: og:locale
content: en_US
- property: og:title
content: Remove unused CSS - PurgeCSS
- property: og:description
content: PurgeCSS is a tool for removing CSS that you're not actually using in your project. You can use its command line interface to use it as part of your development workflow.
---
# CLI
PurgeCSS is available via a Command Line Interface. You can use the CLI by itself or with a configuration file.
## Installation
You can either install PurgeCSS as a dev dependency and use the CLI with `npx` or you can also install PurgeCSS globally:
```sh
npm i -g purgecss
```
## Usage
To see the available options for the CLI: `purgecss --help`
```text
Usage: purgecss --css <css...> --content <content...> [options]
Remove unused css selectors
Options:
-V, --version output the version number
-con, --content <files...> glob of content files
-css, --css <files...> glob of css files
-c, --config <path> path to the configuration file
-o, --output <path> file path directory to write purged css files to
-font, --font-face option to remove unused font-faces
-keyframes, --keyframes option to remove unused keyframes
-v, --variables option to remove unused variables
-rejected, --rejected option to output rejected selectors
-rejected-css, --rejected-css option to output rejected css
-s, --safelist <list...> list of classes that should not be removed
-b, --blocklist <list...> list of selectors that should be removed
-k, --skippedContentGlobs <list...> list of glob patterns for folders/files that should not be scanned
-p, --preserve-paths preserve folder hierarchy in the output
-h, --help display help for command
```
The options available through the CLI are similar to the ones available with a configuration file. You can also use the CLI with a configuration file.
### --css
```sh
purgecss --css css/app.css css/palette.css --content src/index.html
```
### --content
You can specify content that should be analyzed by PurgeCSS with an array of filenames or [globs](https://github.com/isaacs/node-glob/blob/master/README.md#glob-primer). These files can be HTML, Pug, Blade, etc.
```sh
purgecss --css css/app.css --content src/index.html src/**/*.js
```
### --config
You can use the CLI with a [configuration file](configuration.md). Use `--config` or `-c` with the path to the config file.
```sh
purgecss --config ./purgecss.config.js
```
### --output
By default, the CLI outputs the result in the console. If you wish to return the CSS as files, specify the directory to write the purified CSS files to.
```sh
purgecss --css css/app.css --content src/index.html "src/**/*.js" --output build/css/
```
### --preserve-paths
By default, the CLI flattens the folder hierarchy and outputs all CSS files to the same directory. If you want to preserve the original folder structure in the output, use the `--preserve-paths` flag.
```sh
purgecss --css src/**/*.css --content src/index.html --output build/ --preserve-paths
```
For example, if your CSS files are located at:
- `src/styles/main.css`
- `src/components/button.css`
Without `--preserve-paths`, both files would be written to `build/main.css` and `build/button.css`.
With `--preserve-paths`, the files would be written to:
- `build/src/styles/main.css`
- `build/src/components/button.css`
### --safelist
If you wish to prevent PurgeCSS from removing a specific CSS selector, you can add it to the safelist.
```sh
purgecss --css css/app.css --content src/index.html --safelist classnameToSafelist
```
================================================
FILE: docs/README.md
================================================
---
home: true
title: PurgeCSS - Remove unused CSS
lang: en-US
meta:
- name: description
content: PurgeCSS is a tool to remove unused CSS from your project. It can be used as part of your development workflow. PurgeCSS comes with a JavaScript API, a CLI, and plugins for popular build tools.
- itemprop: description
content: PurgeCSS is a tool to remove unused CSS from your project. It can be used as part of your development workflow. PurgeCSS comes with a JavaScript API, a CLI, and plugins for popular build tools.
- property: og:url
content: https://purgecss.com
- property: og:site_name
content: purgecss.com
- property: og:type
content: website
- property: og:image
content: https://i.imgur.com/UEiUiJ0.png
- property: og:locale
content: en_US
- property: og:title
content: Remove unused CSS - PurgeCSS
- property: og:description
content: PurgeCSS is a tool to remove unused CSS from your project. It can be used as part of your development workflow. PurgeCSS comes with a JavaScript API, a CLI, and plugins for popular build tools.
heroImage: https://i.imgur.com/UEiUiJ0.png
actions:
- text: Get Started
link: /getting-started
type: primary
- text: Introduction
link: /introduction
type: secondary
footer: MIT Licensed | Copyright © 2018-present Full Human LTD
---
## Sponsors 🥰
[<img src="https://avatars.githubusercontent.com/u/133211198?v=4" height="85" style="margin-right: 10px" alt="BairesDev - Sponsor">](https://www.bairesdev.com/sponsoring-open-source-projects/)
[<img src="/full-human.png" height="85" style="margin-right: 10px" alt="Full Human - Sponsor">](https://full-human.health/)
## Table of Contents
### PurgeCSS
- [Configuration](configuration.md)
- [Command Line Interface](CLI.md)
- [Programmatic API](api.md)
- [Safelisting](safelisting.md)
- [Extractors](extractors.md)
- [Comparison](comparison.md)
### Plugins
- [PostCSS](plugins/postcss.md)
- [Webpack](plugins/webpack.md)
- [Gulp](plugins/gulp.md)
- [Grunt](plugins/grunt.md)
- [Gatsby](plugins/gatsby.md)
### Guides
- [Vue.js](guides/vue.md)
- [Nuxt.js](guides/nuxt.md)
- [React.js](guides/react.md)
- [Next.js](guides/next.md)
- [Razzle](guides/razzle.md)
- [WordPress](guides/wordpress.md)
- [Hugo](guides/hugo.md)
### Common Questions
- [How to use with CSS modules?](css_modules.md)
- [How to use with Ant Design?](ant_design.md)
================================================
FILE: docs/ant_design.md
================================================
---
title: Ant Design
lang: en-US
meta:
- name: description
content: PurgeCSS can be used with Ant Design but requires to create a custom CSS extractor.
- itemprop: description
content: PurgeCSS can be used with Ant Design but requires to create a custom CSS extractor.
- property: og:url
content: https://purgecss.com/ant_design
- property: og:site_name
content: purgecss.com
- property: og:image
content: https://i.imgur.com/UEiUiJ0.png
- property: og:locale
content: en_US
- property: og:title
content: Remove unused CSS - PurgeCSS
- property: og:description
content: PurgeCSS can be used with Ant Design but requires to create a custom CSS extractor.
---
# How to use with Ant Design
::: tip
The content of this page comes from [this issue](https://github.com/FullHuman/purgecss/issues/172#issuecomment-637045325).
:::
PurgeCSS works by comparing the selectors in your content files with the ones on your CSS files. When using component libraries with their own CSS, it happens the CSS is removed because the content is not found. You then need to specify where the content can be found.
In the case of ant-design, the list of selectors used in ant-design cannot be retrieve easily from its content.
Below is a way to use PurgeCSS with Ant Design and React.
The project was created with create-react-app. Then, it is using react-app-rewired to extend the configuration.
```js
const glob = require("glob-all");
const paths = require("react-scripts/config/paths");
const { override, addPostcssPlugins } = require("customize-cra");
const purgecss = require("@fullhuman/postcss-purgecss")({
content: [
paths.appHtml,
...glob.sync(`${paths.appSrc}/**/*.js`, { nodir: true }),
...glob.sync(`${paths.appNodeModules}/antd/es/button/**/*.css`, {
nodir: true,
}),
],
extractors: [
{
extractor: (content) => content.match(/([a-zA-Z-]+)(?= {)/g) || [],
extensions: ["css"],
},
],
});
module.exports = override(
addPostcssPlugins([
...(process.env.NODE_ENV === "production" ? [purgecss] : []),
])
);
```
I essentially added a path to the antd css file that I want to keep. in the example below, `button`.
```js
...glob.sync(`${paths.appNodeModules}/antd/es/button/**/*.css`,
```
To keep antd entirely, you could replace by
```js
...glob.sync(`${paths.appNodeModules}/antd/es/**/*.css`,
```
and wrote an extractor for css file that intend to get the selectors from the file:
```js
extractors: [
{
extractor: (content) => content.match(/([a-zA-Z-]+)(?= {)/g) || [],
extensions: ["css"],
},
],
```
================================================
FILE: docs/api.md
================================================
---
title: Programmatic API
lang: en-US
meta:
- name: description
content: PurgeCSS is a tool for removing CSS that you're not actually using in your project. You can use its programmatic API to use it as part of your development workflow.
- itemprop: description
content: PurgeCSS is a tool for removing CSS that you're not actually using in your project. You can use its programmatic API to use it as part of your development workflow.
- property: og:url
content: https://purgecss.com/api
- property: og:site_name
content: purgecss.com
- property: og:image
content: https://i.imgur.com/UEiUiJ0.png
- property: og:locale
content: en_US
- property: og:title
content: Remove unused CSS - PurgeCSS
- property: og:description
content: PurgeCSS is a tool for removing CSS that you're not actually using in your project. You can use its programmatic API to use it as part of your development workflow.
---
# Programmatic API
Start by installing PurgeCSS as a dev dependency.
:::: code-group
::: code-group-item NPM
```sh
npm install purgecss --save-dev
```
:::
::: code-group-item YARN
```sh
yarn add purgecss --dev
```
:::
::::
You can now use PurgeCSS inside a JavaScript file.
In the following examples, the options passed to PurgeCSS are the same as the ones [here](configuration.md). The result `purgecssResult` is an array of an object containing the name of the files with the purged CSS.
## Usage
### ES Module Import Syntax
```js
import { PurgeCSS } from 'purgecss'
const purgeCSSResult = await new PurgeCSS().purge({
content: ['**/*.html'],
css: ['**/*.css']
})
```
### CommonJS Syntax
```js
const { PurgeCSS } = require('purgecss')
const purgeCSSResult = await new PurgeCSS().purge({
content: ['**/*.html'],
css: ['**/*.css']
})
```
The format of purgeCSSResult is
```js
[
{
file: 'main.css',
css: '/* purged css for main.css */'
},
{
file: 'animate.css',
css: '/* purged css for animate.css */'
}
]
```
The type of the result is
```typescript
interface ResultPurge {
css: string;
file?: string;
rejected?: string[];
rejectedCss?: string;
}
```
================================================
FILE: docs/comparison.md
================================================
---
title: Comparison
lang: en-US
meta:
- name: description
content: Comparison between PurgeCSS and similar tools such as UnCSS and PurifyCSS.
- itemprop: description
content: Comparison between PurgeCSS and similar tools such as UnCSS and PurifyCSS.
- property: og:url
content: https://purgecss.com/comparison
- property: og:site_name
content: purgecss.com
- property: og:image
content: https://i.imgur.com/UEiUiJ0.png
- property: og:locale
content: en_US
- property: og:title
content: Remove unused CSS - PurgeCSS
- property: og:description
content: Comparison between PurgeCSS and similar tools such as UnCSS and PurifyCSS.
---
# Comparison
PurgeCSS is not the only tool to remove unused CSS. Below you will find a comparison between PurgeCSS and the other two most used tools to remove unused CSS.
## UnCSS
As indicated in its README, UnCSS works in the following way:
- The HTML files are loaded by jsdom, and JavaScript is executed.
- PostCSS parses all the stylesheets.
document.querySelector filters out selectors that are not found in the HTML files.
- The remaining rules are converted back to CSS.
Because of its HTML emulation and JavaScript execution, UnCSS is effective at removing unused selectors from web applications.
However, its emulation can have a cost in terms of performance and practicality. To remove unused CSS from Pug template files, for example, you would need to convert Pug to HTML and emulate the page inside jsdom. After this step, UnCSS can run document.querySelector on each selector and perform Step 4.
At the moment, UnCSS is probably the most accurate tool to remove unused CSS for a few situations. If you do not use server-side rendering, and you have a simple website with HTML and javascript, it should work correctly and outperform PurgeCSS in terms of CSS size result.
PurgeCSS has an extractor for JavaScript files. The goal is to provide more accurate results, which will make the CSS size result better than UnCSS. Thanks to PurgeCSS modularity, developers can create an extractor for specific frameworks (Vue, React, Aurelia) and file types (pug, ejs). This way, you can get the most accurate results without the need for emulation.
## PurifyCSS
The biggest flaw with PurifyCSS is its lack of modularity. However, this is also its biggest benefit. PurifyCSS can work with any file type, not just HTML or JavaScript.
PurifyCSS works by looking at all of the words in your files and comparing them with the selectors in your CSS. Every word is considered a selector, which means that a lot of selectors can be erroneously find used. For example, you may happen to have a word in a paragraph that matches a selector in your CSS.
PurgeCSS fixes this problem by providing the possibility to create an extractor. An extractor is a function that takes the content of a file and extracts the list of CSS selectors used in it. It allows a perfect removal of unused CSS.
The extractor can be used as a parser that returns an AST (abstract syntax tree) and looks through it to find any CSS selectors. This is the way purge-from-html works.
You can specify which extractors you want to use for each file type, allowing you to get the most accurate results. But using specific extractors is optional, and you can rely on the default one.
================================================
FILE: docs/configuration.md
================================================
---
title: Configuration
lang: en-US
meta:
- name: description
content: PurgeCSS has a list of options that allow you to customize its behavior. Customization can improve the performance and efficiency of PurgeCSS. Details about the configuration of PurgeCSS and options available.
- itemprop: description
content: PurgeCSS has a list of options that allow you to customize its behavior. Customization can improve the performance and efficiency of PurgeCSS. Details about the configuration of PurgeCSS and options available.
- property: og:url
content: https://purgecss.com/configuration
- property: og:site_name
content: purgecss.com
- property: og:image
content: https://i.imgur.com/UEiUiJ0.png
- property: og:locale
content: en_US
- property: og:title
content: Remove unused CSS - PurgeCSS
- property: og:description
content: PurgeCSS has a list of options that allow you to customize its behavior. Customization can improve the performance and efficiency of PurgeCSS. Details about the configuration of PurgeCSS and options available.
---
# Configuration
PurgeCSS has a list of options that allow you to customize its behavior. Customization can improve the performance and efficiency of PurgeCSS. You can create a configuration file with the following options.
## Configuration file
The configuration file is a simple JavaScript file. By default, the JavaScript API will look for `purgecss.config.js`.
```js
module.exports = {
content: ['index.html'],
css: ['style.css']
}
```
You can then use PurgeCSS with the config file:
```js
const purgecss = await new PurgeCSS().purge()
// or use the path to the file as the only parameter
const purgecss = await new PurgeCSS().purge('./purgecss.config.js')
```
## Options
The options are defined by the following types:
```ts
interface UserDefinedOptions {
content: Array<string | RawContent>;
css: Array<string | RawCSS>;
defaultExtractor?: ExtractorFunction;
extractors?: Array<Extractors>;
fontFace?: boolean;
keyframes?: boolean;
output?: string;
rejected?: boolean;
rejectedCss?: boolean;
stdin?: boolean;
stdout?: boolean;
variables?: boolean;
safelist?: UserDefinedSafelist;
blocklist?: StringRegExpArray;
}
interface RawContent {
extension: string
raw: string
}
interface RawCSS {
raw: string
}
type StringRegExpArray = Array<RegExp | string>;
type ComplexSafelist = {
standard?: StringRegExpArray;
deep?: RegExp[];
greedy?: RegExp[];
variables?: StringRegExpArray;
keyframes?: StringRegExpArray;
};
type UserDefinedSafelist = StringRegExpArray | ComplexSafelist;
```
- **content**
You can specify content that should be analyzed by PurgeCSS with an array of filenames or [globs](https://github.com/isaacs/node-glob/blob/master/README.md#glob-primer). The files can be HTML, Pug, Blade, etc.
```js
await new PurgeCSS().purge({
content: ['index.html', '**/*.js', '**/*.html', '**/*.vue'],
css: ['css/app.css']
})
```
PurgeCSS also works with raw content. To do this, you need to pass an object with the `raw` property instead of a filename. To work properly with custom extractors you need to pass the `extension` property along with the raw content.
```js
await new PurgeCSS().purge({
content: [
{
raw: '<html><body><div class="app"></div></body></html>',
extension: 'html'
},
'**/*.js',
'**/*.html',
'**/*.vue'
],
css: [
{
raw: 'body { margin: 0 }'
},
'css/app.css'
]
})
```
- **css**
Similar to `content`, you can specify css that should be processed by PurgeCSS with an array of filenames or [globs](https://github.com/isaacs/node-glob/blob/master/README.md#glob-primer).
```js
await new PurgeCSS().purge({
content: ['index.html', '**/*.js', '**/*.html', '**/*.vue'],
css: ['css/app.css']
})
```
PurgeCSS also works with raw css. To do this, you need to pass an object with the `raw` property instead of a filename.
```js
await new PurgeCSS().purge({
content: [
{
raw: '<html><body><div class="app"></div></body></html>',
extension: 'html'
},
'**/*.js',
'**/*.html',
'**/*.vue'
],
css: [
{
raw: 'body { margin: 0 }'
}
]
})
```
- **defaultExtractor**
PurgeCSS can be adapted to suit your needs. If you notice a lot of unused CSS is not being removed, you might want to use a custom extractor. Extractors can be used based on extensions files. If you want to use the same with every types of files, specify your extractor in `defaultExtractor`.
```js
await new PurgeCSS().purge({
// ...
defaultExtractor: content => content.match(/[\w-/:]+(?<!:)/g) || []
})
```
- **extractors**
PurgeCSS can be adapted to suit your needs. If you notice a lot of unused CSS is not being removed, you might want to use a custom extractor. You can find a list of available extractors, they can provide better accuracy and better optimization but their behavior will be proper to them. Which can make things difficult to reason about.
Consider using extractors as an advanced optimization technique that might not be necessary.
```js
import purgeFromHTML from 'purge-from-html'
await new PurgeCSS().purge({
content: ['index.html', '**/*.js', '**/*.html', '**/*.vue'],
css: ['css/app.css'],
extractors: [
{
extractor: purgeFromHTML,
extensions: ['html']
},
{
extractor: content => content.match(/[\w-/:]+(?<!:)/g) || [],
extensions: ['vue', 'js']
}
]
})
```
You can learn more about extractors [here](extractors.md).
- **fontFace \(default: false\)**
If there are any unused @font-face rules in your css, you can remove them by setting the `fontFace` option to `true`.
```js
await new PurgeCSS().purge({
content: ['index.html', '**/*.js', '**/*.html', '**/*.vue'],
css: ['css/app.css'],
fontFace: true
})
```
- **keyframes \(default: false\)**
If you are using a CSS animation library such as animate.css, you can remove unused keyframes by setting the `keyframes` option to `true`.
PurgeCSS detects used keyframes by scanning `animation` and `animation-name` property values, as well as CSS custom property (variable) values. This means keyframes referenced via CSS variables will be correctly preserved:
```css
.component {
animation: var(--component-animation);
}
.component--animated {
--component-animation: fadeIn 0.4s;
}
@keyframes fadeIn {
/* This keyframe will be preserved because "fadeIn" appears in --component-animation */
}
```
```js
await new PurgeCSS().purge({
content: ['index.html', '**/*.js', '**/*.html', '**/*.vue'],
css: ['css/app.css'],
keyframes: true
})
```
- **variables \(default: false\)**
If you are using Custom Properties (CSS variables), or a library using them such as Bootstrap, you can remove unused CSS variables by setting the `variables` option to `true`.
```js
await new PurgeCSS().purge({
content: ['index.html', '**/*.js', '**/*.html', '**/*.vue'],
css: ['css/app.css'],
variables: true
})
```
- **rejected \(default: false\)**
It can sometimes be more practical to scan through the removed list to see if there's anything obviously wrong. If you want to do it, use the `rejected` option.
```js
await new PurgeCSS().purge({
content: ['index.html', '**/*.js', '**/*.html', '**/*.vue'],
css: ['css/app.css'],
rejected: true
})
```
- **rejectedCss \(default: false\)**
If you would like to keep the discarded CSS you can do so by using the `rejectedCss` option.
```js
await new PurgeCSS().purge({
content: ['index.html', '**/*.js', '**/*.html', '**/*.vue'],
css: ['css/app.css'],
rejectedCss: true
})
```
- **safelist**
You can indicate which selectors are safe to leave in the final CSS. This can be accomplished with the option `safelist`.
Two forms are available for this option.
```js
safelist: ['random', 'yep', 'button', /^nav-/]
```
In this form, safelist is an array that can take a string or a regex.
The _complex_ form is:
```js
safelist: {
standard: ['random', 'yep', 'button', /^nav-/],
deep: [],
greedy: [],
keyframes: [],
variables: []
}
```
e.g:
```js
const purgecss = await new PurgeCSS().purge({
content: [],
css: [],
safelist: ['random', 'yep', 'button']
})
```
In this example, the selectors `.random`, `#yep`, `button` will be left in the final CSS.
```js
const purgecss = await new PurgeCSS().purge({
content: [],
css: [],
safelist: [/red$/]
})
```
In this example, selectors ending with `red` such as `.bg-red` will be left in the final CSS.
- **safelist.deep**
You can safelist selectors and their children based on a regular expression with `safelist.deep`.
```js
const purgecss = await new PurgeCSS().purge({
content: [],
css: [],
safelist: {
deep: [/red$/]
}
})
```
In this example, selectors such as `.bg-red .child-of-bg` will be left in the final CSS, even if `child-of-bg` is not found.
- **safelist.greedy**
Finally, you can safelist whole selectors if any part of that selector matches a regular expression with `safelist.greedy`.
```js
const purgecss = await new PurgeCSS().purge({
content: [],
css: [],
safelist: {
greedy: [/red$/]
}
})
```
In this example, selectors such as `button.bg-red.nonexistent-class` will be left in the final CSS, even if `button` and `nonexistent-class` are not found.
- **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.
```js
blocklist: ['usedClass', /^nav-/]
```
Even if nav-links and usedClass are found by an extractor, they will be removed.
- **skippedContentGlobs**
If you provide globs for the `content` parameter, you can use this option to exclude certain files or folders that would otherwise be scanned. Pass an array of globs matching items that should be excluded. (Note: this option has no effect if `content` is not globs.)
```js
skippedContentGlobs: ['node_modules/**', 'components/**']
```
Here, PurgeCSS will not scan anything in the "node_modules" and "components" folders.
- **dynamicAttributes**
Option to add custom CSS attribute selectors like "aria-selected", "data-selected", ...etc.
```js
dynamicAttributes: ["aria-selected"]
```
================================================
FILE: docs/css_modules.md
================================================
---
title: CSS modules
lang: en-US
meta:
- name: description
content: PurgeCSS can be used with CSS modules by modifying the webpack configuration.
- itemprop: description
content: PurgeCSS can be used with CSS modules by modifying the webpack configuration.
- property: og:url
content: https://purgecss.com/css_modules
- property: og:site_name
content: purgecss.com
- property: og:image
content: https://i.imgur.com/UEiUiJ0.png
- property: og:locale
content: en_US
- property: og:title
content: Remove unused CSS - PurgeCSS
- property: og:description
content: PurgeCSS can be used with CSS modules by modifying the webpack configuration.
---
# How to use with CSS modules
::: tip
The content of this page comes from [this issue](https://github.com/FullHuman/purgecss/issues/163#issuecomment-526607181).
You can refer to the answer by [@goldmont](https://github.com/goldmont) for more details.
:::
PurgeCSS works by comparing the selectors in your content files with the ones on your CSS files. When using CSS modules, the names of your classes are replaced by a hash. For this reason, working with CSS modules and PurgeCSS might not be as straightforward as you would want it to be.
Below is a way to use PurgeCSS with CSS modules and React.
The project was created with create-react-app. Then, it was ejected running `npm run eject`.
```js
const glob = require('glob-all');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const getCSSModuleLocalIdent = require('react-dev-utils/getCSSModuleLocalIdent');
const shouldUseSourceMap = process.env.GENERATE_SOURCEMAP !== 'false';
module.exports = function(webpackEnv) {
const isEnvDevelopment = webpackEnv === 'development';
const isEnvProduction = webpackEnv === 'production';
const shouldUseRelativeAssetPaths = publicPath === './';
const getStyleLoaders = (cssOptions, preProcessor) => {
const loaders = [
isEnvDevelopment && require.resolve('style-loader'),
isEnvProduction && {
loader: MiniCssExtractPlugin.loader,
options: shouldUseRelativeAssetPaths ? { publicPath: '../../' } : {}
},
{
loader: require.resolve('css-loader'),
options: cssOptions
},
{
loader: require.resolve('postcss-loader'),
options: {
ident: 'postcss',
syntax: 'postcss-scss',
plugins: () => [
require('postcss-flexbugs-fixes'),
require('postcss-preset-env')({
autoprefixer: {
flexbox: 'no-2009'
},
stage: 3
}),
require('@fullhuman/postcss-purgecss')({
content: [ paths.appHtml, ...glob.sync(path.join(paths.appSrc, '/**/*.{js,jsx}'), { nodir: true }) ],
}),
require('postcss-normalize')
].filter(Boolean),
sourceMap: isEnvProduction && shouldUseSourceMap
}
}
].filter(Boolean);
if (preProcessor) {
loaders.push({
loader: require.resolve(preProcessor),
options: {
sourceMap: isEnvProduction && shouldUseSourceMap
}
});
}
return loaders;
};
return {
/* {...} */
module: {
rules: [
/* {...} */
{
oneOf: [
/* {...} */
{
test: /\.module\.(scss|sass)$/,
use: getStyleLoaders(
{
importLoaders: 2,
sourceMap: isEnvProduction && shouldUseSourceMap,
modules: true,
getLocalIdent: getCSSModuleLocalIdent
},
'sass-loader'
)
}
/* {...} */
]
}
/* {...} */
]
},
/* {...} */
};
};
```
You can use regular module syntax in your JSX just like this:
```js
// @flow
import styles from './Test.module.scss';
import * as React from 'react';
type Props = {};
type State = {};
export default class Test extends React.Component<Props, State> {
render(): * {
return (
<div className={styles.myCssClass}></div>
);
}
}
```
================================================
FILE: docs/extractors.md
================================================
---
title: Extractors
lang: en-US
meta:
- name: description
content: PurgeCSS relies on extractors to get the list of selector used in a file. There are multiples types of files that can contains selectors such as html files, templating files like pug, or even javascript file.
- itemprop: description
content: PurgeCSS relies on extractors to get the list of selector used in a file. There are multiples types of files that can contains selectors such as html files, templating files like pug, or even javascript file.
- property: og:url
content: https://purgecss.com/extractors
- property: og:site_name
content: purgecss.com
- property: og:image
content: https://i.imgur.com/UEiUiJ0.png
- property: og:locale
content: en_US
- property: og:title
content: Remove unused CSS - PurgeCSS
- property: og:description
content: PurgeCSS relies on extractors to get the list of selector used in a file. There are multiples types of files that can contains selectors such as html files, templating files like pug, or even javascript file.
---
# Extractors
PurgeCSS can be adapted to suit your need. If you notice a lot of unused css is not being removed, you might want to use a specific extractor.
PurgeCSS relies on extractors to get the list of selector used in a file. There are multiples types of files that can contains selectors such as html files, templating files like pug, or even javascript file.
## Default extractor
PurgeCSS provides a default extractor that is working with all types of files but can be limited and not fit exactly the type of files or css framework that you are using.
The default extractor considers every word of a file as a selector. The default extractor has a few limitations:
- Does not consider special characters such as `@`, `:`, `/`
## Using an extractor
Using an extractor can be useful if you notice that PurgeCSS does not remove enough unused css or removes used ones.
Using a specific extractor for an extension should provide you with the best accuracy. If you want to purge exclusively html files you might want to consider the `purgecss-from-html` extractor.
You can use an extractor by settings the extractors option in the PurgeCSS config file.
```js
import { purgeCSSFromPug } from "purgecss-from-pug";
import { purgeCSSFromHtml } from "purgecss-from-html";
const options = {
content: [], // files to extract the selectors from
css: [], // css
extractors: [
{
extractor: purgeCSSFromPug,
extensions: ["pug"],
},
{
extractor: purgeCSSFromHtml,
extensions: ["html"],
},
],
};
export default options;
```
## Creating an extractor
An extractor is a simple function that takes the content of a file as a string and returns an array of selectors. By convention, the name of the npm package is `purgecss-from-[typefile]` \(e.g. purgecss-from-pug\). Using this convention will allow users to look at the list of extractor on npm by searching `purgecss-from`.
The function can returns either an array of selectors (tags, classes, ids) or the object below for better accuracy:
```ts
interface ExtractorResultDetailed {
attributes: {
names: string[];
values: string[];
};
classes: string[];
ids: string[];
tags: string[];
undetermined: string[];
}
```
```js
const purgeFromJs = (content) => {
// return array of css selectors
};
```
## List of available extractors (in progress)
::: warning
Those extractors are still a work in progress.
It is not encouraged to use them in production yet.
:::
- [purgecss-from-html](https://github.com/FullHuman/purgecss/blob/main/packages/purgecss-from-html): HTML files (.html)
- [purgecss-from-jsx](https://github.com/FullHuman/purgecss/blob/main/packages/purgecss-from-jsx): JSX files
- [purgecss-from-pug](https://github.com/FullHuman/purgecss/blob/main/packages/purgecss-from-pug): Pug files (.pug)
================================================
FILE: docs/fr/CLI.md
================================================
---
title: CLI
lang: fr-FR
meta:
- name: description
content: PurgeCSS est un outil pour supprimer le CSS que vous n'utilisez pas réellement dans votre projet. Vous pouvez utiliser son interface en ligne de commande dans votre flux de travail de développement.
- itemprop: description
content: PurgeCSS est un outil pour supprimer le CSS que vous n'utilisez pas réellement dans votre projet. Vous pouvez utiliser son interface en ligne de commande dans votre flux de travail de développement.
- property: og:url
content: https://purgecss.com/fr/CLI
- property: og:site_name
content: purgecss.com
- property: og:image
content: https://i.imgur.com/UEiUiJ0.png
- property: og:locale
content: fr_FR
- property: og:title
content: Supprimer le CSS inutilisé - PurgeCSS
- property: og:description
content: PurgeCSS est un outil pour supprimer le CSS que vous n'utilisez pas réellement dans votre projet. Vous pouvez utiliser son interface en ligne de commande dans votre flux de travail de développement.
---
# CLI
PurgeCSS est disponible via une interface en ligne de commande (CLI). Vous pouvez utiliser le CLI seul ou avec un fichier de configuration.
## Installation
Vous pouvez soit installer PurgeCSS comme dépendance de développement et utiliser le CLI avec `npx`, soit installer PurgeCSS globalement :
```sh
npm i -g purgecss
```
## Utilisation
Pour voir les options disponibles pour le CLI : `purgecss --help`
```text
Usage: purgecss --css <css...> --content <content...> [options]
Remove unused css selectors
Options:
-V, --version output the version number
-con, --content <files...> glob of content files
-css, --css <files...> glob of css files
-c, --config <path> path to the configuration file
-o, --output <path> file path directory to write purged css files to
-font, --font-face option to remove unused font-faces
-keyframes, --keyframes option to remove unused keyframes
-v, --variables option to remove unused variables
-rejected, --rejected option to output rejected selectors
-rejected-css, --rejected-css option to output rejected css
-s, --safelist <list...> list of classes that should not be removed
-b, --blocklist <list...> list of selectors that should be removed
-k, --skippedContentGlobs <list...> list of glob patterns for folders/files that should not be scanned
-p, --preserve-paths preserve folder hierarchy in the output
-h, --help display help for command
```
Les options disponibles via le CLI sont similaires à celles disponibles avec un fichier de configuration. Vous pouvez également utiliser le CLI avec un fichier de configuration.
### --css
```sh
purgecss --css css/app.css css/palette.css --content src/index.html
```
### --content
Vous pouvez spécifier le contenu qui doit être analysé par PurgeCSS avec un tableau de noms de fichiers ou de [globs](https://github.com/isaacs/node-glob/blob/master/README.md#glob-primer). Ces fichiers peuvent être HTML, Pug, Blade, etc.
```sh
purgecss --css css/app.css --content src/index.html src/**/*.js
```
### --config
Vous pouvez utiliser le CLI avec un [fichier de configuration](configuration.md). Utilisez `--config` ou `-c` avec le chemin vers le fichier de configuration.
```sh
purgecss --config ./purgecss.config.js
```
### --output
Par défaut, le CLI affiche le résultat dans la console. Si vous souhaitez retourner le CSS sous forme de fichiers, spécifiez le répertoire dans lequel écrire les fichiers CSS purifiés.
```sh
purgecss --css css/app.css --content src/index.html "src/**/*.js" --output build/css/
```
### --preserve-paths
Par défaut, le CLI aplatit la hiérarchie des dossiers et génère tous les fichiers CSS dans le même répertoire. Si vous souhaitez préserver la structure de dossiers originale dans la sortie, utilisez le flag `--preserve-paths`.
```sh
purgecss --css src/**/*.css --content src/index.html --output build/ --preserve-paths
```
Par exemple, si vos fichiers CSS sont situés à :
- `src/styles/main.css`
- `src/components/button.css`
Sans `--preserve-paths`, les deux fichiers seraient écrits dans `build/main.css` et `build/button.css`.
Avec `--preserve-paths`, les fichiers seraient écrits dans :
- `build/src/styles/main.css`
- `build/src/components/button.css`
### --safelist
Si vous souhaitez empêcher PurgeCSS de supprimer un sélecteur CSS spécifique, vous pouvez l'ajouter à la safelist.
```sh
purgecss --css css/app.css --content src/index.html --safelist classnameToSafelist
```
================================================
FILE: docs/fr/README.md
================================================
---
home: true
title: PurgeCSS - Supprimer le CSS inutilisé
lang: fr-FR
meta:
- name: description
content: PurgeCSS est un outil pour supprimer le CSS inutilisé de votre projet. Il peut être utilisé dans votre flux de développement. PurgeCSS est disponible avec une API JavaScript, un CLI, et des plugins pour les outils de build populaires.
- itemprop: description
content: PurgeCSS est un outil pour supprimer le CSS inutilisé de votre projet. Il peut être utilisé dans votre flux de développement. PurgeCSS est disponible avec une API JavaScript, un CLI, et des plugins pour les outils de build populaires.
- property: og:url
content: https://purgecss.com
- property: og:site_name
content: purgecss.com
- property: og:type
content: website
- property: og:image
content: https://i.imgur.com/UEiUiJ0.png
- property: og:locale
content: fr_FR
- property: og:title
content: Supprimer le CSS inutilisé - PurgeCSS
- property: og:description
content: PurgeCSS est un outil pour supprimer le CSS inutilisé de votre projet. Il peut être utilisé dans votre flux de développement. PurgeCSS est disponible avec une API JavaScript, un CLI, et des plugins pour les outils de build populaires.
heroImage: https://i.imgur.com/UEiUiJ0.png
actions:
- text: Commencer
link: /fr/getting-started
type: primary
- text: Introduction
link: /fr/introduction
type: secondary
footer: Licence MIT | Copyright © 2018-présent Full Human LTD
---
## Sponsors 🥰
[<img src="https://avatars.githubusercontent.com/u/133211198?v=4" height="85" style="margin-right: 10px" alt="BairesDev - Sponsor">](https://www.bairesdev.com/sponsoring-open-source-projects/)
[<img src="/full-human.png" height="85" style="margin-right: 10px" alt="Full Human - Sponsor">](https://full-human.health/)
## Table des matières
### PurgeCSS
- [Configuration](configuration.md)
- [Interface en ligne de commande](CLI.md)
- [API programmatique](api.md)
- [Liste de sauvegarde](safelisting.md)
- [Extracteurs](extractors.md)
- [Comparaison](comparison.md)
### Plugins
- [PostCSS](plugins/postcss.md)
- [Webpack](plugins/webpack.md)
- [Gulp](plugins/gulp.md)
- [Grunt](plugins/grunt.md)
- [Gatsby](plugins/gatsby.md)
### Guides
- [Vue.js](guides/vue.md)
- [Nuxt.js](guides/nuxt.md)
- [React.js](guides/react.md)
- [Next.js](guides/next.md)
- [Razzle](guides/razzle.md)
- [WordPress](guides/wordpress.md)
- [Hugo](guides/hugo.md)
### Questions fréquentes
- [Comment utiliser avec les modules CSS ?](css_modules.md)
- [Comment utiliser avec Ant Design ?](ant_design.md)
================================================
FILE: docs/fr/ant_design.md
================================================
---
title: Ant Design
lang: fr-FR
meta:
- name: description
content: PurgeCSS peut être utilisé avec Ant Design mais nécessite de créer un extracteur CSS personnalisé.
- itemprop: description
content: PurgeCSS peut être utilisé avec Ant Design mais nécessite de créer un extracteur CSS personnalisé.
- property: og:url
content: https://purgecss.com/fr/ant_design
- property: og:site_name
content: purgecss.com
- property: og:image
content: https://i.imgur.com/UEiUiJ0.png
- property: og:locale
content: fr_FR
- property: og:title
content: Supprimer le CSS inutilisé - PurgeCSS
- property: og:description
content: PurgeCSS peut être utilisé avec Ant Design mais nécessite de créer un extracteur CSS personnalisé.
---
# Comment utiliser avec Ant Design
::: tip
Le contenu de cette page provient de [cette issue](https://github.com/FullHuman/purgecss/issues/172#issuecomment-637045325).
:::
PurgeCSS fonctionne en comparant les sélecteurs de vos fichiers de contenu avec ceux de vos fichiers CSS. Lors de l'utilisation de bibliothèques de composants avec leur propre CSS, il arrive que le CSS soit supprimé car le contenu n'est pas trouvé. Vous devez alors spécifier où le contenu peut être trouvé.
Dans le cas d'ant-design, la liste des sélecteurs utilisés dans ant-design ne peut pas être facilement récupérée à partir de son contenu.
Voici une façon d'utiliser PurgeCSS avec Ant Design et React.
Le projet a été créé avec create-react-app. Ensuite, il utilise react-app-rewired pour étendre la configuration.
```js
const glob = require("glob-all");
const paths = require("react-scripts/config/paths");
const { override, addPostcssPlugins } = require("customize-cra");
const purgecss = require("@fullhuman/postcss-purgecss")({
content: [
paths.appHtml,
...glob.sync(`${paths.appSrc}/**/*.js`, { nodir: true }),
...glob.sync(`${paths.appNodeModules}/antd/es/button/**/*.css`, {
nodir: true,
}),
],
extractors: [
{
extractor: (content) => content.match(/([a-zA-Z-]+)(?= {)/g) || [],
extensions: ["css"],
},
],
});
module.exports = override(
addPostcssPlugins([
...(process.env.NODE_ENV === "production" ? [purgecss] : []),
])
);
```
J'ai essentiellement ajouté un chemin vers le fichier CSS d'antd que je veux conserver. Dans l'exemple ci-dessous, `button`.
```js
...glob.sync(`${paths.appNodeModules}/antd/es/button/**/*.css`,
```
Pour conserver antd entièrement, vous pouvez remplacer par
```js
...glob.sync(`${paths.appNodeModules}/antd/es/**/*.css`,
```
et j'ai écrit un extracteur pour les fichiers CSS qui a pour but de récupérer les sélecteurs depuis le fichier :
```js
extractors: [
{
extractor: (content) => content.match(/([a-zA-Z-]+)(?= {)/g) || [],
extensions: ["css"],
},
],
```
================================================
FILE: docs/fr/api.md
================================================
---
title: API Programmatique
lang: fr-FR
meta:
- name: description
content: PurgeCSS est un outil pour supprimer le CSS que vous n'utilisez pas réellement dans votre projet. Vous pouvez utiliser son API programmatique dans votre flux de travail de développement.
- itemprop: description
content: PurgeCSS est un outil pour supprimer le CSS que vous n'utilisez pas réellement dans votre projet. Vous pouvez utiliser son API programmatique dans votre flux de travail de développement.
- property: og:url
content: https://purgecss.com/fr/api
- property: og:site_name
content: purgecss.com
- property: og:image
content: https://i.imgur.com/UEiUiJ0.png
- property: og:locale
content: fr_FR
- property: og:title
content: Supprimer le CSS inutilisé - PurgeCSS
- property: og:description
content: PurgeCSS est un outil pour supprimer le CSS que vous n'utilisez pas réellement dans votre projet. Vous pouvez utiliser son API programmatique dans votre flux de travail de développement.
---
# API Programmatique
Commencez par installer PurgeCSS comme dépendance de développement.
:::: code-group
::: code-group-item NPM
```sh
npm install purgecss --save-dev
```
:::
::: code-group-item YARN
```sh
yarn add purgecss --dev
```
:::
::::
Vous pouvez maintenant utiliser PurgeCSS dans un fichier JavaScript.
Dans les exemples suivants, les options passées à PurgeCSS sont les mêmes que celles décrites [ici](configuration.md). Le résultat `purgecssResult` est un tableau d'objets contenant le nom des fichiers avec le CSS purgé.
## Utilisation
### Syntaxe d'import ES Module
```js
import { PurgeCSS } from 'purgecss'
const purgeCSSResult = await new PurgeCSS().purge({
content: ['**/*.html'],
css: ['**/*.css']
})
```
### Syntaxe CommonJS
```js
const { PurgeCSS } = require('purgecss')
const purgeCSSResult = await new PurgeCSS().purge({
content: ['**/*.html'],
css: ['**/*.css']
})
```
Le format de purgeCSSResult est
```js
[
{
file: 'main.css',
css: '/* css purgé pour main.css */'
},
{
file: 'animate.css',
css: '/* css purgé pour animate.css */'
}
]
```
Le type du résultat est
```typescript
interface ResultPurge {
css: string;
file?: string;
rejected?: string[];
rejectedCss?: string;
}
```
================================================
FILE: docs/fr/comparison.md
================================================
---
title: Comparaison
lang: fr-FR
meta:
- name: description
content: Comparaison entre PurgeCSS et des outils similaires tels que UnCSS et PurifyCSS.
- itemprop: description
content: Comparaison entre PurgeCSS et des outils similaires tels que UnCSS et PurifyCSS.
- property: og:url
content: https://purgecss.com/fr/comparison
- property: og:site_name
content: purgecss.com
- property: og:image
content: https://i.imgur.com/UEiUiJ0.png
- property: og:locale
content: fr_FR
- property: og:title
content: Supprimer le CSS inutilisé - PurgeCSS
- property: og:description
content: Comparaison entre PurgeCSS et des outils similaires tels que UnCSS et PurifyCSS.
---
# Comparaison
PurgeCSS n'est pas le seul outil permettant de supprimer le CSS inutilisé. Vous trouverez ci-dessous une comparaison entre PurgeCSS et les deux autres outils les plus utilisés pour supprimer le CSS inutilisé.
## UnCSS
Comme indiqué dans son README, UnCSS fonctionne de la manière suivante :
- Les fichiers HTML sont chargés par jsdom, et le JavaScript est exécuté.
- PostCSS analyse toutes les feuilles de style.
document.querySelector filtre les sélecteurs qui ne sont pas trouvés dans les fichiers HTML.
- Les règles restantes sont reconverties en CSS.
Grâce à son émulation HTML et à l'exécution JavaScript, UnCSS est efficace pour supprimer les sélecteurs inutilisés des applications web.
Cependant, son émulation peut avoir un coût en termes de performance et de praticité. Pour supprimer le CSS inutilisé des fichiers de templates Pug, par exemple, vous devriez convertir le Pug en HTML et émuler la page dans jsdom. Après cette étape, UnCSS peut exécuter document.querySelector sur chaque sélecteur et effectuer l'étape 4.
À l'heure actuelle, UnCSS est probablement l'outil le plus précis pour supprimer le CSS inutilisé dans certaines situations. Si vous n'utilisez pas le rendu côté serveur et que vous avez un site web simple avec HTML et JavaScript, il devrait fonctionner correctement et surpasser PurgeCSS en termes de taille de CSS résultant.
PurgeCSS dispose d'un extractor pour les fichiers JavaScript. L'objectif est de fournir des résultats plus précis, ce qui permettra d'obtenir une taille de CSS inférieure à celle d'UnCSS. Grâce à la modularité de PurgeCSS, les développeurs peuvent créer un extractor pour des frameworks spécifiques (Vue, React, Aurelia) et des types de fichiers (pug, ejs). Ainsi, vous pouvez obtenir les résultats les plus précis sans avoir besoin d'émulation.
## PurifyCSS
La plus grande faiblesse de PurifyCSS est son manque de modularité. Cependant, c'est aussi son plus grand avantage. PurifyCSS peut fonctionner avec n'importe quel type de fichier, pas seulement HTML ou JavaScript.
PurifyCSS fonctionne en examinant tous les mots dans vos fichiers et en les comparant aux sélecteurs de votre CSS. Chaque mot est considéré comme un sélecteur, ce qui signifie que de nombreux sélecteurs peuvent être trouvés utilisés par erreur. Par exemple, vous pourriez avoir un mot dans un paragraphe qui correspond à un sélecteur dans votre CSS.
PurgeCSS résout ce problème en offrant la possibilité de créer un extractor. Un extractor est une fonction qui prend le contenu d'un fichier et en extrait la liste des sélecteurs CSS utilisés. Cela permet une suppression parfaite du CSS inutilisé.
L'extractor peut être utilisé comme un analyseur qui retourne un AST (arbre syntaxique abstrait) et le parcourt pour trouver tous les sélecteurs CSS. C'est ainsi que fonctionne purge-from-html.
Vous pouvez spécifier quels extractors vous souhaitez utiliser pour chaque type de fichier, ce qui vous permet d'obtenir les résultats les plus précis. Mais l'utilisation d'extractors spécifiques est optionnelle, et vous pouvez vous appuyer sur celui par défaut.
================================================
FILE: docs/fr/configuration.md
================================================
---
title: Configuration
lang: fr-FR
meta:
- name: description
content: PurgeCSS dispose d'une liste d'options qui vous permettent de personnaliser son comportement. La personnalisation peut améliorer les performances et l'efficacité de PurgeCSS. Détails sur la configuration de PurgeCSS et les options disponibles.
- itemprop: description
content: PurgeCSS dispose d'une liste d'options qui vous permettent de personnaliser son comportement. La personnalisation peut améliorer les performances et l'efficacité de PurgeCSS. Détails sur la configuration de PurgeCSS et les options disponibles.
- property: og:url
content: https://purgecss.com/fr/configuration
- property: og:site_name
content: purgecss.com
- property: og:image
content: https://i.imgur.com/UEiUiJ0.png
- property: og:locale
content: fr_FR
- property: og:title
content: Supprimer le CSS inutilisé - PurgeCSS
- property: og:description
content: PurgeCSS dispose d'une liste d'options qui vous permettent de personnaliser son comportement. La personnalisation peut améliorer les performances et l'efficacité de PurgeCSS. Détails sur la configuration de PurgeCSS et les options disponibles.
---
# Configuration
PurgeCSS dispose d'une liste d'options qui vous permettent de personnaliser son comportement. La personnalisation peut améliorer les performances et l'efficacité de PurgeCSS. Vous pouvez créer un fichier de configuration avec les options suivantes.
## Fichier de configuration
Le fichier de configuration est un simple fichier JavaScript. Par défaut, l'API JavaScript recherchera `purgecss.config.js`.
```js
module.exports = {
content: ['index.html'],
css: ['style.css']
}
```
Vous pouvez ensuite utiliser PurgeCSS avec le fichier de configuration :
```js
const purgecss = await new PurgeCSS().purge()
// ou utiliser le chemin vers le fichier comme seul paramètre
const purgecss = await new PurgeCSS().purge('./purgecss.config.js')
```
## Options
Les options sont définies par les types suivants :
```ts
interface UserDefinedOptions {
content: Array<string | RawContent>;
css: Array<string | RawCSS>;
defaultExtractor?: ExtractorFunction;
extractors?: Array<Extractors>;
fontFace?: boolean;
keyframes?: boolean;
output?: string;
rejected?: boolean;
rejectedCss?: boolean;
stdin?: boolean;
stdout?: boolean;
variables?: boolean;
safelist?: UserDefinedSafelist;
blocklist?: StringRegExpArray;
}
interface RawContent {
extension: string
raw: string
}
interface RawCSS {
raw: string
}
type StringRegExpArray = Array<RegExp | string>;
type ComplexSafelist = {
standard?: StringRegExpArray;
deep?: RegExp[];
greedy?: RegExp[];
variables?: StringRegExpArray;
keyframes?: StringRegExpArray;
};
type UserDefinedSafelist = StringRegExpArray | ComplexSafelist;
```
- **content**
Vous pouvez spécifier le contenu qui doit être analysé par PurgeCSS avec un tableau de noms de fichiers ou de [globs](https://github.com/isaacs/node-glob/blob/master/README.md#glob-primer). Les fichiers peuvent être HTML, Pug, Blade, etc.
```js
await new PurgeCSS().purge({
content: ['index.html', '**/*.js', '**/*.html', '**/*.vue'],
css: ['css/app.css']
})
```
PurgeCSS fonctionne également avec du contenu brut. Pour ce faire, vous devez passer un objet avec la propriété `raw` au lieu d'un nom de fichier. Pour fonctionner correctement avec des extracteurs personnalisés, vous devez passer la propriété `extension` avec le contenu brut.
```js
await new PurgeCSS().purge({
content: [
{
raw: '<html><body><div class="app"></div></body></html>',
extension: 'html'
},
'**/*.js',
'**/*.html',
'**/*.vue'
],
css: [
{
raw: 'body { margin: 0 }'
},
'css/app.css'
]
})
```
- **css**
Similaire à `content`, vous pouvez spécifier le CSS qui doit être traité par PurgeCSS avec un tableau de noms de fichiers ou de [globs](https://github.com/isaacs/node-glob/blob/master/README.md#glob-primer).
```js
await new PurgeCSS().purge({
content: ['index.html', '**/*.js', '**/*.html', '**/*.vue'],
css: ['css/app.css']
})
```
PurgeCSS fonctionne également avec du CSS brut. Pour ce faire, vous devez passer un objet avec la propriété `raw` au lieu d'un nom de fichier.
```js
await new PurgeCSS().purge({
content: [
{
raw: '<html><body><div class="app"></div></body></html>',
extension: 'html'
},
'**/*.js',
'**/*.html',
'**/*.vue'
],
css: [
{
raw: 'body { margin: 0 }'
}
]
})
```
- **defaultExtractor**
PurgeCSS peut être adapté à vos besoins. Si vous remarquez que beaucoup de CSS inutilisé n'est pas supprimé, vous pouvez utiliser un extracteur personnalisé. Les extracteurs peuvent être utilisés en fonction des extensions de fichiers. Si vous souhaitez utiliser le même extracteur pour tous les types de fichiers, spécifiez votre extracteur dans `defaultExtractor`.
```js
await new PurgeCSS().purge({
// ...
defaultExtractor: content => content.match(/[\w-/:]+(?<!:)/g) || []
})
```
- **extractors**
PurgeCSS peut être adapté à vos besoins. Si vous remarquez que beaucoup de CSS inutilisé n'est pas supprimé, vous pouvez utiliser un extracteur personnalisé. Vous pouvez trouver une liste d'extracteurs disponibles, ils peuvent fournir une meilleure précision et une meilleure optimisation, mais leur comportement leur est propre. Ce qui peut rendre les choses difficiles à comprendre.
Considérez l'utilisation des extracteurs comme une technique d'optimisation avancée qui n'est pas forcément nécessaire.
```js
import purgeFromHTML from 'purge-from-html'
await new PurgeCSS().purge({
content: ['index.html', '**/*.js', '**/*.html', '**/*.vue'],
css: ['css/app.css'],
extractors: [
{
extractor: purgeFromHTML,
extensions: ['html']
},
{
extractor: content => content.match(/[\w-/:]+(?<!:)/g) || [],
extensions: ['vue', 'js']
}
]
})
```
Vous pouvez en apprendre plus sur les extracteurs [ici](extractors.md).
- **fontFace \(par défaut : false\)**
S'il y a des règles @font-face inutilisées dans votre CSS, vous pouvez les supprimer en définissant l'option `fontFace` à `true`.
```js
await new PurgeCSS().purge({
content: ['index.html', '**/*.js', '**/*.html', '**/*.vue'],
css: ['css/app.css'],
fontFace: true
})
```
- **keyframes \(par défaut : false\)**
Si vous utilisez une bibliothèque d'animations CSS telle que animate.css, vous pouvez supprimer les keyframes inutilisés en définissant l'option `keyframes` à `true`.
PurgeCSS détecte les keyframes utilisés en analysant les valeurs des propriétés `animation` et `animation-name`, ainsi que les valeurs des propriétés personnalisées CSS (variables). Cela signifie que les keyframes référencés via des variables CSS seront correctement préservés :
```css
.component {
animation: var(--component-animation);
}
.component--animated {
--component-animation: fadeIn 0.4s;
}
@keyframes fadeIn {
/* Ce keyframe sera préservé car "fadeIn" apparaît dans --component-animation */
}
```
```js
await new PurgeCSS().purge({
content: ['index.html', '**/*.js', '**/*.html', '**/*.vue'],
css: ['css/app.css'],
keyframes: true
})
```
- **variables \(par défaut : false\)**
Si vous utilisez des propriétés personnalisées (variables CSS), ou une bibliothèque qui les utilise comme Bootstrap, vous pouvez supprimer les variables CSS inutilisées en définissant l'option `variables` à `true`.
```js
await new PurgeCSS().purge({
content: ['index.html', '**/*.js', '**/*.html', '**/*.vue'],
css: ['css/app.css'],
variables: true
})
```
- **rejected \(par défaut : false\)**
Il peut parfois être plus pratique de parcourir la liste des éléments supprimés pour voir s'il y a quelque chose d'évidemment incorrect. Si vous voulez le faire, utilisez l'option `rejected`.
```js
await new PurgeCSS().purge({
content: ['index.html', '**/*.js', '**/*.html', '**/*.vue'],
css: ['css/app.css'],
rejected: true
})
```
- **rejectedCss \(par défaut : false\)**
Si vous souhaitez conserver le CSS supprimé, vous pouvez le faire en utilisant l'option `rejectedCss`.
```js
await new PurgeCSS().purge({
content: ['index.html', '**/*.js', '**/*.html', '**/*.vue'],
css: ['css/app.css'],
rejectedCss: true
})
```
- **safelist**
Vous pouvez indiquer quels sélecteurs peuvent être laissés en toute sécurité dans le CSS final. Cela peut être accompli avec l'option `safelist`.
Deux formes sont disponibles pour cette option.
```js
safelist: ['random', 'yep', 'button', /^nav-/]
```
Sous cette forme, safelist est un tableau qui peut contenir une chaîne de caractères ou une expression régulière.
La forme _complexe_ est :
```js
safelist: {
standard: ['random', 'yep', 'button', /^nav-/],
deep: [],
greedy: [],
keyframes: [],
variables: []
}
```
Exemple :
```js
const purgecss = await new PurgeCSS().purge({
content: [],
css: [],
safelist: ['random', 'yep', 'button']
})
```
Dans cet exemple, les sélecteurs `.random`, `#yep`, `button` seront laissés dans le CSS final.
```js
const purgecss = await new PurgeCSS().purge({
content: [],
css: [],
safelist: [/red$/]
})
```
Dans cet exemple, les sélecteurs se terminant par `red` comme `.bg-red` seront laissés dans le CSS final.
- **safelist.deep**
Vous pouvez mettre en safelist des sélecteurs et leurs enfants basés sur une expression régulière avec `safelist.deep`.
```js
const purgecss = await new PurgeCSS().purge({
content: [],
css: [],
safelist: {
deep: [/red$/]
}
})
```
Dans cet exemple, les sélecteurs tels que `.bg-red .child-of-bg` seront laissés dans le CSS final, même si `child-of-bg` n'est pas trouvé.
- **safelist.greedy**
Enfin, vous pouvez mettre en safelist des sélecteurs entiers si une partie de ce sélecteur correspond à une expression régulière avec `safelist.greedy`.
```js
const purgecss = await new PurgeCSS().purge({
content: [],
css: [],
safelist: {
greedy: [/red$/]
}
})
```
Dans cet exemple, les sélecteurs tels que `button.bg-red.nonexistent-class` seront laissés dans le CSS final, même si `button` et `nonexistent-class` ne sont pas trouvés.
- **blocklist**
La blocklist bloquera les sélecteurs CSS pour qu'ils n'apparaissent pas dans le CSS final. Les sélecteurs seront supprimés même s'ils sont considérés comme utilisés par PurgeCSS.
```js
blocklist: ['usedClass', /^nav-/]
```
Même si nav-links et usedClass sont trouvés par un extracteur, ils seront supprimés.
- **skippedContentGlobs**
Si vous fournissez des globs pour le paramètre `content`, vous pouvez utiliser cette option pour exclure certains fichiers ou dossiers qui seraient autrement analysés. Passez un tableau de globs correspondant aux éléments qui doivent être exclus. (Note : cette option n'a aucun effet si `content` n'utilise pas de globs.)
```js
skippedContentGlobs: ['node_modules/**', 'components/**']
```
Ici, PurgeCSS n'analysera rien dans les dossiers "node_modules" et "components".
- **dynamicAttributes**
Option pour ajouter des sélecteurs d'attributs CSS personnalisés comme "aria-selected", "data-selected", etc.
```js
dynamicAttributes: ["aria-selected"]
```
================================================
FILE: docs/fr/css_modules.md
================================================
---
title: Modules CSS
lang: fr-FR
meta:
- name: description
content: PurgeCSS peut être utilisé avec les modules CSS en modifiant la configuration webpack.
- itemprop: description
content: PurgeCSS peut être utilisé avec les modules CSS en modifiant la configuration webpack.
- property: og:url
content: https://purgecss.com/fr/css_modules
- property: og:site_name
content: purgecss.com
- property: og:image
content: https://i.imgur.com/UEiUiJ0.png
- property: og:locale
content: fr_FR
- property: og:title
content: Supprimer le CSS inutilisé - PurgeCSS
- property: og:description
content: PurgeCSS peut être utilisé avec les modules CSS en modifiant la configuration webpack.
---
# Comment utiliser avec les modules CSS
::: tip
Le contenu de cette page provient de [cette issue](https://github.com/FullHuman/purgecss/issues/163#issuecomment-526607181).
Vous pouvez vous référer à la réponse de [@goldmont](https://github.com/goldmont) pour plus de détails.
:::
PurgeCSS fonctionne en comparant les sélecteurs de vos fichiers de contenu avec ceux de vos fichiers CSS. Lors de l'utilisation des modules CSS, les noms de vos classes sont remplacés par un hash. Pour cette raison, travailler avec les modules CSS et PurgeCSS peut ne pas être aussi simple que vous le souhaiteriez.
Voici une façon d'utiliser PurgeCSS avec les modules CSS et React.
Le projet a été créé avec create-react-app. Ensuite, il a été éjecté en exécutant `npm run eject`.
```js
const glob = require('glob-all');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const getCSSModuleLocalIdent = require('react-dev-utils/getCSSModuleLocalIdent');
const shouldUseSourceMap = process.env.GENERATE_SOURCEMAP !== 'false';
module.exports = function(webpackEnv) {
const isEnvDevelopment = webpackEnv === 'development';
const isEnvProduction = webpackEnv === 'production';
const shouldUseRelativeAssetPaths = publicPath === './';
const getStyleLoaders = (cssOptions, preProcessor) => {
const loaders = [
isEnvDevelopment && require.resolve('style-loader'),
isEnvProduction && {
loader: MiniCssExtractPlugin.loader,
options: shouldUseRelativeAssetPaths ? { publicPath: '../../' } : {}
},
{
loader: require.resolve('css-loader'),
options: cssOptions
},
{
loader: require.resolve('postcss-loader'),
options: {
ident: 'postcss',
syntax: 'postcss-scss',
plugins: () => [
require('postcss-flexbugs-fixes'),
require('postcss-preset-env')({
autoprefixer: {
flexbox: 'no-2009'
},
stage: 3
}),
require('@fullhuman/postcss-purgecss')({
content: [ paths.appHtml, ...glob.sync(path.join(paths.appSrc, '/**/*.{js,jsx}'), { nodir: true }) ],
}),
require('postcss-normalize')
].filter(Boolean),
sourceMap: isEnvProduction && shouldUseSourceMap
}
}
].filter(Boolean);
if (preProcessor) {
loaders.push({
loader: require.resolve(preProcessor),
options: {
sourceMap: isEnvProduction && shouldUseSourceMap
}
});
}
return loaders;
};
return {
/* {...} */
module: {
rules: [
/* {...} */
/* {...} */
{
oneOf: [
/* {...} */
{
test: /\.module\.(scss|sass)$/,
use: getStyleLoaders(
{
importLoaders: 2,
sourceMap: isEnvProduction && shouldUseSourceMap,
modules: true,
getLocalIdent: getCSSModuleLocalIdent
},
'sass-loader'
)
}
/* {...} */
]
}
/* {...} */
]
},
/* {...} */
};
};
```
Vous pouvez utiliser la syntaxe de module habituelle dans votre JSX comme ceci :
```js
// @flow
import styles from './Test.module.scss';
import * as React from 'react';
type Props = {};
type State = {};
export default class Test extends React.Component<Props, State> {
render(): * {
return (
<div className={styles.myCssClass}></div>
);
}
}
```
================================================
FILE: docs/fr/extractors.md
================================================
---
title: Extractors
lang: fr-FR
meta:
- name: description
content: PurgeCSS s'appuie sur des extractors pour obtenir la liste des sélecteurs utilisés dans un fichier. Il existe plusieurs types de fichiers pouvant contenir des sélecteurs, tels que les fichiers HTML, les fichiers de templates comme Pug, ou même les fichiers JavaScript.
- itemprop: description
content: PurgeCSS s'appuie sur des extractors pour obtenir la liste des sélecteurs utilisés dans un fichier. Il existe plusieurs types de fichiers pouvant contenir des sélecteurs, tels que les fichiers HTML, les fichiers de templates comme Pug, ou même les fichiers JavaScript.
- property: og:url
content: https://purgecss.com/fr/extractors
- property: og:site_name
content: purgecss.com
- property: og:image
content: https://i.imgur.com/UEiUiJ0.png
- property: og:locale
content: fr_FR
- property: og:title
content: Supprimer le CSS inutilisé - PurgeCSS
- property: og:description
content: PurgeCSS s'appuie sur des extractors pour obtenir la liste des sélecteurs utilisés dans un fichier. Il existe plusieurs types de fichiers pouvant contenir des sélecteurs, tels que les fichiers HTML, les fichiers de templates comme Pug, ou même les fichiers JavaScript.
---
# Extractors
PurgeCSS peut être adapté à vos besoins. Si vous remarquez qu'une grande quantité de CSS inutilisé n'est pas supprimée, vous pourriez vouloir utiliser un extractor spécifique.
PurgeCSS s'appuie sur des extractors pour obtenir la liste des sélecteurs utilisés dans un fichier. Il existe plusieurs types de fichiers pouvant contenir des sélecteurs, tels que les fichiers HTML, les fichiers de templates comme Pug, ou même les fichiers JavaScript.
## Extractor par défaut
PurgeCSS fournit un extractor par défaut qui fonctionne avec tous les types de fichiers, mais qui peut être limité et ne pas correspondre exactement au type de fichiers ou au framework CSS que vous utilisez.
L'extractor par défaut considère chaque mot d'un fichier comme un sélecteur. L'extractor par défaut a quelques limitations :
- Ne prend pas en compte les caractères spéciaux tels que `@`, `:`, `/`
## Utiliser un extractor
Utiliser un extractor peut être utile si vous remarquez que PurgeCSS ne supprime pas assez de CSS inutilisé ou supprime du CSS utilisé.
Utiliser un extractor spécifique pour une extension devrait vous offrir la meilleure précision. Si vous voulez purger exclusivement des fichiers HTML, vous pourriez envisager l'extractor `purgecss-from-html`.
Vous pouvez utiliser un extractor en configurant l'option extractors dans le fichier de configuration de PurgeCSS.
```js
import { purgeCSSFromPug } from "purgecss-from-pug";
import { purgeCSSFromHtml } from "purgecss-from-html";
const options = {
content: [], // fichiers desquels extraire les sélecteurs
css: [], // css
extractors: [
{
extractor: purgeCSSFromPug,
extensions: ["pug"],
},
{
extractor: purgeCSSFromHtml,
extensions: ["html"],
},
],
};
export default options;
```
## Créer un extractor
Un extractor est une simple fonction qui prend le contenu d'un fichier sous forme de chaîne de caractères et retourne un tableau de sélecteurs. Par convention, le nom du package npm est `purgecss-from-[typefichier]` \(par exemple purgecss-from-pug\). Cette convention permet aux utilisateurs de consulter la liste des extractors sur npm en recherchant `purgecss-from`.
La fonction peut retourner soit un tableau de sélecteurs (balises, classes, ids), soit l'objet ci-dessous pour une meilleure précision :
```ts
interface ExtractorResultDetailed {
attributes: {
names: string[];
values: string[];
};
classes: string[];
ids: string[];
tags: string[];
undetermined: string[];
}
```
```js
const purgeFromJs = (content) => {
// retourne un tableau de sélecteurs CSS
};
```
## Liste des extractors disponibles (en cours)
::: warning
Ces extractors sont encore en cours de développement.
Il n'est pas recommandé de les utiliser en production pour le moment.
:::
- [purgecss-from-html](https://github.com/FullHuman/purgecss/blob/main/packages/purgecss-from-html) : Fichiers HTML (.html)
- [purgecss-from-jsx](https://github.com/FullHuman/purgecss/blob/main/packages/purgecss-from-jsx) : Fichiers JSX
- [purgecss-from-pug](https://github.com/FullHuman/purgecss/blob/main/packages/purgecss-from-pug) : Fichiers Pug (.pug)
================================================
FILE: docs/fr/getting-started.md
================================================
---
title: Commencer
lang: fr-FR
meta:
- name: description
content: PurgeCSS est un outil pour supprimer le CSS inutilisé de votre projet. Il peut être utilisé dans votre flux de développement. PurgeCSS est disponible avec une API JavaScript, un CLI, et des plugins pour les outils de build populaires.
- itemprop: description
content: PurgeCSS est un outil pour supprimer le CSS inutilisé de votre projet. Il peut être utilisé dans votre flux de développement. PurgeCSS est disponible avec une API JavaScript, un CLI, et des plugins pour les outils de build populaires.
- property: og:url
content: https://purgecss.com
- property: og:site_name
content: purgecss.com
- property: og:type
content: website
- property: og:image
content: https://i.imgur.com/UEiUiJ0.png
- property: og:locale
content: fr_FR
- property: og:title
content: Supprimer le CSS inutilisé - PurgeCSS
- property: og:description
content: PurgeCSS est un outil pour supprimer le CSS inutilisé de votre projet. Il peut être utilisé dans votre flux de développement. PurgeCSS est disponible avec une API JavaScript, un CLI, et des plugins pour les outils de build populaires.
---
# Commencer
La plupart des bundlers et frameworks pour construire des sites web utilisent PostCSS. La façon la plus simple de configurer PurgeCSS est avec son plugin PostCSS.
Installez le plugin PostCSS :
:::: code-tabs
@tab npm
```sh
npm i -D @fullhuman/postcss-purgecss
```
@tab yarn
```sh
yarn add @fullhuman/postcss-purgecss --dev
```
::::
et ajoutez le plugin PurgeCSS à la configuration PostCSS :
```js{1,5-7}
import { purgeCSSPlugin } from '@fullhuman/postcss-purgecss';
module.exports = {
plugins: [
purgecss({
content: ['./**/*.html']
})
]
}
```
PurgeCSS supprimera le CSS qui n'est pas présent dans les fichiers spécifiés dans l'option `content`.
Vous pouvez trouver plus d'informations sur le plugin PostCSS et les options de configuration sur les pages suivantes :
- [Plugin PostCSS](/fr/plugins/postcss)
- [Configuration](/fr/configuration)
================================================
FILE: docs/fr/guides/hugo.md
================================================
---
title: Hugo
lang: fr-FR
meta:
- name: description
content: PurgeCSS peut être utilisé avec Hugo via le traitement des assets Hugo Pipes
- itemprop: description
content: PurgeCSS peut être utilisé avec Hugo via le traitement des assets Hugo Pipes
- property: og:url
content: https://purgecss.com/fr/guides/hugo
- property: og:site_name
content: purgecss.com
- property: og:type
content: website
- property: og:image
content: https://i.imgur.com/UEiUiJ0.png
- property: og:locale
content: fr_FR
- property: og:title
content: Supprimer le CSS inutilisé - PurgeCSS
- property: og:description
content: PurgeCSS peut être utilisé avec Hugo via le traitement des assets Hugo Pipes
---
# Hugo
> Hugo est l'un des générateurs de sites statiques open-source les plus populaires. Avec sa vitesse et sa flexibilité incroyables, Hugo rend la création de sites web à nouveau amusante.
PurgeCSS peut être utilisé avec [Hugo](https://gohugo.io/) via le traitement des assets Hugo Pipes.
## Outils
1. Installez [Hugo](https://gohugo.io/getting-started/installing/)
1. Installez [Node.js](https://nodejs.org/en/download/)
## Write Stats
Dans votre fichier `config.toml`, ajoutez ceci :
```toml
[build]
[build.buildStats]
enable = true
```
Ou, si vous utilisez un fichier `config.yaml`, ajoutez ceci :
```yaml
build:
buildStats:
enable: true
```
Cela indique à Hugo d'écrire un fichier `hugo_stats.json` à la racine du projet lors de la construction. Il inclut toutes les balises, classes et identifiants de vos templates `*.html`.
Vous devriez également ajouter `hugo_stats.json` au watcher du serveur Hugo :
```toml
[module]
[module.hugoVersion]
extended = false
min = "0.115.0"
[[module.mounts]]
source = "assets"
target = "assets"
[[module.mounts]]
source = "hugo_stats.json"
target = "assets/watching/hugo_stats.json"
```
## Packages Node
Si le fichier `package.json` à la racine du projet n'existe pas encore (celui qui suit toutes vos dépendances node), exécutez cette commande depuis le répertoire racine de votre projet pour le créer :
```
npm init
```
Vous pouvez entrer autant ou aussi peu d'informations que vous le souhaitez. Une fois le fichier créé, vous pouvez continuer à installer les packages.
Exécutez ceci depuis la racine de votre projet pour installer les packages nécessaires :
```
npm install postcss postcss-cli @fullhuman/postcss-purgecss --save
```
Les packages seront installés dans un dossier appelé `node_modules` et seront également ajoutés à votre fichier `package.json`.
S'il n'y est pas déjà, ajoutez `node_modules/` à votre fichier `.gitignore`.
## Fichier de configuration PostCSS
Créez un fichier `postcss.config.js` à la racine du projet avec ce contenu :
```js
import purgeCSSPlugin from '@fullhuman/postcss-purgecss';
const purgecss = purgeCSSPlugin({
content: ["./hugo_stats.json"],
defaultExtractor: (content) => {
const els = JSON.parse(content).htmlElements;
return [...(els.tags || []), ...(els.classes || []), ...(els.ids || [])];
},
safelist: [],
});
export default {
plugins: [
...(process.env.HUGO_ENVIRONMENT === "production" ? [purgecss] : []),
],
};
```
Consultez la [documentation de configuration PurgeCSS](../configuration.md) pour plus de détails sur chaque option.
**Note :** `safelist` est un tableau vide (pour l'instant). Rappelez-vous, seuls les éléments de vos templates HTML sont extraits. Donc, si votre JS ajoute des éléments, vous devrez les mettre en safelist.
## Template HTML
Dans le template HTML de votre `<head>`, ajoutez ceci :
```html
{{ $css := resources.Get "css/style.css" | resources.PostCSS }}
{{ if hugo.IsProduction }}
{{ $css = $css | minify | fingerprint | resources.PostProcess }}
{{ end }}
<link
rel="stylesheet"
href="{{ $css.RelPermalink }}"
{{ if hugo.IsProduction -}}
integrity="{{ $css.Data.Integrity }}"
{{- end }}
/>
```
Cela suppose que :
- Votre fichier CSS est situé à `assets/css/style.css`
- Vous souhaitez minifier et créer une empreinte de la version de production de ce fichier
Si ces suppositions ne sont pas vraies pour vous, modifiez le code en conséquence.
## Utilisation
Parfait, maintenant nous pouvons l'utiliser.
Servez votre site en mode développement, qui est le mode par défaut :
```
hugo serve
```
Ouvrez les DevTools de votre navigateur, allez dans l'onglet Network, puis notez la taille du fichier CSS.
Maintenant, faites `Control` + `C` pour l'arrêter, puis servez votre site en mode production :
```
hugo serve --environment production
```
Remarquez que le fichier CSS a maintenant une taille *beaucoup plus petite*.
## Environnement
Si vous ne voulez pas passer l'option `--environment production`, vous pouvez définir cette variable d'environnement :
```
HUGO_ENVIRONMENT=production
```
## Références
- <https://gohugo.io/hugo-pipes/postprocess/>
================================================
FILE: docs/fr/guides/next.md
================================================
---
title: Next.js
lang: fr-FR
meta:
- name: description
content: PurgeCSS peut être utilisé avec Next.js grâce au plugin next-purgecss ou au plugin PostCSS.
- itemprop: description
content: PurgeCSS peut être utilisé avec Next.js grâce au plugin next-purgecss ou au plugin PostCSS.
- property: og:url
content: https://purgecss.com/fr/guides/next
- property: og:site_name
content: purgecss.com
- property: og:type
content: website
- property: og:image
content: https://i.imgur.com/UEiUiJ0.png
- property: og:locale
content: fr_FR
- property: og:title
content: Supprimer le CSS inutilisé - PurgeCSS
- property: og:description
content: PurgeCSS peut être utilisé avec Next.js grâce au plugin next-purgecss ou au plugin PostCSS.
---
# Next.js
> Next.js est un framework React pour des applications de qualité professionnelle qui passent à l'échelle. Les entreprises leaders mondiales utilisent Next.js pour construire des applications rendues côté serveur, des sites web statiques, et plus encore.
Vous pouvez utiliser PurgeCSS avec Next.js en utilisant le plugin PostCSS dans la configuration Next.js.
## Personnaliser la configuration PostCSS (Next.js >= 9.3)
Pour personnaliser la configuration PostCSS, créez un fichier postcss.config.js à la racine de votre projet.
> Attention : Lorsque vous définissez un fichier de configuration PostCSS personnalisé, Next.js désactive complètement le comportement par défaut. Assurez-vous de configurer manuellement toutes les fonctionnalités dont vous avez besoin, y compris [Autoprefixer](https://github.com/postcss/autoprefixer). Vous devez également installer manuellement tous les plugins inclus dans votre configuration personnalisée, c'est-à-dire `npm install postcss-flexbugs-fixes postcss-preset-env`.
> Par défaut, le document externe contenant `html` et `body` se trouve dans le module node de Next.js. Ajoutez `safelist:["html", "body"]` pour vous assurer que PurgeCSS ne supprime pas ces styles.
Ajoutez PurgeCSS à la configuration par défaut :
```js
module.exports = {
"plugins": [
"postcss-flexbugs-fixes",
[
"postcss-preset-env",
{
"autoprefixer": {
"flexbox": "no-2009"
},
"stage": 3,
"features": {
"custom-properties": false
}
}
],
[
'@fullhuman/postcss-purgecss',
{
content: [
'./pages/**/*.{js,jsx,ts,tsx}',
'./components/**/*.{js,jsx,ts,tsx}'
],
defaultExtractor: content => content.match(/[\w-/:]+(?<!:)/g) || [],
safelist: ["html", "body"]
}
],
]
}
```
## Plugin Next.js (Next.js < 9.3)
### Installation
`next-purgecss` nécessite l'un des **plugins css next** suivants :
- [next-css](https://github.com/zeit/next-plugins/tree/master/packages/next-css)
- [next-less](https://github.com/zeit/next-plugins/tree/master/packages/next-less)
- [next-sass](https://github.com/zeit/next-plugins/tree/master/packages/next-sass)
Choisissez simplement celui qui correspond à vos besoins. Dans les étapes suivantes, j'utiliserai `next-css` mais cela fonctionne de la même manière pour les autres **plugins css next**.
Par exemple, installez `next-css` et `next-purgecss` :
:::: code-group
::: code-group-item NPM
```sh
npm install @zeit/next-css next-purgecss --save-dev
```
:::
::: code-group-item YARN
```sh
yarn add @zeit/next-css next-purgecss --dev
```
:::
::::
Une fois les packages installés, vous devez modifier `next.config.js`.
```js
// next.config.js
const withCss = require("@zeit/next-css");
const withPurgeCss = require("next-purgecss");
module.exports = withCss(withPurgeCss());
```
### Options
#### `purgeCssEnabled`
Par défaut, `next-purgecss` supprimera toujours le CSS inutilisé, quel que soit l'environnement de build. Vous pouvez changer cela en définissant une fonction pour l'option `purgeCssEnabled`. La fonction `purgeCssEnabled` reçoit deux arguments :
| Argument | Type | Description |
| ---------- | --------- | ------------------------------------------------------------------------------------------------ |
| `dev` | `Boolean` | `true` en mode développement (exécution de `next`) ou `false` en mode production (exécution de `next start`) |
| `isServer` | `Boolean` | `true` pendant la compilation côté serveur ou `false` pendant la compilation côté client |
```js
// next.config.js
module.exports = withCss(
withPurgeCss({
purgeCssEnabled: ({ dev, isServer }) => !dev && !isServer, // Activer PurgeCSS uniquement pour les builds de production côté client
})
);
```
#### `purgeCssPaths`
Par défaut, ce plugin analysera les répertoires `components` et `pages` pour les noms de classes. Vous pouvez changer cela en définissant `purgeCssPaths`.
```js
// next.config.js
module.exports = withCss(
withPurgeCss({
purgeCssPaths: [
"pages/**/*",
"components/**/*",
"other-components/**/*", // analyser également le dossier other-components
],
})
);
```
#### `purgeCss`
Vous pouvez passer des options personnalisées à [PurgeCSS](https://github.com/FullHuman/purgecss-webpack-plugin) en définissant l'objet `purgeCss` dans votre `next.config.js`.
```js
// next.config.js
module.exports = withCss(
withPurgeCss({
purgeCss: {
whitelist: () => ["my-custom-class"],
},
})
);
```
La liste des options disponibles est documentée dans la [documentation de `purgecss-webpack-plugin`](https://github.com/FullHuman/purgecss-webpack-plugin#options).
::: warning
`purgeCss.paths` écrasera `purgeCssPaths`
:::
================================================
FILE: docs/fr/guides/nuxt.md
================================================
---
title: Nuxt.js
lang: fr-FR
meta:
- name: description
content: PurgeCSS peut être utilisé avec Nuxt.js grâce au plugin nuxt-purgecss ou au plugin PostCSS.
- name: keywords
content: PurgeCSS Nuxt.js Nuxt plugin postCSS nuxt-purgecss
- name: description
content: PurgeCSS peut être utilisé avec Nuxt.js grâce au plugin nuxt-purgecss ou au plugin PostCSS.
- itemprop: description
content: PurgeCSS peut être utilisé avec Nuxt.js grâce au plugin nuxt-purgecss ou au plugin PostCSS.
- property: og:url
content: https://purgecss.com/fr/guides/nuxt
- property: og:site_name
content: purgecss.com
- property: og:type
content: website
- property: og:image
content: https://i.imgur.com/UEiUiJ0.png
- property: og:locale
content: fr_FR
- property: og:title
content: Supprimer le CSS inutilisé - PurgeCSS
- property: og:description
content: PurgeCSS peut être utilisé avec Nuxt.js grâce au plugin nuxt-purgecss ou au plugin PostCSS.
---
# Nuxt.js
> Nuxt.js prédéfinit toute la configuration nécessaire pour rendre le développement d'une application Vue.js agréable. Nuxt.js peut produire des applications universelles, monopages et générées statiquement.
Vous pouvez utiliser PurgeCSS avec Nuxt.js en utilisant le [plugin Nuxt.js](https://github.com/Developmint/nuxt-purgecss) ou le plugin PostCSS.
## Plugin Nuxt.js
Vous pouvez utiliser un module communautaire appelé [nuxt-purgecss](https://github.com/Developmint/nuxt-purgecss) pour faciliter au maximum l'utilisation de PurgeCSS avec Nuxt. Avec ses paramètres par défaut adaptés, vous n'avez besoin d'apporter que quelques modifications (ou aucune) à la configuration.
### Installation
- Ajoutez la dépendance `nuxt-purgecss` à votre projet en utilisant yarn ou npm
- Ajoutez `nuxt-purgecss` à la section `modules` de `nuxt.config.js` :
```js
{
buildModules: [ // si vous utilisez nuxt < 2.9.0, utilisez la propriété modules à la place.
'nuxt-purgecss',
],
purgeCSS: {
// vos paramètres ici
}
}
```
### Options
#### Valeurs par défaut
Avant d'examiner les attributs individuels, voici les paramètres par défaut du module :
```js
{
mode: MODES.webpack,
enabled: ({ isDev, isClient }) => (!isDev && isClient), // ou `false` en mode dev/debug
paths: [
'components/**/*.vue',
'layouts/**/*.vue',
'pages/**/*.vue',
'plugins/**/*.js'
],
styleExtensions: ['.css'],
whitelist: ['body', 'html', 'nuxt-progress'],
extractors: [
{
extractor: content => content.match(/[A-z0-9-:\\/]+/g) || [],
extensions: ['html', 'vue', 'js']
}
]
}
```
Ces paramètres devraient constituer une bonne base pour une variété de projets.
#### Fusion des valeurs par défaut
Vous pouvez définir chaque option soit comme fonction, soit comme valeur statique (primitives, objets, tableaux, ...).
Si vous utilisez une fonction, la valeur par défaut sera fournie comme premier argument.
Si vous *n'utilisez pas* de fonction pour définir vos propriétés, le module essaiera de les fusionner avec les valeurs par défaut. Cela peut être pratique pour `paths`, `whitelist` et ainsi de suite car les valeurs par défaut sont assez sensées. Si vous ne voulez pas inclure les valeurs par défaut, utilisez simplement une fonction.
#### Propriétés en détail
##### mode
* Type : `String` (webpack ou postcss)
* Défaut : `webpack`
Définit le mode dans lequel PurgeCSS doit être utilisé.
* Le mode Webpack ne peut être utilisé qu'avec `build.extractCSS: true`
* Le mode PostCSS ne peut être utilisé qu'avec un **objet** `build.postcss` (pas un tableau) ou les paramètres par défaut
##### enabled
* Type : `Boolean` ou `Function` (uniquement pour le mode webpack, recevra le ctx de build.extend)
* Défaut : `({ isDev, isClient }) => (!isDev && isClient)` (s'active uniquement en mode production) ou `false` en mode debug/dev
Active/Désactive le module
* S'il est évalué à false, le module ne sera pas activé du tout
* Si une fonction est fournie, elle sera correctement évaluée en mode webpack (en mode postcss, elle sera traitée comme true)
##### Options PurgeCSS
Veuillez lire [la documentation PurgeCSS](https://www.purgecss.com/fr/configuration) pour obtenir des informations sur les paramètres liés à PurgeCSS.
Au lieu de `content`, nous utilisons `paths` pour spécifier les chemins que PurgeCSS doit examiner (expliqué [ici](https://www.purgecss.com/with-webpack#options)).
Cela s'applique aux **deux modes**, pas seulement au `mode webpack`.
## Plugin PostCSS
En utilisant l'option *extractCSS*, Nuxt créera des fichiers CSS qui seront chargés séparément par le navigateur.
Lors de la génération de votre application, cela peut représenter beaucoup de petits fichiers.
Pour inclure le CSS dans l'en-tête du fichier HTML, vous devrez exécuter les commandes suivantes.
Veuillez noter qu'avec cette configuration, PurgeCSS sera actif en mode production et développement.
:::: code-group
::: code-group-item NPM
```sh
npm i -D @fullhuman/postcss-purgecss
```
:::
::: code-group-item YARN
```sh
yarn add @fullhuman/postcss-purgecss --dev
```
:::
::::
```js
'@fullhuman/postcss-purgecss': {
content: ['./pages/**/*.vue', './layouts/**/*.vue', './components/**/*.vue'],
safelist: ['html', 'body']
}
```
================================================
FILE: docs/fr/guides/razzle.md
================================================
---
title: Razzle
lang: fr-FR
meta:
- name: description
content: PurgeCSS peut être utilisé avec Razzle grâce au plugin razzle-plugin-purgecss ou au plugin PostCSS.
- itemprop: description
content: PurgeCSS peut être utilisé avec Razzle grâce au plugin razzle-plugin-purgecss ou au plugin PostCSS.
- property: og:url
content: https://purgecss.com/fr/guides/razzle
- property: og:site_name
content: purgecss.com
- property: og:type
content: website
- property: og:image
content: https://i.imgur.com/UEiUiJ0.png
- property: og:locale
content: fr_FR
- property: og:title
content: Supprimer le CSS inutilisé - PurgeCSS
- property: og:description
content: PurgeCSS peut être utilisé avec Razzle grâce au plugin razzle-plugin-purgecss ou au plugin PostCSS.
---
# Razzle
Cet exemple montre comment configurer PurgeCSS avec le template `create-razzle-app`.
## Installation
### 1. Installer les packages
Une fois que vous avez initialisé votre projet avec `npx create-razzle-app my-app`, installez le plugin PurgeCSS :
:::: code-group
::: code-group-item NPM
```sh
npm i --save-dev razzle-plugin-purgecss
```
:::
::: code-group-item YARN
```sh
yarn add --dev razzle-plugin-purgecss
```
:::
::::
### 2. Modifier `razzle.config.js`
```js
// razzle.config.js
const path = require('path');
module.exports = {
plugins: [
{
name: 'purgecss',
options: {
// Cette option path est requise pour que PurgeCSS analyse tout votre contenu
path: path.resolve(__dirname, 'src/**/*'),
}
}
],
};
```
## Options
- only
Vous pouvez spécifier des points d'entrée pour PurgeCSS avec l'option `only` :
```js
// razzle.config.js
const path = require('path');
module.exports = {
plugins: [
{
name: 'purgecss',
options: {
path: path.resolve(__dirname, 'src/**/*'),
only: ['bundle', 'vendor'],
}
}
],
};
```
- whitelist (défaut : [])
Vous pouvez mettre en liste blanche des sélecteurs pour empêcher PurgeCSS de les supprimer de votre CSS. Cela peut être accompli avec les options `whitelist` et `whitelistPatterns`.
```js
// razzle.config.js
const path = require('path');
module.exports = {
plugins: [
{
name: 'purgecss',
options: {
path: path.resolve(__dirname, 'src/**/*'),
whitelist: ['random', 'yep', 'button'],
}
}
],
};
```
- whitelistPatterns (défaut : [])
Vous pouvez mettre en liste blanche des sélecteurs basés sur une expression régulière avec whitelistPatterns.
```js
// razzle.config.js
const path = require('path');
module.exports = {
plugins: [
{
name: 'purgecss',
options: {
path: path.resolve(__dirname, 'src/**/*'),
whitelistPatterns: [/red$/],
}
}
],
};
```
- keyframes (défaut : false)
Si vous utilisez une bibliothèque d'animations CSS comme animate.css, vous pouvez supprimer les keyframes inutilisées en définissant l'option keyframes à true.
```js
// razzle.config.js
const path = require('path');
module.exports = {
plugins: [
{
name: 'purgecss',
options: {
path: path.resolve(__dirname, 'src/**/*'),
keyframes: true
}
}
],
};
```
- fontFace (défaut : false)
S'il y a des règles `@font-face` inutilisées dans votre CSS, vous pouvez les supprimer en définissant l'option fontFace à true
```js
// razzle.config.js
const path = require('path');
module.exports = {
plugins: [
{
name: 'purgecss',
options: {
path: path.resolve(__dirname, 'src/**/*'),
fontFace: true,
}
}
],
};
```
- rejected (défaut : false)
Il peut parfois être plus pratique de parcourir la liste des éléments supprimés pour voir s'il y a quelque chose d'évidemment incorrect. Si vous voulez le faire, utilisez l'option rejected.
```js
// razzle.config.js
const path = require('path');
module.exports = {
plugins: [
{
name: 'purgecss',
options: {
path: path.resolve(__dirname, 'src/**/*'),
rejected: true,
}
}
],
};
```
================================================
FILE: docs/fr/guides/react.md
================================================
---
title: React
lang: fr-FR
meta:
- name: description
content: PurgeCSS peut être utilisé avec React.js en utilisant craco, un script postbuild ou en éjectant create-react-app.
- itemprop: description
content: PurgeCSS peut être utilisé avec React.js en utilisant craco, un script postbuild ou en éjectant create-react-app.
- property: og:url
content: https://purgecss.com/fr/guides/react
- property: og:site_name
content: purgecss.com
- property: og:type
content: website
- property: og:image
content: https://i.imgur.com/UEiUiJ0.png
- property: og:locale
content: fr_FR
- property: og:title
content: Supprimer le CSS inutilisé - PurgeCSS
- property: og:description
content: PurgeCSS peut être utilisé avec React.js en utilisant craco, un script postbuild ou en éjectant create-react-app.
---
# React
> React est une bibliothèque JavaScript pour créer des interfaces utilisateur. Create React App est un environnement confortable pour apprendre React, et c'est la meilleure façon de commencer à construire une nouvelle application monopage en React.
Ce guide suppose que vous utilisez create-react-app pour construire votre application React monopage.
## Méthode 1 : Utiliser `craco`
Des plugins PostCSS personnalisés (y compris PurgeCSS) peuvent être ajoutés aux applications Create React App en utilisant [craco](https://github.com/gsoft-inc/craco/). Suivez les [instructions d'installation de craco](https://github.com/gsoft-inc/craco/blob/master/packages/craco/README.md#installation), puis installez le plugin PostCSS `PurgeCSS` et ajoutez-le à la configuration craco :
```sh
npm i --save-dev @fullhuman/postcss-purgecss
```
```js
// craco.config.js
const purgecss = require("@fullhuman/postcss-purgecss");
module.exports = {
style: {
postcss: {
plugins: [
purgecss({
content: ["./src/**/*.html", "./src/**/*.tsx", "./src/**/*.ts"],
}),
],
},
},
};
```
## Méthode 2 : Exécuter PurgeCSS CLI dans `postbuild`
Ajoutez le code suivant dans **package.json**
```json
"scripts": {
"postbuild": "purgecss --css build/static/css/*.css --content build/index.html build/static/js/*.js --output build/static/css"
},
```
## Méthode 3 : `eject` de create-react-app
Vous devez [éjecter](https://facebook.github.io/create-react-app/docs/available-scripts#npm-run-eject) afin d'exposer la configuration webpack offerte par create-react-app original.
Installez le plugin webpack pour PurgeCSS :
```sh
npm i --save-dev glob-all purgecss-webpack-plugin
```
Maintenant, modifiez le fichier `config/webpack.prod.conf.js` en ajoutant le code suivant avec le reste des imports :
```js
// importer le plugin webpack PurgeCSS et glob-all
const { PurgecssPlugin } = require("purgecss-webpack-plugin");
const glob = require("glob-all");
```
...et directement avant `new ManifestPlugin(...)` dans la liste des plugins, ajoutez ceci :
```js
// Supprimer le CSS inutilisé avec PurgeCSS. Voir https://github.com/FullHuman/purgecss
// pour plus d'informations sur PurgeCSS.
// Spécifiez le chemin des fichiers html et des fichiers sources
new PurgecssPlugin({
paths: [paths.appHtml, ...glob.sync(`${paths.appSrc}/**/*`, { nodir: true })]
}),
```
================================================
FILE: docs/fr/guides/vue.md
================================================
---
title: Vue
lang: fr-FR
meta:
- name: description
content: PurgeCSS peut être utilisé avec Vue grâce au plugin webpack.
- itemprop: description
content: PurgeCSS peut être utilisé avec Vue grâce au plugin webpack.
- property: og:url
content: https://purgecss.com/fr/guides/vue
- property: og:site_name
content: purgecss.com
- property: og:type
content: website
- property: og:image
content: https://i.imgur.com/UEiUiJ0.png
- property: og:locale
content: fr_FR
- property: og:title
content: Supprimer le CSS inutilisé - PurgeCSS
- property: og:description
content: PurgeCSS peut être utilisé avec Vue grâce au plugin webpack.
---
# Vue
## Utiliser le plugin Vue CLI
### Installation
Si vous n'avez pas encore installé vue-cli 3, suivez d'abord les instructions d'installation ici : https://github.com/vuejs/vue-cli
Générez un projet en utilisant vue-cli 3.0 :
```sh
vue create my-app
```
Avant d'installer le plugin PurgeCSS, assurez-vous de valider ou de mettre de côté vos modifications au cas où vous auriez besoin de revenir en arrière.
Pour installer le plugin PurgeCSS, naviguez simplement vers le dossier de votre application et ajoutez PurgeCSS.
```sh
cd my-app
vue add @fullhuman/purgecss
```
Le plugin PurgeCSS générera un fichier `postcss.config.js` avec PurgeCSS configuré. Vous pouvez ensuite modifier les options de PurgeCSS.
### Utilisation
Voici les options PurgeCSS définies par ce plugin :
```js
{
content: [ `./public/**/*.html`, `./src/**/*.vue` ],
defaultExtractor (content) {
const contentWithoutStyleBlocks = content.replace(/<style[^]+?<\/style>/gi, '')
return contentWithoutStyleBlocks.match(/[A-Za-z0-9-_/:]*[A-Za-z0-9-_/]+/g) || []
},
safelist: [ /-(leave|enter|appear)(|-(to|from|active))$/, /^(?!(|.*?:)cursor-move).+-move$/, /^router-link(|-exact)-active$/, /data-v-.*/ ],
}
```
================================================
FILE: docs/fr/guides/wordpress.md
================================================
---
title: WordPress
lang: fr-FR
meta:
- name: description
content: PurgeCSS peut être utilisé pour le développement WordPress. Un module existe pour faciliter le processus et fournir des éléments de safelist courants.
- itemprop: description
content: PurgeCSS peut être utilisé pour le développement WordPress. Un module existe pour faciliter le processus et fournir des éléments de safelist courants.
- property: og:url
content: https://purgecss.com/fr/guides/wordpress
- property: og:site_name
content: purgecss.com
- property: og:type
content: website
- property: og:image
content: https://i.imgur.com/UEiUiJ0.png
- property: og:locale
content: fr_FR
- property: og:title
content: Supprimer le CSS inutilisé - PurgeCSS
- property: og:description
content: PurgeCSS peut être utilisé pour le développement WordPress. Un module existe pour faciliter le processus et fournir des éléments de safelist courants.
---
# WordPress
Si vous souhaitez utiliser PurgeCSS avec WordPress, vous pourriez avoir besoin de mettre en safelist les classes générées par WordPress pour éviter qu'elles soient supprimées par PurgeCSS. `purgecss-with-wordpress` contient les classes qui doivent être mises en safelist.
## Installation
Vous devez d'abord installer [purgecss](https://github.com/FullHuman/purgecss).
Installez `purgecss-with-wordpress` :
```sh
npm i --save-dev purgecss-with-wordpress
```
## Utilisation
```js{2,7,8}
import Purgecss from 'purgecss'
import purgecssWordpress from 'purgecss-with-wordpress'
const purgeCss = new Purgecss({
content: ['**/*.html'],
css: ['**/*.css'],
safelist: purgecssWordpress.safelist
})
const result = purgecss.purge()
```
Si vous avez des classes supplémentaires que vous souhaitez inclure, vous pouvez les inclure en utilisant l'opérateur de décomposition :
```js
{
safelist: [
...purgecssWordpress.safelist,
'red',
'blue',
/^red/,
/blue$/,
]
}
```
================================================
FILE: docs/fr/introduction.md
================================================
---
title: Introduction
lang: fr-FR
meta:
- name: description
content: PurgeCSS est un outil pour supprimer le CSS inutilisé de votre projet. Il peut être utilisé dans votre flux de développement. PurgeCSS est disponible avec une API JavaScript, un CLI, et des plugins pour les outils de build populaires.
- itemprop: description
content: PurgeCSS est un outil pour supprimer le CSS inutilisé de votre projet. Il peut être utilisé dans votre flux de développement. PurgeCSS est disponible avec une API JavaScript, un CLI, et des plugins pour les outils de build populaires.
- property: og:url
content: https://purgecss.com
- property: og:site_name
content: purgecss.com
- property: og:type
content: website
- property: og:image
content: https://i.imgur.com/UEiUiJ0.png
- property: og:locale
content: fr_FR
- property: og:title
content: Supprimer le CSS inutilisé - PurgeCSS
- property: og:description
content: PurgeCSS est un outil pour supprimer le CSS inutilisé de votre projet. Il peut être utilisé dans votre flux de développement. PurgeCSS est disponible avec une API JavaScript, un CLI, et des plugins pour les outils de build populaires.
---
# À propos de PurgeCSS
PurgeCSS est un outil pour supprimer le CSS inutilisé. Il peut faire partie de votre flux de développement.
Lorsque vous construisez un site web, vous pouvez décider d'utiliser un framework CSS comme TailwindCSS, Bootstrap, MaterializeCSS, Foundation, etc. Cependant, vous n'utiliserez qu'une petite partie du framework, et de nombreux styles CSS inutilisés seront inclus.
C'est là que PurgeCSS entre en jeu. PurgeCSS analyse votre contenu et vos fichiers CSS. Ensuite, il fait correspondre les sélecteurs utilisés dans vos fichiers avec ceux de vos fichiers de contenu. Il supprime les sélecteurs inutilisés de votre CSS, ce qui résulte en des fichiers CSS plus légers.
## Sponsors 🥰
[<img src="https://avatars.githubusercontent.com/u/133211198?v=4" height="85" style="margin-right: 10px" alt="BairesDev - Sponsor">](https://www.bairesdev.com/sponsoring-open-source-projects/)
[<img src="/full-human.png" height="85" style="margin-right: 10px" alt="Full Human - Sponsor">](https://full-human.health/)
================================================
FILE: docs/fr/plugins/gatsby.md
================================================
---
title: Gatsby
lang: fr-FR
meta:
- name: description
content: PurgeCSS peut être utilisé avec Gatsby grâce au plugin gatsby-plugin-purgecss.
- itemprop: description
content: PurgeCSS peut être utilisé avec Gatsby grâce au plugin gatsby-plugin-purgecss.
- property: og:url
content: https://purgecss.com/fr/plugins/gatbsy
- property: og:site_name
content: purgecss.com
- property: og:type
content: website
- property: og:image
content: https://i.imgur.com/UEiUiJ0.png
- property: og:locale
content: fr_FR
- property: og:title
content: Supprimer le CSS inutilisé - PurgeCSS
- property: og:description
content: PurgeCSS peut être utilisé avec Gatsby grâce au plugin gatsby-plugin-purgecss.
---
# Gatsby
::: tip
Ce plugin a été créé par [@anantoghosh](https://github.com/anantoghosh) et cette page est un extrait du ReadMe.
Vous pouvez trouver plus d'informations sur [le dépôt du plugin](https://github.com/anantoghosh/gatsby-plugin-purgecss)
:::
Vous pouvez supprimer le CSS inutilisé des fichiers et modules css/sass/less/stylus dans votre projet Gatsby en utilisant PurgeCSS. Compatible avec tailwind, bootstrap, bulma, etc.
::: warning
Ce n'est PAS un plugin de type « installer et oublier ». Par défaut, il peut également supprimer des styles nécessaires.
:::
📘 [Lire la dernière documentation ici.](https://github.com/anantoghosh/gatsby-plugin-purgecss/blob/master/README.md) • [Journal des modifications](https://github.com/anantoghosh/gatsby-plugin-purgecss/blob/master/CHANGELOG.md) •
### Démonstration
Lors de l'utilisation dans [gatsby-starter-bootstrap](https://github.com/jaxx2104/gatsby-starter-bootstrap)
Lors de l'utilisation dans [gatsby-starter-bootstrap-cv](https://github.com/mhjadav/gatsby-starter-bootstrap-cv) (installé par défaut)
## Fichiers supportés
- `.css` , `.module.css`
- `.scss`, `.sass`, `.module.scss`, `.module.sass` (via [gatsby-plugin-sass](https://next.gatsbyjs.org/packages/gatsby-plugin-sass/))
- `.less`, `.module.less` (via [gatsby-plugin-less](https://next.gatsbyjs.org/packages/gatsby-plugin-less/))
- `.styl`, `.module.styl` (via [gatsby-plugin-stylus](https://next.gatsbyjs.org/packages/gatsby-plugin-sass/))
## Installation
```sh
npm i gatsby-plugin-purgecss
```
### Utilisation
> **Ajoutez le plugin APRÈS les autres plugins css/postcss**
```js
// gatsy-config.js
module.exports = {
plugins: [
`gatsby-plugin-stylus`,
`gatsby-plugin-sass`,
`gatsby-plugin-less`,
`gatsby-plugin-postcss`,
// Ajouter après ces plugins s'ils sont utilisés
{
resolve: `gatsby-plugin-purgecss`,
options: {
printRejected: true, // Affiche les sélecteurs supprimés et les noms des fichiers traités
// develop: true, // Activer lors de l'utilisation de `gatsby develop`
// tailwind: true, // Activer le support de tailwindcss
// whitelist: ['whitelist'], // Ne pas supprimer ce sélecteur
// ignore: ['/ignored.css', 'prismjs/', 'docsearch.js/'], // Ignorer les fichiers/dossiers
// purgeOnly : ['components/', '/main.css', 'bootstrap/'], // Purger uniquement ces fichiers/dossiers
}
}
]
};
```
## En résumé
* Définissez les options dans `gatsby-config.js`, pas dans `purgecss.config.js`.
* Si vous utilisez tailwindcss, utilisez l'[option `tailwind: true`](https://github.com/anantoghosh/gatsby-plugin-purgecss/blob/master/README.md#tailwind).
* Utilisez l'option [`printRejected: true`](https://github.com/anantoghosh/gatsby-plugin-purgecss/blob/master/README.md#printrejected) pour afficher les sélecteurs supprimés.
* Seuls les fichiers traités par Webpack seront purgés.
* `my-selector` ne correspondra pas à `mySelector`.
* Ajoutez à la liste blanche les sélecteurs requis ou ignorez les fichiers/dossiers en utilisant le guide [Solutions de liste blanche](https://github.com/anantoghosh/gatsby-plugin-purgecss/blob/master/README.md#whitelist-solutions).
* Ignorez des packages complets avec [`ignore: ['packagename/']`](https://github.com/anantoghosh/gatsby-plugin-purgecss/blob/master/README.md#ignore).
* Pour purger uniquement des fichiers/packages spécifiques, utilisez [`purgeOnly: ['fileOrPackage/']`](https://github.com/anantoghosh/gatsby-plugin-purgecss/blob/master/README.md#purgeOnly).
* Seuls les fichiers `js, jsx, ts, tsx` sont analysés pour les sélecteurs par défaut. Si vous souhaitez ajouter `md` ou `mdx`, utilisez `content: [path.join(process.cwd(), 'src/**/!(*.d).{ts,js,jsx,tsx,md,mdx}')]` ou mieux encore, ajoutez simplement les sélecteurs requis à la liste blanche.
================================================
FILE: docs/fr/plugins/grunt.md
================================================
---
title: Grunt
lang: fr-FR
meta:
- name: description
content: PurgeCSS est un outil pour supprimer le CSS que vous n'utilisez pas réellement dans votre projet. Vous pouvez l'utiliser avec grunt grâce à un plugin.
- itemprop: description
content: PurgeCSS est un outil pour supprimer le CSS que vous n'utilisez pas réellement dans votre projet. Vous pouvez l'utiliser avec grunt grâce à un plugin.
- property: og:url
content: https://purgecss.com/fr/plugins/grunt
- property: og:site_name
content: purgecss.com
- property: og:type
content: website
- property: og:image
content: https://i.imgur.com/UEiUiJ0.png
- property: og:locale
content: fr_FR
- property: og:title
content: Supprimer le CSS inutilisé - PurgeCSS
- property: og:description
content: PurgeCSS est un outil pour supprimer le CSS que vous n'utilisez pas réellement dans votre projet. Vous pouvez l'utiliser avec grunt grâce à un plugin.
---
# Grunt
## Installation
```shell
npm install grunt-purgecss --save-dev
```
Une fois le plugin installé, il peut être activé dans votre Gruntfile avec cette ligne de JavaScript :
```js
grunt.loadNpmTasks('grunt-purgecss');
```
## La tâche "purgecss"
### Aperçu
Dans le Gruntfile de votre projet, ajoutez une section nommée `purgecss` à l'objet de données passé à `grunt.initConfig()`.
```js
grunt.initConfig({
// Configuration à exécuter (puis à tester).
purgecss: {
my_target: {
options: {
content: ['./src/**/*.html']
},
files: {
'dist/app.css': ['src/css/app.css']
}
}
}
});
```
### Options
Toutes les options de purgecss sont disponibles avec les plugins.
Vous trouverez ci-dessous les principales options disponibles. Pour la liste complète, consultez le [site de documentation de Purgecss](https://www.purgecss.com/fr/configuration.html#options).
#### options.content
Type : `string | Object`
Vous pouvez spécifier le contenu qui doit être analysé par Purgecss avec un tableau de noms de fichiers ou de globs. Les fichiers peuvent être HTML, Pug, Blade, etc.
#### options.extractors
Type : `Array<Object>`
Purgecss peut être adapté à vos besoins. Si vous remarquez que beaucoup de CSS inutilisé n'est pas supprimé, vous voudrez peut-être utiliser un extracteur personnalisé.
Plus d'informations sur les extracteurs [ici](https://www.purgecss.com/fr/extractors.html).
#### options.safelist
Vous pouvez indiquer quels sélecteurs sont sûrs à conserver dans le CSS final. Cela peut être accompli avec l'option `safelist`.
Deux formes sont disponibles pour cette option.
```ts
safelist: ['random', 'yep', 'button', /^nav-/]
```
Sous cette forme, safelist est un tableau qui peut contenir une chaîne de caractères ou une expression régulière.
La forme _complexe_ est :
```ts
safelist: {
standard: ['random', 'yep', 'button', /^nav-/],
deep: [],
greedy: [],
keyframes: [],
variables: []
}
```
#### options.keyframes
Type : `boolean`
Valeur par défaut : `false`
Si vous utilisez une bibliothèque d'animations CSS comme animate.css, vous pouvez supprimer les keyframes inutilisées en définissant l'option `keyframes` sur true.
#### options.fontFace
Type : `boolean`
Valeur par défaut : `false`
S'il y a des règles `@font-face` inutilisées dans votre CSS, vous pouvez les supprimer en définissant l'option `fontFace` sur true.
### Exemple
L'exemple ci-dessous utilise toutes les principales options disponibles.
```js
grunt.initConfig({
// Configuration à exécuter (puis à tester).
purgecss: {
my_target: {
options: {
content: ['./src/**/*.html', `src/**/*.js`, 'src/**/*.blade', 'src/**/*.vue'],
extractors: {
extractor: class {
static extract(content) {
content.match(/a-Z/) || []
}
},
extension: ['html', 'blade']
},
safelist: ['random', 'yep', 'button', /red$/],
keyframes: true,
fontFace: true
},
files: {
'dist/app.css': ['src/css/app.css']
}
}
}
});
```
================================================
FILE: docs/fr/plugins/gulp.md
================================================
---
title: Gulp
lang: fr-FR
meta:
- name: description
content: PurgeCSS est un outil pour supprimer le CSS inutilisé de votre projet. Vous pouvez l'utiliser avec le plugin gulp.
- itemprop: description
content: PurgeCSS est un outil pour supprimer le CSS inutilisé de votre projet. Vous pouvez l'utiliser avec le plugin gulp.
- property: og:url
content: https://purgecss.com/fr/plugins/gulp
- property: og:site_name
content: purgecss.com
- property: og:type
content: website
- property: og:image
content: https://i.imgur.com/UEiUiJ0.png
- property: og:locale
content: fr_FR
- property: og:title
content: Supprimer le CSS inutilisé - PurgeCSS
- property: og:description
content: PurgeCSS est un outil pour supprimer le CSS inutilisé de votre projet. Vous pouvez l'utiliser avec le plugin gulp.
---
# Gulp
## Installation
```sh
npm i -D gulp-purgecss
npm install --save-dev gulp-purgecss
```
## Utilisation
Par défaut, `purgecss` génère le CSS source _avec les sélecteurs inutilisés supprimés_ :
```js
const gulp = require('gulp')
const purgecss = require('gulp-purgecss')
gulp.task('purgecss', () => {
return gulp.src('src/**/*.css')
.pipe(purgecss({
content: ['src/**/*.html']
}))
.pipe(gulp.dest('build/css'))
})
```
En définissant l'option `rejected`, vous pouvez « inverser » la sortie pour lister _uniquement les sélecteurs supprimés_ :
```js
const gulp = require('gulp')
const rename = require('gulp-rename')
const purgecss = require('gulp-purgecss')
gulp.task('purgecss-rejected', () => {
return gulp.src('src/**/*.css')
.pipe(rename({
suffix: '.rejected'
}))
.pipe(purgecss({
content: ['src/**/*.html'],
rejected: true
}))
.pipe(gulp.dest('build/css'))
})
```
================================================
FILE: docs/fr/plugins/postcss.md
================================================
---
title: PostCSS
lang: fr-FR
meta:
- name: description
content: PurgeCSS est un outil pour supprimer le CSS que vous n'utilisez pas réellement dans votre projet. Vous pouvez l'utiliser avec postcss grâce à un plugin.
- itemprop: description
content: PurgeCSS est un outil pour supprimer le CSS que vous n'utilisez pas réellement dans votre projet. Vous pouvez l'utiliser avec postcss grâce à un plugin.
- property: og:url
content: https://purgecss.com/fr/plugins/postcss
- property: og:site_name
content: purgecss.com
- property: og:type
content: website
- property: og:image
content: https://i.imgur.com/UEiUiJ0.png
- property: og:locale
content: fr_FR
- property: og:title
content: Supprimer le CSS inutilisé - PurgeCSS
- property: og:description
content: PurgeCSS est un outil pour supprimer le CSS que vous n'utilisez pas réellement dans votre projet. Vous pouvez l'utiliser avec postcss grâce à un plugin.
---
# PostCSS
::: warning
Si vous utilisez PostCSS 7, installez @fullhuman/postcss-purgecss 3.0.0 : `npm i -D @fullhuman/postcss-purgecss@3.0.0`.
À partir de la version 4.0, il est compatible uniquement avec PostCSS >=8.
:::
## Installation
```sh
npm i -D @fullhuman/postcss-purgecss postcss
```
## Utilisation
Dans `postcss.config.js` :
```js
import purgeCSSPlugin from '@fullhuman/postcss-purgecss';
module.exports = {
plugins: [
purgeCSSPlugin({
content: ['./**/*.html']
})
]
}
```
En utilisant l'API PostCSS :
```js
import purgeCSSPlugin from '@fullhuman/postcss-purgecss';
postcss([
purgeCSSPlugin({
content: ['./src/**/*.html']
})
])
```
Consultez la documentation de [PostCSS](https://github.com/postcss/postcss) pour des exemples adaptés à votre environnement.
## Options
Toutes les options de PurgeCSS sont disponibles avec les plugins.
Vous trouverez ci-dessous la définition de type des principales options disponibles. Pour la liste complète, consultez le [site de documentation de PurgeCSS](https://www.purgecss.com/fr/configuration.html#options).
```ts
export interface UserDefinedOptions {
content?: Array<string | RawContent>;
contentFunction?: (sourceFile: string) => Array<string | RawContent>;
defaultExtractor?: ExtractorFunction;
extractors?: Array<Extractors>;
fontFace?: boolean;
keyframes?: boolean;
output?: string;
rejected?: boolean;
stdin?: boolean;
stdout?: boolean;
variables?: boolean;
safelist?: UserDefinedSafelist;
blocklist?: StringRegExpArray;
}
interface RawContent {
extension: string
raw: string
}
interface RawCSS {
raw: string
}
type StringRegExpArray = Array<RegExp | string>;
```
================================================
FILE: docs/fr/plugins/webpack.md
================================================
---
title: Webpack
lang: fr-FR
meta:
- name: description
content: PurgeCSS est un outil pour supprimer le CSS que vous n'utilisez pas réellement dans votre projet. Vous pouvez l'utiliser avec webpack grâce à un plugin.
- itemprop: description
content: PurgeCSS est un outil pour supprimer le CSS que vous n'utilisez pas réellement dans votre projet. Vous pouvez l'utiliser avec webpack grâce à un plugin.
- property: og:url
content: https://purgecss.com/fr/plugins/webpack
- property: og:site_name
content: purgecss.com
- property: og:type
content: website
- property: og:image
content: https://i.imgur.com/UEiUiJ0.png
- property: og:locale
content: fr_FR
- property: og:title
content: Supprimer le CSS inutilisé - PurgeCSS
- property: og:description
content: PurgeCSS est un outil pour supprimer le CSS que vous n'utilisez pas réellement dans votre projet. Vous pouvez l'utiliser avec webpack grâce à un plugin.
---
# Webpack
:::tip
Vous pouvez utiliser soit le plugin Webpack directement dans votre configuration webpack, soit utiliser le [plugin PostCSS](postcss.md) lorsque vous utilisez le loader postCSS de Webpack.
:::
## Installation
```sh
npm i purgecss-webpack-plugin -D
```
## Utilisation
### Avec mini-css-extract-plugin
```js
const path = require("path");
const glob = require("glob");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const { PurgeCSSPlugin } = require("purgecss-webpack-plugin");
const PATHS = {
src: path.join(__dirname, "src"),
};
module.exports = {
entry: "./src/index.js",
output: {
filename: "bundle.js",
path: path.join(__dirname, "dist"),
},
optimization: {
splitChunks: {
cacheGroups: {
styles: {
name: "styles",
test: /\.css$/,
chunks: "all",
enforce: true,
},
},
},
},
module: {
rules: [
{
test: /\.css$/,
use: [MiniCssExtractPlugin.loader, "css-loader"],
},
],
},
plugins: [
new MiniCssExtractPlugin({
filename: "[name].css",
}),
new PurgeCSSPlugin({
paths: glob.sync(`${PATHS.src}/**/*`, { nodir: true }),
}),
],
};
```
### Chemins multiples
Si vous avez besoin de plusieurs chemins, utilisez le package npm `glob-all` au lieu de `glob`, puis vous pouvez utiliser cette syntaxe :
```js
new PurgeCSSPlugin({
paths: glob.sync([
// ...
])
}),
```
pour filtrer les répertoires, consultez la documentation de glob-all [ici](https://www.npmjs.com/package/glob-all#filtering-out-directories).
## Options
Les options disponibles dans la [Configuration](https://www.purgecss.com/fr/configuration.html) de purgecss sont également disponibles dans le plugin webpack, à l'exception des options `css` et `content`.
- #### paths
Avec le plugin webpack, vous pouvez spécifier le contenu qui doit être analysé par purgecss en fournissant un tableau de noms de fichiers. Il peut s'agir de fichiers html, pug, blade, etc. Vous pouvez également utiliser un module comme `glob` ou `glob-all` pour obtenir facilement une liste de fichiers.
> Vous devrez probablement passer `{ noDir: true }` comme option à `glob.sync()` car `glob.sync` correspond à un répertoire sur lequel le plugin ne peut pas opérer.
```js
const { PurgeCSSPlugin } = require("purgecss-webpack-plugin");
const glob = require("glob");
const PATHS = {
src: path.join(__dirname, "src"),
};
// Dans la configuration webpack
new PurgeCSSPlugin({
paths: glob.sync(`${PATHS.src}/**/*`, { nodir: true }),
});
```
Si vous souhaitez régénérer la liste des chemins à chaque compilation (par exemple lors de l'utilisation de `--watch`), vous pouvez également passer une fonction à l'option `paths` comme dans l'exemple suivant :
```js
new PurgeCSSPlugin({
paths: () => glob.sync(`${PATHS.src}/**/*`, { nodir: true }),
});
```
- #### only
Vous pouvez spécifier les noms des chunks au plugin purgecss-webpack-plugin avec l'option `only` :
```js
new PurgeCSSPlugin({
paths: glob.sync(`${PATHS.src}/**/*`, { nodir: true }),
only: ["bundle", "vendor"],
});
```
- #### safelist
Comme pour l'option `paths`, vous pouvez également définir une fonction pour cette option :
```js
function collectSafelist() {
return {
standard: ["safelisted", /^safelisted-/],
deep: [/^safelisted-deep-/],
greedy: [/^safelisted-greedy/],
};
}
// Dans la configuration webpack
new PurgeCSSPlugin({
safelist: collectSafelist,
});
```
- #### rejected
Lorsque cette option est définie sur `true`, tous les sélecteurs supprimés sont ajoutés aux [Stats Data](https://webpack.js.org/api/stats/) sous le nom `purged`.
================================================
FILE: docs/fr/safelisting.md
================================================
---
title: Safelisting
lang: fr-FR
meta:
- name: description
content: Pour éviter que PurgeCSS supprime du CSS inutilisé que vous souhaitez conserver, vous pouvez ajouter des sélecteurs à la safelist.
- itemprop: description
content: Pour éviter que PurgeCSS supprime du CSS inutilisé que vous souhaitez conserver, vous pouvez ajouter des sélecteurs à la safelist.
- property: og:url
content: https://purgecss.com/fr/safelisting
- property: og:site_name
content: purgecss.com
- property: og:image
content: https://i.imgur.com/UEiUiJ0.png
- property: og:locale
content: fr_FR
- property: og:title
content: Supprimer le CSS inutilisé - PurgeCSS
- property: og:description
content: Pour éviter que PurgeCSS supprime du CSS inutilisé que vous souhaitez conserver, vous pouvez ajouter des sélecteurs à la safelist.
---
::: tip
Cette documentation concerne PurgeCSS 3.0 et versions ultérieures. Pour consulter la documentation de PurgeCSS 2.x, cliquez [ici](https://github.com/FullHuman/purgecss/tree/5314e41edf328e2ad2639549e1587b82a964a42e/docs)
:::
# Safelisting
Vous pouvez indiquer quels sélecteurs peuvent être conservés en toute sécurité dans le CSS final. Cela peut être accompli avec l'option PurgeCSS `safelist`, ou directement dans votre CSS avec un commentaire spécial.
## Sélecteurs spécifiques
Vous pouvez ajouter des sélecteurs à la safelist avec `safelist`.
```js
const purgecss = new Purgecss({
content: [], // contenu
css: [], // css
safelist: ['random', 'yep', 'button']
})
```
Dans cet exemple, les sélecteurs `.random`, `#yep`, `button` seront conservés dans le CSS final.
## Motifs
Vous pouvez ajouter des sélecteurs à la safelist en fonction d'une expression régulière avec `safelist.standard`, `safelist.deep` et `safelist.greedy`.
```js
const purgecss = new Purgecss({
content: [], // contenu
css: [], // css
safelist: {
standard: [/red$/],
deep: [/blue$/],
greedy: [/yellow$/]
}
})
```
Dans cet exemple, les sélecteurs se terminant par `red` comme `.bg-red`, les sélecteurs se terminant par `blue` ainsi que leurs enfants comme `blue p` ou `.bg-blue .child-of-bg`, et les sélecteurs dont une partie se termine par `yellow` comme `button.bg-yellow.other-class`, seront conservés dans le CSS final.
Les motifs sont des expressions régulières. Vous pouvez utiliser [regexr](https://regexr.com) pour vérifier que les expressions régulières correspondent à ce que vous recherchez.
## Directement dans le CSS
Vous pouvez ajouter des éléments à la safelist directement dans votre CSS avec un commentaire spécial.
Utilisez `/* purgecss ignore */` pour ajouter la règle suivante à la safelist.
```css
/* purgecss ignore */
h1 {
color: blue;
}
```
Utilisez `/* purgecss ignore current */` pour ajouter la règle actuelle à la safelist.
```css
h1 {
/* purgecss ignore current */
color: blue;
}
```
Vous pouvez utiliser `/* purgecss start ignore */` et `/* purgecss end ignore */` pour ajouter une plage de règles à la safelist.
```css
/* purgecss start ignore */
h1 {
color: blue;
}
h3 {
color: green;
}
/* purgecss end ignore */
h4 {
color: purple;
}
/* purgecss start ignore */
h5 {
color: pink;
}
h6 {
color: lightcoral;
}
/* purgecss end ignore */
```
### Points d'attention
Certains outils d'optimisation CSS tels que PostCSS ou cssnano suppriment les commentaires avant que PurgeCSS ne s'exécute dans votre processus de build. Cela peut passer inaperçu car ces étapes sont souvent désactivées en développement. Pour éviter que ces commentaires soient supprimés, vous pouvez les marquer comme importants avec un point d'exclamation.
```css
/*! purgecss start ignore */
h5 {
color: pink;
}
h6 {
color: lightcoral;
}
/*! purgecss end ignore */
```
================================================
FILE: docs/getting-started.md
================================================
---
title: Getting Started
lang: en-US
meta:
- name: description
content: PurgeCSS is a tool to remove unused CSS from your project. It can be used as part of your development workflow. PurgeCSS comes with a JavaScript API, a CLI, and plugins for popular build tools.
- itemprop: description
content: PurgeCSS is a tool to remove unused CSS from your project. It can be used as part of your development workflow. PurgeCSS comes with a JavaScript API, a CLI, and plugins for popular build tools.
- property: og:url
content: https://purgecss.com
- property: og:site_name
content: purgecss.com
- property: og:type
content: website
- property: og:image
content: https://i.imgur.com/UEiUiJ0.png
- property: og:locale
content: en_US
- property: og:title
content: Remove unused CSS - PurgeCSS
- property: og:description
content: PurgeCSS is a tool to remove unused CSS from your project. It can be used as part of your development workflow. PurgeCSS comes with a JavaScript API, a CLI, and plugins for popular build tools.
---
# Getting Started
Most bundlers and frameworks to build websites are using PostCSS. The easiest way to configure PurgeCSS is with its PostCSS plugin.
Install the PostCSS plugin:
:::: code-tabs
@tab npm
```sh
npm i -D @fullhuman/postcss-purgecss
```
@tab yarn
```sh
yarn add @fullhuman/postcss-purgecss --dev
```
::::
and add the PurgeCSS plugin to the PostCSS configuration:
```js{1,5-7}
import { purgeCSSPlugin } from '@fullhuman/postcss-purgecss';
module.exports = {
plugins: [
purgecss({
content: ['./**/*.html']
})
]
}
```
PurgeCSS will remove the CSS that is not in the files specified in the `content` option.
You can find more information about PostCSS plugin and the configuration options on the following pages:
- [PostCSS plugin](/plugins/postcss)
- [Configuration](/configuration)
================================================
FILE: docs/guides/hugo.md
================================================
---
title: Hugo
lang: en-US
meta:
- name: description
content: PurgeCSS can be used with Hugo via Hugo Pipes asset processing
- itemprop: description
content: PurgeCSS can be used with Hugo via Hugo Pipes asset processing
- property: og:url
content: https://purgecss.com/guides/hugo
- property: og:site_name
content: purgecss.com
- property: og:type
content: website
- property: og:image
content: https://i.imgur.com/UEiUiJ0.png
- property: og:locale
content: en_US
- property: og:title
content: Remove unused CSS - PurgeCSS
- property: og:desc
gitextract_hi2eqa2v/
├── .github/
│ ├── CODE_OF_CONDUCT.md
│ ├── FUNDING.yml
│ ├── ISSUE_TEMPLATE/
│ │ ├── bug_report.yml
│ │ └── feature_request.md
│ ├── ISSUE_TEMPLATE.md
│ ├── PULL_REQUEST_TEMPLATE.md
│ ├── dependabot.yml
│ └── workflows/
│ ├── build-and-test.yml
│ ├── publish.yml
│ └── stale-issues.yml
├── .gitignore
├── .husky/
│ ├── .gitignore
│ └── pre-commit
├── .vscode/
│ └── launch.json
├── CHANGELOG.md
├── CONTRIBUTING.md
├── LICENSE
├── README.md
├── SECURITY.md
├── docs/
│ ├── .vuepress/
│ │ ├── client.ts
│ │ ├── config.ts
│ │ ├── public/
│ │ │ ├── browserconfig.xml
│ │ │ ├── robots.txt
│ │ │ └── site.webmanifest
│ │ ├── styles/
│ │ │ └── index.scss
│ │ └── theme/
│ │ ├── client.ts
│ │ ├── components/
│ │ │ └── CarbonAds.vue
│ │ ├── index.ts
│ │ └── layouts/
│ │ └── Layout.vue
│ ├── CLI.md
│ ├── README.md
│ ├── ant_design.md
│ ├── api.md
│ ├── comparison.md
│ ├── configuration.md
│ ├── css_modules.md
│ ├── extractors.md
│ ├── fr/
│ │ ├── CLI.md
│ │ ├── README.md
│ │ ├── ant_design.md
│ │ ├── api.md
│ │ ├── comparison.md
│ │ ├── configuration.md
│ │ ├── css_modules.md
│ │ ├── extractors.md
│ │ ├── getting-started.md
│ │ ├── guides/
│ │ │ ├── hugo.md
│ │ │ ├── next.md
│ │ │ ├── nuxt.md
│ │ │ ├── razzle.md
│ │ │ ├── react.md
│ │ │ ├── vue.md
│ │ │ └── wordpress.md
│ │ ├── introduction.md
│ │ ├── plugins/
│ │ │ ├── gatsby.md
│ │ │ ├── grunt.md
│ │ │ ├── gulp.md
│ │ │ ├── postcss.md
│ │ │ └── webpack.md
│ │ └── safelisting.md
│ ├── getting-started.md
│ ├── guides/
│ │ ├── hugo.md
│ │ ├── next.md
│ │ ├── nuxt.md
│ │ ├── razzle.md
│ │ ├── react.md
│ │ ├── vue.md
│ │ └── wordpress.md
│ ├── introduction.md
│ ├── plugins/
│ │ ├── gatsby.md
│ │ ├── grunt.md
│ │ ├── gulp.md
│ │ ├── postcss.md
│ │ └── webpack.md
│ └── safelisting.md
├── eslint.config.mjs
├── firebase.json
├── jest.config.ts
├── lerna.json
├── package.json
├── packages/
│ ├── grunt-purgecss/
│ │ ├── Gruntfile.js
│ │ ├── README.md
│ │ ├── __tests__/
│ │ │ ├── fixtures/
│ │ │ │ ├── expected/
│ │ │ │ │ ├── footer.css
│ │ │ │ │ ├── menu.css
│ │ │ │ │ ├── profile.css
│ │ │ │ │ └── simple.css
│ │ │ │ └── src/
│ │ │ │ ├── footer.css
│ │ │ │ ├── menu.css
│ │ │ │ ├── profile.css
│ │ │ │ └── simple/
│ │ │ │ ├── simple.css
│ │ │ │ └── simple.html
│ │ │ └── index.test.ts
│ │ ├── build.ts
│ │ ├── jest.config.ts
│ │ ├── package.json
│ │ ├── src/
│ │ │ ├── index.ts
│ │ │ └── types/
│ │ │ └── index.d.ts
│ │ └── tsconfig.json
│ ├── gulp-purgecss/
│ │ ├── README.md
│ │ ├── __tests__/
│ │ │ ├── buffer.test.ts
│ │ │ ├── stream.test.ts
│ │ │ └── test.html
│ │ ├── build.ts
│ │ ├── jest.config.ts
│ │ ├── package.json
│ │ ├── src/
│ │ │ ├── index.ts
│ │ │ └── types/
│ │ │ └── index.ts
│ │ └── tsconfig.json
│ ├── postcss-purgecss/
│ │ ├── README.md
│ │ ├── __tests__/
│ │ │ ├── fixtures/
│ │ │ │ ├── expected/
│ │ │ │ │ ├── font-keyframes.css
│ │ │ │ │ ├── other-plugins.css
│ │ │ │ │ └── simple.css
│ │ │ │ └── src/
│ │ │ │ ├── config-test/
│ │ │ │ │ ├── expected.css
│ │ │ │ │ ├── index.css
│ │ │ │ │ ├── index.html
│ │ │ │ │ └── purgecss.config.js
│ │ │ │ ├── font-keyframes/
│ │ │ │ │ ├── font-keyframes.css
│ │ │ │ │ └── font-keyframes.html
│ │ │ │ ├── other-plugins/
│ │ │ │ │ ├── other-plugins.css
│ │ │ │ │ └── other-plugins.html
│ │ │ │ └── simple/
│ │ │ │ ├── simple.css
│ │ │ │ └── simple.html
│ │ │ └── index.test.ts
│ │ ├── build.ts
│ │ ├── jest.config.ts
│ │ ├── package.json
│ │ ├── src/
│ │ │ ├── index.ts
│ │ │ └── types/
│ │ │ └── index.ts
│ │ └── tsconfig.json
│ ├── purgecss/
│ │ ├── README.md
│ │ ├── __tests__/
│ │ │ ├── attributes.test.ts
│ │ │ ├── chaining-rules.test.ts
│ │ │ ├── cli/
│ │ │ │ ├── cli-config-file.test.ts
│ │ │ │ ├── cli-console-output.test.ts
│ │ │ │ ├── cli-file-output.test.ts
│ │ │ │ ├── cli-multiple-files-output.test.ts
│ │ │ │ ├── cli-options.test.ts
│ │ │ │ └── cli-preserve-paths.test.ts
│ │ │ ├── comments.test.ts
│ │ │ ├── css-variables.test.ts
│ │ │ ├── delimited.test.ts
│ │ │ ├── font-faces.test.ts
│ │ │ ├── globs.test.ts
│ │ │ ├── index.test.ts
│ │ │ ├── keyframes.test.ts
│ │ │ ├── media-queries.test.ts
│ │ │ ├── performance.test.ts
│ │ │ ├── pseudo-class.test.ts
│ │ │ ├── pseudo-elements.test.ts
│ │ │ ├── purgecss.config.js
│ │ │ ├── raw-css-name.test.ts
│ │ │ ├── rejected.test.ts
│ │ │ ├── rejectedCss.test.ts
│ │ │ ├── safelist.test.ts
│ │ │ ├── skipped-content.test.ts
│ │ │ ├── sourcemap.test.ts
│ │ │ ├── test_examples/
│ │ │ │ ├── assets/
│ │ │ │ │ ├── bootstrap.css
│ │ │ │ │ └── tailwind.css
│ │ │ │ ├── attributes/
│ │ │ │ │ ├── attribute_selector.css
│ │ │ │ │ └── attribute_selector.html
│ │ │ │ ├── chaining-rules/
│ │ │ │ │ ├── index.css
│ │ │ │ │ └── index.html
│ │ │ │ ├── cli/
│ │ │ │ │ ├── nested/
│ │ │ │ │ │ └── src/
│ │ │ │ │ │ ├── content.html
│ │ │ │ │ │ ├── level1/
│ │ │ │ │ │ │ ├── level2/
│ │ │ │ │ │ │ │ └── nested.css
│ │ │ │ │ │ │ └── middle.css
│ │ │ │ │ │ └── root.css
│ │ │ │ │ └── simple/
│ │ │ │ │ └── src/
│ │ │ │ │ ├── content.html
│ │ │ │ │ ├── index.js
│ │ │ │ │ ├── style.css
│ │ │ │ │ └── style2.css
│ │ │ │ ├── comments/
│ │ │ │ │ ├── ignore_comment.css
│ │ │ │ │ ├── ignore_comment.html
│ │ │ │ │ ├── ignore_comment_range.css
│ │ │ │ │ └── ignore_comment_range.html
│ │ │ │ ├── css-variables/
│ │ │ │ │ ├── variables.css
│ │ │ │ │ └── variables.html
│ │ │ │ ├── delimited/
│ │ │ │ │ ├── delimited.css
│ │ │ │ │ └── delimited.html
│ │ │ │ ├── font-faces/
│ │ │ │ │ ├── font_face.css
│ │ │ │ │ └── font_face.html
│ │ │ │ ├── keyframes/
│ │ │ │ │ ├── index.css
│ │ │ │ │ ├── index.html
│ │ │ │ │ ├── keyframes.css
│ │ │ │ │ └── keyframes.html
│ │ │ │ ├── media-queries/
│ │ │ │ │ ├── media_queries.css
│ │ │ │ │ └── media_queries.html
│ │ │ │ ├── others/
│ │ │ │ │ ├── remove_unused.css
│ │ │ │ │ ├── remove_unused.js
│ │ │ │ │ ├── special_characters.css
│ │ │ │ │ └── special_characters.js
│ │ │ │ ├── pseudo-class/
│ │ │ │ │ ├── is.css
│ │ │ │ │ ├── is.html
│ │ │ │ │ ├── not.css
│ │ │ │ │ ├── not.html
│ │ │ │ │ ├── nth_child.css
│ │ │ │ │ ├── nth_child.html
│ │ │ │ │ ├── pseudo_class.css
│ │ │ │ │ ├── pseudo_class.js
│ │ │ │ │ ├── pseudo_selector.css
│ │ │ │ │ ├── pseudo_selector.html
│ │ │ │ │ ├── where.css
│ │ │ │ │ └── where.html
│ │ │ │ ├── pseudo-elements/
│ │ │ │ │ ├── pseudo-elements.css
│ │ │ │ │ └── pseudo-elements.html
│ │ │ │ ├── rejected/
│ │ │ │ │ ├── simple.css
│ │ │ │ │ └── simple.js
│ │ │ │ ├── rejectedCss/
│ │ │ │ │ ├── empty-parent-node.css
│ │ │ │ │ ├── empty-parent-node.js
│ │ │ │ │ ├── simple.css
│ │ │ │ │ └── simple.js
│ │ │ │ ├── safelist/
│ │ │ │ │ ├── blocklist.css
│ │ │ │ │ ├── blocklist.html
│ │ │ │ │ ├── safelist.css
│ │ │ │ │ ├── safelist.html
│ │ │ │ │ ├── safelist_css_variables.css
│ │ │ │ │ ├── safelist_css_variables.html
│ │ │ │ │ ├── safelist_keyframes.css
│ │ │ │ │ ├── safelist_keyframes.html
│ │ │ │ │ ├── safelist_patterns_children.css
│ │ │ │ │ ├── safelist_patterns_children.html
│ │ │ │ │ ├── safelist_patterns_greedy.css
│ │ │ │ │ └── safelist_patterns_greedy.html
│ │ │ │ ├── skipped-content/
│ │ │ │ │ ├── simple.css
│ │ │ │ │ ├── skippedFolder/
│ │ │ │ │ │ └── skipped.html
│ │ │ │ │ └── unskipped.html
│ │ │ │ └── sourcemap/
│ │ │ │ ├── content.html
│ │ │ │ ├── css/
│ │ │ │ │ └── styles.css
│ │ │ │ └── stylus/
│ │ │ │ └── styles.styl
│ │ │ └── utils.ts
│ │ ├── build.ts
│ │ ├── jest.config.ts
│ │ ├── package.json
│ │ ├── src/
│ │ │ ├── ExtractorResultSets.ts
│ │ │ ├── VariablesStructure.ts
│ │ │ ├── bin.ts
│ │ │ ├── constants.ts
│ │ │ ├── index.ts
│ │ │ ├── internal-safelist.ts
│ │ │ ├── options.ts
│ │ │ └── types/
│ │ │ └── index.ts
│ │ └── tsconfig.json
│ ├── purgecss-from-html/
│ │ ├── README.md
│ │ ├── __tests__/
│ │ │ ├── data.ts
│ │ │ └── index.test.ts
│ │ ├── build.ts
│ │ ├── jest.config.ts
│ │ ├── package.json
│ │ ├── src/
│ │ │ └── index.ts
│ │ └── tsconfig.json
│ ├── purgecss-from-jsx/
│ │ ├── README.md
│ │ ├── __tests__/
│ │ │ ├── data.ts
│ │ │ └── index.test.ts
│ │ ├── build.ts
│ │ ├── jest.config.ts
│ │ ├── package.json
│ │ ├── src/
│ │ │ └── index.ts
│ │ └── tsconfig.json
│ ├── purgecss-from-pug/
│ │ ├── README.md
│ │ ├── __tests__/
│ │ │ ├── data.ts
│ │ │ └── index.test.ts
│ │ ├── build.ts
│ │ ├── jest.config.ts
│ │ ├── package.json
│ │ ├── src/
│ │ │ └── index.ts
│ │ └── tsconfig.json
│ ├── purgecss-from-tsx/
│ │ ├── README.md
│ │ ├── __tests__/
│ │ │ ├── data.ts
│ │ │ └── index.test.ts
│ │ ├── build.ts
│ │ ├── jest.config.ts
│ │ ├── package.json
│ │ ├── src/
│ │ │ └── index.ts
│ │ └── tsconfig.json
│ ├── purgecss-webpack-plugin/
│ │ ├── README.md
│ │ ├── __tests__/
│ │ │ ├── cases/
│ │ │ │ ├── path-and-safelist-functions/
│ │ │ │ │ ├── expected/
│ │ │ │ │ │ └── styles.css
│ │ │ │ │ ├── src/
│ │ │ │ │ │ ├── content.html
│ │ │ │ │ │ ├── index.js
│ │ │ │ │ │ └── style.css
│ │ │ │ │ └── webpack.config.js
│ │ │ │ ├── simple/
│ │ │ │ │ ├── expected/
│ │ │ │ │ │ └── styles.css
│ │ │ │ │ ├── purgecss.config.js
│ │ │ │ │ ├── src/
│ │ │ │ │ │ ├── content.html
│ │ │ │ │ │ ├── index.js
│ │ │ │ │ │ └── style.css
│ │ │ │ │ └── webpack.config.js
│ │ │ │ └── simple-with-exclusion/
│ │ │ │ ├── expected/
│ │ │ │ │ ├── bundle.css
│ │ │ │ │ └── legacy.css
│ │ │ │ ├── src/
│ │ │ │ │ ├── index.js
│ │ │ │ │ ├── legacy.js
│ │ │ │ │ ├── style.css
│ │ │ │ │ └── style_that_we_want_to_purge.css
│ │ │ │ └── webpack.config.js
│ │ │ └── index.test.ts
│ │ ├── build.ts
│ │ ├── jest.config.ts
│ │ ├── package.json
│ │ ├── src/
│ │ │ ├── index.ts
│ │ │ └── types/
│ │ │ └── index.ts
│ │ └── tsconfig.json
│ ├── purgecss-with-wordpress/
│ │ ├── LICENSE
│ │ ├── README.md
│ │ ├── index.js
│ │ └── package.json
│ ├── rollup-plugin-purgecss/
│ │ ├── README.md
│ │ ├── __tests__/
│ │ │ ├── assets/
│ │ │ │ ├── actual_a.css
│ │ │ │ ├── expect_a.css
│ │ │ │ ├── test_a.css
│ │ │ │ └── test_a.html
│ │ │ ├── fixtures/
│ │ │ │ └── basic/
│ │ │ │ └── index.js
│ │ │ └── index.test.ts
│ │ ├── build.ts
│ │ ├── jest.config.ts
│ │ ├── package.json
│ │ ├── src/
│ │ │ ├── index.ts
│ │ │ └── types/
│ │ │ └── index.ts
│ │ └── tsconfig.json
│ └── vue-cli-plugin-purgecss/
│ ├── README.md
│ ├── generator/
│ │ ├── index.js
│ │ └── templates/
│ │ └── postcss.config.js
│ ├── index.js
│ └── package.json
├── scripts/
│ ├── build.ts
│ └── verify-commit.ts
├── tsconfig.json
└── types/
├── acorn-jsx/
│ └── index.d.ts
├── acorn-jsx-walk/
│ └── index.d.ts
└── vinyl-sourcemaps-apply/
└── index.d.ts
SYMBOL INDEX (192 symbols across 38 files)
FILE: docs/.vuepress/client.ts
method enhance (line 4) | enhance() {}
method setup (line 5) | setup() {}
FILE: jest.config.ts
function createConfig (line 25) | function createConfig(
FILE: packages/grunt-purgecss/__tests__/index.test.ts
function emptyFolder (line 13) | function emptyFolder(directory: string) {
FILE: packages/grunt-purgecss/src/index.ts
function getAvailableFiles (line 3) | function getAvailableFiles(
function gruntPurgeCSS (line 17) | function gruntPurgeCSS(grunt: IGrunt): void {
FILE: packages/gulp-purgecss/src/index.ts
constant PLUGIN_NAME (line 12) | const PLUGIN_NAME = "gulp-purgecss";
function getFiles (line 14) | function getFiles(contentArray: string[], ignore?: string[]): string[] {
function gulpPurgeCSS (line 27) | function gulpPurgeCSS(options: UserDefinedOptions): internal.Transform {
FILE: packages/gulp-purgecss/src/types/index.ts
type UserDefinedOptions (line 6) | interface UserDefinedOptions extends Omit<
FILE: packages/postcss-purgecss/__tests__/index.test.ts
method Rule (line 84) | Rule(rule) {
FILE: packages/postcss-purgecss/src/index.ts
constant PLUGIN_NAME (line 23) | const PLUGIN_NAME = "postcss-purgecss";
function purgeCSS (line 32) | async function purgeCSS(
method OnceExit (line 123) | OnceExit(root, helpers) {
FILE: packages/postcss-purgecss/src/types/index.ts
type UserDefinedOptions (line 24) | interface UserDefinedOptions extends Omit<
FILE: packages/purgecss-from-html/__tests__/data.ts
constant TEST_1_CONTENT (line 1) | const TEST_1_CONTENT = `
constant TEST_1_TAG (line 16) | const TEST_1_TAG = [
constant TEST_1_CLASS (line 26) | const TEST_1_CLASS = ["test-container", "test-footer", "a-link"];
constant TEST_1_ID (line 28) | const TEST_1_ID = ["a-link", "blo"];
constant TEST_1_ATTRIBUTES (line 30) | const TEST_1_ATTRIBUTES = {
constant TEST_2_CONTENT (line 35) | const TEST_2_CONTENT = `
constant TEST_2_TAG (line 63) | const TEST_2_TAG = ["div", "a", "input"];
constant TEST_2_CLASS (line 65) | const TEST_2_CLASS = ["test-container", "test-footer", "a-link"];
constant TEST_2_ID (line 67) | const TEST_2_ID = ["a-link", "blo"];
FILE: packages/purgecss-from-html/src/index.ts
type ExtractorResultDetailed (line 7) | type ExtractorResultDetailed = {
FILE: packages/purgecss-from-jsx/__tests__/data.ts
constant TEST_1_CONTENT (line 1) | const TEST_1_CONTENT = `
constant TEST_1_TAG (line 20) | const TEST_1_TAG = ["div", "a", "input"];
constant TEST_1_CLASS (line 22) | const TEST_1_CLASS = ["test-container", "test-footer", "a-link"];
constant TEST_1_ID (line 24) | const TEST_1_ID = ["a-link", "blo"];
FILE: packages/purgecss-from-jsx/src/index.ts
type NodeState (line 12) | type NodeState = {
function purgeFromJsx (line 27) | function purgeFromJsx(options?: acorn.Options) {
FILE: packages/purgecss-from-pug/__tests__/data.ts
constant TEST_1_CONTENT (line 1) | const TEST_1_CONTENT = `
constant TEST_1_TAG (line 13) | const TEST_1_TAG = [
constant TEST_1_CLASS (line 23) | const TEST_1_CLASS = [
constant TEST_1_ID (line 32) | const TEST_1_ID = ["a-link", "blo"];
constant TEST_1_ATTRIBUTE_NAMES (line 34) | const TEST_1_ATTRIBUTE_NAMES = ["class", "id", "type", "disabled"];
constant TEST_1_ATTRIBUTE_VALUES (line 36) | const TEST_1_ATTRIBUTE_VALUES = [
FILE: packages/purgecss-from-tsx/__tests__/data.ts
constant TEST_1_CONTENT (line 1) | const TEST_1_CONTENT = `
constant TEST_1_TAG (line 36) | const TEST_1_TAG = ["div", "a", "input"];
constant TEST_1_CLASS (line 38) | const TEST_1_CLASS = ["test-container", "test-footer", "a-link"];
constant TEST_1_ID (line 40) | const TEST_1_ID = ["a-link", "blo"];
FILE: packages/purgecss-from-tsx/src/index.ts
function purgeFromTsx (line 13) | function purgeFromTsx(options?: {
FILE: packages/purgecss-webpack-plugin/__tests__/cases/path-and-safelist-functions/webpack.config.js
constant PATHS (line 8) | const PATHS = {
FILE: packages/purgecss-webpack-plugin/__tests__/cases/simple-with-exclusion/src/index.js
function component (line 3) | function component() {
FILE: packages/purgecss-webpack-plugin/__tests__/cases/simple-with-exclusion/webpack.config.js
constant PATHS (line 8) | const PATHS = {
FILE: packages/purgecss-webpack-plugin/__tests__/cases/simple/purgecss.config.js
constant PATHS (line 9) | const PATHS = {
FILE: packages/purgecss-webpack-plugin/__tests__/index.test.ts
function runWebpack (line 10) | function runWebpack(
function readFileOrEmpty (line 23) | async function readFileOrEmpty(path: string): Promise<string> {
FILE: packages/purgecss-webpack-plugin/src/index.ts
function getFormattedFilename (line 22) | function getFormattedFilename(fileName: string): string {
function isFileOfTypes (line 35) | function isFileOfTypes(filename: string, extensions: string[]): boolean {
function getPurgeCSSOptions (line 40) | function getPurgeCSSOptions(
function createSource (line 91) | function createSource(
class PurgeCSSPlugin (line 115) | class PurgeCSSPlugin {
method constructor (line 119) | constructor(options: UserDefinedOptions) {
method apply (line 123) | apply(compiler: Compiler): void {
method initializePlugin (line 130) | initializePlugin(compilation: Compilation): void {
method runPluginHook (line 157) | async runPluginHook(
FILE: packages/purgecss-webpack-plugin/src/types/index.ts
type PathFunction (line 23) | type PathFunction = () => string[];
type SafelistFunction (line 27) | type SafelistFunction = () => ComplexSafelist;
type BlocklistFunction (line 31) | type BlocklistFunction = () => StringRegExpArray;
type PurgedStats (line 36) | type PurgedStats = {
type UserDefinedOptions (line 43) | type UserDefinedOptions = Omit<
FILE: packages/purgecss/__tests__/cli/cli-preserve-paths.test.ts
constant CLI_TEST_FOLDER (line 6) | const CLI_TEST_FOLDER = path.resolve(__dirname, "../test_examples/cli/ne...
FILE: packages/purgecss/__tests__/utils.ts
constant ROOT_TEST_EXAMPLES (line 3) | const ROOT_TEST_EXAMPLES = "./__tests__/test_examples/";
constant CLI_TEST_FOLDER (line 4) | const CLI_TEST_FOLDER = path.resolve(
function findInCSS (line 9) | function findInCSS(
function notFindInCSS (line 19) | function notFindInCSS(
FILE: packages/purgecss/src/ExtractorResultSets.ts
function mergeSets (line 3) | function mergeSets(into: Set<string>, from?: string[] | Set<string>): vo...
class ExtractorResultSets (line 12) | class ExtractorResultSets {
method constructor (line 20) | constructor(er: ExtractorResult) {
method merge (line 24) | merge(that: ExtractorResult | ExtractorResultSets): this {
method hasAttrName (line 48) | hasAttrName(name: string): boolean {
method someAttrValue (line 52) | private someAttrValue(predicate: (value: string) => boolean): boolean {
method hasAttrPrefix (line 62) | hasAttrPrefix(prefix: string): boolean {
method hasAttrSuffix (line 66) | hasAttrSuffix(suffix: string): boolean {
method hasAttrSubstr (line 70) | hasAttrSubstr(substr: string): boolean {
method hasAttrValue (line 77) | hasAttrValue(value: string): boolean {
method hasClass (line 81) | hasClass(name: string): boolean {
method hasId (line 85) | hasId(id: string): boolean {
method hasTag (line 89) | hasTag(tag: string): boolean {
FILE: packages/purgecss/src/VariablesStructure.ts
class VariableNode (line 7) | class VariableNode {
method constructor (line 12) | constructor(declaration: postcss.Declaration) {
class VariablesStructure (line 20) | class VariablesStructure {
method addVariable (line 25) | addVariable(declaration: postcss.Declaration): void {
method addVariableUsage (line 37) | addVariableUsage(
method addVariableUsageInProperties (line 57) | addVariableUsageInProperties(
method setAsUsed (line 67) | setAsUsed(variableName: string): void {
method removeUnused (line 81) | removeUnused(): void {
method isVariablesSafelisted (line 112) | isVariablesSafelisted(variable: string): boolean {
FILE: packages/purgecss/src/bin.ts
function writeCSSToFile (line 12) | async function writeCSSToFile(filePath: string, css: string) {
function read (line 22) | async function read(stream: NodeJS.ReadStream) {
type CommandOptions (line 28) | type CommandOptions = {
function parseCommandOptions (line 44) | function parseCommandOptions(program: Command): Command {
function getOptions (line 80) | async function getOptions(
function run (line 145) | async function run(program: Command) {
function main (line 177) | async function main() {
FILE: packages/purgecss/src/constants.ts
constant IGNORE_ANNOTATION_CURRENT (line 1) | const IGNORE_ANNOTATION_CURRENT = "purgecss ignore current";
constant IGNORE_ANNOTATION_NEXT (line 2) | const IGNORE_ANNOTATION_NEXT = "purgecss ignore";
constant IGNORE_ANNOTATION_START (line 3) | const IGNORE_ANNOTATION_START = "purgecss start ignore";
constant IGNORE_ANNOTATION_END (line 4) | const IGNORE_ANNOTATION_END = "purgecss end ignore";
constant CONFIG_FILENAME (line 5) | const CONFIG_FILENAME = "purgecss.config.js";
constant ERROR_CONFIG_FILE_LOADING (line 8) | const ERROR_CONFIG_FILE_LOADING = "Error loading the config file";
FILE: packages/purgecss/src/index.ts
function standardizeSafelist (line 61) | function standardizeSafelist(
function setOptions (line 87) | async function setOptions(
function extractSelectors (line 119) | async function extractSelectors(
function isIgnoreAnnotation (line 133) | function isIgnoreAnnotation(node: postcss.Comment, type: IgnoreType): bo...
function isRuleEmpty (line 150) | function isRuleEmpty(node?: postcss.Container): boolean {
function hasIgnoreAnnotation (line 168) | function hasIgnoreAnnotation(rule: postcss.Rule): boolean {
function mergeExtractorSelectors (line 192) | function mergeExtractorSelectors(
function stripQuotes (line 205) | function stripQuotes(str: string): string {
function isAttributeFound (line 215) | function isAttributeFound(
function isClassFound (line 249) | function isClassFound(
function isIdentifierFound (line 262) | function isIdentifierFound(
function isTagFound (line 275) | function isTagFound(
function isInPseudoClass (line 288) | function isInPseudoClass(selector: selectorParser.Node): boolean {
function isInPseudoClassWhereOrIs (line 301) | function isInPseudoClassWhereOrIs(selector: selectorParser.Node): boolean {
function isPseudoClassAtRootLevel (line 316) | function isPseudoClassAtRootLevel(selector: selectorParser.Node): boolean {
function isPostCSSAtRule (line 338) | function isPostCSSAtRule(node?: postcss.Node): node is postcss.AtRule {
function isPostCSSRule (line 342) | function isPostCSSRule(node?: postcss.Node): node is postcss.Rule {
function isPostCSSComment (line 346) | function isPostCSSComment(node?: postcss.Node): node is postcss.Comment {
class PurgeCSS (line 364) | class PurgeCSS {
method collectDeclarationsData (line 379) | private collectDeclarationsData(declaration: postcss.Declaration): void {
method getFileExtractor (line 433) | private getFileExtractor(
method extractSelectorsFromFiles (line 452) | public async extractSelectorsFromFiles(
method extractSelectorsFromString (line 492) | public async extractSelectorsFromString(
method evaluateAtRule (line 509) | private evaluateAtRule(node: postcss.AtRule): void {
method evaluateRule (line 534) | private evaluateRule(
method getPurgedCSS (line 648) | public async getPurgedCSS(
method isKeyframesSafelisted (line 728) | private isKeyframesSafelisted(keyframesName: string): boolean {
method isSelectorBlocklisted (line 741) | private isSelectorBlocklisted(selector: string): boolean {
method isSelectorSafelisted (line 754) | private isSelectorSafelisted(selector: string): boolean {
method isSelectorSafelistedDeep (line 769) | private isSelectorSafelistedDeep(selector: string): boolean {
method isSelectorSafelistedGreedy (line 780) | private isSelectorSafelistedGreedy(selector: string): boolean {
method purge (line 810) | public async purge(
method removeUnusedCSSVariables (line 852) | public removeUnusedCSSVariables(): void {
method removeUnusedFontFaces (line 859) | public removeUnusedFontFaces(): void {
method removeUnusedKeyframes (line 870) | public removeUnusedKeyframes(): void {
method getSelectorValue (line 884) | private getSelectorValue(selector: selectorParser.Node): string | unde...
method shouldKeepSelector (line 898) | private shouldKeepSelector(
method walkThroughCSS (line 995) | public walkThroughCSS(
FILE: packages/purgecss/src/internal-safelist.ts
constant CSS_SAFELIST (line 1) | const CSS_SAFELIST = ["*", ":root", ":after", ":before"];
FILE: packages/purgecss/src/types/index.ts
type PostCSSRoot (line 6) | type PostCSSRoot = postcss.Root;
type AtRules (line 11) | interface AtRules {
type RawContent (line 23) | interface RawContent<T = string> {
type RawCSS (line 31) | interface RawCSS {
type ExtractorResultDetailed (line 39) | interface ExtractorResultDetailed {
type ExtractorResult (line 53) | type ExtractorResult = ExtractorResultDetailed | string[];
type ExtractorFunction (line 58) | type ExtractorFunction<T = string> = (content: T) => ExtractorResult;
type Extractors (line 63) | interface Extractors {
type IgnoreType (line 71) | type IgnoreType = "end" | "start" | "next";
type StringRegExpArray (line 76) | type StringRegExpArray = Array<RegExp | string>;
type ComplexSafelist (line 81) | type ComplexSafelist = {
type UserDefinedSafelist (line 112) | type UserDefinedSafelist = StringRegExpArray | ComplexSafelist;
type UserDefinedOptions (line 119) | interface UserDefinedOptions {
type Options (line 163) | interface Options {
type ResultPurge (line 264) | interface ResultPurge {
FILE: packages/rollup-plugin-purgecss/__tests__/fixtures/basic/index.js
function noop (line 3) | function noop() {
FILE: packages/rollup-plugin-purgecss/src/index.ts
function pluginPurgeCSS (line 16) | function pluginPurgeCSS(options: UserDefinedOptions): Plugin {
FILE: packages/rollup-plugin-purgecss/src/types/index.ts
type OutputFunction (line 9) | type OutputFunction = (css: string, styles: string[]) => void;
type UserDefinedOptions (line 16) | type UserDefinedOptions = Omit<
FILE: packages/vue-cli-plugin-purgecss/generator/templates/postcss.config.js
constant IN_PRODUCTION (line 1) | const IN_PRODUCTION = process.env.NODE_ENV === "production";
method defaultExtractor (line 8) | defaultExtractor(content) {
FILE: scripts/build.ts
function createRollupConfig (line 26) | function createRollupConfig(
function buildRollup (line 47) | async function buildRollup(rollupOptions: RollupOptions): Promise<void> {
function extractAPI (line 110) | async function extractAPI(packageFolder: string): Promise<void> {
FILE: types/acorn-jsx/index.d.ts
type JSXAttribute (line 3) | interface JSXAttribute extends Node {
type JSXOpeningElement (line 11) | interface JSXOpeningElement extends Node {
type JSXAttributeExpression (line 18) | interface JSXAttributeExpression extends Node {
type JSXFragment (line 23) | interface JSXFragment {
type OpeningElement (line 31) | interface OpeningElement extends JSXElement {
type JSXElement (line 35) | interface JSXElement extends Node {
type JSXExpressionContainer (line 42) | interface JSXExpressionContainer extends Node {
type JSXIdentifier (line 47) | interface JSXIdentifier extends Node {
type JSXMemberExpression (line 52) | interface JSXMemberExpression extends Node {
type JSXSpreadAttribute (line 58) | interface JSXSpreadAttribute extends Node {
type JSXText (line 63) | interface JSXText extends Node {
type JSXNamespacedName (line 68) | interface JSXNamespacedName extends Node {
type ArrayExpression (line 74) | interface ArrayExpression extends Node {
type BinaryExpression (line 79) | interface BinaryExpression extends Node {
type CallExpression (line 86) | interface CallExpression extends Node {
type ConditionalExpression (line 92) | interface ConditionalExpression extends Node {
type ExpressionStatement (line 99) | interface ExpressionStatement extends Node {
type Identifier (line 104) | interface Identifier extends Node {
type Literal (line 109) | interface Literal extends Node {
type LogicalExpression (line 114) | interface LogicalExpression extends Node {
type MemberExpression (line 121) | interface MemberExpression extends Node {
type ObjectExpression (line 130) | interface ObjectExpression extends Node {
type TemplateElement (line 140) | interface TemplateElement extends Node {
type TemplateLiteral (line 145) | interface TemplateLiteral extends Node {
type UnaryExpression (line 151) | interface UnaryExpression extends Node {
type Expression (line 157) | type Expression =
type PluginOptions (line 180) | interface PluginOptions {
Condensed preview — 327 files, each showing path, character count, and a content snippet. Download the .json file or copy for the full structured content (3,612K chars).
[
{
"path": ".github/CODE_OF_CONDUCT.md",
"chars": 3219,
"preview": "# Contributor Covenant Code of Conduct\n\n## Our Pledge\n\nIn the interest of fostering an open and welcoming environment, w"
},
{
"path": ".github/FUNDING.yml",
"chars": 646,
"preview": "# These are supported funding model platforms\n\ngithub: ['Ffloriel']\npatreon: # Replace with a single Patreon username\nop"
},
{
"path": ".github/ISSUE_TEMPLATE/bug_report.yml",
"chars": 1923,
"preview": "name: Bug Report\ndescription: File a bug report\ntitle: \"[Bug]: \"\nlabels: [bug]\nassignees:\n - octocat\nbody:\n - type: ma"
},
{
"path": ".github/ISSUE_TEMPLATE/feature_request.md",
"chars": 608,
"preview": "---\nname: Feature request\nabout: Suggest an idea for this project\ntitle: ''\nlabels: Feature request\nassignees: ''\n\n---\n\n"
},
{
"path": ".github/ISSUE_TEMPLATE.md",
"chars": 841,
"preview": "Before you open an issue, please check if a similar issue already exists or has been closed before.\n\n### When reporting "
},
{
"path": ".github/PULL_REQUEST_TEMPLATE.md",
"chars": 1207,
"preview": "## Proposed changes\n\nDescribe the big picture of your changes here to communicate to the maintainers why we should accep"
},
{
"path": ".github/dependabot.yml",
"chars": 450,
"preview": "version: 2\nupdates:\n- package-ecosystem: npm\n directory: \"/\"\n schedule:\n interval: monthly\n open-pull-requests-lim"
},
{
"path": ".github/workflows/build-and-test.yml",
"chars": 781,
"preview": "name: Build / Test\npermissions:\n contents: read\n\non: [push, pull_request]\n\njobs:\n build:\n runs-on: ubuntu-latest\n\n "
},
{
"path": ".github/workflows/publish.yml",
"chars": 1609,
"preview": "name: Publish to npm\n\non:\n workflow_dispatch:\n inputs:\n dry-run:\n description: 'Run in dry-run mode (no "
},
{
"path": ".github/workflows/stale-issues.yml",
"chars": 690,
"preview": "name: 'Close stale issues and PRs'\non:\n schedule:\n - cron: '0 0 * * *'\n\njobs:\n stale:\n runs-on: ubuntu-latest\n "
},
{
"path": ".gitignore",
"chars": 1159,
"preview": "docs/api-reference/\npackages/*/lib/\npackages/purgecss/bin/\npackages/grunt-purgecss/tasks/\ndocs/.vuepress/dist/\n.firebase"
},
{
"path": ".husky/.gitignore",
"chars": 2,
"preview": "_\n"
},
{
"path": ".husky/pre-commit",
"chars": 17,
"preview": "npm run prettier\n"
},
{
"path": ".vscode/launch.json",
"chars": 609,
"preview": "{\n // Use IntelliSense to learn about possible attributes.\n // Hover to view descriptions of existing attributes.\n //"
},
{
"path": "CHANGELOG.md",
"chars": 27154,
"preview": "# [8.0.0](https://github.com/FullHuman/purgecss/compare/v7.0.2...v8.0.0)\n\n### BREAKING CHANGES\n\n- Revert the changes fro"
},
{
"path": "CONTRIBUTING.md",
"chars": 1527,
"preview": "## [Code of Conduct](./.github/CODE_OF_CONDUCT.md)\n\nFullHuman has adopted the Contributor Covenant Code of Conduct for a"
},
{
"path": "LICENSE",
"chars": 1067,
"preview": "MIT License\n\nCopyright (c) 2020 Full Human\n\nPermission is hereby granted, free of charge, to any person obtaining a copy"
},
{
"path": "README.md",
"chars": 5242,
"preview": "# PurgeCSS\n\n[](https://www.npmjs.com/package/purgecss)\n"
},
{
"path": "SECURITY.md",
"chars": 677,
"preview": "# Security Policy\n\n## Supported Versions\n\nThis is the list of versions of PurgeCSS which are currently being supported w"
},
{
"path": "docs/.vuepress/client.ts",
"chars": 148,
"preview": "import { defineClientConfig } from \"@vuepress/client\";\n\nexport default defineClientConfig({\n enhance() {},\n setup() {}"
},
{
"path": "docs/.vuepress/config.ts",
"chars": 8474,
"preview": "import { defineUserConfig } from \"vuepress\";\nimport localTheme from \"./theme/index\";\nimport { searchPlugin } from \"@vuep"
},
{
"path": "docs/.vuepress/public/browserconfig.xml",
"chars": 246,
"preview": "<?xml version=\"1.0\" encoding=\"utf-8\"?>\n<browserconfig>\n <msapplication>\n <tile>\n <square150x150logo"
},
{
"path": "docs/.vuepress/public/robots.txt",
"chars": 134,
"preview": "# PurgeCSS Documentation\n# https://purgecss.com\n\nUser-agent: *\nAllow: /\n\n# Sitemap location\nSitemap: https://purgecss.co"
},
{
"path": "docs/.vuepress/public/site.webmanifest",
"chars": 582,
"preview": "{\n \"name\": \"PurgeCSS - Remove unused CSS\",\n \"short_name\": \"PurgeCSS\",\n \"description\": \"PurgeCSS is a tool to re"
},
{
"path": "docs/.vuepress/styles/index.scss",
"chars": 4885,
"preview": "// $accentColor = #2b668c\n:root {\n // brand colors\n --c-brand: #2b668c;\n --c-brand-light: #2b668c;\n\n // background c"
},
{
"path": "docs/.vuepress/theme/client.ts",
"chars": 169,
"preview": "import { defineClientConfig } from \"@vuepress/client\";\nimport Layout from \"./layouts/Layout.vue\";\n\nexport default define"
},
{
"path": "docs/.vuepress/theme/components/CarbonAds.vue",
"chars": 1313,
"preview": "<template>\n <div class=\"carbon-ads\"></div>\n</template>\n<script>\nexport default {\n name: 'CarbonAds',\n mounted () {\n "
},
{
"path": "docs/.vuepress/theme/index.ts",
"chars": 457,
"preview": "import { getDirname, path } from \"@vuepress/utils\";\nimport { defaultTheme, DefaultThemeOptions } from \"@vuepress/theme-d"
},
{
"path": "docs/.vuepress/theme/layouts/Layout.vue",
"chars": 287,
"preview": "<template>\n <Layout>\n <template #sidebar-top>\n <CarbonAds/>\n </template>\n </Layout>\n</template>\n\n<script se"
},
{
"path": "docs/CLI.md",
"chars": 4407,
"preview": "---\ntitle: CLI\nlang: en-US\nmeta:\n - name: description\n content: PurgeCSS is a tool for removing CSS that you're not "
},
{
"path": "docs/README.md",
"chars": 2405,
"preview": "---\nhome: true\ntitle: PurgeCSS - Remove unused CSS\nlang: en-US\nmeta:\n - name: description\n content: PurgeCSS is a to"
},
{
"path": "docs/ant_design.md",
"chars": 2631,
"preview": "---\ntitle: Ant Design\nlang: en-US\nmeta:\n - name: description\n content: PurgeCSS can be used with Ant Design but requ"
},
{
"path": "docs/api.md",
"chars": 2176,
"preview": "---\ntitle: Programmatic API\nlang: en-US\nmeta:\n - name: description\n content: PurgeCSS is a tool for removing CSS tha"
},
{
"path": "docs/comparison.md",
"chars": 3341,
"preview": "---\ntitle: Comparison\nlang: en-US\nmeta:\n - name: description\n content: Comparison between PurgeCSS and similar tools"
},
{
"path": "docs/configuration.md",
"chars": 10248,
"preview": "---\ntitle: Configuration\nlang: en-US\nmeta:\n - name: description\n content: PurgeCSS has a list of options that allow "
},
{
"path": "docs/css_modules.md",
"chars": 4263,
"preview": "---\ntitle: CSS modules\nlang: en-US\nmeta:\n - name: description\n content: PurgeCSS can be used with CSS modules by mod"
},
{
"path": "docs/extractors.md",
"chars": 3910,
"preview": "---\ntitle: Extractors\nlang: en-US\nmeta:\n - name: description\n content: PurgeCSS relies on extractors to get the list"
},
{
"path": "docs/fr/CLI.md",
"chars": 4730,
"preview": "---\ntitle: CLI\nlang: fr-FR\nmeta:\n - name: description\n content: PurgeCSS est un outil pour supprimer le CSS que vous"
},
{
"path": "docs/fr/README.md",
"chars": 2592,
"preview": "---\nhome: true\ntitle: PurgeCSS - Supprimer le CSS inutilisé\nlang: fr-FR\nmeta:\n - name: description\n content: PurgeCS"
},
{
"path": "docs/fr/ant_design.md",
"chars": 2834,
"preview": "---\ntitle: Ant Design\nlang: fr-FR\nmeta:\n - name: description\n content: PurgeCSS peut être utilisé avec Ant Design ma"
},
{
"path": "docs/fr/api.md",
"chars": 2307,
"preview": "---\ntitle: API Programmatique\nlang: fr-FR\nmeta:\n - name: description\n content: PurgeCSS est un outil pour supprimer "
},
{
"path": "docs/fr/comparison.md",
"chars": 3828,
"preview": "---\ntitle: Comparaison\nlang: fr-FR\nmeta:\n - name: description\n content: Comparaison entre PurgeCSS et des outils sim"
},
{
"path": "docs/fr/configuration.md",
"chars": 11197,
"preview": "---\ntitle: Configuration\nlang: fr-FR\nmeta:\n - name: description\n content: PurgeCSS dispose d'une liste d'options qui"
},
{
"path": "docs/fr/css_modules.md",
"chars": 4419,
"preview": "---\ntitle: Modules CSS\nlang: fr-FR\nmeta:\n - name: description\n content: PurgeCSS peut être utilisé avec les modules "
},
{
"path": "docs/fr/extractors.md",
"chars": 4436,
"preview": "---\ntitle: Extractors\nlang: fr-FR\nmeta:\n - name: description\n content: PurgeCSS s'appuie sur des extractors pour obt"
},
{
"path": "docs/fr/getting-started.md",
"chars": 2081,
"preview": "---\ntitle: Commencer\nlang: fr-FR\nmeta:\n - name: description\n content: PurgeCSS est un outil pour supprimer le CSS in"
},
{
"path": "docs/fr/guides/hugo.md",
"chars": 4944,
"preview": "---\ntitle: Hugo\nlang: fr-FR\nmeta:\n - name: description\n content: PurgeCSS peut être utilisé avec Hugo via le traitem"
},
{
"path": "docs/fr/guides/next.md",
"chars": 5700,
"preview": "---\ntitle: Next.js\nlang: fr-FR\nmeta:\n - name: description\n content: PurgeCSS peut être utilisé avec Next.js grâce au"
},
{
"path": "docs/fr/guides/nuxt.md",
"chars": 5269,
"preview": "---\ntitle: Nuxt.js\nlang: fr-FR\nmeta:\n - name: description\n content: PurgeCSS peut être utilisé avec Nuxt.js grâce au"
},
{
"path": "docs/fr/guides/razzle.md",
"chars": 4276,
"preview": "---\ntitle: Razzle\nlang: fr-FR\nmeta:\n - name: description\n content: PurgeCSS peut être utilisé avec Razzle grâce au p"
},
{
"path": "docs/fr/guides/react.md",
"chars": 3271,
"preview": "---\ntitle: React\nlang: fr-FR\nmeta:\n - name: description\n content: PurgeCSS peut être utilisé avec React.js en utilis"
},
{
"path": "docs/fr/guides/vue.md",
"chars": 1956,
"preview": "---\ntitle: Vue\nlang: fr-FR\nmeta:\n - name: description\n content: PurgeCSS peut être utilisé avec Vue grâce au plugin "
},
{
"path": "docs/fr/guides/wordpress.md",
"chars": 1973,
"preview": "---\ntitle: WordPress\nlang: fr-FR\nmeta:\n - name: description\n content: PurgeCSS peut être utilisé pour le développeme"
},
{
"path": "docs/fr/introduction.md",
"chars": 2233,
"preview": "---\ntitle: Introduction\nlang: fr-FR\nmeta:\n - name: description\n content: PurgeCSS est un outil pour supprimer le CSS"
},
{
"path": "docs/fr/plugins/gatsby.md",
"chars": 4738,
"preview": "---\ntitle: Gatsby\nlang: fr-FR\nmeta:\n - name: description\n content: PurgeCSS peut être utilisé avec Gatsby grâce au p"
},
{
"path": "docs/fr/plugins/grunt.md",
"chars": 4165,
"preview": "---\ntitle: Grunt\nlang: fr-FR\nmeta:\n - name: description\n content: PurgeCSS est un outil pour supprimer le CSS que vo"
},
{
"path": "docs/fr/plugins/gulp.md",
"chars": 1852,
"preview": "---\ntitle: Gulp\nlang: fr-FR\nmeta:\n - name: description\n content: PurgeCSS est un outil pour supprimer le CSS inutili"
},
{
"path": "docs/fr/plugins/postcss.md",
"chars": 2667,
"preview": "---\ntitle: PostCSS\nlang: fr-FR\nmeta:\n - name: description\n content: PurgeCSS est un outil pour supprimer le CSS que "
},
{
"path": "docs/fr/plugins/webpack.md",
"chars": 4668,
"preview": "---\ntitle: Webpack\nlang: fr-FR\nmeta:\n - name: description\n content: PurgeCSS est un outil pour supprimer le CSS que "
},
{
"path": "docs/fr/safelisting.md",
"chars": 3809,
"preview": "---\ntitle: Safelisting\nlang: fr-FR\nmeta:\n - name: description\n content: Pour éviter que PurgeCSS supprime du CSS inu"
},
{
"path": "docs/getting-started.md",
"chars": 1893,
"preview": "---\ntitle: Getting Started\nlang: en-US\nmeta:\n - name: description\n content: PurgeCSS is a tool to remove unused CSS "
},
{
"path": "docs/guides/hugo.md",
"chars": 4411,
"preview": "---\ntitle: Hugo\nlang: en-US\nmeta:\n - name: description\n content: PurgeCSS can be used with Hugo via Hugo Pipes asset"
},
{
"path": "docs/guides/next.md",
"chars": 5299,
"preview": "---\ntitle: Next.js\nlang: en-US\nmeta:\n - name: description\n content: PurgeCSS can be used with Next.js with the plugi"
},
{
"path": "docs/guides/nuxt.md",
"chars": 4883,
"preview": "---\ntitle: Nuxt.js\nlang: en-US\nmeta:\n - name: description\n content: PurgeCSS can be used with Nuxt.js with the plugi"
},
{
"path": "docs/guides/razzle.md",
"chars": 4109,
"preview": "---\ntitle: Razzle\nlang: en-US\nmeta:\n - name: description\n content: PurgeCSS can be used with Razzle with the plugin "
},
{
"path": "docs/guides/react.md",
"chars": 3046,
"preview": "---\ntitle: React\nlang: en-US\nmeta:\n - name: description\n content: PurgeCSS can be used with React.js by using craco,"
},
{
"path": "docs/guides/vue.md",
"chars": 1832,
"preview": "---\ntitle: Vue\nlang: en-US\nmeta:\n - name: description\n content: PurgeCSS can be used with Vue with the webpack plugi"
},
{
"path": "docs/guides/wordpress.md",
"chars": 1759,
"preview": "---\ntitle: WordPress\nlang: en-US\nmeta:\n - name: description\n content: PurgeCSS can be used for WordPress development"
},
{
"path": "docs/introduction.md",
"chars": 2091,
"preview": "---\ntitle: Introduction\nlang: en-US\nmeta:\n - name: description\n content: PurgeCSS is a tool to remove unused CSS fro"
},
{
"path": "docs/plugins/gatsby.md",
"chars": 4319,
"preview": "---\ntitle: Gatsby\nlang: en-US\nmeta:\n - name: description\n content: PurgeCSS can be used with Gatsby with the plugin "
},
{
"path": "docs/plugins/grunt.md",
"chars": 3859,
"preview": "---\ntitle: Grunt\nlang: en-US\nmeta:\n - name: description\n content: PurgeCSS is a tool for removing CSS that you're no"
},
{
"path": "docs/plugins/gulp.md",
"chars": 1733,
"preview": "---\ntitle: Gulp\nlang: en-US\nmeta:\n - name: description\n content: PurgeCSS is a tool to remove unused CSS from your p"
},
{
"path": "docs/plugins/postcss.md",
"chars": 2492,
"preview": "---\ntitle: PostCSS\nlang: en-US\nmeta:\n - name: description\n content: PurgeCSS is a tool for removing CSS that you're "
},
{
"path": "docs/plugins/webpack.md",
"chars": 4325,
"preview": "---\ntitle: Webpack\nlang: en-US\nmeta:\n - name: description\n content: PurgeCSS is a tool for removing CSS that you're "
},
{
"path": "docs/safelisting.md",
"chars": 3305,
"preview": "---\ntitle: Safelisting\nlang: en-US\nmeta:\n - name: description\n content: To avoid PurgeCSS to remove unused CSS that "
},
{
"path": "eslint.config.mjs",
"chars": 1110,
"preview": "import typescriptEslint from \"@typescript-eslint/eslint-plugin\";\nimport tsdoc from \"eslint-plugin-tsdoc\";\nimport globals"
},
{
"path": "firebase.json",
"chars": 170,
"preview": "{\n \"hosting\": {\n \"cleanUrls\": true,\n \"public\": \"docs/.vuepress/dist\",\n \"ignore\": [\n \"firebase.json\",\n "
},
{
"path": "jest.config.ts",
"chars": 907,
"preview": "import type { JestConfigWithTsJest } from \"ts-jest\";\n\nconst config: JestConfigWithTsJest = {\n preset: \"ts-jest\",\n cove"
},
{
"path": "lerna.json",
"chars": 86,
"preview": "{\n \"$schema\": \"node_modules/lerna/schemas/lerna-schema.json\",\n \"version\": \"8.0.0\"\n}\n"
},
{
"path": "package.json",
"chars": 1679,
"preview": "{\n \"name\": \"root\",\n \"private\": true,\n \"workspaces\": [\n \"packages/*\"\n ],\n \"devDependencies\": {\n \"@eslint/eslin"
},
{
"path": "packages/grunt-purgecss/Gruntfile.js",
"chars": 778,
"preview": "module.exports = grunt => {\n\n // Project configuration.\n grunt.initConfig({\n // Configuration to be run (and then t"
},
{
"path": "packages/grunt-purgecss/README.md",
"chars": 3613,
"preview": "# grunt-purgecss\n\n[](https://www.npmjs.com/package/grunt-purgecss"
},
{
"path": "packages/grunt-purgecss/__tests__/fixtures/expected/footer.css",
"chars": 0,
"preview": ""
},
{
"path": "packages/grunt-purgecss/__tests__/fixtures/expected/menu.css",
"chars": 0,
"preview": ""
},
{
"path": "packages/grunt-purgecss/__tests__/fixtures/expected/profile.css",
"chars": 0,
"preview": ""
},
{
"path": "packages/grunt-purgecss/__tests__/fixtures/expected/simple.css",
"chars": 32,
"preview": ".used-class {\n color: black;\n}\n"
},
{
"path": "packages/grunt-purgecss/__tests__/fixtures/src/footer.css",
"chars": 48,
"preview": ".footer-unused-class {\n background: black;\n}\n"
},
{
"path": "packages/grunt-purgecss/__tests__/fixtures/src/menu.css",
"chars": 44,
"preview": ".menu-unused-class {\n background: red;\n}\n"
},
{
"path": "packages/grunt-purgecss/__tests__/fixtures/src/profile.css",
"chars": 51,
"preview": ".profile-unused-class {\n background: hotpink;\n}\n"
},
{
"path": "packages/grunt-purgecss/__tests__/fixtures/src/simple/simple.css",
"chars": 111,
"preview": ".used-class {\n color: black;\n}\n\n.unused-class {\n color: black;\n}\n\n.another-one-not-found {\n color: black;\n}\n"
},
{
"path": "packages/grunt-purgecss/__tests__/fixtures/src/simple/simple.html",
"chars": 71,
"preview": "<html>\n\n <body>\n\n <div class=\"used-class\"></div>\n </body>\n\n</html>"
},
{
"path": "packages/grunt-purgecss/__tests__/index.test.ts",
"chars": 1051,
"preview": "import { execSync } from \"child_process\";\nimport * as fs from \"fs\";\nimport * as path from \"path\";\n\ndescribe(\"Purgecss gr"
},
{
"path": "packages/grunt-purgecss/build.ts",
"chars": 696,
"preview": "import typescript from \"@rollup/plugin-typescript\";\nimport { buildRollup, createRollupConfig } from \"../../scripts/build"
},
{
"path": "packages/grunt-purgecss/jest.config.ts",
"chars": 110,
"preview": "import { createConfig } from \"./../../jest.config\";\nexport default createConfig(__dirname, \"grunt-purgecss\");\n"
},
{
"path": "packages/grunt-purgecss/package.json",
"chars": 926,
"preview": "{\n \"name\": \"grunt-purgecss\",\n \"version\": \"8.0.0\",\n \"description\": \"Grunt plugin for PurgeCSS\",\n \"author\": \"Ffloriel\""
},
{
"path": "packages/grunt-purgecss/src/index.ts",
"chars": 1435,
"preview": "import { PurgeCSS, defaultOptions, UserDefinedOptions } from \"purgecss\";\n\nfunction getAvailableFiles(\n grunt: IGrunt,\n "
},
{
"path": "packages/grunt-purgecss/src/types/index.d.ts",
"chars": 16,
"preview": "import \"grunt\";\n"
},
{
"path": "packages/grunt-purgecss/tsconfig.json",
"chars": 236,
"preview": "{\n \"extends\": \"./../../tsconfig.json\",\n \"compilerOptions\": {\n \"declaration\": false,\n \"baseUrl\": \".\",\n \""
},
{
"path": "packages/gulp-purgecss/README.md",
"chars": 1822,
"preview": "# gulp-purgecss\n\n[](https://www.npmjs.com/package/gulp-purgecss)\n["
},
{
"path": "packages/gulp-purgecss/__tests__/buffer.test.ts",
"chars": 993,
"preview": "import gulpPurgecss from \"../src/\";\nimport File from \"vinyl\";\nimport internal from \"stream\";\n\ndescribe(\"gulp-purgecss wi"
},
{
"path": "packages/gulp-purgecss/__tests__/stream.test.ts",
"chars": 1362,
"preview": "import es from \"event-stream\";\nimport internal, { PassThrough } from \"stream\";\nimport File from \"vinyl\";\nimport gulpPurg"
},
{
"path": "packages/gulp-purgecss/__tests__/test.html",
"chars": 95,
"preview": "<html>\n <body>\n <div class=\"used\"></div>\n <a href=\"#\"></a>\n </body>\n</html>"
},
{
"path": "packages/gulp-purgecss/build.ts",
"chars": 614,
"preview": "import {\n buildRollup,\n createRollupConfig,\n extractAPI,\n} from \"../../scripts/build\";\nimport { promises as asyncFs }"
},
{
"path": "packages/gulp-purgecss/jest.config.ts",
"chars": 109,
"preview": "import { createConfig } from \"./../../jest.config\";\nexport default createConfig(__dirname, \"gulp-purgecss\");\n"
},
{
"path": "packages/gulp-purgecss/package.json",
"chars": 1281,
"preview": "{\n \"name\": \"gulp-purgecss\",\n \"version\": \"8.0.0\",\n \"description\": \"Gulp plugin for purgecss\",\n \"author\": \"Ffloriel\",\n"
},
{
"path": "packages/gulp-purgecss/src/index.ts",
"chars": 3168,
"preview": "import glob from \"fast-glob\";\nimport PluginError from \"plugin-error\";\nimport { PurgeCSS } from \"purgecss\";\nimport * as i"
},
{
"path": "packages/gulp-purgecss/src/types/index.ts",
"chars": 224,
"preview": "import { UserDefinedOptions as PurgeCSSUserDefinedOptions } from \"purgecss\";\n\n/**\n * @public\n */\nexport interface UserDe"
},
{
"path": "packages/gulp-purgecss/tsconfig.json",
"chars": 404,
"preview": "{\n \"extends\": \"./../../tsconfig.json\",\n \"compilerOptions\": {\n \"declaration\": true,\n \"outDir\": \"./lib\",\n "
},
{
"path": "packages/postcss-purgecss/README.md",
"chars": 4407,
"preview": "# PostCSS Purgecss\n![David (path)](https://img.shields.io/david/FullHuman/purgecss?path=packages%2Fpostcss-purgecss&styl"
},
{
"path": "packages/postcss-purgecss/__tests__/fixtures/expected/font-keyframes.css",
"chars": 1526,
"preview": "@font-face {\n font-family: 'Cerebri Sans';\n font-weight: 400;\n font-style: normal;\n src: url('../fonts/CerebriSans-R"
},
{
"path": "packages/postcss-purgecss/__tests__/fixtures/expected/other-plugins.css",
"chars": 41,
"preview": ".prefixed-used-class {\n color: black;\n}\n"
},
{
"path": "packages/postcss-purgecss/__tests__/fixtures/expected/simple.css",
"chars": 32,
"preview": ".used-class {\n color: black;\n}\n"
},
{
"path": "packages/postcss-purgecss/__tests__/fixtures/src/config-test/expected.css",
"chars": 1526,
"preview": "@font-face {\n font-family: 'Cerebri Sans';\n font-weight: 400;\n font-style: normal;\n src: url('../fonts/CerebriSans-R"
},
{
"path": "packages/postcss-purgecss/__tests__/fixtures/src/config-test/index.css",
"chars": 1790,
"preview": "@font-face {\n font-family: 'Cerebri Sans';\n font-weight: 400;\n font-style: normal;\n src: url('../fonts/CerebriSans-R"
},
{
"path": "packages/postcss-purgecss/__tests__/fixtures/src/config-test/index.html",
"chars": 92,
"preview": "<div class=\"bounce\">\n</div>\n\n<div class=\"scale-spin\">\n</div>\n\n<div class=\"used used2\"></div>"
},
{
"path": "packages/postcss-purgecss/__tests__/fixtures/src/config-test/purgecss.config.js",
"chars": 77,
"preview": "module.exports = {\n content: [`${__dirname}/index.html`],\n fontFace: true\n}"
},
{
"path": "packages/postcss-purgecss/__tests__/fixtures/src/font-keyframes/font-keyframes.css",
"chars": 1790,
"preview": "@font-face {\n font-family: 'Cerebri Sans';\n font-weight: 400;\n font-style: normal;\n src: url('../fonts/CerebriSans-R"
},
{
"path": "packages/postcss-purgecss/__tests__/fixtures/src/font-keyframes/font-keyframes.html",
"chars": 92,
"preview": "<div class=\"bounce\">\n</div>\n\n<div class=\"scale-spin\">\n</div>\n\n<div class=\"used used2\"></div>"
},
{
"path": "packages/postcss-purgecss/__tests__/fixtures/src/other-plugins/other-plugins.css",
"chars": 111,
"preview": ".used-class {\n color: black;\n}\n\n.unused-class {\n color: black;\n}\n\n.another-one-not-found {\n color: black;\n}\n"
},
{
"path": "packages/postcss-purgecss/__tests__/fixtures/src/other-plugins/other-plugins.html",
"chars": 81,
"preview": "<html>\n\n <body>\n\n <div class=\"prefixed-used-class\"></div>\n </body>\n\n</html>\n"
},
{
"path": "packages/postcss-purgecss/__tests__/fixtures/src/simple/simple.css",
"chars": 111,
"preview": ".used-class {\n color: black;\n}\n\n.unused-class {\n color: black;\n}\n\n.another-one-not-found {\n color: black;\n}\n"
},
{
"path": "packages/postcss-purgecss/__tests__/fixtures/src/simple/simple.html",
"chars": 71,
"preview": "<html>\n\n <body>\n\n <div class=\"used-class\"></div>\n </body>\n\n</html>"
},
{
"path": "packages/postcss-purgecss/__tests__/index.test.ts",
"chars": 3822,
"preview": "import * as fs from \"fs\";\nimport postcss from \"postcss\";\n\nimport purgeCSSPlugin from \"../src/\";\n\ndescribe(\"Purgecss post"
},
{
"path": "packages/postcss-purgecss/build.ts",
"chars": 566,
"preview": "import {\n buildRollup,\n createRollupConfig,\n extractAPI,\n} from \"../../scripts/build\";\nimport { promises as asyncFs }"
},
{
"path": "packages/postcss-purgecss/jest.config.ts",
"chars": 112,
"preview": "import { createConfig } from \"./../../jest.config\";\nexport default createConfig(__dirname, \"postcss-purgecss\");\n"
},
{
"path": "packages/postcss-purgecss/package.json",
"chars": 932,
"preview": "{\n \"name\": \"@fullhuman/postcss-purgecss\",\n \"version\": \"8.0.0\",\n \"description\": \"PostCSS plugin for PurgeCSS\",\n \"auth"
},
{
"path": "packages/postcss-purgecss/src/index.ts",
"chars": 3301,
"preview": "/**\n * PostCSS Plugin for PurgeCSS\n *\n * Most bundlers and frameworks to build websites are using PostCSS.\n * The easies"
},
{
"path": "packages/postcss-purgecss/src/types/index.ts",
"chars": 640,
"preview": "import {\n UserDefinedOptions as PurgeCSSUserDefinedOptions,\n RawContent,\n} from \"purgecss\";\n\nexport {\n UserDefinedOpt"
},
{
"path": "packages/postcss-purgecss/tsconfig.json",
"chars": 313,
"preview": "{\n \"extends\": \"./../../tsconfig.json\",\n \"compilerOptions\": {\n \"declaration\": true,\n \"outDir\": \"./lib\",\n "
},
{
"path": "packages/purgecss/README.md",
"chars": 2938,
"preview": "# PurgeCSS\n\n[](https://www.npmjs.com/package/purgecss)\n"
},
{
"path": "packages/purgecss/__tests__/attributes.test.ts",
"chars": 2932,
"preview": "import { PurgeCSS } from \"./../src/index\";\nimport { ROOT_TEST_EXAMPLES } from \"./utils\";\nimport purgecssFromHtml from \"p"
},
{
"path": "packages/purgecss/__tests__/chaining-rules.test.ts",
"chars": 655,
"preview": "import { PurgeCSS } from \"./../src/index\";\n\nimport { ROOT_TEST_EXAMPLES, notFindInCSS } from \"./utils\";\n\ndescribe(\"chain"
},
{
"path": "packages/purgecss/__tests__/cli/cli-config-file.test.ts",
"chars": 2931,
"preview": "import { Command } from \"commander\";\nimport * as fs from \"fs\";\nimport * as path from \"path\";\nimport { parseCommandOption"
},
{
"path": "packages/purgecss/__tests__/cli/cli-console-output.test.ts",
"chars": 821,
"preview": "import { Command } from \"commander\";\nimport { parseCommandOptions, run } from \"../../src/bin\";\nimport { CLI_TEST_FOLDER "
},
{
"path": "packages/purgecss/__tests__/cli/cli-file-output.test.ts",
"chars": 1106,
"preview": "import { Command } from \"commander\";\nimport { promises as asyncFs } from \"fs\";\nimport * as path from \"path\";\nimport { pa"
},
{
"path": "packages/purgecss/__tests__/cli/cli-multiple-files-output.test.ts",
"chars": 1313,
"preview": "import { Command } from \"commander\";\nimport { promises as asyncFs } from \"fs\";\nimport * as path from \"path\";\nimport { pa"
},
{
"path": "packages/purgecss/__tests__/cli/cli-options.test.ts",
"chars": 1293,
"preview": "import { Command } from \"commander\";\nimport { defaultOptions, Options, standardizeSafelist } from \"../../src\";\nimport { "
},
{
"path": "packages/purgecss/__tests__/cli/cli-preserve-paths.test.ts",
"chars": 3360,
"preview": "import { Command } from \"commander\";\nimport { promises as asyncFs } from \"fs\";\nimport * as path from \"path\";\nimport { pa"
},
{
"path": "packages/purgecss/__tests__/comments.test.ts",
"chars": 1485,
"preview": "import { PurgeCSS } from \"./../src/index\";\nimport { findInCSS, ROOT_TEST_EXAMPLES } from \"./utils\";\n\ndescribe(\"ignore co"
},
{
"path": "packages/purgecss/__tests__/css-variables.test.ts",
"chars": 1314,
"preview": "import { PurgeCSS } from \"./../src/index\";\nimport { ROOT_TEST_EXAMPLES } from \"./utils\";\n\ndescribe(\"purge unused css var"
},
{
"path": "packages/purgecss/__tests__/delimited.test.ts",
"chars": 882,
"preview": "import { PurgeCSS } from \"./../src/index\";\nimport { ROOT_TEST_EXAMPLES } from \"./utils\";\n\ndescribe(\"delimited\", () => {\n"
},
{
"path": "packages/purgecss/__tests__/font-faces.test.ts",
"chars": 870,
"preview": "import { PurgeCSS } from \"./../src/index\";\nimport { ROOT_TEST_EXAMPLES } from \"./utils\";\n\ndescribe(\"purge unused font-fa"
},
{
"path": "packages/purgecss/__tests__/globs.test.ts",
"chars": 823,
"preview": "import { PurgeCSS } from \"../src/\";\nimport { ROOT_TEST_EXAMPLES } from \"./utils\";\n\ndescribe(\"Glob\", () => {\n it(\"glob e"
},
{
"path": "packages/purgecss/__tests__/index.test.ts",
"chars": 4250,
"preview": "import purgecssFromHtml from \"purgecss-from-html\";\nimport { ExtractorResult } from \"../src/types\";\nimport { PurgeCSS } f"
},
{
"path": "packages/purgecss/__tests__/keyframes.test.ts",
"chars": 4547,
"preview": "import { PurgeCSS } from \"./../src/index\";\n\nimport { ROOT_TEST_EXAMPLES } from \"./utils\";\n\ndescribe(\"keyframes\", () => {"
},
{
"path": "packages/purgecss/__tests__/media-queries.test.ts",
"chars": 1048,
"preview": "import { PurgeCSS } from \"./../src/index\";\nimport { ROOT_TEST_EXAMPLES } from \"./utils\";\n\ndescribe(\"media queries\", () ="
},
{
"path": "packages/purgecss/__tests__/performance.test.ts",
"chars": 944,
"preview": "import { PurgeCSS } from \"../src/index\";\n\ndescribe(\"performance\", () => {\n it(\"should not suffer from tons of content a"
},
{
"path": "packages/purgecss/__tests__/pseudo-class.test.ts",
"chars": 4894,
"preview": "import { PurgeCSS } from \"./../src/index\";\nimport { findInCSS, ROOT_TEST_EXAMPLES } from \"./utils\";\n\ndescribe(\":not pseu"
},
{
"path": "packages/purgecss/__tests__/pseudo-elements.test.ts",
"chars": 1114,
"preview": "import { PurgeCSS } from \"./../src/index\";\nimport { ROOT_TEST_EXAMPLES } from \"./utils\";\n\ndescribe(\"pseudo elements\", ()"
},
{
"path": "packages/purgecss/__tests__/purgecss.config.js",
"chars": 68,
"preview": "module.exports = {\n content: ['index.html'],\n css: ['style.css']\n}"
},
{
"path": "packages/purgecss/__tests__/raw-css-name.test.ts",
"chars": 1329,
"preview": "import { PurgeCSS } from \"../src/index\";\n\ndescribe(\"Raw CSS optional filename\", () => {\n it(\"Should return the `name` i"
},
{
"path": "packages/purgecss/__tests__/rejected.test.ts",
"chars": 1927,
"preview": "import { PurgeCSS } from \"./../src/index\";\nimport { ROOT_TEST_EXAMPLES } from \"./utils\";\n\ndescribe(\"rejected\", () => {\n "
},
{
"path": "packages/purgecss/__tests__/rejectedCss.test.ts",
"chars": 1777,
"preview": "import { PurgeCSS } from \"./../src/index\";\nimport { ROOT_TEST_EXAMPLES } from \"./utils\";\n\ndescribe(\"rejectedCss\", () => "
},
{
"path": "packages/purgecss/__tests__/safelist.test.ts",
"chars": 5437,
"preview": "import { PurgeCSS } from \"./../src/index\";\n\nimport { ROOT_TEST_EXAMPLES, findInCSS, notFindInCSS } from \"./utils\";\n\ndesc"
},
{
"path": "packages/purgecss/__tests__/skipped-content.test.ts",
"chars": 764,
"preview": "import { PurgeCSS } from \"./../src/index\";\n\nimport { ROOT_TEST_EXAMPLES } from \"./utils\";\n\ndescribe(\"skipped-content\", ("
},
{
"path": "packages/purgecss/__tests__/sourcemap.test.ts",
"chars": 3038,
"preview": "import { PurgeCSS } from \"../src/\";\nimport { ROOT_TEST_EXAMPLES } from \"./utils\";\n\ndescribe(\"source map option\", () => {"
},
{
"path": "packages/purgecss/__tests__/test_examples/assets/bootstrap.css",
"chars": 153108,
"preview": "@charset \"UTF-8\";/*!\n * Bootstrap v5.0.0-beta1 (https://getbootstrap.com/)\n * Copyright 2011-2020 The Bootstrap Authors\n"
},
{
"path": "packages/purgecss/__tests__/test_examples/assets/tailwind.css",
"chars": 2869998,
"preview": "/*! modern-normalize v1.0.0 | MIT License | https://github.com/sindresorhus/modern-normalize */*,::after,::before{box-si"
},
{
"path": "packages/purgecss/__tests__/test_examples/attributes/attribute_selector.css",
"chars": 1173,
"preview": "/* CSS [attribute] Selector */\ninput[checked] {\n color: red;\n}\n\na[invented] {\n color: red;\n}\n\na[target] {\n color:red;"
},
{
"path": "packages/purgecss/__tests__/test_examples/attributes/attribute_selector.html",
"chars": 289,
"preview": "<html lang=\"en-gb\">\n\n <input title=\"truc flower pretty\" />\n <input value=\"\" checked/>\n <a href=\"statements.pdf\" targe"
},
{
"path": "packages/purgecss/__tests__/test_examples/chaining-rules/index.css",
"chars": 458,
"preview": ".parent1 a{\n color:red;\n}\n.parent1 p{\n color:red;\n}\n.parent1 h1{\n color:red;\n}\n.parent1.def{\n color:red;\n}\n."
},
{
"path": "packages/purgecss/__tests__/test_examples/chaining-rules/index.html",
"chars": 439,
"preview": "<html>\n\n<head>\n <title>TODO supply a title</title>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"widt"
},
{
"path": "packages/purgecss/__tests__/test_examples/cli/nested/src/content.html",
"chars": 209,
"preview": "<!DOCTYPE html>\n<html>\n<head>\n <title>Nested Test</title>\n</head>\n<body>\n <div class=\"nested-class\">Nested</div>\n <di"
},
{
"path": "packages/purgecss/__tests__/test_examples/cli/nested/src/level1/level2/nested.css",
"chars": 72,
"preview": ".nested-class {\n color: blue;\n}\n\n.unused-nested {\n background: red;\n}\n"
},
{
"path": "packages/purgecss/__tests__/test_examples/cli/nested/src/level1/middle.css",
"chars": 76,
"preview": ".middle-class {\n color: green;\n}\n\n.unused-middle {\n background: yellow;\n}\n"
},
{
"path": "packages/purgecss/__tests__/test_examples/cli/nested/src/root.css",
"chars": 73,
"preview": ".root-class {\n color: purple;\n}\n\n.unused-root {\n background: orange;\n}\n"
},
{
"path": "packages/purgecss/__tests__/test_examples/cli/simple/src/content.html",
"chars": 173,
"preview": "<html>\n\n<head>\n <title>Purgecss webpack test</title>\n</head>\n\n<body>\n <div class=\"md:w-2/3\"></div>\n <div class=\"hello"
},
{
"path": "packages/purgecss/__tests__/test_examples/cli/simple/src/index.js",
"chars": 21,
"preview": "import './style.css'\n"
},
{
"path": "packages/purgecss/__tests__/test_examples/cli/simple/src/style.css",
"chars": 116,
"preview": ".hello {\n color: red;\n}\n\n.unused {\n color: blue;\n}\n\n.safelisted {\n color: green;\n}\n\nmd\\:w-2\\/3 {\n color: red;\n}\n"
},
{
"path": "packages/purgecss/__tests__/test_examples/cli/simple/src/style2.css",
"chars": 55,
"preview": ".world {\n color: green;\n}\n\n.unused {\n color: blue;\n}\n"
},
{
"path": "packages/purgecss/__tests__/test_examples/comments/ignore_comment.css",
"chars": 109,
"preview": "/* purgecss ignore */\nh1 {\n color: blue;\n \n}\n\nh3 {\n /* purgecss ignore current */\n color: red;\n}\n"
},
{
"path": "packages/purgecss/__tests__/test_examples/comments/ignore_comment.html",
"chars": 50,
"preview": "<html>\n\n<body>\n <h2>Hmmmm</h2>\n</body>\n\n</html>"
},
{
"path": "packages/purgecss/__tests__/test_examples/comments/ignore_comment_range.css",
"chars": 252,
"preview": "/* purgecss start ignore */\nh1 {\n color: blue;\n}\n\nh3 {\n color: green;\n}\n/* purgecss end ignore */\n\nh4 {\n color: purpl"
},
{
"path": "packages/purgecss/__tests__/test_examples/comments/ignore_comment_range.html",
"chars": 50,
"preview": "<html>\n\n<body>\n <h2>Hmmmm</h2>\n</body>\n\n</html>"
},
{
"path": "packages/purgecss/__tests__/test_examples/css-variables/variables.css",
"chars": 1480,
"preview": ":root {\n --color-first: var(--wrong-order);\n --primary-color: blue;\n --secondary-color: indigo;\n --tertiary-color: a"
},
{
"path": "packages/purgecss/__tests__/test_examples/css-variables/variables.html",
"chars": 41,
"preview": "<button class=\"button\">Click me!</button>"
},
{
"path": "packages/purgecss/__tests__/test_examples/delimited/delimited.css",
"chars": 45,
"preview": ".unused-class-name, h1, p a{\n color: red;\n}\n"
},
{
"path": "packages/purgecss/__tests__/test_examples/delimited/delimited.html",
"chars": 28,
"preview": "<h1>hello</h1>\n<p>world</p>\n"
},
{
"path": "packages/purgecss/__tests__/test_examples/font-faces/font_face.css",
"chars": 1060,
"preview": "@font-face {\n font-family: 'Cerebri Sans';\n font-weight: 400;\n font-style: normal;\n src: url('../fonts/Cereb"
},
{
"path": "packages/purgecss/__tests__/test_examples/font-faces/font_face.html",
"chars": 91,
"preview": "<html>\n\n<body>\n <div class=\"used\"></div>\n <div class=\"used2\"></div>\n</body>\n\n</html>\n"
},
{
"path": "packages/purgecss/__tests__/test_examples/keyframes/index.css",
"chars": 523,
"preview": "@-webkit-keyframes rotateAni {\n from {\n transform: rotate(0deg);\n }\n to {\n transform: rotate(359deg);\n }\n}\n@ke"
},
{
"path": "packages/purgecss/__tests__/test_examples/keyframes/index.html",
"chars": 19,
"preview": "<hr class=\"rotate\">"
},
{
"path": "packages/purgecss/__tests__/test_examples/keyframes/keyframes.css",
"chars": 820,
"preview": "@keyframes bounce {\n from, 20%, 53%, 80%, to {\n animation-timing-function: cubic-bezier(0.3, 0.1, 0.9, 1.000);"
},
{
"path": "packages/purgecss/__tests__/test_examples/keyframes/keyframes.html",
"chars": 61,
"preview": "<div class=\"bounce\">\n</div>\n\n<div class=\"scale-spin\">\n</div>\n"
},
{
"path": "packages/purgecss/__tests__/test_examples/media-queries/media_queries.css",
"chars": 413,
"preview": "@media (max-width: 600px) {\n div.media-class {\n color: black;\n }\n\n .alone, .unused-class {\n color: black;\n }\n\n"
},
{
"path": "packages/purgecss/__tests__/test_examples/media-queries/media_queries.html",
"chars": 71,
"preview": "<div class=\"media-class\"></div>\n\n'alone'\n\n'id-in-media'\n\n<body></body>\n"
},
{
"path": "packages/purgecss/__tests__/test_examples/others/remove_unused.css",
"chars": 111,
"preview": ".used-class {\n color: black;\n}\n\n.unused-class {\n color: black;\n}\n\n.another-one-not-found {\n color: black;\n}\n"
},
{
"path": "packages/purgecss/__tests__/test_examples/others/remove_unused.js",
"chars": 15,
"preview": "\".used-class\";\n"
},
{
"path": "packages/purgecss/__tests__/test_examples/others/special_characters.css",
"chars": 132,
"preview": ".\\@home {\n color: black;\n}\n\n.button.\\+rounded {\n color: black;\n}\n\n.md\\:w-1\\/3 {\n color: green;\n}\n\n.\\32 -panels {\n co"
},
{
"path": "packages/purgecss/__tests__/test_examples/others/special_characters.js",
"chars": 47,
"preview": "\"@home\";\n\n\"+rounded\";\n\n\"button\";\n\n\".md:w-1/3\";\n"
},
{
"path": "packages/purgecss/__tests__/test_examples/pseudo-class/is.css",
"chars": 456,
"preview": ".root :is(.a, .b) .unused {\n color: red;\n}\n\n.root :is(.a, .unused) .c {\n color: blue;\n}\n\n.root :is(.a, .b) .c :is(.unu"
},
{
"path": "packages/purgecss/__tests__/test_examples/pseudo-class/is.html",
"chars": 131,
"preview": "<div class=\"root\">\n <div class=\"a\">\n <div class=\"c\"></div>\n </div>\n <div class=\"b\">\n <div class=\"c\"></div>\n </"
},
{
"path": "packages/purgecss/__tests__/test_examples/pseudo-class/not.css",
"chars": 71,
"preview": ".bar:not(.foo) {\n color: red;\n}\n.bar:not(.foo-bar) {\n color: blue;\n}\n"
},
{
"path": "packages/purgecss/__tests__/test_examples/pseudo-class/not.html",
"chars": 27,
"preview": "<p class=\"bar\">anything</p>"
},
{
"path": "packages/purgecss/__tests__/test_examples/pseudo-class/nth_child.css",
"chars": 114,
"preview": ".some-item:nth-child(2n){\n color: green\n}\n.some-item:nth-child(2n+1){\n color: blue\n}\ncanvas {\n display: none\n}\n"
},
{
"path": "packages/purgecss/__tests__/test_examples/pseudo-class/nth_child.html",
"chars": 92,
"preview": "<div class=\"some-item\">\n</div>\n<div class=\"some-item\">\n</div>\n<div class=\"some-item\">\n</div>"
},
{
"path": "packages/purgecss/__tests__/test_examples/pseudo-class/pseudo_class.css",
"chars": 63,
"preview": "div:before {\n color: black;\n}\n\n.row:after {\n color: black;\n}\n"
},
{
"path": "packages/purgecss/__tests__/test_examples/pseudo-class/pseudo_class.js",
"chars": 7,
"preview": "\"div\";\n"
},
{
"path": "packages/purgecss/__tests__/test_examples/pseudo-class/pseudo_selector.css",
"chars": 376,
"preview": ".some-item:nth-child(2n + 1) {\n color: green;\n}\n\n.some-item:nth-child(2n) {\n font-size: 1rem;\n}\n\n.some-item:nth-of-typ"
},
{
"path": "packages/purgecss/__tests__/test_examples/pseudo-class/pseudo_selector.html",
"chars": 491,
"preview": "<html>\n\n<body>\n <div>\n <ul class=\"container\">\n <li class=\"some-item\"></li>\n <li class=\"some-item\"></li>\n "
}
]
// ... and 127 more files (download for full content)
About this extraction
This page contains the full source code of the FullHuman/purgecss GitHub repository, extracted and formatted as plain text for AI agents and large language models (LLMs). The extraction includes 327 files (3.3 MB), approximately 894.7k tokens, and a symbol index with 192 extracted functions, classes, methods, constants, and types. Use this with OpenClaw, Claude, ChatGPT, Cursor, Windsurf, or any other AI tool that accepts text input. You can copy the full output to your clipboard or download it as a .txt file.
Extracted by GitExtract — free GitHub repo to text converter for AI. Built by Nikandr Surkov.