callstack / callstack/linaria

no styles applied to Preact app

Open
#941 1 comment 0 reactions 0 assignees View on GitHub
bug report 🦗 needs: complete repro 🖥️ platform: ssr 🛠️
Dominant language
TypeScript
Stars
12.4k
Forks
413
PR merge metrics
No merged PRs in 30d

Description

## Environment

node.js v16.10.0
npm 7.24.0
@linaria/core 3.0.0-beta.15
@linaria/react 3.0.0-beta.15
preact-cli 3.3.5

## Description

following the documentation at https://github.com/callstack/linaria/blob/master/docs/CONFIGURATION.md#preact , I ran into a couple of problems.

- problem no.1 was a unresolved dependency @linaria/shaker .

this appeared when attempting to start a dev server with `npm run dev`. it was easily solved via `npm install`.

- problem no.2 was that styles created by linaria do not appear on my components, though the styles created by CSS Module files do appear.

styled elements have classnames like `.c1qu2euk` but stylesheets contain selectors like `.c1qu2euk__Oj3Ly` (i.e. something which seems related but is definitely different). this happens in both the dev server launched via `npm run dev` and in static assets created via `npm run build`.

I have been unable to solve the second problem. I tried setting `classNameSlug` in linaria.config.js , which did indeed change the slug but did not change the mismatch between class names and CSS selectors.

## Reproducible Demo

1. clone the repo at https://github.com/orzechowskid/linaria-preact.git
2. `npm install`
3. `npm run dev`
4. browse to http://localhost:8080

the homepage (src/routes/home/index.js) should render a `

` styled with `css` and a `

` styled with `styled`. inspecting these elements in your browser's dev tools should make the problem visible.

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.