rtlcss - npm Package Compare versions

Comparing version 0.1.1 to 0.1.2

lib/config.js

@@ -23,3 +23,7 @@ function main(options, rules, declarations, properties) {
   addKey('greedy', false);
+  addKey('minify', false);
 
+  if (config.minify)
+    config.preserveComments  = config.preserveDirectives = false;
+  
   var instructions = require('./instructions.js');
@@ -29,12 +33,27 @@ config.instructions = instructions.configure(config);
   if(rules != null && rules.length)
-    for(var x=0;x<rules.length;x++)
-      config.instructions.rules.splice(0, 0, rules[x]);
+    for (var x = 0; x < rules.length; x++) {
+      var rule = rules[x];
+      if(rule.important)
+        config.instructions.rules.splice(0, 0, rule);
+      else
+        config.instructions.rules.push(rule)
+    }
 
   if (declarations != null && declarations.length)
-    for (var x = 0; x < declarations.length; x++)
-      config.instructions.declarations.splice(0, 0, declarations[x]);
+    for (var x = 0; x < declarations.length; x++) {
+      var decl = declarations[x];
+      if(decl.important)
+        config.instructions.declarations.splice(0, 0, decl);
+      else
+        config.instructions.declarations.push(decl);
+    }
 
   if (instructions != null && instructions.length)
-    for (var x = 0; x < properties.length; x++)
-      config.instructions.properties.splice(0, 0, properties[x]);
+    for (var x = 0; x < properties.length; x++) {
+      var prop = properties[x];
+      if (prop.important)
+        config.instructions.properties.splice(0, 0, prop);
+      else
+        config.instructions.properties.push(prop);
+    }
 
@@ -41,0 +60,0 @@ return config;

lib/rtlcss.js

@@ -11,3 +11,3 @@ "use strict";
     css.eachRule(function (rule, idx) {
-      var previousComment = null;
+      var previousComment = { 'text': '', removeSelf: function () { } };
       if (idx > 0 && rule.parent.rules[idx - 1].type == 'comment')
@@ -19,4 +19,6 @@ previousComment = rule.parent.rules[idx - 1];
         var pi = config.instructions.rules[x];
-        if (previousComment && ("/*" + previousComment.text + "*/").match(pi.expr) && pi.action(rule)) {
+        if (("/*" + previousComment.text + "*/").match(pi.expr) && pi.action(rule)) {
           util.logRuleAction(rule, pi);
+          if(!config.preserveDirectives)
+            previousComment.removeSelf();
           return;
@@ -75,2 +77,23 @@ }
     });
+    if (config.minify) {
+      css.eachDecl(function (decl) {
+        decl.before = '';
+        decl.between = ':';
+        if (decl._value.raw)
+          decl._value.raw = decl.value;
+      });
+      css.eachRule(function (rule) {
+        rule.before = '';
+        rule.between = '';
+        rule.after = '';
+      });
+      css.eachAtRule(function (atRule) {
+        atRule.before = '';
+        atRule.between = '';
+        atRule.after = '';
+      });
+      css.eachComment(function (comment) {
+        comment.removeSelf();
+      });
+    }
   });
@@ -77,0 +100,0 @@

