Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

@kaizen/package-bundler

Package Overview
Dependencies
Maintainers
0
Versions
71
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@kaizen/package-bundler

Bundles libraries

  • 1.1.4
  • npm
  • Socket score

Version published
Weekly downloads
10K
increased by67.97%
Maintainers
0
Weekly downloads
 
Created
Source

@kaizen/package-bundler

Bundle packages as CJS and ESM with TypeScript types.

ESM code is tree-shakeable.

pnpm add -D @kaizen/package-bundler

build-shared-ui

For shared UI packages. CSS modules and/or Tailwind will be included in the dist in a single stylesheet ({PACKAGE_NAME}/dist/styles.css) to be imported by the consumer.

Note: If your package extends another shared UI package, you will need to list the other package as a peerDependency and have the end consumer import both stylesheets.

package.json

Add the following to your package.json:

"main": "dist/cjs/index.cjs",
"module": "dist/esm/index.mjs",
"types": "dist/types/index.d.ts",
"files": [
  "dist"
],
"sideEffects": [
  "styles.css"
],
"scripts": {
  "build": "pnpm package-bundler build-shared-ui",
}
Dependencies
pnpm add -D postcss postcss-preset-env rollup tslib

devDependencies:

  • postcss
  • postcss-preset-env
  • rollup
  • tslib (peerDep of rollup)
  • If using Tailwind:
    • tailwind

Required files

  • postcss.config.js
  • rollup.config.mjs
  • tsconfig.json
  • tsconfig.dist.json
  • tsconfig.types.json
  • If using Tailwind:
    • tailwind.config.js
    • src/tailwind.css

PostCSS

In postcss.config.js:

module.exports = {
  plugins: {
    "postcss-import": {},
    cssnano: {},
  },
}

If using Tailwind:

module.exports = {
  plugins: {
    "postcss-import": {},
    "tailwindcss/nesting": "postcss-nesting",
    tailwindcss: {},
    autoprefixer: {},
    cssnano: {},
  },
}

Rollup

In rollup.config.mjs:

import { pluginsSharedUi, rollupConfig } from "@kaizen/package-bundler";

export default rollupConfig({
  // Add extra entrypoints as required
  input: { index: "./src/index.ts" },
  plugins: pluginsSharedUi,
})

tsconfig

// tsconfig.json
{
  "extends": "@kaizen/package-bundler/tsconfig.base.json"
}

// tsconfig.dist.json
{
  "extends": [
    "./tsconfig.json",
    "@kaizen/package-bundler/tsconfig.dist.json"
  ]
}

// tsconfig.types.json
{
  "extends": [
    "./tsconfig.dist.json",
    "@kaizen/package-bundler/tsconfig.types.json"
  ]
}

Tailwind

pnpm add -D tailwind @kaizen/tailwind

Required files:

  • tailwind.config.js
  • src/tailwind.css

Follow the set up guide.

As we use PostCSS, ensure your postcss.config.js has the following plugins installed:

module.exports = {
  plugins: {
    "postcss-import": {},
    "tailwindcss/nesting": "postcss-nesting",
    tailwindcss: {},
    autoprefixer: {},
    cssnano: {},
  },
}

If you are creating a UI library to share with others, ensure you set a unique prefix to avoid clashes with other libraries.

// tailwind.config.js
module.exports = {
  prefix: "{uniquePrefix}-"
}

Alias

If you are using aliases, ensure you have them listed in your tsconfig.json (the tsconfig.dist and tsconfig.types should extend this) and in rollup.config.

Example:

// tsconfig.json
{
  "compilerOptions": {
    "paths": {
      "~components/*": ["./src/*"],
    }
  }
}

// tsconfig.dist.json
{
  "extends": ["./tsconfig.json", "@kaizen/package-bundler/tsconfig.dist.json"],
}
// rollup.config.mjs
export default rollupConfig({
  alias: {
    entries: [
      { find: "~components", replacement: "src" },
    ],
  },
})

FAQs

Package last updated on 13 Aug 2024

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc