Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Erroneous CSS optimization #9268

Open
thewaver opened this issue Jul 5, 2020 · 17 comments
Open

Erroneous CSS optimization #9268

thewaver opened this issue Jul 5, 2020 · 17 comments

Comments

@thewaver
Copy link

thewaver commented Jul 5, 2020

Preface

First of all, I'd like to apologize if this issue is not related to create-react-app itself. Please redirect me to the proper package if it isn't. I am not particularly knowledgeable when it comes to packages and setup.

Describe the bug

When creating an optimized build (npm build) I get erroneous CSS optimization (I assume "something" is optimizing incorrectly, but I have no idea what). This does not reproduce when simply running locally through npm start.

This is the CSS in question:

.selector {
  border-width: var(--border-width);
  border-color: var(--border-color);
}

it gets optimized into:

.selector {
  border: var(--border-width) solid var(--border-color);
}

which may seem correct at first, except border-width can be a set of values for the different "sides" of the border, and that does not work with the shorthand. (border: 20px 0 30px 0 solid red is not valid, for instance). So the properties should not be getting aggregated. At least as far as my understanding goes.

Environment

current version of create-react-app: 3.4.1

System:
OS: Windows 10 10.0.19041
CPU: (8) x64 Intel(R) Core(TM) i7-6700K CPU @ 4.00GHz
Binaries:
Node: 8.16.0 - C:\Program Files\nodejs\node.EXE
Yarn: Not Found
npm: 6.4.1 - C:\Program Files\nodejs\npm.CMD
Browsers:
Edge: 44.19041.1.0
Internet Explorer: Not Found
npmPackages:
react: ^16.12.0 => 16.13.1
react-dom: ^16.12.0 => 16.13.1
react-scripts: 3.4.1 => 3.4.1
npmGlobalPackages:
create-react-app: Not Found

Steps to reproduce

In "description". Essentially:

  • Create a CSS class that contains variable border-width and border-color.
  • Programmatically set border-width to represent multiple "sides" (10px 20px 0 30px).
  • Run npm start. Observe correct CSS.
  • Run npm build. Observe incorrect CSS.

For brevity, here's how to do step 2:

const rootStyle = document.documentElement.style;
rootStyle.setProperty("--border-width", "10px 20px 0 30px");

Reproducible demo

You can find my published, erroneously optimized page here:
https://protos.now.sh

Inspect any "input" and you'll see the CSS is incorrect.

@stale
Copy link

stale bot commented Aug 8, 2020

This issue has been automatically marked as stale because it has not had any recent activity. It will be closed in 5 days if no further activity occurs.

@stale stale bot added the stale label Aug 8, 2020
@thewaver
Copy link
Author

thewaver commented Aug 9, 2020

Wow - no response, and then marked as stale due to inactivity even though that inactivity is not the fault of the reporter. Sublime!

@stale stale bot removed the stale label Aug 9, 2020
@stale
Copy link

stale bot commented Sep 11, 2020

This issue has been automatically marked as stale because it has not had any recent activity. It will be closed in 5 days if no further activity occurs.

@stale stale bot added the stale label Sep 11, 2020
@thewaver
Copy link
Author

And again - is there something missing from my report? Can I provide something else? Am I reporting in the wrong place? I understand you need. to attend to a multitude of issues, but you have not said a word - and I don't mean "given a resolution", I literally mean "said anything" - for over 2 months now, during which time I have not been able to publish my project properly due to someone else's error. This is lamentable.

@stale stale bot removed the stale label Sep 11, 2020
@stale
Copy link

stale bot commented Oct 12, 2020

This issue has been automatically marked as stale because it has not had any recent activity. It will be closed in 5 days if no further activity occurs.

@stale stale bot added the stale label Oct 12, 2020
@thewaver
Copy link
Author

You can mark it as stale as many times as you want - I won't relent until I get a human to respond in a satisfactory manner.

@stale stale bot removed the stale label Oct 12, 2020
@thewaver
Copy link
Author

Issue is still valid. I'll make such a notation here every other week so Mr. StaleBot doesn't get any clever ideas...

3 similar comments
@thewaver
Copy link
Author

thewaver commented Nov 9, 2020

Issue is still valid. I'll make such a notation here every other week so Mr. StaleBot doesn't get any clever ideas...

@thewaver
Copy link
Author

Issue is still valid. I'll make such a notation here every other week so Mr. StaleBot doesn't get any clever ideas...

@thewaver
Copy link
Author

thewaver commented Dec 7, 2020

Issue is still valid. I'll make such a notation here every other week so Mr. StaleBot doesn't get any clever ideas...

@iansu
Copy link
Contributor

iansu commented Jun 2, 2021

Can you try the latest release and see if this is still an issue?

@iansu iansu removed the needs triage label Jun 2, 2021
@thewaver
Copy link
Author

thewaver commented Jun 3, 2021

Yes sir, will do.
Can you please indicate which packages specifically I should be updating?
I am guessing, in my ignorance, that create-react-app itself is not one of them, since it is only invoked to create the project the first time around. So this would be more a matter of which packages it adds to package.json with its latest version?

@thewaver
Copy link
Author

thewaver commented Jun 7, 2021

Sorry for the delay.
I have updated my local packages to the following:

current version of create-react-app: 4.0.3
System:
OS: Windows 10 10.0.19042
CPU: (8) ia32 Intel(R) Core(TM) i7-6700K CPU @ 4.00GHz
Binaries:
Node: 14.17.0 - C:\Program Files (x86)\nodejs\node.EXE
Yarn: Not Found
npm: 7.16.0 - C:\Program Files (x86)\nodejs\npm.CMD
Browsers:
Chrome: 91.0.4472.77
Edge: Spartan (44.19041.964.0), Chromium (91.0.864.41)
Internet Explorer: Not Found
npmPackages:
react: ^17.0.2 => 17.0.2
react-dom: ^17.0.2 => 17.0.2
react-scripts: 4.0.3 => 4.0.3
npmGlobalPackages:
create-react-app: Not Found

Then I ran the code under the following conditions:

  1. npm start -> no issues (as before)
  2. npm run build && serve -s build -> same issue as described in the original post

So problem is still present.

@thewaver
Copy link
Author

thewaver commented Jun 7, 2021

I have just landed on this: #10015
My understanding is still limited, but I am making an educated guess that the package mentioned there may be behind the issue reported here. I will open an issue in their repo and report back here once there is some sort of conclusion reached.

@thewaver
Copy link
Author

The issue was tracked to cssnano. Ticket is here: NMFR/optimize-css-assets-webpack-plugin#162
It is reported as fixed in version 5.0.4 - but it appears that I am still on version 4.x of that package (by looking into package-lock.json.

Is there something I can do on my side to upgrade to the latest package? (everything was set up using create-react-app and my understanding is limited).

@thewaver
Copy link
Author

thewaver commented Sep 2, 2021

Any news on updating the package?
I have tried to manually override dependencies to no avail.
At this point it has been over a year since I have opened this ticket and engagement has been subpar at best-

@stale
Copy link

stale bot commented Jan 9, 2022

This issue has been automatically marked as stale because it has not had any recent activity. It will be closed in 5 days if no further activity occurs.

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

No branches or pull requests

2 participants