remove css variable migration

packages/postcss-logical-fallback/CHANGELOG.md

@@ -1,5 +1,8 @@
 # Change Log - postcss-logical-fallback
 
+## 1.1.0
+Remove CSS variables support
+
 ## 1.0.3
 Fix can't read filter of undefined
 

packages/postcss-logical-fallback/README.md

@@ -30,6 +30,10 @@ Please note that the utility and functionality of this plugin may be limited whe
 **WARNING**
 Plugin is based on @supports at rule, so it has to be supported, see on [can i use](https://caniuse.com/css-featurequeries)
 
+**WARNING**
+Plugin doesn't migrates css properties with css variables due to impossibility of resolving how many values in css
+variable and how to split them.
+
 ## Usage
 
 **Step 1:** install plugin and postcss

packages/postcss-logical-fallback/package.json

@@ -1,6 +1,6 @@
 {
   "name": "postcss-logical-fallback",
-  "version": "1.0.3",
+  "version": "1.1.0",
   "description": "PostCSS plugin for logical fallback props",
   "main": "index.js",
   "files": [

packages/postcss-logical-fallback/src/decl-processors/inset-inline.ts

@@ -1,28 +1,33 @@
-import {Declaration} from "postcss";
-import {parseCssValue} from "../utils";
+import { Declaration } from 'postcss';
+import { parseCssValue } from '../utils';
+import { isCssVariable } from '../utils/is-css-variable';
 
 const valueMap = {
-  ltr: {
-    start: 'left',
-    end: 'right'
-  },
-  rtl: {
-    start: 'right',
-    end: 'left'
-  }
-}
+    ltr: {
+        start: 'left',
+        end: 'right',
+    },
+    rtl: {
+        start: 'right',
+        end: 'left',
+    },
+};
 
 export const processor = (decl: Declaration, dir = 'ltr') => {
-  const [start, end = start] = parseCssValue(decl.value)
+    if (isCssVariable(decl.value)) {
+        return;
+    }
 
-  decl.cloneBefore({
-    prop: valueMap[dir].start,
-    value: start
-  })
-  decl.cloneBefore({
-    prop: valueMap[dir].end,
-    value: end
-  })
+    const [start, end = start] = parseCssValue(decl.value);
 
-  decl.remove()
-}
+    decl.cloneBefore({
+        prop: valueMap[dir].start,
+        value: start,
+    });
+    decl.cloneBefore({
+        prop: valueMap[dir].end,
+        value: end,
+    });
+
+    decl.remove();
+};

packages/postcss-logical-fallback/src/decl-processors/shorthand-processor.ts

@@ -1,15 +1,21 @@
-import {Declaration} from "postcss";
-import {parseCssValue} from "../utils";
+import { Declaration } from 'postcss';
+import { parseCssValue } from '../utils';
+import { isCssVariable } from '../utils/is-css-variable';
+
 export const processor = (decl: Declaration) => {
-  const { prop, value } = decl
-  const [start, end = start] = parseCssValue(value)
-  decl.cloneBefore({
-    prop: `${prop}-start`,
-    value: start,
-  })
-  decl.cloneBefore({
-    prop: `${prop}-end`,
-    value: end,
-  })
-  decl.remove()
-}
+    const { prop, value } = decl;
+    if (isCssVariable(value)) {
+        return;
+    }
+
+    const [start, end = start] = parseCssValue(value);
+    decl.cloneBefore({
+        prop: `${prop}-start`,
+        value: start,
+    });
+    decl.cloneBefore({
+        prop: `${prop}-end`,
+        value: end,
+    });
+    decl.remove();
+};