Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.
And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.
Not all "critical" CSS being included (Bootstrap v4 alpha 5)
See original GitHub issueMy apologies in advance if this is not a critical issue, if I am posting this in the wrong place, if this is due to my misunderstanding of how to use critical, or if this is is instead a bootstrap problem.
Using the latest version of critical, v0.8.1, and using Bootstrap v4 alpha 2 in this HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Error Encountered During Authorization</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container-fluid m-t-1">
<div class="row">
<div class="col-xs-5">
<div class="card card-block">
<h4 class="card-title">Error{{ if .Description }}: {{ .Title }}{{ end }}</h4>
<h5>An error was encountered processing the authorization request:</h5>
<p class="card-text">
{{ if .Description }}{{ .Description }}{{ else }}{{ .Title }}{{ end }}
</p>
</div> <!-- end card -->
</div> <!-- end col-xs-5 -->
</div> <!-- end row -->
</div> <!-- end container-fluid -->
</body>
</html>
And running critical like the following:
critical ae_bs4_a2.html --inline > ae_bs4_a2.out.html
Will correctly include the ‘.card’ CSS selector. However, with Bootstrap v4 alpha 5 and this html (note, the only changes are the CDN location, and the m-t-1 class name was changed to mt-1):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Error Encountered During Authorization</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container-fluid mt-1">
<div class="row">
<div class="col-xs-5">
<div class="card card-block">
<h4 class="card-title">Error{{ if .Description }}: {{ .Title }}{{ end }}</h4>
<h5>An error was encountered processing the authorization request:</h5>
<p class="card-text">
{{ if .Description }}{{ .Description }}{{ else }}{{ .Title }}{{ end }}
</p>
</div> <!-- end card -->
</div> <!-- end col-xs-5 -->
</div> <!-- end row -->
</div> <!-- end container-fluid -->
</body>
</html>
And running critical like the following:
critical ae_bs4_a5.html --inline > ae_bs4_a5.out.html
Will produce inline’d css that DOES NOT include the .card classes (and others).
Is this a critical issue, or am I doing something incorrect here?
Issue Analytics
- State:
- Created 7 years ago
- Comments:31 (19 by maintainers)
Top Results From Across the Web
Top Related Medium Post
Top Related StackOverflow Question
Troubleshoot Live Code
Top Related Reddit Thread
Top Related Hackernoon Post
Top Related Tweet
Top Related Dev.to Post
Top Related Hashnode Post
I’m running into the same issue, but because of my particular build process, I can’t unminify the CSS beforehand.
The parsing issue is caused by this line in Bootstrap’s
_variables.scssfile:The part causing the problem is the stroke color:
stroke='#{$navbar-light-color}'which is compiled to:stroke='rgba(0,0,0,.5)'Changing this to a solid hex color E.g.
stroke='#7F7F7F'fixes the issue.This (incorrect parsing of original css, especially when containing errors) has been resolved in the latest (1.2) version of Penthouse - https://github.com/pocketjoso/penthouse/releases/tag/v1.2.0.
@bezoerb @addyosmani Would be great to see an upgrade pushed out.