Skip to content

Conversation

@RobinMalfait
Copy link
Member

@RobinMalfait RobinMalfait commented Aug 25, 2021

This PR will ensure that the build doesn't fail all of a sudden. It turns out that CSS doesn't like all the "invalid" css you throw at it. For example, when you have this:

<div class="w-[200px]h-[100px]"></div>

The issue here is that we forgot a space, however this crashes the build (even in watch mode) and you would have to restart the server to fix it. The reason for this is because the result of that line, results in something like this:

.w-\[200px\]h-\[100px\] {
  width: 200px]h-[100px
}

Obviously wrong, but if we minimize the issue, then this is also invalid syntax (Ref: https://twitter.com/adamwathan/status/1430481262016352260?s=20):

.foo {
  width: [;
}

https://jsfiddle.net/op01ubz6/1/

It sort of makes sense, but the browser doesn't have a problem with this :

.foo {
  width: i-am-a-big-boy;
}

https://jsfiddle.net/op01ubz6/


This PR will ensure that the first line (w-[200px]h-[100px]) will not even be generated.

@RobinMalfait RobinMalfait changed the title ensure arbitrary values only support valid values Ensure arbitrary values only support valid values Aug 25, 2021
@RobinMalfait RobinMalfait force-pushed the ensure-valid-arbitrary-value-values branch from 6bae085 to b0c8d18 Compare August 25, 2021 12:56
@adamwathan adamwathan merged commit fa3d454 into master Aug 26, 2021
@adamwathan adamwathan deleted the ensure-valid-arbitrary-value-values branch August 26, 2021 09:52
@adamwathan
Copy link
Member

Thank you sir!

@mnaderian
Copy link

Man, this was an effectively big PR.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants