Skip to content

Commit

Permalink
Replaces sass-lint with stylelint
Browse files Browse the repository at this point in the history
* Introduces standard scss rules from stylelint with only a few
  modifications.
* `yarn lint` now runs `yarn lint:style` instead of `yarn lint:sass`.
* Many of the files were updated with `yarn lint:style --fix`, but some
  of them had to be manually updated to adhere to the newly-introduced
  rules from the stylelint configuration. A major culprit was the
  `no-descending-specificity` rule.
* Some of the automated fixes that changed function names
  (e.g. EUI functions like `lightOrDarkTheme`) had to be overridden
  because EUI doesn't adhere to all of the rules. We can address this
  after we fold in and replace `node-sass` with Dart Sass.
* Includes a couple fixes such as fixing the class selector for
  `osdnSuggestionItem--value .osdSuggestionItem__text`.

Resolves opensearch-project#551
Resolves opensearch-project#1139
Resolves opensearch-project#1151
Resolves opensearch-project#1152
Resolves opensearch-project#1154

Signed-off-by: Tommy Markley <markleyt@amazon.com>
  • Loading branch information
Tommy Markley committed Mar 4, 2022
1 parent fef8af0 commit 8a87b3f
Show file tree
Hide file tree
Showing 249 changed files with 2,074 additions and 2,185 deletions.
2 changes: 2 additions & 0 deletions .prettierignore
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
# use stylelint
*.scss
84 changes: 0 additions & 84 deletions .sass-lint.yml

This file was deleted.

