dirkolbrich / hugo-tailwindcss-starter-theme

Starter files for a Hugo theme with Tailwindcss
MIT License
400 stars 55 forks source link

Over purged #43

Closed pluveto closed 3 years ago

pluveto commented 3 years ago

In the production environment (run hugo), all the styles generated are as follows:

/*!modern-normalize v1.1.0 | MIT License | https://github.com/sindresorhus/modern-normalize*/
*,::before,::after {
    box-sizing: border-box
}

*,::before,::after {
    box-sizing: border-box;
    border-width: 0;
    border-style: solid;
    border-color: initial
}

*,::before,::after {
    --tw-border-opacity: 1;
    border-color: rgba(229,231,235,var(--tw-border-opacity))
}

@-webkit-keyframes spin {
    to {
        transform: rotate(360deg)
    }
}

@keyframes spin {
    to {
        transform: rotate(360deg)
    }
}

@-webkit-keyframes ping {
    75%,100% {
        transform: scale(2);
        opacity: 0
    }
}

@keyframes ping {
    75%,100% {
        transform: scale(2);
        opacity: 0
    }
}

@-webkit-keyframes pulse {
    50% {
        opacity: .5
    }
}

@keyframes pulse {
    50% {
        opacity: .5
    }
}

@-webkit-keyframes bounce {
    0%,100% {
        transform: translateY(-25%);
        -webkit-animation-timing-function: cubic-bezier(.8,0,1,1);
        animation-timing-function: cubic-bezier(.8,0,1,1)
    }

    50% {
        transform: none;
        -webkit-animation-timing-function: cubic-bezier(0,0,.2,1);
        animation-timing-function: cubic-bezier(0,0,.2,1)
    }
}

@keyframes bounce {
    0%,100% {
        transform: translateY(-25%);
        -webkit-animation-timing-function: cubic-bezier(.8,0,1,1);
        animation-timing-function: cubic-bezier(.8,0,1,1)
    }

    50% {
        transform: none;
        -webkit-animation-timing-function: cubic-bezier(0,0,.2,1);
        animation-timing-function: cubic-bezier(0,0,.2,1)
    }
}

*,::before,::after {
    --tw-shadow: 0 0 #0000
}

*,::before,::after {
    --tw-ring-inset: var(--tw-empty,/*!*/ /*!*/);
    --tw-ring-offset-width: 0px;
    --tw-ring-offset-color: #fff;
    --tw-ring-color: rgba(59, 130, 246, 0.5);
    --tw-ring-offset-shadow: 0 0 #0000;
    --tw-ring-shadow: 0 0 #0000
}

And all style written in templates are missing.

For example index.html

{{ define "main" }}

<div id="app" class="flex flex-col h-full">
    <header class="flex flex-col p-16 md:p-32">
    <div class="text-2xl">
        <a href="{{ .Site.BaseURL }}">xxx</span></a>    
    </div>
    <ul class="flex font-light" style="color: #b3b1ad;">
        <li style="color: #eee;"><a href="{{ .Site.BaseURL }}">Home</a></li>
        {{ range .Site.Menus.main }}
        <li class="mx-2">/</li>
        <li><a href="{{ .URL | absLangURL | safeURL }}">{{ .Name }}</a></li>
        {{- end -}}
    </ul>
    </header>
    <main class="flex-grow p-16 md:p-32">
    <canvas id="myCanvas"></canvas>
    <script src="http://paperjs.org/assets/js/paper.js"></script>
    {{ $js := resources.Get "js/ani.js" }}

    <script
        type="text/javascript"
        src="{{ $js.RelPermalink }}"
    ></script>
    </main>
    <footer class="p-16 md:p-32 font-light" style="color: #717271;">
...
    </footer>

    <style>
        body{
            background-color: #00010a; color: #eee;
        }
    </style>
</div>
{{- end -}}

But all works in development env.

dirkolbrich commented 3 years ago

C'mon, you know the drill.

Please provide all necessary informations to reproduce this bug. What's your setup, what steps did you take exactly, what result did you expect, what did you get, version information, project structure etc.

How to write a good bug report?

pluveto commented 3 years ago

Reproduce:

PS C:\Users\i> cd .\tmp\
PS C:\Users\i\tmp> hugo new site test-site
PS C:\Users\i\tmp> cd .\test-site\
PS C:\Users\i\tmp\test-site> code .\config.toml
# add line:
theme = "hugo-theme-tailwindcss-starter"

