vercel/next-plugins

Official Next.js plugins

This repository has been deprecated in favor of the Next.js monorepo: https://github.com/vercel/next.js

next-plugins's Issues

It is not behaving as expected

I define an interface, then pass it to my Component as Props and/or State the interface doesn't really apply.
Because if I try to create a state variable diferrent from the interface it doesn't throw any error neither points the error out.

But if I implement a function (like someFunction()) with typed params and try to call it, VS Code will tell me it is wrong, but still tsc will not throw an error.

Check it out here:

import React from 'react';

interface ops {
  a: number;
}

class Index extends React.Component<ops, ops> {
  constructor(props: ops){
    
    super(props);

    //Should tell me there is no "b" in the state's type
    this.state = {
      b: 'olar'
    }
  }

  someFunction(param1: string, param2: number){
    return param1+param2.toString();
  }

  render(){
    return(
      <div>
        { this.someFunction(5, {attr: 'it is behaving as expected'}) }
      </div>
    );  
  }

}

export default Index;

My tsconfig.json file:

{
  "compileOnSave": false,
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "jsx": "preserve",
    "allowJs": true,
    "moduleResolution": "node",
    "allowSyntheticDefaultImports": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "removeComments": false,
    "preserveConstEnums": true,
    "sourceMap": true,
    "skipLibCheck": true,
    "baseUrl": ".",
    "typeRoots": [
      "./node_modules/@types"
    ],
    "lib": [
      "dom",
      "es2015",
      "es2016"
    ]
  }
}

What am I doing wrong?

style.css href when using a custom Express server

I'm using a custom Express server with next.js in a subdirectory. I have installed @zeit/next-css and added next.config.js and pages/_document.js per the README; however, /_next/static/style.css returns a 404. I've confirmed that the file is being built to .next/static/style.css. I've also tried to ping it at a few different URLs (e.g. /_next/-/static/style.css), but I can't find where it's being served. This is all true in both development and production. Do I need to configure the static folder in my custom server.js (code below)?

const express = require('express');
const next = require('next');

const dev = process.env.NODE_ENV !== 'production';
const app = next({ dir: './client', dev });
const handle = app.getRequestHandler();

app
  .prepare()
  .then(() => {
    const server = express();

    // custom routes
    server.get('/s/:id', (req, res) => {
      const actualPage = '/show';
      const queryParams = { id: req.params.id };
      app.render(req, res, actualPage, queryParams);
    });

    // default route
    server.get('*', (req, res) => {
      return handle(req, res);
    });

    server.listen(3000, err => {
      if(err) throw err;
      console.log('> Ready on http://localhost:3000');
    });
  })
  .catch(ex => {
    console.error(ex.stack);
    process.exit(1);
  });

@zeit/next-typescript Not up to date on npm install

