Skip to content

fix: @source CSS scanning + React dedupe + troubleshooting docs#20

Merged
jacksonkasi1 merged 1 commit intomainfrom
dev
Feb 23, 2026
Merged

fix: @source CSS scanning + React dedupe + troubleshooting docs#20
jacksonkasi1 merged 1 commit intomainfrom
dev

Conversation

@jacksonkasi1
Copy link
Copy Markdown
Owner

@jacksonkasi1 jacksonkasi1 commented Feb 23, 2026

Summary

Fixes the @source "@tablecraft/table" Tailwind CSS v4 issue where utility classes from the table package were not being detected.

Changes

Package (@tablecraft/table v0.2.10):

  • Added src to published files array so Tailwind can scan the TSX source files for class names
  • Added proper Troubleshooting section in README documenting the duplicate React "Invalid hook call" error with fixes for Vite and Webpack/Next.js

Demo App (vite-web-example):

  • Updated @source to use relative path: @source "../node_modules/@tablecraft/table/src"
  • Added dedupe: ["react", "react-dom"] to vite.config.ts to prevent duplicate React instances

Documentation:

  • Updated root README and package README with correct @source relative path
  • Added note about path being relative to CSS file location

Published

  • @tablecraft/table@0.2.10 published to npm

Summary by Sourcery

Update Tailwind CSS v4 integration for the table package and demo app, and document React deduplication and @source usage to ensure styles and hooks work correctly.

Bug Fixes:

  • Fix Tailwind CSS v4 class scanning for @tablecraft/table by pointing @source to the package TSX source directory.

Enhancements:

  • Bump @tablecraft/table to v0.2.10 and update the demo app dependency to consume the latest package.
  • Add React deduplication configuration in the Vite demo to avoid multiple React instances.
  • Tidy demo CSS formatting and component layering without changing behavior.

Documentation:

  • Update root and package READMEs with the correct Tailwind @source path and note that it is relative to the CSS file location.
  • Add troubleshooting documentation for resolving duplicate React "Invalid hook call" errors in Vite and Webpack/Next.js setups.

Summary by CodeRabbit

  • Documentation

    • Enhanced Tailwind v4 setup instructions with clearer path configuration guidance and examples.
    • Added troubleshooting section addressing duplicate React errors with solutions for Vite, Webpack, and Next.js environments.
  • Chores

    • Released version 0.2.10 with dependency updates.

…\n\n- Update @source to use relative path ../node_modules/@tablecraft/table/src\n- Add dedupe: ['react', 'react-dom'] to vite.config.ts\n- Add troubleshooting section for duplicate React hook error\n- Update both READMEs with correct setup instructions\n- Bump @tablecraft/table to v0.2.10
@vercel
Copy link
Copy Markdown

vercel bot commented Feb 23, 2026

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
tablecraft Building Building Preview, Comment Feb 23, 2026 6:20pm
tablecraft-demo Building Building Preview, Comment Feb 23, 2026 6:20pm

@sourcery-ai
Copy link
Copy Markdown

sourcery-ai bot commented Feb 23, 2026

Reviewer's Guide

Adjusts Tailwind v4 @source configuration so the table package’s TSX source files are scanned correctly, updates the demo app and docs to use the correct relative path, adds bundler config to dedupe React to avoid invalid hook calls, and bumps the table package version.

Sequence diagram for React module resolution before and after dedupe

