codiume / orbit Goto Github PK
View Code? Open in Web Editor NEWCollection of useful integrations & components for the Astro ecosystem. ⭐️ Star to support our work!
Home Page: https://astro.build
License: MIT License
Collection of useful integrations & components for the Astro ecosystem. ⭐️ Star to support our work!
Home Page: https://astro.build
License: MIT License
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
I use styles:
variables.css
- my big library with many fonts and colorstheme.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.
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.
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.
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
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 };
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
src/styles/
import "../styles/file.css"
astro.config.mjs
Expected behavior
Removal of some of the CSS, so the file is as small as possible
(1. purgecss removed all CSS)
(2. Expected Look)
(3. Style import into Layout)
(4. Integration)
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:
astro build
dist/client/_astro/generated.HASH.css
astro build
dist/client/_astro/generated.HASH.css
Expected behavior
astro-purgecss should change the hash after modifying files.
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.
Create a quick and simple landing page to showcase the integrations available on this repo. something like https://astro.build/integrations
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
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:
2.0.0
to 2.1.0
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.
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
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
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
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:
variables
and keyframes
options set to true
.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*/]
+ }
We need to allow passing certain options to the plugin to be passed to the underneath PurgeCSS.
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-/]
})]
});
Create an example app for astro-purgecss
integration. following the same structure as the other examples
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:
astro.config.mjs
as per the instructions.npm run build
).Expected behavior
The CSS files should have unused CSS rules stripped.
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
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
import purgecss from "astro-purgecss";
at top of astro.config.ts
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
How do I add variables in schema?
This doesn't work:
"name": {frontmatter.title},
Nevermind it is
"name": `${frontmatter.title}`,
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
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:
https://github.com/frankstallone/sweetspot/tree/astro-4
npm i
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.
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:
grid-rows-[306px,minmax(auto,1fr)]
to a divnpx serve dist
)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.
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
And other Tailwind media query specific classes. This could be due to the extractor. Tailwind uses it's own.
For better maintaibility, we need to extend tsconfig
in all packages from astro/tsconfigs
packages/astro-seo-meta
packages/astro-json-schema
packages/astro-purgecss
packages/astro-useragnt
packages/astro-vanilla-extract
packages/astro-svg-loaders
Should be replaced with
{
"extends": "astro/tsconfigs/strict",
"compilerOptions": {
"noEmit": false
}
}
astro-seo-meta exports SeoProps and a similar type for schema would be amazing
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.