vercel
if you are getting this error it means that your `css` tagged template literals were not transpiled.
👋 friend. Welcome to styled-jsx and thanks for contributing!
⚠️ IMPORTANT ⚠️
If you need help or have a question about styled-jsx please ask it on Spectrum https://spectrum.chat/styled-jsx or join our Slack community at https://zeit.chat and ask it in the #next channel.
Before you open a new issue please take a look at our Frequent Asked Questions and open issues.
Remember, often time asking in chat or looking at the FAQ/issues can be faster than waiting for us to reply to a new issue*.
If you are here to report a bug or request a feature please remove this introductory section and fill out the information below!
Do you want to request a feature or report a bug?
A bug
What is the current behavior?
If the current behavior is a bug, please provide the steps to reproduce and possibly a minimal demo or testcase in the form of a Next.js app, CodeSandbox URL or similar
webpack
{
test: cssRegex,
exclude: cssModuleRegex,
use: [{
loader: require('styled-jsx/webpack').loader,
options: {
type: 'scoped'
}
}],
// Don't consider CSS imports dead code even if the
// containing package claims to have no side effects.
// Remove this when webpack adds a warning or an error for this.
// See https://github.com/webpack/webpack/issues/6571
// sideEffects: true,
},
babel
"babel": {
"presets": [
"react-app"
],
"plugins": [
[
"styled-jsx/babel",
{
"optimizeForSpeed": true
}
]
]
}
index.css
.main-wrap {
background-color: skyblue;
}
p {
font-size: 16px;
color: red;
font-weight: bold;
}
index.js
import React, { useState } from 'react'
import { Button } from 'antd';
import styles from './index.css'
const Card = ({onClick}) => {
const [state, setstate] = useState(0)
return (
<div className='main-wrap'>
<p>
this is a card {state}
</p>
<Button type='primary' onClick={() => setstate(state + 1)}> add </Button>
<Button type='' onClick={() => onClick(state)}> 取 </Button>
<style jsx>{styles}</style>
</div>
)
}
export default Card;
What is the expected behavior?
Environment (include versions)
- OS: Big Sur
- Browser: chrome latest
- styled-jsx (version): 3.3.2
Did this work in previous versions?
I originally commented in issue #664, which I thought was related to my problem. But this issue hits the nail on the head. Other env versions include (for me):
- OS: Mac 10.15
- babel 7.12
- babel-loader: 8
- webpack 5
After several hours reading and experimenting, I finally got to know how webpack loader works.
The reason why this issue happens is because you didn't chain the babel loader together with styled-jsx webpack loader for css.
const babelLoader = {
loader: "babel-loader",
options: {
// your babel options
},
};
const webpackConfig = {
// entry: your antry
modules: {
rules: [
{
test: /\.css$/,
use: [
// here is the point, you need to tell webpack passing the result from styled-jsx loader to babel.
babelLoader,
{
loader: require("styled-jsx/webpack").loader,
options: {
type: "global",
},
},
],
},
{
test: /\.m?[j|t]sx?/,
exclude(modulePath) {
if (/node_modules\/styled-jsx/.test(modulePath)) {
return false;
}
return /node_modules/.test(modulePath);
},
use: babelLoader,
},
],
},
};
Thank you for this. I’ll give it a try and hope it works :)
On Sun, Dec 6, 2020 at 4:13 AM branson [email protected] wrote:
After several hours reading and experimenting, I finally got to know how webpack loader works. The reason why this issue happens is because you didn't chain the babel loader together with styled-jsx webpack loader for css.
const babelLoader = { loader: "babel-loader", options: { // your babel options },}; const webpackConfig = { // entry: your antry modules: { rules: [ { test: /.css$/, use: [ // here is the point, you need to tell webpack passing the result from styled-jsx loader to babel. babelLoader, { loader: require("styled-jsx/webpack").loader, options: { type: "global", }, }, ], }, { test: /.m?[j|t]sx?/, exclude(modulePath) { if (/node_modules/styled-jsx/.test(modulePath)) { return false; }
return /node_modules/.test(modulePath); }, use: babelLoader, }, ],},};
— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/vercel/styled-jsx/issues/685#issuecomment-739476005, or unsubscribe https://github.com/notifications/unsubscribe-auth/AA6475VCLIWFU2DAPHYSRQLSTNDMVANCNFSM4UCLOGRA .
@poor-branson is right, webpack loaders convert files to JS, in this case we convert CSS to a JS module which must be compiled with Babel (styled-jsx)
This seems to work fine for globally scoped css. But I’m having issues with scoped and resolved
On Tue, Jan 12, 2021 at 2:24 PM Giuseppe [email protected] wrote:
@poor-branson https://github.com/poor-branson is right, webpack loaders convert files to JS, in this case we convert CSS to a JS module which must be compiled with Babel (styled-jsx)
— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/vercel/styled-jsx/issues/685#issuecomment-758881921, or unsubscribe https://github.com/notifications/unsubscribe-auth/AA6475XYC36EDSPYSO5Z5ELSZSOYVANCNFSM4UCLOGRA .
same here, I'm getting: ReferenceError: css is not defined whenever I do:
import { css } from 'styled-jsx/css'; // this isn't updated in the docs yet
EDIT:
just found out this works
import { resolve } from 'styled-jsx/css';
Re: the notes at the top of this issue:
If you need help or have a question about styled-jsx please ask it on Spectrum https://spectrum.chat/styled-jsx or join our Slack community at https://zeit.chat/ and ask it in the #next channel.
The repo maintainer might want to modify that because the spectrum.chat link redirects to a 404 at https://github.com/features/discussions/styled-jsx, and the zeit.chat one redirects back to https://github.com/vercel/vercel/discussions with no mention of a Slack instance. That page says "Welcome to Vercel CLI Discussions!" so it's not super-clear if questions about styled-jsx are appropriate there.
