Skip to content
This repository has been archived by the owner on Jan 27, 2019. It is now read-only.

Remove direct dependency to jss, render global styles over react-jss #33

Merged
merged 2 commits into from
Sep 28, 2016
Merged

Remove direct dependency to jss, render global styles over react-jss #33

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
6eedaa5
remove direct dependency to jss, render global styles over react-jss
kof Sep 25, 2016
9df9840
make component for global styles optional
kof Sep 25, 2016
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 1 addition & 3 deletions examples/jss/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,9 +10,7 @@
"license": "MIT",
"devDependencies": {
"css-loader": "0.25.0",
"jss": "5.5.4",
"jss-preset-default": "0.4.0",
"react-jss": "4.0.0",
"react-jss": "4.0.3",
"style-loader": "0.13.1"
},
"dependencies": {}
Expand Down
10 changes: 3 additions & 7 deletions examples/jss/src/global-styles.js → ...components/global-styles/global-styles.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,7 @@
import jss from 'jss';
import preset from 'jss-preset-default';
import React from 'react';
import injectSheet from 'react-jss';
import 'normalize.css';

// Setup JSS with default preset
jss.setup(preset());

// Global styles
const styles = {
html: {
Expand Down Expand Up @@ -33,5 +30,4 @@ const styles = {
},
};

// Attach global styles
jss.createStyleSheet(styles, { named: false }).attach();
export default injectSheet(styles, {named: false})();
1 change: 1 addition & 0 deletions examples/jss/src/components/global-styles/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
export { default } from './global-styles';
4 changes: 2 additions & 2 deletions examples/jss/src/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import React from 'react';
import { render } from 'react-dom';

import './global-styles';
import GlobalStyles from './components/global-styles';
import App from './components/app';

render(<App />, document.getElementById('example-root'));
render(<GlobalStyles><App /></GlobalStyles>, document.getElementById('example-root'));
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is still hacky, if this would just work with

import './global-styles';

without having to add an unnecessary wrapper component I'd be a fan…

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I would even say it is a necessarily evil. It makes it obvious and declarative.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Don't agree at all. Why do I need to put something in my JSX just to render global styles? That doesn't compute at all, no matter if it's declarative or not, because JSX ≈ DOM, not CSSOM.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

For example, something like this would be really declarative and make sense in the JSX ≈ DOM model:

import { Style } from 'jss' ;

<Style>
{/* Global styles here *} 
</Style>

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Basically for the same reason like https://github.com/gaearon/react-document-title

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This way you can write global styles right into sheet at any point of time, without being forced to use a separate sheet with the option.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It might end up badly if misused, but this is the problem of developers.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yeah, I like this actually. That's a good way of adding global styles, while being explicit that they're global!

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

cssinjs/jss#324

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Lets go with the current approach for now, I will announce jss-global very soon on twitter and we can adapt it here then.