sequenceDiagram
  actor Dev
  participant ViteDevServer
  participant ModuleResolver
  participant root_node_modules as RootNodeModules
  participant table_package as TablePkg
  participant table_node_modules as TableNodeModules

  Dev->>ViteDevServer: Start dev server
  ViteDevServer->>ModuleResolver: Resolve import react
  ModuleResolver->>RootNodeModules: Look up react
  RootNodeModules-->>ModuleResolver: Return root react instance

  ViteDevServer->>ModuleResolver: Resolve @tablecraft/table
  ModuleResolver->>TablePkg: Load package entry
  TablePkg->>ModuleResolver: Import react (internal dependency)

  alt without_dedupe
    ModuleResolver->>TableNodeModules: Look up react
    TableNodeModules-->>ModuleResolver: Return nested react instance
    ModuleResolver-->>ViteDevServer: Two React instances loaded
    ViteDevServer-->>Dev: Invalid hook call error
  else with_dedupe_or_alias
    ModuleResolver->>RootNodeModules: Redirect to root react
    RootNodeModules-->>ModuleResolver: Return root react instance
    ModuleResolver-->>ViteDevServer: Single React instance shared
    ViteDevServer-->>Dev: App runs without hook errors
  end
Loading

File-Level Changes

Change Details Files
Ensure Tailwind CSS v4 scans the table package’s TSX source via correct @source path and formatted CSS.
  • Changed @source from the package name to a relative path pointing at the package src directory so Tailwind sees the TSX files.
  • Reformatted CSS variables and theme definitions for consistent two-space indentation and fixed minor brace/whitespace issues inside @layer blocks.
  • Added spacing before some @layer components blocks to improve readability.
apps/vite-web-example/src/index.css
Document correct Tailwind v4 @source usage and path semantics in package and root READMEs.
  • Updated the Tailwind v4 usage snippet to use the relative src path instead of the package name.
  • Added an explicit note clarifying that the @source path is relative to the CSS file location.
packages/table/README.md
README.md
Document and mitigate duplicate React instance issues when using the table package.
  • Added a Troubleshooting section explaining the "Invalid hook call" duplicate React issue and why it occurs.
  • Provided Vite config example using resolve.dedupe for react and react-dom.
  • Provided Webpack/Next.js config example using resolve.alias to force a single React instance.
packages/table/README.md
Align demo app and package versions/config with the new table package release and React dedupe recommendation.
  • Bumped @tablecraft/table dependency version in the demo app to match the newly published package version.
  • Added resolve.dedupe for react and react-dom in the Vite config to prevent multiple React copies at runtime.
  • Updated the table package version field to 0.2.10.
apps/vite-web-example/package.json
apps/vite-web-example/vite.config.ts
packages/table/package.json
bun.lock

Tips and commands

Interacting with Sourcery

  • Trigger a new review: Comment @sourcery-ai review on the pull request.
  • Continue discussions: Reply directly to Sourcery's review comments.
  • Generate a GitHub issue from a review comment: Ask Sourcery to create an
    issue from a review comment by replying to it. You can also reply to a
    review comment with @sourcery-ai issue to create an issue from it.
  • Generate a pull request title: Write @sourcery-ai anywhere in the pull
    request title to generate a title at any time. You can also comment
    @sourcery-ai title on the pull request to (re-)generate the title at any time.
  • Generate a pull request summary: Write @sourcery-ai summary anywhere in
    the pull request body to generate a PR summary at any time exactly where you
    want it. You can also comment @sourcery-ai summary on the pull request to
    (re-)generate the summary at any time.
  • Generate reviewer's guide: Comment @sourcery-ai guide on the pull
    request to (re-)generate the reviewer's guide at any time.
  • Resolve all Sourcery comments: Comment @sourcery-ai resolve on the
    pull request to resolve all Sourcery comments. Useful if you've already
    addressed all the comments and don't want to see them anymore.
  • Dismiss all Sourcery reviews: Comment @sourcery-ai dismiss on the pull
    request to dismiss all existing Sourcery reviews. Especially useful if you
    want to start fresh with a new review - don't forget to comment
    @sourcery-ai review to trigger a new review!

Customizing Your Experience

Access your dashboard to:

  • Enable or disable review features such as the Sourcery-generated pull request
    summary, the reviewer's guide, and others.
  • Change the review language.
  • Add, remove or edit custom review instructions.
  • Adjust other review settings.

