Skip to content

Feature: Add Full Component CSS Exports + Build Improvements#57

Closed
rrpadilla wants to merge 2 commits intohunvreus:developmentfrom
rrpadilla:feature/separate-components
Closed

Feature: Add Full Component CSS Exports + Build Improvements#57
rrpadilla wants to merge 2 commits intohunvreus:developmentfrom
rrpadilla:feature/separate-components

Conversation

@rrpadilla
Copy link
Copy Markdown

No breaking changes — these files remain intact: (basecoat.css, basecoat.cdn.css)

Add Component-Level Style Exports

  • All CSS components (including nested ones like form/input.css) are now copied to dist/components
  • Each component is individually exported under exports in package.json
  • Added basecoat.all.css and base/base.css to dist

base/base.css includes the foundational styles:

  • @custom-variant
  • CSS variables in :root
  • Dark theme overrides (.dark)
  • @layer base resets

You can now import scoped styles like:

@import "basecoat-css/components/form/input";

It is recommended to include the base file when adding individual components. This was added to the documentation.

@import "tailwindcss";
@import "basecoat-css/base";
@import "basecoat-css/components/form";
@import "basecoat-css/components/alert";

The documentation has been updated. There is a new (Optional) Import specific components under installation instructions.

There is a new basecoat.all.css file with all components listed. In the future we can update the basecoat.css to include this file @import "./basecoat.all.css"; but I did not want to change the original files to avoid breaking changes.

@import "./base/base.css";

/* Components */
@import "./components/alert.css";
@import "./components/button.css";
@import "./components/badge.css";
@import "./components/card.css";
@import "./components/form.css";
@import "./components/dialog.css";
@import "./components/dropdown-menu.css";
@import "./components/popover.css";
@import "./components/table.css";
@import "./components/tabs.css";
@import "./components/toast.css";
@import "./components/tooltip.css";
@import "./components/accordion.css";
@import "./components/sidebar.css";

Resolves #54

@rrpadilla
Copy link
Copy Markdown
Author

@hunvreus What do think about this pr?

@hunvreus
Copy link
Copy Markdown
Owner

hunvreus commented Jul 1, 2025

Sure, I just need to find time to review this week.

@rrpadilla
Copy link
Copy Markdown
Author

@hunvreus did you have time to review this PR?

@cameronapak
Copy link
Copy Markdown

+1 from me. Love this PR!

@maxoliverbr
Copy link
Copy Markdown

+1 great idea

@twobitunicorn
Copy link
Copy Markdown

bump

@hunvreus
Copy link
Copy Markdown
Owner

@rrpadilla Would you be able to rework the PR to work with the latest version? Same work, just a few more files/blocks. I can do it myself but I'd like to still attribute the changes to you.

@rrpadilla
Copy link
Copy Markdown
Author

@hunvreus working on it. Submitting a PR in a few.

@hunvreus
Copy link
Copy Markdown
Owner

Thanks!

@rrpadilla
Copy link
Copy Markdown
Author

Closing this in favor of #115.

@rrpadilla rrpadilla closed this Nov 20, 2025
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.

5 participants