# @material/feature-targeting

> Material Components for the web Feature Targeting Scss helpers

Latest version **14.0.0** (published 2022-04-28) · MIT license · 0 weekly downloads

## Install

```sh
npm install @material/feature-targeting
pnpm add @material/feature-targeting
yarn add @material/feature-targeting
bun add @material/feature-targeting
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: no vulnerabilities; popular repo.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 14.0.0 |
| Published | 2022-04-28 |
| First published | 2019-02-04 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 15.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 17052 |
| Maintainers | yefim, abhiomkar, azakus, bicknellr, material-admin, aprigogin, patrickrodee, aomarks, emarquez, allanchen, esgonzalez, asyncliz, candysonya, ssuarez, taylorv |
| Keywords | material components, material design, feature targeting |

## Links

- npm: https://www.npmjs.com/package/@material/feature-targeting
- Repository: https://github.com/material-components/material-components-web
- Homepage: https://github.com/material-components/material-components-web#readme
- Issues: https://github.com/material-components/material-components-web/issues
- npm.io page: https://npm.io/package/@material/feature-targeting

## Dependencies (1)

- [tslib](https://npm.io/package/tslib.md) ^2.1.0

## Alternatives

- [lodash.startswith](https://npm.io/package/lodash.startswith.md) — 769.7K weekly downloads
- [@tarojs/service](https://npm.io/package/@tarojs/service.md) — 33.9K weekly downloads
- [io.extendreality.tilia.indicators.spatialtargets.unity](https://npm.io/package/io.extendreality.tilia.indicators.spatialtargets.unity.md) — 131 weekly downloads
- [@rtarojs/taro](https://npm.io/package/@rtarojs/taro.md) — 90 weekly downloads
- [node-branch-io](https://npm.io/package/node-branch-io.md) — 50 weekly downloads

## Recent versions

- 14.0.0 (latest) — 2022-04-28
- 15.0.0-canary.423edc3dc.0 (canary) — 2024-06-26
- 12.0.0-nightly.778a0e8a.0 (nightly) — 2021-07-20
- 4.0.0-alpha.0 (next) — 2019-08-07
- 15.0.0-canary.cfec83c74.0 — 2024-05-20
- 15.0.0-canary.2f5b899bc.0 — 2024-05-20
- 15.0.0-canary.f80ac92b0.0 — 2024-05-02
- 15.0.0-canary.4b35cb7d0.0 — 2024-05-02
- 15.0.0-canary.65c10a622.0 — 2024-04-25
- 15.0.0-canary.311f29a60.0 — 2024-04-23
- 15.0.0-canary.5bebc0064.0 — 2024-04-11
- 15.0.0-canary.68edc03c6.0 — 2024-04-08
- 15.0.0-canary.453a6248a.0 — 2024-03-25
- 15.0.0-canary.819498d8c.0 — 2024-03-15
- 15.0.0-canary.c43b3438b.0 — 2024-02-23
- … 1634 more at https://npm.io/package/@material/feature-targeting/versions

## README

<!--docs:
title: "Feature Targeting"
layout: detail
section: components
excerpt: "Provides infrastructure to allow CSS styles to be included or excluded categorically."
path: /catalog/feature-targeting/
-->

# Feature Targeting

MDC Feature Targeting provides infrastructure to allow CSS styles to be included or excluded categorically.

Most of the time, you shouldn't need to depend on `mdc-feature-targeting` directly. However, understanding it can be useful if you're interested in having more control over when certain types of MDC styles are emitted.

## Installation

```
npm install @material/feature-targeting
```

## Basic Usage

### Styles

Authoring component styles:

```scss
@use "@material/feature-targeting";

@mixin my-component-core-styles($query: feature-targeting.all()) {
  $feat-structure: feature-targeting.create-target($query, structure);

  @include feature-targeting.targets($feat-structure) {
    // ...
  }
}
```

Consuming component styles:

```scss
@use "@material/feature-targeting";
@use "my-component-mixins";

// To include all styles (using the default of mdc-feature-all() defined above):
@include my-component-core-styles;

// Or, to include a specific subset of styles:
@include my-component-core-styles(structure);
@include my-component-core-styles(feature-targeting.any(color, typography));
// The above two @includes and the following @include would produce equivalent results:
@include my-component-core-styles(feature-targeting.without(animation));
```

## Sass Mixins and Functions

Mixin | Description
--- | ---
`targets($feature-targets...)` | Conditionalizes content to only be emitted if the given feature target(s) is/are queried.

Function | Description
--- | ---
`create-target($feature-query, $targeted-feature)` | Returns a variable to be passed to `targets` in order to filter emitted styles.
`all($feature-queries...)` | Returns a query object which will result in emitting `targets` blocks that match _all_ of the specified features. Passing no arguments results in all blocks being emitted, which is the most common use case.
`any($feature-queries...)` | Returns a query object which will result in emitting `targets` blocks that match _any_ of the specified features. Passing no arguments results in no blocks being emitted.
`without($feature-query)` | Returns a query object which will result in emitting `targets` blocks that do _not_ match the specified feature.

`$feature-query` and `$feature-queries` refer to one or more of the values listed below under Supported Features.

### Supported Features

MDC Web's styles are currently split according to the following features:

* `structure` - All baseline styles that don't fit into any other category
* `animation` - Styles responsible for causing animations and transitions to occur
* `color` - Color-specific styles which rely on `mdc-theme` variables
* `typography` - Typography-specific styles which rely on `mdc-typography`

---
_Source: https://npm.io/package/@material/feature-targeting · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._