to run: webpack-dev-server
suit-loader is deprecated.
should probably use something like rework-webpack-loader but i dont understand webpack or rework well enough.
Last active
August 29, 2015 14:15
-
-
Save pe3/0e2b19ce3a26793a6e1a to your computer and use it in GitHub Desktop.
React 0.13 ES2015 SUIT CSS
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // using React v0.13.0 Beta syntax | |
| // http://facebook.github.io/react/blog/2015/01/27/react-v0.13.0-beta-1.html | |
| import "./base.css"; | |
| import React from "react"; | |
| class HelloMessage extends React.Component { | |
| render() { | |
| return <div>Hello {this.props.name}</div>; | |
| } | |
| } | |
| HelloMessage.propTypes = { name: React.PropTypes.string }; | |
| window.onload = function() { | |
| React.render(<HelloMessage name="World" />, document.getElementById('content')); | |
| } | |
| window.React = React; //for the react inspector |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| @import "suitcss-base"; | |
| :root { | |
| --base-link-color: #069; | |
| } | |
| html { | |
| color: #444; | |
| font-size: 1rem; | |
| font-family: "Helvetica Neue", Helvetica, sans-serif; | |
| } | |
| a { | |
| color: var(--base-link-color); | |
| text-decoration: none; | |
| } | |
| a:hover, | |
| a:focus, | |
| a:active { | |
| color: var(--base-link-color); | |
| text-decoration: underline; | |
| } | |
| mark { | |
| background-color: #cee2ff; | |
| padding: .1875rem; | |
| border-radius: 3px; | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset='utf-8'> | |
| <script src="bundle.js"></script> | |
| </head> | |
| <body> | |
| <div id="content"></div> | |
| </body> | |
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| { | |
| "devDependencies": { | |
| "babel-loader": "^4.0.0", | |
| "css-loader": "^0.9.1", | |
| "react": "^0.13.0-beta.1", | |
| "rework-webpack-loader": "^0.1.0", | |
| "style-loader": "^0.8.3", | |
| "suit-loader": "git://github.com/aaronj1335/suit-loader.git", | |
| "suitcss-base": "^0.8.0", | |
| "webpack": "^1.5.3" | |
| } | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| module.exports = { | |
| entry: './app.js', | |
| output: { | |
| filename: 'bundle.js' | |
| }, | |
| devtool: "source-map", | |
| module: { | |
| loaders: [ | |
| { test: /\.js$/, exclude: /node_modules/, loader: "babel-loader"}, | |
| { test: /\.css$/, loader: 'style-loader!css-loader!suit-loader' } | |
| ] | |
| } | |
| }; |
Hi guys,
I am not familiar with SUIT CSS, but as I see it is the same concept as LESS and SASS, but with some other features?
It basically just needs a loader, like anything else that needs to be preprocessed. Like sass-loader, less-loader etc.
As I understand you should be able to juste replace your config with:
module.exports = {
entry: './app.js',
output: {
filename: 'bundle.js'
},
devtool: "source-map",
module: {
loaders: [
{ test: /\.js$/, exclude: /node_modules/, loader: "babel"},
{ test: /\.css$/, loader: 'style!rework-webpack' }
]
}
};rework does not need the css loader. Do not needs the -loader either, it is added automatically.
I have not tested it. But again, webpack loaders are incredibly simple to use, but it requires some mad skills to create one :-) So anything that needs to be transpiled can be transpiled with a loader, including CSS SUIT.
@bebraw @christianalfoni Sorry I forgot to give a context. I pinged you guys because of one sentence in your book project regarding CSS:
Of course there are questions such are these kind of ideas compatible with CSS frameworks such as Bootstrap, Foundation or Pure but that's another topic.
I'm myself looking for a way to package ReactJS code and CSS per component as reusable customizable NPM modules. I have tried several approaches but haven't found anything I really like (but it may also just be that I'm not very good at CSS). After my first day with SUITCSS it seems like an interesting mix of utilities, components, methodology, and syntax. I started playing with it yesterday so I don't know yet but I really like the idea of utility classes and gradually adding pre made component modules. I think SUITCSS might be into something regarding the "other topic" you are pondering in your book.
One of the problems is that CSS isn't actually just about styling. It can be intermingled with logic. Let's consider something like a Sidebar component. That will help to illustrate the issue.
Basic markup could look like this:
<Sidebar>
some content would go here
</Sidebar>I expect it would get fixed to the left side of the screen by default and there would be a handle that could be used to open it. In addition the maximum width of the Sidebar should be fixed. This leads to a couple of questions:
- How to deal with the opening logic (ie. setting sidebar container size based on dragging)?
- How to set maximum width of sidebar?
- How to style sidebar handle?
- How to style sidebar content?
Traditionally we would just add some classes to the component, define CSS for 2-4 and deal with jQuery or something to tackle 1. This approach can work with React too but I feel we can get something better.
What if it was possible to inject style as a property? Then we would have something like this:
<Sidebar style={sidebarStyle}>
some content would go here
</Sidebar>In addition Sidebar would have to bind that style to its contents (ie. content, handle). I guess the component would have some default values to override. The default configuration could look something like this:
style: {
'.Sidebar': {
'position': 'fixed',
'left': 0,
'top': 0,
'height': '100%',
},
'.Sidebar-handle': {
'background': '#ddd',
// how to deal with text? -> :after or go through DOM?
},
'.Sidebar-content': {
'max-width': '200px',
'width': this.state.width, // set through React logic on drag
},
}This gives you a public styling interface and CSS related logic is encapsulated within the component. I followed SUITCSS naming convention here as it seems reasonable. The JSX of Sidebar should match it.
In addition there would have to be something like merge(this.state.style, this.props.style) before rendering. Sidebar-handle should have a drag handler that would modify Sidebar-content width. That sounds like trivial to do in this approach.
There are some props and cons. I'll cover these next.
Pros
- You get something you can control via React. I expect you could use something like jss to manage the whole thing. The cool thing here is that you can apply various plugins (prefixer and such) to the CSS/JSON before passing it to components.
- Styles at component level!
- CSS related logic at component level! I expect this simplifies dealing with complex logic and animations a lot.
- No cascading. Absolute control over styling.
Cons
- No cascading. But is this a problem really?
- External CSS can be problematic given we are using
style(first priority) so perhaps it's better to avoid or just deal with colors and such using it? - Immature tooling, workflows. This is still experimental and there are no proven ways to do this right.
- Not having cascading might lead to more code to load but is that a real problem?
At least for now the best thing about SUITCSS for me seems to be the naming scheme. The rest is a little irrelevant in this sort of approach. Having styles on component level feels like the right thing to do with React. There are of course questions like how to deal with global styles of an app but I expect that is something you would deal on a higher level. And given the approach, you would have very good control over it (all React of course).
I think Atomic Design fits React kind of way of doing things. You start with components (atoms) and then compose those into larger entities. That's pretty much what happens in atomic approach. They have some tooling for this purpose, namely Pattern Lab. See also the demo. Getting something like that together based on a set of React components should be too hard.
Here is one more approach, csstyle.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
How about postcss? See also postcss-loader. By the looks of it, there are tons of plugins available and it should be easy to configure.
Rework can be used with autoprefixer apparently.
What are you trying to accomplish here exactly?
Other thoughts
It looks like there are a couple of approaches when it comes to CSS. You could pick a full preprocessor (LESS, SASS) or something lighter (postcss, rework, autoprefixer). I sort of like the latter approach given it is closer to standards. With React further approaches are possible (no clear cut solutions yet).
In addition there is the whole problem of bundling css and minifying it (cssmin and such). Esp. latter is important if you use big libraries such as Bootstrap. As far as I understand cssmin doesn't work with webpack yet.
@christianalfoni, Any thoughts on this topic?