Saved searches
Use saved searches to filter your results more quickly
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session.
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Preferred method of using normalize.css? #364
Preferred method of using normalize.css? #364
Comments
What is the ideal way to load normalize.css (ideally from NPM) in a performant way? I’d like to avoid loading it as a static asset and introduce a header request just for a tiny bit of CSS.
Glamor has a glamor/reset extra, but it’s a lot simpler than normalize, and not what I’m looking for (I’m not really sure how to load extras into Glamor from next anyway).
The text was updated successfully, but these errors were encountered:
@nkzawa I’ve used next/head to load some global syles, but without css-loader on the project, how could I require a CSS file from node_modules ? And is this cacheable on the user end or does this bloat out the payload every header request?
You’d like to define style as text in next/head like:
Head> style>` body margin: 0; > `>/style> /Head> You’d have to convert normalize.css to .json or a component to require , but this would be the best way for now IMO. If you require the file on all pages, then it bundles as a chunk and is loaded only once so it wouldn’t bloat payload.
You’d be able to use css-loader too when #222 was released.
Thanks. This is what I figured, but didn’t know if there was a more automatic way of loading it currently. I guess I could run Webpack or Gulp locally to convert before next hits it. And that’s good to know that next utilizes common chunking. I feel better about shoving stuff into the Head now. Thanks for answering my questions!
On Dec 9, 2016, at 01:11, Naoyuki Kanezawa ***@***.***> wrote: You’d like to define style as text in next/head like:
You’d have to convert normalize.css to .json or a component to require, but this would be the best way for now IMO. If you require the file on all pages, then it bundles as a chunk and is loaded only once so it wouldn’t bloat payload. You’d be able to use css-loader too when #222 was released. — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub, or mute the thread.
Would like to point out that glamor actually uses normalize.css albeit an outdated version v3.0.2
https://github.com/threepointone/glamor/blob/master/src/reset.js
Simply importing import ‘glamor/reset’ works fine.
Feel free to use my fork if you need 5.0 or wait for the pull request to be merged 🙂
@FrancosLab Thanks for the tip! I ran across glamor/reset but didn’t notice normalize was part of it—I don’t think it was mentioned on glamor’s README. Thanks for the PR!
So what is the best way to do this right now for next@2.0.0-beta.32 ? I’ve spent various hours trying to emulate what was done with the with-global-stylesheet example with no luck.
Because normalize.css is a package, simply copying the file isn’t enough (Node’s require resolution uses package.main ). Moreover, emit-file-loader (and file-loader as well) seems to be behaving differently from the example repo. It seems that when passing the options name=dist/[path][name].[ext] to the loader, path always starts with — , resulting in the file being in .next/dist/-/node_modules/normalize.css/normalize.css , which is a problem.
The way to get around this is to basically copy the entire normalize.css file into the static folder or perhaps inline the entire thing into a style tag (I’m using styled components for styling, though).
I tried using webpack-copy-plugin but it looks like the static folder isn’t served from .next but actually from the root folder itself /static (where pages lives) so that didn’t work either.
Now that Next.js doesn’t rely on Glamor, any tips on moving forward with this?
The with-global-stylesheet example just got updated here: #1327!
#1327 still doesn’t work for something as simple as import ‘normalize.css’ . The main issue seems to be that because Webpack doesn’t run on the server, you can’t import non-js files on any file that runs in the server.
@migueloller maybe could switch to universal Webpack after v2.0. #1245
you can add your vote there 😉
Guys, I’ve been importing normalize just fine through sass-loader , even without the includePaths that just got merged. All you have to do is install normalize-scss (the Sass port of normalize.css ) and add @import ‘~normalize-scss’; at your highest level (custom _document , layout, or page) where you would include an scss stylesheet the way with-global-stylesheet does.
Now if you rather import the original, I bet you could setup an alias to node_modules using babel-plugin-module-resolver the way I just did with styles in the example and then import it with js + >/> .
@orlin, you can’t simply import it with JS because it will throw an error in the server since it doesn’t go through Webpack.
@migueloller, it should work fine, the same way scss is imported from js in the with-global-stylesteet example. Both css and scss are handled by Webpack loaders in the next.config.js and converted to js. I just didn’t provide the import normalize from ‘. ‘ as I would need to install normalize.css and setup a babel-plugin-module-resolver alias to give you a . path that works.
I’ve cloned the example, added normalize.css , and played with it a bit. You’re right, it’s possible to make it work!
I had to make a custom configuration for it though, where the output name of the emitted file was dist/[path]index.js due to the fact that if you don’t copy the package.json then Node’s require won’t find it. Because you don’t want this behavior for the other styles (living in your source code and not node_modules ) then you have to setup a Webpack rule just for normalize.css (plus other packages you might be using).
This works as a short-term fix but it would definitely be nice to have something that works out of the box as is being discussed in #1245 and vercel/styled-jsx#100 (comment)
@rauchg, do you think it would be a good idea to make an example for packages that exist in node_modules ? I wouldn’t mind making a new example or extending the with-global-stylesheet one.
@migueloller adding it to the same example would probably be preferable
@migueloller I found a super-clean «best-practices» way to do this. Will do a PR on with-global-stylesheet . I hope you didn’t spend too much time hacking it.
Render normalize.css + emotion styles with Next.js
I’m trying to add Normalize.css as global and use emotion for my CSS Modules.
< "presets": [ ["env", < "modules": false, "useBuiltIns": true >], "next/babel" ], "plugins": [ "syntax-dynamic-import", "transform-runtime", "transform-decorators-legacy", "transform-class-properties", "transform-object-rest-spread", "es6-promise", ["module-resolver", < "root": ["./src"], "alias": < "styles": "./styles", "assets": "./assets", >, "cwd": "babelrc" >], ["inline-import", < "extensions": [".css"] >], ["emotion", < "inline": true >] ] > Adding Normalize.css
In my _document.js I added the normalize
import Document, < Head, Main, NextScript >from 'next/document'; import normalize from 'normalize.css/normalize.css'; import < extractCritical >from 'emotion-server'; export default class MyDocument extends Document < static getInitialProps(< renderPage >) < const page = renderPage(); const styles = extractCritical(page.html); return < . page, . styles >; > constructor(props) < super(props); const < __NEXT_DATA__, ids >= props; if (ids) < __NEXT_DATA__.ids = ids; >> render() < return ( > /> ); > > Addin my css modules with Emotion
import React, < Component >from 'react'; import Breadcrumb from 'components/Breadcrumb'; import Link from 'next/link'; import styled, < hydrate, keyframes, css, injectGlobal >from 'react-emotion'; // Adds server generated styles to emotion cache. // '__NEXT_DATA__.ids' is set in '_document.js' if (typeof window !== 'undefined') < hydrate(window.__NEXT_DATA__.ids); >const basicStyles = css` background-color: white; color: cornflowerblue; margin: 3rem 0; padding: 1rem 0.5rem; ` const Basic = styled.div` $; ` export default class extends Component < render() < return ( Basic style rendered by emotion
Problem
Error: StyleSheet: insertRule accepts only strings.
at invariant (/home/riderman/WebstormProjects/tmp/node_modules/styled-jsx/dist/lib/stylesheet.js:274:11)
at StyleSheet.insertRule (/home/riderman/WebstormProjects/tmp/node_modules/styled-jsx/dist/lib/stylesheet.js:125:7)
at /home/riderman/WebstormProjects/tmp/node_modules/styled-jsx/dist/stylesheet-registry.js:88:29
at Array.map (native)
at StyleSheetRegistry.add (/home/riderman/WebstormProjects/tmp/node_modules/styled-jsx/dist/stylesheet-registry.js:87:27)
at JSXStyle.componentWillMount (/home/riderman/WebstormProjects/tmp/node_modules/styled-jsx/dist/style.js:58:26)
at resolve (/home/riderman/WebstormProjects/tmp/node_modules/react-dom/cjs/react-dom-server.node.development.js:2616:12)
at ReactDOMServerRenderer.render (/home/riderman/WebstormProjects/tmp/node_modules/react-dom/cjs/react-dom-server.node.development.js:2746:22)
at ReactDOMServerRenderer.read (/home/riderman/WebstormProjects/tmp/node_modules/react-dom/cjs/react-dom-server.node.development.js:2722:19)
at renderToStaticMarkup (/home/riderman/WebstormProjects/tmp/node_modules/react-dom/cjs/react-dom-server.node.development.js:2991:25)
Added
Best Solution
Looks like there’s an issue for this over on Zeit’s styled-jsx page: https://github.com/zeit/styled-jsx/issues/298
According to this issue it is either external styles or that you need to add the css tag to your template literals.
Looking at your code you are using the css tag and don’t see any externals styles that would be causing this. If you don’t get a definite answer I’d say to follow up on issue 298 with Zeit. HTH, cheers!
Edit
Get rid of the jsx styles in there and just add normalize to your global template string: