Skip to content

Commit d58a679

Browse files
committed
Initial commit.
0 parents  commit d58a679

12 files changed

+524
-0
lines changed

Diff for: .babelrc

+4
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
{
2+
"presets": ["es2015", "stage-3", "react"],
3+
"plugins": ["transform-es2015-modules-commonjs"]
4+
}

Diff for: .editorconfig

+15
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
root = true
2+
3+
[*]
4+
indent_style = space
5+
indent_size = 4
6+
end_of_line = lf
7+
charset = utf-8
8+
trim_trailing_whitespace = true
9+
insert_final_newline = true
10+
11+
[*.md]
12+
trim_trailing_whitespace = false
13+
14+
[package.json]
15+
indent_size = 2

Diff for: .eslintrc.json

+10
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
{
2+
"root": true,
3+
"extends": [
4+
"eslint-config-moxy/es6.js",
5+
"eslint-config-moxy/addons/browser.js",
6+
"eslint-config-moxy/addons/node.js",
7+
"eslint-config-moxy/addons/es6-modules.js",
8+
"eslint-config-moxy/addons/react.js"
9+
]
10+
}

Diff for: .gitignore

+2
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
node_modules
2+
npm-debug.*

Diff for: .travis.yml

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
language: node_js
2+
node_js:
3+
- "4"
4+
- "6"
5+
script: "npm test"

Diff for: LICENSE

+21
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
The MIT License (MIT)
2+
3+
Copyright (c) 2017 Made With MOXY Lda <[email protected]>
4+
5+
Permission is hereby granted, free of charge, to any person obtaining a copy
6+
of this software and associated documentation files (the "Software"), to deal
7+
in the Software without restriction, including without limitation the rights
8+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9+
copies of the Software, and to permit persons to whom the Software is
10+
furnished to do so, subject to the following conditions:
11+
12+
The above copyright notice and this permission notice shall be included in
13+
all copies or substantial portions of the Software.
14+
15+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
21+
THE SOFTWARE.

Diff for: README.md

