postcss-object-fit-images - npm Package Compare versions

Comparing version 1.1.0 to 1.1.2

index.js

 'use strict';
 
-const postcss = require('postcss');
+var postcss = require('postcss');
+var parseCssFont = require('parse-css-font');
+var quote = require('quote');
 
-const getValueForProperty = function (parent, name) {
+var quoteIfNecessary = function (family) {
+    if (/[^^]\s[^$]/.test(family)) {
+        return quote(family);
+    }
+    return family;
+};
 
-    let retValue;
+var getLastPropertyDecl = function (parent, name) {
 
-    parent.walkDecls(name, (decl) => {
-        if (name === decl.prop) {
-            retValue = decl.value;
-        }
+    var decl;
+
+    parent.walkDecls(name, function (currentDecl) {
+        decl = currentDecl;
     });
 
-    return retValue;
+    return decl;
 };
 
-const declWalker = function (decl) {
+var declWalker = function (decl) {
 
-    const parent = decl.parent;
+    var parent = decl.parent;
 
-    const objFit = decl.value;
+    var objFit = decl.value;
 
-    const fontFamily = getValueForProperty(parent, 'font-family', false);
-    const objPosition = getValueForProperty(parent, 'object-position', false);
+    var existingFont = getLastPropertyDecl(parent, /font|font-family/);
+    var objPosition = getLastPropertyDecl(parent, 'object-position');
 
-    const value = [
+    var value = [
         'object-fit:' + objFit
     ];
     if (objPosition) {
-        value.push('object-position:' + objPosition);
+        value.push('object-position:' + objPosition.value);
     }
 
-    const props = {
+    var props = {
         prop: 'font-family',
-        value: '"' + value.join(';') + '"'
+        value: quote(value.join(';'))
     };
 
     // keep existing font-family
+    var fontFamily;
+    if (existingFont) {
+        if (existingFont.prop === 'font') {
+            fontFamily = parseCssFont(existingFont.value).family;
+            fontFamily = fontFamily.map(quoteIfNecessary).join(', ');
+        } else {
+            fontFamily = existingFont.value;
+        }
+    }
     if (fontFamily) {
         props.value += ', ' + fontFamily;
+
+        if (existingFont.prop === 'font') {
+            existingFont.cloneAfter(props);
+        } else {
+            existingFont.replaceWith(props);
+        }
+    } else {
+        decl.cloneBefore(props);
     }
 
-    decl.cloneBefore(props);
 };
 
-module.exports = postcss.plugin('postcss-object-fit-images', (opts) => {
+module.exports = postcss.plugin('postcss-object-fit-images', function (opts) {
 
@@ -49,0 +72,0 @@ opts = opts || {};

package.json

 {
   "name": "postcss-object-fit-images",
-  "version": "1.1.0",
+  "version": "1.1.2",
   "description": "PostCSS plugin that updates the standard object-fit tag to work with the object-fit-images polyfill for browsers that do not natively support object-fit.",
@@ -14,2 +14,5 @@ "keywords": [
   "author": "Michael Shick <[e-mail]>",
+  "contributors": [
+    "Federico Brigante"
+  ],
   "license": "MIT",
@@ -22,3 +25,5 @@ "repository": "mshick/postcss-object-fit-images",
   "dependencies": {
-    "postcss": "^5.0.16"
+    "parse-css-font": "^2.0.2",
+    "postcss": "^5.0.16",
+    "quote": "^0.4.0"
   },
@@ -25,0 +30,0 @@ "devDependencies": {

README.md

@@ -6,4 +6,4 @@ # PostCSS Object Fit Images [![Build Status][ci-img]][ci]
 [PostCSS]: https://github.com/postcss/postcss
-[ci-img]:  https://travis-ci.org/mshick/postcss-object-fit-images.svg
-[ci]:      https://travis-ci.org/mshick/postcss-object-fit-images
+[ci-img]:  https://travis-ci.org/ronik-design/postcss-object-fit-images.svg
+[ci]:      https://travis-ci.org/ronik-design/postcss-object-fit-images
 
@@ -19,2 +19,4 @@ For use with [object-fit-images](https://github.com/bfred-it/object-fit-images)
 
+Compiles to:
+
 ```css
@@ -28,2 +30,39 @@ .foo {
 
+## Existing `font` and `font-family`
+
+Existing `font` and `font-family` declarations are kept and [object-fit-images](https://github.com/bfred-it/object-fit-images) will still work:
+
+```css
+.foo {
+    object-fit: cover;
+    object-position: top;
+    font-family: "Helvetica Neue";
+}
+
+/* Compiles to: */
+
+.foo {
+    object-fit: cover;
+    object-position: top;
+    font-family: "object-fit:cover;object-position:top", "Helvetica Neue";
+}
+```
+
+```css
+.foo {
+    object-fit: cover;
+    object-position: top;
+    font: strong 1em/1.4 "Helvetica Neue";
+}
+
+/* Compiles to: */
+
+.foo {
+    object-fit: cover;
+    object-position: top;
+    font: strong 1em/1.4 "Helvetica Neue";
+    font-family: "object-fit:cover;object-position:top", "Helvetica Neue";
+}
+```
+
 ## Usage
@@ -36,1 +75,8 @@
 See [PostCSS] docs for examples for your environment.
+
+## Contributors
+
+* [Michael Shick](https://www.github.com/mshick)
+* [Federico Brigante](https://www.github.com/bfred-it)
+
+

No alert changes

Improved metrics

Total package byte prevSize

5792

increased by39.4%

Lines of code

59

increased by55.26%

Number of lines in readme file

79

increased by139.39%

Worsened metrics

Dependency count

3

increased by200%

Dependency changes

• + Addedparse-css-font@^2.0.2

• + Addedquote@^0.4.0

• + Addedcss-font-size-keywords@1.0.0(transitive)

• + Addedcss-font-stretch-keywords@1.0.1(transitive)

• + Addedcss-font-style-keywords@1.0.1(transitive)

• + Addedcss-font-weight-keywords@1.0.0(transitive)

• + Addedcss-global-keywords@1.0.1(transitive)

• + Addedcss-list-helpers@1.0.1(transitive)

• + Addedcss-system-font-keywords@1.0.0(transitive)

• + Addedparse-css-font@2.0.2(transitive)

• + Addedquote@0.4.0(transitive)

• + Addedtcomb@2.7.0(transitive)

• + Addedunquote@1.1.1(transitive)