Skip to content

v2.0.0: support CSS modules, use vitest + biome #18

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

Merged
phloe merged 4 commits into from
Feb 5, 2026
Merged

v2.0.0: support CSS modules, use vitest + biome #18

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
fabe6b0
support CSS modules, use vitest + biome
phloe Jan 2, 2026
553ba09
linting
phloe Jan 2, 2026
860d36e
use drdk-cli
phloe Jan 2, 2026
e344c76
more explicit juggling between element and modifiers parameters
phloe Jan 5, 2026
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
4 changes: 0 additions & 4 deletions .babelrc
View file
Open in desktop

This file was deleted.

7 changes: 0 additions & 7 deletions .flowconfig
View file
Open in desktop

This file was deleted.

2 changes: 1 addition & 1 deletion .gitignore
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
node_modules/
lib/
coverage/
.DS_Store
*.orig
npm-debug.log
1 change: 0 additions & 1 deletion .npmignore
View file
Open in desktop

This file was deleted.

9 changes: 9 additions & 0 deletions CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,3 +5,12 @@
### Features

* bem.scoped

## v2.0.0

### Features

* The package is now an ESM module.
* `bem.unscoped`, `bem.scoped`, and `bem.single` was deprecated.
* The default export is now the `bemHelper` factory that returns a bem function with prebound parameters.
* `bemHelper` supports CSS module styles via a second parameter (`styles`).
169 changes: 78 additions & 91 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,165 +14,152 @@ npm install @dr/bem-helper

```js

var bem = require("@dr/bem-helper");

var className = bem("block", "element", { modifier: true });
// className === "element block__element element--modifier block__element--modifier"
// ^^^^^^^^^^^^^^ ^^^^^^^^^^^^^^^^^^^^^^^^
// _____/ _____________________/
// / /
// bem.scoped -> "block__element block__element--modifier"
// ^^^^^^^^^^^^^^^^^^^^^^^^
// ___________/
// /
// bem.single -> "block__element--modifier"
import bh from "@dr/bem-helper";

// At the top of your component; create a bem function with prebound parameters:
const bem = bh('block');

// Further down; use the bem function to output BEM-style classnames:
return (
<div className={bem()}>
<div className={bem("element", { modifier: true })}>
{ /* */ }
</div>;
</div>
);

// equals:
// <div className="block">
// <div className="block__element block__element--modifier">
// { /* */ }
// </div>;
// </div>

```


#### With CSS modules

## API

* [bem](#bem)
* [bem.scoped](#bemscoped)
* [bem.single](#bemsingle)

### bem

A function that creates all applicable combinations of classnames for an element in BEM-style.

#### Arguments

* `block` (string) - The block element for the classname.
* `...args` (string|object) - Optional. Any number of the following arguments are allowed:
* `element` (string) - Optional.
* `modifier` (object) - Optional. Keys are used for modifier names. Values determine whether to turn the modifier off (`false`, `""`, `null` or `undefined`) or on - either through `true` or a value which will be appended to the modifier name; `{modifier: true}` -> `"--modifier"`, `{modifier: "value"}` -> `"--modifier-value"`. Should not follow a previous modifier argument.

#### Examples

###### Basic
To use @dr/bem-helper with CSS modules, import your styles as an object as usual.
Then just add the `styles` object as a second parameter when creating the bem function:

```js

var className = bem("block", "element");
// className === "element block__element"
import bh from "@dr/bem-helper";

```
import styles from "./MyComponent.module.scss";

###### Elements with modifiers
// At the top of your component; create a bem function with prebound parameters:
const bem = bh('block', styles);

```js
// Further down; use the bem function to output BEM-style classnames:
return (
<div className={bem()}>
<div className={bem("element", { modifier: true })}>
{ /* */ }
</div>;
</div>
);

var className = bem("block", "element", { modifier: true });
// className === "element block__element element--modifier block__element--modifier"
// equals:
// <div className="block__f874i">
// <div className="block__element__hxvxn block__element--modifier__nb3t8">
// { /* */ }
// </div>;
// </div>

```

###### Modifiers with values

```js

var className = bem("block", "element", { modifier: "value", modifier2: false });
// className === "element block__element element--modifier-value block__element--modifier-value"
## API

```
* [bemHelper](#bemHelper)
* [bem](#bem)

###### Prebinding helpers

```js
### bemHelper

var boundBem = bem.bind(null, "block");
A helper function that returns a function to create BEM-style classnames, prebound with the parameters given.

var className = boundBem("element", { modifier: true });
// className === "element block__element element--modifier block__element--modifier"
CSS modules is supported via the `styles` param.

```
#### Arguments

* `block` (string) - The block element.
* `styles` (object) - An optional CSS modules styles object.

### bem.scoped
#### Returns

Same as [bem](#bem) - but it returns a fully scoped classname.
A bem function with prebound parameters.

#### Examples

###### Basic

```js

var className = bem.scoped("block", "element");
// className === "block__element"
import bh from "@dr/bem-helper";

const bem = bh('block');

```

###### Elements with modifiers
###### With CSS modules

```js

var className = bem.scoped("block", { modifier: true });
// className === "block block--modifier"

```
import bh from "@dr/bem-helper";

###### Modifiers with values
import styles from "./MyComponent.module.scss";

```js

var className = bem.scoped("block", "element", { modifier: "value", modifier2: false });
// className === "block__element block__element--modifier-value"
const bem = bh('block', styles);

```

###### Prebinding helpers

```js
### bem

var boundScoped = bem.scoped.bind(null, "block");
A function that returns BEM-style classnames.

var className = boundScoped("element", { modifier: true });
// className === "block__element block__element--modifier"
#### Arguments

```
* `element` (string) - Optional. The element for the classname.
* `modifier` (object) - An optional modifier (object); Keys are used for modifier names. Values determine whether to turn the modifier off (`false`, `""`, `null` or `undefined`) or on - either through `true` or a value which will be appended to the modifier name; `{modifier: true}` -> `"--modifier"`, `{modifier: "value"}` -> `"--modifier-value"`.

### bem.single
#### Returns

Same as [bem](#bem) - but it only returns a single classname.
A string with BEM-style classnames.

#### Examples

###### Basic

```js

var className = bem.single("block", "element");
const bem = bh('block');

var className = bem("element");
// className === "block__element"

```

###### Elements with modifiers
###### With modifiers

```js

var className = bem.single("block", "element", { modifier: true });
// className === "block__element--modifier"

```

###### Modifiers with values
const bem = bh('block');

```js

var className = bem.single("block", "element", { modifier: "value" });
// className === "block__element--modifier-value"
var className = bem({ modifier: true });
// className === "block block--modifier"

```

###### Prebinding helpers
###### Element and modifiers with values

```js

var boundSingle = bem.single.bind(null, "block");
const bem = bh('block');

var className = boundSingle("element", { modifier: true });
// className === "block__element--modifier"
var className = bem("element", { modifier: "value", modifier2: false });
// className === "block__element block__element--modifier-value"

```
```
62 changes: 0 additions & 62 deletions __tests__/bem-scoped.test.js
View file
Open in desktop

This file was deleted.

Loading