Skip to content

Commit

Permalink
[astro-purgecss] Disable renaming css files with new hashes in ssr mo…
Browse files Browse the repository at this point in the history
…de (#746)

* Fix files not found in SSR mode

* Format files

* Fix comments

* docs(changeset): Disable renaming css files with new hashes in ssr mode
  • Loading branch information
mhdcodes authored Nov 17, 2024
1 parent 0d7ebf4 commit 8407251
Show file tree
Hide file tree
Showing 33 changed files with 590 additions and 277 deletions.
5 changes: 5 additions & 0 deletions .changeset/chilled-otters-explode.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'astro-purgecss': minor
---

Disable renaming css files with new hashes in ssr mode
2 changes: 2 additions & 0 deletions apps/example-purgecss-ssr/.npmrc
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
# Expose Astro dependencies for `pnpm` users
shamefully-hoist=true
3 changes: 3 additions & 0 deletions apps/example-purgecss-ssr/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
# PurgeCSS Example app

This is an example app to showcase the `astro-purgecss` integration
28 changes: 28 additions & 0 deletions apps/example-purgecss-ssr/astro.config.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
import { defineConfig } from 'astro/config';
import purgecss from '../../packages/astro-purgecss/src';

import node from '@astrojs/node';

export default defineConfig({
// Add purgecss support to Astro
integrations: [
purgecss({
fontFace: true,
keyframes: true,
safelist: ['random', 'yep', 'button', /^nav-/],
blocklist: ['usedClass', /^nav-/],
content: [process.cwd() + '/src/**/*.astro']
})
],

output: 'server',

build: {
format: 'preserve',
inlineStylesheets: 'never'
},

adapter: node({
mode: 'standalone'
})
});
18 changes: 18 additions & 0 deletions apps/example-purgecss-ssr/package.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
{
"name": "@orbit/example-purgecss",
"version": "0.0.1",
"private": true,
"scripts": {
"dev": "astro dev",
"start": "astro dev",
"build": "astro build",
"preview": "astro preview",
"astro": "astro"
},
"devDependencies": {
"astro": "^4.0.0"
},
"dependencies": {
"@astrojs/node": "^8.3.4"
}
}
11 changes: 11 additions & 0 deletions apps/example-purgecss-ssr/public/assets/css/plugin.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
.light-theme {
background-color: white;
color: black;
}

.unused-class-external {
color: red; /* unused */
}
.unused-class-external-2 {
color: blue; /* unused */
}
11 changes: 11 additions & 0 deletions apps/example-purgecss-ssr/public/assets/css/theme.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
.light-theme {
background-color: white;
color: black;
}

.unused-class-external {
color: red; /* unused */
}
.unused-class-external-2 {
color: blue; /* unused */
}
13 changes: 13 additions & 0 deletions apps/example-purgecss-ssr/public/favicon.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
2 changes: 2 additions & 0 deletions apps/example-purgecss-ssr/src/env.d.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
/// <reference path="../.astro/types.d.ts" />
/// <reference types="astro/client" />
54 changes: 54 additions & 0 deletions apps/example-purgecss-ssr/src/layouts/main.astro
Original file line number Diff line number Diff line change
@@ -0,0 +1,54 @@
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<link rel="stylesheet" href="/assets/css/theme.css" />
<link rel="stylesheet" href="/assets/css/plugin.css" />
<meta name="viewport" content="width=device-width" />
<meta name="generator" content={Astro.generator} />
<title>Astro</title>
</head>
<body class="light-theme">
<slot />
</body>
<style is:global>
html {
height: 100vh;
}
body {
display: flex;
justify-content: center;
align-items: center;
font-family: 'Courier New', Courier, monospace;
color: white;
margin: 0;
padding: 0;
height: 100%;
background: #3023ae;
background: linear-gradient(135deg, #3023ae 0%, #c86dd7 100%);
}
/*
* DO_NOT_REMOVE: The following css rules,
* they are left here on purpose, to test out
* the "astro-purgecss" integration
*/
.sm\:hidden {
color: red; /* used */
}
.unused-class {
color: red; /* unused */
}
.unused-class-2 {
color: blue; /* unused */
}
#unused-id {
color: red; /* unused */
}
#unused-id-2 {
color: red; /* unused */
}
footer {
color: red; /* unused */
}
</style>
</html>
18 changes: 18 additions & 0 deletions apps/example-purgecss-ssr/src/pages/a/b/c/index.astro
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
---
import Layout from '../../../../layouts/main.astro';
---

