🚀 Big News: Socket Acquires Coana to Bring Reachability Analysis to Every Appsec Team.Learn more
Socket
Book a DemoInstallSign in
Socket

css-prefixer

Package Overview
Dependencies
Maintainers
1
Versions
5
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

css-prefixer

prefix css rules using rework

0.1.4
latest
Source
npm
Version published
Weekly downloads
15
50%
Maintainers
1
Weekly downloads
 
Created
Source

css-prefixer

Build Status

prefixing css using rework

Getting Started

npm install --save css-prefixer 

Once the package has been installed, it may be required with this line of JavaScript:

var prefixer = require('css-prefixer');

Overview

Below is a basic example

example.css

h1#nice div.was h2 span .good {
    color: red;
}
@-webkit-keyframes shake {
    0%, 100% {
        -webkit-transform: translateX(0);
    }
}
.something.shake {
    -webkit-animation-name: shake;
    -moz-animation-name: shake;
    -o-animation-name: shake;
    animation-name: shake;
}
@media (min-width: 768px) {
    #pre-truth2.media-query-style .pre-good{
        font-size: 21px;
    }
}

code:

var fs = require('fs');
var css = fs.readFileSync('./example.css', 'utf8')
var options= {
        prefix: 'pre-'
    };
    var result = prefixer( css, options );
    console.log(result)

result:

h1#pre-nice div.pre-was h2 span .pre-good {
  color: red;
}
@-webkit-keyframes pre-shake {
  0%, 100% {
    -webkit-transform: translateX(0);
  }
}
.pre-something.pre-shake {
  -webkit-animation-name: pre-shake;
  -moz-animation-name: pre-shake;
  -o-animation-name: pre-shake;
  animation-name: pre-shake;
}
@media (min-width: 768px) {
  #pre-truth2.pre-media-query-style .pre-good {
    font-size: 21px;
  }
}

Options

options.prefix

Type: String
Default value: ''

Prefix any class name/id selector in the target file with this prefix.

options.ignore

Type: [ '' ]
Default value: [ '{options.prefix}' ]

An array of strings that will ignore selector names once it starts with any of the provided strings. The provided prefix is always added to this list by default.

options.processName

Type: String
Default value: null

process the prefixed class name with any of underscore.string methods

options.prefixIdSelectors

Type: Boolean
Default value: true

When true will prefix id selectors in the css.

What this library doesn't do currently

  • Add vendor prefixes
  • Attribute selectors are not prefixed eg. [class=*"the-class-name"]

Credits

Development

Release History

  • 0.1.0: initial usage
  • 0.1.1: documentation update
  • 0.1.2: documentation update
  • 0.1.3: npm publish cleanup

Keywords

rework

FAQs

Package last updated on 20 Apr 2016

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts