And other Tailwind media query specific classes. This could be due to the extractor. Tailwind uses it's own.

Describe the bug
When on Windows, the backslashes and the trailing backslash returned by fileURLToPath break the globs for finding CSS and content HTML files. This results in PurgeCSS not finding the files and having no effect on the website build.

Example output path returned on Windows: D:\Projects\astro-test\dist\
Resulting in this glob string: D:\Projects\astro-test\dist\/**/*.html

To Reproduce
Steps to reproduce the behavior:

1. Be on Windows, have an Astro project with some CSS to be purged.
2. Install this integration and add it to astro.config.mjs as per the instructions.
3. Trigger a website build (for example with npm run build).
4. Observe no CSS having been stripped from the CSS file(s).

Expected behavior
The CSS files should have unused CSS rules stripped.

Describe the bug
dist/*.d.ts isn't included in the npm package since v3.2.0.

To Reproduce
Steps to reproduce the behavior:

$ npm i [email protected]

$ ls node_modules/astro-seo-schema/dist
index.mjs  jsonld.mjs  Schema.astro

Expected behavior
dist/*.d.ts exists.

Screenshots
N/A

Additional context
They were included until 3.1.1:

$ npm i [email protected]

$ ls node_modules/astro-seo-schema/dist
index.d.ts  index.mjs  jsonld.d.ts  jsonld.mjs  Schema.astro

Describe the bug
Ran into an issue with Netlify deploying multiple sites updated to Astro 4.0.1 today, all using astro-purgecss.

To Reproduce
Steps to reproduce the behavior:

1. Clone https://github.com/frankstallone/sweetspot/tree/astro-4
2. With Node v18.17.1 and npm 10.0.0 run npm i
3. See error

Expected behavior
Dependencies to install without error.

Screenshots

npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR! 
npm ERR! While resolving: [email protected]
npm ERR! Found: [email protected]
npm ERR! node_modules/astro
npm ERR!   astro@"^4.0.1" from the root project
npm ERR!   peer astro@"^4.0.0-beta.0" from @astrojs/[email protected]
npm ERR!   node_modules/@astrojs/markdown-remark
npm ERR!     @astrojs/markdown-remark@"4.0.0" from [email protected]
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer astro@"^3.0.0" from [email protected]
npm ERR! node_modules/astro-purgecss
npm ERR!   astro-purgecss@"^3.2.1" from the root project
npm ERR! 
npm ERR! Conflicting peer dependency: [email protected]
npm ERR! node_modules/astro
npm ERR!   peer astro@"^3.0.0" from [email protected]
npm ERR!   node_modules/astro-purgecss
npm ERR!     astro-purgecss@"^3.2.1" from the root project
npm ERR! 
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.

Additional context
This might be as simple as updating the peerDependency.

Describe the bug
There is a bug in purgecss at the moment (FullHuman/purgecss#978). This seems to be fixed in later versions.

To Reproduce
Have any html file that contains a class name, that is wrapped in :is(.any-class) or :where(.any-class) and run purgecss with the default settings on this html file.

Expected behavior
selector with :where or :is should only be removed, if it is not used inside the html file.

I just wanted to mention this here, as the next version of purgecss seems to fix this issue.

Describe the bug

Since the latest version 2.1.0 the TypeScript declaration file dist/index.d.ts is missing in the npm package. With version 2.0.0 it was there as expected but right now we have two dist directories: dist/ and dist/dist/. In dist/dist/ we have now a index.d.mts module but the package.json is still referencing dist/index.d.ts.

With the missing declaration file I get the TypeScript compiler error message Could not find a declaration file for module 'astro-seo-schema'.

To Reproduce
Steps to reproduce the behavior:

1. Update from 2.0.0 to 2.1.0
2. try to run astro check in a project built with TypeScript

Expected behavior

TypeScript type declarations should be included as it was in 2.0.0 and before.

Screenshots

Additional context

Describe the bug
A clear and concise description of what the bug is.
I'm importing a CSS file into my Layout,astro (only in this file) like this: import "../styles/bulma.css", but the integration doesn't seem to recognize external CSS files and just dicards them.

To Reproduce

1. Create a CSS file in src/styles/
2. Import the file into the central Layout file (Layout.astro): import "../styles/file.css"
3. add purgecss integration to astro.config.mjs
4. build project

Expected behavior
Removal of some of the CSS, so the file is as small as possible

Screenshots

(1. purgecss removed all CSS)
(2. Expected Look)
(3. Style import into Layout)
(4. Integration)

I use styles:

• variables.css - my big library with many fonts and colors
• theme.css - styling for the theme, it uses variables from variables.css
• global.css and astro components are using variables from theme.css

---
// styles
import "@/styles/variables.css";
import "@/styles/theme.css";
import "@/styles/global.css";
---

<!doctype html>
<html>
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width" />
    </head>
    <body>
        <div>
            <main id="main" class="main" role="main">
                <slot />
            </main>
        </div>
    </body>
</html>

I have component Header.astro, where I use styles from theme.css.

Current link in navigation has purple text decoration, it uses variable --color-link-active-menu-item-decoration from file theme.css, and it has backup color green.

    [aria-current="page"],
    [aria-current="page"]:visited,
    [aria-current="page"]:active {
        text-decoration: underline;
        text-decoration-thickness: 1px;
        text-decoration-color: var(--color-link-active-menu-item-decoration, green);
        text-underline-offset: 4px;
    }

In DEV mode it works, as expected.

I built final bundle.

Visually

Result in BUILD: the link has green color for text decoration.

Expected in BUILD: the link will have purple color for text decoration, as it was in dev mode.

Code

I checked the final code:

Expected: it has 4 variables for this link

    --color-link-active-menu-item-decoration: rgb(var(--color-purple-500));
    --color-link-active-menu-item-hover: rgb(var(--color-purple-500));
    --color-link-active-menu-item-decoration-hover: rgb(var(--color-purple-900));
    --color-link-active-menu-item-outline: rgb(var(--color-purple-500));

Result: it has only 2 variables for this link

:root {
  --color-link-active-menu-item-hover:rgb(var(--color-purple-500));
  --color-link-active-menu-item-outline:rgb(var(--color-purple-500))
}

Deleted variables:

--color-link-active-menu-item-decoration: rgb(var(--color-purple-500));
--color-link-active-menu-item-decoration-hover: rgb(var(--color-purple-900));

PROBLEM: It's some magic that colors for hover and focus-visible states are present, but default color for just link is deleted.

I tried to change color to browser colors as blue and yellow, and it's still deleted.

If I turn off integration astro-purgecss in astro.config.mjs I have expected colors in my website after build, but I also have all the unused variables in final css file.

Info about AstroJS

Astro v4.6.2
Node v18.18.1
System macOS (arm64)
Package Manager npm
Output hybrid
Adapter @astrojs/node
Integrations @astrojs/react
@astrojs/mdx
@astrojs/sitemap
astro-meta-tags
astro-robots-txt
astro-purgecss
@playform/compress

Great package thx!

Describe the bug
When using custom tailwind classes with arbitrary value (eg. in my case grid-rows-[306px,minmax(auto,1fr)]) the css is purged and the class doesn't end up in the final bundle

To Reproduce
Steps to reproduce the behavior:

1. Install the project on a regular astro project and tailwindcss 3^
2. Add the astro-purge plugin
3. Add a tailwind class like grid-rows-[306px,minmax(auto,1fr)] to a div
4. In dev mode, everything's fine
5. Make a production build
6. Serve the dist folder (eg. npx serve dist)
7. See how the class is still in the dom but was striped from the css

Expected behavior
I expect a grid-rows-[306px,minmax(auto,1fr)] to still be present in the CSS file and apply to the element with the class on it.

Screenshots
See how the DOM element has the class but no style definition exists for this class

Additional context
I'm seeing warnings in my Lighthouse reports that there is unused CSS. I do not use any (or barely) regular CSS ans solely use tailwind utility classes to style my website. I assumed that the JIT compiler of Tailwind would take care of bundling only the CSS I needed. It didn't this is why I turned to this package in the hope to get rid of most unused CSS. And this is where I encountered the bug.

Description

We need to allow passing certain options to the plugin to be passed to the underneath PurgeCSS.

Ref

• https://purgecss.com/configuration.html

Example

import { defineConfig } from 'astro/config';
import purgecss from "astro-purgecss";

// https://astro.build/config
export default defineConfig({
  integrations: [purgecss({
    fontFace: true,
    keyframes: true,
    variables: true,
    safelist: ['random', 'yep', 'button', /^nav-/]
  })]
});

I am trying to use package astro-purgecss, and nothing was deleted from final files.

I have library with many css variables. Lated I use this variables to create my theme, and next I use theme variables as final styles.

File src/layouts/Layout.astro:

---
// styles
import "@/styles/reset.css";
import "@/styles/variables.css";
import "@/styles/theme.css";
import "@/styles/global.css";
import "@/styles/grid.css";
import "@/styles/content.css";
---

<!doctype html>
<html>
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width" />
    </head>
    <body>
        <div>
            <main id="main" class="main" role="main">
                <slot />
            </main>
        </div>
    </body>
</html>

Result: All variables from @/styles/variables.css are present in my css styles:

Expected: only used variables will be present.

File astro.config.mjs:

import { defineConfig } from "astro/config";
import Compress from "@playform/compress";
import purgecss from "astro-purgecss";

// https://astro.build/config
export default defineConfig({
    integrations: [
        purgecss({
            variables: true,

            // for Astro view transitions
            keyframes: false,

            // for Astro view transitions
            safelist: {
                greedy: [
                    /*astro*/
                ],
            },

            // for SSR
            content: [
                process.cwd() + "/src/**/*.{astro,jsx,tsx,css}", // Watching astro and vue sources (for SSR, read the note below)
            ],
        }),
        Compress({
            // CSS: false,
            // HTML: false,
            Image: false,
            // JavaScript: false,
            SVG: false,
        }), // should be last in the list
    ],
});