Getting Help

@jacksonkasi1 jacksonkasi1 merged commit c662332 into main Feb 23, 2026
3 of 6 checks passed
@coderabbitai
Copy link
Copy Markdown
Contributor

coderabbitai bot commented Feb 23, 2026

Caution

Review failed

The pull request is closed.

ℹ️ Recent review info

Configuration used: defaults

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between e92e783 and efb2c99.

⛔ Files ignored due to path filters (1)
  • bun.lock is excluded by !**/*.lock
📒 Files selected for processing (6)
  • README.md
  • apps/vite-web-example/package.json
  • apps/vite-web-example/src/index.css
  • apps/vite-web-example/vite.config.ts
  • packages/table/README.md
  • packages/table/package.json

📝 Walkthrough

Walkthrough

Version bump from 0.2.9 to 0.2.10 with Tailwind v4 configuration updates. The @source directive paths are adjusted to reference node_modules relative paths, CSS theme tokens are reorganized with an indirection layer, and documentation is expanded with troubleshooting guidance for React duplicate issues.

Changes

Cohort / File(s) Summary
Documentation Updates
README.md, packages/table/README.md
Updated Tailwind @source directives with relative paths and added troubleshooting section for "Invalid hook call" (duplicate React) scenarios with fixes for Vite and Webpack/Next.js.
Version Bumps
apps/vite-web-example/package.json, packages/table/package.json
Incremented @tablecraft/table from 0.2.8 to 0.2.9 in example app and main package version from 0.2.9 to 0.2.10.
Styling & Theme Reorganization
apps/vite-web-example/src/index.css
Refactored @source path to ../node_modules/@tablecraft/table/src, introduced indirection layer mapping --color-* tokens to base --* variables, and reorganized light/dark theme color definitions with updated values.
Build Configuration
apps/vite-web-example/vite.config.ts
Added dedupe option to Vite resolve configuration for react and react-dom modules.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Poem

🐰 Hops through version tunnels with glee,
Color tokens dance in harmony,
Tailwind paths now point just right,
Dedupe-ing React pairs with delight,
v0.2.10 hops forth so bright!

✨ Finishing Touches
  • 📝 Generate docstrings (stacked PR)
  • 📝 Generate docstrings (commit on current branch)
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Post copyable unit tests in a comment
  • Commit unit tests in branch dev

Tip

Issue Planner is now in beta. Read the docs and try it out! Share your feedback on Discord.


Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands and usage tips.

Copy link
Copy Markdown

@sourcery-ai sourcery-ai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hey - I've left some high level feedback:

  • Using a hard-coded @source "../node_modules/@tablecraft/table/src"; path in the README and example app may be brittle across different project structures or package managers (pnpm, Yarn PnP, monorepos); consider documenting or supporting a more robust pattern (e.g., a glob or exported path) that doesn’t rely on node_modules layout.
  • The example app’s dependency is bumped to @tablecraft/table@^0.2.9 while the package itself is versioned as 0.2.10; aligning the demo app to ^0.2.10 will ensure it actually reflects the published changes described in this PR.
Prompt for AI Agents
Please address the comments from this code review:

## Overall Comments
- Using a hard-coded `@source "../node_modules/@tablecraft/table/src";` path in the README and example app may be brittle across different project structures or package managers (pnpm, Yarn PnP, monorepos); consider documenting or supporting a more robust pattern (e.g., a glob or exported path) that doesn’t rely on `node_modules` layout.
- The example app’s dependency is bumped to `@tablecraft/table@^0.2.9` while the package itself is versioned as `0.2.10`; aligning the demo app to `^0.2.10` will ensure it actually reflects the published changes described in this PR.

Sourcery is free for open source - if you like our reviews please consider sharing them ✨
Help me be more useful! Please click 👍 or 👎 on each comment and I'll use the feedback to improve your reviews.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant