postcss-logical
Advanced tools
Comparing version 2.0.0 to 3.0.0
# Changes to PostCSS Logical Properties | ||
### 3.0.0 (September 20, 2018) | ||
- Added: Support for logical properties within `transition` and | ||
`transition-property`. | ||
- Changed: Physical rule fallbacks are written as full selectors rather than | ||
as nesting selectors. | ||
### 2.0.0 (September 17, 2018) | ||
@@ -4,0 +11,0 @@ |
390
index.cjs.js
@@ -8,18 +8,9 @@ 'use strict'; | ||
var cloneRule = ((decl, dir) => { | ||
let node = decl.parent; | ||
while (node && 'rule' !== node.type) { | ||
node = node.parent; | ||
} | ||
if (node) { | ||
node = node.clone({ | ||
raws: {} | ||
}).removeAll(); | ||
} else { | ||
node = postcss.rule(); | ||
} | ||
node.selector = `&:dir(${dir})`; | ||
return node; | ||
const rule = Object(decl.parent).type === 'rule' ? decl.parent.clone({ | ||
raws: {} | ||
}).removeAll() : postcss.rule({ | ||
selector: '&' | ||
}); | ||
rule.selectors = rule.selectors.map(selector => `${selector}:dir(${dir})`); | ||
return rule; | ||
}); | ||
@@ -323,2 +314,340 @@ | ||
function splitByComma(string, isTrimmed) { | ||
return splitByRegExp(string, /^,$/, isTrimmed); | ||
} | ||
function splitBySpace(string, isTrimmed) { | ||
return splitByRegExp(string, /^\s$/, isTrimmed); | ||
} | ||
function splitBySlash(string, isTrimmed) { | ||
return splitByRegExp(string, /^\/$/, isTrimmed); | ||
} | ||
function splitByRegExp(string, re, isTrimmed) { | ||
const array = []; | ||
let buffer = ''; | ||
let split = false; | ||
let func = 0; | ||
let i = -1; | ||
while (++i < string.length) { | ||
const char = string[i]; | ||
if (char === '(') { | ||
func += 1; | ||
} else if (char === ')') { | ||
if (func > 0) { | ||
func -= 1; | ||
} | ||
} else if (func === 0) { | ||
if (re.test(char)) { | ||
split = true; | ||
} | ||
} | ||
if (split) { | ||
if (!isTrimmed || buffer.trim()) { | ||
array.push(isTrimmed ? buffer.trim() : buffer); | ||
} | ||
if (!isTrimmed) { | ||
array.push(char); | ||
} | ||
buffer = ''; | ||
split = false; | ||
} else { | ||
buffer += char; | ||
} | ||
} | ||
if (buffer !== '') { | ||
array.push(isTrimmed ? buffer.trim() : buffer); | ||
} | ||
return array; | ||
} | ||
var transformTransition = ((decl, notValues, dir) => { | ||
const ltrValues = []; | ||
const rtlValues = []; | ||
splitByComma(decl.value).forEach(value => { | ||
let hasBeenSplit = false; | ||
splitBySpace(value).forEach((word, index, words) => { | ||
if (word in valueMap) { | ||
hasBeenSplit = true; | ||
valueMap[word].ltr.forEach(replacement => { | ||
const clone = words.slice(); | ||
clone.splice(index, 1, replacement); | ||
if (ltrValues.length && !/^,$/.test(ltrValues[ltrValues.length - 1])) { | ||
ltrValues.push(','); | ||
} | ||
ltrValues.push(clone.join('')); | ||
}); | ||
valueMap[word].rtl.forEach(replacement => { | ||
const clone = words.slice(); | ||
clone.splice(index, 1, replacement); | ||
if (rtlValues.length && !/^,$/.test(rtlValues[rtlValues.length - 1])) { | ||
rtlValues.push(','); | ||
} | ||
rtlValues.push(clone.join('')); | ||
}); | ||
} | ||
}); | ||
if (!hasBeenSplit) { | ||
ltrValues.push(value); | ||
rtlValues.push(value); | ||
} | ||
}); | ||
const ltrDecl = decl.clone({ | ||
value: ltrValues.join('') | ||
}); | ||
const rtlDecl = decl.clone({ | ||
value: rtlValues.join('') | ||
}); | ||
return ltrValues.length && 'ltr' === dir ? ltrDecl : rtlValues.length && 'rtl' === dir ? rtlDecl : ltrDecl.value !== rtlDecl.value ? [cloneRule(decl, 'ltr').append(ltrDecl), cloneRule(decl, 'rtl').append(rtlDecl)] : null; | ||
}); | ||
const valueMap = { | ||
'border-block': { | ||
ltr: ['border-top', 'border-bottom'], | ||
rtl: ['border-top', 'border-bottom'] | ||
}, | ||
'border-block-color': { | ||
ltr: ['border-top-color', 'border-bottom-color'], | ||
rtl: ['border-top-color', 'border-bottom-color'] | ||
}, | ||
'border-block-end': { | ||
ltr: ['border-bottom'], | ||
rtl: ['border-bottom'] | ||
}, | ||
'border-block-end-color': { | ||
ltr: ['border-bottom-color'], | ||
rtl: ['border-bottom-color'] | ||
}, | ||
'border-block-end-style': { | ||
ltr: ['border-bottom-style'], | ||
rtl: ['border-bottom-style'] | ||
}, | ||
'border-block-end-width': { | ||
ltr: ['border-bottom-width'], | ||
rtl: ['border-bottom-width'] | ||
}, | ||
'border-block-start': { | ||
ltr: ['border-top'], | ||
rtl: ['border-top'] | ||
}, | ||
'border-block-start-color': { | ||
ltr: ['border-top-color'], | ||
rtl: ['border-top-color'] | ||
}, | ||
'border-block-start-style': { | ||
ltr: ['border-top-style'], | ||
rtl: ['border-top-style'] | ||
}, | ||
'border-block-start-width': { | ||
ltr: ['border-top-width'], | ||
rtl: ['border-top-width'] | ||
}, | ||
'border-block-style': { | ||
ltr: ['border-top-style', 'border-bottom-style'], | ||
rtl: ['border-top-style', 'border-bottom-style'] | ||
}, | ||
'border-block-width': { | ||
ltr: ['border-top-width', 'border-bottom-width'], | ||
rtl: ['border-top-width', 'border-bottom-width'] | ||
}, | ||
'border-end': { | ||
ltr: ['border-bottom', 'border-right'], | ||
rtl: ['border-bottom', 'border-left'] | ||
}, | ||
'border-end-color': { | ||
ltr: ['border-bottom-color', 'border-right-color'], | ||
rtl: ['border-bottom-color', 'border-left-color'] | ||
}, | ||
'border-end-style': { | ||
ltr: ['border-bottom-style', 'border-right-style'], | ||
rtl: ['border-bottom-style', 'border-left-style'] | ||
}, | ||
'border-end-width': { | ||
ltr: ['border-bottom-width', 'border-right-width'], | ||
rtl: ['border-bottom-width', 'border-left-width'] | ||
}, | ||
'border-inline': { | ||
ltr: ['border-left', 'border-right'], | ||
rtl: ['border-left', 'border-right'] | ||
}, | ||
'border-inline-color': { | ||
ltr: ['border-left-color', 'border-right-color'], | ||
rtl: ['border-left-color', 'border-right-color'] | ||
}, | ||
'border-inline-end': { | ||
ltr: ['border-right'], | ||
rtl: ['border-left'] | ||
}, | ||
'border-inline-end-color': { | ||
ltr: ['border-right-color'], | ||
rtl: ['border-left-color'] | ||
}, | ||
'border-inline-end-style': { | ||
ltr: ['border-right-style'], | ||
rtl: ['border-left-style'] | ||
}, | ||
'border-inline-end-width': { | ||
ltr: ['border-right-width'], | ||
rtl: ['border-left-width'] | ||
}, | ||
'border-inline-start': { | ||
ltr: ['border-left'], | ||
rtl: ['border-right'] | ||
}, | ||
'border-inline-start-color': { | ||
ltr: ['border-left-color'], | ||
rtl: ['border-right-color'] | ||
}, | ||
'border-inline-start-style': { | ||
ltr: ['border-left-style'], | ||
rtl: ['border-right-style'] | ||
}, | ||
'border-inline-start-width': { | ||
ltr: ['border-left-width'], | ||
rtl: ['border-right-width'] | ||
}, | ||
'border-inline-style': { | ||
ltr: ['border-left-style', 'border-right-style'], | ||
rtl: ['border-left-style', 'border-right-style'] | ||
}, | ||
'border-inline-width': { | ||
ltr: ['border-left-width', 'border-right-width'], | ||
rtl: ['border-left-width', 'border-right-width'] | ||
}, | ||
'border-start': { | ||
ltr: ['border-top', 'border-left'], | ||
rtl: ['border-top', 'border-right'] | ||
}, | ||
'border-start-color': { | ||
ltr: ['border-top-color', 'border-left-color'], | ||
rtl: ['border-top-color', 'border-right-color'] | ||
}, | ||
'border-start-style': { | ||
ltr: ['border-top-style', 'border-left-style'], | ||
rtl: ['border-top-style', 'border-right-style'] | ||
}, | ||
'border-start-width': { | ||
ltr: ['border-top-width', 'border-left-width'], | ||
rtl: ['border-top-width', 'border-right-width'] | ||
}, | ||
'block-size': { | ||
ltr: ['height'], | ||
rtl: ['height'] | ||
}, | ||
'inline-size': { | ||
ltr: ['width'], | ||
rtl: ['width'] | ||
}, | ||
'inset': { | ||
ltr: ['top', 'right', 'bottom', 'left'], | ||
rtl: ['top', 'right', 'bottom', 'left'] | ||
}, | ||
'inset-block': { | ||
ltr: ['top', 'bottom'], | ||
rtl: ['top', 'bottom'] | ||
}, | ||
'inset-block-start': { | ||
ltr: ['top'], | ||
rtl: ['top'] | ||
}, | ||
'inset-block-end': { | ||
ltr: ['bottom'], | ||
rtl: ['bottom'] | ||
}, | ||
'inset-end': { | ||
ltr: ['bottom', 'right'], | ||
rtl: ['bottom', 'left'] | ||
}, | ||
'inset-inline': { | ||
ltr: ['left', 'right'], | ||
rtl: ['left', 'right'] | ||
}, | ||
'inset-inline-start': { | ||
ltr: ['left'], | ||
rtl: ['right'] | ||
}, | ||
'inset-inline-end': { | ||
ltr: ['right'], | ||
rtl: ['left'] | ||
}, | ||
'inset-start': { | ||
ltr: ['top', 'left'], | ||
rtl: ['top', 'right'] | ||
}, | ||
'margin-block': { | ||
ltr: ['margin-top', 'margin-bottom'], | ||
rtl: ['margin-top', 'margin-bottom'] | ||
}, | ||
'margin-block-start': { | ||
ltr: ['margin-top'], | ||
rtl: ['margin-top'] | ||
}, | ||
'margin-block-end': { | ||
ltr: ['margin-bottom'], | ||
rtl: ['margin-bottom'] | ||
}, | ||
'margin-end': { | ||
ltr: ['margin-bottom', 'margin-right'], | ||
rtl: ['margin-bottom', 'margin-left'] | ||
}, | ||
'margin-inline': { | ||
ltr: ['margin-left', 'margin-right'], | ||
rtl: ['margin-left', 'margin-right'] | ||
}, | ||
'margin-inline-start': { | ||
ltr: ['margin-left'], | ||
rtl: ['margin-right'] | ||
}, | ||
'margin-inline-end': { | ||
ltr: ['margin-right'], | ||
rtl: ['margin-left'] | ||
}, | ||
'margin-start': { | ||
ltr: ['margin-top', 'margin-left'], | ||
rtl: ['margin-top', 'margin-right'] | ||
}, | ||
'padding-block': { | ||
ltr: ['padding-top', 'padding-bottom'], | ||
rtl: ['padding-top', 'padding-bottom'] | ||
}, | ||
'padding-block-start': { | ||
ltr: ['padding-top'], | ||
rtl: ['padding-top'] | ||
}, | ||
'padding-block-end': { | ||
ltr: ['padding-bottom'], | ||
rtl: ['padding-bottom'] | ||
}, | ||
'padding-end': { | ||
ltr: ['padding-bottom', 'padding-right'], | ||
rtl: ['padding-bottom', 'padding-left'] | ||
}, | ||
'padding-inline': { | ||
ltr: ['padding-left', 'padding-right'], | ||
rtl: ['padding-left', 'padding-right'] | ||
}, | ||
'padding-inline-start': { | ||
ltr: ['padding-left'], | ||
rtl: ['padding-right'] | ||
}, | ||
'padding-inline-end': { | ||
ltr: ['padding-right'], | ||
rtl: ['padding-left'] | ||
}, | ||
'padding-start': { | ||
ltr: ['padding-top', 'padding-left'], | ||
rtl: ['padding-top', 'padding-right'] | ||
} | ||
}; | ||
var matchSupportedProperties = /^(?:(inset|margin|padding)(?:-(block|block-start|block-end|inline|inline-start|inline-end|start|end))|(min-|max-)?(block|inline)-(size))$/i; | ||
@@ -380,5 +709,9 @@ | ||
'size': transformSize, | ||
'text-align': transformTextAlign | ||
}; // plugin | ||
'text-align': transformTextAlign, | ||
'transition': transformTransition, | ||
'transition-property': transformTransition | ||
}; // properties that will be split by slash | ||
const splitBySlashPropRegExp = /^border(-block|-inline|-start|-end)?(-width|-style|-color)?$/i; // plugin | ||
var index = postcss.plugin('postcss-logical-properties', opts => { | ||
@@ -389,3 +722,4 @@ const preserve = Boolean(Object(opts).preserve); | ||
root.walkDecls(decl => { | ||
const values = postcss.list.split(decl.value, /^border(-block|-inline|-start|-end)?(-width|-style|-color)?$/i.test(decl.prop) ? '/' : ' '); | ||
const parent = decl.parent; | ||
const values = splitBySlashPropRegExp.test(decl.prop) ? splitBySlash(decl.value, true) : splitBySpace(decl.value, true); | ||
const prop = decl.prop.replace(matchSupportedProperties, '$2$5').toLowerCase(); | ||
@@ -397,6 +731,16 @@ | ||
if (replacer) { | ||
if (preserve) { | ||
decl.before(replacer); | ||
} else { | ||
decl.replaceWith(replacer); | ||
[].concat(replacer).forEach(replacement => { | ||
if (replacement.type === 'rule') { | ||
parent.before(replacement); | ||
} else { | ||
decl.before(replacement); | ||
} | ||
}); | ||
if (!preserve) { | ||
decl.remove(); | ||
if (!parent.nodes.length) { | ||
parent.remove(); | ||
} | ||
} | ||
@@ -403,0 +747,0 @@ } |
{ | ||
"name": "postcss-logical", | ||
"version": "2.0.0", | ||
"version": "3.0.0", | ||
"description": "Use logical properties and values in CSS", | ||
@@ -33,4 +33,4 @@ "author": "Jonathan Neal <jonathantneal@hotmail.com>", | ||
"devDependencies": { | ||
"@babel/core": "^7.0.0", | ||
"@babel/preset-env": "^7.0.0", | ||
"@babel/core": "^7.1.0", | ||
"@babel/preset-env": "^7.1.0", | ||
"babel-eslint": "^9.0.0", | ||
@@ -42,4 +42,4 @@ "echint": "^4.0.1", | ||
"pre-commit": "^1.2.2", | ||
"rollup": "^0.66.0", | ||
"rollup-plugin-babel": "^4.0.1" | ||
"rollup": "^0.66.1", | ||
"rollup-plugin-babel": "^4.0.3" | ||
}, | ||
@@ -46,0 +46,0 @@ "eslintConfig": { |
@@ -23,14 +23,11 @@ # PostCSS Logical Properties and Values [<img src="https://postcss.github.io/postcss/logo.svg" alt="PostCSS Logo" width="90" height="90" align="right">][postcss] | ||
.banner { | ||
color: #222222; | ||
top: 0; left: 5px; bottom: 10px; right: 5px; | ||
.banner:dir(ltr) { | ||
padding-left: 20px; padding-right: 40px; | ||
} | ||
&:dir(ltr) { | ||
padding-left: 20px; padding-right: 40px; | ||
} | ||
&:dir(rtl) { | ||
padding-right: 20px; padding-left: 40px; | ||
} | ||
.banner:dir(rtl) { | ||
padding-right: 20px; padding-left: 40px; | ||
} | ||
.banner { | ||
resize: vertical; | ||
@@ -52,14 +49,13 @@ transition: color 200ms; | ||
.banner:dir(ltr) { | ||
padding-left: 20px; padding-right: 40px; | ||
} | ||
.banner:dir(rtl) { | ||
padding-right: 20px; padding-left: 40px; | ||
} | ||
.banner { | ||
color: #222222; | ||
top: 0; left: 5px; bottom: 10px; right: 5px; | ||
&:dir(ltr) { | ||
padding-left: 20px; padding-right: 40px; | ||
} | ||
&:dir(rtl) { | ||
padding-right: 20px; padding-left: 40px; | ||
} | ||
inset: logical 0 5px 10px; | ||
@@ -66,0 +62,0 @@ padding-inline: 20px 40px; |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
License Policy Violation
LicenseThis 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 riskPackage 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
180876
1412
0
199