https://github.com/rianfuro/rollup-plugin-astroturf

Rollup plugin to integrate astroturf
https://github.com/rianfuro/rollup-plugin-astroturf

astroturf rollup rollup-plugin

Last synced: 5 days ago
JSON representation

Rollup plugin to integrate astroturf

• Host: GitHub
• URL: https://github.com/rianfuro/rollup-plugin-astroturf
• Owner: RianFuro
• License: mit
• Created: 2021-01-02T17:01:59.000Z (almost 4 years ago)
• Default Branch: master
• Last Pushed: 2021-01-07T20:35:27.000Z (almost 4 years ago)
• Last Synced: 2024-04-24T18:23:48.711Z (8 months ago)
• Topics: astroturf, rollup, rollup-plugin
• Language: JavaScript
• Homepage:
• Size: 91.8 KB
• Stars: 3
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
[![Last version](https://img.shields.io/npm/v/rollup-plugin-astroturf.svg)](https://www.npmjs.com/package/rollup-plugin-astroturf)

[![License](https://img.shields.io/npm/l/rollup-plugin-astroturf.svg)](https://github.com/RianFuro/rollup-plugin-astroturf/blob/master/LICENSE)

# rollup-plugin-astroturf

[Rollup](https://rollupjs.org/guide/en/) plugin for [Astroturf](https://github.com/4Catalyzer/astroturf).

This plugin basically wraps Astroturf's Babel plugin and provides the extracted css to Rollup.

### Why use this instead of simply using Rollup's Babel plugin?

The babel plugin needs to write the extracted css to disk so rollup can pick it up again. The main advantage of this

plugin is that is doesn't need to do that, as the extracted css is captured and exposed to other plugins internally.

## Installation

```bash

npm i -D rollup-plugin-astroturf

```

Note that `astroturf`, `rollup` and `@babel/core` are all peer dependencies of this plugin, so you need to install them

yourself. This plugin has been written against the 1.0.0-beta of astroturf, your mileage with the stable release may

vary, but it *SHOULD* work.

## Usage

*Note*: Astroturf expects uncompiled JavaScript code. If you are using Babel or Typescript to 

transform tagged template literals, ensure the plugin runs before Babel or Typescript loaders.

```js

import { rollup } from 'rollup';

import astroturf from 'rollup-plugin-astroturf';

import postcss from 'rollup-plugin-postcss';

rollup({

  entry: 'main.js',

  plugins: [

    astroturf({/* options */}),

    postcss({

      extract: 'bundle.css',

      modules: true

    })

  ]

}).then(/*...*/)

```

### with jsx

If you're using jsx in your code you need to tell the plugin to interpret jsx (Babel does not do that by default). Do

that by installing and including `@babel/plugin-syntax-jsx` like so:

```js

import { rollup } from 'rollup';

import astroturf from 'rollup-plugin-astroturf';

import postcss from 'rollup-plugin-postcss';

rollup({

  entry: 'main.js',

  plugins: [

    astroturf({plugins: ['@babel/plugin-syntax-jsx']}),

    postcss({

      extract: 'bundle.css',

      modules: true

    })

  ]

}).then(/*...*/)

```

### Options

All options are optional

- `include` / `exclude`

  Both which can be a [picomatch](https://github.com/micromatch/picomatch#globbing-features) pattern or an array of 

  picomatch patterns. If `options.include` is omitted or of zero length, the filter defaults to javascript/typescript

  files.

- `plugins`

  An array of Babel plugins which are passed on to all Babel invocations made by the plugin.

- All other options passed in this object are passed on to the underlying astroturf babel plugin. See the 

  [Babel plugin documentation](https://github.com/rollup/plugins/tree/master/packages/babel) and 

  [Astroturf's options](https://github.com/4Catalyzer/astroturf/tree/master#options) for details.

  

  Note though that `writeFiles` is fixed to `false`. Use rollup to control how files are written.

  

## Attribution

This plugin is heavily inspired by [Linaria's Rollup plugin](https://github.com/callstack/linaria/tree/master/packages/rollup), as it serves a similar purpose.