2 changes: 2 additions & 0 deletions .stylelintignore
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
build
target
12 changes: 12 additions & 0 deletions .stylelintrc.yml
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
extends:
- stylelint-config-standard-scss
rules:
# while we still use node-sass, only legacy rgb() notation is allowed
color-function-notation: "legacy"
# camelCase names
keyframes-name-pattern: "^[a-z][a-zA-Z0-9_-]+$"
selector-class-pattern: "^[a-z][a-zA-Z0-9_-]+$"
selector-id-pattern: "^[a-z][a-zA-Z0-9_-]+$"
scss/at-mixin-pattern: "^[a-z][a-zA-Z0-9_-]+$"
scss/at-function-pattern: "^[a-z][a-zA-Z0-9_-]+$"
scss/dollar-variable-pattern: "^[a-z][a-zA-Z0-9_-]+$"
1 change: 1 addition & 0 deletions examples/search_examples/public/index.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
/* stylelint-disable no-empty-source */
10 changes: 4 additions & 6 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -58,9 +58,9 @@
"start": "node scripts/opensearch_dashboards --dev",
"debug": "node --nolazy --inspect scripts/opensearch_dashboards --dev",
"debug-break": "node --nolazy --inspect-brk scripts/opensearch_dashboards --dev",
"lint": "yarn run lint:es && yarn run lint:sass",
"lint": "yarn run lint:es && yarn run lint:style",
"lint:es": "node scripts/eslint",
"lint:sass": "node scripts/sasslint",
"lint:style": "node scripts/stylelint",
"makelogs": "node scripts/makelogs",
"uiFramework:start": "cd packages/osd-ui-framework && yarn docSiteStart",
"uiFramework:build": "cd packages/osd-ui-framework && yarn docSiteBuild",
Expand All @@ -76,12 +76,9 @@
},
"resolutions": {
"**/@types/node": "^14.17.32",
"**/front-matter": "^4.0.2",
"**/glob-parent": "^6.0.0",
"**/hoist-non-react-statics": "^3.3.2",
"**/kind-of": ">=6.0.3",
"**/merge": "^2.1.1",
"**/minimist": "^1.2.5",
"**/node-jose": "^2.1.0",
"**/trim": "^0.0.3",
"**/typescript": "4.0.2"
Expand Down Expand Up @@ -425,11 +422,12 @@
"regenerate": "^1.4.0",
"reselect": "^4.0.0",
"resize-observer-polyfill": "^1.5.0",
"sass-lint": "^1.12.1",
"selenium-webdriver": "^4.0.0-alpha.7",
"simple-git": "1.116.0",
"sinon": "^7.4.2",
"strip-ansi": "^6.0.0",
"stylelint": "^14.5.2",
"stylelint-config-standard-scss": "^3.0.0",
"supertest": "^6.2.2",
"supertest-as-promised": "^4.0.2",
"tape": "^5.0.1",
Expand Down
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
@import "./other_styles.scss";
@import "./other_styles";

body {
width: $globalStyleConstant;
Expand Down
1 change: 1 addition & 0 deletions packages/osd-plugin-generator/template/public/index.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
// empty template
36 changes: 18 additions & 18 deletions packages/osd-ui-framework/doc_site/src/components/guide/_guide.scss
Original file line number Diff line number Diff line change
Expand Up @@ -64,25 +64,25 @@ html {
background-color: $euiColorEmptyShade;
}

.guideContentPage__hint {
position: absolute;
top: 0;
left: 0;
width: 100%;
max-width: 260px;
max-height: 500px;
padding: 30px;
margin: 20px;
border-radius: 4px;
background-color: $euiColorLightestShade;
line-height: $guideLineHeight;
}
.guideContentPage__hint {
position: absolute;
top: 0;
left: 0;
width: 100%;
max-width: 260px;
max-height: 500px;
padding: 30px;
margin: 20px;
border-radius: 4px;
background-color: $euiColorLightestShade;
line-height: $guideLineHeight;
}

.guideContentPage__content {
width: 100%;
max-width: 800px;
padding: 30px 60px;
}
.guideContentPage__content {
width: 100%;
max-width: 800px;
padding: 30px 60px;
}

.guideHintArrow {
position: absolute;
Expand Down
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
.guideCode {
padding: 2px 4px;
font-family: 'Ubuntu Mono', monospace;
font-family: "Ubuntu Mono", monospace;
background-color: $euiColorLightestShade;
color: $euiColorDarkShade;
}
Original file line number Diff line number Diff line change
Expand Up @@ -22,39 +22,39 @@
}
}

.guideCodeViewer__header {
padding: 0 20px 6px;
line-height: $guideLineHeight;
border-bottom: $euiBorderThin;
font-size: 14px;
font-weight: 700;
margin-bottom: 10px;
}
.guideCodeViewer__header {
padding: 0 20px 6px;
line-height: $guideLineHeight;
border-bottom: $euiBorderThin;
font-size: 14px;
font-weight: 700;
margin-bottom: 10px;
}

.guideCodeViewer__closeButton {
position: absolute;
top: 0;
right: 10px;
cursor: pointer;
padding: 10px;
border-radius: 3px;
color: $guideTextColor;

&:hover {
color: $guideLinkHoverColor;
}
.guideCodeViewer__closeButton {
position: absolute;
top: 0;
right: 10px;
cursor: pointer;
padding: 10px;
border-radius: 3px;
color: $guideTextColor;

&:hover {
color: $guideLinkHoverColor;
}
}

.guideCodeViewer__title {
padding: 0 20px 6px;
border-bottom: $euiBorderThin;
line-height: $guideLineHeight;
font-size: 14px;
}
.guideCodeViewer__title {
padding: 0 20px 6px;
border-bottom: $euiBorderThin;
line-height: $guideLineHeight;
font-size: 14px;
}

.guideCodeViewer__content {
margin: 0 0 16px;
}
.guideCodeViewer__content {
margin: 0 0 16px;
}

// HLJS

Expand All @@ -64,7 +64,7 @@
color: $euiColorDarkShade;
font-size: 14px;
line-height: 1.3;
font-family: 'Ubuntu Mono', monospace;
font-family: "Ubuntu Mono", monospace;
}

.hljs-keyword {
Expand Down
Original file line number Diff line number Diff line change
@@ -1,3 +1,15 @@
@import "guide/guide";
@import "guide_code/guide_code";
@import "guide_code_viewer/guide_code_viewer";
@import "guide_demo/guide_demo";
@import "guide_link/guide_link";
@import "guide_nav/guide_nav";
@import "guide_page/guide_page";
@import "guide_page_side_nav/guide_page_side_nav";
@import "guide_sandbox/guide_sandbox";
@import "guide_section/guide_section";
@import "guide_text/guide_text";

$guideVerticalRhythm: $euiSize;
$guideLineHeight: $euiSizeL;
$guideNavHeight: 60px;
Expand All @@ -13,6 +25,7 @@ $guideBaseBackgroundColor: $euiColorLightestShade;
$guidePanelBackgroundColor: $euiColorEmptyShade;
$guideTextColor: $euiColorDarkestShade;
$guideLinkColor: $euiColorPrimary;
/* stylelint-disable-next-line scss/no-global-function-names */
$guideLinkHoverColor: darken($euiColorPrimary, 10%);

// Breakpoints
Expand Down Expand Up @@ -47,16 +60,3 @@ $guideNormalBreakpoint: 1900px;
background-color: transparent;
}
}


@import "guide/guide";
@import "guide_code/guide_code";
@import "guide_code_viewer/guide_code_viewer";
@import "guide_demo/guide_demo";
@import "guide_link/guide_link";
@import "guide_nav/guide_nav";
@import "guide_page/guide_page";
@import "guide_page_side_nav/guide_page_side_nav";
@import "guide_sandbox/guide_sandbox";
@import "guide_section/guide_section";
@import "guide_text/guide_text";
Original file line number Diff line number Diff line change
Expand Up @@ -10,14 +10,16 @@

.guideDemo__highlightGrid {
.kuiFlexItem {
background: transparentize($euiColorPrimary, .9);
/* stylelint-disable-next-line scss/no-global-function-names */
background: transparentize($euiColorPrimary, 0.9);
padding: 16px;
}
}

.guideDemo__highlightGridWrap {
.kuiFlexItem div {
background: transparentize($euiColorPrimary, .9);
/* stylelint-disable-next-line scss/no-global-function-names */
background: transparentize($euiColorPrimary, 0.9);
padding: 16px;
}
}
Loading

0 comments on commit 8a87b3f

Please sign in to comment.