Describe the bug

Astro-purgecss seems to be removing the CSS from astro view transition animations, even if these are activated and used in the project

To Reproduce

Steps to reproduce the behavior:

1. Create a new Astro project with at least two pages
2. Activate view transitions
3. Setup Astro-purgecss with both variables and keyframes options set to true.
4. Run the build command then launch the server (e.g. npm run build; npm run preview)

Expected behavior

A slide animation happens when navigating between pages.

Observed behavior

No transition animation is playing. The content is just replaced.

Additional context

As a workaround, the following config keeps the view transition CSS:

-			, keyframes: true
			, variables: true
+			, safelist: {
+				greedy: [/*astro*/]
+			}

Since astro 2.4 we have a new feature-flag that enables you to inline CSS:

  experimental: {
    inlineStylesheets: 'always'
  }

From what I have testet, this plugin runs after styles have been inlined but as it only purges css from external files, the inlined css isn't purged anymore.

Describe the bug
You mentionned SSR example in the README that this into example directory.

Could you complete or give an example here please ?

Thanks.

Describe the bug

UserAgent based mobile detection cannot be trusted. Good news, there's a media query that can help.

Use this instead on the client-side:

function isMobile() {
    const match = window.matchMedia('(pointer:coarse)')
    return match && match.matches
}

