Error: resolve-url-loader: CSS error with arbitrary value support

[robylosa94]

What version of @tailwindcss/jit are you using?

v0.1.3

What version of Node.js are you using?

v.12.20.0

What browser are you using?

N/A

What operating system are you using?

macOS

Reproduction repository

https://github.com/robylosa94/tailwindjit-issue.git

I'm using the arbitrary value support functionality like this:

In development everything is alright, but on build goes wrong the resolve-url-loader package:

I'm using webpack 4 and sass.

Thanks for the support!

[adamwathan]

Hey! Please provide a reproduction as requested — the reproduction field is required because it makes it a lot easier to troubleshoot stuff if we can just clone it down vs. creating it all from scratch.

[robylosa94]

@adamwathan Sorry, I have updated the request!

[valse]

Hi, I have the same issue on the last 0.1.5 version too

[adamwathan]

Can you test this on v0.1.7 and see if it fixes your issue? Thanks!

[valse]

Can you test this on v0.1.7 and see if it fixes your issue? Thanks!

I tested it with the v0.1.7 but I have the same build error, thank you for your help!

[adamwathan]

This is a tricky one to nail down but in my testing this only happens with Sass, and is not an issue if you are writing (Post)CSS. I took the reproduction repository and converted Grid.module.scss to Grid.module.css and refactored any Sass-specific syntax (like removing nesting) and the error went away.

Unfortunately I don't expect there is anything we can do on our side to fix this since it seems to be something to do with Sass specifically, so going to have to close without taking any action on it and recommend either not using Sass (I personally would recommend this, it's not worth the extra complexity/build slow down), or just writing regular CSS for these situations:

  .root {
-   @apply top-[30%];
+   top: 30%;
  }