open-index/open-npm huggingface dataset:
npm package: @mapbox/create-web-app
Description: Create Mapbox GL JS web applications with React, Vue, Svelte, Angular, or Vanilla JavaScript
Author: Mapbox
Latest version: 0.2.0

# create @mapbox-web-app

This package is a command line tool which allows developers to quickly scaffold a [Mapbox GL JS](https://docs.mapbox.com/mapbox-gl-js/) map into a popular front end framework and get a map loading in a browser in a matter of seconds.  The goal is to enable developers to quickly start building with Mapbox GL JS. 

## Supported Frameworks
Currently supported frameworks:
- No Framework (HTML, CSS, Vanilla JavaScript)
- React
- Vue
- Svelte
- Angular

## How templates work
This CLI tools copies full Vite project files from the `/templates/` directory and then creates an `.env` file with the users access token for use in the project. If the [Search JS](https://docs.mapbox.com/mapbox-search-js/) is selected, a corresponding main app file (App.jsx, App.vue etc..) with search functionality implemented is copied from `/templates/shared/search-enabled-apps/` and used to over write the main app file in the newly created project. 

These principle templates and their search counterpart should be maintained and kept as up to date as possible.

## Mapbox Search JS
This tool also contains templates to add a [Mapbox Search JS](https://docs.mapbox.com/mapbox-search-js/) search box to the map as well - handling needs for users who wish to integrate interactive search with their map. 

## Access Tokens are required
To use any Mapbox services you must have an access token which you can get from your [Mapbox Console](https://console.mapbox.com) after creating an account.  This CLI tool asks for your token and creates a local `.env` file with the token passed to the cli. This value is then parsed by [Vite](https://vite.dev) and passed to your map for the request to Mapbox. 

```js    
mapboxgl.accessToken = import.meta.env.VITE_MAPBOX_ACCESS_TOKEN
```

If you'd prefer to add your own `.env` file and manually set your token, you can do so by using the `.env.example` as a template.

## Updates
For maintainers: templates in this CLI tool can be updated by running `node scripts/check-template-updates.js`. For more information see [UPDATE.md](/UPDATE.md)
npm package: @mapbox/css-sieve
Description: Sift CSS through HTML
Author: Mapbox
Latest version: 0.1.1
Deprecated: Renamed to @mapbox/postcss-html-filter

# css-sieve

[![Build Status](https://travis-ci.org/mapbox/css-sieve.svg?branch=master)](https://travis-ci.org/mapbox/css-sieve)

Sift CSS through HTML.

Parses HTML with [Cheerio](https://github.com/cheeriojs/cheerio) — using its jQuery-like selector queries — to determine which selectors in the CSS correspond to actual elements on the page.
Removes selectors that have no corresponding elements, rules that have no corresponding selectors, at-rules containing no corresponding rules, etc.

Also, for good measure, runs the CSS through [postcss-discard-unused](https://github.com/ben-eb/postcss-discard-unused), which removes unused `@counter-style`, `@keyframes`, and `@font-face` at-rules.

## API

### sift

**`cssSieve.sift(css: string, html: string): Promise<string>`**

Returns a Promise that resolves with the fragment of `css` that has corresponding elements in the provided `html`.

### postcssPlugin

**`cssSieve.plugin({ html: string })`**

Returns a [PostCSS](http://api.postcss.org/) plugin function that you can use wherever you run PostCSS.

For more details about how to use PostCSS plugins, read [the PostCSS documentation](https://github.com/postcss/postcss#usage).

## Development

The tests are very simple.
In fact, there's just one [Jest](https://facebook.github.io/jest/) snapshot test at the moment, which provides 100% code coverage.
We can add more to the CSS and HTML fixtures, as needed, to test other scenarios and code changes; and Jest handles the comparison and offers a nice legible read-out of what went wrong.

## Is this like [UnCSS](https://github.com/giakki/uncss)?

Yes. This is essentially a simplified version of what UnCSS does.
Instead of using PhantomJS or jsdom to load the page, try to size things, download resources, etc., this module address the core problem of filtering out CSS that is not used in some HTML.
This is a low-level module that could be used within other, higher-level projects (e.g. ones that download resources).

Another project that uses Cheerio to filter out unused CSS is [css-razor](https://github.com/tscanlin/css-razor).