Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/simonsmith/postcss-property-lookup
PostCSS plugin for property lookups, similar to Stylus
https://github.com/simonsmith/postcss-property-lookup
lookup postcss postcss-property-lookup stylus
Last synced: about 2 months ago
JSON representation
PostCSS plugin for property lookups, similar to Stylus
- Host: GitHub
- URL: https://github.com/simonsmith/postcss-property-lookup
- Owner: simonsmith
- License: mit
- Created: 2015-05-23T21:06:49.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2021-08-11T04:06:14.000Z (about 3 years ago)
- Last Synced: 2024-07-27T00:37:53.176Z (about 2 months ago)
- Topics: lookup, postcss, postcss-property-lookup, stylus
- Language: JavaScript
- Homepage:
- Size: 129 KB
- Stars: 67
- Watchers: 6
- Forks: 7
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# postcss-property-lookup [![Build Status][ci-img]][ci]
[PostCSS] plugin that allows referencing property values without a variable, [similar to Stylus](https://learnboost.github.io/stylus/docs/variables.html#property-lookup).
[PostCSS]: https://github.com/postcss/postcss
[ci-img]: https://api.travis-ci.org/simonsmith/postcss-property-lookup.svg?branch=master
[ci]: https://travis-ci.org/simonsmith/postcss-property-lookup
```css
.Test {
margin-left: 20px;
margin-right: @margin-left;
color: red;
background: @color url('test.png');
line-height: 1.5;
font-size: @(line-height)em;
}
```
```css
.Test {
margin-left: 20px;
margin-right: 20px;
color: red;
background: red url('test.png');
line-height: 1.5;
font-size: 1.5em;
}
```
Check the [test fixtures](test/fixtures/in) for more examples.
## Usage
```js
postcss([ require('postcss-property-lookup') ])
```
See [PostCSS] docs for examples for your environment.
## Installation
```
$ yarn add postcss-property-lookup
```
## Usage
### JavaScript
```js
postcss([
require('postcss-property-lookup')(/* options */),
// more plugins...
])
```
### TypeScript
```ts
///
import postcssPropertyLookup from 'postcss-property-lookup';
postcss([
postcssPropertyLookup(/* options */),
// more plugins...
])
```
## Options
### logLevel
Type: `string: `
Required: `false`
Default: `warn`
When a lookup cannot be resolved, this specifies whether to throw an error or log a warning. In the case of a warning, the invalid lookup value will be replaced with an empty string.