open-index/open-npm huggingface dataset:
npm package: @studiometa/stylelint-config
Description: StyleLint Configuration
Author: Studio Meta
Latest version: 4.1.1

# StyleLint Configuration

[![NPM Version](https://img.shields.io/npm/v/@studiometa/stylelint-config.svg?style=flat-square)](https://www.npmjs.com/package/@studiometa/stylelint-config)
[![Dependency Status](https://img.shields.io/david/studiometa/stylelint-config.svg?label=deps&style=flat-square)](https://david-dm.org/studiometa/stylelint-config)
[![devDependency Status](https://img.shields.io/david/dev/studiometa/stylelint-config.svg?label=devDeps&style=flat-square)](https://david-dm.org/studiometa/stylelint-config?type=dev)

> Studio Meta's one and only Stylelint configuration to be used across projects.

## Usage

Install the package with your favorite package manager:

```bash
yarn add --dev @studiometa/stylelint-config
# or
npm install --save-dev @studiometa/stylelint-config
```

Create a `.stylelintrc.js` in your project's root folder with the following:

```js
module.exports = {
  extends: '@studiometa/stylelint-config',
};
```

It is recommended to use [Prettier](https://prettier.io/) in your project for a more opinionated linting and formatting of your files. To do so, you can use the `prettier` configuration sent in this package. Add a `.prettierrc` file at the root of your project and set the StyleLint configuration as follow:

```js
module.exports = {
  extends: '@studiometa/stylelint-config/prettier',
};
```

## TODO

- Add tests (cf. [tests](https://github.com/stylelint/stylelint-config-recommended/blob/master/__tests__/index.test.js) from recommended configuration)
npm package: @studiometa/stylelint-formatter-gitlab
Description: A StyleLint formatter for the GitLab Code Quality report
Author: Studio Meta
Latest version: 1.1.0

# @studiometa/stylelint-formatter-gitlab

[![NPM Version](https://img.shields.io/npm/v/@studiometa/stylelint-formatter-gitlab.svg?style=flat&colorB=3e63dd&colorA=414853)](https://www.npmjs.com/package/@studiometa/stylelint-formatter-gitlab/)
[![Downloads](https://img.shields.io/npm/dm/@studiometa/stylelint-formatter-gitlab?style=flat&colorB=3e63dd&colorA=414853)](https://www.npmjs.com/package/@studiometa/stylelint-formatter-gitlab/)
[![Size](https://img.shields.io/bundlephobia/minzip/@studiometa/stylelint-formatter-gitlab?style=flat&colorB=3e63dd&colorA=414853&label=size)](https://bundlephobia.com/package/@studiometa/stylelint-formatter-gitlab)
[![Dependency Status](https://img.shields.io/librariesio/release/npm/@studiometa/stylelint-formatter-gitlab?style=flat&colorB=3e63dd&colorA=414853)](https://david-dm.org/studiometa/stylelint-formatter-gitlab)

> Format StyleLint errors for Gitlab Code Quality reports.

## Installation

Install the package with NPM:

```bash
npm install -D stylelint@16 @studiometa/stylelint-formatter-gitlab
```

## Usage

Define a GitLab job to run `stylelint`.

_.gitlab-ci.yml_:

```yaml
stylelint:
  image: node
  script:
    - npm ci
    - npx stylelint --custom-formatter=@studiometa/stylelint-formatter-gitlab .
  artifacts:
    reports:
      codequality: gl-codequality.json
```

The formatter will automatically detect a GitLab CI environment. It will detect where to output the
code quality report based on the GitLab configuration file.

## Configuration Options

StyleLint formatters don’t take any configuration options. In order to still allow some way of
configuration, options are passed using environment variables.

| Environment Variable            | Description                                                                                                                                                    |
| ------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `STYLELINT_CODE_QUALITY_REPORT` | The location to store the code quality report. By default it will detect the location of the codequality artifact defined in the GitLab CI configuration file. |
| `STYLELINT_FORMATTER`           | The Stylelint formatter to use for the console output. This defaults to string, the default Stylelint formatter.                                               |

## Notes

This project is based on the [`stylelint-formatter-gitlab`](https://gitlab.com/leon0399/stylelint-formatter-gitlab) package which seems unmaintained and does not support StyleLint v16.
npm package: @studiometa/trafic-cli
Description: CLI to deploy projects to DDEV servers — preview environments from CI
Author: Studio Meta
Latest version: 0.1.22

# @studiometa/trafic-cli

CLI to deploy projects to DDEV servers — preview environments from CI.

Part of [Trafic](https://github.com/studiometa/trafic), a tool for managing DDEV preview environments on Linux servers.

## Installation

```bash
npm install -g @studiometa/trafic-cli
# or use directly with npx
npx @studiometa/trafic-cli deploy ...
```

## Commands

### `trafic deploy`

Deploy a project to a DDEV server.

```bash
trafic deploy \
  --host server.example.com \
  --name my-project \
  --sync "dist/" \
  --script "composer install --no-dev"
```

**Options:**

| Option | Description | Default |
|--------|-------------|---------|
| `--host` | SSH host (required) | - |
| `--name` | Project name (required) | - |
| `--user` | SSH user | `ddev` |
| `--port` | SSH port | `22` |
| `--sync` | Local path to sync | `.` |
| `--script` | Post-sync script to run in DDEV | - |
| `--branch` | Git branch name | auto-detected from CI |
| `--preview` | Preview environment ID (MR/PR number) | - |
| `--repo` | Repository URL | auto-detected from CI |
| `--ssh-options` | Extra SSH options | - |

### `trafic destroy`

Remove a DDEV project from the server.

```bash
trafic destroy \
  --host server.example.com \
  --name my-project \
  --preview 123
```

## CI Examples

### GitLab CI

```yaml
deploy_preview:
  stage: deploy
  image: node:24
  before_script:
    - eval $(ssh-agent -s)
    - ssh-add "$SSH_PRIVATE_KEY"
  script:
    - npx @studiometa/trafic-cli deploy
        --host $SSH_HOST
        --name $CI_PROJECT_PATH_SLUG
        --preview $CI_MERGE_REQUEST_IID
        --sync "dist/"
  rules:
    - if: $CI_MERGE_REQUEST_ID
```

### GitHub Actions

```yaml
deploy_preview:
  runs-on: ubuntu-latest
  steps:
    - uses: actions/checkout@v4
    - uses: webfactory/ssh-agent@v0.9.0
      with:
        ssh-private-key: ${{ secrets.SSH_PRIVATE_KEY }}
    - run: npx @studiometa/trafic-cli deploy
        --host ${{ vars.SSH_HOST }}
        --name ${{ github.event.repository.name }}
        --preview ${{ github.event.pull_request.number }}
        --sync "dist/"
```

## How it works

The deploy command executes 7 steps over SSH:

1. **Check DDEV** — Verify DDEV is installed
2. **Create directory** — Create project directory if needed
3. **Rsync files** — Sync local files to server
4. **Configure DDEV** — Create `.ddev/config.yaml` if missing
5. **Start DDEV** — Run `ddev start`
6. **Run script** — Execute post-deploy script (optional)
7. **Get URL** — Return the project URL

## Zero dependencies

This package has no runtime dependencies. It uses native Node.js APIs (`node:child_process`) for SSH and rsync operations.

## License

MIT — see [LICENSE](https://github.com/studiometa/trafic/blob/main/LICENSE)
npm package: @studiometa/ui
Description: A set of opiniated, unstyled and accessible components
Author: Studio Meta
Latest version: 1.8.0

# @studiometa/ui

[![NPM Version](https://img.shields.io/npm/v/@studiometa/ui.svg?style=flat&colorB=3e63dd&colorA=414853)](https://www.npmjs.com/package/@studiometa/ui/)
[![Downloads](https://img.shields.io/npm/dm/@studiometa/ui?style=flat&colorB=3e63dd&colorA=414853)](https://www.npmjs.com/package/@studiometa/ui/)
[![Size](https://img.shields.io/bundlephobia/minzip/@studiometa/ui?style=flat&colorB=3e63dd&colorA=414853&label=size)](https://bundlephobia.com/package/@studiometa/ui)
![Codecov](https://img.shields.io/codecov/c/github/studiometa/ui?style=flat&colorB=3e63dd&colorA=414853)

> A set of JS and Twig components powered by [@studiometa/js-toolkit](https://github.com/studiometa/js-toolkit), [Tailwind CSS](https://tailwindcss.com/) and
[studiometa/twig-toolkit](https://github.com/studiometa/twig-toolkit).

## Installation

Install the latest version via NPM:

```bash
npm install @studiometa/ui
```

If you need the Twig templates as well, install the Twig extension via Composer and load it in your application:

```bash
composer require studiometa/ui
```

## Usage

Import the components from the package as needed:

```js
import { Base, createApp } from '@studiometa/js-toolkit';
import { Action, Frame, Modal, ScrollAnimation, ScrollReveal, Slider } from '@studiometa/ui';

class App extends Base {
  static config = {
    name: 'App',
    components: {
      Action,
      Frame,
      Modal,
      ScrollAnimation,
      ScrollReveal,
      Slider,
    },
  };
}

export default createApp(App);
```

Heads up to [ui.studiometa.dev](https://ui.studiometa.dev) for more informations.

## Contributing

Please read the [contribution docs](https://ui.studiometa.dev/guide/contributing/).

[![Open in Gitpod](https://gitpod.io/button/open-in-gitpod.svg)](https://gitpod.io/#https://github.com/studiometa/ui)
npm package: @studiometa/webpack-config-preset-markdown
Description: [![NPM Version](https://img.shields.io/npm/v/@studiometa/webpack-config-preset-markdown.svg?style=flat-square)](https://www.npmjs.com/package/@studiometa/webpack-config-preset-vue-2)
Author: Studio Meta
Latest version: 6.4.0

# @studiometa/webpack-config-preset-markdown

[![NPM Version](https://img.shields.io/npm/v/@studiometa/webpack-config-preset-markdown.svg?style=flat-square)](https://www.npmjs.com/package/@studiometa/webpack-config-preset-vue-2)

A preset for [@studiometa/webpack-config](https://github.com/studiometa/webpack-config) to add markdown support to your project.

## Usage

Install the package:

```sh
npm install --save-dev @studiometa/webpack-config-preset-markdown
```

And load the preset in the `meta.config.js` file:

```js
import { defineConfig } from '@studiometa/webpack-config';
import { markdown } from '@studiometa/webpack-config-preset-markdown';

export default defineConfig({
  presets: [markdown()],
  // ...
});
```
npm package: @studiometa/webpack-config-preset-polyfills
Description: [![NPM Version](https://img.shields.io/npm/v/@studiometa/webpack-config-preset-polyfills.svg?style=flat-square)](https://www.npmjs.com/package/@studiometa/webpack-config-preset-polyfills)
Author: Studio Meta
Latest version: 6.4.0

# @studiometa/webpack-config-preset-polyfills

[![NPM Version](https://img.shields.io/npm/v/@studiometa/webpack-config-preset-polyfills.svg?style=flat-square)](https://www.npmjs.com/package/@studiometa/webpack-config-preset-polyfills)

A preset for [@studiometa/webpack-config](https://github.com/studiometa/webpack-config) to inject `core-js` polyfills based on actual usage while keeping `esbuild-loader` in the pipeline.

It uses:

- [`@babel/preset-env`](https://babel.dev/docs/babel-preset-env)
- [`@babel/preset-typescript`](https://babel.dev/docs/babel-preset-typescript)
- [`core-js`](https://github.com/zloirock/core-js)

This is useful for runtime APIs that are not syntax transforms, such as `Array.prototype.toReversed()`, `toSorted()`, `toSpliced()` and other modern built-ins that need polyfills on older browsers.

## Install

```sh
npm install --save-dev @studiometa/webpack-config-preset-polyfills
```

You do not need to install `core-js` separately when using this preset. It resolves injected `core-js` imports from the preset package itself.

## Usage

```js
import { defineConfig } from '@studiometa/webpack-config';
import { polyfills } from '@studiometa/webpack-config-preset-polyfills';

export default defineConfig({
  presets: [polyfills()],
});
```

To also polyfill selected npm packages, allowlist them explicitly:

```js
export default defineConfig({
  presets: [
    polyfills({
      includePackages: ['@studiometa/js-toolkit'],
    }),
  ],
});
```

The preset adds a Babel step before `esbuild-loader` using `@babel/preset-env` with `useBuiltIns: 'usage'` to inject matching `core-js` imports automatically.

By default, only standard `core-js` polyfills are injected. You can opt into proposal polyfills with `polyfills({ proposals: true })` when needed.

Polyfill injection is limited to project source files under `src` by default. Use `includePackages` to opt specific dependencies into the Babel polyfill pass.

## Options

- `proposals` (`boolean`, default: `false`)
- `version` (`number | { version: number | string; proposals?: boolean }`, default: installed `core-js` version)
- `includePackages` (`string[]`, default: `[]`): npm packages inside `node_modules` to include in polyfill injection in addition to project `src` files
- `presetEnv` (`Object`, optional): extra options passed to `@babel/preset-env`

## Browser targets

Polyfill injection depends on your browser targets. The preset resolves targets from:

1. the webpack target when it uses the `browserslist:` syntax;
2. otherwise the Browserslist config found in the current project.

For example, to support older iOS Safari versions:

```json
{
  "browserslist": [
    "> 0.2%",
    "last 4 versions",
    "not dead",
    "iOS >= 14"
  ]
}
```
npm package: @studiometa/webpack-config-preset-prototyping
Description: [![NPM Version](https://img.shields.io/npm/v/@studiometa/webpack-config-preset-prototyping.svg?style=flat-square)](https://www.npmjs.com/package/@studiometa/webpack-config-preset-vue-2)
Author: Studio Meta
Latest version: 6.4.0

# @studiometa/webpack-config-preset-prototyping

[![NPM Version](https://img.shields.io/npm/v/@studiometa/webpack-config-preset-prototyping.svg?style=flat-square)](https://www.npmjs.com/package/@studiometa/webpack-config-preset-vue-2)

A preset for [@studiometa/webpack-config](https://github.com/studiometa/webpack-config) to add prototyping support to your project. It includes:

- JS or TS
- SCSS and Tailwind CSS
- Twig for templating with file based routing and dynamic data loading

## Usage

Install the package:

```sh
npm install --save-dev @studiometa/webpack-config-preset-prototyping
```

And load the preset in the `meta.config.js` file:

```js
import { defineConfig } from '@studiometa/webpack-config';
import { prototyping } from '@studiometa/webpack-config-preset-prototyping';

export default defineConfig({
  presets: [prototyping()],
  // ...
});
```

## Documentation

### Options

- `ts` (`boolean`): use `app.ts` as entry point instead of `app.js`
- `twig` (`Object`): options for the [`twig` preset](https://github.com/studiometa/webpack-config/#twig)
- `tailwindcss` (`Object`): options for the [`tailwindcss` preset](https://github.com/studiometa/webpack-config/#tailwindcss)
- `html` (`Object`): options for the [`html-webpack-plugin` plugin](https://github.com/jantimon/html-webpack-plugin#options)
- `markdown` (`Object`): options for the [`markdown` preset](https://github.com/studiometa/webpack-config/tree/main/packages/preset-markdown)

### Examples

Use it in your `meta.config.js` file:

```js
import { defineConfig } from '@studiometa/webpack-config';
import { prototyping } from '@studiometa/webpack-config/presets';

export default defineConfig({
  presets: [prototyping()],
});
```

And set up your project with the following folder structure:

```
meta.config.js
package.json
public/ --> public assets, served from `/`
...
src/
  css/ --> css files
    app.scss
  js/ --> js files
    app.js
  templates/
    components/ --> component files, aliased to `@components`
    layouts/ --> layout files, aliased to `@layout`
    foo/ --> random files, aliased to `@foo`
    pages/
      index.twig
```
npm package: @studiometa/webpack-config-preset-tailwindcss-4
Description: [![NPM Version](https://img.shields.io/npm/v/@studiometa/webpack-config-preset-tailwindcss-4.svg?style=flat-square)](https://www.npmjs.com/package/@studiometa/webpack-config-preset-tailwindcss-4)
Author: Studio Meta
Latest version: 6.4.0

# @studiometa/webpack-config-preset-tailwindcss-4

[![NPM Version](https://img.shields.io/npm/v/@studiometa/webpack-config-preset-tailwindcss-4.svg?style=flat-square)](https://www.npmjs.com/package/@studiometa/webpack-config-preset-tailwindcss-4)

A preset for [@studiometa/webpack-config](https://github.com/studiometa/webpack-config) to add Tailwind CSS v4 support to your project.

## Usage

Install the package along with Tailwind CSS v4:

```sh
npm install --save-dev @studiometa/webpack-config-preset-tailwindcss-4
npm install --save tailwindcss@4
```

And load the preset in the `meta.config.js` file:

```js
import { defineConfig } from '@studiometa/webpack-config';
import { tailwindcss } from '@studiometa/webpack-config-preset-tailwindcss-4';

export default defineConfig({
  presets: [tailwindcss()],
  // ...
});
```
npm package: @studiometa/webpack-config-preset-vue-2
Description: [![NPM Version](https://img.shields.io/npm/v/@studiometa/webpack-config-preset-vue-2.svg?style=flat-square)](https://www.npmjs.com/package/@studiometa/webpack-config-preset-vue-2)
Author: Studio Meta
Latest version: 6.4.0

# @studiometa/webpack-config-preset-vue-2

[![NPM Version](https://img.shields.io/npm/v/@studiometa/webpack-config-preset-vue-2.svg?style=flat-square)](https://www.npmjs.com/package/@studiometa/webpack-config-preset-vue-2)

A preset for [@studiometa/webpack-config](https://github.com/studiometa/webpack-config) to add Vue 2 support to your project.

## Usage

Install the package along with Vue:

```sh
npm install --save-dev @studiometa/webpack-config-preset-vue-2
npm install --save vue@2
```

And load the preset in the `meta.config.js` file:

```js
import { defineConfig } from '@studiometa/webpack-config';
import { vue } from '@studiometa/webpack-config-preset-vue-2';

export default defineConfig({
  presets: [vue()],
  // ...
});
```

Pass options for the `vue-loader` and `svgo` used by [the `vue-svg-loader`](https://github.com/damianstasik/vue-svg-loader):

```js
import { defineConfig } from '@studiometa/webpack-config';
import { vue } from '@studiometa/webpack-config-preset-vue-2';

export default defineConfig({
  presets: [vue({
    vue: {
      productionMode: true,
    },
    svgo: {
      plugins: [{ prefixIds: true }, { removeViewBox: false }],
    }
  })],
  // ...
});
```
npm package: @studiometa/webpack-config-preset-vue-3
Description: [![NPM Version](https://img.shields.io/npm/v/@studiometa/webpack-config-preset-vue-3.svg?style=flat-square)](https://www.npmjs.com/package/@studiometa/webpack-config-preset-vue-3)
Author: Studio Meta
Latest version: 6.4.0

# @studiometa/webpack-config-preset-vue-3

[![NPM Version](https://img.shields.io/npm/v/@studiometa/webpack-config-preset-vue-3.svg?style=flat-square)](https://www.npmjs.com/package/@studiometa/webpack-config-preset-vue-3)

A preset for [@studiometa/webpack-config](https://github.com/studiometa/webpack-config) to add Vue 2 support to your project.

## Usage

Install the package along with Vue:

```sh
npm install --save-dev @studiometa/webpack-config-preset-vue-3
npm install --save vue@3
```

And load the preset in the `meta.config.js` file:

```js
import { defineConfig } from '@studiometa/webpack-config';
import { vue } from '@studiometa/webpack-config-preset-vue-3';

export default defineConfig({
  presets: [vue()],
  // ...
});
```

Pass options for the `vue-loader` and `svgo` used by [the `vue-svg-loader`](https://github.com/damianstasik/vue-svg-loader):

```js
import { defineConfig } from '@studiometa/webpack-config';
import { vue } from '@studiometa/webpack-config-preset-vue-2';

export default defineConfig({
  presets: [vue({
    vue: {
      productionMode: true,
    },
    svgo: {
      plugins: [{ prefixIds: true }, { removeViewBox: false }],
    }
  })],
  // ...
});
```