stylelint-plugin-logical-css 0.13.2 → 1.1.0

package/README.md

@@ -270,6 +270,10 @@ directions. Instead, this rule will enforce the logical equivalents, `vi` and
 body {
   max-block-size: 100vh; /* Will flag the physical use of viewport "height" */
 }
+
+.container {
+  inline-size: clamp(10vw, 100%, 50vw); /* Will flag the physical use of viewport "width" */
+}
 ```
 
 ##### Allowed

package/package.json

@@ -1,15 +1,19 @@
 {
   "name": "stylelint-plugin-logical-css",
-  "version": "0.13.2",
+  "version": "1.1.0",
   "description": "A Stylelint plugin to enforce the use of logical CSS properties, values and units.",
   "main": "src/index.js",
+  "type": "module",
+  "exports": "./src/index.js",
   "files": [
     "src/**/*.js",
     "!**/**/*.test.js"
   ],
   "scripts": {
     "prepare": "husky install",
-    "test": "jest"
+    "jest": "cross-env NODE_OPTIONS=\"--experimental-vm-modules\" jest --runInBand",
+    "test": "npm run jest",
+    "test:watch": "npm run jest -- --watch"
   },
   "repository": {
     "type": "git",
@@ -22,34 +26,39 @@
   },
   "homepage": "https://github.com/yuschick/stylelint-plugin-logical-css#readme",
   "engines": {
-    "node": ">=16.0.0"
+    "node": ">=18.12.0"
   },
   "keywords": [
-    "Stylelint",
-    "Plugin",
-    "CSS",
-    "Logical CSS",
-    "Internationalization",
-    "i18n"
+    "css",
+    "csslint",
+    "internationalization",
+    "i18n",
+    "lint",
+    "linter",
+    "stylelint",
+    "stylelint-plugin",
+    "logical css"
   ],
   "peerDependencies": {
-    "stylelint": "^14.0.0 || ^15.0.0"
+    "stylelint": "^14.0.0 || ^15.0.0 || ^16.0.0"
   },
   "devDependencies": {
-    "@commitlint/cli": "^17.4.4",
-    "@commitlint/config-conventional": "^17.4.4",
+    "@commitlint/cli": "^18.4.3",
+    "@commitlint/config-conventional": "^18.4.3",
+    "cross-env": "^7.0.3",
     "eslint": "^8.35.0",
-    "husky": "^8.0.0",
+    "husky": "^8.0.3",
     "jest": "^29.4.3",
     "jest-cli": "^29.4.3",
-    "jest-preset-stylelint": "^6.1.0",
-    "lint-staged": "^13.1.2",
-    "prettier": "^2.8.4",
-    "prettier-eslint": "^15.0.1",
-    "stylelint": "^15.2.0"
+    "jest-light-runner": "^0.6.0",
+    "jest-preset-stylelint": "^7.0.0",
+    "lint-staged": "^15.0.2",
+    "prettier": "^3.0.3",
+    "prettier-eslint": "^16.1.2",
+    "stylelint": "^16.1.0"
   },
   "lint-staged": {
-    "**/*.{js|md}": [
+    "**/*.js|md|json": [
       "eslint",
       "prettier --write"
     ]

package/src/index.js

@@ -1,4 +1,4 @@
-const useLogicalPropertiesAndValues = require('./rules/use-logical-properties-and-values');
-const useLogicalUnits = require('./rules/use-logical-units');
+import useLogicalPropertiesAndValues from './rules/use-logical-properties-and-values/index.js';
+import useLogicalUnits from './rules/use-logical-units/index.js';
 
-module.exports = [useLogicalPropertiesAndValues, useLogicalUnits];
+export default [useLogicalPropertiesAndValues, useLogicalUnits];

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

@@ -1,10 +1,8 @@
-'use strict';
+import stylelint from 'stylelint';
 
-const stylelint = require('stylelint');
+export const ruleName = 'plugin/use-logical-properties-and-values';
 
-const ruleName = 'plugin/use-logical-properties-and-values';
-
-const ruleMessages = stylelint.utils.ruleMessages(ruleName, {
+export const ruleMessages = stylelint.utils.ruleMessages(ruleName, {
   unexpectedProp(physicalProperty, logicalProperty) {
     return `Unexpected "${physicalProperty}" property. Use "${logicalProperty}".`;
   },
@@ -16,12 +14,6 @@ const ruleMessages = stylelint.utils.ruleMessages(ruleName, {
   },
 });
 
-const ruleMeta = {
+export const ruleMeta = {
   url: 'https://github.com/yuschick/stylelint-plugin-logical-css',
 };
-
-module.exports = {
-  ruleName,
-  ruleMessages,
-  ruleMeta,
-};

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

@@ -1,14 +1,12 @@
-'use strict';
+import stylelint from 'stylelint';
 
-const stylelint = require('stylelint');
-
-const { ruleName, ruleMessages, ruleMeta } = require('./base');
-const { vendorPrefixes } = require('../../utils/vendorPrefixes');
-const { physicalProperties } = require('../../utils/physical');
-const { isPhysicalProperty } = require('../../utils/isPhysicalProperty');
-const { isPhysicalValue } = require('../../utils/isPhysicalValue');
-const { physicalPropertiesMap } = require('../../utils/physicalPropertiesMap');
-const { physicalValuesMap } = require('../../utils/physicalValuesMap');
+import { ruleName, ruleMessages, ruleMeta } from './base.js';
+import { vendorPrefixes } from '../../utils/vendorPrefixes.js';
+import { physicalProperties } from '../../utils/physical.js';
+import { isPhysicalProperty } from '../../utils/isPhysicalProperty.js';
+import { isPhysicalValue } from '../../utils/isPhysicalValue.js';
+import { physicalPropertiesMap } from '../../utils/physicalPropertiesMap.js';
+import { physicalValuesMap } from '../../utils/physicalValuesMap.js';
 
 const ruleFunction = (_, options, context) => {
   return (root, result) => {
@@ -119,4 +117,4 @@ ruleFunction.ruleName = ruleName;
 ruleFunction.messages = ruleMessages;
 ruleFunction.meta = ruleMeta;
 
-module.exports = stylelint.createPlugin(ruleName, ruleFunction);
+export default stylelint.createPlugin(ruleName, ruleFunction);

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

@@ -1,21 +1,13 @@
-'use strict';
+import stylelint from 'stylelint';
 
-const stylelint = require('stylelint');
+export const ruleName = 'plugin/use-logical-units';
 
-const ruleName = 'plugin/use-logical-units';
-
-const ruleMessages = stylelint.utils.ruleMessages(ruleName, {
+export const ruleMessages = stylelint.utils.ruleMessages(ruleName, {
   unexpectedUnit(physicalUnit, logicalUnit) {
     return `Unexpected "${physicalUnit}" unit. Use "${logicalUnit}".`;
   },
 });
 
-const ruleMeta = {
+export const ruleMeta = {
   url: 'https://github.com/yuschick/stylelint-plugin-logical-css',
 };
-
-module.exports = {
-  ruleName,
-  ruleMessages,
-  ruleMeta,
-};

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

@@ -1,10 +1,8 @@
-'use strict';
+import stylelint from 'stylelint';
 
-const stylelint = require('stylelint');
-
-const { ruleName, ruleMessages, ruleMeta } = require('./base');
-const { getValueUnit, isPhysicalUnit } = require('../../utils/isPhysicalUnit');
-const { physicalUnitsMap } = require('../../utils/physicalUnitsMap');
+import { ruleName, ruleMessages, ruleMeta } from './base.js';
+import { getValueUnit, isPhysicalUnit } from '../../utils/isPhysicalUnit.js';
+import { physicalUnitsMap } from '../../utils/physicalUnitsMap.js';
 
 const ruleFunction = (_, options, context) => {
   return (root, result) => {
@@ -21,22 +19,24 @@ const ruleFunction = (_, options, context) => {
 
       const physicalUnit = getValueUnit(decl.value);
 
-      if (
-        Array.isArray(options?.ignore) &&
-        options?.ignore.includes(physicalUnit)
-      ) {
+      const ignore = physicalUnit.some(
+        (unit) =>
+          Array.isArray(options?.ignore) && options?.ignore.includes(unit),
+      );
+
+      if (ignore) {
         return;
       }
 
       const message = ruleMessages.unexpectedUnit(
         physicalUnit,
-        physicalUnitsMap[physicalUnit],
+        physicalUnit.map((unit) => physicalUnitsMap[unit]),
       );
 
       if (context.fix) {
-        decl.value = decl.value.replace(
-          physicalUnit,
-          physicalUnitsMap[physicalUnit],
+        physicalUnit.forEach(
+          (unit) =>
+            (decl.value = decl.value.replace(unit, physicalUnitsMap[unit])),
         );
 
         return;
@@ -56,4 +56,4 @@ ruleFunction.ruleName = ruleName;
 ruleFunction.messages = ruleMessages;
 ruleFunction.meta = ruleMeta;
 
-module.exports = stylelint.createPlugin(ruleName, ruleFunction);
+export default stylelint.createPlugin(ruleName, ruleFunction);

package/src/utils/isPhysicalProperty.js

@@ -1,13 +1,9 @@
-const { physicalPropertiesMap } = require('./physicalPropertiesMap');
+import { physicalPropertiesMap } from './physicalPropertiesMap.js';
 
-function isPhysicalProperty(property) {
+export function isPhysicalProperty(property) {
   const physicalProperties = Object.keys(physicalPropertiesMap);
 
   const propIsPhysical = physicalProperties.includes(property);
 
   return propIsPhysical;
 }
-
-module.exports = {
-  isPhysicalProperty,
-};

package/src/utils/isPhysicalUnit.js

@@ -1,30 +1,29 @@
-const { physicalUnits } = require('./physical');
+import { physicalUnits } from './physical.js';
 
-const expression = /(\d+\s?)(cqh|cqw|dvh|dvw|lvh|lvw|svh|svw|vh|vw|)(\s+|$)/;
+const expression = /\b\d+(\.\d+)?\s*(cqh|cqw|dvh|dvw|lvh|lvw|svh|svw|vh|vw)\b/g;
 
-function getValueUnit(value) {
+export function getValueUnit(value) {
   const match = value.match(expression);
 
   if (!match) return false;
 
-  const matchedUnit = match.find((item) =>
-    Object.values(physicalUnits).includes(item),
+  const matches = Array.isArray(match) ? match : [match];
+
+  const matchedUnit = matches.map(
+    (match) => physicalUnits[match.replace(/[0-9]/g, '')],
   );
 
   return matchedUnit;
 }
 
-function isPhysicalUnit(value) {
-  const unit = getValueUnit(value);
+export function isPhysicalUnit(value) {
+  const units = getValueUnit(value);
 
-  if (!unit) return false;
+  if (!units) return false;
 
-  const unitIsPhysical = Object.values(physicalUnits).includes(unit);
+  const unitIsPhysical = Object.values(physicalUnits).some((unit) =>
+    units.find((match) => match.includes(unit)),
+  );
 
   return unitIsPhysical;
 }
-
-module.exports = {
-  getValueUnit,
-  isPhysicalUnit,
-};

package/src/utils/isPhysicalValue.js

@@ -1,6 +1,6 @@
-const { physicalAxis, physicalValues } = require('./physical');
+import { physicalAxis, physicalValues } from './physical.js';
 
-function isPhysicalValue(value) {
+export function isPhysicalValue(value) {
   const values = [
     ...Object.values(physicalValues),
     ...Object.values(physicalAxis),
@@ -10,7 +10,3 @@ function isPhysicalValue(value) {
 
   return valueIsPhysical;
 }
-
-module.exports = {
-  isPhysicalValue,
-};

package/src/utils/logical.js

@@ -1,14 +1,14 @@
-const logicalAxis = Object.freeze({
+export const logicalAxis = Object.freeze({
   block: 'block',
   inline: 'inline',
 });
 
-const logicalInlinePoints = Object.freeze({
+export const logicalInlinePoints = Object.freeze({
   end: 'end',
   start: 'start',
 });
 
-const logicalProperties = Object.freeze({
+export const logicalProperties = Object.freeze({
   blockSize: 'block-size',
   borderBlock: 'border-block',
   borderBlockColor: 'border-block-color',
@@ -85,7 +85,7 @@ const logicalProperties = Object.freeze({
   scrollPaddingInlineStart: 'scroll-padding-inline-start',
 });
 
-const logicalUnits = Object.freeze({
+export const logicalUnits = Object.freeze({
   cqb: 'cqb',
   cqi: 'cqi',
   dvb: 'dvb',
@@ -98,17 +98,9 @@ const logicalUnits = Object.freeze({
   vi: 'vi',
 });
 
-const logicalValues = Object.freeze({
+export const logicalValues = Object.freeze({
   blockEnd: 'block-end',
   blockStart: 'block-start',
   inlineEnd: 'inline-end',
   inlineStart: 'inline-start',
 });
-
-module.exports = {
-  logicalAxis,
-  logicalInlinePoints,
-  logicalProperties,
-  logicalUnits,
-  logicalValues,
-};

package/src/utils/physical.js

@@ -1,11 +1,11 @@
-const physicalAxis = Object.freeze({
+export const physicalAxis = Object.freeze({
   horizontal: 'horizontal',
   vertical: 'vertical',
   x: 'x',
   y: 'y',
 });
 
-const physicalProperties = Object.freeze({
+export const physicalProperties = Object.freeze({
   borderBottom: 'border-bottom',
   borderBottomColor: 'border-bottom-color',
   borderBottomLeftRadius: 'border-bottom-left-radius',
@@ -66,7 +66,7 @@ const physicalProperties = Object.freeze({
   width: 'width',
 });
 
-const physicalUnits = Object.freeze({
+export const physicalUnits = Object.freeze({
   cqh: 'cqh',
   cqw: 'cqw',
   dvh: 'dvh',
@@ -79,16 +79,9 @@ const physicalUnits = Object.freeze({
   vw: 'vw',
 });
 
-const physicalValues = Object.freeze({
+export const physicalValues = Object.freeze({
   bottom: 'bottom',
   left: 'left',
   right: 'right',
   top: 'top',
 });
-
-module.exports = {
-  physicalAxis,
-  physicalProperties,
-  physicalUnits,
-  physicalValues,
-};

package/src/utils/physicalPropertiesMap.js

@@ -1,7 +1,7 @@
-const { logicalProperties } = require('./logical');
-const { physicalProperties } = require('./physical');
+import { logicalProperties } from './logical.js';
+import { physicalProperties } from './physical.js';
 
-const physicalPropertiesMap = Object.freeze({
+export const physicalPropertiesMap = Object.freeze({
   [physicalProperties.borderBottom]: logicalProperties.borderBlockEnd,
   [physicalProperties.borderBottomColor]: logicalProperties.borderBlockEndColor,
   [physicalProperties.borderBottomLeftRadius]:
@@ -74,7 +74,3 @@ const physicalPropertiesMap = Object.freeze({
   [physicalProperties.top]: logicalProperties.insetBlockStart,
   [physicalProperties.width]: logicalProperties.inlineSize,
 });
-
-module.exports = {
-  physicalPropertiesMap,
-};

package/src/utils/physicalUnitsMap.js

@@ -1,7 +1,7 @@
-const { logicalUnits } = require('./logical');
-const { physicalUnits } = require('./physical');
+import { logicalUnits } from './logical.js';
+import { physicalUnits } from './physical.js';
 
-const physicalUnitsMap = Object.freeze({
+export const physicalUnitsMap = Object.freeze({
   [physicalUnits.cqh]: logicalUnits.cqb,
   [physicalUnits.cqw]: logicalUnits.cqi,
   [physicalUnits.dvh]: logicalUnits.dvb,
@@ -13,7 +13,3 @@ const physicalUnitsMap = Object.freeze({
   [physicalUnits.vh]: logicalUnits.vb,
   [physicalUnits.vw]: logicalUnits.vi,
 });
-
-module.exports = {
-  physicalUnitsMap,
-};

package/src/utils/physicalValuesMap.js

@@ -1,15 +1,11 @@
-const {
-  logicalAxis,
-  logicalInlinePoints,
-  logicalValues,
-} = require('./logical');
-const {
+import { logicalAxis, logicalInlinePoints, logicalValues } from './logical.js';
+import {
   physicalAxis,
   physicalProperties,
   physicalValues,
-} = require('./physical');
+} from './physical.js';
 
-const physicalValuesMap = Object.freeze({
+export const physicalValuesMap = Object.freeze({
   [physicalProperties.boxOrient]: {
     [physicalAxis.horizontal]: `${logicalAxis.inline}-axis`,
     [physicalAxis.vertical]: `${logicalAxis.block}-axis`,
@@ -37,7 +33,3 @@ const physicalValuesMap = Object.freeze({
     [physicalValues.right]: logicalInlinePoints.end,
   },
 });
-
-module.exports = {
-  physicalValuesMap,
-};

package/src/utils/vendorPrefixes.js

@@ -1,3 +1 @@
-const vendorPrefixes = ['-webkit-', '-moz-', '-o-', '-ms-'];
-
-module.exports = { vendorPrefixes };
+export const vendorPrefixes = ['-webkit-', '-moz-', '-o-', '-ms-'];