Describe the bug

When importing astro-purgecss in astro.config.ts, a TypeScript error is reported.

error TS7016: Could not find a declaration file for module 'astro-purgecss'. '<PROJECT_PATH>/node_modules/.pnpm/[email protected][email protected]/node_modules/astro-purgecss/dist/index.mjs' implicitly has an 'any' type.

There are types at '<PROJECT_PATH>/node_modules/astro-purgecss/dist/index.d.ts', but this result could not be resolved when respecting package.json "exports". The 'astro-purgecss' library may need to update its package.json or typings.

To Reproduce

1. Add import purgecss from "astro-purgecss"; at top of astro.config.ts
2. If editor don't have inline hint, run pnpm tsc --noEmit (or npx, etc.)

Screenshots

Additional context

As mentioned by TypeScript docs, the "types" field in package.json is no longer used if there is an exports field:

https://github.com/codiume/orbit/blob/main/packages/astro-purgecss/package.json#L12

https://github.com/codiume/orbit/blob/main/packages/astro-purgecss/package.json#L33-L35

astro-seo-meta exports SeoProps and a similar type for schema would be amazing

Describe the bug
The assets built by Astro in the dist/client/_astro/ folder are all named with a hash and therefore are usually be given long cache headers.

astro-purgecss is modifying these files without changing the hash. With long cache headers, browsers will not request updated versions.

