Skip to content

Commit

Permalink
Kzn 2294 bundler package + style injection (#4656)
Browse files Browse the repository at this point in the history
  • Loading branch information
gyfchong authored May 21, 2024
1 parent ed18bcb commit c3baac6
Show file tree
Hide file tree
Showing 38 changed files with 1,532 additions and 1,410 deletions.
7 changes: 7 additions & 0 deletions .changeset/big-spies-move.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
---
"@kaizen/package-bundler": major
---

A package that bundles packages.

Adds bundler for shared UIs with support for (S)CSS modules and Tailwind.
5 changes: 5 additions & 0 deletions .changeset/modern-singers-bow.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"@kaizen/components": minor
---

Update build to use `@kaizen/package-bundler`.
5 changes: 5 additions & 0 deletions .changeset/yellow-grapes-hang.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"@kaizen/design-tokens": minor
---

Update build to use `tsx` instead of `ts-node`.
1 change: 1 addition & 0 deletions .eslintignore
Original file line number Diff line number Diff line change
@@ -1,2 +1,3 @@
/packages/**/dist
/packages/components/src/Icon/bin/Template.tsx
storybook/public
6 changes: 6 additions & 0 deletions .eslintrc.js
Original file line number Diff line number Diff line change
Expand Up @@ -343,5 +343,11 @@ module.exports = {
"no-duplicate-imports": "off",
},
},
{
files: ["**/bin/**", "jest.setup.ts"],
rules: {
"no-console": "off",
},
},
],
}
1 change: 0 additions & 1 deletion jest.setup.ts
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,6 @@ const CONSOLE_FAIL_TYPES = ["error", "warn"] as const
// Throw errors when a `console.error` or `console.warn` happens
// by overriding the functions
CONSOLE_FAIL_TYPES.forEach(type => {
// eslint-disable-next-line no-console
console[type] = message => {
throw new Error(
`Failing due to console.${type} while running test!\n\n${message}`
Expand Down
6 changes: 5 additions & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@
"jest:debug": "node --inspect-brk node_modules/.bin/jest --runInBand --no-cache",
"lint": "pnpm lint:ts && pnpm lint:md && pnpm lint:format && pnpm lint:styles",
"eslint-config": "pnpm eslint -c .eslintrc.js --max-warnings=0",
"lint:ts": "pnpm eslint-config '**/*.{ts,tsx}'",
"lint:ts": "pnpm eslint-config '**/*.{ts,tsx,mjs,js}'",
"lint:md": "pnpm eslint-config '**/*.{md,mdx}'",
"lint:format": "pnpm prettier --check '**/*'",
"lint:styles": "pnpm stylelint '**/*.scss'",
Expand Down Expand Up @@ -132,8 +132,12 @@
"stylelint-config-standard-scss": "^13.1.0",
"tailwindcss": "^3.4.3",
"ts-jest": "^29.1.2",
"ts-node": "^10.9.2",
"turbo": "^1.13.2",
"typescript": "^5.4.5",
"webpack": "^5.91.0"
},
"devDependenciesComments": {
"ts-node": "Required for jest"
}
}
37 changes: 10 additions & 27 deletions packages/components/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -26,20 +26,11 @@
"styles.css"
],
"scripts": {
"prepublishOnly": "pnpm build:components && pnpm build:styles && pnpm postBuild && pnpm dist:clean",
"build": "pnpm clean && pnpm prepublishOnly",
"build": "pnpm package-bundler build-shared-ui && pnpm build:global-styles",
"build:global-styles": "postcss ./styles/global.css --output dist/styles.css",
"test": "FORCE_COLOR=1 jest",
"test:ci": "pnpm test -- --ci",
"test:treeshake": "agadoo ./dist/esm/index.mjs",
"clean": "rimraf dist",
"build:components": "rollup -c && pnpm build:types",
"build:styles": "postcss styles/global.css --output dist/global.css",
"build:types": "tspc --project tsconfig.types.json",
"compile": "tsc",
"dist:clean": "rm ./dist/global.css ./dist/raw-styles.css",
"dist:combine-styles": "concat-cli -f ./dist/*.css ./dist/esm/*.css -o ./dist/raw-styles.css",
"dist:postcss": "postcss dist/raw-styles.css --output dist/styles.css",
"postBuild": "pnpm dist:combine-styles && pnpm dist:postcss",
"update-icons": "./src/Icon/bin/update-icons.sh",
"i18n:extract": "pnpm i18n-extract"
},
Expand Down Expand Up @@ -89,7 +80,6 @@
"react-select": "^5.8.0",
"react-textfit": "^1.1.1",
"resize-observer-polyfill": "^1.5.1",
"tslib": "^2.6.2",
"use-debounce": "^10.0.0",
"uuid": "^9.0.1"
},
Expand All @@ -101,34 +91,27 @@
"@cultureamp/frontend-apis": "^9.5.0",
"@cultureamp/i18n-react-intl": "^2.5.6",
"@kaizen/design-tokens": "workspace:*",
"@kaizen/tailwind": "workspace:*",
"@rollup/plugin-alias": "^5.1.0",
"@rollup/plugin-node-resolve": "^15.2.3",
"@rollup/plugin-babel": "^6.0.4",
"@rollup/plugin-commonjs": "^25.0.7",
"@rollup/plugin-typescript": "^11.1.6",
"@kaizen/package-bundler": "workspace:*",
"@types/lodash.debounce": "^4.0.9",
"@types/react-dom": "^18.3.0",
"@types/react-textfit": "^1.1.4",
"@types/uuid": "^9.0.8",
"agadoo": "^3.0.0",
"autoprefixer": "^10.4.19",
"babel-plugin-pure-static-props": "^0.2.0",
"concat-cli": "^4.0.0",
"query-string": "^9.0.0",
"react-intl": "^6.6.6",
"rollup": "^4.17.2",
"rollup-plugin-dts": "^6.1.0",
"rollup-plugin-ignore": "^1.0.10",
"rollup-plugin-node-externals": "^7.1.2",
"rollup-plugin-postcss": "^4.0.2",
"sass": "^1.76.0",
"serialize-query-params": "^2.0.2",
"svgo": "^3.2.0",
"ts-jest": "^29.1.2",
"ts-node": "^10.9.2",
"ts-patch": "^3.1.2",
"typescript-transform-paths": "^3.4.7"
"tslib": "^2.6.2",
"tsx": "^4.10.2"
},
"devDependenciesComments": {
"postcss": "Installed in root",
"postcss-cli": "Installed in root",
"postcss-preset-env": "Installed in root"
},
"peerDependencies": {
"@cultureamp/i18n-react-intl": "^2.5.6",
Expand Down
3 changes: 0 additions & 3 deletions packages/components/postcss.config.js
Original file line number Diff line number Diff line change
@@ -1,9 +1,6 @@
module.exports = {
plugins: {
"postcss-import": {},
"tailwindcss/nesting": "postcss-nesting",
tailwindcss: {},
autoprefixer: {},
cssnano: {},
},
}
106 changes: 10 additions & 96 deletions packages/components/rollup.config.mjs
Original file line number Diff line number Diff line change
@@ -1,99 +1,13 @@
import alias from "@rollup/plugin-alias"
import { babel, getBabelOutputPlugin } from "@rollup/plugin-babel";
import commonjs from "@rollup/plugin-commonjs"
import resolve from "@rollup/plugin-node-resolve"
import typescript from "@rollup/plugin-typescript"
import ignore from "rollup-plugin-ignore"
import nodeExternals from "rollup-plugin-node-externals"
import postcss from "rollup-plugin-postcss"
import { pluginsSharedUi, rollupConfig } from "@kaizen/package-bundler";


const sharedConfig = {
export default rollupConfig({
input: { index: "./src/index.ts", future: "./src/__future__/index.ts" },
plugins: [
nodeExternals({
devDeps: true
}),
// Has to be the same as packages/components/tsconfig.json -> compilerOptions -> paths
alias({
entries: [
{ find: "~types", replacement: "src/types" },
{ find: "~utils", replacement: "src/utils" },
{ find: "~components", replacement: "src" },
// i18n-react-intl package attempts to import locales from this path.
// When rollup attempts to import from the 'find' path, it will be
// redirected to import from the replacement path (same as storybook webpack config).
{
find: "__@cultureamp/i18n-react-intl/locales",
replacement: "locales",
},
],
}),
resolve({
preferBuiltins: true,
extensions: [".js", ".jsx", ".ts", ".tsx"
// This is needed to ensure that css is compiled correctly.
// Without this there is an alphabetised order in the dist CSS for subcomponents.
// This can cause styles being overwritten by primitives, ie: BaseButton overwriting DropdownButton
// https://cultureamp.slack.com/archives/C02NUQ27G56/p1713157055178419
plugins: pluginsSharedUi,
alias: {
entries: [
{ find: "~types", replacement: "src/types" },
{ find: "~utils", replacement: "src/utils" },
{ find: "~components", replacement: "src" },
],
}),
// These libraries aren't used in KAIO, and require polyfills to be set up
// in consuming repos. Ignoring them here removes the need for extra setup in
// consuming repos.
ignore(["stream", "http", "https", "zlib"]),
babel({ babelHelpers: "bundled" }),
getBabelOutputPlugin({
plugins: [
"@babel/plugin-transform-react-pure-annotations",
"babel-plugin-pure-static-props"
]
}),
postcss({
modules: true,
extract: true,
extensions: [".scss", ".css"],
}),
]
}

const cjsConfig = {
...sharedConfig,
plugins: [
...sharedConfig.plugins,
typescript({
tsconfig: "./tsconfig.dist.json",
compilerOptions: {
esModuleInterop: false,
allowSyntheticDefaultImports: true
}
}),
commonjs(),
],
output: {
dir: "dist/cjs",
format: "cjs",
preserveModules: true,
entryFileNames: "[name].cjs",
interop: "auto",
}
}

const esmConfig = {
...sharedConfig,
plugins: [
...sharedConfig.plugins,
typescript({ tsconfig: "./tsconfig.dist.json" })
],
output: {
dir: "dist/esm",
format: "esm",
preserveModules: true,
entryFileNames: "[name].mjs",
}
}

export default [
cjsConfig,
esmConfig,
]
},
})
1 change: 0 additions & 1 deletion packages/components/svgo.config.js
Original file line number Diff line number Diff line change
@@ -1,4 +1,3 @@
const path = require("path")
const { recurse, removeRootSVGElement } = require("./svgoUtils")

module.exports = {
Expand Down
13 changes: 2 additions & 11 deletions packages/components/tsconfig.dist.json
Original file line number Diff line number Diff line change
@@ -1,15 +1,6 @@
{
"extends": "./tsconfig.json",
"compilerOptions": {
"module": "esnext",
"moduleResolution": "node",
"declaration": false,
"noEmit": false,
"plugins": [
// Transform paths in output .js files
{ "transform": "typescript-transform-paths" }
]
},
"extends": ["./tsconfig.json", "@kaizen/package-bundler/tsconfig.dist.json"],
"include": ["src/**/*"],
"exclude": [
"node_modules",
"**/*.spec.ts",
Expand Down
11 changes: 2 additions & 9 deletions packages/components/tsconfig.json
Original file line number Diff line number Diff line change
@@ -1,9 +1,7 @@
{
"extends": "../../tsconfig.json",
"extends": "@kaizen/package-bundler/tsconfig.base.json",
"compilerOptions": {
"baseUrl": ".",
"module": "esnext",
"moduleResolution": "node",
"paths": {
"~storybook/*": ["../../storybook/*"],
"~types/*": ["./src/types/*"],
Expand All @@ -14,10 +12,5 @@
},
"files": ["types.d.ts"],
"include": ["src/**/*"],
"exclude": ["node_modules"],
"ts-node": {
"moduleTypes": {
"src/Icon/bin/**/*": "cjs"
}
}
"exclude": ["node_modules"]
}
14 changes: 4 additions & 10 deletions packages/components/tsconfig.types.json
Original file line number Diff line number Diff line change
@@ -1,12 +1,6 @@
{
"extends": "./tsconfig.dist.json",
"compilerOptions": {
"declaration": true,
"declarationDir": "dist/types",
"emitDeclarationOnly": true,
"plugins": [
// Transform paths in output .d.ts files (Include this line if you output declarations files)
{ "transform": "typescript-transform-paths", "afterDeclarations": true }
]
}
"extends": [
"./tsconfig.dist.json",
"@kaizen/package-bundler/tsconfig.types.json"
]
}
4 changes: 2 additions & 2 deletions packages/design-tokens/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@
"test": "FORCE_COLOR=1 jest",
"test:ci": "pnpm test -- --ci",
"build": "pnpm clean && pnpm prepublishOnly",
"build:json": "pnpm ts-node --files ./bin/buildCssVarTokens.ts",
"build:json": "tsx ./bin/buildCssVarTokens.ts",
"build:ts": "tsc --project tsconfig.dist.json",
"build:less": "json-to-flat-sass './tokens/*.json' 'less' --extension 'less' --caseType 'kebab' && prettier less/* --write",
"build:sass": "json-to-flat-sass './tokens/*.json' 'sass' --extension 'scss' --caseType 'kebab' && prettier sass/* --write",
Expand All @@ -40,7 +40,7 @@
"postcss": "^8.4.38",
"prettier": "*",
"react-map-interaction": "^2.1.0",
"ts-node": "^10.9.2"
"tsx": "^4.10.2"
},
"dependencies": {
"@types/color-string": "^1.5.5",
Expand Down
Loading

0 comments on commit c3baac6

Please sign in to comment.