Skip to content

Commit

Permalink
docs: add Stylelint configuration and cleanup (#16379)
Browse files Browse the repository at this point in the history 
* build: add initial Stylelint setup

* fix: stylelint no-eol-whitespace

* fix: stylelint no-empty-first-line

* fix: stylelint max-empty-lines

* fix: stylelint rule-empty-line-before

* fix: stylelint block-closing-brace-empty-line-before

* fix: stylelint block-closing-brace-newline-after

* fix: stylelint block-opening-brace-newline-after

* fix: stylelint block-opening-brace-space-before

* fix: stylelint declaration-colon-newline-after

* fix: stylelint declaration-colon-space-after

* fix: stylelint declaration-empty-line-before

* fix: stylelint length-zero-no-unit

* fix: stylelint indentation of 4

* fix: stylelint media-feature-colon-space-after

* fix: stylelint no-duplicate-at-import-rules

* fix: stylelint scss/at-import-partial-extension

* fix: stylelint scss/double-slash-comment-empty-line-before

* fix: stylelint selector-attribute-quotes

* fix: stylelint selector-combinator-space-after

* fix: stylelint selector-combinator-space-before

* fix: stylelint selector-descendant-combinator-no-non-space

* fix: stylelint selector-list-comma-newline-after

* fix: stylelint selector-pseudo-element-colon-notation

* fix: stylelint string-quotes

* fix: stylelint value-list-comma-newline-after

* ci: add Stylelint hook for docs

* docs: add direct Stylelint dep

* docs: ignore re-copied SCSS files in _site

* Update docs/src/assets/scss/print.scss

Co-authored-by: Nick Schonning <nschonni@gmail.com>

* Update docs/package.json

Co-authored-by: Strek <ssharishkumar@gmail.com>

* Update .github/workflows/ci.yml

Co-authored-by: Nick Schonning <nschonni@gmail.com>

* Add `lint:fix:scss` script

* Update docs/src/assets/scss/syntax-highlighter.scss

Co-authored-by: Strek <ssharishkumar@gmail.com>

* Update docs/.stylelintrc.json

Co-authored-by: Milos Djermanovic <milos.djermanovic@gmail.com>

Co-authored-by: Nicholas C. Zakas <nicholas@humanwhocodes.com>
Co-authored-by: Strek <ssharishkumar@gmail.com>
Co-authored-by: Milos Djermanovic <milos.djermanovic@gmail.com>
  • Loading branch information
@nschonni @nzakas
@harish-sethuraman @mdjermanovic
4 people committed Oct 27, 2022
1 parent 9b0a469 commit 8a15968
Show file tree
Hide file tree
Showing 29 changed files with 149 additions and 169 deletions.
3 changes: 3 additions & 0 deletions .github/workflows/ci.yml
View file
Expand Up @@ -28,6 +28,9 @@ jobs:
- name: Install Docs Packages
working-directory: docs
run: npm install
- name: Stylelint Docs
working-directory: docs
run: npm run lint:scss
- name: Lint Docs JS Files
run: node Makefile lintDocsJS

Expand Down
28 changes: 28 additions & 0 deletions docs/.stylelintrc.json
View file
@@ -0,0 +1,28 @@
{
"extends": ["stylelint-config-standard-scss"],
"rules": {
"alpha-value-notation": null,
"at-rule-empty-line-before": null,
"color-function-notation": null,
"color-hex-case": null,
"custom-property-empty-line-before": null,
"custom-property-pattern": null,
"declaration-block-no-duplicate-properties": null,
"declaration-block-no-redundant-longhand-properties": null,
"declaration-block-no-shorthand-property-overrides": null,
"hue-degree-notation": null,
"indentation": 4,
"max-line-length": null,
"no-descending-specificity": null,
"no-duplicate-selectors": null,
"number-leading-zero": null,
"number-no-trailing-zeros": null,
"property-no-unknown": null,
"property-no-vendor-prefix": null,
"selector-class-pattern": null,
"value-keyword-case": null
},
"ignoreFiles": [
"_site/**"
]
}
8 changes: 6 additions & 2 deletions docs/package.json
View file
Expand Up @@ -15,7 +15,9 @@
"build:sass": "sass --style=compressed src/assets/scss:src/assets/css --no-source-map",
"build:eleventy": "npx @11ty/eleventy",
"start": "npm-run-all build:sass --parallel watch:*",
"build": "npm-run-all build:sass build:eleventy images"
"build": "npm-run-all build:sass build:eleventy images",
"lint:scss": "stylelint \"**/*.scss\"",
"lint:fix:scss": "npm run lint:scss -- --fix"
},
"devDependencies": {
"@11ty/eleventy": "^1.0.1",
Expand All @@ -40,7 +42,9 @@
"netlify-cli": "^10.3.1",
"npm-run-all": "^4.1.5",
"rimraf": "^3.0.2",
"sass": "^1.52.1"
"sass": "^1.52.1",
"stylelint": "^14.13.0",
"stylelint-config-standard-scss": "^5.0.0"
},
"engines": {
"node": ">=14.0.0"
Expand Down
6 changes: 3 additions & 3 deletions docs/src/assets/scss/carbon-ads.scss
View file
@@ -1,7 +1,7 @@
.hero-ad {
@media all and (max-width: 800px) {
display: none;
}
@media all and (max-width: 800px) {
display: none;
}
}

#carbonads * {
Expand Down
2 changes: 0 additions & 2 deletions docs/src/assets/scss/components/alert.scss
View file
Expand Up @@ -42,7 +42,6 @@
}
}


