peach a19a732be8 commit message | 2 vuotta sitten | |
---|---|---|
.. | ||
.github | 2 vuotta sitten | |
lib | 2 vuotta sitten | |
old-lib | 2 vuotta sitten | |
API.md | 2 vuotta sitten | |
LICENSE | 2 vuotta sitten | |
README.md | 2 vuotta sitten | |
package.json | 2 vuotta sitten |
<img align="right" width="95" height="95"
title="Philosopher’s stone, logo of PostCSS"
src="http://postcss.github.io/postcss/logo.svg">
A CSS property value parser for use with PostCSS, following the same node, container, and traversal patterns as PostCSS.
:rocket: Are you ready to tackle ES6 and hone your JavaScript Skills? :rocket:
Check out these outstanding ES6 courses by @wesbos
As with PostCSS and postcss-selector-parser, this parser generates an Abstract Syntax Tree, (aka "AST") which allows for ease of traversal and granular inspection of each part of a property's value.
Yeah, it's a tad confusing. The Lesshint project needed a parser that would allow detailed inspection of property values to the same degree that PostCSS and postcss-selector-parser provided. This was especailly important for the Lesshint project, as it provides for very granular rules for linting LESS.
postcss-value-parser makes a lot of assumption about how values should be parsed and how the resulting AST should be organized. It was also fairly out of sync with the tokenzing and traversal patterns and convenience methods found in PostCSS and postcss-selector-parser.
So we needed an alternative, and drew upon all three projects to put together a value parser that met and exceeded our needs. The improvements include:
Please see the API Documentation for full usage information.
As with any NPM module, start with the install:
npm install postcss-values-parser
Using this parser is straightforward and doesn't require callbacks:
const parser = require('postcss-values-parser');
const ast = parser('#fff').parse();
let color = ast // the Root node
.first // the Value node
.first; // a Word node, containing the color value.
Loose mode was introduced to support adherence to the W3C CSS Specification as well as the ability to parse noncompliant CSS for variants like LESS, SCSS, and CSSNext. If you're working with a noncompliant or CSS-like variant, then loose mode is for you.
For example, the parser
will throw an error by default if calc
parameters don't adhere to the spec.
However, with loose mode enabled, the parse will ignore spec rules and succeed.
In-draft features, or CSS features in modules not yet finalized, often cause parser
errors. eg. url(var(--somevar))
. Loose mode supports parsing of these features.
Loose Mode is enabled by passing an option of loose: true
to the parser
method.
const less = 'calc(2+2)'; // not valid per spec, but valid in LESS
const cssnext = 'url(var(--somevar))'; // not valid per spec, but in spec draft
const parser = require('postcss-values-parser');
const ast = parser(less, { loose: true }).parse();
// parse will succeed
This project was heavily influenced by postcss-selector-parser and utilized many patterns and logical constructs from the project.
Tests and some tokenizing techniques found in postcss-value-parser were used.
git fork/clone
npm i
npm test
still pass. Add test if you're adding features.When you tweak API.md, please run npm run toc
before PR'ing.