nuxt / nuxt/icon

Don't force CSS to be inline

Open
#327 0 comments 4 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
TypeScript
Stars
1.2k
Forks
96
Avg merge
8h 12m
Merged PRs (30d)
2

Description

Hi there. Is there any way we could add a feature that minifies the CSS generated by this plugin and/or then extracts the code to a single separate CSS file, rather than having it all output in the <head> element?

Even with...

vite: {
	build: {
			assetsInlineLimit: 0, // default is 4096 (4 KiB); threshold to inline assets as base64 URLs
			cssCodeSplit: false, // if false, all CSS in the entire project will be extracted into a single CSS file
	}
}

...in my nuxt.config.ts file, the icon-related CSS code from this plugin still gets output onto my pages un-minified and un-extracted.

Thanks. :-)

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Review nuxt.config.ts and the Vite build settings shown, then trace how this plugin's icon-related CSS is generated and inserted into the page. Define whether minification, extraction to one CSS file, or both are required; done means the generated CSS follows the selected behavior without remaining inline and unminified.

Written by the indexing model from the issue text.

Assessment

Tech stack
nuxt, typescript, vite
Domain
frontend
Issue type
Feature
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
30/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.