Skip to content
This repository has been archived by the owner on Sep 11, 2024. It is now read-only.

Commit

Permalink
Rename PostCSS files to .pcss (#9013)
Browse files Browse the repository at this point in the history 
* Rename PostCSS files to `.pcss`

* Make Stylelint happy

* Delint

* Rename new files too

* delint

* Fix bad comment placement
  • Loading branch information
@t3chguy
t3chguy authored Jul 15, 2022
1 parent 7842d51 commit 01f4bb8
Show file tree
Hide file tree
Showing 371 changed files with 740 additions and 1,045 deletions.
24 changes: 22 additions & 2 deletions .stylelintrc.js
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
module.exports = {
"extends": "stylelint-config-standard",
customSyntax: require('postcss-scss'),
"plugins": [
"stylelint-scss",
],
Expand Down Expand Up @@ -27,6 +28,25 @@ module.exports = {
// rather than a CI thing. Shorthand selectors are harder to detect when searching for a
// class name. This regex is trying to *allow* anything except `&words`, such as `&::before`,
// `&.mx_Class`, etc.
"selector-nested-pattern": "^((&[ :.\\\[,])|([^&]))"
}
"selector-nested-pattern": "^((&[ :.\\\[,])|([^&]))",
"declaration-colon-space-after": "always-single-line",
// Disable some defaults
"selector-class-pattern": null,
"custom-property-pattern": null,
"selector-id-pattern": null,
"keyframes-name-pattern": null,
"string-quotes": null,
"alpha-value-notation": null,
"color-function-notation": null,
"selector-not-notation": null,
"import-notation": null,
"value-keyword-case": null,
"declaration-block-no-redundant-longhand-properties": null,
"shorthand-property-no-redundant-values": null,
"property-no-vendor-prefix": null,
"value-no-vendor-prefix": null,
"selector-no-vendor-prefix": null,
"media-feature-name-no-vendor-prefix": null,
"number-max-precision": null,
},
}
4 changes: 2 additions & 2 deletions docs/icons.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ const MyComponent = () => {
Icon components are svg elements and can be styled as usual.

```
// _MyComponents.scss
// _MyComponents.pcss
.mx_MyComponent-icon {
height: 20px;
width: 20px;
Expand All @@ -41,4 +41,4 @@ const MyComponent = () => {
<FavoriteIcon className="mx_MyComponent-icon" role="img" aria-hidden="false">
</>;
}
```
```
12 changes: 7 additions & 5 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,8 @@
"CONTRIBUTING.rst",
"LICENSE",
"README.md",
"package.json"
"package.json",
".stylelintrc.js"
],
"main": "./src/index.ts",
"matrix_src_main": "./src/index.ts",
Expand All @@ -47,7 +48,7 @@
"lint:js": "eslint --max-warnings 0 src test cypress",
"lint:js-fix": "eslint --fix src test cypress",
"lint:types": "tsc --noEmit --jsx react && tsc --noEmit --jsx react -p cypress",
"lint:style": "stylelint \"res/css/**/*.scss\"",
"lint:style": "stylelint \"res/css/**/*.pcss\"",
"test": "jest",
"test:cypress": "cypress run",
"test:cypress:open": "cypress open",
Expand Down Expand Up @@ -193,13 +194,14 @@
"matrix-mock-request": "^2.0.0",
"matrix-react-test-utils": "^0.2.3",
"matrix-web-i18n": "^1.3.0",
"postcss-scss": "^4.0.4",
"raw-loader": "^4.0.2",
"react-test-renderer": "^17.0.2",
"rimraf": "^3.0.2",
"rrweb-snapshot": "1.1.7",
"stylelint": "^13.9.0",
"stylelint-config-standard": "^20.0.0",
"stylelint-scss": "^3.18.0",
"stylelint": "^14.9.1",
"stylelint-config-standard": "^26.0.0",
"stylelint-scss": "^4.2.0",
"typescript": "^4.7.4",
"walk": "^2.3.14"
},
Expand Down
0 res/css/_animations.scss → res/css/_animations.pcss
View file
File renamed without changes.
70 changes: 35 additions & 35 deletions res/css/_common.scss → res/css/_common.pcss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,10 +17,10 @@ See the License for the specific language governing permissions and
limitations under the License.
*/

@import "./_font-sizes.scss";
@import "./_font-weights.scss";
@import "./_animations.scss";
@import "./_spacing.scss";
@import "./_font-sizes.pcss";
@import "./_font-weights.pcss";
@import "./_animations.pcss";
@import "./_spacing.pcss";
@import url("maplibre-gl/dist/maplibre-gl.css");

$hover-transition: 0.08s cubic-bezier(.46, .03, .52, .96); // quadratic
Expand Down Expand Up @@ -112,35 +112,35 @@ a:visited {
color: $accent-alt;
}

input[type=text],
input[type=search],
input[type=password] {
input[type="text"],
input[type="search"],
input[type="password"] {
font-family: inherit;
padding: 9px;
font-size: $font-14px;
font-weight: 600;
min-width: 0;
}

input[type=text].mx_textinput_icon,
input[type=search].mx_textinput_icon {
input[type="text"].mx_textinput_icon,
input[type="search"].mx_textinput_icon {
padding-left: 36px;
background-repeat: no-repeat;
background-position: 10px center;
}

// FIXME THEME - Tint by CSS rather than referencing a duplicate asset
input[type=text].mx_textinput_icon.mx_textinput_search,
input[type=search].mx_textinput_icon.mx_textinput_search {
input[type="text"].mx_textinput_icon.mx_textinput_search,
input[type="search"].mx_textinput_icon.mx_textinput_search {
background-image: url('$(res)/img/feather-customised/search-input.svg');
}

// dont search UI as not all browsers support it,
// we implement it ourselves where needed instead
input[type=search]::-webkit-search-decoration,
input[type=search]::-webkit-search-cancel-button,
input[type=search]::-webkit-search-results-button,
input[type=search]::-webkit-search-results-decoration {
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration {
display: none;
}

Expand All @@ -150,7 +150,7 @@ textarea::placeholder {
opacity: initial;
}

input[type=text], input[type=password], textarea {
input[type="text"], input[type="password"], textarea {
background-color: transparent;
color: $primary-content;
}
Expand All @@ -160,7 +160,7 @@ textarea {
color: $primary-content;
}

input[type=text]:focus, input[type=password]:focus, textarea:focus {
input[type="text"]:focus, input[type="password"]:focus, textarea:focus {
outline: none;
box-shadow: none;
}
Expand Down Expand Up @@ -194,15 +194,15 @@ legend {
// appear to be part of the input

.mx_Dialog, .mx_MatrixChat_wrapper {
.mx_textinput > input[type=text],
.mx_textinput > input[type=search] {
.mx_textinput > input[type="text"],
.mx_textinput > input[type="search"] {
border: none;
flex: 1;
color: $primary-content;
}

:not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput) > input[type=text],
:not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput) > input[type=search],
:not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput) > input[type="text"],
:not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput) > input[type="search"],
.mx_textinput {
display: block;
box-sizing: border-box;
Expand All @@ -219,8 +219,8 @@ legend {
align-items: center;
}

:not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput) > input[type=text]::placeholder,
:not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput) > input[type=search]::placeholder,
:not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput) > input[type="text"]::placeholder,
:not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput) > input[type="search"]::placeholder,
.mx_textinput input::placeholder {
color: rgba($input-darker-fg-color, .75);
}
Expand All @@ -230,8 +230,8 @@ legend {
.dark-panel {
background-color: $dark-panel-bg-color;

:not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput) > input[type=text],
:not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput) > input[type=search],
:not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput) > input[type="text"],
:not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput) > input[type="search"],
.mx_textinput {
color: $input-darker-fg-color;
background-color: $background;
Expand All @@ -240,8 +240,8 @@ legend {
}

.light-panel {
:not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput) > input[type=text],
:not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput) > input[type=search],
:not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput) > input[type="text"],
:not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput) > input[type="search"],
.mx_textinput {
color: $input-darker-fg-color;
background-color: $input-lighter-bg-color;
Expand Down Expand Up @@ -517,7 +517,7 @@ legend {
* Elements that should not be styled like a dialog button are mentioned in a :not() pseudo-class.
* For the widest browser support, we use multiple :not pseudo-classes instead of :not(.a, .b).
*/
.mx_Dialog button:not(.mx_Dialog_nonDialogButton):not([class|=maplibregl]):not(.mx_AccessibleButton),
.mx_Dialog button:not(.mx_Dialog_nonDialogButton):not([class|="maplibregl"]):not(.mx_AccessibleButton),
.mx_Dialog input[type="submit"],
.mx_Dialog_buttons button:not(.mx_Dialog_nonDialogButton):not(.mx_AccessibleButton),
.mx_Dialog_buttons input[type="submit"] {
Expand All @@ -534,25 +534,25 @@ legend {
font-family: inherit;
}

.mx_Dialog button:not(.mx_Dialog_nonDialogButton):not([class|=maplibregl]):not(.mx_AccessibleButton):last-child {
.mx_Dialog button:not(.mx_Dialog_nonDialogButton):not([class|="maplibregl"]):not(.mx_AccessibleButton):last-child {
margin-right: 0px;
}

.mx_Dialog button:not(.mx_Dialog_nonDialogButton):not([class|=maplibregl]):not(.mx_AccessibleButton):hover,
.mx_Dialog button:not(.mx_Dialog_nonDialogButton):not([class|="maplibregl"]):not(.mx_AccessibleButton):hover,
.mx_Dialog input[type="submit"]:hover,
.mx_Dialog_buttons button:not(.mx_Dialog_nonDialogButton):not(.mx_AccessibleButton):hover,
.mx_Dialog_buttons input[type="submit"]:hover {
@mixin mx_DialogButton_hover;
}

.mx_Dialog button:not(.mx_Dialog_nonDialogButton):not([class|=maplibregl]):not(.mx_AccessibleButton):focus,
.mx_Dialog button:not(.mx_Dialog_nonDialogButton):not([class|="maplibregl"]):not(.mx_AccessibleButton):focus,
.mx_Dialog input[type="submit"]:focus,
.mx_Dialog_buttons button:not(.mx_Dialog_nonDialogButton):not(.mx_AccessibleButton):focus,
.mx_Dialog_buttons input[type="submit"]:focus {
filter: brightness($focus-brightness);
}

.mx_Dialog button.mx_Dialog_primary:not(.mx_Dialog_nonDialogButton):not([class|=maplibregl]),
.mx_Dialog button.mx_Dialog_primary:not(.mx_Dialog_nonDialogButton):not([class|="maplibregl"]),
.mx_Dialog input[type="submit"].mx_Dialog_primary,
.mx_Dialog_buttons button.mx_Dialog_primary:not(.mx_Dialog_nonDialogButton):not(.mx_AccessibleButton),
.mx_Dialog_buttons input[type="submit"].mx_Dialog_primary {
Expand All @@ -561,7 +561,7 @@ legend {
min-width: 156px;
}

.mx_Dialog button.danger:not(.mx_Dialog_nonDialogButton):not([class|=maplibregl]),
.mx_Dialog button.danger:not(.mx_Dialog_nonDialogButton):not([class|="maplibregl"]),
.mx_Dialog input[type="submit"].danger,
.mx_Dialog_buttons button.danger:not(.mx_Dialog_nonDialogButton):not(.mx_AccessibleButton),
.mx_Dialog_buttons input[type="submit"].danger {
Expand All @@ -570,13 +570,13 @@ legend {
color: $accent-fg-color;
}

.mx_Dialog button.warning:not(.mx_Dialog_nonDialogButton):not([class|=maplibregl]),
.mx_Dialog button.warning:not(.mx_Dialog_nonDialogButton):not([class|="maplibregl"]),
.mx_Dialog input[type="submit"].warning {
border: solid 1px $alert;
color: $alert;
}

.mx_Dialog button:not(.mx_Dialog_nonDialogButton):not([class|=maplibregl]):not(.mx_AccessibleButton):disabled,
.mx_Dialog button:not(.mx_Dialog_nonDialogButton):not([class|="maplibregl"]):not(.mx_AccessibleButton):disabled,
.mx_Dialog input[type="submit"]:disabled,
.mx_Dialog_buttons button:not(.mx_Dialog_nonDialogButton):not(.mx_AccessibleButton):disabled,
.mx_Dialog_buttons input[type="submit"]:disabled {
Expand Down
Loading

0 comments on commit 01f4bb8

Please sign in to comment.