CSS file fails to get built when purge.enabled is set to true #3080

GHNewbiee · 2020-12-13T21:50:45Z

GHNewbiee
Dec 13, 2020

Describe the problem:

When purge.enabled is set to true the css file build fails.

tailwindcss: 2.0.1

Reproduction:

A very simple config file as follows is enough to cause build failure.

tailwind.config.js

module.exports = {
  purge: {
    enabled: true,
    content: [
      './src/**/*.html',
      './src/**/*.js',
      './src/**/*.ts',
    ],
  },
}

but the following ones work fine:

module.exports = {
  purge: {
    enabled: false,
    content: [
      './src/**/*.html',
      './src/**/*.js',
      './src/**/*.ts',
    ],
  },
}

and

module.exports = {
  purge: [
    './src/**/*.html',
    './src/**/*.js',
    './src/**/*.ts',
  ],
}

LeLocTai · 2020-12-14T10:59:55Z

LeLocTai
Dec 14, 2020

Same here. Building also work if the glob array is empty. To be more precise, the problem is causing the css files to be passed through, keeping all the @tailwind directives intact. No error messages is present.

0 replies

LeLocTai · 2020-12-14T11:06:12Z

LeLocTai
Dec 14, 2020

Interestingly, using raw content work as expected:

module.exports = {
	purge: {
		enabled: true,
		content: [
			{
				raw: '<html><body><div class="mx-auto"></div></body></html>',
				extension: 'html'
			},
		],
	}
}

0 replies

RobinMalfait · 2020-12-14T12:01:14Z

RobinMalfait
Dec 14, 2020
Maintainer

Hey! Thank you for your bug report!
Much appreciated! 🙏

Can you provide more information on this case?

Can you create a minimal reproduction repository that showcases the issue?
Can you show the actual error that you get, apart from the "it fails to build"?
Can you verify that files in those ./src files exists?
Can you share your Node version (or check that you are on node 12.13 or higher)?

I tried reproducing it with the information you mentioned, but I don't have any issues.

0 replies

GHNewbiee · 2020-12-14T14:52:35Z

GHNewbiee
Dec 14, 2020
Author

Can you provide more information on this case?

Sure, but as my skills allow.

Can you create a minimal reproduction repository that showcases the issue?

Unfortunately, it's still beyond my skills.

Can you show the actual error that you get, apart from the "it fails to build"?

$ npx tailwindcss build ./tailwind.css -o ./tailwind.lit.css -c ./tailwind.config.js
  
  tailwindcss 2.0.2
  
  🚀 Building: tailwind.css
  
  ✅ Finished in 21 s
  📦 Size: 9.02KB
  💾 Saved to tailwind.lit.css

Note that the size of the file is very small to be the correct one!

Can you verify that files in those ./src files exists?

Yes, I do verify that they do exist.

Can you share your Node version (or check that you are on node 12.13 or higher)?

It's 15.4.0.

I tried reproducing it with the information you mentioned, but I don't have any issues.

Run to play lottery, it's your super lucky day!

It seems that for me and @LeLocTai, it's an unlucky day! The stars and planets are not aligned in a correct manner! -:)

0 replies

RobinMalfait · 2020-12-14T15:32:41Z

RobinMalfait
Dec 14, 2020
Maintainer

Yeah, I can't reproduce it, I need more information... A repository that showcases the error would be best. While I wait for that.

Can you share what the tailwind.css looks like?
Can you share an example file inside ./src that contains a tailwind class that is missing?

0 replies

GHNewbiee · 2020-12-14T17:33:45Z

GHNewbiee
Dec 14, 2020
Author

tailwind.css

@tailwind base;
@tailwind components;
@tailwind utilities;

tailwind.lit.css

*,
*::before,
*::after {
  box-sizing: border-box;
}

:root {
  -moz-tab-size: 4;
  -o-tab-size: 4;
     tab-size: 4;
}

*,
::before,
::after {
  box-sizing: border-box; /* 1 */
  border-width: 0; /* 2 */
  border-style: solid; /* 2 */
  border-color: #e2e8f0; /* 2 */
}

* {
  --tw-shadow: 0 0 #0000;
}

* {
  --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;
}

@-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(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);
  }
}

@media (min-width: 640px) {
}