<Layout>
<section class="main">
<h1>Astro PurgeCSS</h1>
<p>
This is a playground to check all the <code>astro-purgecss</code> integration
</p>
<p class="sm:hidden">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Vero esse
accusantium, dignissimos corporis ipsam, atque facere expedita aliquid
repellat, unde alias voluptatem officia ullam. Perferendis ipsam facilis
officiis beatae nam.
</p>
</section>
</Layout>
18 changes: 18 additions & 0 deletions apps/example-purgecss-ssr/src/pages/about.astro
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
---
import Layout from '../layouts/main.astro';
---

<Layout>
<section class="main">
<h1>Astro PurgeCSS</h1>
<p>
This is a playground to check all the <code>astro-purgecss</code> integration
</p>
<p class="sm:hidden">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Vero esse
accusantium, dignissimos corporis ipsam, atque facere expedita aliquid
repellat, unde alias voluptatem officia ullam. Perferendis ipsam facilis
officiis beatae nam.
</p>
</section>
</Layout>
18 changes: 18 additions & 0 deletions apps/example-purgecss-ssr/src/pages/d/index.astro
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
---
import Layout from '../../layouts/main.astro';
---

<Layout>
<section class="main">
<h1>Astro PurgeCSS</h1>
<p>
This is a playground to check all the <code>astro-purgecss</code> integration
</p>
<p class="sm:hidden">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Vero esse
accusantium, dignissimos corporis ipsam, atque facere expedita aliquid
repellat, unde alias voluptatem officia ullam. Perferendis ipsam facilis
officiis beatae nam.
</p>
</section>
</Layout>
18 changes: 18 additions & 0 deletions apps/example-purgecss-ssr/src/pages/index.astro
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
---
import Layout from '../layouts/main.astro';
---

<Layout>
<section class="main">
<h1>Astro PurgeCSS</h1>
<p>
This is a playground to check all the <code>astro-purgecss</code> integration
</p>
<p class="sm:hidden">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Vero esse
accusantium, dignissimos corporis ipsam, atque facere expedita aliquid
repellat, unde alias voluptatem officia ullam. Perferendis ipsam facilis
officiis beatae nam.
</p>
</section>
</Layout>
3 changes: 3 additions & 0 deletions apps/example-purgecss-ssr/tsconfig.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
{
"extends": "astro/tsconfigs/strict"
}
2 changes: 1 addition & 1 deletion apps/example-purgecss/package.json
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
{
"name": "@orbit/example-purgecss",
"name": "@orbit/example-purgecss-ssr",
"version": "0.0.1",
"private": true,
"scripts": {
Expand Down
2 changes: 1 addition & 1 deletion apps/playground/tsconfig.json
Original file line number Diff line number Diff line change
@@ -1,3 +1,3 @@
{
"extends": "astro/tsconfigs/strict"
}
}
8 changes: 4 additions & 4 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@
"build": "turbo run build && turbo run typecheck",
"build:no-cache": "turbo run build --no-cache && turbo run typecheck",
"dev": "turbo run dev --no-cache --parallel --continue",
"format": "prettier --write \"**/*.{ts,tsx,md,astro,mjs,mts,d.ts}\"",
"format": "prettier --write \"**/*.{ts,tsx,md,astro,mjs,mts,d.ts,json}\"",
"clean": "turbo run clean && rm -rf node_modules",
"changeset": "changeset",
"changeset:version": "changeset version",
Expand All @@ -22,7 +22,7 @@
"@changesets/changelog-github": "^0.5.0",
"@changesets/cli": "^2.27.9",
"@types/node": "^22.9.0",
"astro": "^4.16.10",
"astro": "^4.16.13",
"commander": "^12.1.0",
"esbuild": "^0.24.0",
"esbuild-plugin-clean": "^1.0.1",
Expand All @@ -33,9 +33,9 @@
"prettier-plugin-astro": "^0.14.1",
"tiny-glob": "^0.2.9",
"tsup": "^8.3.5",
"turbo": "^2.2.3",
"turbo": "^2.3.0",
"typescript": "^5.6.3",
"vite-tsconfig-paths": "^5.1.2",
"vitest": "^2.1.4"
"vitest": "^2.1.5"
}
}
Loading

0 comments on commit 8407251

Please sign in to comment.