I am wanting to use (TS Transform Graphql)[https://github.com/firede/ts-transform-graphql-tag] with the @zeit/next-typescript package. When I install the @zeit/next-typescript package the plugin is not initialized. When I look at the node_modules/@zeit/next-typescript/index.js file I find line 31 contains

options: {
   transpileOnly: true
}

Instead of:

options: Object.assign({}, {
   transpileOnly: true
}, nextConfig.typescriptLoaderOptions)

Would it be possible to re-release to take advantage of the typescriptLoaderOptions option?

Note I am using yarn and did a full cache clean and re-install with no fix. Using "@zeit/next-typescript": "^0.0.9"

[next-css] unable to access to static file

Repo link https://github.com/ZhengYuTay/next-redux-withcss-jest

<link rel="stylesheet" href="/_next/static/style.css" /> is present in _document.js

but unable to it's not able to be accessed.

Not finding _next/static/

Hi, I am using next-css with next-typescript, but when I import inside my _document.tsx the CSS files, which are all inside _next/static/, the styles are not applied to the pages of the app.

My project/pages/_document.tsx tag has:

<link rel="stylesheet" href="../_next/static/header.css" />
<link rel="stylesheet" href="../_next/static/index.css" />

My next.config.js is:
`
const withTypescript = require('@zeit/next-typescript');

const withCSS = require('@zeit/next-css');

module.exports = withCSS(withTypescript({
webpack(config, options) {
return config
},
typescriptLoaderOptions: {
transpileOnly: false
}
}));
`

My _next/ and pages/ folders are ate the same leve in the Project's root folder.

The styles are not being applied anywhere and I can't figure out why.

Spread operator doesn't work in next-css

Next 5.0.1-canary.2
Node 8.1.3

yarn run v1.3.2
$ next build
/project/node_modules/@zeit/next-css/css-loader-config.js:31
      ...cssLoaderOptions
      ^^^

SyntaxError: Unexpected token ...
    at createScript (vm.js:74:10)
    at Object.runInThisContext (vm.js:116:10)
    at Module._compile (module.js:533:28)
    at Object.Module._extensions..js (module.js:580:10)
    at Module.load (module.js:503:32)
    at tryModuleLoad (module.js:466:12)
    at Function.Module._load (module.js:458:3)
    at Module.require (module.js:513:17)
    at require (internal/module.js:11:18)
    at Object.<anonymous> (/project/node_modules/@zeit/next-css/index.js:2:25)
    at Module._compile (module.js:569:30)
    at Object.Module._extensions..js (module.js:580:10)
    at Module.load (module.js:503:32)
    at tryModuleLoad (module.js:466:12)
    at Function.Module._load (module.js:458:3)
    at Module.require (module.js:513:17)
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

Tried to remove existing next.config.js and replace it with vanila one like

const withCss = require('@zeit/next-css');

module.exports = withCss({
  webpack: (config, { buildId, dev, isServer, defaultLoaders }) => {

    return config;
  }
});

Still doesn't work

Btw, my babelrc

{
  "presets": [
    "next/babel",
    "stage-0",
    "flow",
  ],
  "plugins": [
    ["styled-components", { "ssr": true, "displayName": true, "preprocess": false, "minify": false, "transpileTemplateLiterals": false } ],
    "babel-plugin-root-import",
    "recharts",
    ["transform-define", "./env-config.js"],
    "transform-export-extensions",
    "transform-decorators-legacy",
    [
      "inline-import",
      {
        "extensions": [".css"]
      }
    ]
  ],
  "env": {
    "debug": true
  }
}

can give a example config

can you make a example config ,like extractCSSPlugin

how to clean browser css cache

Hi @timneutkens

In production the stylesheet is compiled to .next/static/style.css. You have to include it into the page using either next/head or a custom _document.js. The file will be served from /_next/static/style.css

usually we will use hash code to clean browser cache if css file has any modification, like style.41d523.css

how can we do this on this plugin?

Plugin and next.config exports

Hey guys,

I've recently seen a post about using multiple plugins but does anyone know a way of exporting the plugins with other modules? In particular assetsPrefix.

I've tried a few different ways:

const withSass = require('@zeit/next-sass');
module.exports = {
    assetPrefix: '/staging',
    withSass
}

const withSass = require('@zeit/next-sass');
module.exports = {
    assetPrefix: '/staging',
    withSass() {},
}

const withSass = require('@zeit/next-sass');
module.exports = {
    assetPrefix: '/staging',
    withSass : withSass() {},
}

But it seems to fail on compiling my sass.

Thanks!

next-css does not include page-specific styles

When running in production mode, only "shared" styles are included in the outputted stylesheet. See https://github.com/stephenmathieson/next-plugins-css-bug to reproduce.

What if we used happy pack for speed gains

What do you guys think of incorporating happy-pack for speed gains in some of these plugins. I can submit a PR / PRs

How to use multiple plugins

Hello i want use sass and typescript plugin on my project but i can't found multiple plugins usage example.

my next.config.js file is;

// next.config.js
const withSass = require('@zeit/next-sass')
const withTypescript = require('@zeit/next-typescript')

module.exports = withSass()
module.exports = withTypescript()

but doesn't work. Only working typescript because last export is typescript.

how i can merge two different plugin?

Thanks

next-css Production Example

The example in this documentation points out to statically <link> to the statically generated CSS file. However, when doing so this will also apply to dev environments, where this link may be 404 or has outdated CSS styles. Please demonstrate an example that only uses this static file reference for production.

Style Loader Invalid Options

Hi, I'd like to use TypeScript with next-css. For now I get this error:

This is my next.config.js file.

const withCSS = require('@zeit/next-css')

module.exports = withCSS({
  cssModules: true,
  webpack: (config, options) => {
    const { dir, defaultLoaders } = options
    // add TypeScript support
    config.resolve.extensions.push('.ts', '.tsx')
    config.module.rules.push({
      test: /\.+(ts|tsx)$/,
      include: [dir],
      exclude: /node_modules/,
      use: [
        defaultLoaders.babel,
        { loader: 'ts-loader', options: { transpileOnly: true } }
      ]
    })

    return config
  }
})

I get the same with module.exports = withCSS(withTypescript())

Am I doing something wrong?

Thanks,
Paul

How to add includePaths to sass-loader

How to add includePaths to sass-loader?

Rendering `undefined`

Following the example repo the app renders briefly and then show up as undefined. I've put together an example at: https://glitch.com/edit/#!/bustling-hook

It looks like it could be a problem loading the common.js module.

Error when using it with next 5

yarn run v1.3.2
$ rimraf node_modules/.cache/babel-loader && next
> Using external babel configuration
> Location: "/project/.babelrc"
(node:23917) UnhandledPromiseRejectionWarning: Unhandled promise rejection (rejection id: 1): TypeError: extractedChunk.getNumberOfModules is not a function
(node:23917) UnhandledPromiseRejectionWarning: Unhandled promise rejection (rejection id: 2): TypeError: extractedChunk.getNumberOfModules is not a function

My next.config.js

// https://github.com/zeit/next.js/blob/master/examples/with-global-stylesheet

const path = require('path');
const glob = require('glob');
const withCSS = require('@zeit/next-css')

module.exports = withCSS({
  webpack(config, { dev, isServer }) {
    //const originalEntry = config.entry
    //config.entry = async () => {
      //const entries = await originalEntry()

      //if (entries['main.js']) {
        //entries['main.js'].unshift('./client/polyfills.js')
      //}

      //return entries
    //}

    // Set project root path as part of the resoler
    config.resolve = {
      modules: [
        ...config.resolve.modules,
        path.resolve('./')
      ]
    }

    // Original Issue:
    // https://github.com/zeit/next.js/issues/1877#issuecomment-299396974
    //if (config.resolve.alias) {
      //delete config.resolve.alias['react'];
      //delete config.resolve.alias['react-dom'];
    //}

    // TODO: Remove this once nextjs issue has been resolved: https://github.com/zeit/next.js/issues/1582
    //config.plugins = config.plugins.filter(plugin => {
      //if (plugin.constructor.name === 'UglifyJsPlugin') {
        //return false;
      //} else {
        //return true;
      //}
    //});

    config.module.rules.push(
      // yaml
      {
        test: /\.yaml$/,
        use: [
          {
            loader: 'emit-file-loader',
            options: {
              name: 'dist/[path][name].[ext]'
            }
          },
          'json-loader',
          'yaml-loader'
        ]
      },

      {
        test: /\.(graphql|gql)$/,
        exclude: /node_modules/,
        use: [
          {
            loader: 'emit-file-loader',
            options: {
              name: 'dist/[path][name].[ext]'
            }
          },
          'babel-loader',
          'graphql-tag/loader'
        ]
      }
    );

    return config;
  }
});

next-less is not word when build

Great work on Next.js 5.0!

I think that's a bug for next-less

I have make a test project, when I use "npm run dev", It worked well, but when I build it, is not worked,

the .next/static catalog has style.css

but the page can't find the css it‘s render like this " href="/_next/a270d480-e3ee-4ed7-a055-5434f0caa191/page/_error.js" "

I have make a test project : https://github.com/supeng911/next-less-test

Trouble with order of styles in output file

I'm not sure should that trouble be here or in nextjs rep, but lets start from here and if will be need ed - move this.

Let's start:
In simple way we have file like that:

import React, {Component} from 'react'
import '/styles/base.scss'
import css from './Wrapper.scss'
import Head from 'next/head'

export function withWrapper(Child) {
  class Wrapper extends Component {
    static async getInitialProps(...args){
      if (typeof Child.getInitialProps !== 'function') {
        return {}
      }
      let initialProps = Child.getInitialProps(...args)
      if (initialProps instanceof Promise) {
        initialProps = await initialProps
      }
      return initialProps
    }
    
    render() {
      return <div className={css.main}>
        <Head>
          <link rel="stylesheet" href="/_next/static/style.css"/>
        </Head>
        <Header/>
        <div className={css.container}>
          <Child {...this.props}/>
        </div>
      </div>
    }
  }
  return Wrapper
}

export default withWrapper

I expect styles in file styles/base.css will be at the top of style.css. Bcs it's my vendor.
But now styles of Wrapper.scss are at the top of the file style.css. Even more, all the styles that are in the Child component will get to the top of the file.

Looks like calling of components starts from the deepest one and all of styles adds with a push, so in the end we got: styles of deepest child will be at top of styles.css and style, what we expect to see at the top (vendor, normalize, etc...) appears at the bottom of file....

For myself I hacked it with spliting code in two files: vendor and app, but I think it is not the good way to solve that trouble.

@zeit/next-css is not working in production

i have followed the listed instruction from readme, i can run bootstrap 4 with in development.
However, i can't run it with production.

https://github.com/jefftham/next-css-modules

.next/static/styles.css only has one page style

I have multi pages. Each page has its own styles files included.

// pages/a.js
import "../styles/pageA.scss"

// pages/b.js
import "../styles/pageB.scss"

After building in production mode.
I got one file which stored at .next/static/style.css

All style of pageA.scss is missing. If I remove the import "../styles/pageB.scss" statement, then build. I can see the style of page a.

Is the styles.css generated multi times, and the second replace the first one. So the style of page a is missing in the end.

CSS HMR not working with 'extracted-loader'

I don't know why, but in @zeit/next-sass not working HMR. I tried to fix and swap extracted-loader with css-hot-loader and it's working for me.

Is hmr working now or not?

[email protected] (also tested in 5.0.1-canary.2)

my next-config

const webpack = require('webpack')
const withSass = require('@zeit/next-sass')

module.exports = withSass({
  cssLoaderOptions: {
    modules: true,
    localIdentName: '[local]-[hash:base64:5]',
    sourceMap: false
  },
  sassLoaderOptions: {
    sourceMap: false,
    includePaths: ["./", "./styles/base"]
  },
  webpack(config) {
    const providePlugin = new webpack.ProvidePlugin({
      'fetch': 'isomorphic-unfetch',
      'React': 'react'
    })
    config.plugins.push(providePlugin)
    return config
  }
})

It is not really working

I make all to process to install and then create a next.config.js exactly as described in README.md.
But it never throws errors when I pass props to a component that were not defined as its props' types.

Example:
Default.tsx
`interface Props {
uma: number;
duas: string;
}

export default (props: Props) => {
return(

Olar, essas são as props: { props.uma+' e '+props.duas }

);
}`

index.tsx
`render(){
return(

) }`

It doesn't warn me neither throws an error when I execute "yarn run dev".

Why is that?
thanks!

Multi plugins not working as result gets overwritten

I need to use @zeit/next-css and @zeit/next-sass at the same time, but this is failing by just using module.exports = withCSS(withSass(...)) as only one type gets compiled.

I'm trying to provide a simple example including the result map to get the issue resolved. I'm referencing to the issues

#34
#69
#58
vercel/next.js#3852

This is a simple example what I'm doing and what the result looks like.

static/styles/style.css

#content {
  font-size: 3rem
}

