https://github.com/topcoat/resin

A future facing CSS preprocessor made with postcss
https://github.com/topcoat/resin

Last synced: 4 months ago
JSON representation

A future facing CSS preprocessor made with postcss

• Host: GitHub
• URL: https://github.com/topcoat/resin
• Owner: topcoat
• License: apache-2.0
• Created: 2013-10-28T21:39:58.000Z (about 11 years ago)
• Default Branch: master
• Last Pushed: 2017-05-27T21:49:18.000Z (over 7 years ago)
• Last Synced: 2024-08-11T20:50:39.782Z (4 months ago)
• Language: JavaScript
• Homepage: http://topcoat.io
• Size: 118 KB
• Stars: 172
• Watchers: 12
• Forks: 9
• Open Issues: 179
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Resin

[![Build Status](https://travis-ci.org/topcoat/resin.svg?branch=master)](https://travis-ci.org/topcoat/resin) [![Code Climate](https://codeclimate.com/github/topcoat/resin/badges/gpa.svg)](https://codeclimate.com/github/topcoat/resin) [![Issue Count](https://codeclimate.com/github/topcoat/resin/badges/issue_count.svg)](https://codeclimate.com/github/topcoat/resin/issues) [![codecov](https://codecov.io/gh/topcoat/resin/branch/master/graph/badge.svg)](https://codecov.io/gh/topcoat/resin) [![npm version](https://badge.fury.io/js/resin.svg)](https://badge.fury.io/js/resin)

A CSS preprocessor.

## Installation

```sh

npm install resin

```

## Usage

```js

var resin = require('resin');

resin({

  // Pass it a css file to process

  src: 'src/entry.css',

  // Tell it what browsers to prefix for

  browsers: ['last 1 version', 'ios', 'android 4'],

  // Add a namespace to your classes to avoid collisions

  namespace: 'dam',

  // Use the varibles plugin

  vars: true,

  // Use the inherit plugin

  extend: true,

  // Generate sourecemaps for debugging

  debug: true

});

// returns a promise.

```

This function will return an evaluated string that you can write to a file, or

stream etc.

Example writing to a file:

```js

var resin = require('resin'),

  write = require('fs').writeFileSync,

  output;

resin({

  // Pass it a css file to process

  src: 'src/entry.css',

  // Tell it what browsers to prefix for

  browsers: ['last 1 version', 'ios', 'android 4']

  // Add a namespace to your classes to avoid collisions

  namespace: 'dam'

}).then(function(result){

  write('path/to/output/dir/filename.css', result.css);

});

```

## Entry CSS file

```css

@import "node-package-name";

@import "other-node-package-name";

```

Resin will pull in CSS source files distributed via npm packages and add them

to the AST. Uses [postcss-import](https://github.com/garthdb/postcss-npm) under the covers.

## Features

Resin supports:

* [Imports](https://github.com/garthdb/postcss-npm)

* [Variables](https://github.com/MadLittleMods/postcss-css-variables)

* [Extend](https://github.com/garthdb/postcss-inherit)

* [Namespacing](https://github.com/garthdb/postcss-add-namespace)

* [Autoprefixer](https://github.com/postcss/autoprefixer)

* Source maps for debugging