# Clone this repo to themes
PS C:\Users\i\tmp\test-site\themes> cd .\hugo-theme-tailwindcss-starter\
PS C:\Users\i\tmp\test-site\themes\hugo-theme-tailwindcss-starter> yarn
yarn install v1.22.10
...
done

PS C:\Users\i\tmp\test-site\themes\hugo-theme-tailwindcss-starter> cd ../../
PS C:\Users\i\tmp\test-site> hugo
Start building sites
...
Total in 8735 ms

in public/css/styles.min.7b24381d(...).css, got (formatted):

/*!modern-normalize v1.1.0 | MIT License | https://github.com/sindresorhus/modern-normalize*/
*,
::before,
::after {
  box-sizing: border-box;
}
*,
::before,
::after {
  box-sizing: border-box;
  border-width: 0;
  border-style: solid;
  border-color: initial;
}
*,
::before,
::after {
  --tw-border-opacity: 1;
  border-color: rgba(229, 231, 235, var(--tw-border-opacity));
}
@-webkit-keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
@-webkit-keyframes ping {
  75%,
  100% {
    transform: scale(2);
    opacity: 0;
  }
}
@keyframes ping {
  75%,
  100% {
    transform: scale(2);
    opacity: 0;
  }
}
@-webkit-keyframes pulse {
  50% {
    opacity: 0.5;
  }
}
@keyframes pulse {
  50% {
    opacity: 0.5;
  }
}
@-webkit-keyframes bounce {
  0%,
  100% {
    transform: translateY(-25%);
    -webkit-animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
    animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
  }
  50% {
    transform: none;
    -webkit-animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
    animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
  }
}
@keyframes bounce {
  0%,
  100% {
    transform: translateY(-25%);
    -webkit-animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
    animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
  }
  50% {
    transform: none;
    -webkit-animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
    animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
  }
}
*,
::before,
::after {
  --tw-shadow: 0 0 #0000;
}
*,
::before,
::after {
  --tw-ring-inset: var(--tw-empty, /*!*/ /*!*/);
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgba(59, 130, 246, 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
}
pluveto commented 3 years ago

scene are zipped: test-site.zip

PS C:\Users\i\tmp\test-site> node -v
v14.17.0
PS C:\Users\i\tmp\test-site> yarn -v
1.22.10
PS C:\Users\i\tmp\test-site> postcss --version
8.3.1
PS C:\Users\i\tmp\test-site> npm -v
6.14.13

hugo with debug output:

PS C:\Users\i\tmp\test-site> hugo  --debug --verbose
INFO 2021/08/23 16:03:47 Using config file:
Start building sites …
INFO 2021/08/23 16:03:47 syncing static files to C:\Users\i\tmp\test-site\public\
DEBUG 2021/08/23 16:03:47 Render page  to "\\hello\\index.html"
DEBUG 2021/08/23 16:03:47 Render page Tags to "\\tags\\index.html"
DEBUG 2021/08/23 16:03:47 Render page Categories to "\\categories\\index.html"
DEBUG 2021/08/23 16:03:47 Render page My New Hugo Site to "\\index.html"
DEBUG 2021/08/23 16:03:47 Render XML for "sitemap" to "\\sitemap.xml"
DEBUG 2021/08/23 16:03:47 Render 404 page to "\\404.html"
DEBUG 2021/08/23 16:03:47 Render page My New Hugo Site to "\\index.xml"
DEBUG 2021/08/23 16:03:47 Render page Tags to "\\tags\\index.xml"
DEBUG 2021/08/23 16:03:47 Render page Categories to "\\categories\\index.xml"
INFO 2021/08/23 16:03:47 postcss: use config file C:\Users\i\tmp\test-site\themes\hugo-theme-tailwindcss-starter\assets\css\postcss.config.js

                   | EN
-------------------+-----
  Pages            |  8
  Paginator pages  |  0
  Non-page files   |  0
  Static files     |  0
  Processed images |  0
  Aliases          |  0
  Sitemaps         |  1
  Cleaned          |  0

Total in 8457 ms
pluveto commented 3 years ago

Sorry, it's my fault. I forgot to add the following configuration.

build:
  writeStats: true
dirkolbrich commented 3 years ago

No problem at all. I'm glad you found it yourself. 👍