Skip to content

CSS get bundled which breaks with custom properties #7748

Closed
@GrimLink

Description

@GrimLink

With react-scripts build some css longhand properties get merged to a shorthand.
This is not always the desired result and is breaking with css custom properties.

It would be nice if we could disable some compression options on a react build via a config.
Example also with the calc minification from css nano

Or this behavior gets fixed.

Input:

.some-class {
    border-width: var(--border-width, 0 0 1px);
    border-style: var(--border-style, solid);
    border-color: var(--border-color, #eee);
}

Becomes this:

.some-class {
    border:
        var(--border-width, 0 0 1px)
        var(--border-style, solid)
        var(--border-color, #eee);
}

Expected:

.some-class {
    border: var(--border-style, solid) var(--border-color, #eee);
    border-width: var(--border-width, 0 0 1px);
}

Environment Info:

System:
OS: macOS 10.14.6
CPU: (4) x64 Intel(R) Core(TM) i5-3210M CPU @ 2.50GHz
Binaries:
Node: 10.16.0 - /usr/local/opt/node@10/bin/node
Yarn: 1.17.0 - /usr/local/bin/yarn
npm: 6.9.0 - /usr/local/opt/node@10/bin/npm
Browsers:
Chrome: 78.0.3904.34
Firefox: Not Found
Safari: 13.0.1
npmPackages:
react: ^16.9.0 => 16.9.0
react-dom: ^16.9.0 => 16.9.0
react-scripts: ^3.1.1 => 3.1.1
npmGlobalPackages:
create-react-app: 3.0.1

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