diff --git a/index.js b/index.js index c2d9e2a..11010aa 100755 --- a/index.js +++ b/index.js @@ -54,31 +54,58 @@ for (var prop in fontVariantProperties) { } } +// Find font-feature-settings declaration before given declaration, +// create if does not exist +function getFontFeatureSettingsPrevTo(decl) { + var fontFeatureSettings = null; + decl.parent.eachDecl(function(decl) { + if (decl.prop === "font-feature-settings") { + fontFeatureSettings = decl; + } + }) + + if (fontFeatureSettings === null) { + fontFeatureSettings = decl.clone() + fontFeatureSettings.prop = "font-feature-settings" + fontFeatureSettings.value = "" + decl.parent.insertBefore(decl, fontFeatureSettings) + } + return fontFeatureSettings +} + /** * Expose the font-variant plugin. */ module.exports = function postcssFontVariant() { return function(styles) { - // read custom media queries - styles.eachDecl(function(decl) { - if (!fontVariantProperties[decl.prop]) { - return null - } + styles.eachRule(function(rule) { + var fontFeatureSettings = null + // read custom media queries + rule.eachDecl(function(decl) { + if (!fontVariantProperties[decl.prop]) { + return null + } - var newValue = decl.value - if (decl.prop === "font-variant") { - newValue = decl.value.split(/\s+/g).map(function(val) { - return fontVariantProperties["font-variant"][val] - }).join(", ") - } - else if (fontVariantProperties[decl.prop][decl.value]) { - newValue = fontVariantProperties[decl.prop][decl.value] - } + var newValue = decl.value + if (decl.prop === "font-variant") { + newValue = decl.value.split(/\s+/g).map(function(val) { + return fontVariantProperties["font-variant"][val] + }).join(", ") + } + else if (fontVariantProperties[decl.prop][decl.value]) { + newValue = fontVariantProperties[decl.prop][decl.value] + } - var newDecl = decl.clone() - newDecl.prop = "font-feature-settings" - newDecl.value = newValue - decl.parent.insertBefore(decl, newDecl) + if (fontFeatureSettings === null) { + fontFeatureSettings = getFontFeatureSettingsPrevTo(decl); + } + if (fontFeatureSettings.value) { + fontFeatureSettings.value += ", " + newValue; + } + else { + fontFeatureSettings.value = newValue; + } + }) }) } } diff --git a/test/fixtures/font-variant.css b/test/fixtures/font-variant.css index 10fa7bd..37f1f0c 100644 --- a/test/fixtures/font-variant.css +++ b/test/fixtures/font-variant.css @@ -1,8 +1,20 @@ selector { font-variant-numeric: tabular-nums; font-variant-caps: all-small-caps; +} +selector { font-variant: normal; +} +selector { font-variant: inherit; +} +selector { font-variant: all-small-caps oldstyle-nums; +} +selector { + font-feature-settings: "onum"; + font-variant: all-small-caps; +} +selector { font-variant-position: normal; } diff --git a/test/fixtures/font-variant.expected.css b/test/fixtures/font-variant.expected.css index ba9ae6a..4865808 100644 --- a/test/fixtures/font-variant.expected.css +++ b/test/fixtures/font-variant.expected.css @@ -1,14 +1,25 @@ selector { - font-feature-settings: "tnum"; + font-feature-settings: "tnum", "smcp", "c2sc"; font-variant-numeric: tabular-nums; - font-feature-settings: "smcp", "c2sc"; font-variant-caps: all-small-caps; +} +selector { font-feature-settings: normal; font-variant: normal; +} +selector { font-feature-settings: inherit; font-variant: inherit; +} +selector { font-feature-settings: "smcp", "c2sc", "onum"; font-variant: all-small-caps oldstyle-nums; +} +selector { + font-feature-settings: "onum", "smcp", "c2sc"; + font-variant: all-small-caps; +} +selector { font-feature-settings: normal; font-variant-position: normal; }