rtlcss - npm Package Compare versions

Comparing version 2.0.0 to 2.0.1

CHANGELOG.md

@@ -0,4 +1,8 @@
+### 2.0.1 - 23 Feb. 2016
+  * Fixes a bug when having `decl` nodes inside `atrule`s and `autoRename` enabled.
+  * Fixes a bug in flipping multi-valued transforms.
+
 # 2.0.0 - 18 Feb. 2016
 
-  * Support for control directive blocks, e.g. `/*rtl:begin:ignore*/ ... /*rtl:end:ignore*/`.  
+  * Support for control directive blocks, e.g. `/*rtl:begin:ignore*/ ... /*rtl:end:ignore*/`.
   * Suppor for strict auto renaming, Which ensures `autoRename` is applied only when a pair exists.
@@ -25,3 +29,3 @@ * New directives:
     * `stringMap`:
-      * `priority` attribute to control maps execution order. 
+      * `priority` attribute to control maps execution order.
       * `exclusive` attributes, which determines if a map execution should stop iterating over other maps.
@@ -31,3 +35,3 @@ * dropped 'west-east' map from the default map collection.
   * Removed Options:
-    * `enableLogging`, still warnings and errors are reported directly to postcss. 
+    * `enableLogging`, still warnings and errors are reported directly to postcss.
     * `minify`, it wasn't actual minification after all!
@@ -40,3 +44,8 @@ * `swapLeftRightInUrl`, `swapLtrRtlInUrl` and `swapWestEastInUrl` in favor of `processUrls` option.
 
+### v1.7.4 [23 Feb. 2016]
+  * Fixes a bug in flipping multiple transforms.
 
+### v1.7.3 [30 Jan. 2016]
+  * Fixes a bug in flipping N-Values containing comments.
+
 ### 1.7.2 - 30 Jan. 2016
@@ -43,0 +52,0 @@ * Fixes a bug in flipping N-Values containing comments.

docs/writing-a-plugin.md

@@ -157,3 +157,3 @@ Writing an RTLCSS Plugin
 #### Example
-```javascript
+```js
  // a control directive definition to ignore processing one node or a set of nodes.
@@ -217,3 +217,3 @@ // triggered via: /*rtl:ignore*/ or /*rtl:begin:ignore*/
   The action function is responsible for processing the declaration value, It is executed each time a matching comment is found inside the declaration value.
-  ```javascript
+  ```js
   'action': function (decl, expr, context) { ... }
