stylelint-plugin-logical-css 0.0.5 → 0.1.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md CHANGED
@@ -1,11 +1,101 @@
1
- # Stylelint Plugin Logical CSS
1
+ # 🚀 Stylelint Plugin Logical CSS
2
2
 
3
- Proper docs to come, but this plugin will expose two rules:
3
+ ![License](https://img.shields.io/github/license/yuschick/stylelint-plugin-logical-css?style=for-the-badge)
4
+ ![NPM Version](https://img.shields.io/npm/v/stylelint-plugin-logical-css?style=for-the-badge)
5
+ ![Main Workflow Status](https://img.shields.io/github/actions/workflow/status/yuschick/stylelint-plugin-logical-css/main.yaml?style=for-the-badge)
4
6
 
5
- - `use-logical-properties-and-values`
7
+ Stylelint Plugin Logical CSS aims to enforce the use of logical CSS properties,
8
+ values and units. The plugin provides two rules. But first, let's get set up.
6
9
 
7
- This rule will enforce the use of logical properties and values
10
+ > [Read more about Logical CSS on MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Logical_Properties)
8
11
 
9
- - `use-logical-units`
12
+ ## Getting Started
10
13
 
11
- This rule will enforce the use of logical viewport units
14
+ > Before getting started with the plugin, you must first have
15
+ > [Stylelint](https://stylelint.io/) version 14.0.0 or greater installed
16
+
17
+ To get started using the plugin, it must first be installed.
18
+
19
+ ```bash
20
+ npm i stylelint-plugin-logical-css --save-dev
21
+ ```
22
+
23
+ ```bash
24
+ yarn add stylelint-plugin-logical-css --dev
25
+ ```
26
+
27
+ With the plugin installed, the rule(s) can now be added to the project's
28
+ Stylelint configuration.
29
+
30
+ ```json
31
+ {
32
+ "plugins": ["stylelint-plugin-logical-css"],
33
+ "rules": {
34
+ "plugin/use-logical-properties-and-values": [
35
+ true,
36
+ { "severity": "warning" }
37
+ ],
38
+ "plugin/use-logical-units": [true, { "severity": "warning" }]
39
+ }
40
+ }
41
+ ```
42
+
43
+ ## Rules
44
+
45
+ Let's explore each rule to better understand what it does, and does not, allow.
46
+
47
+ ### `plugin/use-logical-properties-and-values`
48
+
49
+ > ➟
50
+ > [Learn more about the properties and values supported by this rule](./src/rules/use-logical-properties-and-values)
51
+
52
+ This rule is responsible for checking both CSS properties and values. When a
53
+ physical property or value is found, it will be flagged.
54
+
55
+ #### Not Allowed
56
+
57
+ ```css
58
+ .heading {
59
+ max-width: 90ch; /* Will flag the use of "width" */
60
+ text-align: left; /* Will flag the use of "left" */
61
+ }
62
+ ```
63
+
64
+ #### Allowed
65
+
66
+ ```css
67
+ .heading {
68
+ max-inline-size: 90ch;
69
+ text-align: start;
70
+ }
71
+ ```
72
+
73
+ ### `plugin/use-logical-units`
74
+
75
+ > ➟
76
+ > [Learn more about the properties and values supported by this rule](./src/rules/use-logical-units)
77
+
78
+ > Read about current
79
+ > [browser support for logical viewport units](https://caniuse.com/mdn-css_types_length_viewport_percentage_units_dynamic).
80
+
81
+ This rule is responsible for checking that logical CSS units are used.
82
+ Specifically, viewport units like `vw` and `vh` which stand for viewport width
83
+ and viewport height respectively will not reflect different writing modes and
84
+ directions. Instead, this rule will enforce the logical equivalents, `vi` and
85
+ `vb`.
86
+
87
+ #### Not Allowed
88
+
89
+ ```css
90
+ body {
91
+ max-block-size: 100vh; /* Will flag the physical use of viewport "height" */
92
+ }
93
+ ```
94
+
95
+ #### Allowed
96
+
97
+ ```css
98
+ body {
99
+ max-block-size: 100vb;
100
+ }
101
+ ```
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "stylelint-plugin-logical-css",
3
- "version": "0.0.5",
3
+ "version": "0.1.1",
4
4
  "description": "A Stylelint plugin to enforce the use of logical CSS properties, values and units.",
5
5
  "main": "src/index.js",
6
6
  "files": [
@@ -8,6 +8,7 @@
8
8
  "!**/**/*.test.js"
9
9
  ],
10
10
  "scripts": {
11
+ "prepare": "husky install",
11
12
  "test": "jest"
12
13
  },
13
14
  "repository": {
@@ -35,9 +36,22 @@
35
36
  "stylelint": "^14.0.0 || ^15.0.0"
36
37
  },
37
38
  "devDependencies": {
39
+ "@commitlint/cli": "^17.4.4",
40
+ "@commitlint/config-conventional": "^17.4.4",
41
+ "eslint": "^8.35.0",
42
+ "husky": "^8.0.0",
38
43
  "jest": "^29.4.3",
39
44
  "jest-cli": "^29.4.3",
40
45
  "jest-preset-stylelint": "^6.1.0",
46
+ "lint-staged": "^13.1.2",
47
+ "prettier": "^2.8.4",
48
+ "prettier-eslint": "^15.0.1",
41
49
  "stylelint": "^15.2.0"
50
+ },
51
+ "lint-staged": {
52
+ "**/*.{js|md}": [
53
+ "eslint",
54
+ "prettier --write"
55
+ ]
42
56
  }
43
57
  }
package/src/index.js CHANGED
@@ -1,4 +1,4 @@
1
- const useLogicalPropertiesAndValues = require("./rules/use-logical-properties-and-values");
2
- const useLogicalUnits = require("./rules/use-logical-units");
1
+ const useLogicalPropertiesAndValues = require('./rules/use-logical-properties-and-values');
2
+ const useLogicalUnits = require('./rules/use-logical-units');
3
3
 
4
4
  module.exports = [useLogicalPropertiesAndValues, useLogicalUnits];
@@ -1,8 +1,8 @@
1
- "use strict";
1
+ 'use strict';
2
2
 
3
- const stylelint = require("stylelint");
3
+ const stylelint = require('stylelint');
4
4
 
5
- const ruleName = "plugin/use-logical-properties-and-values";
5
+ const ruleName = 'plugin/use-logical-properties-and-values';
6
6
 
7
7
  const ruleMessages = stylelint.utils.ruleMessages(ruleName, {
8
8
  unexpectedProp(physicalProperty, logicalProperty) {
@@ -14,7 +14,7 @@ const ruleMessages = stylelint.utils.ruleMessages(ruleName, {
14
14
  });
15
15
 
16
16
  const ruleMeta = {
17
- url: "https://github.com/yuschick/stylelint-plugin-logical-css",
17
+ url: 'https://github.com/yuschick/stylelint-plugin-logical-css',
18
18
  };
19
19
 
20
20
  module.exports = {
@@ -1,16 +1,22 @@
1
- "use strict";
1
+ 'use strict';
2
2
 
3
- const stylelint = require("stylelint");
3
+ const stylelint = require('stylelint');
4
4
 
5
- const { ruleName, ruleMessages, ruleMeta } = require("./base");
6
- const { isPhysicalProperty } = require("../../utils/isPhysicalProperty");
7
- const { isPhysicalValue } = require("../../utils/isPhysicalValue");
8
- const { physicalPropertiesMap } = require("../../utils/physicalPropertiesMap");
9
- const { physicalValuesMap } = require("../../utils/physicalValuesMap");
5
+ const { ruleName, ruleMessages, ruleMeta } = require('./base');
6
+ const { isPhysicalProperty } = require('../../utils/isPhysicalProperty');
7
+ const { isPhysicalValue } = require('../../utils/isPhysicalValue');
8
+ const { physicalPropertiesMap } = require('../../utils/physicalPropertiesMap');
9
+ const { physicalValuesMap } = require('../../utils/physicalValuesMap');
10
10
 
11
- const ruleFunction = () => {
11
+ const ruleFunction = (_, options, context) => {
12
12
  return (root, result) => {
13
- const validOptions = stylelint.utils.validateOptions(result, ruleName);
13
+ const validOptions = stylelint.utils.validateOptions(result, ruleName, [
14
+ {
15
+ action: 'enableAutoFix',
16
+ possible: [true, false],
17
+ optional: true,
18
+ },
19
+ ]);
14
20
 
15
21
  if (!validOptions) {
16
22
  return;
@@ -25,14 +31,26 @@ const ruleFunction = () => {
25
31
  const message = propIsPhysical
26
32
  ? ruleMessages.unexpectedProp(
27
33
  decl.prop,
28
- physicalPropertiesMap[decl.prop]
34
+ physicalPropertiesMap[decl.prop],
29
35
  )
30
36
  : ruleMessages.unexpectedValue(
31
37
  decl.prop,
32
38
  decl.value,
33
- physicalValuesMap[decl.prop][decl.value]
39
+ physicalValuesMap[decl.prop][decl.value],
34
40
  );
35
41
 
42
+ if (context.fix && options.enableAutoFix) {
43
+ if (propIsPhysical) {
44
+ decl.prop = physicalPropertiesMap[decl.prop];
45
+ }
46
+
47
+ if (valueIsPhysical) {
48
+ decl.value = physicalValuesMap[decl.value];
49
+ }
50
+
51
+ return;
52
+ }
53
+
36
54
  stylelint.utils.report({
37
55
  message,
38
56
  node: decl,
@@ -1,8 +1,8 @@
1
- "use strict";
1
+ 'use strict';
2
2
 
3
- const stylelint = require("stylelint");
3
+ const stylelint = require('stylelint');
4
4
 
5
- const ruleName = "plugin/use-logical-units";
5
+ const ruleName = 'plugin/use-logical-units';
6
6
 
7
7
  const ruleMessages = stylelint.utils.ruleMessages(ruleName, {
8
8
  unexpectedUnit(physicalUnit, logicalUnit) {
@@ -11,7 +11,7 @@ const ruleMessages = stylelint.utils.ruleMessages(ruleName, {
11
11
  });
12
12
 
13
13
  const ruleMeta = {
14
- url: "https://github.com/yuschick/stylelint-plugin-logical-css",
14
+ url: 'https://github.com/yuschick/stylelint-plugin-logical-css',
15
15
  };
16
16
 
17
17
  module.exports = {
@@ -1,10 +1,10 @@
1
- "use strict";
1
+ 'use strict';
2
2
 
3
- const stylelint = require("stylelint");
3
+ const stylelint = require('stylelint');
4
4
 
5
- const { ruleName, ruleMessages, ruleMeta } = require("./base");
6
- const { getValueUnit, isPhysicalUnit } = require("../../utils/isPhysicalUnit");
7
- const { physicalUnitsMap } = require("../../utils/physicalUnitsMap");
5
+ const { ruleName, ruleMessages, ruleMeta } = require('./base');
6
+ const { getValueUnit, isPhysicalUnit } = require('../../utils/isPhysicalUnit');
7
+ const { physicalUnitsMap } = require('../../utils/physicalUnitsMap');
8
8
 
9
9
  const ruleFunction = () => {
10
10
  return (root, result) => {
@@ -22,7 +22,7 @@ const ruleFunction = () => {
22
22
  const physicalUnit = getValueUnit(decl.value);
23
23
  const message = ruleMessages.unexpectedUnit(
24
24
  physicalUnit,
25
- physicalUnitsMap[physicalUnit]
25
+ physicalUnitsMap[physicalUnit],
26
26
  );
27
27
 
28
28
  stylelint.utils.report({
@@ -1,4 +1,4 @@
1
- const { physicalPropertiesMap } = require("./physicalPropertiesMap");
1
+ const { physicalPropertiesMap } = require('./physicalPropertiesMap');
2
2
 
3
3
  function isPhysicalProperty(property) {
4
4
  const physicalProperties = Object.keys(physicalPropertiesMap);
@@ -1,4 +1,4 @@
1
- const { physicalUnits } = require("./physical");
1
+ const { physicalUnits } = require('./physical');
2
2
 
3
3
  const expression = /(\d+\s?)(dvh|dvw|lvh|lvw|svh|svw|vh|vw|)(\s+|$)/;
4
4
 
@@ -8,7 +8,7 @@ function getValueUnit(value) {
8
8
  if (!match) return false;
9
9
 
10
10
  const matchedUnit = match.find((item) =>
11
- Object.values(physicalUnits).includes(item)
11
+ Object.values(physicalUnits).includes(item),
12
12
  );
13
13
 
14
14
  return matchedUnit;
@@ -1,4 +1,4 @@
1
- const { physicalAxis, physicalValues } = require("./physical");
1
+ const { physicalAxis, physicalValues } = require('./physical');
2
2
 
3
3
  function isPhysicalValue(value) {
4
4
  const values = [
@@ -1,92 +1,94 @@
1
1
  const logicalAxis = Object.freeze({
2
- block: "block",
3
- inline: "inline",
2
+ block: 'block',
3
+ inline: 'inline',
4
4
  });
5
5
 
6
6
  const logicalInlinePoints = Object.freeze({
7
- end: "end",
8
- start: "start",
7
+ end: 'end',
8
+ start: 'start',
9
9
  });
10
10
 
11
11
  const logicalProperties = Object.freeze({
12
- blockSize: "block-size",
13
- borderBlock: "border-block",
14
- borderBlockColor: "border-block-color",
15
- borderBlockEnd: "border-block-end",
16
- borderBlockEndColor: "border-block-end-color",
17
- borderBlockEndStyle: "border-block-end-style",
18
- borderBlockEndWidth: "border-block-end-width",
19
- borderBlockStart: "border-block-start",
20
- borderBlockStartColor: "border-block-start-color",
21
- borderBlockStartStyle: "border-block-start-style",
22
- borderBlockStartWidth: "border-block-start-width",
23
- borderBlockStyle: "border-block-style",
24
- borderBlockWidth: "border-block-width",
25
- borderColor: "border-color",
26
- borderEndEndRadius: "border-end-end-radius",
27
- borderEndStartRadius: "border-end-start-radius",
28
- borderInline: "border-inline",
29
- borderInlineColor: "border-inline-color",
30
- borderInlineEnd: "border-inline-end",
31
- borderInlineEndColor: "border-inline-end-color",
32
- borderInlineEndStyle: "border-inline-end-style",
33
- borderInlineEndWidth: "border-inline-end-width",
34
- borderInlineStart: "border-inline-start",
35
- borderInlineStartColor: "border-inline-start-color",
36
- borderInlineStartStyle: "border-inline-start-style",
37
- borderInlineStartWidth: "border-inline-start-width",
38
- borderInlineStyle: "border-inline-style",
39
- borderInlineWidth: "border-inline-width",
40
- borderStartEndRadius: "border-start-end-radius",
41
- borderStartStartRadius: "border-start-start-radius",
42
- borderStyle: "border-style",
43
- borderWidth: "border-width",
44
- inlineSize: "inline-size",
45
- inset: "inset",
46
- insetBlock: "inset-block",
47
- insetBlockEnd: "inset-block-end",
48
- insetBlockStart: "inset-block-start",
49
- insetInline: "inset-inline",
50
- insetInlineEnd: "inset-inline-end",
51
- insetInlineStart: "inset-inline-start",
52
- marginBlock: "margin-block",
53
- marginBlockEnd: "margin-block-end",
54
- marginBlockStart: "margin-block-start",
55
- marginInline: "margin-inline",
56
- marginInlineEnd: "margin-inline-end",
57
- marginInlineStart: "margin-inline-start",
58
- maxBlockSize: "max-block-size",
59
- maxInlineSize: "max-inline-size",
60
- minBlockSize: "min-block-size",
61
- minInlineSize: "min-inline-size",
62
- overflowBlock: "overflow-block",
63
- overflowInline: "overflow-inline",
64
- overscrollBehaviorBlock: "overscroll-behavior-block",
65
- overscrollBehaviorInline: "overscroll-behavior-inline",
66
- paddingBlock: "padding-block",
67
- paddingBlockEnd: "padding-block-end",
68
- paddingBlockStart: "padding-block-start",
69
- paddingInline: "padding-inline",
70
- paddingInlineEnd: "padding-inline-end",
71
- paddingInlineStart: "padding-inline-start",
12
+ blockSize: 'block-size',
13
+ borderBlock: 'border-block',
14
+ borderBlockColor: 'border-block-color',
15
+ borderBlockEnd: 'border-block-end',
16
+ borderBlockEndColor: 'border-block-end-color',
17
+ borderBlockEndStyle: 'border-block-end-style',
18
+ borderBlockEndWidth: 'border-block-end-width',
19
+ borderBlockStart: 'border-block-start',
20
+ borderBlockStartColor: 'border-block-start-color',
21
+ borderBlockStartStyle: 'border-block-start-style',
22
+ borderBlockStartWidth: 'border-block-start-width',
23
+ borderBlockStyle: 'border-block-style',
24
+ borderBlockWidth: 'border-block-width',
25
+ borderColor: 'border-color',
26
+ borderEndEndRadius: 'border-end-end-radius',
27
+ borderEndStartRadius: 'border-end-start-radius',
28
+ borderInline: 'border-inline',
29
+ borderInlineColor: 'border-inline-color',
30
+ borderInlineEnd: 'border-inline-end',
31
+ borderInlineEndColor: 'border-inline-end-color',
32
+ borderInlineEndStyle: 'border-inline-end-style',
33
+ borderInlineEndWidth: 'border-inline-end-width',
34
+ borderInlineStart: 'border-inline-start',
35
+ borderInlineStartColor: 'border-inline-start-color',
36
+ borderInlineStartStyle: 'border-inline-start-style',
37
+ borderInlineStartWidth: 'border-inline-start-width',
38
+ borderInlineStyle: 'border-inline-style',
39
+ borderInlineWidth: 'border-inline-width',
40
+ borderStartEndRadius: 'border-start-end-radius',
41
+ borderStartStartRadius: 'border-start-start-radius',
42
+ borderStyle: 'border-style',
43
+ borderWidth: 'border-width',
44
+ containIntrinsicBlockSize: 'contain-intrinsic-block-size',
45
+ containIntrinsicInlineSize: 'contain-intrinsic-inline-size',
46
+ inlineSize: 'inline-size',
47
+ inset: 'inset',
48
+ insetBlock: 'inset-block',
49
+ insetBlockEnd: 'inset-block-end',
50
+ insetBlockStart: 'inset-block-start',
51
+ insetInline: 'inset-inline',
52
+ insetInlineEnd: 'inset-inline-end',
53
+ insetInlineStart: 'inset-inline-start',
54
+ marginBlock: 'margin-block',
55
+ marginBlockEnd: 'margin-block-end',
56
+ marginBlockStart: 'margin-block-start',
57
+ marginInline: 'margin-inline',
58
+ marginInlineEnd: 'margin-inline-end',
59
+ marginInlineStart: 'margin-inline-start',
60
+ maxBlockSize: 'max-block-size',
61
+ maxInlineSize: 'max-inline-size',
62
+ minBlockSize: 'min-block-size',
63
+ minInlineSize: 'min-inline-size',
64
+ overflowBlock: 'overflow-block',
65
+ overflowInline: 'overflow-inline',
66
+ overscrollBehaviorBlock: 'overscroll-behavior-block',
67
+ overscrollBehaviorInline: 'overscroll-behavior-inline',
68
+ paddingBlock: 'padding-block',
69
+ paddingBlockEnd: 'padding-block-end',
70
+ paddingBlockStart: 'padding-block-start',
71
+ paddingInline: 'padding-inline',
72
+ paddingInlineEnd: 'padding-inline-end',
73
+ paddingInlineStart: 'padding-inline-start',
72
74
  });
73
75
 
74
76
  const logicalUnits = Object.freeze({
75
- dvb: "dvb",
76
- dvi: "dvi",
77
- lvb: "lvb",
78
- lvi: "lvi",
79
- svb: "svb",
80
- svi: "svi",
81
- vb: "vb",
82
- vi: "vi",
77
+ dvb: 'dvb',
78
+ dvi: 'dvi',
79
+ lvb: 'lvb',
80
+ lvi: 'lvi',
81
+ svb: 'svb',
82
+ svi: 'svi',
83
+ vb: 'vb',
84
+ vi: 'vi',
83
85
  });
84
86
 
85
87
  const logicalValues = Object.freeze({
86
- blockEnd: "block-end",
87
- blockStart: "block-start",
88
- inlineEnd: "inline-end",
89
- inlineStart: "inline-start",
88
+ blockEnd: 'block-end',
89
+ blockStart: 'block-start',
90
+ inlineEnd: 'inline-end',
91
+ inlineStart: 'inline-start',
90
92
  });
91
93
 
92
94
  module.exports = {
@@ -1,76 +1,78 @@
1
1
  const physicalAxis = Object.freeze({
2
- horizontal: "horizontal",
3
- vertical: "vertical",
4
- x: "x",
5
- y: "y",
2
+ horizontal: 'horizontal',
3
+ vertical: 'vertical',
4
+ x: 'x',
5
+ y: 'y',
6
6
  });
7
7
 
8
8
  const physicalProperties = Object.freeze({
9
- borderBottom: "border-bottom",
10
- borderBottomColor: "border-bottom-color",
11
- borderBottomLeftRadius: "border-bottom-left-radius",
12
- borderBottomRightRadius: "border-bottom-right-radius",
13
- borderBottomStyle: "border-bottom-style",
14
- borderBottomWidth: "border-bottom-width",
15
- borderLeft: "border-left",
16
- borderLeftColor: "border-left-color",
17
- borderLeftStyle: "border-left-style",
18
- borderLeftWidth: "border-left-width",
19
- borderRight: "border-right",
20
- borderRightColor: "border-right-color",
21
- borderRightStyle: "border-right-style",
22
- borderRightWidth: "border-right-width",
23
- borderTop: "border-top",
24
- borderTopColor: "border-top-color",
25
- borderTopLeftRadius: "border-top-left-radius",
26
- borderTopRightRadius: "border-top-right-radius",
27
- borderTopStyle: "border-top-style",
28
- borderTopWidth: "border-top-width",
29
- bottom: "bottom",
30
- captionSide: "caption-side",
31
- clear: "clear",
32
- float: "float",
33
- height: "height",
34
- left: "left",
35
- marginBottom: "margin-bottom",
36
- marginLeft: "margin-left",
37
- marginRight: "margin-right",
38
- marginTop: "margin-top",
39
- maxHeight: "max-height",
40
- maxWidth: "max-width",
41
- minHeight: "min-height",
42
- minWidth: "min-width",
43
- overflowX: "overflow-x",
44
- overflowY: "overflow-y",
45
- overscrollBehaviorX: "overscroll-behavior-x",
46
- overscrollBehaviorY: "overscroll-behavior-y",
47
- paddingBottom: "padding-bottom",
48
- paddingLeft: "padding-left",
49
- paddingRight: "padding-right",
50
- paddingTop: "padding-top",
51
- resize: "resize",
52
- right: "right",
53
- textAlign: "text-align",
54
- top: "top",
55
- width: "width",
9
+ borderBottom: 'border-bottom',
10
+ borderBottomColor: 'border-bottom-color',
11
+ borderBottomLeftRadius: 'border-bottom-left-radius',
12
+ borderBottomRightRadius: 'border-bottom-right-radius',
13
+ borderBottomStyle: 'border-bottom-style',
14
+ borderBottomWidth: 'border-bottom-width',
15
+ borderLeft: 'border-left',
16
+ borderLeftColor: 'border-left-color',
17
+ borderLeftStyle: 'border-left-style',
18
+ borderLeftWidth: 'border-left-width',
19
+ borderRight: 'border-right',
20
+ borderRightColor: 'border-right-color',
21
+ borderRightStyle: 'border-right-style',
22
+ borderRightWidth: 'border-right-width',
23
+ borderTop: 'border-top',
24
+ borderTopColor: 'border-top-color',
25
+ borderTopLeftRadius: 'border-top-left-radius',
26
+ borderTopRightRadius: 'border-top-right-radius',
27
+ borderTopStyle: 'border-top-style',
28
+ borderTopWidth: 'border-top-width',
29
+ bottom: 'bottom',
30
+ captionSide: 'caption-side',
31
+ clear: 'clear',
32
+ containIntrinsicHeight: 'contain-intrinsic-height',
33
+ containIntrinsicWidth: 'contain-intrinsic-width',
34
+ float: 'float',
35
+ height: 'height',
36
+ left: 'left',
37
+ marginBottom: 'margin-bottom',
38
+ marginLeft: 'margin-left',
39
+ marginRight: 'margin-right',
40
+ marginTop: 'margin-top',
41
+ maxHeight: 'max-height',
42
+ maxWidth: 'max-width',
43
+ minHeight: 'min-height',
44
+ minWidth: 'min-width',
45
+ overflowX: 'overflow-x',
46
+ overflowY: 'overflow-y',
47
+ overscrollBehaviorX: 'overscroll-behavior-x',
48
+ overscrollBehaviorY: 'overscroll-behavior-y',
49
+ paddingBottom: 'padding-bottom',
50
+ paddingLeft: 'padding-left',
51
+ paddingRight: 'padding-right',
52
+ paddingTop: 'padding-top',
53
+ resize: 'resize',
54
+ right: 'right',
55
+ textAlign: 'text-align',
56
+ top: 'top',
57
+ width: 'width',
56
58
  });
57
59
 
58
60
  const physicalUnits = Object.freeze({
59
- dvh: "dvh",
60
- dvw: "dvw",
61
- lvh: "lvh",
62
- lvw: "lvw",
63
- svh: "svh",
64
- svw: "svw",
65
- vh: "vh",
66
- vw: "vw",
61
+ dvh: 'dvh',
62
+ dvw: 'dvw',
63
+ lvh: 'lvh',
64
+ lvw: 'lvw',
65
+ svh: 'svh',
66
+ svw: 'svw',
67
+ vh: 'vh',
68
+ vw: 'vw',
67
69
  });
68
70
 
69
71
  const physicalValues = Object.freeze({
70
- bottom: "bottom",
71
- left: "left",
72
- right: "right",
73
- top: "top",
72
+ bottom: 'bottom',
73
+ left: 'left',
74
+ right: 'right',
75
+ top: 'top',
74
76
  });
75
77
 
76
78
  module.exports = {
@@ -1,5 +1,5 @@
1
- const { logicalProperties } = require("./logical");
2
- const { physicalProperties } = require("./physical");
1
+ const { logicalProperties } = require('./logical');
2
+ const { physicalProperties } = require('./physical');
3
3
 
4
4
  const physicalPropertiesMap = Object.freeze({
5
5
  [physicalProperties.borderBottom]: logicalProperties.borderBlockEnd,
@@ -30,6 +30,10 @@ const physicalPropertiesMap = Object.freeze({
30
30
  [physicalProperties.borderTopStyle]: logicalProperties.borderBlockStartStyle,
31
31
  [physicalProperties.borderTopWidth]: logicalProperties.borderBlockStartWidth,
32
32
  [physicalProperties.bottom]: logicalProperties.insetBlockEnd,
33
+ [physicalProperties.containIntrinsicHeight]:
34
+ logicalProperties.containIntrinsicBlockSize,
35
+ [physicalProperties.containIntrinsicWidth]:
36
+ logicalProperties.containIntrinsicInlineSize,
33
37
  [physicalProperties.height]: logicalProperties.blockSize,
34
38
  [physicalProperties.left]: logicalProperties.insetInlineStart,
35
39
  [physicalProperties.marginBottom]: logicalProperties.marginBlockEnd,
@@ -1,5 +1,5 @@
1
- const { logicalUnits } = require("./logical");
2
- const { physicalUnits } = require("./physical");
1
+ const { logicalUnits } = require('./logical');
2
+ const { physicalUnits } = require('./physical');
3
3
 
4
4
  const physicalUnitsMap = Object.freeze({
5
5
  [physicalUnits.dvh]: logicalUnits.dvb,
@@ -2,12 +2,12 @@ const {
2
2
  logicalAxis,
3
3
  logicalInlinePoints,
4
4
  logicalValues,
5
- } = require("./logical");
5
+ } = require('./logical');
6
6
  const {
7
7
  physicalAxis,
8
8
  physicalProperties,
9
9
  physicalValues,
10
- } = require("./physical");
10
+ } = require('./physical');
11
11
 
12
12
  const physicalValuesMap = Object.freeze({
13
13
  [physicalProperties.captionSide]: {