yuheiy

Reproduce Knip's pnpm stage false positive

This reproduction requires Node.js and pnpm. It was verified with Node.js 24.20.0, pnpm 12.3.2, and Knip 6.34.0.

Run these commands in the directory containing package.json:

pnpm install
node node_modules/knip/bin/knip.js --include binaries --no-progress

yuheiy

import { useId, useState } from 'react';
import {
  ActionButton,
  Content,
  ContextualHelpPopover,
  DialogTrigger,
  Heading,
  Switch,
  Text,
} from '@react-spectrum/s2';

yuheiy

React Spectrumにおけるプロパティごとのrem単位とpx単位の使い分け

プロパティ	単位
border-spacing	rem
flex-basis	rem
gap	rem
height	rem
width	rem
contain-intrinsic-width	rem

yuheiy

Tailwind CSS テーマ変数の順序ガイド

ソート原則

1. 機能的グループ化: 関連する変数を論理的にグループ化
2. property-order.tsとの整合性: CSSプロパティの出力順序と一致
3. サイズ順: 同じカテゴリ内では小→大の順序（xs → sm → md → lg → xl）
4. 色相順: カラーパレットは赤→紫のスペクトル順
5. デフォルト値は最後: --default-*変数は最後に配置

yuheiy

Tailwind CSS Border-Width Detector

A Node.js CLI tool to detect and list Tailwind CSS border-width related classes in your project files with their exact locations.

Features

• 🔍 Detects all border-width related Tailwind CSS classes
• 📍 Shows exact file paths and line numbers
• 🎯 Supports multiple file formats (HTML, JSX, Vue, PHP, etc.)
• ⚡ Fast scanning with built-in file filtering

yuheiy

Tailwind Breakpoint Replacer

A CLI tool to replace Tailwind CSS breakpoint variants from sm:/md:/lg:/xl:/2xl: to max-sm:/max-md:/max-lg:/max-xl:/max-2xl: with precise class extraction based on Tailwind's official extractor logic.

Features

• Precise extraction: Uses the same logic as Tailwind CSS's Rust-based extractor for accurate class detection
• Safe replacements: Only replaces within class and className attributes
• Smart filtering:
  • Skips classes that already have max- prefix

yuheiy

4.8.4.4 Requirements for providing text to act as an alternative for images

4.8.4.4.1 General guidelines

Except where otherwise specified, the alt attribute depend on what the image is intended to represent, as described in the following sections.

The most general rule to consider when writing alternative text is the following: the intent is that replacing every image with the text of its alt attribute does not change the meaning of the page.

So, in general, alternative text can be written by considering what one would have written had one not been able to include the image.

yuheiy

function App() {
  return (
    <>
      {(() => {
        const [isOpen, setOpen] = useState(false);
        return (
          <>
            <Button onClick={() => setOpen(true)}>First</Button>
            <Popover isOpen={isOpen} onOpenChange={setOpen}>
              ...

yuheiy

function HooksSeparator<T>({
  setup,
  children,
}: {
  setup: () => T;
  children: (prop: T) => ReactNode;
}) {
  return children(setup());
}

yuheiy

import type { Dispatch, DispatchWithoutAction, ReactNode, SetStateAction } from 'react';
import { useCallback, useState } from 'react';

/**
 * The implement a hooks version of React PowerPlug’s `<State />`.
 * https://renatorib.github.io/react-powerplug/#/docs-components-state
 *
 * @example
 * <State initial={false}>
 *   {({ state: isOpen, setState: setOpen }) => (