@media (min-width: 768px) {
}

@media (min-width: 1024px) {
}

@media (min-width: 1280px) {
}

@media (min-width: 1536px) {
}

Note: Comments have been removed.

I hope @LeLocTai to provide a reproduction repository.

0 replies

ahtik · 2020-12-14T17:39:17Z

ahtik
Dec 14, 2020

@GHNewbiee could you also share an .html file that is using any of the tailwind classes?
Btw, there's also a shorthand version for the prune dir extensions, like
'./src/**/*.{js,ts,jsx,tsx}'

Is direct postcss giving the same result?
npx postcss ./tailwind.css -o tailwind.exp.css --verbose

What's the npx postcss --version?

0 replies

GHNewbiee · 2020-12-14T18:17:21Z

GHNewbiee
Dec 14, 2020
Author

@ahtik I use tailwind classes in components (LitElement) (js) files after JS-ifying the produced css file. For the time being, there is not an html file. Thanks for the shorthand version.

Both last two npx commands give npm ERR! could not determine executable to run. I follow the instructions given in

0 replies

GHNewbiee · 2020-12-14T18:44:30Z

GHNewbiee
Dec 14, 2020
Author

Note: In node_modules I see that both postcss and purgecss exist.

0 replies

GHNewbiee · 2020-12-14T19:05:54Z

GHNewbiee
Dec 14, 2020
Author

package.json

{
  ...
  "devDependencies": {
    "@reboost/plugin-litcss": "^0.18.2",
    "@reboost/plugin-postcss": "^0.18.2",
    "postcss-preset-env": "6.7.0",
    "reboost": "^0.18.2",
    "tailwindcss": "^2.0.2"
  },
  "dependencies": {
    "lit-element": "^2.4.0",
    "lit-html": "^1.3.0"
  }

0 replies

LeLocTai · 2020-12-15T09:58:39Z

LeLocTai
Dec 15, 2020

Ok so for me the problem was with gulp/postcss. I was building the compilation stream based on some criterias:

if(this) stream.pipe(that)

This has worked with many plugins for years. For postcss however, it only worked if written like this:

if(this) stream = stream.pipe(that)

I'm not sure if I been doing things wrong all this time and just got lucky, or postcss/gulp-postcss incorrectly modify the gulp stream somehow. Anyway, my problem is not specific to tailwind and likely not what OP is facing.

0 replies

adamwathan · 2020-12-15T11:06:03Z

adamwathan
Dec 15, 2020
Maintainer

This is definitely a configuration issue rather than a bug so moving this to discussions.

0 replies

Uh oh!

CSS file fails to get built when purge.enabled is set to true #3080

Uh oh!

Uh oh!

GHNewbiee Dec 13, 2020

Describe the problem:

Reproduction:

Replies: 12 comments

Uh oh!

LeLocTai Dec 14, 2020

Uh oh!

LeLocTai Dec 14, 2020

Uh oh!

RobinMalfait Dec 14, 2020 Maintainer

Uh oh!

GHNewbiee Dec 14, 2020 Author

Uh oh!

RobinMalfait Dec 14, 2020 Maintainer

Uh oh!

Uh oh!

GHNewbiee Dec 14, 2020 Author

Uh oh!

ahtik Dec 14, 2020

Uh oh!

GHNewbiee Dec 14, 2020 Author

Uh oh!

GHNewbiee Dec 14, 2020 Author

Uh oh!

GHNewbiee Dec 14, 2020 Author

Uh oh!

LeLocTai Dec 15, 2020

Uh oh!

adamwathan Dec 15, 2020 Maintainer

GHNewbiee
Dec 13, 2020

LeLocTai
Dec 14, 2020

LeLocTai
Dec 14, 2020

RobinMalfait
Dec 14, 2020
Maintainer

GHNewbiee
Dec 14, 2020
Author

RobinMalfait
Dec 14, 2020
Maintainer

GHNewbiee
Dec 14, 2020
Author

ahtik
Dec 14, 2020

GHNewbiee
Dec 14, 2020
Author

GHNewbiee
Dec 14, 2020
Author

GHNewbiee
Dec 14, 2020
Author

LeLocTai
Dec 15, 2020

adamwathan
Dec 15, 2020
Maintainer