+108
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,108 @@
1+
# next-style
2+
3+
[![NPM version][npm-image]][npm-url] [![Downloads][downloads-image]][npm-url] [![Build Status][travis-image]][travis-url] [![Dependency status][david-dm-image]][david-dm-url] [![Dev Dependency status][david-dm-dev-image]][david-dm-dev-url]
4+
5+
[npm-url]:https://npmjs.org/package/next-style
6+
[downloads-image]:http://img.shields.io/npm/dm/next-style.svg
7+
[npm-image]:http://img.shields.io/npm/v/next-style.svg
8+
[travis-url]:https://travis-ci.org/moxystudio/next.js-style
9+
[travis-image]:http://img.shields.io/travis/moxystudio/next.js-style/master.svg
10+
[david-dm-url]:https://david-dm.org/moxystudio/next.js-style
11+
[david-dm-image]:https://img.shields.io/david/moxystudio/next.js-style.svg
12+
[david-dm-dev-url]:https://david-dm.org/moxystudio/next.js-style#info=devDependencies
13+
[david-dm-dev-image]:https://img.shields.io/david/dev/moxystudio/next.js-style.svg
14+
15+
Makes loading of CSS files possibles in [next.js](https://github.com/zeit/next.js) projects through babel & webpack.
16+
17+
This project is similar to what webpack `style-loader` does but is compatible with `next.js`.
18+
19+
20+
## Installation
21+
22+
`$ npm install --save next-style-loader`
23+
24+
25+
## Setup
26+
27+
First you will need to create a `next.config.js` file:
28+
29+
```js
30+
module.exports = {
31+
webpack: (config) => {
32+
config.module.rules.push(
33+
{
34+
test: /\.css$/,
35+
loader: 'emit-file-loader',
36+
options: {
37+
name: 'dist/[path][name].[ext]',
38+
},
39+
},
40+
{
41+
test: /\.css$/,
42+
// You may use `postcss-loader`, `sass-loader`, etc. instead of `raw-loader`
43+
loader: 'babel-loader!next-style-loader!raw-loader',
44+
}
45+
);
46+
47+
return config;
48+
},
49+
};
50+
```
51+
52+
Finally, create a `pages/_document.js` file:
53+
54+
```js
55+
import React from 'react';
56+
import Document, { Head, Main, NextScript } from 'next/document';
57+
import { flush } from 'next-style-loader/applyStyles';
58+
59+
export default class MyDocument extends Document {
60+
render() {
61+
const { nextStyle } = this.props;
62+
63+
return (
64+
<html>
65+
<Head>
66+
{ nextStyle.tag }
67+
</Head>
68+
<body>
69+
<Main />
70+
<NextScript />
71+
</body>
72+
</html>
73+
);
74+
}
75+
}
76+
77+
MyDocument.getInitialProps = function (ctx) {
78+
const props = Document.getInitialProps(ctx);
79+
80+
props.nextStyle = flush();
81+
82+
return props;
83+
};
84+
```
85+
86+
87+
## Usage
88+
89+
After setting the project, you may import CSS files like so:
90+
91+
```js
92+
import styles from './MyComponent.css';
93+
94+
const MyComponent extends Component {
95+
render() {
96+
return '<div>Hello</div>';
97+
}
98+
}
99+
100+
export default applyStyles(styles)(MyComponent);
101+
```
102+
103+
Enjoy!
104+
105+
106+
## License
107+
108+
[MIT License](http://opensource.org/licenses/MIT)

Diff for: applyStyles.js

+166
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,166 @@
1+
'use strict';
2+
3+
Object.defineProperty(exports, "__esModule", {
4+
value: true
5+
});
6+
7+
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
8+
9+
exports.flush = flush;
10+
11+
var _react = require('react');
12+
13+
var _react2 = _interopRequireDefault(_react);
14+
15+
var _addStyles = require('style-loader/addStyles');
16+
17+
var _addStyles2 = _interopRequireDefault(_addStyles);
18+
19+
var _hoistNonReactStatics = require('hoist-non-react-statics');
20+
21+
var _hoistNonReactStatics2 = _interopRequireDefault(_hoistNonReactStatics);
22+
23+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
24+
25+
function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } else { return Array.from(arr); } }
26+
27+
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
28+
29+
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
30+
31+
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } /* eslint react/no-multi-comp:0 */
32+
33+
var ssrStyleElId = 'next-style-ssr';
34+
var isServer = typeof window === 'undefined';
35+
36+
var serverStyles = !isServer ? null : [];
37+
38+
function applyStylesOnServer(styles) {
39+
styles = Array.isArray(styles) ? styles : [styles];
40+
41+
return function (WrappedComponent) {
42+
var ApplyStyles = function (_Component) {
43+
_inherits(ApplyStyles, _Component);
44+
45+
function ApplyStyles() {
46+
_classCallCheck(this, ApplyStyles);
47+
48+
return _possibleConstructorReturn(this, (ApplyStyles.__proto__ || Object.getPrototypeOf(ApplyStyles)).apply(this, arguments));
49+
}
50+
51+
_createClass(ApplyStyles, [{
52+
key: 'componentWillMount',
53+
value: function componentWillMount() {
54+
var _serverStyles;
55+
56+
// Concatenate styles
57+
(_serverStyles = serverStyles).push.apply(_serverStyles, _toConsumableArray(styles));
58+
}
59+
}, {
60+
key: 'render',
61+
value: function render() {
62+
return _react2.default.createElement(WrappedComponent, this.props);
63+
}
64+
}]);
65+
66+
return ApplyStyles;
67+
}(_react.Component);
68+
69+
var displayName = WrappedComponent.displayName || WrappedComponent.name || 'Component';
70+
71+
ApplyStyles.displayName = 'ApplyStyles(' + displayName + ')';
72+
ApplyStyles.ComposedComponent = WrappedComponent;
73+
74+
return (0, _hoistNonReactStatics2.default)(ApplyStyles, WrappedComponent);
75+
};
76+
}
77+
78+
// ---------------------------------------------------
79+
80+
var removedSsrStyleEl = isServer ? null : false;
81+
var removeSsrStyleElDelay = isServer ? null : 1000;
82+
83+
function applyStylesOnClient(styles) {
84+
styles = Array.isArray(styles) ? styles : [styles];
85+
86+
return function (WrappedComponent) {
87+
var ApplyStyles = function (_Component2) {
88+
_inherits(ApplyStyles, _Component2);
89+
90+
function ApplyStyles() {
91+
_classCallCheck(this, ApplyStyles);
92+
93+
return _possibleConstructorReturn(this, (ApplyStyles.__proto__ || Object.getPrototypeOf(ApplyStyles)).apply(this, arguments));
94+
}
95+
96+
_createClass(ApplyStyles, [{
97+
key: 'componentWillMount',
98+
value: function componentWillMount() {
99+
// Insert component styles
100+
this._updateNextStyles = (0, _addStyles2.default)(styles.map(function (style) {
101+
return [style.id, style.content, '', style.sourceMap];
102+
}));
103+
}
104+
}, {
105+
key: 'componentDidMount',
106+
value: function componentDidMount() {
107+
// Remove the server-rendered style tag
108+
if (!removedSsrStyleEl) {
109+
removedSsrStyleEl = true;
110+
111+
setTimeout(function () {
112+
var headEl = document.head || document.getElementsByTagName('head')[0];
113+
var styleEl = document.getElById(ssrStyleElId);
114+
115+
styleEl && headEl.removeChild(styleEl);
116+
}, removeSsrStyleElDelay);
117+
}
118+
}
119+
}, {
120+
key: 'componentWillUnmount',
121+
value: function componentWillUnmount() {
122+
// Remove component styles
123+
this._updateNextStyles([]);
124+
}
125+
}, {
126+
key: 'render',
127+
value: function render() {
128+
return _react2.default.createElement(WrappedComponent, this.props);
129+
}
130+
}]);
131+
132+
return ApplyStyles;
133+
}(_react.Component);
134+
135+
var displayName = WrappedComponent.displayName || WrappedComponent.name || 'Component';
136+
137+
ApplyStyles.displayName = 'ApplyStyles(' + displayName + ')';
138+
ApplyStyles.ComposedComponent = WrappedComponent;
139+
140+
return (0, _hoistNonReactStatics2.default)(ApplyStyles, WrappedComponent);
141+
};
142+
}
143+
144+
// ---------------------------------------------------
145+
146+
exports.default = isServer ? applyStylesOnServer : applyStylesOnClient;
147+
function flush() {
148+
if (!isServer) {
149+
throw new Error('flush() should only be called on the server');
150+
}
151+
152+
var flushedStyles = serverStyles;
153+
154+
serverStyles = [];
155+
156+
return {
157+
tag: _react2.default.createElement(
158+
'style',
159+
{ id: ssrStyleElId },
160+
flushedStyles.reduce(function (concatenated, style) {
161+
return concatenated + style.content;
162+
}, '')
163+
),
164+
styles: flushedStyles
165+
};
166+
}

Diff for: index.js

+26
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
/* eslint no-invalid-this:0 */
2+
3+
'use strict';
4+
5+
var _path = require('path');
6+
7+
var _path2 = _interopRequireDefault(_path);
8+
9+
var _loaderUtils = require('loader-utils');
10+
11+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
12+
13+
function loader(content, sourceMap) {
14+
this.cacheable && this.cacheable();
15+
16+
// Grab the relative path to the resource we are processing
17+
var relativePath = _path2.default.relative(this._compiler.context, this.resourcePath);
18+
19+
return 'module.exports = ' + JSON.stringify({
20+
id: (0, _loaderUtils.getHashDigest)(relativePath, 'md5', 'hex'),
21+
content: content,
22+
sourceMap: sourceMap
23+
}) + ';';
24+
}
25+
26+
module.exports = loader;

0 commit comments

Comments
 (0)