if you are getting this error it means that your `css` tagged template literals were not transpiled.

[harwinvoid]

👋 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?

[curiosity26]

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

[niyan-ly]

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,
      },
    ],
  },
};

[curiosity26]

Thank you for this. I’ll give it a try and hope it works :)

On Sun, Dec 6, 2020 at 4:13 AM branson notifications@github.com 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 .

[giuseppeg]

@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)

[curiosity26]

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 notifications@github.com 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 .

[macienrique]

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';

in styled-jsx@3.1.3

[jullite]

then I get 'resolve is not defined'

[RwwL]

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.