Making workspaces

.github/workflows/ci.yml

@@ -120,20 +120,19 @@ jobs:
         env:
           MUI_VERSION: ${{ matrix.mui-version }}
         run: |
-          bun link
-          cat >integration-test/package.json <<EOF
+          cat >packages/integration-test/package.json <<EOF
             {
               "name": "integration-test",
               "version": "1.0.0",
               "license": "MIT",
               "dependencies": {
-                "merge-sx": "link:merge-sx",
+                "merge-sx": "workspace:*",
                 "@mui/material": "${MUI_VERSION}",
                 "react": "^17.0.2",
                 "react-dom": "^17.0.2"
               }
             }
           EOF
-          cat integration-test/package.json
-          bun --cwd=integration-test install
+          cat packages/integration-test/package.json
+          bun install --filter integration-test
           bun run intTest

.github/workflows/minor.yml

@@ -14,4 +14,4 @@ jobs:
         with:
           node-version: 18
       - uses: fregante/setup-git-user@v2
-      - run: npm version minor
+      - run: bun version minor

.github/workflows/npm-publish.yml

@@ -30,6 +30,7 @@ jobs:
           bun-version: latest
       - name: Install dependencies
         run: bun install
-      - run: npm publish --tag ${{ inputs.tag }}
+      - run: bun publish --tag ${{ inputs.tag }}
+        working-directory: ./packages/merge-sx
         env:
-          NODE_AUTH_TOKEN: ${{secrets.NPM_KEY}}
+          NPM_KEY: ${{secrets.NPM_KEY}}

.github/workflows/patch.yml

@@ -14,4 +14,4 @@ jobs:
         with:
           node-version: 18
       - uses: fregante/setup-git-user@v2
-      - run: npm version patch
+      - run: bun version patch

README.md

@@ -0,0 +1 @@
+packages/merge-sx/README.md

bunfig.toml

@@ -1,5 +1,6 @@
 [install]
 peer = false
+registry = { url = "https://registry.npmjs.org", token = "$NPM_KEY" }
 [test]
 coverage = true # always enable coverage
 coverageReporter  = ["text", "lcov"]

package.json

@@ -1,77 +1,27 @@
 {
-  "name": "merge-sx",
-  "version": "3.2.4",
-  "description": "Combines multiple SxProps for Material UI components.",
-  "main": "dist/index.cjs",
-  "module": "dist/index.js",
-  "types": "dist/index.d.ts",
-  "type": "module",
-  "exports": {
-    ".": {
-      "import": {
-        "types": "./dist/index.d.ts",
-        "default": "./dist/index.js"
-      },
-      "require": {
-        "types": "./dist/index.d.cts",
-        "default": "./dist/index.cjs"
-      }
-    }
-  },
-  "files": [
-    "dist",
-    "*.md"
-  ],
-  "sideEffects": false,
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/RobinTail/merge-sx.git"
-  },
-  "homepage": "https://github.com/RobinTail/merge-sx",
+  "private": true,
+  "workspaces": ["packages/*"],
   "author": {
     "name": "Anna Bocharova",
     "url": "https://robintail.cz"
   },
-  "bugs": "https://github.com/RobinTail/merge-sx/issues",
-  "funding": "https://github.com/sponsors/RobinTail",
   "license": "MIT",
   "scripts": {
-    "build": "tsdown && attw --pack",
+    "build": "bun run --cwd packages/merge-sx build",
     "lint": "bun run biome check",
-    "test": "tsc --noEmit && bun test src",
-    "intTest": "tsc -p integration-test/tsconfig.json && bun test integration-test",
-    "mdfix": "bunx --bun prettier *.md --write",
-    "postversion": "git push && git push --tags",
-    "prepublishOnly": "bun run lint && bun run test && bun run build"
-  },
-  "peerDependencies": {
-    "@mui/material": "^5.1.0 || ^6.0.0"
+    "test": "bun test --filter merge-sx",
+    "intTest": "tsc -p packages/integration-test && bun test --filter integration-test",
+    "mdfix": "bunx --bun prettier packages/merge-sx/*.md --write",
+    "version": "bun run tools/version.ts"
   },
   "devDependencies": {
     "@arethetypeswrong/cli": "^0.17.0",
     "@biomejs/biome": "1.9.4",
-    "@emotion/styled": "^11.13.0",
-    "@mui/material": "^6.1.2",
     "@tsconfig/bun": "^1.0.7",
     "@types/bun": "latest",
-    "react": "^18.3.1",
-    "tsdown": "^0.3.0",
-    "typescript": "^5.6.2"
-  },
-  "keywords": [
-    "react",
-    "typescript",
-    "styled-components",
-    "reactjs",
-    "material-ui",
-    "styling",
-    "css-in-js",
-    "jss",
-    "strict",
-    "mui",
-    "merge",
-    "combine",
-    "merging",
-    "muiv5"
-  ]
+    "@types/semver": "^7.5.8",
+    "semver": "^7.6.3",
+    "tsdown": "^0.3.1",
+    "typescript": "^5.7.2"
+  }
 }

