stylelint-plugin-logical-css 0.1.1 → 0.3.0

package/README.md

@@ -1,4 +1,4 @@
-# 🚀 Stylelint Plugin Logical CSS
+# 🛸 Stylelint Plugin Logical CSS
 
 ![License](https://img.shields.io/github/license/yuschick/stylelint-plugin-logical-css?style=for-the-badge)
 ![NPM Version](https://img.shields.io/npm/v/stylelint-plugin-logical-css?style=for-the-badge)
@@ -24,8 +24,8 @@ npm i stylelint-plugin-logical-css --save-dev
 yarn add stylelint-plugin-logical-css --dev
 ```
 
-With the plugin installed, the rule(s) can now be added to the project's
-Stylelint configuration.
+With the plugin installed, the rule(s) can be added to the project's Stylelint
+configuration.
 
 ```json
 {
@@ -46,13 +46,34 @@ Let's explore each rule to better understand what it does, and does not, allow.
 
 ### `plugin/use-logical-properties-and-values`
 
-> ➟
-> [Learn more about the properties and values supported by this rule](./src/rules/use-logical-properties-and-values)
+**👉 [Learn more about this rule](./src/rules/use-logical-properties-and-values)
+👈**
 
 This rule is responsible for checking both CSS properties and values. When a
 physical property or value is found, it will be flagged.
 
-#### Not Allowed
+#### Options
+
+The use-logical-properties-and-values rule accepts the following options:
+
+| Option          | Description                                                                                     |
+| --------------- | ----------------------------------------------------------------------------------------------- |
+| enable-auto-fix | Use this option in addition to the native Stylelint `--fix` flag to enable auto fixing on save. |
+
+```json
+{
+  "rules": {
+    "plugin/use-logical-properties-and-values": [
+      true,
+      { "severity": "warning", "enable-auto-fix": true }
+    ]
+  }
+}
+```
+
+#### Usage
+
+##### Not Allowed
 
 ```css
 .heading {
@@ -61,7 +82,7 @@ physical property or value is found, it will be flagged.
 }
 ```
 
-#### Allowed
+##### Allowed
 
 ```css
 .heading {
@@ -70,13 +91,11 @@ physical property or value is found, it will be flagged.
 }
 ```
 
-### `plugin/use-logical-units`
+---
 
-> ➟
-> [Learn more about the properties and values supported by this rule](./src/rules/use-logical-units)
+### `plugin/use-logical-units`
 
-> Read about current
-> [browser support for logical viewport units](https://caniuse.com/mdn-css_types_length_viewport_percentage_units_dynamic).
+**👉 [Learn more about this rule](./src/rules/use-logical-units) 👈**
 
 This rule is responsible for checking that logical CSS units are used.
 Specifically, viewport units like `vw` and `vh` which stand for viewport width
@@ -84,7 +103,28 @@ and viewport height respectively will not reflect different writing modes and
 directions. Instead, this rule will enforce the logical equivalents, `vi` and
 `vb`.
 
-#### Not Allowed
+#### Options
+
+The use-logical-units rule accepts the following options:
+
+| Option          | Description                                                                                     |
+| --------------- | ----------------------------------------------------------------------------------------------- |
+| enable-auto-fix | Use this option in addition to the native Stylelint `--fix` flag to enable auto fixing on save. |
+
+```json
+{
+  "rules": {
+    "plugin/use-logical-units": [
+      true,
+      { "severity": "warning", "enable-auto-fix": true }
+    ]
+  }
+}
+```
+
+#### Usage
+
+##### Not Allowed
 
 ```css
 body {
@@ -92,7 +132,7 @@ body {
 }
 ```
 
-#### Allowed
+##### Allowed
 
 ```css
 body {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "stylelint-plugin-logical-css",
-  "version": "0.1.1",
+  "version": "0.3.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

@@ -7,25 +7,25 @@ const { isPhysicalProperty } = require('../../utils/isPhysicalProperty');
 const { isPhysicalValue } = require('../../utils/isPhysicalValue');
 const { physicalPropertiesMap } = require('../../utils/physicalPropertiesMap');
 const { physicalValuesMap } = require('../../utils/physicalValuesMap');
+const { propsToSkip } = require('../../utils/propsToSkip');
 
 const ruleFunction = (_, options, context) => {
   return (root, result) => {
-    const validOptions = stylelint.utils.validateOptions(result, ruleName, [
-      {
-        action: 'enableAutoFix',
-        possible: [true, false],
-        optional: true,
-      },
-    ]);
+    const validOptions = stylelint.utils.validateOptions(result, ruleName);
 
     if (!validOptions) {
       return;
     }
 
     root.walkDecls((decl) => {
+      if (propsToSkip.includes(decl.prop)) return;
+
       const propIsPhysical = isPhysicalProperty(decl.prop);
       const valueIsPhysical = isPhysicalValue(decl.value);
 
+      if (decl.prop.includes('grid')) {
+        console.log({ decl, propIsPhysical, valueIsPhysical });
+      }
       if (!propIsPhysical && !valueIsPhysical) return;
 
       const message = propIsPhysical
@@ -39,7 +39,7 @@ const ruleFunction = (_, options, context) => {
             physicalValuesMap[decl.prop][decl.value],
           );
 
-      if (context.fix && options.enableAutoFix) {
+      if (context.fix && options?.['enable-auto-fix']) {
         if (propIsPhysical) {
           decl.prop = physicalPropertiesMap[decl.prop];
         }

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

@@ -6,7 +6,7 @@ const { ruleName, ruleMessages, ruleMeta } = require('./base');
 const { getValueUnit, isPhysicalUnit } = require('../../utils/isPhysicalUnit');
 const { physicalUnitsMap } = require('../../utils/physicalUnitsMap');
 
-const ruleFunction = () => {
+const ruleFunction = (_, options, context) => {
   return (root, result) => {
     const validOptions = stylelint.utils.validateOptions(result, ruleName);
 
@@ -25,6 +25,15 @@ const ruleFunction = () => {
         physicalUnitsMap[physicalUnit],
       );
 
+      if (context.fix && options?.['enable-auto-fix']) {
+        decl.value = decl.value.replace(
+          physicalUnit,
+          physicalUnitsMap[physicalUnit],
+        );
+
+        return;
+      }
+
       stylelint.utils.report({
         message,
         node: decl,

package/src/utils/propsToSkip.js

@@ -0,0 +1,17 @@
+/*
+    The properties included in this array can contain physical values like left and bottom.
+    However, logical values for the4se properties are not yet supported. So for the time being,
+    we skip linting them entirely.
+*/
+const propsToSkip = [
+  'background',
+  'background-position',
+  'grid-area',
+  'grid-areas',
+  'transform-origin',
+  'vertical-align',
+];
+
+module.exports = {
+  propsToSkip,
+};