To Reproduce
Steps to reproduce the behavior:

1. Run astro build
2. Save contents of a file like dist/client/_astro/generated.HASH.css
3. Modify CSS styles of website
4. Run astro build
5. Save contents of dist/client/_astro/generated.HASH.css
6. Compare file contents
7. Files contents are different but the file name is the same

Expected behavior
astro-purgecss should change the hash after modifying files.

For better maintaibility, we need to extend tsconfig in all packages from astro/tsconfigs

Tasks

• Replace tsconfig inside packages/astro-seo-meta
• Replace tsconfig inside packages/astro-json-schema
• Replace tsconfig inside packages/astro-purgecss
• Replace tsconfig inside packages/astro-useragnt
• Replace tsconfig inside packages/astro-vanilla-extract
• Replace tsconfig inside packages/astro-svg-loaders

Should be replaced with

{
  "extends": "astro/tsconfigs/strict",
  "compilerOptions": {
    "noEmit": false
  }
}

Describe the bug
When using special characters in the Schema, they are printed as an HTML entity, rather than the character. This makes it impossible to make a correct breadcrumb:
Home > Contact
because it outputs:
Home &lgt; Contact

To Reproduce
Steps to reproduce the behavior:

add a special character like > to the Schema

Expected behavior
Should see the special character in the result

I am trying to use @graph to include multiple schema types on the same page.

Using something like this produces a lot of erroneous json:

...(frontmatter.extraSchema ? Object.entries(frontmatter.extraSchema).map(([key, value], index) => `${index === 0 ? '@' + key : key}\": '${value}'`) : '' )

It would be great if you could add to an existing schema @graph by calling the component from anywhere and adding to it

Create a quick and simple landing page to showcase the integrations available on this repo. something like https://astro.build/integrations

Refs

• https://astrowind.vercel.app
• https://astrolus.netlify.app

How do I add variables in schema?

This doesn't work:

"name": {frontmatter.title},

Nevermind it is

"name": `${frontmatter.title}`,

Create an example app for astro-purgecss integration. following the same structure as the other examples

Describe the bug
Result is missing a lot of CSS

To Reproduce
Use package with @astro/vuejs

Expected behavior
Do not purge styles that are declared in .vue files

Additional context
I have fixed this locally with this code:
import { PurgeCSS } from 'purgecss';
import { writeFile } from 'node:fs/promises';
import { fileURLToPath } from 'node:url';
function handleWindowsPath(outputPath) {
if (process.platform !== 'win32') return outputPath;
if (outputPath.endsWith('\')) {
outputPath = outputPath.substring(0, outputPath.length - 1);
}
outputPath = outputPath.replaceAll('\', '/');
return outputPath;
}
function src_default(options = {}) {
return {
name: 'astro-purgecss',
hooks: {
'astro:build:done': async ({ dir }) => {
const outDir = handleWindowsPath(fileURLToPath(dir));
const purged = await new PurgeCSS().purge({
...options,
content: [
${outDir}/**/*.html,
${outDir}/**/*.astro,
${outDir}/**/*.js
],
css: [${outDir}/**/*.css],
defaultExtractor(content) {
const contentWithoutStyleBlocks = content.replace(
/<style[^]+?</style>/gi,
''
);

        return (
          contentWithoutStyleBlocks.match(
            /[A-Za-z0-9-_/:]*[A-Za-z0-9-_/]+/g
          ) || []
        );
      }
    });
    await Promise.all(
      purged
        .filter(({ file }) =>
          file == null ? void 0 : file.endsWith('.css')
        )
        .map(async ({ css, file }) => await writeFile(file, css))
    );
  }
}

};
}
export { src_default as default };

When importing bootstrap-sass code from purge-css not work

in index.astro in pages

<style lang='scss'>
  @import "../../node_modules/bootstrap/scss/bootstrap";
</style>

styles work fine but output css on build not purged