static/styles/style.sass

#title
  font-size: 1rem

next.config.js

const withCSS = require('@zeit/next-css')
const withSass = require('@zeit/next-sass')

module.exports = withCSS(withSass({
  webpack: (config) => {
    return config
  }
}))

components/Header.js

import Head from 'next/head'
import '/static/styles/style.css'
import '/static/styles/style.sass'

export const Header = props => {
  return (
    <Head>
      <meta httpEquiv='content-type' content='text/html;charset=UTF-8' />
      <meta charSet='utf-8' />
      <title>Title</title>
      <link rel='stylesheet' href='/_next/static/style.css' />
    </Head>
  )
}

The result /.next/static/style.css content is only:

#content {
  font-size: 1rem
}
/*# sourceMappingURL=style.css.map*/

I'm missing the compiled sass file.

If I switch next.config.js to withSass(withCSS({..})) the result is only:

#title {
  font-size: 3rem; }
/*# sourceMappingURL=style.css.map*/

The map for the last one is:

{"version":3,"sources":["/Users/project/static/styles/style.sass"],"names":[],"mappings":"AAAA;EACE,gBAAgB,EAAE","file":"static/style.css","sourcesContent":["#title {\n  font-size: 3rem; }\n\n\n\n// WEBPACK FOOTER //\n// ./static/styles/style.sass"],"sourceRoot":""}

