Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Various stylelint updates #255

Merged
merged 5 commits into from
Dec 27, 2023
Merged

Various stylelint updates #255

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
1d374ba
Add dvh and dvw as intrinsic units
EECOLOR Oct 27, 2023
3087b61
Adjust rules to allow for dvh and dvw
EECOLOR Oct 27, 2023
6bed216
Add svh, svw, lvh and lvw unit
EECOLOR Oct 27, 2023
be4f669
Add place-self to layout related props
EECOLOR Oct 28, 2023
94f55a3
Allow inline-grid as parent of grid properties
EECOLOR Dec 27, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 8 additions & 2 deletions library/.stylelintrc
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -195,7 +195,7 @@
],
"string-no-newline": true,
"unit-case": "lower",
"unit-no-unknown": true,
"unit-no-unknown": null,
"unit-whitelist": [
"em",
"rem",
Expand All @@ -210,7 +210,13 @@
"vmax",
"deg",
"turn",
"fr"
"fr",
"dvh",
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

nice!

"dvw",
"svh",
"svw",
"lvh",
"lvw"
],
"value-list-comma-newline-after": "always-multi-line",
"value-list-comma-space-after": "always-single-line",
Expand Down
6 changes: 3 additions & 3 deletions library/stylelint-plugins/rules/layout-related-properties/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ const {
} = require('../../machinery/ast')
const { flexChildProps, gridChildProps, flexOrGridChildProps } = require('../../machinery/css')

const intrinsicUnits = ['px', 'em', 'rem', 'vw', 'vh']
const intrinsicUnits = ['px', 'em', 'rem', 'vw', 'vh', 'dvw', 'dvh', 'svh', 'svw', 'lvh', 'lvw']
const intrinsicProps = ['width', 'height', 'max-width', 'min-width', 'max-height', 'min-height']

const allowedInRootAndChild = [
Expand All @@ -22,7 +22,7 @@ const layoutRelatedProps = [ // only allowed in child
'top', 'right', 'bottom', 'left', 'inset',
'margin', 'margin-top', 'margin-right', 'margin-bottom', 'margin-left',
'max-width', 'min-width', 'max-height', 'min-height',
'justify-self', 'align-self',
'justify-self', 'align-self', 'place-self',
...flexChildProps,
...gridChildProps,
...flexOrGridChildProps,
Expand All @@ -41,7 +41,7 @@ const messages = {
`one of \`${intrinsicUnits.join('`, `')}\` and add \`!important\``
: ''
),
'nested - only layout related props in nested': prop =>
'nested - only layout related props in nested': prop =>
`illegal non-layout related prop\n` +
`\`${prop}\` can only be used by root rules - ` +
`move to another root rule`,
Expand Down
6 changes: 3 additions & 3 deletions library/stylelint-plugins/rules/parent-child-policy/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@ const messages = {
`add \`display: flex;\` or \`display: grid;\` to the containing root rule or, if this is caused by a media query ` +
`that overrides \`display: flex;\` or \`display: grid;\`, use \`${prop}: unset\``,
'layoutClassname - must be nested in a parent selector':
`layoutClassNames (classes ending with the \`Layout\` suffix) can only be targetted by a parent selector, using the direct child selector. ` +
`layoutClassNames (classes ending with the \`Layout\` suffix) can only be targetted by a parent selector, using the direct child selector. ` +
`Consequentially, you can only use layout related properties in layoutClassNames.`,
'invalid pointer events':
`Incorrect pointer events combination\n` +
Expand Down Expand Up @@ -72,13 +72,13 @@ const childParentRelations = {
rootHasDisplayGrid: {
nestedHasOneOf: gridChildProps,
requireInRoot: [
['display', 'grid']
['display', ['grid', 'inline-grid']]
]
},
rootHasDisplayFlexOrGrid: {
nestedHasOneOf: flexOrGridChildProps,
requireInRoot: [
['display', ['flex', 'grid']]
['display', ['flex', 'grid', 'inline-grid']]
]
},
validPointerEvents: {
Expand Down
13 changes: 13 additions & 0 deletions library/stylelint-plugins/rules/parent-child-policy/test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,6 +35,19 @@ test('parent-child-policy', {
}
`,
},
{
title: `don't report when display inline-grid is present`,
code: `
.good {
display: inline-grid;

& > .test {
grid: 0; grid-area: 0; grid-column: 0; grid-row: 0; order: 0;
grid-column-start: 0; grid-column-end: 0; grid-row-start: 0; grid-row-end: 0;
}
}
`,
},
{
code: '.good { pointer-events: auto; }',
},
Expand Down