package.json

 {
   "author": "Mohammad Younes",
   "name": "rtlcss",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "description": "Framework for transforming cascading style sheets (CSS) from left-to-right (LTR) to right-to-left (RTL)",  
   "license": "MIT",
-  "keywords": ["rtl","css","ltr"],
+  "keywords": ["rtl","css","ltr","rtlcss", "framework","style", "mirror", "flip"],
   "repository": {
@@ -9,0 +9,0 @@ "type": "git",

README.md

 RTLCSS
 ======
-Framework for transforming cascading style sheets (CSS) from left-to-right (LTR) to right-to-left (RTL).
+RTLCSS is a framework for transforming cascading style sheets (CSS) from left-to-right (LTR) to right-to-left (RTL). 
 
+> #### CSS Syntax
+> A CSS rule has two main parts: a selector, and one or more declarations : 
 
+> ![CSS Syntax](http://www.w3schools.com/css/selector.gif "CSS Syntax")
+
+> The selector is normally the HTML element you want to style. Each declaration consists of a property and a value. The property is the style attribute you want to change. Each property has a value. 
+
 ## Install
     npm install rtlcss
-
-## Usage
+## Basic usage
 ```javascript
@@ -16,3 +21,170 @@ var rtlcss = require('rtlcss');
 
-## Features
-    TBD
+### Supported CSS Properties (a-z)
+
+`background-image` `background-position` `background` `border-bottom-left-radius` `border-bottom-right-radius` `border-left-color` `border-left-style` `border-left-width` `border-left` `border-radius` `border-right-color` `border-right-style` `border-right-width` `border-right` `border-top-left-radius` `border-top-right-radius` `border-width` `box-shadow` `clear` `cursor`, `direction` `float` `margin-left` `margin` `nav-left` `nav-right` `padding-left` `padding-right` `padding` `right` `text-align` `text-shadow` `transform-origin` `transform` `transition-property` `transition` `left` `margin-right`
+
+### Supported Processing Directives
+
+When RTLing a CSS document, there are cases where its impossible to know if the property value should be mirrored or not! If the rule selector need to be changed! Or a none directional property have to be updated. In such cases, RTLCSS provides processing directives in the form of CSS comments ```/*rtl:...*/```:
+
+Two sets of processing directives are available, on Rule and Declaration level.
+
+
+##### Rule Level Directives:
+> Rule level directives are placed before the CSS rule.
+
+|   Directive   |   Description
+|:--------------|:-----------------------
+|   `/*rtl:ignore*/`    |   Ignores processing of this rule.
+|   `/*rtl:rename*/`    |   Forces selector renaming by swapping ***left***, ***right***, ***ltr***, ***rtl***, ***west*** and ***east***.
+
+
+
+   **Example**
+```CSS
+/*rtl:ignore*/
+.code{
+  direction:ltr;
+  text-align:left;
+}
+```
+   **Output**
+```CSS
+.code{
+  direction:ltr;
+  text-align:left;
+}
+```
+
+##### Declaration Level Directives:
+> Declaration level directives are  placed any where inside the declaration value.
+   
+|   Directive   |   Description
+|:--------------|:-----------------------
+|   `/*rtl:ignore*/`    |   Ignores processing of this rule.
+|   `/*rtl:{value}*/`    |   Replaces the declaration property value with `{value}`.
+|   `/*rtl:append:{value}*/`    |   Appends `{value}` to the end of the declaration property value.
+|   `/*rtl:prepend:{value}*/`    |   Prepends `{value}` to the begining of the declaration property value.
+|   `/*rtl:insert:{value}*/`    |   Inserts `{value}` to where the directive is located inside the declaration property value.
+
+   **Example**
+
+```CSS
+body{
+  font-family:"Droid Sans", "Helvetica Neue", Arial/*rtl:prepend:"Droid Arabic Kufi", */;
+  font-size:16px/*rtl:14px*/;
+}
+```
+   **Output**
+```CSS
+body{
+  font-family:"Droid Arabic Kufi", "Droid Sans", "Helvetica Neue", Arial;
+  font-size:14px;
+}
+```
+---
+## Advanced usage
+
+```javascript
+rtlcss.process(css [, options , rules, declarations, properties]);
+```
+> Built on top of [PostCss](https://github.com/ai/postcss), an awesome framework, providing you with the power of manipulating CSS via a JS API.
+
+### options (object)
+
+
+|    Option    |    Default |   Description
+|:--------------|:------------|:--------------
+|**`preserveComments`** | `true`  | Preserves modified declarations comments as much as possible.
+|**`preserveDirectives`** | `false`  | Preserves processing directives.
+|**`swapLeftRightInUrl`** | `true`  | Swaps ***left*** and ***right*** in URLs.
+|**`swapLtrRtlInUrl`** | `true`  | Swaps ***ltr*** and ***rtl*** in URLs.
+|**`swapWestEastInUrl`** | `true`  | Swaps ***west*** and ***east*** in URLs.
+|**`autoRename`** | `true`  | Applies to CSS rules containing no directional properties, it will update the selector by swapping ***left***, ***right***, ***ltr***, ***rtl***, ***west*** and ***east***.
+|**`greedy`** | `false`  | Forces selector renaming and url updates to respect word boundaries, for example: `.ultra { ...}` will not be changed to `.urtla {...}` 
+|**`enableLogging`** | `false`  | Outputs information about mirrored declarations to the console.
+|**`minify`** | `false`  | Minifies output CSS, when set to `true` both `preserveDirectives` and `preserveComments` will be set to `false` .
+
+### rules (array)
+Array of RTLCSS rule Processing Instructions (PI), these are applied on the CSS rule level:
+
+|   Property    |   Type    |   Description
+|:--------------|:----------|:--------------
+|   **`name`**  | `string`  | Name of the PI (used in logging).
+|   **`expr`**  | `RegExp`  | Regular expression object that will be matched against the comment preceeding the rule.
+|   **`important`** | `boolean` |   Controls whether to insert the PI at the start or end of the rules PIs list.
+|   **`action`**    | `function`    | The action to be called when a match is found, and it will be passed a `rule` node. the functions is expected to return a boolean, `true` to stop further processing of the rule, otherwise `false`.
+
+> visit [postcss](https://github.com/ai/postcss) to find out more about [`rule`](https://github.com/ai/postcss#rule-node) node.
+
+##### **Example**
+``` JAVASCRIPT
+//RTLCSS rule processing instruction
+{
+  "name"        : "ignore",
+  "expr"        : /\/\*rtl:ignore\*\//img,
+  "important"   : true,
+  "action"      : function (rule) {
+                    return  true;
+                  }
+}
+```
+
+### declarations (array)
+Array of RTLCSS declaration Processing Instructions (PI), these are applied on the CSS declaration level:
+
+|   Property    |   Type    |   Description
+|:--------------|:----------|:--------------
+|   **`name`**  | `string`  | Name of the PI (used in logging).
+|   **`expr`**  | `RegExp`  | Regular expression object that will be matched against the declaration raw value.
+|   **`important`** | `boolean` |   Controls whether to insert the PI at the start or end of the declarations PIs list.
+|   **`action`**    | `function`    | The action to be called when a match is found, and it will be passed a `decl` node. the functions is expected to return a boolean, `true` to stop further processing of the declaration, otherwise `false`.
+
+> visit [postcss](https://github.com/ai/postcss) to find out more about [`decl`](https://github.com/ai/postcss#declaration-node) object.
+
+##### **Example**
+
+``` JAVASCRIPT
+//RTLCSS declaration processing instruction
+{
+    "name"      : "ignore",
+    "expr"      : /(?:[^]*)(?:\/\*rtl:ignore)([^]*?)(?:\*\/)/img,
+    "important" : true,
+    "action"    : function (decl) {
+                    if (!config.preserveDirectives)
+                        decl._value.raw = decl._value.raw.replace(/\/\*rtl:[^]*?\*\//img, "");
+                    return true;
+                }
+},
+```
+
+### properties (array)
+Array of RTLCSS properties Processing Instructions (PI), these are applied on the CSS property level:
+
+
+|   Property    |   Type    |   Description
+|:--------------|:----------|:--------------
+|   **`name`**  | `string`  | Name of the PI (used in logging).
+|   **`expr`**  | `RegExp`  | Regular expression object that will be matched against the declaration raw value.
+|   **`important`** | `boolean` |   Controls whether to insert the PI at the start or end of the declarations PIs list.
+|   **`action`**    | `function`    | The action to be called when a match is found, it will be passed a `prop` (string holding the CSS property name) and `value` (string holding the CSS property raw value). If `options.preserveComments == true`, comments in the raw value will be replaced by the Unicode Character 'REPLACEMENT CHARACTER' (U+FFFD) � to simplify pattern matching. The functions is expected to return an object containing the modified version of the property and its value.
+
+
+
+##### **Example**
+``` JAVASCRIPT
+//RTLCSS property processing instruction
+{
+    "name"      : "direction",
+    "expr"      : /direction/im,
+    "important" : true,
+    "action"    : function (prop, value) {
+                    return { 'prop': prop, 'value': util.swapLtrRtl(value) };
+                }
+}
+```
+
+---
+## Bugs and Issues
+
+Have a bug or a feature request? please feel free to [open a new issue](https://github.com/MohammadYounes/rtlcss/issues/new) .

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

31362

increased by43.02%

Lines of code

585

increased by7.54%

Number of lines in readme file

190

increased by955.56%

No dependency changes