Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

CSS is missed in `transform` hook

See original GitHub issue

Describe the bug

CSS is missed in transform hook now.

code argument of transform(code, id) hook contains only "export default ''" string. There is no CSS.

It worked before — with Vite 2.5.7.

For example, I was able to generate such style.css

With this plugin: (using), (plugin code)

For the reproduction uncomment these lines of the minimal reproduction repo

Reproduction

https://github.com/AlttiRi/serve-json-gz-length-test

System Info

OS: Windows 10 10.0.19043
Node: 17.3.0
Yarn: 1.22.5
npm: 7.19.1
vite: 2.7.2

Used Package Manager

npm

Logs

No response

Validations

Follow our Code of Conduct
Read the Contributing Guidelines.
Read the docs.
Check that there isn’t already an issue that reports the same bug to avoid creating a duplicate.
Make sure this is a Vite issue and not a framework-specific issue. For example, if it’s a Vue SFC related bug, it should likely be reported to https://github.com/vuejs/vue-next instead.
Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
The provided reproduction is a minimal reproducible example of the bug.

Issue Analytics

State:
Created 2 years ago
Comments:7 (2 by maintainers)

Top GitHub Comments

1reaction

AlttiRicommented, Jan 10, 2022

The bug appeared with Vite 2.6.0.

With “~2.5.10” it works OK.

0reactions

AlttiRicommented, Dec 3, 2022

With the latest Vite (3.2.4) while this issue is still actual, I can handle CSS:

a plugin with the transform hook should be used as a Vite’s plugin
build.cssCodeSplit should be false

In this case it works with minor changes:

ignore the additional CSS from index.html
the result bundle name is index.css, not style.css

I use the plugin to generate such CSS: https://alttiri.github.io/file-manager-snapshot-explorer/index.css

Because Vite.js still does not support SourceMaps for CSS. https://github.com/vitejs/vite/issues/2830

Top Results From Across the Web

CSS ::before and ::after for custom animations and transitions

Learn how to create gorgeous custom animations and transitions using CSS ::before and ::after pseudo-elements, box shadows, and more.

babel-plugin-css-modules-transform - npm package - Snyk

Looks like babel-plugin-css-modules-transform is missing a security policy. ... This plugin is based on the fantastic css-modules-require-hook.

A Complete Guide to CSS Functions

Like any other programming language, CSS has functions. ... selectors are incredibly versatile, yet often overlooked and under-appreciated.

Using useRef hook, modify CSS style for a react component

You should instead go for state and CSS classes. State determines the element's classes which ultimately determines the style of the element. – ......

FAQs - styled-components

New hooks-based component model ... Note regarding css @import and createGlobalStyle ... Missing Declarations for styled-components/native?