Friendly Business: Fixes build tool :focus-within errors and updates npm dependencies

- Removes some occurences of bad auto-prefixing selectors
This commit is contained in:
Allan Cole 2019-03-14 18:36:24 -04:00
parent 0902467f42
commit 364f57dd8c
7 changed files with 1012 additions and 451 deletions

File diff suppressed because it is too large Load diff

View file

@ -7,13 +7,12 @@
},
"homepage": "https://github.com/WordPress/twentynineteen#readme",
"devDependencies": {
"@wordpress/browserslist-config": "^2.2.2",
"autoprefixer": "^9.1.5",
"chokidar-cli": "^1.2.1",
"node-sass": "^4.9.3",
"@wordpress/browserslist-config": "^2.3.0",
"autoprefixer": "^9.5.0",
"chokidar-cli": "^1.2.2",
"node-sass": "^4.11.0",
"npm-run-all": "^4.1.5",
"postcss-cli": "^6.0.1",
"postcss-focus-within": "^3.0.0",
"postcss-cli": "^6.1.2",
"rtlcss": "^2.4.0"
},
"rtlcssConfig": {

View file

@ -1,13 +1,5 @@
var postcssFocusWithin = require('postcss-focus-within');
module.exports = {
plugins: {
autoprefixer: {}
}
};
module.exports = {
plugins: [
postcssFocusWithin(/* pluginOptions */)
]
};

View file

@ -143,7 +143,8 @@ Andreas Hecht in https://www.jotform.com/blog/css-perfect-print-stylesheet-98272
position: relative;
height: initial;
width: initial;
object-fit: none;
-o-object-fit: none;
object-fit: none;
min-width: 0;
min-height: 0;
max-width: 100%;

View file

@ -417,7 +417,9 @@ figcaption,
.wp-block-pullquote blockquote {
margin-top: calc(3 * 1rem);
margin-bottom: calc(3.33 * 1rem);
hyphens: auto;
-webkit-hyphens: auto;
-ms-hyphens: auto;
hyphens: auto;
word-break: break-word;
}

View file

@ -137,7 +137,8 @@ abbr[title] {
/* 1 */
text-decoration: underline;
/* 2 */
text-decoration: underline dotted;
-webkit-text-decoration: underline dotted;
text-decoration: underline dotted;
/* 2 */
}
@ -568,14 +569,18 @@ h6 {
.error-404 .page-title,
.comments-title,
blockquote {
hyphens: auto;
-webkit-hyphens: auto;
-ms-hyphens: auto;
hyphens: auto;
word-break: break-word;
}
/* Do not hyphenate entry title on tablet view and bigger. */
@media only screen and (min-width: 768px) {
.entry-title {
hyphens: none;
-webkit-hyphens: none;
-ms-hyphens: none;
hyphens: none;
}
}
@ -727,10 +732,6 @@ html {
box-sizing: border-box;
}
::-moz-selection {
background-color: #c7d6c8;
}
::selection {
background-color: #c7d6c8;
}
@ -1272,6 +1273,8 @@ body.page .main-navigation {
left: 0;
right: auto;
display: block;
width: -webkit-max-content;
width: -moz-max-content;
width: max-content;
}
}
@ -1358,6 +1361,8 @@ body.page .main-navigation {
left: 0;
right: auto;
display: table;
width: -webkit-max-content;
width: -moz-max-content;
width: max-content;
}
}
@ -1613,7 +1618,10 @@ body.page .main-navigation {
.post-navigation .nav-links a .meta-nav {
color: #0d1b24;
user-select: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.post-navigation .nav-links a .meta-nav:before, .post-navigation .nav-links a .meta-nav:after {
@ -1625,7 +1633,9 @@ body.page .main-navigation {
}
.post-navigation .nav-links a .post-title {
hyphens: auto;
-webkit-hyphens: auto;
-ms-hyphens: auto;
hyphens: auto;
}
.post-navigation .nav-links a:hover {
@ -1751,7 +1761,8 @@ body.page .main-navigation {
.screen-reader-text {
border: 0;
clip: rect(1px, 1px, 1px, 1px);
clip-path: inset(50%);
-webkit-clip-path: inset(50%);
clip-path: inset(50%);
height: 1px;
margin: -1px;
overflow: hidden;
@ -1767,7 +1778,8 @@ body.page .main-navigation {
border-radius: 3px;
box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
clip: auto !important;
clip-path: none;
-webkit-clip-path: none;
clip-path: none;
color: #21759b;
display: block;
font-size: 14px;
@ -2044,7 +2056,6 @@ body.page .main-navigation {
.site-header.featured-image .social-navigation svg,
.site-header.featured-image .site-featured-image svg {
/* Use -webkit- only if supporting: Chrome < 54, iOS < 9.3, Android < 4.4.4 */
-webkit-filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.35));
filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.35));
}
@ -2066,11 +2077,12 @@ body.page .main-navigation {
/* When image filters are active, make it grayscale to colorize it blue. */
}
@supports (object-fit: cover) {
@supports ((-o-object-fit: cover) or (object-fit: cover)) {
.site-header.featured-image .site-featured-image .post-thumbnail img {
height: 100%;
right: 0;
object-fit: cover;
-o-object-fit: cover;
object-fit: cover;
top: 0;
transform: none;
width: 100%;
@ -2240,10 +2252,6 @@ body.page .main-navigation {
}
}
.site-header.featured-image ::-moz-selection {
background: rgba(255, 253, 246, 0.17);
}
.site-header.featured-image ::selection {
background: rgba(255, 253, 246, 0.17);
}

View file

@ -137,7 +137,8 @@ abbr[title] {
/* 1 */
text-decoration: underline;
/* 2 */
text-decoration: underline dotted;
-webkit-text-decoration: underline dotted;
text-decoration: underline dotted;
/* 2 */
}
@ -568,14 +569,18 @@ h6 {
.error-404 .page-title,
.comments-title,
blockquote {
hyphens: auto;
-webkit-hyphens: auto;
-ms-hyphens: auto;
hyphens: auto;
word-break: break-word;
}
/* Do not hyphenate entry title on tablet view and bigger. */
@media only screen and (min-width: 768px) {
.entry-title {
hyphens: none;
-webkit-hyphens: none;
-ms-hyphens: none;
hyphens: none;
}
}
@ -727,10 +732,6 @@ html {
box-sizing: border-box;
}
::-moz-selection {
background-color: #c7d6c8;
}
::selection {
background-color: #c7d6c8;
}
@ -1231,17 +1232,6 @@ body.page .main-navigation {
margin-right: calc( .25 * 1rem);
}
.main-navigation .main-menu .menu-item-has-children:not(.off-canvas)[focus-within] > .sub-menu {
display: block;
left: 0;
margin-top: 0;
opacity: 1;
width: auto;
min-width: 100%;
/* Non-mobile position */
/* Nested sub-menu dashes */
}
.main-navigation .main-menu .menu-item-has-children:not(.off-canvas):focus-within > .sub-menu {
display: block;
left: 0;
@ -1254,21 +1244,6 @@ body.page .main-navigation {
}
@media only screen and (min-width: 768px) {
.main-navigation .main-menu .menu-item-has-children:not(.off-canvas)[focus-within] > .sub-menu {
display: block;
margin-top: 0;
opacity: 1;
position: absolute;
left: 0;
right: auto;
top: auto;
bottom: auto;
height: auto;
min-width: -moz-max-content;
min-width: -webkit-max-content;
min-width: max-content;
transform: none;
}
.main-navigation .main-menu .menu-item-has-children:not(.off-canvas):focus-within > .sub-menu {
display: block;
margin-top: 0;
@ -1286,13 +1261,6 @@ body.page .main-navigation {
}
}
.main-navigation .main-menu .menu-item-has-children:not(.off-canvas)[focus-within] > .sub-menu.hidden-links {
left: 0;
width: 100%;
display: table;
position: absolute;
}
.main-navigation .main-menu .menu-item-has-children:not(.off-canvas):focus-within > .sub-menu.hidden-links {
left: 0;
width: 100%;
@ -1301,38 +1269,20 @@ body.page .main-navigation {
}
@media only screen and (min-width: 768px) {
.main-navigation .main-menu .menu-item-has-children:not(.off-canvas)[focus-within] > .sub-menu.hidden-links {
right: 0;
left: auto;
display: block;
width: max-content;
}
.main-navigation .main-menu .menu-item-has-children:not(.off-canvas):focus-within > .sub-menu.hidden-links {
right: 0;
left: auto;
display: block;
width: -webkit-max-content;
width: -moz-max-content;
width: max-content;
}
}
.main-navigation .main-menu .menu-item-has-children:not(.off-canvas)[focus-within] > .sub-menu .submenu-expand {
display: none;
}
.main-navigation .main-menu .menu-item-has-children:not(.off-canvas):focus-within > .sub-menu .submenu-expand {
display: none;
}
.main-navigation .main-menu .menu-item-has-children:not(.off-canvas)[focus-within] > .sub-menu .sub-menu {
display: block;
margin-top: inherit;
position: relative;
width: 100%;
left: 0;
opacity: 1;
/* Non-mobile position */
}
.main-navigation .main-menu .menu-item-has-children:not(.off-canvas):focus-within > .sub-menu .sub-menu {
display: block;
margin-top: inherit;
@ -1344,31 +1294,16 @@ body.page .main-navigation {
}
@media only screen and (min-width: 768px) {
.main-navigation .main-menu .menu-item-has-children:not(.off-canvas)[focus-within] > .sub-menu .sub-menu {
float: none;
max-width: 100%;
}
.main-navigation .main-menu .menu-item-has-children:not(.off-canvas):focus-within > .sub-menu .sub-menu {
float: none;
max-width: 100%;
}
}
.main-navigation .main-menu .menu-item-has-children:not(.off-canvas)[focus-within] > .sub-menu .sub-menu {
counter-reset: submenu;
}
.main-navigation .main-menu .menu-item-has-children:not(.off-canvas):focus-within > .sub-menu .sub-menu {
counter-reset: submenu;
}
.main-navigation .main-menu .menu-item-has-children:not(.off-canvas)[focus-within] > .sub-menu .sub-menu > li > a::before {
font-family: "Rubik", Trebuchet MS, Lucida Grande, Lucida Sans Unicode, Lucida Sans, Tahoma, sans-serif;
font-weight: normal;
content: " " counters(submenu, " ", none);
counter-increment: submenu;
}
.main-navigation .main-menu .menu-item-has-children:not(.off-canvas):focus-within > .sub-menu .sub-menu > li > a::before {
font-family: "Rubik", Trebuchet MS, Lucida Grande, Lucida Sans Unicode, Lucida Sans, Tahoma, sans-serif;
font-weight: normal;
@ -1426,6 +1361,8 @@ body.page .main-navigation {
right: 0;
left: auto;
display: table;
width: -webkit-max-content;
width: -moz-max-content;
width: max-content;
}
}
@ -1681,7 +1618,10 @@ body.page .main-navigation {
.post-navigation .nav-links a .meta-nav {
color: #0d1b24;
user-select: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.post-navigation .nav-links a .meta-nav:before, .post-navigation .nav-links a .meta-nav:after {
@ -1693,7 +1633,9 @@ body.page .main-navigation {
}
.post-navigation .nav-links a .post-title {
hyphens: auto;
-webkit-hyphens: auto;
-ms-hyphens: auto;
hyphens: auto;
}
.post-navigation .nav-links a:hover {
@ -1819,7 +1761,8 @@ body.page .main-navigation {
.screen-reader-text {
border: 0;
clip: rect(1px, 1px, 1px, 1px);
clip-path: inset(50%);
-webkit-clip-path: inset(50%);
clip-path: inset(50%);
height: 1px;
margin: -1px;
overflow: hidden;
@ -1835,7 +1778,8 @@ body.page .main-navigation {
border-radius: 3px;
box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
clip: auto !important;
clip-path: none;
-webkit-clip-path: none;
clip-path: none;
color: #21759b;
display: block;
font-size: 14px;
@ -2118,7 +2062,6 @@ body.page .main-navigation {
.site-header.featured-image .social-navigation svg,
.site-header.featured-image .site-featured-image svg {
/* Use -webkit- only if supporting: Chrome < 54, iOS < 9.3, Android < 4.4.4 */
-webkit-filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.35));
filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.35));
}
@ -2140,11 +2083,12 @@ body.page .main-navigation {
/* When image filters are active, make it grayscale to colorize it blue. */
}
@supports (object-fit: cover) {
@supports ((-o-object-fit: cover) or (object-fit: cover)) {
.site-header.featured-image .site-featured-image .post-thumbnail img {
height: 100%;
left: 0;
object-fit: cover;
-o-object-fit: cover;
object-fit: cover;
top: 0;
transform: none;
width: 100%;
@ -2314,10 +2258,6 @@ body.page .main-navigation {
}
}
.site-header.featured-image ::-moz-selection {
background: rgba(255, 253, 246, 0.17);
}
.site-header.featured-image ::selection {
background: rgba(255, 253, 246, 0.17);
}