Skip to content

Commit

Permalink
Define CSS property order
Browse files Browse the repository at this point in the history
  • Loading branch information
@ahosgood
ahosgood committed May 7, 2024
1 parent da314a5 commit 0091dcb
Show file tree
Hide file tree
Showing 31 changed files with 396 additions and 169 deletions.
231 changes: 202 additions & 29 deletions .stylelintrc
View file
Original file line number Diff line number Diff line change
@@ -1,32 +1,205 @@
{
"extends": [
"stylelint-config-standard-scss"
"extends": ["stylelint-config-standard-scss"],
"plugins": ["stylelint-selector-bem-pattern", "stylelint-order"],
"ignoreFiles": ["src/nationalarchives/lib/font-awesome/**/*.scss"],
"rules": {
"at-rule-empty-line-before": null,
"block-no-empty": null,
"declaration-empty-line-before": null,
"property-no-vendor-prefix": null,
"value-keyword-case": null,
"scss/dollar-variable-empty-line-before": null,
"scss/double-slash-comment-empty-line-before": null,
"selector-class-pattern": null,
"no-invalid-position-at-import-rule": null,
"plugin/selector-bem-pattern": {
"preset": "bem"
},
"color-function-notation": [
"modern",
{
"ignore": ["with-var-inside"]
}
],
"plugins": [
"stylelint-selector-bem-pattern"
],
"ignoreFiles": ["src/nationalarchives/lib/font-awesome/**/*.scss"],
"rules": {
"at-rule-empty-line-before": null,
"block-no-empty": null,
"declaration-empty-line-before": null,
"property-no-vendor-prefix": null,
"value-keyword-case": null,
"scss/dollar-variable-empty-line-before": null,
"scss/double-slash-comment-empty-line-before": null,
"selector-class-pattern": null,
"no-invalid-position-at-import-rule": null,
"plugin/selector-bem-pattern": {
"preset": "bem"
},
"color-function-notation": [
"modern",
{
"ignore": [
"with-var-inside"
]
}
],
"scss/operator-no-newline-after": null
}
"scss/operator-no-newline-after": null,
"order/order": ["dollar-variables", "custom-properties", "declarations"],
"order/properties-order": [
[
{
"emptyLineBefore": "always",
"properties": ["content"]
},
{
"emptyLineBefore": "always",
"properties": [
"min-width",
"width",
"max-width",
"min-height",
"height",
"max-height",
"margin",
"margin-top",
"margin-right",
"margin-bottom",
"margin-left",
"padding",
"padding-top",
"padding-right",
"padding-bottom",
"padding-left"
]
},
{
"emptyLineBefore": "always",
"properties": [
"appearance",
"display",
"flex-wrap",
"flex-direction",
"justify-content",
"align-items",
"gap",
"box-sizing",
"visibility",
"overflow",
"overflow-x",
"overflow-y",
"resize"
]
},
{
"emptyLineBefore": "always",
"properties": ["float", "clear"]
},
{
"emptyLineBefore": "always",
"properties": [
"position",
"inset",
"top",
"right",
"bottom",
"left",
"z-index"
]
},
{
"emptyLineBefore": "always",
"properties": [
"color",
"font-family",
"src",
"font-size",
"font-weight",
"line-height",
"text-align",
"text-align-last",
"vertical-align",
"font-style",
"font-display",
"font-optical-sizing",
"text-transform",
"text-decoration",
"text-decoration-thickness",
"direction",
"letter-spacing",
"word-spacing",
"text-indent",
"text-justify",
"text-overflow",
"text-overflow-ellipsis",
"text-overflow-mode",
"text-rendering",
"text-size-adjust",
"text-outline",
"text-shadow",
"text-transform",
"text-wrap",
"word-wrap",
"word-break",
"text-emphasis",
"white-space",
"word-spacing",
"hyphens"
]
},
{
"emptyLineBefore": "always",
"properties": ["columns", "column-gap"]
},
{
"emptyLineBefore": "always",
"properties": ["list-style"]
},
{
"emptyLineBefore": "always",
"properties": ["fill"]
},
{
"emptyLineBefore": "always",
"properties": [
"background",
"background-color",
"background-image",
"background-size",
"background-repeat",
"background-clip"
]
},
{
"emptyLineBefore": "always",
"properties": [
"border",
"border-width",
"border-color",
"border-style",
"border-top-width",
"border-top-color",
"border-top-style",
"border-right-width",
"border-right-color",
"border-right-style",
"border-bottom-width",
"border-bottom-color",
"border-bottom-style",
"border-left-width",
"border-left-color",
"border-left-style",
"border-collapse",
"border-radius",
"border-top-left-radius",
"border-top-right-radius",
"border-bottom-left-radius",
"border-bottom-right-radius",
"outline",
"outline-width",
"outline-color",
"outline-style",
"outline-offset"
]
},
{
"emptyLineBefore": "always",
"properties": ["transform"]
},
{
"emptyLineBefore": "always",
"properties": ["translate"]
},
{
"emptyLineBefore": "always",
"properties": ["opacity"]
},
{
"emptyLineBefore": "always",
"properties": ["cursor"]
},
{
"emptyLineBefore": "always",
"properties": ["clip", "clip-path", "zoom", "resize"]
}
]
]
}
}
23 changes: 23 additions & 0 deletions package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

3 changes: 2 additions & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@
"build:package": "./tasks/build-package.sh",
"compile:sass": "sass --style=compressed --embed-sources src/nationalarchives:package/nationalarchives",
"compile:scripts": "webpack",
"lint:fix": "prettier --write '{src,.storybook,tasks,.}/**/*.{js,mjs,scss,json,html}' && stylelint --fix 'src/**/*.scss' && eslint --fix 'src/**/*.{js,mjs}'",
"lint:fix": "prettier --write '{src,.storybook,tasks,.}/**/*.{js,mjs,scss,json,html,stylelintrc}' && stylelint --fix 'src/**/*.scss' && eslint --fix 'src/**/*.{js,mjs}'",
"test:all": "npm run test:lint && npm run test:unit && npm run test:html && npm run test:fixtures && npm run test:storybook && npm run build:package && npm run test:package",
"test:fixtures": "node tasks/test-fixtures.js",
"test:html": "node tasks/generate-fixture-html.js && html-validate fixtures-html",
Expand Down Expand Up @@ -80,6 +80,7 @@
"style-loader": "^3.3.1",
"stylelint": "^16.0.2",
"stylelint-config-standard-scss": "^13.0.0",
"stylelint-order": "^6.0.4",
"stylelint-selector-bem-pattern": "^4.0.0",
"webpack": "^5.89.0",
"webpack-cli": "^5.1.4"
Expand Down
17 changes: 9 additions & 8 deletions src/nationalarchives/components/breadcrumbs/breadcrumbs.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,25 +15,25 @@
margin: 0;
padding: 0;

list-style: none;

display: flex;
flex-wrap: wrap;

list-style: none;
}