integration-test/tsconfig.json → packages/integration-test/tsconfig.json

@@ -1,5 +1,5 @@
 {
-  "extends": "../tsconfig.json",
+  "extends": "../../tsconfig.json",
   "include": ["*.ts"],
   "compilerOptions": {
     "noEmit": true

CHANGELOG.md → packages/merge-sx/CHANGELOG.md

@@ -2,6 +2,13 @@
 
 ## Version 3
 
+### v3.3.0
+
+- Technical update:
+  - Upgraded all dependencies and tested on latest MUI 6;
+  - Implemented workspaces to avoid duplicated dependencies for the integration test;
+  - Releasing using `bun publish`.
+
 ### v3.2.3
 
 - Dependencies update:

packages/merge-sx/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2022 Anna Bocharova
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

packages/merge-sx/README.md

@@ -0,0 +1,91 @@
+# merge-sx
+
+[![Coverage Status](https://coveralls.io/repos/github/RobinTail/merge-sx/badge.svg?branch=master)](https://coveralls.io/github/RobinTail/merge-sx?branch=master)
+![NPM Downloads](https://img.shields.io/npm/dw/merge-sx)
+![NPM License](https://img.shields.io/npm/l/merge-sx)
+
+Combines multiple [`SxProps`](https://mui.com/system/getting-started/the-sx-prop)
+for [Material UI](https://mui.com/) components.
+
+## Installation
+
+```shell
+npm install merge-sx
+# or
+yarn add merge-sx
+```
+
+## Usage
+
+The utility provides a very simple and semantically clean interface, that supports conditional and optional inclusions.
+
+```ts
+import { mergeSx } from "merge-sx";
+
+// Merge your SxProps
+mergeSx(sx1, sx2 /*, ... */);
+// Merge optionally
+mergeSx(internalSx, props?.sx); // supports undefined
+// Merge conditionally
+mergeSx(commonSx, isMobile && mobileSx); // supports false
+```
+
+## Why might you need it
+
+<abbr title="Material UI">MUI</abbr> 5 has introduced a new way of styling React components using a Theme-aware
+`sx` property. It can be necessary to create your own styled components while still allowing for additional styling
+by the consumer. In this case your component will have its own `sx` property, most likely optional. This makes it
+necessary somehow to combine your own styles with the styles coming from the consumer of your component. One approach
+might be using a styling wrapper, an alternative way to style your component with the
+[`styled()` utility](https://mui.com/system/styled/). Thus, you could apply the consumer's `sx` to the pre-styled
+component. However, this approach can be inconvenient for several reasons.
+
+I came to conclusion that merging several `sx` properties is better. However, the `SxProps` has rather complex data
+type. It can be an object with styling properties, can be function, can be `null`. It can be a challenge to perform
+a merge under strict typing of Typescript.
+
+## How it works
+
+Luckily, starting version [5.1.0](https://github.com/mui/material-ui/releases/tag/v5.1.0) of MUI `SxProps`
+[can](https://github.com/mui/material-ui/blob/v5.1.0/packages/mui-system/src/styleFunctionSx/styleFunctionSx.d.ts#L60)
+also be `array`. However, nested arrays are not allowed, so this utility does exactly the flat merge, also bringing
+support for conditional and optional inclusions, providing a very simple and semantically clean interface.
+
+## Performance
+
+The utility has been tested to support up to 65535 arguments.
+
+![Performance chart](https://raw.githubusercontent.com/RobinTail/merge-sx/refs/heads/master/performance.svg)
+
+## Examples
+
+### Conditional merging
+
+The utility supports `false`:
+
+```tsx
+<Button sx={mergeSx(commonSx, isMobile && mobileSx)}>Click me</Button>
+```
+
+### Optional merging
+
+The utility supports `undefined`:
+
+```tsx
+interface MyButtonProps {
+  sx?: SxProps<Theme>; // optional prop for consumer
+}
+
+const MyButton = ({ sx: consumerSx }: MyButtonProps) => (
+  <Button sx={mergeSx(internalSx, consumerSx)}>Click me</Button>
+);
+```
+
+### Inline Theme supplying
+
+The utility is generic and accepts the type argument.
+
+```ts
+// theme is Theme
+mergeSx<Theme>(sx1, (theme) => ({ mb: theme.spacing(1) }));
+```