stylelint-plugin-logical-css 0.11.0 → 0.13.0

package/README.md

@@ -65,10 +65,12 @@ physical property or value is found, it will be flagged.
 
 #### Options
 
-| Option           | Description                                                              |
-| ---------------- | ------------------------------------------------------------------------ |
-| disable-auto-fix | Use this option to prevent auto-fixing warnings and errors while saving. |
-| ignore           | Pass an array of physical properties to ignore while linting.            |
+> Note: As of v0.13.0, the original `disable-auto-fix` option has been removed.
+> PLease use Stylelint's `disableFix` option instead.
+
+| Option | Description                                                   |
+| ------ | ------------------------------------------------------------- |
+| ignore | Pass an array of physical properties to ignore while linting. |
 
 ```json
 {
@@ -77,7 +79,6 @@ physical property or value is found, it will be flagged.
       true,
       {
         "severity": "warning",
-        "disable-auto-fix": true,
         "ignore": ["overflow-y", "overflow-x"]
       }
     ]
@@ -93,6 +94,8 @@ physical property or value is found, it will be flagged.
 .heading {
   max-width: 90ch; /* Will flag the use of "width" */
   text-align: left; /* Will flag the use of "left" */
+  opacity: 1;
+  transition: opacity 1s ease, max-width 1s ease; /* Will flag the use of 'max-width' */
 }
 ```
 
@@ -102,6 +105,8 @@ physical property or value is found, it will be flagged.
 .heading {
   max-inline-size: 90ch;
   text-align: start;
+  opacity: 1;
+  transition: opacity 1s ease, max-inline-size: 1s ease;
 }
 ```
 
@@ -236,10 +241,12 @@ directions. Instead, this rule will enforce the logical equivalents, `vi` and
 
 #### Options
 
-| Option           | Description                                                              |
-| ---------------- | ------------------------------------------------------------------------ |
-| disable-auto-fix | Use this option to prevent auto-fixing warnings and errors while saving. |
-| ignore           | Pass an array of physical units to ignore while linting.                 |
+> Note: As of v0.13.0, the original `disable-auto-fix` option has been removed.
+> PLease use Stylelint's `disableFix` option instead.
+
+| Option | Description                                              |
+| ------ | -------------------------------------------------------- |
+| ignore | Pass an array of physical units to ignore while linting. |
 
 ```json
 {
@@ -248,7 +255,6 @@ directions. Instead, this rule will enforce the logical equivalents, `vi` and
       true,
       {
         "severity": "warning",
-        "disable-auto-fix": true,
         "ignore": ["dvh", "dvw"]
       }
     ]
@@ -281,6 +287,8 @@ body {
 
 | Physical Unit |  Logical Unit |
 | ------------- | ------------- |
+| cqh           | cqb           |
+| cqw           | cqi           |
 | dvh           | dvb           |
 | dvw           | dvi           |
 | lvh           | lvb           |

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "stylelint-plugin-logical-css",
-  "version": "0.11.0",
+  "version": "0.13.0",
   "description": "A Stylelint plugin to enforce the use of logical CSS properties, values and units.",
   "main": "src/index.js",
   "files": [

package/src/rules/use-logical-properties-and-values/index.js

@@ -81,7 +81,7 @@ const ruleFunction = (_, options, context) => {
         );
       }
 
-      if (context.fix && !options?.['disable-auto-fix']) {
+      if (context.fix) {
         if (propIsPhysical) {
           decl.prop = physicalPropertiesMap[rootProp];
         }

package/src/rules/use-logical-units/index.js

@@ -7,6 +7,7 @@ const { getValueUnit, isPhysicalUnit } = require('../../utils/isPhysicalUnit');
 const { physicalUnitsMap } = require('../../utils/physicalUnitsMap');
 
 const ruleFunction = (_, options, context) => {
+  console.log({ options, context });
   return (root, result) => {
     const validOptions = stylelint.utils.validateOptions(result, ruleName);
 
@@ -33,7 +34,7 @@ const ruleFunction = (_, options, context) => {
         physicalUnitsMap[physicalUnit],
       );
 
-      if (context.fix && !options?.['disable-auto-fix']) {
+      if (context.fix) {
         decl.value = decl.value.replace(
           physicalUnit,
           physicalUnitsMap[physicalUnit],

package/src/utils/isPhysicalUnit.js

@@ -1,6 +1,6 @@
 const { physicalUnits } = require('./physical');
 
-const expression = /(\d+\s?)(dvh|dvw|lvh|lvw|svh|svw|vh|vw|)(\s+|$)/;
+const expression = /(\d+\s?)(cqh|cqw|dvh|dvw|lvh|lvw|svh|svw|vh|vw|)(\s+|$)/;
 
 function getValueUnit(value) {
   const match = value.match(expression);

package/src/utils/logical.js

@@ -86,6 +86,8 @@ const logicalProperties = Object.freeze({
 });
 
 const logicalUnits = Object.freeze({
+  cqb: 'cqb',
+  cqi: 'cqi',
   dvb: 'dvb',
   dvi: 'dvi',
   lvb: 'lvb',

package/src/utils/physical.js

@@ -67,6 +67,8 @@ const physicalProperties = Object.freeze({
 });
 
 const physicalUnits = Object.freeze({
+  cqh: 'cqh',
+  cqw: 'cqw',
   dvh: 'dvh',
   dvw: 'dvw',
   lvh: 'lvh',

package/src/utils/physicalUnitsMap.js

@@ -2,6 +2,8 @@ const { logicalUnits } = require('./logical');
 const { physicalUnits } = require('./physical');
 
 const physicalUnitsMap = Object.freeze({
+  [physicalUnits.cqh]: logicalUnits.cqb,
+  [physicalUnits.cqw]: logicalUnits.cqi,
   [physicalUnits.dvh]: logicalUnits.dvb,
   [physicalUnits.dvw]: logicalUnits.dvi,
   [physicalUnits.lvh]: logicalUnits.lvb,