css-tree - npm Package Compare versions

Comparing version 1.0.0-alpha3 to 1.0.0-alpha4

data/patch.json

@@ -162,2 +162,9 @@ {
     },
+    "-webkit-print-color-adjust": {
+      "comment": "missed",
+      "references": [
+        "https://developer.mozilla.org/en/docs/Web/CSS/-webkit-print-color-adjust"
+      ],
+      "syntax": "economy | exact"
+    },
     "-webkit-tap-highlight-color": {
@@ -164,0 +171,0 @@ "comment": "broken syntax",

lib/index.js

@@ -5,3 +5,3 @@ var walkers = require('./utils/walk');
 module.exports = {
-    List: require('./utils/list.js'),
+    List: require('./utils/list'),
     syntax: require('./syntax'),
@@ -11,4 +11,4 @@ property: names.property,
 
-    parse: require('./parser.js'),
-    clone: require('./utils/clone.js'),
+    parse: require('./parser'),
+    clone: require('./utils/clone'),
 
@@ -20,4 +20,4 @@ walk: walkers.all,
 
-    translate: require('./utils/translate.js'),
-    translateWithSourceMap: require('./utils/translateWithSourceMap.js')
+    translate: require('./utils/translate'),
+    translateWithSourceMap: require('./utils/translateWithSourceMap')
 };

lib/utils/clone.js

@@ -13,3 +13,3 @@ var List = require('./list');
             } else if (value instanceof List) {
-                value = new List(value.map(clone));
+                value = new List().fromArray(value.map(clone));
             } else if (value.constructor === Object) {
@@ -16,0 +16,0 @@ value = clone(value);

lib/utils/list.js

@@ -18,31 +18,12 @@ //
     return {
-        data: data,
+        prev: null,
         next: null,
-        prev: null
+        data: data
     };
 }
 
