Welcome to our guide on how to extract the styles you’ve used to render a web page with the Used Styles library. This tool is a game-changer when it comes to optimizing CSS delivery without relying on Puppeteer or any other browser automation tool. Let’s dive into the process step-by-step!

What is Used Styles?

Used Styles is a powerful library for server-side rendering (SSR) that helps you manage CSS efficiently by detecting used CSS files from HTML and inlining critical styles as needed. With Version 3, migration is incredibly straightforward—just import the library and you’re ready to go!

Installation

To get started, you need to install the used-styles package via npm:

npm install used-styles

How It Works

Imagine you have a large wardrobe filled with clothes (your CSS styles). When you want to go out (render a page), you don’t want to try on every piece of clothing; instead, you want to grab only what you’re going to wear based on the occasion (the specific styles needed for that HTML). The Used Styles library does precisely that:

• Scans all CSS files in your build directory.
• Examines the HTML to find all classes being used.
• Chooses to inline only the necessary styles for initial rendering.
• Injects these styles or links into the HTML document.

Usage Example

Here’s a simplified workflow for using the library:

import discoverProjectStyles from 'used-styles/node';
import getUsedStyles from 'used-styles';

const stylesLookup = discoverProjectStyles('./build');

async function renderApp() {
    await stylesLookup; 
    const markup = ReactDOM.renderToString();
    const usedStyles = getUsedStyles(markup, stylesLookup);
    // Append used styles to the header of your page
}

Two Rendering Modes

Used Styles operates in two primary modes:

• Inline Style Rules: Ideal for first-time visitors, where only the essential styles are injected directly.
• Inline Style Files: Best for returning visitors, allowing for smoother code splitting and per-request optimization.

Troubleshooting

If you run into any issues while implementing Used Styles, consider these troubleshooting tips:

• Ensure that you’re scanning the correct HTML and CSS files. Double-check the paths you’re using.
• If styles don’t appear as expected, verify that there are no conflicting classes or missing imports in your components.
• Test your results after every change to avoid cascading issues.
• For more insights, updates, or to collaborate on AI development projects, stay connected with fxis.ai.

Advanced Usage

For more complex scenarios, consider using:

• Discovery API: This allows you to scan your build folder and create a lookup table between class names and their corresponding files.
• Serialize API: If you can’t directly use the Discover API on your client CSS bundles, this separates style lookup generation from runtime.

Conclusion

With Used Styles, managing CSS for your web applications becomes not only efficient but also scalable. We hope this guide helps you get started with critical CSS extraction effectively!

At fxis.ai, we believe that such advancements are crucial for the future of AI, as they enable more comprehensive and effective solutions. Our team is continually exploring new methodologies to push the envelope in artificial intelligence, ensuring that our clients benefit from the latest technological innovations.