@@ -223,3 +223,4 @@ ```
     * `expr` `{RegExp}`: The constructed regular expression used to match the directive, it has one capturing group matching the value of the directive.
-    ```javascript
+    
+    ```js
     {
@@ -245,3 +246,3 @@ 'name': 'custom',
 #### Example
-```javascript
+```js
 // a value directive definition to replace the declaration value
@@ -301,3 +302,3 @@ // triggered via: /*rtl: ... */
 #### Example
-```javascript
+```js
 {
@@ -315,18 +316,2 @@ // match any CSS property ending in 'transition' or 'transition-property'
 ----------------
-
-## Context object
-
-The context object provides access to [postcss], current configuration and internal utilities.
-
-```javascript
-context = {
-  // provides access to postcss
-  'postcss': postcss,
-  // provides access to the current configuration
-  'config': configuration,
-  // provides access to utilities object
-  'util': util.configure(configuration)
-}
-```
-
 ## Metadata object
@@ -346,4 +331,17 @@
   *<sup>1</sup> Self-closing [control directives](#control-directives) will have both `begin` and `end` set to `true`.
+  
+## Context object
 
+The context object provides access to [postcss], current configuration and internal utilities.
 
+```js
+context = {
+  // provides access to postcss
+  'postcss': postcss,
+  // provides access to the current configuration
+  'config': configuration,
+  // provides access to utilities object
+  'util': util.configure(configuration)
+}
+```
 
@@ -350,0 +348,0 @@ [PostCSS]: https://github.com/postcss/postcss

lib/plugin.js

@@ -345,30 +345,30 @@ 'use strict'
           this.cache = {
-            'match': /((translate)(x|3d)?|skew(x|y)?|rotate(z|3d)?|matrix(3d)?)\((.|\s)*\)/ig,
-            'replace': /([^\(]*)(?:\()(.*)(?:\))/i,
+            'negatable': /((translate)(x|3d)?|rotate(z)?)$/ig,
             'unit': context.util.regex(['calc', 'number'], 'g'),
-            'matrix': /matrix/i,
-            'matrix3D': /matrix3d/i,
-            'skewXY': /skew(x|y)?/i,
-            'rotate3D': /rotate3d/i
+            'matrix': /matrix$/i,
+            'matrix3D': /matrix3d$/i,
+            'skewXY': /skew(x|y)?$/i,
+            'rotate3D': /rotate3d$/i
           }
         }
-        var parts = value.match(this.cache.match)
-        for (var x = 0; parts && x < parts.length; x++) {
-          parts[x] = parts[x].replace(this.cache.replace, function (m, $1, $2) {
-            var tokens = context.util.saveFunctions($2)
-            if ($1.match(this.cache.matrix3D)) {
-              tokens.value = this.flipMatrix3D(tokens.value, context)
-            } else if ($1.match(this.cache.matrix)) {
-              tokens.value = this.flipMatrix(tokens.value, context)
-            } else if ($1.match(this.cache.rotate3D)) {
-              tokens.value = this.flipRotate3D(tokens.value, context)
-            } else if ($1.match(this.cache.skewXY)) {
-              tokens.value = context.util.negateAll(tokens.value)
-            } else {
-              tokens.value = context.util.negate(tokens.value)
+        var state = context.util.saveFunctions(value)
+        return {
+          'prop': prop,
+          'value': context.util.restoreFunctions(state, function (v, n) {
+            if (n.length) {
+              if (n.match(this.cache.matrix3D)) {
+                v = this.flipMatrix3D(v, context)
+              } else if (n.match(this.cache.matrix)) {
+                v = this.flipMatrix(v, context)
+              } else if (n.match(this.cache.rotate3D)) {
+                v = this.flipRotate3D(v, context)
+              } else if (n.match(this.cache.skewXY)) {
+                v = context.util.negateAll(v)
+              } else if (n.match(this.cache.negatable)) {
+                v = context.util.negate(v)
+              }
             }
-            return $1 + '(' + context.util.restoreFunctions(tokens) + ')'
+            return v
           }.bind(this))
         }
-        return { 'prop': prop, 'value': value.replace(this.cache.match, function () { return parts.shift() }) }
       }
@@ -375,0 +375,0 @@ },

lib/rtlcss.js

 /*
- * RTLCSS 2.0.0 https://github.com/MohammadYounes/rtlcss
+ * RTLCSS 2.0.1 https://github.com/MohammadYounes/rtlcss
  * Framework for transforming Cascading Style Sheets (CSS) from Left-To-Right (LTR) to Right-To-Left (RTL).
@@ -135,3 +135,4 @@ * Copyright 2016 Mohammad Younes.
             // if last decl, apply auto rename
-            if (context.config.autoRename && !flipped && context.util.isLastOfType(node)) {
+            // decl. may be found inside @rules
+            if (context.config.autoRename && !flipped && node.parent.type === 'rule' && context.util.isLastOfType(node)) {
               var renamed = context.util.applyStringMap(node.parent.selector)
@@ -138,0 +139,0 @@ if (context.config.autoRenameStrict === true) {

package.json

 {
   "author": "Mohammad Younes",
   "name": "rtlcss",
-  "version": "2.0.0",
+  "version": "2.0.1",
   "description": "Framework for transforming cascading style sheets (CSS) from left-to-right (LTR) to right-to-left (RTL)",
@@ -6,0 +6,0 @@ "bugs": "https://github.com/MohammadYounes/rtlcss/issues?state=open",

README.md

@@ -229,2 +229,7 @@ # RTLCSS
 ```
+
+## Task Runners
+ * **Grunt**: [grunt-rtlcss](https://github.com/MohammadYounes/grunt-rtlcss)
+ * **Gulp**: [gulp-rtlcss](https://github.com/jjlharrison/gulp-rtlcss)
+
 ---
@@ -238,7 +243,2 @@ ## Advanced usage
 
-// create a new RTLCSS instance, then process css with postcss options (such as source map)
-result = rtlcss([options , plugins]).process(css, postcssOptions);
-result.css // Processed CSS
-result.map // Source map
-
 // you can also group all configuration settings into a single object
@@ -245,0 +245,0 @@ result = rtlcss.configure(config).process(css, postcssOptions);

test/data/transforms.js

@@ -223,3 +223,15 @@ module.exports = [
     'reversable': false
+  },
+  {
+    'should': 'Should mirror multiple transforms : translateX translateY Rotate',
+    'expected': 'div { transform: translateX(-50.25px) translateY(50.25px) rotate(-20.75deg); }',
+    'input': 'div { transform: translateX(50.25px) translateY(50.25px) rotate(20.75deg); }',
+    'reversable': true
+  },
+  {
+    'should': 'Should mirror multiple transforms with calc : translateX translateY Rotate',
+    'expected': 'div { transform: translateX(-ms-calc(-1*(((25%/2) * 10px)))) translateY(-moz-calc(((25%/2) * 10rad))) rotate(calc(-1*(((25%/2) * 10grad)))); }',
+    'input': 'div { transform: translateX(-ms-calc(((25%/2) * 10px))) translateY(-moz-calc(((25%/2) * 10rad))) rotate(calc(((25%/2) * 10grad))); }',
+    'reversable': false
   }
 ]

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

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

154278

increased by0.7%

Lines of code

2945

increased by0.72%

Number of medium supply chain risk alerts

2

decreased by-33.33%

No dependency changes