Missing content
MaluNoPeleke opened this issue · 6 comments
MaluNoPeleke commented
As described in #466 not all content gets imported in the production ready css.
These are the two css files:
tailwind.css
@import './custom.css';
@tailwind base;
@tailwind components;
@tailwind utilities;
custom.css
/* Add a black background color to the top navigation */
.topnav {
background-color: #005F60;
overflow: hidden;
}
/* Style the links inside the navigation bar */
.topnav a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 16px 16px;
text-decoration: none;
font-size: 18px;
}
/* Change the color of links on hover */
.topnav a:hover {
background-color: #F78104;
color: white;
}
/* Add an active class to highlight the current page */
.topnav a.active {
background-color: #04AA6D;
color: white;
}
/* Hide the link that should open and close the topnav on small screens */
.topnav .icon {
display: none;
}
/* When the screen is less than 600 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */
@media screen and (max-width: 600px) {
.topnav a:not(:first-child) {display: none;}
.topnav a.icon {
float: right;
display: block;
}
.topnav .social {
display: none!important;
}
.topnav .search {
display: none!important;
}
}
/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
@media screen and (max-width: 600px) {
.topnav.responsive {position: relative;}
.topnav.responsive a.icon {
position: absolute;
right: 0;
top: 0;
}
.topnav.responsive a {
float: none;
display: block;
text-align: left;
}
.topnav.responsive .social {
display: block!important;
float: left;
text-decoration: none;
filter: invert(100%);
}
.topnav.responsive .search {
display: block!important;
}
}
.fa {
display: inline-block;
font: normal normal normal 14px/1 sans-serif;
font-size: inherit;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.fa-bars:before {
background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjxzdmcgY29udGVudFNjcmlwdFR5cGU9InRleHQvZWNtYXNjcmlwdCIgY29udGVudFN0eWxlVHlwZT0idGV4dC9jc3MiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDIwNDggMjA0OCIgaGVpZ2h0PSIyMDQ4cHgiIGlkPSJMYXllcl8xIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJ4TWlkWU1pZCBtZWV0IiB2ZXJzaW9uPSIxLjEiIHZpZXdCb3g9IjAuMCAwIDE1MzYuMCAyMDQ4IiB3aWR0aD0iMTUzNi4wcHgiIHhtbDpzcGFjZT0icHJlc2VydmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHpvb21BbmRQYW49Im1hZ25pZnkiPjxwYXRoIGQ9Ik0xNTM2LDE0NzJ2MTI4YzAsMTcuMzMzLTYuMzMzLDMyLjMzMy0xOSw0NXMtMjcuNjY3LDE5LTQ1LDE5SDY0Yy0xNy4zMzMsMC0zMi4zMzMtNi4zMzMtNDUtMTlzLTE5LTI3LjY2Ny0xOS00NXYtMTI4ICBjMC0xNy4zMzMsNi4zMzMtMzIuMzMzLDE5LTQ1czI3LjY2Ny0xOSw0NS0xOWgxNDA4YzE3LjMzMywwLDMyLjMzMyw2LjMzMyw0NSwxOVMxNTM2LDE0NTQuNjY3LDE1MzYsMTQ3MnogTTE1MzYsOTYwdjEyOCAgYzAsMTcuMzMzLTYuMzMzLDMyLjMzMy0xOSw0NXMtMjcuNjY3LDE5LTQ1LDE5SDY0Yy0xNy4zMzMsMC0zMi4zMzMtNi4zMzMtNDUtMTlzLTE5LTI3LjY2Ny0xOS00NVY5NjBjMC0xNy4zMzMsNi4zMzMtMzIuMzMzLDE5LTQ1ICBzMjcuNjY3LTE5LDQ1LTE5aDE0MDhjMTcuMzMzLDAsMzIuMzMzLDYuMzMzLDQ1LDE5UzE1MzYsOTQyLjY2NywxNTM2LDk2MHogTTE1MzYsNDQ4djEyOGMwLDE3LjMzMy02LjMzMywzMi4zMzMtMTksNDUgIHMtMjcuNjY3LDE5LTQ1LDE5SDY0Yy0xNy4zMzMsMC0zMi4zMzMtNi4zMzMtNDUtMTlTMCw1OTMuMzMzLDAsNTc2VjQ0OGMwLTE3LjMzMyw2LjMzMy0zMi4zMzMsMTktNDVzMjcuNjY3LTE5LDQ1LTE5aDE0MDggIGMxNy4zMzMsMCwzMi4zMzMsNi4zMzMsNDUsMTlTMTUzNiw0MzAuNjY3LDE1MzYsNDQ4eiIvPjwvc3ZnPg==");
background-size: 16px 16px;
display: inline-block;
width: 16px;
height: 16px;
content:"";
filter: invert(100%);
-webkit-filter: invert(100%);
transform: scale(1.5);
}
.header {
position: sticky;
top: 0;
}
.header .logo {
display: block;
float: left;
text-decoration: none;
font-size: 18px;
font-weight: bold;
color: white!important;
margin-right: 0%;
}
.header .menu {
display: block;
text-decoration: none;
}
.header .social {
display: block;
float: right;
text-decoration: none;
filter: invert(100%);
}
.header .search {
float: left;
padding: 14px;
}
.current-link {
color: #F78104!important;
font-weight: bold;
}
.pure-menu-active>.pure-menu-link, .pure-menu-link:focus, .pure-menu-link:hover {
background-color: #F78104;
background-color: #005F60;
background-color: #008083;
}
figure { width: 100%; }
img[data-sizes="auto"] { display: block; width: 100%; }
.lazysrcset-ratio {
@apply relative;
& > img {
@apply absolute top-0 left-0 w-full h-full block;
&:after {
content: '';
@apply block h-0 w-full;
}
}
}
/* class name must matches the value of `ratio` setting. */
.lazysrcset-ratio {
position: relative;
}
.lazysrcset-ratio > img {
display: block;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
.lazysrcset-ratio > img:after {
display: block;
width: 100%;
height: 0;
content: '';
}
Everything from this line downwards isn't included from the custom.css:
img[data-sizes="auto"] { display: block; width: 100%; }
RyanZim commented
Working fine for me without tailwind; please post the version numbers of postcss, postcss-import, etc. and your postcss.config.js
MaluNoPeleke commented
PostCSS version 8.3.6
PostCSS-Import version 14.0.2
package.json
{
"name": "kirbytest",
"version": "1.0.0",
"description": "My Kirby project",
"main": "index.js",
"scripts": {
"build": "postcss site/postcss/tailwind.css -o assets/css/style.css",
"watch": "postcss site/postcss/tailwind.css -o assets/css/style.css --watch",
"prod": "cross-env NODE_ENV=production postcss site/postcss/tailwind.css -o assets/css/style.css"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"@tailwindcss/typography": "^0.4.1",
"autoprefixer": "^10.3.1",
"cross-env": "^7.0.3",
"cssnano": "^5.0.7",
"postcss-cli": "^8.3.1",
"postcss-import": "^14.0.2",
"postcss-nesting": "^8.0.1",
"tailwindcss": "^2.2.7"
}
}
postcss.config.js
const cssnano = require('cssnano');
module.exports = {
plugins: [
require('postcss-import')({ path: "site/postcss/", root: "site/postcss/", from: "site/postcss/" }),
require('tailwindcss'),
require('postcss-nesting'),
require('autoprefixer'),
...process.env.NODE_ENV === 'production'
? [cssnano({
preset: 'default',
})]
: []
]
}
tailwind.config.js
module.exports = {
purge: {
preserveHtmlElements: true,
mode: 'all',
enabled: true,
content: [
'./site/templates/*.php',
'./site/snippets/*.php',
'./site/tailwind/*.css',
],
},
darkMode: false, // or 'media' or 'class'
theme: {
extend: {},
},
variants: {
extend: {},
},
plugins: [
require('@tailwindcss/typography'),
],
}
RyanZim commented
From looking at your setup; I don't think you should need to pass any options to postcss-import in your config. Does removing them make any difference?
MaluNoPeleke commented
No and I also just discovered that the following styles also don't get imported (they are put above the figure one) but I cannot find the styles within the styles.css:
.current-link {
color: #F78104!important;
font-weight: bold;
}
.pure-menu-active>.pure-menu-link, .pure-menu-link:focus, .pure-menu-link:hover {
background-color: #F78104;
background-color: #005F60;
background-color: #008083;
}
RyanZim commented
You'll need to create a reduced test case to debug this. Remove things one-by-one until you get down to the smallest setup that will reproduce the problem.
MaluNoPeleke commented
It works if I enable Tailwinds JIT mode so it seems to be an issue with Tailwind...