localIdentName support in next-css?

Hi there,

Is localIdentName passable as an option to the webpack css loader? (It doesn't look like it from the code but I may be missing something).

We have a custom localIdentName convention that allows our designers to pass back feedback to the dev team. I'd like to get that working in our Next.js app.

I put together a PR in case this is something that doesn't exist but would be useful.

less use error

When I use the module @zeit/next-less, my configuration in next.config.js

const withLess = require('@zeit/next-less')
module.exports = withLess({
  cssModules: true
})

I use the example of with-next-css, and change style.css into style.less and even remove the file's content (had changed import '../style.css' in index.js to import '../style.less' ), the error is

Error in ../style.less
Module build failed: Error: Cannot find module 'less'
    at Function.Module._resolveFilename (module.js:538:15)
    at Function.Module._load (module.js:468:25)
    at Module.require (module.js:587:17)
    at require (internal/module.js:11:18)
    at Object.<anonymous> (D:\work\wed\frontend-development\clone\with-next-css-app\node_modules\less-loader\dist\index.js:7:13)
    at Module._compile (module.js:643:30)
    at Object.Module._extensions..js (module.js:654:10)
    at Module.load (module.js:556:32)
    at tryModuleLoad (module.js:499:12)
    at Function.Module._load (module.js:491:3)
    at Module.require (module.js:587:17)
    at require (internal/module.js:11:18)
    at Object.<anonymous> (D:\work\wed\frontend-development\clone\with-next-css-app\node_modules\less-loader\dist\cjs.js:3:18)
    at Module._compile (module.js:643:30)
    at Object.Module._extensions..js (module.js:654:10)
    at Module.load (module.js:556:32)

Is this due to my next-less configuration error?

import './global.scss' has no effect in _document.js?

Testing out Next.js, and trying to understand how to include a global stylesheet. I'm seeing some confusing behavior.

This is my next.config.js:

const withSass = require("@zeit/next-sass");
module.exports = withSass({
    cssModules: true
})

I have a global.scss file which simply changes the background color:

html, body {
  background: blue;
}

1. In my _document.js js, I've tried import './global.scss'; but there's no effect, even after a server restart
2. I can put import './global.scss'; in (any) page.js, but there's some confusing behavior:
   • If i visit page.js and then visit another page, the background stays blue
   • If I refresh on another page, the background goes away, but comes back when I revisit page.js
   • If I remove the line import './global.scss'; from my component, the background color does not go away (but if I change the scss, the background does live reload)

It's not ideal to add a "global" css import to every page. Is there a way to do once? Should it work in _document.js ? I'm thinking things like importing Bootstrap and other utilities, it's nice to have a global CSS file with those dependencies. It also fits well with my CSS mental model and development. A global style for styles that are truly global, and co-located scss for component styling

next-bundle-analyzer usage unclear

The https://github.com/zeit/next-plugins/tree/master/packages/next-bundle-analyzer#usage-with-environment-variables usage example references a yarn build script but does not describe the script. Is it simply next build? I've tried a few combinations of this and not been able to get any of the analyze results to show in a browser.

PS. I'm happy to PR an update to the docs, I just cannot before understanding it myself 😅

Static export and next-css

When I make a static export (next build && next export), the style.css (generated thanks to withCSS) file is not exported.

Environment :

@zeit/next-css : 0.1.2
next: 5.0.0

[@zeit/next-typescript] doesn't seem to load nested typescript files

Def not an urgent bug or request, but would be chill to support page directories. Might even be a simple config I'm missing as well.

pages/
  /index
    index.tsx

Will yield a 404

pages/
   /index.tsx

Works as expected. I'd expect nested page directories to work the same.

next-css SSR not working with CSS files from node_modules

Hi guys, great work with Next!

I encountered an issue which involves next-css, node_modules and Server-Side Rendering.

Basically, when a NPM package requires a CSS file, SSR breaks. This is an issue when trying to use a component library that bundles CSS files in itself (in my case, fyndiq-ui).

The bug happens with or without CSSModules, and with or without PostCSS-loader. It also happens in production build

Note that the bug doesn't happen when importing local CSS files (thanks to #50 I presume).

I made a small repo that demonstrates the issue https://github.com/thibautRe/next-css-ssr-bug. You can run the README instructions to reproduce the bug.

I'm willing to submit a PR to fix this behavior. I checked the next-css code but didn't see anything glaringly problematic.

Style Loader not available with options importLoaders

I found in css-loader-config.js

fallback: {
    loader: 'style-loader',
    options: {
        sourceMap: dev,
        importLoaders: 1
    }
}

but importLoaders not available for style-loader #options

TypeScript plugin does not work

Config:

// next.config.js
const withTypescript = require('@zeit/next-typescript');
module.exports = withTypescript({});

Page:

// pages/index.tsx
import React from 'react';
export default () => (<div>Foo</div>);

Outcome:

ERROR in ./pages/index.tsx
Module build failed: TypeError: Cannot set property 'tsLoaderFileVersion' of undefined
    at successLoader (/xxx/node_modules/ts-loader/dist/index.js:47:54)
    at Object.loader (/xxx/ts-loader/dist/index.js:21:12)
 @ multi ./pages/index.tsx

Combining CSS, SASS and LESS configuration.

There is a way to work combining more than one styles configuration?
I noticed when I try to combine two preprocesor, the last one overwrite the output file.

I want to add https://ant.design/ LESS files as a global style and manage my app styles using SASS with CSS Modules.

Can you show me an example if there is a way to do it?

The default export is not a React Component in page

Next5TsAsyncProblem

"target": "esnext",
"module": "esnext",

if tsconfig.json use above config that server part can't use import

so I setup like
"target": "es2015",
"module": "commonjs",

but When I use "async getInitialProps" that will show error

The default export is not a React Component in page: "/"
Error: The default export is not a React Component in page: "/"
    at App.render (/Users/user/Sites/learning/Next5TsAsyncProblem/node_modules/next/dist/lib/app.js:100:15)
    at resolve (/Users/user/Sites/learning/Next5TsAsyncProblem/node_modules/react-dom/cjs/react-dom-server.node.development.js:2149:18)
    at ReactDOMServerRenderer.render (/Users/user/Sites/learning/Next5TsAsyncProblem/node_modules/react-dom/cjs/react-dom-server.node.development.js:2260:22)
    at ReactDOMServerRenderer.read (/Users/user/Sites/learning/Next5TsAsyncProblem/node_modules/react-dom/cjs/react-dom-server.node.development.js:2234:19)

if remove async will be ok

how to fix this?

https://github.com/polo13999/Next5TsAsyncProblem

next-css doesn't support server side rendering

In this small repo I've illustrated next-css not working with SSR, this is a blocker from my team moving off of https://github.com/traveloka/styled-modules which we're super eager to do.

Great work on Next.js 5.0! Can't wait to fully migrate to it :)

I would mind if Next.js apps had to have a custom _document.js to support this, but I guess thats more of an implementation detail.

next-plugin-image

Images can be found in css files, will it be plugin for this

Can't pass variables to styled-jsx with typescript

Hello, thank you for awesome plugins !

I found a problem when using typescript and styled-jsx. If I set target of typescript to es5, I can not pass variables to styled-jsx.

import * as React from 'react'
const backgroundColor = '#eee'

export default () => (
  <div className='hello'>
    <p>Hello World</p>
    <style jsx>{`
      .hello {
        background-color: ${backgroundColor}; // <--- ERROR !!
        padding: 100px;
        text-align: center;
        transition: 100ms ease-in background;
      }
    `}</style>
  </div>
)

If I set the target of tsconfig.json to es2015, this problem does not occur. However, if es5 is specified as target, the following error occurs.

Syntax Error: <style jsx>{`some css`}</style>), but got BinaryExpression

  1 | import * as React from 'react';
  2 | var backgroundColor = '#eee';
