stylelint-plugin-logical-css 0.2.0 → 0.3.1

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,19 +46,19 @@ 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.
 
 #### Options
 
-The `use-logical-properties-and-values` rule accepts the following options:
+The use-logical-properties-and-values rule accepts the following options:
 
-| Option            | Type    | Default | Description                                                                                   |
-| ----------------- | ------- | ------- | --------------------------------------------------------------------------------------------- |
-| `enable-auto-fix` | boolean | false   | Use this flag in addition to the native Stylelint `--fix` flag to enable auto fixing on save. |
+| Option          | Description                                                                                     |
+| --------------- | ----------------------------------------------------------------------------------------------- |
+| enable-auto-fix | Use this option in addition to the native Stylelint `--fix` flag to enable auto fixing on save. |
 
 ```json
 {
@@ -91,13 +91,11 @@ The `use-logical-properties-and-values` rule accepts the following options:
 }
 ```
 
-### `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
@@ -107,11 +105,11 @@ directions. Instead, this rule will enforce the logical equivalents, `vi` and
 
 #### Options
 
-The `use-logical-units` rule accepts the following options:
+The use-logical-units rule accepts the following options:
 
-| Option            | Type    | Default | Description                                                                                   |
-| ----------------- | ------- | ------- | --------------------------------------------------------------------------------------------- |
-| `enable-auto-fix` | boolean | false   | Use this flag in addition to the native Stylelint `--fix` flag to enable auto fixing on save. |
+| Option          | Description                                                                                     |
+| --------------- | ----------------------------------------------------------------------------------------------- |
+| enable-auto-fix | Use this option in addition to the native Stylelint `--fix` flag to enable auto fixing on save. |
 
 ```json
 {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "stylelint-plugin-logical-css",
-  "version": "0.2.0",
+  "version": "0.3.1",
   "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,6 +7,7 @@ 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) => {
@@ -17,9 +18,14 @@ const ruleFunction = (_, options, context) => {
     }
 
     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

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-template-areas',
+  'transform-origin',
+  'vertical-align',
+];
+
+module.exports = {
+  propsToSkip,
+};