https://github.com/johnriv/gulp-polymer-css-build

Gulp plugin for Polymer CSS Builder
https://github.com/johnriv/gulp-polymer-css-build

css gulp-plugin polymer-build

Last synced: about 1 month ago
JSON representation

Gulp plugin for Polymer CSS Builder

• Host: GitHub
• URL: https://github.com/johnriv/gulp-polymer-css-build
• Owner: JohnRiv
• License: mit
• Created: 2016-08-05T05:46:52.000Z (over 8 years ago)
• Default Branch: master
• Last Pushed: 2017-03-14T15:17:10.000Z (almost 8 years ago)
• Last Synced: 2024-10-10T23:05:33.792Z (3 months ago)
• Topics: css, gulp-plugin, polymer-build
• Language: JavaScript
• Size: 16.6 KB
• Stars: 1
• Watchers: 3
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# gulp-polymer-css-build [![Build Status](https://travis-ci.org/JohnRiv/gulp-polymer-css-build.svg?branch=master)](https://travis-ci.org/JohnRiv/gulp-polymer-css-build)

> Statically apply Polymer's CSS Mixin shim and CSS Custom Property shim (future work) with the [`Polymer CSS Builder`](https://github.com/PolymerLabs/polymer-css-build)

## Install

```

$ npm install --save-dev gulp-polymer-css-build

```

## Usage

### Single File with Shady DOM

```js

const gulp = require('gulp');

const vulcanize = require('gulp-vulcanize');

const polymerCssBuild = require('gulp-polymer-css-build');

gulp.task('default', () =>

    gulp.src('src/index.html')

        .pipe(vulcanize({

            abspath: '',

            excludes: [],

            stripExcludes: false

        }))

        .pipe(polymerCssBuild({

          'build-for-shady': true

        }))

        .pipe(gulp.dest('dest'))

);

```

### Single File with Shadow DOM

```js

const gulp = require('gulp');

const vulcanize = require('gulp-vulcanize');

const polymerCssBuild = require('gulp-polymer-css-build');

gulp.task('default', () =>

    gulp.src('src/index.html')

        .pipe(vulcanize({

            abspath: '',

            excludes: [],

            stripExcludes: false

        }))

        .pipe(polymerCssBuild())

        .pipe(gulp.dest('dest'))

);

```

### Multiple Files ([shards](https://github.com/Collaborne/gulp-web-component-shards)) with Shady DOM

```js

const gulp = require('gulp');

const wcs = require('gulp-web-component-shards');

const polymerCssBuild = require('gulp-polymer-css-build');

gulp.task('shards', () =>

  gulp.src('src/**/*.html', { base: 'src', read: false })

    .pipe(wcs({

      root: 'src'

    }))

    .pipe(polymerCssBuild({

      'build-for-shady': true

    }))

    .pipe(gulp.dest('dest'))

);

```

### Multiple Files ([shards](https://github.com/Collaborne/gulp-web-component-shards)) with Shadow DOM

```js

const gulp = require('gulp');

const wcs = require('gulp-web-component-shards');

const polymerCssBuild = require('gulp-polymer-css-build');

gulp.task('shards', () =>

  gulp.src('src/**/*.html', { base: 'src', read: false })

    .pipe(wcs({

      root: 'src'

    }))

    .pipe(polymerCssBuild())

    .pipe(gulp.dest('dest'))

);

```

## API

### PolymerCssBuild([options])

See the `polymer-css-build` [options](https://github.com/PolymerLabs/polymer-css-build#build-types-targeted-builds-and-polymer-dom-modes).

## License

MIT © [John Riviello](http://www.johnriviello.com)