> 3 | export default (function () { return (<div className='hello'>
    |                                       ^
  4 |     <p>Hello World</p>
  5 |     <style jsx>{"\n      .hello {\n        background-color: " + backgroundColor + ";\n        padding: 100px;\n        text-align: center;\n        transition: 100ms ease-in background;\n      }\n    "}</style>
  6 |   </div>); });

In addition, if I do not pass variables to styled-jsx, even if target is es5 it works fine.

The following is a summary of the reproduction code.
https://gist.github.com/monzou/10fb15080cfc746e5a0dea1ee15134bf

Is there a solution to this problem ?
Thanks.

next-sass new version doesn't work

After updated to 0.1.1, it suddenly stop working, revert to 0.9 fixes the issue, please fix this

How to integrate next-sass with assetPrefix?

I would like to serve the stylesheet from a CDN and I tried something like __NEXT_DATA__.assetPrefix in _document.js but with no lucky.

Custom server with typescript

I compile .ts to .js by tsc with express server
@zeit/next-typescript resolve the next command with typescript but server.ts from outside

For example

import * as next from "next";

const port = parseInt(process.env.PORT, 10) || 3000;
const app = next({dev: true});
app.prepare().then(() => {
    server.listen(port, (err) => {
        if (err) {
            throw err;
        }

        console.log(`> Ready on http://localhost:${port}`);
};

Is possible to use @zeit/next-typescript with custom server?

Provide next-stylus

stylus is also a popular and advanced preprocessor. Would like to see it natively supported : )

How to make it works with multi plugins?

I think this issue might similar to #20

If I want to use a plugin, then I need to export on next.config.js like this

const withCSS = require('@zeit/next-css')

module.exports = withCSS({
  cssModules: true,
  webpack: (config) => {
    return config
  }
})

But, how to use it with 2 or more plugins?

As I read on #20, I can't use it like

module.exports = withCSS(withTypescript(withSass(...)))

Thanks

next-css styled-jsx support

It would be nice to support styled-jsx in next-css plugin. For example:

    import styles from './styles.css'
    export default () => <div>
      <style jsx>{styles}</style>
    </div>

New plugin "next-compose"

Should it be in off package?

code is very simple:

module.exports = plugins => ({
  webpack(config, options) {
    return plugins.reduce((config, plugin) => {
      if (plugin instanceof Array) {
        const [_plugin, ...args] = plugin
        plugin = _plugin(...args)
      }
      if (plugin instanceof Function) {
        plugin =  plugin()
      }
      if (plugin && plugin.webpack instanceof Function) {
        return plugin.webpack(config, options)
      }
      return config
    }, config)
  },
  
  webpackDevMiddleware(config) {
    return plugins.reduce((config, plugin) => {
      if (plugin instanceof Array) {
        const [_plugin, ...args] = plugin
        plugin = _plugin(...args)
      }
      if (plugin instanceof Function) {
        plugin =  plugin()
      }
      if (plugin && plugin.webpackDevMiddleware instanceof Function) {
        return plugin.webpackDevMiddleware(config)
      }
      return config
    }, config)
  }
})

and using like that:

const compose = require('@zeit/next-compose')
const withTs = require('@zeit/next-typescript')
const withSass = require('@zeit/next-sass')

module.exports = compose([
  withTs,
  [
    withSass,
    { sassLoaderOptions: { includePaths: ['some/path/to/include'] } }
  ],
  {
    webpack(config, options) {
      /** custom code */
      return config
    }
  }
])

Deps vs DevDeps

Now that Next.js has moved to a universal webpack solution, are we forced to put our JS compilation (eg: @zeit/next-typescript) as a dependency instead of devDependency?

The next-typescript package installation section would indicate yes:

yarn add @zeit/next-typescript typescript

Is this correct thinking, or is the above a typo (missing -D) and not required as a dep?

Only CSS from `_document` & `_error` is processed in webpack

I noticed when running in dev mode, only the css files referenced from _document.js & _error.js are being processed into the static/style.css file.

I'm guessing it's because of this line here: https://github.com/zeit/next.js/blob/canary/server/build/webpack/utils.js#L17

It seems like those are the only two entry files when running in dev mode. How does webpack know about the active pages in dev? I'm assuming it's something with HMR, but I'm missing the connection there.

It's also possible it has something to do with how I'm using the next.config.js. Here's my next config:

const path = require("path")
const fs = require("fs")
const ExtractTextPlugin = require("extract-text-webpack-plugin")

module.exports = {
  assetPrefix: process.env.ASSET_HOST || "",

  distDir: "build",

  webpack: (config, { dev, isServer }) => {
    config.devtool = dev ? "cheap-module-inline-source-map" : "hidden-source-map"

    if (isServer) {
      config.module.rules.push(
        {
          test: /\.css$/,
          use: [
            {
              loader: "emit-file-loader",
              options: {
                name: "dist/[path][name].[ext]",
              },
            },
            {
              loader: "skeleton-loader",
              options: {
                procedure() {
                  const fileName = `${this._module.userRequest}.json`
                  const classNames = fs.readFileSync(fileName, "utf8")

                  return `module.exports = ${classNames}`
                },
              },
            },
            "postcss-loader",
          ],
        },
      )
    }

    if (!isServer) {
      config.module.rules.push({
        test: /\.css$/,
        include: path.join(__dirname, "styles"), /* Local Files */
        use: ExtractTextPlugin.extract({
          fallback: "style-loader",
          use: [
            {
              loader: "css-loader",
              options: {
                importLoaders: 1,
                localIdentName: "[local]",
                minimize: !dev,
                modules: true,
              },
            },
            "postcss-loader",
          ],
        }),
      })

      config.module.rules.push({
        test: /\.css$/,
        exclude: path.join(__dirname, "styles"), /* Vendor files */
        use: ExtractTextPlugin.extract({
          fallback: "style-loader",
          use: [
            {
              loader: "css-loader",
              options: {
                importLoaders: 1,
                minimize: !dev,
                modules: false,
              },
            },
          ],
        }),
      })

      config.plugins.push(
        new ExtractTextPlugin("static/styles.css", {
          ignoreOrder: true,
        }),
      )
    }

    return config
  },
}

I would assume anytime a .css file is imported from the active pages in next, they're being ran through this webpack config, but that doesn't seem to be the case. Or maybe extract-text-plugin isn't overriding the file when that happens?

Any ideas or help would be greatly appreciated, thanks!

cssLoaderOptions are not passed

Just discovered the cssLoaderOptions are not correctly passed - i would have a fix for it but don't have the permission yet to push a feature-branch to actually open the PR. Would totally like to contribute! :)

camelCase support for cssLoaderOptions

@thekevinscott has done a wonderful job with pull request #16

However, there doesn't seem to be support for camelCase option of css-loader.
Would support for this be added soon?

Problem:

Everything works fine for one-worded classnames like 'navbar', 'column', 'sticky' etc. However, for class names like 'navbar-bg', 'column-12', 'sticky-top' has an empty string. (ie class in the HTML instead of something like class="23Tbhqewpe_54Yu"

Expected behaviour:

classnames like navbar-bg gets transformed to navbarBg (or their hashes)

I am a newbie, so could you help me with any other workaround to camelCasing for legacy css (for eg: foundation framework)?

How to resolve png compilation issue?

I am trying to import leaflet.css from leaflet package. I got a error stating
"error in ./node_modules/leaflet/dist/images/marker-icon.png

Module parse failed: Unexpected character '�' (1:0)".

I have attached the image below.