Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 2 commits into
base: development
Choose a base branch
from
Open

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
f401acc
Add Full Component CSS Exports + Build Improvements
rrpadilla Jun 27, 2025
8d7302d
Merge branch 'development' into feature/separate-components
rrpadilla Jun 29, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 10 additions & 0 deletions docs/src/installation.njk
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,8 @@ toc:
id: install-npm-basecoat
- label: Import basecoat in your CSS
id: install-npm-import
- label: (Optional) Import specific components
id: install-npm-import-css-components-optional
- label: (Optional) Add JavaScript files
id: install-npm-js
- label: That's it
Expand Down Expand Up @@ -89,6 +91,14 @@ toc:
@import "basecoat-css";{% endset %}
{{ code_block(code, "css") }}
</li>
<li class="step mt-8">
<h3 class="mb-4 scroll-m-20 font-semibold tracking-tight" id="install-npm-import-css-components-optional"><a href="#install-npm-import-css-components-optional">(Optional) Import specific components</a></h3>
{% set code %}@import "tailwindcss";
@import "basecoat-css/base";
@import "basecoat-css/components/form";
@import "basecoat-css/components/alert";{% endset %}
{{ code_block(code, "css") }}
</li>
<li class="step mt-8">
<h3 class="mb-4 scroll-m-20 font-semibold tracking-tight" id="install-npm-js"><a href="#install-npm-js">(Optional) Add JavaScript files</a></h3>
<div class="prose">
Expand Down
20 changes: 10 additions & 10 deletions package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

70 changes: 69 additions & 1 deletion packages/css/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,6 +39,7 @@
},
"homepage": "https://basecoatui.com/installation#install-npm",
"exports": {
"./package.json": "./package.json",
".": "./dist/basecoat.css",
"./css": "./dist/basecoat.css",
"./all": "./dist/js/all.js",
Expand All @@ -55,6 +56,73 @@
"./tabs.min": "./dist/js/tabs.min.js",
"./toast": "./dist/js/toast.js",
"./toast.min": "./dist/js/toast.min.js",
"./package.json": "./package.json"
"./all.css": "./dist/basecoat.all.css",
"./base": "./dist/base/base.css",
"./components/accordion": {
"style": "./dist/components/accordion.css"
},
"./components/alert": {
"style": "./dist/components/alert.css"
},
"./components/badge": {
"style": "./dist/components/badge.css"
},
"./components/button": {
"style": "./dist/components/button.css"
},
"./components/card": {
"style": "./dist/components/card.css"
},
"./components/dialog": {
"style": "./dist/components/dialog.css"
},
"./components/dropdown-menu": {
"style": "./dist/components/dropdown-menu.css"
},
"./components/form/checkbox": {
"style": "./dist/components/form/checkbox.css"
},
"./components/form/input": {
"style": "./dist/components/form/input.css"
},
"./components/form/label": {
"style": "./dist/components/form/label.css"
},
"./components/form/radio": {
"style": "./dist/components/form/radio.css"
},
"./components/form/range": {
"style": "./dist/components/form/range.css"
},
"./components/form/select": {
"style": "./dist/components/form/select.css"
},
"./components/form/switch": {
"style": "./dist/components/form/switch.css"
},
"./components/form/textarea": {
"style": "./dist/components/form/textarea.css"
},
"./components/form": {
"style": "./dist/components/form.css"
},
"./components/popover": {
"style": "./dist/components/popover.css"
},
"./components/sidebar": {
"style": "./dist/components/sidebar.css"
},
"./components/table": {
"style": "./dist/components/table.css"
},
"./components/tabs": {
"style": "./dist/components/tabs.css"
},
"./components/toast": {
"style": "./dist/components/toast.css"
},
"./components/tooltip": {
"style": "./dist/components/tooltip.css"
}
}
}
73 changes: 73 additions & 0 deletions scripts/build.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -63,6 +63,24 @@ async function copyDirRecursive(src, dest) {
}
}

// Recursively adds CSS component exports
async function collectComponentCssExports(srcDir, exportsMap, relativePath = '') {
const entries = await fs.readdir(srcDir, { withFileTypes: true });

for (const entry of entries) {
const entryPath = path.join(srcDir, entry.name);
const subPath = path.posix.join(relativePath, entry.name);

if (entry.isDirectory()) {
await collectComponentCssExports(entryPath, exportsMap, subPath);
} else if (entry.name.endsWith('.css')) {
const exportKey = `./components/${subPath.replace(/\.css$/, '')}`;
const stylePath = `./dist/components/${subPath}`;
exportsMap[exportKey] = { style: stylePath };
}
}
}

// Main build function to prepare packages for publishing.
async function build() {
console.log('Starting build process...');
Expand Down Expand Up @@ -161,6 +179,61 @@ async function build() {
await execPromise(`npx tailwindcss -i "${cdnCssSrc}" -o "${cssDistCdnMinPath}" --minify`);
console.log(`Generated minified CSS: ${cssDistCdnMinPath}`);

// Copy basecoat.all.css
await fs.copyFile(path.join(srcCssDir, 'basecoat.all.css'), path.join(cssDistDir, 'basecoat.all.css'));
console.log(`Copied basecoat.all.css to ${cssDistDir}`);

// Copy base/base.css
const baseSrcDir = path.join(srcCssDir, 'base');
const baseDistDir = path.join(cssDistDir, 'base');
await ensureDir(baseDistDir);
await fs.copyFile(path.join(baseSrcDir, 'base.css'), path.join(baseDistDir, 'base.css'));
console.log(`Copied base/base.css to ${cssDistDir}`);

// Copy components
console.log('Copying individual CSS components...');
const componentsSrcDir = path.join(srcCssDir, 'components');
const componentsDistDir = path.join(cssDistDir, 'components');
await copyDirRecursive(componentsSrcDir, componentsDistDir);
console.log(`Copied component CSS files to ${componentsDistDir}`);

// Read package.json
const cssPackageJsonPath = path.join(cssPackageDir, 'package.json');
const cssPackageJson = JSON.parse(await fs.readFile(cssPackageJsonPath, 'utf-8'));

// Base exports
const exportsMap = {
"./package.json": "./package.json",
".": "./dist/basecoat.css",
"./css": "./dist/basecoat.css",
"./all": "./dist/js/all.js",
"./all.min": "./dist/js/all.min.js",
"./dropdown-menu": "./dist/js/dropdown-menu.js",
"./dropdown-menu.min": "./dist/js/dropdown-menu.min.js",
"./popover": "./dist/js/popover.js",
"./popover.min": "./dist/js/popover.min.js",
"./select": "./dist/js/select.js",
"./select.min": "./dist/js/select.min.js",
"./sidebar": "./dist/js/sidebar.js",
"./sidebar.min": "./dist/js/sidebar.min.js",
"./tabs": "./dist/js/tabs.js",
"./tabs.min": "./dist/js/tabs.min.js",
"./toast": "./dist/js/toast.js",
"./toast.min": "./dist/js/toast.min.js",

"./all.css": "./dist/basecoat.all.css",
"./base": "./dist/base/base.css"
};

// Add dynamic component exports
await collectComponentCssExports(componentsSrcDir, exportsMap);

// Write updated package.json
cssPackageJson.exports = exportsMap;
await fs.writeFile(cssPackageJsonPath, JSON.stringify(cssPackageJson, null, 2));
console.log('Updated package.json with dynamic CSS component exports.');


console.log('Build process finished successfully!');
}

Expand Down
Loading