&__item {
display: flex;

+ .tna-breadcrumbs__item {
&::before {
content: "\203A";
content: "\203A" / "";

margin: 0 spacing.space(0.75);

display: inline-block;

vertical-align: baseline;

content: "\203A";
content: "\203A" / "";
}
}

Expand Down Expand Up @@ -78,19 +78,20 @@
}

button#{&}__link {
height: 100%;
margin: 0;
padding: 0;
height: 100%;

appearance: none;

font-size: inherit;
line-height: inherit;
font-weight: inherit;
line-height: inherit;

background-color: transparent;

border: none;

appearance: none;
cursor: pointer;

&:hover {
Expand Down
13 changes: 7 additions & 6 deletions src/nationalarchives/components/button/button.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,23 +11,24 @@ $button-border-width: 4px !default;
padding: spacing.space(0.25) spacing.space(1);

display: inline-flex;
align-items: baseline;
justify-content: center;
align-items: baseline;
gap: spacing.space(0.75);

@include typography.relative-font-size(18);
@include typography.main-font-weight-bold;
line-height: 2rem;
text-decoration: none;
text-align: center;
text-decoration: none;
text-wrap: balance;

cursor: pointer;

@include typography.relative-font-size(18);
@include typography.main-font-weight-bold;

@include colour.colour-background("button-background");

@include colour.colour-border("button-background", $button-border-width);

cursor: pointer;

&,
&:link,
&:visited {
Expand Down
2 changes: 1 addition & 1 deletion src/nationalarchives/components/card/card.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -129,8 +129,8 @@
}

.tna-card__image-container {
height: auto;
min-height: 50%;
height: auto;
margin-bottom: 0;
padding-bottom: 0;

Expand Down
Loading

0 comments on commit 0091dcb

Please sign in to comment.