https://github.com/matype/postcss-namespace
PostCSS plugin for the scope of name binding
https://github.com/matype/postcss-namespace
Last synced: 9 months ago
JSON representation
PostCSS plugin for the scope of name binding
- Host: GitHub
- URL: https://github.com/matype/postcss-namespace
- Owner: matype
- License: other
- Created: 2014-11-27T10:25:51.000Z (over 11 years ago)
- Default Branch: master
- Last Pushed: 2014-11-27T15:16:30.000Z (over 11 years ago)
- Last Synced: 2025-01-31T13:11:15.420Z (over 1 year ago)
- Language: JavaScript
- Size: 129 KB
- Stars: 9
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: readme.markdown
- License: LICENSE
Awesome Lists containing this project
README
# postcss-namespace [](https://travis-ci.org/morishitter/postcss-namespace)
PostCSS plugin for the scope of name binding.
## Installation
```shell
$ npm install postcss-namespace
```
## Example
```javascript
// dependencies
var fs = require("fs")
var postcss = require("postcss")
var namespace = require("postcss-namespace")
// css to be processed
var css = fs.readFileSync("input.css", "utf8")
// process css
var output = postcss()
.use(namespace())
.process(css)
.css
```
Using this `input.css`:
```css
@prefix pre {
.class {
font-size: 12px;
}
#id {
padding: 10px;
}
}
@suffix suf {
.class {
font-size: 12px;
}
#id {
padding: 10px;
}
}
```
Yields:
```css
.pre-class {
font-size: 12px;
}
#pre-id {
padding: 10px;
}
.class-suf {
font-size: 12px;
}
#id-suf {
padding: 10px;
}
```
## Options
Can change prefix and suffix connection letter.
### prefix
Change prefix using `@prefix` letter. Default is `-`.
### suffix
Change suffix using `@suffix` letter. Default is `-`.
Ex:
```javascript
var output = postcss()
.use(namespace({
"prefix": "__",
"suffix": "--"
}))
.process(css)
.css
```
Yields:
```css
.pre__class {
font-size: 12px;
}
#pre__id {
padding: 10px;
}
.class--suf {
font-size: 12px;
}
#id--suf {
padding: 10px;
}
```
## License
The MIT License (MIT)
Copyright (c) 2014 Masaaki Morishita