[data-theme="dark"] {
.alert {
&.alert--warning {
Expand Down Expand Up @@ -101,7 +100,6 @@
}
}


.alert__learn-more {
display: block;
font-weight: 500;
Expand Down
4 changes: 1 addition & 3 deletions docs/src/assets/scss/components/buttons.scss
View file
Expand Up @@ -23,9 +23,7 @@ button {
align-items: center;
justify-content: center;
border-radius: var(--border-radius);

transition: background-color .2s linear,
border-color .2s linear;
transition: background-color .2s linear, border-color .2s linear;

svg {
color: inherit;
Expand Down
1 change: 0 additions & 1 deletion docs/src/assets/scss/components/docs-index.scss
View file
Expand Up @@ -143,7 +143,6 @@
}

#ham-top {

transform: rotate(41deg);
}

Expand Down
8 changes: 0 additions & 8 deletions docs/src/assets/scss/components/docs-navigation.scss
View file
Expand Up @@ -13,7 +13,6 @@
margin-bottom: 2rem;
margin-block-end: 2rem;


@media all and (min-width: 1024px) {
font-size: var(--step-0);
margin-top: 0;
Expand Down Expand Up @@ -50,7 +49,6 @@
}
}


.docs-nav-panel {
@media all and (min-width: 1024px) {
display: flex;
Expand Down Expand Up @@ -83,11 +81,9 @@
align-items: center;
margin-left: .5rem;
margin-right: -10px;

margin-inline-start: .5rem;
margin-inline-end: -10px;


svg {
width: 40px;
height: 40px;
Expand Down Expand Up @@ -118,7 +114,6 @@
}

#ham-top {

transform: rotate(41deg);
}

Expand All @@ -128,8 +123,6 @@
}
}



@media all and (min-width: 1024px) {
.docs-site-nav {
flex-direction: row;
Expand All @@ -151,5 +144,4 @@
order: 1;
}
}

}
1 change: 0 additions & 1 deletion docs/src/assets/scss/components/hero.scss
View file
Expand Up @@ -40,7 +40,6 @@
}

.hero--homepage {

.section-title {
margin-bottom: 1.5rem;
margin-block-end: 1.5rem;
Expand Down
1 change: 0 additions & 1 deletion docs/src/assets/scss/components/index.scss
View file
Expand Up @@ -79,7 +79,6 @@
}

#ham-top {

transform: rotate(41deg);
}

Expand Down
3 changes: 1 addition & 2 deletions docs/src/assets/scss/components/language-switcher.scss
View file
Expand Up @@ -18,8 +18,7 @@
flex: 1 0 10ch;
}


.switcher--language .switcher__select {
.switcher--language .switcher__select {
flex: 1 0 12rem;

@media all and (max-width: 800px) {
Expand Down
4 changes: 0 additions & 4 deletions docs/src/assets/scss/components/resources.scss
View file
Expand Up @@ -7,14 +7,12 @@
overflow: hidden;
margin-bottom: .5rem;
margin-block-end: .5rem;

position: relative;
transition: all .2s linear;

&:hover {
background-color: var(--lighter-background-color);
}

}

.resource__image {
Expand All @@ -27,7 +25,6 @@
display: block;
height: 100%;
width: 100%;
// object-fit: cover;
object-fit: contain;
}
}
Expand All @@ -38,7 +35,6 @@
align-self: center;
}


