Skip to content

Erroneous CSS optimization #9268

Open
Open
@thewaver

Description

@thewaver

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.

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions