stylelint-plugin-logical-css 0.13.2 → 1.0.0
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/package.json +28 -19
- package/src/index.js +3 -3
- package/src/rules/use-logical-properties-and-values/base.js +4 -12
- package/src/rules/use-logical-properties-and-values/index.js +9 -11
- package/src/rules/use-logical-units/base.js +4 -12
- package/src/rules/use-logical-units/index.js +5 -7
- package/src/utils/isPhysicalProperty.js +2 -6
- package/src/utils/isPhysicalUnit.js +3 -8
- package/src/utils/isPhysicalValue.js +2 -6
- package/src/utils/logical.js +5 -13
- package/src/utils/physical.js +4 -11
- package/src/utils/physicalPropertiesMap.js +3 -7
- package/src/utils/physicalUnitsMap.js +3 -7
- package/src/utils/physicalValuesMap.js +4 -12
- package/src/utils/vendorPrefixes.js +1 -3
package/package.json
CHANGED
|
@@ -1,15 +1,19 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "stylelint-plugin-logical-css",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "1.0.0",
|
|
4
4
|
"description": "A Stylelint plugin to enforce the use of logical CSS properties, values and units.",
|
|
5
5
|
"main": "src/index.js",
|
|
6
|
+
"type": "module",
|
|
7
|
+
"exports": "./src/index.js",
|
|
6
8
|
"files": [
|
|
7
9
|
"src/**/*.js",
|
|
8
10
|
"!**/**/*.test.js"
|
|
9
11
|
],
|
|
10
12
|
"scripts": {
|
|
11
13
|
"prepare": "husky install",
|
|
12
|
-
"
|
|
14
|
+
"jest": "cross-env NODE_OPTIONS=\"--experimental-vm-modules\" jest --runInBand",
|
|
15
|
+
"test": "npm run jest",
|
|
16
|
+
"test:watch": "npm run jest -- --watch"
|
|
13
17
|
},
|
|
14
18
|
"repository": {
|
|
15
19
|
"type": "git",
|
|
@@ -22,34 +26,39 @@
|
|
|
22
26
|
},
|
|
23
27
|
"homepage": "https://github.com/yuschick/stylelint-plugin-logical-css#readme",
|
|
24
28
|
"engines": {
|
|
25
|
-
"node": ">=
|
|
29
|
+
"node": ">=18.12.0"
|
|
26
30
|
},
|
|
27
31
|
"keywords": [
|
|
28
|
-
"
|
|
29
|
-
"
|
|
30
|
-
"
|
|
31
|
-
"
|
|
32
|
-
"
|
|
33
|
-
"
|
|
32
|
+
"css",
|
|
33
|
+
"csslint",
|
|
34
|
+
"internationalization",
|
|
35
|
+
"i18n",
|
|
36
|
+
"lint",
|
|
37
|
+
"linter",
|
|
38
|
+
"stylelint",
|
|
39
|
+
"stylelint-plugin",
|
|
40
|
+
"logical css"
|
|
34
41
|
],
|
|
35
42
|
"peerDependencies": {
|
|
36
|
-
"stylelint": "^14.0.0 || ^15.0.0"
|
|
43
|
+
"stylelint": "^14.0.0 || ^15.0.0 || ^16.0.0"
|
|
37
44
|
},
|
|
38
45
|
"devDependencies": {
|
|
39
|
-
"@commitlint/cli": "^
|
|
40
|
-
"@commitlint/config-conventional": "^
|
|
46
|
+
"@commitlint/cli": "^18.4.3",
|
|
47
|
+
"@commitlint/config-conventional": "^18.4.3",
|
|
48
|
+
"cross-env": "^7.0.3",
|
|
41
49
|
"eslint": "^8.35.0",
|
|
42
|
-
"husky": "^8.0.
|
|
50
|
+
"husky": "^8.0.3",
|
|
43
51
|
"jest": "^29.4.3",
|
|
44
52
|
"jest-cli": "^29.4.3",
|
|
45
|
-
"jest-
|
|
46
|
-
"
|
|
47
|
-
"
|
|
48
|
-
"prettier
|
|
49
|
-
"
|
|
53
|
+
"jest-light-runner": "^0.6.0",
|
|
54
|
+
"jest-preset-stylelint": "^7.0.0",
|
|
55
|
+
"lint-staged": "^15.0.2",
|
|
56
|
+
"prettier": "^3.0.3",
|
|
57
|
+
"prettier-eslint": "^16.1.2",
|
|
58
|
+
"stylelint": "^16.1.0"
|
|
50
59
|
},
|
|
51
60
|
"lint-staged": {
|
|
52
|
-
"**/*.
|
|
61
|
+
"**/*.js|md|json": [
|
|
53
62
|
"eslint",
|
|
54
63
|
"prettier --write"
|
|
55
64
|
]
|
package/src/index.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
1
|
+
import useLogicalPropertiesAndValues from './rules/use-logical-properties-and-values/index.js';
|
|
2
|
+
import useLogicalUnits from './rules/use-logical-units/index.js';
|
|
3
3
|
|
|
4
|
-
|
|
4
|
+
export default [useLogicalPropertiesAndValues, useLogicalUnits];
|
|
@@ -1,10 +1,8 @@
|
|
|
1
|
-
|
|
1
|
+
import stylelint from 'stylelint';
|
|
2
2
|
|
|
3
|
-
const
|
|
3
|
+
export const ruleName = 'plugin/use-logical-properties-and-values';
|
|
4
4
|
|
|
5
|
-
const
|
|
6
|
-
|
|
7
|
-
const ruleMessages = stylelint.utils.ruleMessages(ruleName, {
|
|
5
|
+
export const ruleMessages = stylelint.utils.ruleMessages(ruleName, {
|
|
8
6
|
unexpectedProp(physicalProperty, logicalProperty) {
|
|
9
7
|
return `Unexpected "${physicalProperty}" property. Use "${logicalProperty}".`;
|
|
10
8
|
},
|
|
@@ -16,12 +14,6 @@ const ruleMessages = stylelint.utils.ruleMessages(ruleName, {
|
|
|
16
14
|
},
|
|
17
15
|
});
|
|
18
16
|
|
|
19
|
-
const ruleMeta = {
|
|
17
|
+
export const ruleMeta = {
|
|
20
18
|
url: 'https://github.com/yuschick/stylelint-plugin-logical-css',
|
|
21
19
|
};
|
|
22
|
-
|
|
23
|
-
module.exports = {
|
|
24
|
-
ruleName,
|
|
25
|
-
ruleMessages,
|
|
26
|
-
ruleMeta,
|
|
27
|
-
};
|
|
@@ -1,14 +1,12 @@
|
|
|
1
|
-
|
|
1
|
+
import stylelint from 'stylelint';
|
|
2
2
|
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
const { physicalPropertiesMap } = require('../../utils/physicalPropertiesMap');
|
|
11
|
-
const { physicalValuesMap } = require('../../utils/physicalValuesMap');
|
|
3
|
+
import { ruleName, ruleMessages, ruleMeta } from './base.js';
|
|
4
|
+
import { vendorPrefixes } from '../../utils/vendorPrefixes.js';
|
|
5
|
+
import { physicalProperties } from '../../utils/physical.js';
|
|
6
|
+
import { isPhysicalProperty } from '../../utils/isPhysicalProperty.js';
|
|
7
|
+
import { isPhysicalValue } from '../../utils/isPhysicalValue.js';
|
|
8
|
+
import { physicalPropertiesMap } from '../../utils/physicalPropertiesMap.js';
|
|
9
|
+
import { physicalValuesMap } from '../../utils/physicalValuesMap.js';
|
|
12
10
|
|
|
13
11
|
const ruleFunction = (_, options, context) => {
|
|
14
12
|
return (root, result) => {
|
|
@@ -119,4 +117,4 @@ ruleFunction.ruleName = ruleName;
|
|
|
119
117
|
ruleFunction.messages = ruleMessages;
|
|
120
118
|
ruleFunction.meta = ruleMeta;
|
|
121
119
|
|
|
122
|
-
|
|
120
|
+
export default stylelint.createPlugin(ruleName, ruleFunction);
|
|
@@ -1,21 +1,13 @@
|
|
|
1
|
-
|
|
1
|
+
import stylelint from 'stylelint';
|
|
2
2
|
|
|
3
|
-
const
|
|
3
|
+
export const ruleName = 'plugin/use-logical-units';
|
|
4
4
|
|
|
5
|
-
const
|
|
6
|
-
|
|
7
|
-
const ruleMessages = stylelint.utils.ruleMessages(ruleName, {
|
|
5
|
+
export const ruleMessages = stylelint.utils.ruleMessages(ruleName, {
|
|
8
6
|
unexpectedUnit(physicalUnit, logicalUnit) {
|
|
9
7
|
return `Unexpected "${physicalUnit}" unit. Use "${logicalUnit}".`;
|
|
10
8
|
},
|
|
11
9
|
});
|
|
12
10
|
|
|
13
|
-
const ruleMeta = {
|
|
11
|
+
export const ruleMeta = {
|
|
14
12
|
url: 'https://github.com/yuschick/stylelint-plugin-logical-css',
|
|
15
13
|
};
|
|
16
|
-
|
|
17
|
-
module.exports = {
|
|
18
|
-
ruleName,
|
|
19
|
-
ruleMessages,
|
|
20
|
-
ruleMeta,
|
|
21
|
-
};
|
|
@@ -1,10 +1,8 @@
|
|
|
1
|
-
|
|
1
|
+
import stylelint from 'stylelint';
|
|
2
2
|
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
const { getValueUnit, isPhysicalUnit } = require('../../utils/isPhysicalUnit');
|
|
7
|
-
const { physicalUnitsMap } = require('../../utils/physicalUnitsMap');
|
|
3
|
+
import { ruleName, ruleMessages, ruleMeta } from './base.js';
|
|
4
|
+
import { getValueUnit, isPhysicalUnit } from '../../utils/isPhysicalUnit.js';
|
|
5
|
+
import { physicalUnitsMap } from '../../utils/physicalUnitsMap.js';
|
|
8
6
|
|
|
9
7
|
const ruleFunction = (_, options, context) => {
|
|
10
8
|
return (root, result) => {
|
|
@@ -56,4 +54,4 @@ ruleFunction.ruleName = ruleName;
|
|
|
56
54
|
ruleFunction.messages = ruleMessages;
|
|
57
55
|
ruleFunction.meta = ruleMeta;
|
|
58
56
|
|
|
59
|
-
|
|
57
|
+
export default stylelint.createPlugin(ruleName, ruleFunction);
|
|
@@ -1,13 +1,9 @@
|
|
|
1
|
-
|
|
1
|
+
import { physicalPropertiesMap } from './physicalPropertiesMap.js';
|
|
2
2
|
|
|
3
|
-
function isPhysicalProperty(property) {
|
|
3
|
+
export function isPhysicalProperty(property) {
|
|
4
4
|
const physicalProperties = Object.keys(physicalPropertiesMap);
|
|
5
5
|
|
|
6
6
|
const propIsPhysical = physicalProperties.includes(property);
|
|
7
7
|
|
|
8
8
|
return propIsPhysical;
|
|
9
9
|
}
|
|
10
|
-
|
|
11
|
-
module.exports = {
|
|
12
|
-
isPhysicalProperty,
|
|
13
|
-
};
|
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
|
|
1
|
+
import { physicalUnits } from './physical.js';
|
|
2
2
|
|
|
3
3
|
const expression = /(\d+\s?)(cqh|cqw|dvh|dvw|lvh|lvw|svh|svw|vh|vw|)(\s+|$)/;
|
|
4
4
|
|
|
5
|
-
function getValueUnit(value) {
|
|
5
|
+
export function getValueUnit(value) {
|
|
6
6
|
const match = value.match(expression);
|
|
7
7
|
|
|
8
8
|
if (!match) return false;
|
|
@@ -14,7 +14,7 @@ function getValueUnit(value) {
|
|
|
14
14
|
return matchedUnit;
|
|
15
15
|
}
|
|
16
16
|
|
|
17
|
-
function isPhysicalUnit(value) {
|
|
17
|
+
export function isPhysicalUnit(value) {
|
|
18
18
|
const unit = getValueUnit(value);
|
|
19
19
|
|
|
20
20
|
if (!unit) return false;
|
|
@@ -23,8 +23,3 @@ function isPhysicalUnit(value) {
|
|
|
23
23
|
|
|
24
24
|
return unitIsPhysical;
|
|
25
25
|
}
|
|
26
|
-
|
|
27
|
-
module.exports = {
|
|
28
|
-
getValueUnit,
|
|
29
|
-
isPhysicalUnit,
|
|
30
|
-
};
|
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
|
|
1
|
+
import { physicalAxis, physicalValues } from './physical.js';
|
|
2
2
|
|
|
3
|
-
function isPhysicalValue(value) {
|
|
3
|
+
export function isPhysicalValue(value) {
|
|
4
4
|
const values = [
|
|
5
5
|
...Object.values(physicalValues),
|
|
6
6
|
...Object.values(physicalAxis),
|
|
@@ -10,7 +10,3 @@ function isPhysicalValue(value) {
|
|
|
10
10
|
|
|
11
11
|
return valueIsPhysical;
|
|
12
12
|
}
|
|
13
|
-
|
|
14
|
-
module.exports = {
|
|
15
|
-
isPhysicalValue,
|
|
16
|
-
};
|
package/src/utils/logical.js
CHANGED
|
@@ -1,14 +1,14 @@
|
|
|
1
|
-
const logicalAxis = Object.freeze({
|
|
1
|
+
export const logicalAxis = Object.freeze({
|
|
2
2
|
block: 'block',
|
|
3
3
|
inline: 'inline',
|
|
4
4
|
});
|
|
5
5
|
|
|
6
|
-
const logicalInlinePoints = Object.freeze({
|
|
6
|
+
export const logicalInlinePoints = Object.freeze({
|
|
7
7
|
end: 'end',
|
|
8
8
|
start: 'start',
|
|
9
9
|
});
|
|
10
10
|
|
|
11
|
-
const logicalProperties = Object.freeze({
|
|
11
|
+
export const logicalProperties = Object.freeze({
|
|
12
12
|
blockSize: 'block-size',
|
|
13
13
|
borderBlock: 'border-block',
|
|
14
14
|
borderBlockColor: 'border-block-color',
|
|
@@ -85,7 +85,7 @@ const logicalProperties = Object.freeze({
|
|
|
85
85
|
scrollPaddingInlineStart: 'scroll-padding-inline-start',
|
|
86
86
|
});
|
|
87
87
|
|
|
88
|
-
const logicalUnits = Object.freeze({
|
|
88
|
+
export const logicalUnits = Object.freeze({
|
|
89
89
|
cqb: 'cqb',
|
|
90
90
|
cqi: 'cqi',
|
|
91
91
|
dvb: 'dvb',
|
|
@@ -98,17 +98,9 @@ const logicalUnits = Object.freeze({
|
|
|
98
98
|
vi: 'vi',
|
|
99
99
|
});
|
|
100
100
|
|
|
101
|
-
const logicalValues = Object.freeze({
|
|
101
|
+
export const logicalValues = Object.freeze({
|
|
102
102
|
blockEnd: 'block-end',
|
|
103
103
|
blockStart: 'block-start',
|
|
104
104
|
inlineEnd: 'inline-end',
|
|
105
105
|
inlineStart: 'inline-start',
|
|
106
106
|
});
|
|
107
|
-
|
|
108
|
-
module.exports = {
|
|
109
|
-
logicalAxis,
|
|
110
|
-
logicalInlinePoints,
|
|
111
|
-
logicalProperties,
|
|
112
|
-
logicalUnits,
|
|
113
|
-
logicalValues,
|
|
114
|
-
};
|
package/src/utils/physical.js
CHANGED
|
@@ -1,11 +1,11 @@
|
|
|
1
|
-
const physicalAxis = Object.freeze({
|
|
1
|
+
export const physicalAxis = Object.freeze({
|
|
2
2
|
horizontal: 'horizontal',
|
|
3
3
|
vertical: 'vertical',
|
|
4
4
|
x: 'x',
|
|
5
5
|
y: 'y',
|
|
6
6
|
});
|
|
7
7
|
|
|
8
|
-
const physicalProperties = Object.freeze({
|
|
8
|
+
export const physicalProperties = Object.freeze({
|
|
9
9
|
borderBottom: 'border-bottom',
|
|
10
10
|
borderBottomColor: 'border-bottom-color',
|
|
11
11
|
borderBottomLeftRadius: 'border-bottom-left-radius',
|
|
@@ -66,7 +66,7 @@ const physicalProperties = Object.freeze({
|
|
|
66
66
|
width: 'width',
|
|
67
67
|
});
|
|
68
68
|
|
|
69
|
-
const physicalUnits = Object.freeze({
|
|
69
|
+
export const physicalUnits = Object.freeze({
|
|
70
70
|
cqh: 'cqh',
|
|
71
71
|
cqw: 'cqw',
|
|
72
72
|
dvh: 'dvh',
|
|
@@ -79,16 +79,9 @@ const physicalUnits = Object.freeze({
|
|
|
79
79
|
vw: 'vw',
|
|
80
80
|
});
|
|
81
81
|
|
|
82
|
-
const physicalValues = Object.freeze({
|
|
82
|
+
export const physicalValues = Object.freeze({
|
|
83
83
|
bottom: 'bottom',
|
|
84
84
|
left: 'left',
|
|
85
85
|
right: 'right',
|
|
86
86
|
top: 'top',
|
|
87
87
|
});
|
|
88
|
-
|
|
89
|
-
module.exports = {
|
|
90
|
-
physicalAxis,
|
|
91
|
-
physicalProperties,
|
|
92
|
-
physicalUnits,
|
|
93
|
-
physicalValues,
|
|
94
|
-
};
|
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
1
|
+
import { logicalProperties } from './logical.js';
|
|
2
|
+
import { physicalProperties } from './physical.js';
|
|
3
3
|
|
|
4
|
-
const physicalPropertiesMap = Object.freeze({
|
|
4
|
+
export const physicalPropertiesMap = Object.freeze({
|
|
5
5
|
[physicalProperties.borderBottom]: logicalProperties.borderBlockEnd,
|
|
6
6
|
[physicalProperties.borderBottomColor]: logicalProperties.borderBlockEndColor,
|
|
7
7
|
[physicalProperties.borderBottomLeftRadius]:
|
|
@@ -74,7 +74,3 @@ const physicalPropertiesMap = Object.freeze({
|
|
|
74
74
|
[physicalProperties.top]: logicalProperties.insetBlockStart,
|
|
75
75
|
[physicalProperties.width]: logicalProperties.inlineSize,
|
|
76
76
|
});
|
|
77
|
-
|
|
78
|
-
module.exports = {
|
|
79
|
-
physicalPropertiesMap,
|
|
80
|
-
};
|
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
1
|
+
import { logicalUnits } from './logical.js';
|
|
2
|
+
import { physicalUnits } from './physical.js';
|
|
3
3
|
|
|
4
|
-
const physicalUnitsMap = Object.freeze({
|
|
4
|
+
export const physicalUnitsMap = Object.freeze({
|
|
5
5
|
[physicalUnits.cqh]: logicalUnits.cqb,
|
|
6
6
|
[physicalUnits.cqw]: logicalUnits.cqi,
|
|
7
7
|
[physicalUnits.dvh]: logicalUnits.dvb,
|
|
@@ -13,7 +13,3 @@ const physicalUnitsMap = Object.freeze({
|
|
|
13
13
|
[physicalUnits.vh]: logicalUnits.vb,
|
|
14
14
|
[physicalUnits.vw]: logicalUnits.vi,
|
|
15
15
|
});
|
|
16
|
-
|
|
17
|
-
module.exports = {
|
|
18
|
-
physicalUnitsMap,
|
|
19
|
-
};
|
|
@@ -1,15 +1,11 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
logicalInlinePoints,
|
|
4
|
-
logicalValues,
|
|
5
|
-
} = require('./logical');
|
|
6
|
-
const {
|
|
1
|
+
import { logicalAxis, logicalInlinePoints, logicalValues } from './logical.js';
|
|
2
|
+
import {
|
|
7
3
|
physicalAxis,
|
|
8
4
|
physicalProperties,
|
|
9
5
|
physicalValues,
|
|
10
|
-
}
|
|
6
|
+
} from './physical.js';
|
|
11
7
|
|
|
12
|
-
const physicalValuesMap = Object.freeze({
|
|
8
|
+
export const physicalValuesMap = Object.freeze({
|
|
13
9
|
[physicalProperties.boxOrient]: {
|
|
14
10
|
[physicalAxis.horizontal]: `${logicalAxis.inline}-axis`,
|
|
15
11
|
[physicalAxis.vertical]: `${logicalAxis.block}-axis`,
|
|
@@ -37,7 +33,3 @@ const physicalValuesMap = Object.freeze({
|
|
|
37
33
|
[physicalValues.right]: logicalInlinePoints.end,
|
|
38
34
|
},
|
|
39
35
|
});
|
|
40
|
-
|
|
41
|
-
module.exports = {
|
|
42
|
-
physicalValuesMap,
|
|
43
|
-
};
|