-var List = function(values) {
+var List = function() {
     this.cursor = null;
     this.head = null;
     this.tail = null;
-
-    if (Array.isArray(values)) {
-        var cursor = null;
-
-        for (var i = 0; i < values.length; i++) {
-            var item = createItem(values[i]);
-
-            if (cursor !== null) {
-                cursor.next = item;
-            } else {
-                this.head = item;
-            }
-
-            item.prev = cursor;
-            cursor = item;
-        }
-
-        this.tail = cursor;
-    }
 };
@@ -67,2 +48,25 @@
 
+List.prototype.fromArray = function(array) {
+    var cursor = null;
+
+    this.head = null;
+
+    for (var i = 0; i < array.length; i++) {
+        var item = createItem(array[i]);
+
+        if (cursor !== null) {
+            cursor.next = item;
+        } else {
+            this.head = item;
+        }
+
+        item.prev = cursor;
+        cursor = item;
+    }
+
+    this.tail = cursor;
+
+    return this;
+};
+
 List.prototype.toArray = function() {
@@ -273,2 +277,33 @@ var cursor = this.head;
 
+List.prototype.append = function(item) {
+    // tail
+    //      ^
+    //     item
+    this.updateCursors(this.tail, item, null, item);
+
+    // insert to end of the list
+    if (this.tail !== null) {
+        // if list has a tail, then it also has a head, but head doesn't change
+
+        // last item -> new item
+        this.tail.next = item;
+
+        // last item <- new item
+        item.prev = this.tail;
+    } else {
+        // if list has no a tail, then it also has no a head
+        // in this case points head to new item
+        this.head = item;
+    }
+
+    // tail always start point to new item
+    this.tail = item;
+
+    return this;
+};
+
+List.prototype.appendData = function(data) {
+    return this.append(createItem(data));
+};
+
 List.prototype.insert = function(item, before) {
@@ -304,24 +339,3 @@ if (before !== undefined && before !== null) {
     } else {
-        // tail
-        //      ^
-        //     item
-        this.updateCursors(this.tail, item, null, item);
-
-        // insert to end of the list
-        if (this.tail !== null) {
-            // if list has a tail, then it also has a head, but head doesn't change
-
-            // last item -> new item
-            this.tail.next = item;
-
-            // last item <- new item
-            item.prev = this.tail;
-        } else {
-            // if list has no a tail, then it also has no a head
-            // in this case points head to new item
-            this.head = item;
-        }
-
-        // tail always start point to new item
-        this.tail = item;
+        this.append(item);
     }
@@ -328,0 +342,0 @@ };

package.json

 {
   "name": "css-tree",
-  "version": "1.0.0-alpha3",
+  "version": "1.0.0-alpha4",
   "description": "Detailed CSS parser",
@@ -10,3 +10,3 @@ "keywords": [
   ],
-  "homepage": "https://github.com/csstree/parser",
+  "homepage": "https://github.com/csstree/csstree",
   "author": "Roman Dvornov <[e-mail]> (https://github.com/lahmatiy)",
@@ -21,5 +21,5 @@ "maintainers": [
   "license": "MIT",
-  "repository": "csstree/parser",
+  "repository": "csstree/csstree",
   "bugs": {
-    "url": "https://github.com/csstree/parser/issues"
+    "url": "https://github.com/csstree/csstree/issues"
   },
@@ -26,0 +26,0 @@ "main": "./lib/index",

README.md

@@ -0,1 +1,2 @@
+[![NPM version](https://img.shields.io/npm/v/css-tree.svg)](https://www.npmjs.com/package/css-tree)
 [![Build Status](https://travis-ci.org/csstree/csstree.svg?branch=master)](https://travis-ci.org/csstree/csstree)
@@ -8,2 +9,179 @@ [![Coverage Status](https://coveralls.io/repos/github/csstree/csstree/badge.svg?branch=master)](https://coveralls.io/github/csstree/csstree?branch=master)
 
-Coming soon...
+Related:
+
+* [csstree-validator](https://github.com/csstree/validator) – NPM package to validate CSS
+* [stylelint-csstree-validator](https://github.com/csstree/stylelint-validator) – plugin for stylelint to validate CSS
+* [Gulp plugin](https://github.com/csstree/gulp-csstree)
+* [Sublime plugin](https://github.com/csstree/SublimeLinter-contrib-csstree)
+* [VS Code plugin](https://github.com/csstree/vscode-csstree)
+
+## Install
+
+```
+> npm install css-tree
+```
+
+## Usage
+
+```js
+var csstree = require('css-tree');
+
+csstree.walk(csstree.parse('.a { color: red; }'), function(node) {
+  console.log(node.type);
+});
+// Class
+// SimpleSelector
+// Selector
+// Property
+// Identifier
+// Value
+// Declaration
+// Block
+// Ruleset
+// StyleSheet
+```
+
+## API
+
+### parse(source[, options])
+
+Parse CSS to AST.
+
+> NOTE: Currenly parser omit redundant separators, spaces and comments (except exclamation comments, i.e. `/*! comment */`) on AST build.
+
+Options:
+
+- `context` String – parsing context, useful when some part of CSS is parsing (see below)
+- `property` String – make sense for `declaration` context to apply some property specific parse rules
+- `positions` Boolean – should AST contains node position or not, store data in `info` property of nodes (`false` by default)
+- `filename` String – filename of source that adds to info when `positions` is true, uses for source map generation (`<unknown>` by default)
+- `line` Number – initial line number, useful when parse fragment of CSS to compute correct positions
+- `column` Number – initial column number, useful when parse fragment of CSS to compute correct positions
+
+Contexts:
+
+- `stylesheet` (default) – regular stylesheet, should be suitable in most cases
+- `atrule` – at-rule (e.g. `@media screen, print { ... }`)
+- `atruleExpression` – at-rule expression (`screen, print` for example above)
+- `ruleset` – rule (e.g. `.foo, .bar:hover { color: red; border: 1px solid black; }`)
+- `selector` – selector group (`.foo, .bar:hover` for ruleset example)
+- `simpleSelector` – selector (`.foo` or `.bar:hover` for ruleset example)
+- `block` – block content w/o curly braces (`color: red; border: 1px solid black;` for ruleset example)
+- `declaration` – declaration (`color: red` or `border: 1px solid black` for ruleset example)
+- `value` – declaration value (`red` or `1px solid black` for ruleset example)
+
+```js
+// simple parsing with no options
+var ast = csstree.parse('.example { color: red }');
+
+// parse with options
+var ast = csstree.parse('.foo.bar', {
+    context: 'simpleSelector',
+    positions: true
+});
+```
+
+### clone(ast)
+
+Make an AST node deep copy.
+
+```js
+var orig = csstree.parse('.test { color: red }');
+var copy = csstree.clone(orig);
+
+csstree.walk(copy, function(node) {
+    if (node.type === 'Class') {
+        node.name = 'replaced';
+    }
+});
+
+console.log(csstree.translate(orig));
+// .test{color:red}
+console.log(csstree.translate(copy));
+// .replaced{color:red}
+```
+
+### translate(ast)
+
+Converts AST to string.
+
+```js
+var ast = csstree.parse('.test { color: red }');
+console.log(csstree.translate(ast));
+// > .test{color:red}
+```
+
+### translateWithSourceMap(ast)
+
+The same as `translate()` but also generates source map (nodes should contain positions in `info` property).
+
+```js
+var ast = csstree.parse('.test { color: red }', {
+    filename: 'my.css',
+    positions: true
+});
+console.log(csstree.translateWithSourceMap(ast));
+// { css: '.test{color:red}', map: SourceMapGenerator {} }
+```
+
+### walk(ast, handler)
+
+Visit all nodes of AST and call handler for each one. `handler` receives three arguments:
+
+- `node` – current AST node
+- `item` – node wrapper when node is a list member; this wrapper contains references to `prev` and `next` nodes in list
+- `list` – reference to list when node is a list member; it's useful for operations on list like `remove()` or `insert()`
+
+Context for handler an object, that contains references to some parent nodes:
+
+- `root` – refers to `ast` or root node
+- `stylesheet` – refers to closest `StyleSheet` node, it may be a top-level or at-rule block stylesheet
+- `atruleExpression` – refers to `AtruleExpression` node if current node inside at-rule expression
+- `ruleset` – refers to `Ruleset` node if current node inside a ruleset
+- `selector` – refers to `Selector` node if current node inside a selector
+- `declaration` – refers to `Declaration` node if current node inside a declaration
+- `function` – refers to closest `Function` or `FunctionalPseudo` node if current node inside one of them
+
+```js
+// collect all urls in declarations
+var csstree = require('./lib/index.js');
+var urls = [];
+var ast = csstree.parse(`
+  @import url(import.css);
+  .foo { background: url('foo.jpg'); }
+  .bar { background-image: url(bar.png); }
+`);
+
+csstree.walk(ast, function(node) {
+    if (this.declaration !== null && node.type === 'Url') {
+        var value = node.value;
+
+        if (value.type === 'Raw') {
+            urls.push(value.value);
+        } else {
+            urls.push(value.value.substr(1, value.value.length - 2));
+        }
+    }
+});
+
+console.log(urls);
+// [ 'foo.jpg', 'bar.png' ]
+```
+
+### walkRules(ast, handler)
+
+Same as `walk()` but visits `Ruleset` and `Atrule` nodes only.
+
+### walkRulesRight(ast, handler)
+
+Same as `walkRules()` but visits nodes in reverse order (from last to first).
+
+### walkDeclarations(ast, handler)
+
+Visit all declarations.
+
+## License
+
+MIT
+
+[Template:CSSData](https://developer.mozilla.org/en-US/docs/Template:CSSData) by Mozilla Contributors is licensed under [CC-BY-SA 2.5]

New alerts

No repository

Supply chain risk

Package does not have a linked source code repository. Without this field, a package will have no reference to the location of the source code use to generate the package.

Found 1 instance in 1 package

Fixed alerts

No repository

Supply chain risk

Package does not have a linked source code repository. Without this field, a package will have no reference to the location of the source code use to generate the package.

Found 1 instance in 1 package

Improved metrics

Lines of code

13031

0.09%

Number of lines in readme file

187

1977.78%

Worsened metrics

Total package byte prevSize

554550

-0.45%

No dependency changes