PHPackages                             gremo/assetic-extra - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. [Templating & Views](/categories/templating)
4. /
5. gremo/assetic-extra

AbandonedArchivedLibrary[Templating & Views](/categories/templating)

gremo/assetic-extra
===================

A collection of extra assetic resources to use with Symfony AsseticBundle.

v1.1.0(8y ago)745.9k1MITPHPPHP >=5.3.2

Since Sep 17Pushed 8y ago1 watchersCompare

[ Source](https://github.com/gremo/assetic-extra)[ Packagist](https://packagist.org/packages/gremo/assetic-extra)[ RSS](/packages/gremo-assetic-extra/feed)WikiDiscussions master Synced yesterday

READMEChangelogDependencies (1)Versions (8)Used By (0)

assetic-extra
=============

[](#assetic-extra)

[![Latest stable](https://camo.githubusercontent.com/4c5b7d1704be5b7ff816ea78e9a0219e6074579ab75f4a9f6dfd527f33256088/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f762f6772656d6f2f617373657469632d65787472612e7376673f7374796c653d666c61742d737175617265)](https://packagist.org/packages/gremo/assetic-extra) [![Downloads total](https://camo.githubusercontent.com/52c501065a3fc32f26c0493f87fb141d7e4a395ca13c3071375cafa0f9b5261f/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f64742f6772656d6f2f617373657469632d65787472612e7376673f7374796c653d666c61742d737175617265)](https://packagist.org/packages/gremo/assetic-extra) [![GitHub issues](https://camo.githubusercontent.com/e1b10faac5c70ae215ab390b3e83e0da10e7babb9fbab0b8226cb2e13e9f0716/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f6973737565732f6772656d6f2f617373657469632d65787472612e7376673f7374796c653d666c61742d737175617265)](https://github.com/gremo/assetic-extra/issues)

A collection of extra [assetic](https://github.com/kriswallsmith/assetic) resources to use with Symfony [AsseticBundle](https://github.com/symfony/assetic-bundle).

Table of Contents
-----------------

[](#table-of-contents)

- [Filters](#filters)
    - [Babel](#babel)
    - [Browserify](#browserify)
    - [CSSO](#csso)
    - [PostCSS](#postcss)
    - [Node-sass](#node-sass)
- [Recipes](#recipes)

Installation
------------

[](#installation)

Install this library using Composer:

```
composer require gremo/assetic-extra
```

Filters
-------

[](#filters)

> **Note**: with Symfony 3.3 you can replace `%kernel.root_dir%/..` with `%kernel.project_dir%` for filters configuration.

The following extra filters can be configured and used in your templates.

### Babel

[](#babel)

JavaScript transpiler for node.js ().

**Configuration**

```
assetic:
    # ...
    babeljs:
        resource: '%kernel.root_dir%/../vendor/gremo/assetic-extra/Resources/filter/babeljs.xml'
        # options here
```

**Options ([reference](https://babeljs.io/docs/usage/api/#options))**

- `bin`: path to your `babel` binary (default: `/usr/bin/babel`)
- `retain_lines`
- `presets`: a `string` or `array` of presets to use (preset name if installed globally, path otherwise)
- `plugins`: a `string` or `array` of plugins to use (plugin name if installed globally, path otherwise)
- `compact`
- `minified`
- `no_babel_rc`
- `auxiliary_comment_before`
- `auxiliary_comment_after`
- `parser_opts`
- `generator_opts`

> **Note**: Babel will look for `.babelrc` file in current asset directory and will travel up the directory tree (see [Lookup behavior](https://babeljs.io/docs/usage/babelrc/#lookup-behavior)), unless you specify the `no_babel_rc` option. This means you can put your `.babelrc` file in your project root without cluttering your `config.yml`.

**Usage**

```
{% javascripts '../app/Resources/js/*.js' filter='babeljs' %}

{% endjavascripts %}
```

### Browserify

[](#browserify)

Lets you `require('modules')` in the browser ().

> Credits goes to the original author ([kriswallsmith/assetic#669](https://github.com/kriswallsmith/assetic/pull/669)), I changed it a bit and added trasforms support.

**Configuration**

```
assetic:
    # ...
    browserify:
        resource: '%kernel.root_dir%/../vendor/gremo/assetic-extra/Resources/filter/browserify.xml'
        # options here
```

**Options**

- `bin`: path to your `browserify` binary (default: `/usr/bin/browserify`)
- `node`: path to your `node` binary (default: `%assetic.node.bin%`, set to `null` to use `browserify` binary instead)
- `node_paths`: paths to add to Node.js environment when using `node` option (default: `%assetic.node.paths%`)
- `transforms` a `string` or `array` of Browserify transform to apply

**Usage**

> **Note**: there is no need to combine assets (`modules/module1.js` in the example) as long as you require your `module`. Browserify filter will take care of combining them in the output file.

```
{% javascripts '../app/Resources/js/main.js' filter='browserify' %}

{% endjavascripts %}
```

> **Note**: the `assetic:watch` command will regenerate the assets only if you change the "main" script. Modules changes will not be monitored as they are not included in the `javascripts` tag.

Example of `main.js`:

```
// main.js
require('./modules/module1.js');
console.log('main.js');
```

Example of `modules/module1.js`:

```
// modules/module1.js
console.log('modules/module1.js');
```

### CSSO

[](#csso)

CSSO (CSS Optimizer) is a CSS minifier ().

**Configuration**

```
assetic:
    # ...
    csso:
        resource: '%kernel.root_dir%/../vendor/gremo/assetic-extra/Resources/filter/csso.xml'
        # options here
```

**Options ([reference](https://github.com/css/csso-cli))**

- `bin`: path to your `csso` binary (default: `/usr/bin/csso`)
- `comments`
- `force_media_merge`
- `restructure_off`
- `usage`

**Usage**

```
{% stylesheets '../app/Resources/css/*' filter='csso' %}

{% endstylesheets %}
```

**Tip: fast and safe options**

```
csso:
    # ...
    comments: none
    restructure_off: true
```

### PostCSS

[](#postcss)

A tool for transforming CSS with JavaScript ().

**Configuration**

```
assetic:
    # ...
    postcss:
        resource: '%kernel.root_dir%/../vendor/gremo/assetic-extra/Resources/filter/postcss.xml'
        # options here
```

**Options ([reference](https://github.com/postcss/postcss-cli))**

- `bin`: path to your `postcss` binary (default: `/usr/bin/postcss`)
- `no_map`: disable the default inline sourcemaps
- `use`: list of postcss plugins to use
- `parser`: custom postcss parser
- `stringifier`: custom postcss stringifier
- `syntax`: custom postcss syntax
- `config`: set a custom path to look for a config file

**Usage**

```
{% stylesheets '../app/Resources/css/*' filter='postcss' %}

{% endstylesheets %}
```

### Node-sass

[](#node-sass)

Parses SASS/SCSS into CSS using the LibSass bindings for node.js ().

**Configuration**

```
assetic:
    # ...
    nodesass:
        resource: '%kernel.root_dir%/../vendor/gremo/assetic-extra/Resources/filter/nodesass.xml'
        # options here
```

**Options ([reference](https://github.com/sass/node-sass#options))**

- `bin`: path to your `node-sass` binary (default: `/usr/bin/node-sass`)
- `import_paths`
- `indent_type`
- `indent_width`
- `linefeed`
- `output_style`
- `precision`
- `source_comments`
- `source_map_location`
- `source_map_public_dir`

**Usage**

```
{% stylesheets '../app/Resources/scss/style.scss' filter='nodesass' %}

{% endstylesheets %}
```

**Tip: Boostrap 4**

Use this options for Bootstrap 4 (see [package.json](https://github.com/twbs/bootstrap/blob/v4.0.0/package.json#L24)):

```
nodesass:
    # ...
    precision: 6
```

**Tip: source maps**

In order to generate the source maps, you'll need to specify a public accessible directory where the `.map` files can be placed (`source_map_location`) together with the base path (`source_map_public_dir`) which will be used when generating the urls to the mapping files:

```
nodesass:
    # ...
    source_map_location: '%kernel.root_dir%/../web/assets/maps'
    source_map_public_dir: '/assets/maps'
```

Recipes
-------

[](#recipes)

### ES6 modules with Browserify

[](#es6-modules-with-browserify)

Write ES6 JavaScript modules using import/export style and make it work [in the browser](http://caniuse.com/#feat=es6-module).

**Problem**: Browserify filter transform your source file and not your transpiled one, so it would fail at the first `import` or `export` keyword. **Solution**: only use the `browserify` filter with [babelify](https://github.com/babel/babelify) transform filter configuration:

> **Note** if Browserify cannot find the babelify module, try installing it locally in your project folder and use the absolute path.

```
browserify:
    resource: '%kernel.root_dir%/../vendor/gremo/assetic-extra/Resources/filter/browserify.xml'
    transforms:
        - '[ babelify --presets env ]'
```

###  Health Score

34

—

LowBetter than 75% of packages

Maintenance20

Infrequent updates — may be unmaintained

Popularity31

Limited adoption so far

Community8

Small or concentrated contributor base

Maturity63

Established project with proven stability

 Bus Factor1

Top contributor holds 100% of commits — single point of failure

How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window.

**Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores.

**Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement.

**Maturity (30%)** — Project age, version count, PHP version support, and release stability.

###  Release Activity

Cadence

Every ~31 days

Recently: every ~45 days

Total

7

Last Release

3024d ago

### Community

Maintainers

![](https://www.gravatar.com/avatar/f9a79689fe41827b4fd386dd42a9117115e27a4f946935d6ce77d7f6a76260fe?d=identicon)[gremo](/maintainers/gremo)

---

Top Contributors

[![gremo](https://avatars.githubusercontent.com/u/1532616?v=4)](https://github.com/gremo "gremo (29 commits)")

---

Tags

sassscssasseticpostcssbrowserifybabelbabeljscsso

### Embed Badge

![Health badge](/badges/gremo-assetic-extra/health.svg)

```
[![Health](https://phpackages.com/badges/gremo-assetic-extra/health.svg)](https://phpackages.com/packages/gremo-assetic-extra)
```

###  Alternatives

[panique/php-sass

Compiles your SASS .scss files to .css every time your run your app (in development)

12481.0k](/packages/panique-php-sass)

PHPackages © 2026

[Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)