cssinjs/jss

Issue with SheetRegistry.toString({format: false}) minifyer - part of the css is not minified

Open

#1566 opened on Oct 19, 2021

View on GitHub
 (9 comments) (0 reactions) (0 assignees)JavaScript (7,000 stars) (434 forks)batch import
bugcomplexity:lowhelp wantedneeds reproductionneeds tests

Description

Expected behavior: Minify all the server-side CSS.

Describe the bug: Font faces and CSS variables are not getting minified In Next.js app.

Reproduction: Create CSS file with CSS variables and font faces, and get the registry string with Registry.toString({format: false})

Versions (please complete the following information):

  • react-jss: 10.8.0
  • Browser [e.g. chrome, safari]: chrome
  • OS [e.g. Windows, macOS]: macOS Feel free to add any additional versions which you may think are relevant to the bug.

Managing expectations:

Maintainers will not be fixing the problem you have unless they have it too, if you want it to get fixed:

  1. Submit a PR with a failing test
  2. Discuss a solution
  3. Implement it

You can also do the first step only and wait for someone else to work on a fix. Anything is much better than nothing.

Contributor guide

Tech stack
javascriptreactnodejsnextjs
Domain
frontendbackend
Issue type
bug
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
3
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
half day
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
stale
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
clear
Prerequisites
JavaScriptReactCSS
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
40
Research direction
Investigate the `SheetRegistry.toString` method in the JSS codebase, specifically the minification logic that handles CSS variables and font faces. Look for a minifier plugin or custom CSS processing that might be skipping these patterns. The issue suggests submitting a failing test first, so writing a test that reproduces the bug in a Next.js environment would be a good starting point. Check the existing test suites for similar integration tests.