Fela doesn't necessarily respect the order in which you write media queries, since all the rules for each media query get bundled up into a single <style> tag for SSR.

E.g...

<div className={css({
  color: 'red',
  '@media (min-width: 500px)': { color: 'blue' },
  '@media (min-width: 900px)': { color: 'green' }
})}>

...can result in this HTML...

<style>.a { color: red; }</style>
<style media="(min-width: 900px)">.c { color: green; }</style>
<style media="(min-width: 500px)">.b { color: blue; }</style>

On a 1000px viewport, both media queries match so the one you see depends on HTML ordering.

This is a bit of an issue with mobile-first CSS itself - our intent is usually to scope styles to a specific range but the @media rules we write don't actually reflect that. It just kind of works in traditional CSS because the order you write rules is maintained in the output.

This can be fixed by scoping rules more accurately to a media query where they're expected to apply. In the example above, we really mean we want blue in the 500-899px range, so let's adjust our media query to reflect that:

<div className={css({
  color: 'red',
  '@media (min-width: 500px) and (max-width: 899px)': { color: 'blue' },
  '@media (min-width: 900px)': { color: 'green' }
})}>

However mobile-first is super prevalent and people are going to write styles like that, so we can make things behave a bit more intuitively with https://github.com/robinweser/fela/tree/master/packages/fela-sort-media-query-mobile-first

as title said when running yarn storybook

node 16
windows 10
chrome

after open browser
there is a 404 error on network

and console error shows:

GET http://localhost:6006/stories.json 404 (Not Found)
Uncaught (in promise) SyntaxError: Unexpected token < in JSON at position 0

[vite] connecting...
[vite] connected.

Uncaught SyntaxError: The requested module '/@fs/***/node_modules/slash/index.js?v=08316dd6' does not provide an export named 'default'

When using your template repo without any modifications and running a build, the resulting file dist/static/index.html contains two errors:

1. One of the CSS styles looks like this: background:url(/src/components/TropicalPhotoButton/gunayala.jpg).
   The expected URL here would be something like /assets/gunayala.f6132071.jpg.
2. The favicon also contains an invalid URL: <link data-rh="" rel="icon" type="image/png" href="/src/layouts/favicon.png"/>
   The expected URL here would be something like /assets/favicon.1be1fd30.png.

The errors seem to be caused by module imports not being converted to the correct output URLs during build.

Not sure if it's relevant, but I'm running the build on Windows 10.

Description

I'm getting this message in my terminal

tropical-islands is incorrectly packaged. Please contact the package author to fix.

Steps to reproduce

1. Clone the project generated from the tropical template
2. Run yarn cmd
3. Run yarn dev
4. Open http://localhost:3000
5. See the message in the terminal

Details

• OS: MacOS 12.1
• Browser: Firefox 97.0b8 (64-bit)

Additional information

yarn run v1.22.17
$ node server
Pre-bundling dependencies:
  react
  fela
  react-fela
  tropical-islands
  react-dom/server
  (...and 7 more)
(this will be run only when your dependencies or config have changed)
🏝   Your Tropical site is now being served at: http://localhost:3000
tropical-islands is incorrectly packaged. Please contact the package author to fix.

P.S. contacting the package author ;)

Hi thanks for your work on this library, it looks really helpful.

I wanted to try and rewrite my personal site using this library, but I wanted to use Preact instead of React.

When I run the dev mode with ‘npm run dev’ I get this error: ‘can’t read property of undefined(reading context)’

I’m paraphrasing, but that’s the gist of the error. It appears to be an issue with MDXProvider and how it handles ‘context’.

Are you aware of any differences between Preact/React handle using ‘context’? Since Preact is supposed to be mostly compatible with React, I’m surprised I’d run into an issue like this. I’ll try to set up a demo and link it to this issue.

See webpack/webpack#10037

From webpack/webpack#10037 (comment) I understand there's not much we can do other than wait for chokidar to fix something, or wait for Webpack 5.

Please comment if you have another solution!

I'm using Tropical on a site where I'm trying out responsive-loader, which means customising the webpack config and sharing those customisations with Storybook.

I can't require my custom webpack config from build.js into Storybook's main.js because build.js is written as a script to be run from the command line, so it tries to, well, build when required by another file.