tessl/npm-builder-io--qwik

An Open-Source sub-framework designed with a focus on server-side-rendering, lazy-loading, and resumable architecture for instant-loading web applications

—

Pending

Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

Overview

Eval results

Files

Styling

Name: tessl/npm-builder-io--qwik
Author: tessl

Dynamic and scoped styling with lazy loading and server-side rendering support. Qwik's styling system integrates seamlessly with the resumable architecture.

Capabilities

Style Injection

Add styles to components with automatic lazy loading.

/**
 * Add global styles to component
 * @param styles - CSS styles string
 */
function useStyles$(styles: string): void;

/**
 * Add global styles from QRL
 * @param styles - QRL-wrapped CSS styles
 */
function useStylesQrl(styles: QRL<string>): void;

/**
 * Add scoped styles to component
 * @param styles - CSS styles string
 */
function useStylesScoped$(styles: string): void;

/**
 * Add scoped styles from QRL
 * @param styles - QRL-wrapped CSS styles
 */
function useStylesScopedQrl(styles: QRL<string>): void;

// Scoped styles configuration
interface UseStylesScoped {
  scopeId: string;
}

Usage Examples:

import { component$, useStyles$, useStylesScoped$ } from "@builder.io/qwik";

export const StyledComponent = component$(() => {
  // Global styles
  useStyles$(`
    .global-header {
      background: linear-gradient(45deg, #333, #666);
      color: white;
      padding: 1rem;
    }
  `);

  // Scoped styles (only apply to this component)
  useStylesScoped$(`
    .button {
      background: var(--primary-color, #007acc);
      color: white;
      border: none;
      padding: 0.5rem 1rem;
      border-radius: 4px;
      cursor: pointer;
    }
    
    .button:hover {
      opacity: 0.9;
    }
  `);

  return (
    <div>
      <header class="global-header">
        <h1>Styled Header</h1>
      </header>
      <button class="button">Styled Button</button>
    </div>
  );
});

Install with Tessl CLI