cssinjs / cssinjs/aphrodite-jss

[bug?] Warning: [JSS] Could not find the referenced rule logoAndCopyright in aphrodite-jss.

Open
#25 4 comments 0 reactions 0 assignees View on GitHub
bug complexity:high
Dominant language
JavaScript
Stars
94
Forks
14
PR merge metrics
No merged PRs in 30d

Description

I've got some styles using jss-nested with `$classname` syntax:

```js
const style = StyleSheet.create({
footer: {
// ...

'& $logoAndCopyright': {
// ...
},
},

logoAndCopyright: {},
})

```

then when I use it,

```js
css(style.logoAndCopyright)
```

I get an error like

```
Warning: [JSS] Could not find the referenced rule logoAndCopyright in aphrodite-jss.
```

Full output:

```
Warning: [JSS] Could not find the referenced rule logoAndCopyright in aphrodite-jss.
  | warning | @ | _app.js:26063
-- | -- | -- | --
  | (anonymous) | @ | _app.js:1331
  | onProcessStyle | @ | _app.js:1393
  | onProcessStyle | @ | _app.js:3186
  | onProcessRule | @ | _app.js:3171
  | addRule | @ | _app.js:3759
  | css | @ | _app.js:211
  | render | @ | _app.js:26170
  | finishClassComponent | @ | main.js:24135
  | updateClassComponent | @ | main.js:24097
  | beginWork | @ | main.js:24766
  | performUnitOfWork | @ | main.js:26805
  | workLoop | @ | main.js:26844
  | renderRoot | @ | main.js:26884
  | performWorkOnRoot | @ | main.js:27502
  | performWork | @ | main.js:27424
  | performSyncWork | @ | main.js:27396
  | requestWork | @ | main.js:27296
  | scheduleWork$1 | @ | main.js:27160
  | scheduleRootUpdate | @ | main.js:27727
  | updateContainerAtExpirationTime | @ | main.js:27754
  | updateContainer | @ | main.js:27781
  | module.exports.webpackJsonp.../node_modules/react-dom/cjs/react-dom.development.js.ReactRoot.render | @ | main.js:28064
  | (anonymous) | @ | main.js:28204
  | unbatchedUpdates | @ | main.js:27621
  | legacyRenderSubtreeIntoContainer | @ | main.js:28200
  | hydrate | @ | main.js:28256
  | renderReactElement | @ | main.js:6559
  | _callee5$ | @ | main.js:6534
  | tryCatch | @ | main.js:30206
  | invoke | @ | main.js:30440
  | prototype.(anonymous function) | @ | main.js:30258
  | step | @ | main.js:166
  | _next | @ | main.js:181
  | (anonymous) | @ | main.js:188
  | F | @ | main.js:1500
  | (anonymous) | @ | main.js:161
  | _doRender | @ | main.js:6551
  | doRender | @ | main.js:6433
  | _callee2$ | @ | main.js:6339
  | tryCatch | @ | main.js:30206
  | invoke | @ | main.js:30440
  | prototype.(anonymous function) | @ | main.js:30258
  | step | @ | main.js:166
  | _next | @ | main.js:181
  | (anonymous) | @ | main.js:188
  | F | @ | main.js:1500
  | (anonymous) | @ | main.js:161
  | _render | @ | main.js:6369
  | render | @ | main.js:6311
  | _callee$ | @ | main.js:6290
  | tryCatch | @ | main.js:30206
  | invoke | @ | main.js:30440
  | prototype.(anonymous function) | @ | main.js:30258
  | step | @ | main.js:166
  | _next | @ | main.js:181
  | Promise.then (async) |   |  
  | step | @ | main.js:176
  | _next | @ | main.js:181
  | Promise.then (async) |   |  
  | step | @ | main.js:176
  | _next | @ | main.js:181
  | Promise.then (async) |   |  
  | step | @ | main.js:176
  | _next | @ | main.js:181
  | (anonymous) | @ | main.js:188
  | F | @ | main.js:1500
  | (anonymous) | @ | main.js:161
  | ../node_modules/next/dist/client/next-dev.js | @ | main.js:6592
  | __webpack_require__ | @ | manifest.js:715
  | fn | @ | manifest.js:118
  | 0 | @ | main.js:35329
  | __webpack_require__ | @ | manifest.js:715
  | webpackJsonpCallback | @ | manifest.js:26
  | (anonymous) | @ | main.js:2
```

Contributor guide

No contributing guide indexed for this repository

Research direction

No repository file or test is named. Start by reproducing the StyleSheet.create and css(style.logoAndCopyright) example, then trace how jss-nested resolves the $classname reference; done means the nested style works without the referenced-rule warning.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript
Domain
frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.