Skip to content

Commit

Permalink
feat: css processing (#3362)
Browse files Browse the repository at this point in the history
Replaced tsup with Rollup in the AIO to bundle TS and CSS with a single tool + Experimental Icon replacement
  • Loading branch information
gyfchong authored Mar 22, 2023
1 parent 5e85cea commit 38c0fa3
Show file tree
Hide file tree
Showing 51 changed files with 1,511 additions and 349 deletions.
1 change: 1 addition & 0 deletions .buildkite/scripts/release.sh
Original file line number Diff line number Diff line change
Expand Up @@ -49,6 +49,7 @@ release() {

yarn install --frozen-lockfile

# Certain packages rely on these two packages to be built so they can access dist files
yarn workspace @kaizen/design-tokens prepublish
yarn workspace @kaizen/tailwind prepublish

Expand Down
14 changes: 13 additions & 1 deletion .eslintrc.js
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,7 @@ module.exports = {
"plugin:ssr-friendly/recommended",
"plugin:jsx-a11y/recommended",
"plugin:storybook/recommended",
"plugin:import/typescript",
],
parser: "@typescript-eslint/parser",
parserOptions: {
Expand Down Expand Up @@ -74,7 +75,7 @@ module.exports = {
"@typescript-eslint/class-name-casing": "off",
"@typescript-eslint/consistent-type-assertions": "off",
"@typescript-eslint/consistent-type-definitions": "off",
"@typescript-eslint/explicit-function-return-type": "error",
"@typescript-eslint/explicit-function-return-type": "off",
"@typescript-eslint/explicit-member-accessibility": [
"off",
{
Expand Down Expand Up @@ -178,6 +179,11 @@ module.exports = {
group: "external",
position: "after",
},
{
pattern: "~*/**",
group: "internal",
position: "before",
},
{
pattern: "..",
group: "parent",
Expand Down Expand Up @@ -262,5 +268,11 @@ module.exports = {
"import/no-extraneous-dependencies": "off",
},
},
{
files: ["*.ts", "*.mts", "*.cts", "*.tsx"],
rules: {
"@typescript-eslint/explicit-function-return-type": "error",
},
},
],
}
4 changes: 4 additions & 0 deletions .github/workflows/ci.yml
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,7 @@ jobs:
env:
NODE_AUTH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
- run: yarn compile
- run: yarn pkg:aio:compile

linting:
if: github.ref != 'refs/heads/main'
Expand Down Expand Up @@ -62,6 +63,7 @@ jobs:
env:
NODE_AUTH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
- run: USE_REACT_16=true yarn test --ci
- run: cd ./packages/components && USE_REACT_16=true yarn test --ci

jest-react-17:
if: github.ref != 'refs/heads/main'
Expand All @@ -77,6 +79,7 @@ jobs:
env:
NODE_AUTH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
- run: USE_REACT_17=true yarn test --ci
- run: cd ./packages/components && USE_REACT_17=true yarn test --ci

jest-react-18:
if: github.ref != 'refs/heads/main'
Expand All @@ -92,3 +95,4 @@ jobs:
env:
NODE_AUTH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
- run: yarn test --ci
- run: yarn pkg:aio:test --ci
2 changes: 1 addition & 1 deletion .nvmrc
Original file line number Diff line number Diff line change
@@ -1 +1 @@
16.13.1
16.19.1
4 changes: 4 additions & 0 deletions jest.config.js
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
/* eslint-disable no-console */
module.exports = {
preset: "ts-jest",
testEnvironment: "jsdom",
Expand All @@ -10,11 +11,13 @@ module.exports = {
"\\.svg$": require.resolve("@kaizen/component-library/mocks/svgMock"),
},
transformIgnorePatterns: ["[/\\\\]node_modules[/\\\\].+\\.(js|jsx|mjs)$"],
modulePathIgnorePatterns: ["<rootDir>/packages/components"],
}

process.env.TZ = "UTC"

if (process.env.USE_REACT_16 === "true") {
console.log("=== React 16 tests ===")
module.exports.cacheDirectory = ".cache/jest-cache-react-16"
module.exports.moduleNameMapper = {
...module.exports.moduleNameMapper,
Expand All @@ -24,6 +27,7 @@ if (process.env.USE_REACT_16 === "true") {
"^react-test-renderer((\\/.*)?)$": "react-test-renderer-17$1",
}
} else if (process.env.USE_REACT_17 === "true") {
console.log("=== React 17 tests ===")
module.exports.cacheDirectory = ".cache/jest-cache-react-17"
module.exports.moduleNameMapper = {
...module.exports.moduleNameMapper,
Expand Down
7 changes: 5 additions & 2 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
"draft-packages/*"
],
"engines": {
"node": ">=v16.13.1"
"node": ">=v16.19.1"
},
"scripts": {
"storybook": "IS_DEV=true start-storybook -p 6006 -c storybook",
Expand All @@ -26,7 +26,9 @@
"chromatic": "chromatic",
"commit": "cz",
"plop": "plop",
"pkg:aio": "yarn workspace @kaizen/components"
"pkg:aio": "yarn workspace @kaizen/components",
"pkg:aio:test": "yarn pkg:aio test",
"pkg:aio:compile": "yarn pkg:aio compile"
},
"dependencies": {
"@kaizen/design-tokens": "^10.0.11",
Expand Down Expand Up @@ -105,6 +107,7 @@
"node-sass": "^8.0.0",
"plop": "^3.1.2",
"postcss": "^8.4.19",
"postcss-cli": "^10.1.0",
"postcss-flexbugs-fixes": "^5.0.2",
"postcss-import": "^15.1.0",
"postcss-loader": "^7.0.2",
Expand Down
6 changes: 0 additions & 6 deletions packages/component-library/components/Icon/Icon.module.scss
Original file line number Diff line number Diff line change
Expand Up @@ -4,10 +4,6 @@
.icon {
@extend %caIcon;

// Set sensible defaults for icon colours when
// windows high-contrast mode is enabled. These
// should be overridden by the consumer when the
// icon colour conveys information, such as mood.
@media screen and (-ms-high-contrast: active) {
color: black;
}
Expand Down Expand Up @@ -54,8 +50,6 @@
}
}

// On dark backgrounds, icons are fully opaque by default and half opacity when active.
// Hover and disabled states are the same.
.reversedInteractiveIconWrapper {
composes: interactiveIconWrapper;
.icon {
Expand Down
42 changes: 42 additions & 0 deletions packages/components/jest.config.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,42 @@
/* eslint-disable no-console */
import { JestConfigWithTsJest } from "ts-jest"
import sharedConfig from "../../jest.config.js"

const jestConfig: JestConfigWithTsJest = {
...sharedConfig,
roots: ["<rootDir>"],
modulePathIgnorePatterns: [],
moduleNameMapper: {
...sharedConfig.moduleNameMapper,
"~types/(.*)$": "<rootDir>/src/types/$1",
"~utils/(.*)$": "<rootDir>/src/utils/$1",
"~components/(.*)$": "<rootDir>/src/$1",
"~icons/(.*)$": "<rootDir>/src/SVG/icons/$1",
},
}

export default jestConfig

process.env.TZ = "UTC"

if (process.env.USE_REACT_16 === "true") {
console.log("=== React 16 tests ===")
module.exports.cacheDirectory = ".cache/jest-cache-react-16"
module.exports.moduleNameMapper = {
...module.exports.moduleNameMapper,
"^react-dom((\\/.*)?)$": "react-dom-16$1",
"^react((\\/.*)?)$": "react-16$1",
"^@testing-library/react((\\/.*)?)$": "@testing-library/react-12$1",
"^react-test-renderer((\\/.*)?)$": "react-test-renderer-17$1",
}
} else if (process.env.USE_REACT_17 === "true") {
console.log("=== React 17 tests ===")
module.exports.cacheDirectory = ".cache/jest-cache-react-17"
module.exports.moduleNameMapper = {
...module.exports.moduleNameMapper,
"^react-dom((\\/.*)?)$": "react-dom-17$1",
"^react((\\/.*)?)$": "react-17$1",
"^@testing-library/react((\\/.*)?)$": "@testing-library/react-12$1",
"^react-test-renderer((\\/.*)?)$": "react-test-renderer-17$1",
}
}
64 changes: 41 additions & 23 deletions packages/components/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -2,49 +2,67 @@
"name": "@kaizen/components",
"version": "1.5.1",
"description": "Kaizen component library",
"main": "dist/index.js",
"module": "dist/esm/index.js",
"types": "dist/index.d.ts",
"author": "Geoffrey Chong <geoff.chong@cultureamp.com>",
"homepage": "https://cultureamp.design",
"license": "MIT",
"bugs": {
"url": "https://github.com/cultureamp/kaizen-discourse/issues"
},
"repository": {
"type": "git",
"url": "git+https://github.com/cultureamp/kaizen-design-system.git"
},
"files": [
"future",
"dist",
"icons"
],
"main": "dist/cjs/index.js",
"module": "dist/esm/index.js",
"types": "dist/index.d.ts",
"scripts": {
"prepublish": "tsup && yarn tailwindcss",
"build": "yarn prepublish",
"tailwindcss": "tailwindcss -i ./src/styles.css -o ./dist/styles.css",
"build:watch": "yarn clean && yarn prepublish --watch",
"clean": "rimraf 'dist'"
},
"repository": {
"type": "git",
"url": "git+https://github.com/cultureamp/kaizen-design-system.git"
},
"author": "Geoffrey Chong <geoff.chong@cultureamp.com>",
"license": "MIT",
"bugs": {
"url": "https://github.com/cultureamp/kaizen-discourse/issues"
"build": "yarn build:clean && yarn prepublish",
"build:clean": "rimraf 'dist'",
"build:components": "rollup -c",
"build:deps": "yarn workspace @kaizen/design-tokens build && yarn workspace @kaizen/tailwind build",
"compile": "tsc",
"dist:clean": "rm ./dist/tailwind.css ./dist/raw-styles.css",
"dist:combine-styles": "concat-cli -f ./dist/esm/*.css ./dist/*.css -o ./dist/raw-styles.css",
"dist:copy-tailwind": "cp styles/tailwind.css dist/tailwind.css",
"dist:postcss": "postcss dist/raw-styles.css --output dist/styles.css",
"postBuild": "yarn dist:copy-tailwind && yarn dist:combine-styles && yarn dist:postcss",
"prepublish": "yarn build:deps && yarn build:components && yarn postBuild && yarn dist:clean",
"test": "jest"
},
"homepage": "https://github.com/cultureamp/kaizen-design-system#readme",
"dependencies": {
"@kaizen/component-library": "^16.4.3",
"@kaizen/design-tokens": "^10.3.1",
"@kaizen/draft-tooltip": "^5.4.32",
"@popperjs/core": "^2.11.6",
"classnames": "^2.3.2",
"react-focus-on": "^3.7.0",
"react-popper": "^2.3.0"
},
"devDependencies": {
"@deanc/esbuild-plugin-postcss": "^1.0.2",
"@rollup/plugin-alias": "^4.0.3",
"@rollup/plugin-commonjs": "^24.0.1",
"@rollup/plugin-image": "^3.0.2",
"@rollup/plugin-node-resolve": "^15.0.1",
"@rollup/plugin-typescript": "^11.0.0",
"@kaizen/tailwind": "^0.6.0",
"autoprefixer": "^10.4.14",
"tailwindcss": "^3.2.7",
"tiny-glob": "^0.2.9",
"tsup": "^6.6.3"
"concat-cli": "^4.0.0",
"esbuild": "^0.17.12",
"rollup": "^3.20.0",
"rollup-plugin-dts": "^5.3.0",
"rollup-plugin-esbuild": "^5.0.0",
"rollup-plugin-peer-deps-external": "^2.2.4",
"rollup-plugin-postcss": "^4.0.2",
"ts-jest": "^29.0.5",
"ttypescript": "^1.5.15",
"typescript-transform-paths": "^3.4.6"
},
"peerDependencies": {
"@kaizen/design-tokens": "^2.10.3 || ^3.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0 || ^9.0.0 || ^10.0.0",
"react": "^16.14.0 || ^17.0.0 || ^18.0.0"
}
}
8 changes: 7 additions & 1 deletion packages/components/postcss.config.js
Original file line number Diff line number Diff line change
@@ -1,3 +1,9 @@
module.exports = {
plugins: [require("tailwindcss"), require("autoprefixer")],
plugins: {
"postcss-import": {},
"tailwindcss/nesting": "postcss-nesting",
tailwindcss: {},
autoprefixer: {},
cssnano: {},
},
}
69 changes: 69 additions & 0 deletions packages/components/rollup.config.mjs
Original file line number Diff line number Diff line change
@@ -0,0 +1,69 @@
import alias from "@rollup/plugin-alias";
import commonjs from "@rollup/plugin-commonjs"
import image from "@rollup/plugin-image"
import resolve from "@rollup/plugin-node-resolve"
import typescript from "@rollup/plugin-typescript"
import dts from "rollup-plugin-dts"
import esbuild from "rollup-plugin-esbuild"
import peerDepsExternal from "rollup-plugin-peer-deps-external"
import postcss from "rollup-plugin-postcss"
import ttypescript from "ttypescript"

const TYPES_TEMP_DIR = "dts"
const OUTPUT_DIR = "dist"

const getCompiledConfigByModuleType = format => ({
input: { index: "./src/index.ts", future: "./src/__future__/index.ts" },
plugins: [
peerDepsExternal(),
// 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: "~icons", replacement: "src/SVG/icons" },
{ find: "~components", replacement: "src" },
]
}),
resolve({
preferBuiltins: true,
extensions: [".js", ".jsx", ".ts", ".tsx"],
}),
postcss({
extract: true,
extensions: [".scss", ".css"],
}),
typescript({
declaration: true,
declarationDir: `${OUTPUT_DIR}/${format}/${TYPES_TEMP_DIR}`,
exclude: ["node_modules", "**/*.spec.ts", "**/*.spec.tsx", "**/*.stories.tsx"],
// We use ttypescript instead of typescript to allow transformer to convert alias into actual paths/dependencies
typescript: ttypescript
}),
commonjs({
include: /node_modules/,
requireReturnsDefault: "auto",
}),
esbuild(),
image(),
],
output: [
{
dir: `${OUTPUT_DIR}/${format}`,
format,
sourcemap: true,
},
],
})

export default [
getCompiledConfigByModuleType("cjs"),
getCompiledConfigByModuleType("esm"),
// This step doesn't matter if it's cjs or esm, the output will be the same (esm is faster)
{
input: `./${OUTPUT_DIR}/esm/dts/index.d.ts`,
output: [{ file: `${OUTPUT_DIR}/index.d.ts`, format: "esm" }],
external: [/\.scss$/],
plugins: [dts()],
}
]
1 change: 1 addition & 0 deletions packages/components/setupTests.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
require("../../setupTests.ts")
4 changes: 2 additions & 2 deletions packages/components/src/ButtonGroup/ButtonGroup.tsx
Original file line number Diff line number Diff line change
@@ -1,11 +1,11 @@
import React, { HTMLAttributes } from "react"
import classnames from "classnames"
import { Tooltip, TooltipProps } from "@kaizen/draft-tooltip"
import { OverrideClassName } from "~types/OverrideClassName"
import {
FilterButtonBase,
FilterButtonBaseProps,
} from "../FilterButton/components/FilterButtonBase"
import { OverrideClassName } from "../types"
} from "../FilterButton/_sub-components/FilterButtonBase"
import styles from "./ButtonGroup.module.scss"

const isFilterButton = (
Expand Down
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
import React from "react"
import { ComponentMeta, ComponentStory, Story } from "@storybook/react"
import { Tooltip } from "@kaizen/draft-tooltip"
import { FilterButtonBase } from "~components/FilterButton/_sub-components/FilterButtonBase"
import { StickerSheet } from "../../../../../storybook/components/StickerSheet"
import { FilterButtonBase } from "../../FilterButton/components/FilterButtonBase"
import { ButtonGroup } from ".."

export default {
Expand Down
Loading

0 comments on commit 38c0fa3

Please sign in to comment.