.resource__title { // a
text-decoration: none;
color: var(--headings-color);
Expand Down
11 changes: 5 additions & 6 deletions docs/src/assets/scss/components/rules.scss
View file
Expand Up @@ -13,24 +13,24 @@
background: none;
border: none;

@media screen and (min-width:768px){
@media screen and (min-width: 768px) {
&:not(:first-child)::after {
content: "";
display: block;
padding: 1px;
border-left: 1px solid var(--divider-color);
left: 0px;
left: 0;
}
}

@media screen and (min-width:768px) and (max-width:1023px), screen and (min-width:1440px){
@media screen and (min-width: 768px) and (max-width: 1023px), screen and (min-width: 1440px) {
&:not(:first-child)::after {
height: 70%;
position: absolute;
}
}

@media screen and (min-width:1024px) and (max-width:1439px){
@media screen and (min-width: 1024px) and (max-width: 1439px) {
&:nth-child(2)::after {
height: 70%;
position: absolute;
Expand Down Expand Up @@ -171,7 +171,6 @@ a.rule__name {
}

.related-rules__list__item {

svg {
color: inherit;
}
Expand All @@ -194,7 +193,7 @@ a.rule__name {
}
}

a.rule-list-item+a.rule-list-item::before {
a.rule-list-item + a.rule-list-item::before {
content: ",";
display: inline-block;
margin-left: 5px;
Expand Down
8 changes: 4 additions & 4 deletions docs/src/assets/scss/components/search.scss
View file
Expand Up @@ -4,8 +4,8 @@
appearance: none;
}

[type=search]::-ms-clear,
[type=search]::-ms-reveal {
[type="search"]::-ms-clear,
[type="search"]::-ms-reveal {
display: none;
width: 0;
height: 0;
Expand Down Expand Up @@ -84,6 +84,7 @@
&[data-results="true"] {
padding: 0;
}

&[data-results="false"] {
padding: 1rem;
}
Expand All @@ -110,7 +111,7 @@
background-color: var(--lightest-background-color);
}

&:focus-within{
&:focus-within {
background-color: var(--lightest-background-color);
}
}
Expand All @@ -121,7 +122,6 @@
margin-bottom: 0;
font-family: var(--text-font);


a {
display: block;
text-decoration: none;
Expand Down
7 changes: 1 addition & 6 deletions docs/src/assets/scss/components/tabs.scss
View file
Expand Up @@ -27,11 +27,7 @@
align-items: center;
justify-content: center;
border-radius: var(--border-radius) var(--border-radius) 0 0;

transition: background-color .2s linear,
border-color .2s linear;


transition: background-color .2s linear, border-color .2s linear;

&:hover {
color: var(--link-color);
Expand All @@ -55,7 +51,6 @@
}
}


.c-tabs__tabpanel__title {
margin-bottom: 1.5rem;
margin-block-end: 1.5rem;
Expand Down
2 changes: 0 additions & 2 deletions docs/src/assets/scss/components/toc.scss
View file
Expand Up @@ -105,8 +105,6 @@
}
}



.c-toc__panel {
&[data-open="false"] {
display: none;
Expand Down
1 change: 0 additions & 1 deletion docs/src/assets/scss/docs-header.scss
View file
Expand Up @@ -10,7 +10,6 @@
align-items: start;
padding-top: 0;
padding-bottom: 0;

padding-block-start: 0;
padding-block-end: 0;

Expand Down
4 changes: 0 additions & 4 deletions docs/src/assets/scss/docs.scss
View file
Expand Up @@ -32,7 +32,6 @@ html {
padding-top: var(--space-l-xl);
padding-block-start: var(--space-l-xl);
font-size: .875rem;

display: grid;
grid-auto-rows: max-content;
align-items: start;
Expand All @@ -41,7 +40,6 @@ html {
padding: var(--space-l-xl) 0;
padding-right: var(--space-s-l);
padding-inline-end: var(--space-s-l);

border-right: 1px solid var(--divider-color);
border-inline-end: 1px solid var(--divider-color);
}
Expand Down Expand Up @@ -73,7 +71,6 @@ html {
@media all and (min-width: 800px) {
padding-right: var(--space-s-l);
padding-inline-end: var(--space-s-l);

border-right: 1px solid var(--divider-color);
border-inline-end: 1px solid var(--divider-color);
}
Expand All @@ -83,7 +80,6 @@ html {
}
}


.docs-aside {
grid-column: 2 / 3;
display: flex;
Expand Down
1 change: 0 additions & 1 deletion docs/src/assets/scss/eslint-site-footer.scss
View file
Expand Up @@ -61,5 +61,4 @@
flex-direction: row;
justify-content: space-between;
}

}
1 change: 0 additions & 1 deletion docs/src/assets/scss/eslint-site-header.scss
View file
Expand Up @@ -10,7 +10,6 @@
align-items: start;
padding-top: 0;
padding-bottom: 0;

padding-block-start: 0;
padding-block-end: 0;

Expand Down
5 changes: 2 additions & 3 deletions docs/src/assets/scss/forms.scss
View file
Expand Up @@ -6,7 +6,7 @@
display: block;
width: 100%;
max-width: 100%;
min-width: 0px;
min-width: 0;
padding: .625rem .875rem;
padding-right: calc(.875rem * 2.5);
padding-inline-end: calc(.875rem * 2.5);
Expand All @@ -19,8 +19,7 @@
background-color: var(--body-background-color);
background-image: url("data:image/svg+xml,%3Csvg width='20' height='21' viewBox='0 0 20 21' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 7.60938L10 12.6094L15 7.60938' stroke='%23667085' stroke-width='1.66667' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A"), linear-gradient(to bottom, var(--body-background-color) 0%, var(--body-background-color) 100%);
background-repeat: no-repeat, repeat;
background-position: right .875rem top 50%,
0 0;
background-position: right .875rem top 50%, 0 0;
background-size: 1em auto, 100%;
}

Expand Down

0 comments on commit 8a15968

Please sign in to comment.