[RFC] Introduce CSS modules & covert /src/options over to using them #34
Conversation
|
I am starting to like the idea of If you like this approach I am happy to apply it to the whole project. In any case this seems better than either inline styles defined in javascript or having a single css file. |
|
|
||
| const Navigation = ({ currentLocation, routes }) => { | ||
| function buildRoutes() { | ||
| let cx = classNames.bind(styles) |
There was a problem hiding this comment.
From the css-modules docs about classNames.bind:
Note that in ES2015 environments, it may be better to use the "dynamic class names" approach documented above.
I agree with them, to avoid this extra level of magic.
| let navClasses = cx({ | ||
| navLink: true, | ||
| isActive: isActive(route) | ||
| }) |
There was a problem hiding this comment.
so instead of cx this would be:
classNames({
[styles.navLink]: true,
[styles.isActive]: isActive(route),
})
|
|
||
| class SettingsContainer extends React.Component { | ||
| render() { | ||
| return ( | ||
| <div> | ||
| <h1 style={styles.title}>Settings</h1> | ||
| <h1 className="routeTitle">Settings</h1> |
There was a problem hiding this comment.
Instead of making routeTitle a global class, would it not be cleaner to import { routeTitle } from '../../base.css'?
There was a problem hiding this comment.
That's much nicer, implemented. 👍
gulpfile.babel.js
Outdated
| b.plugin('css-modulesify', { | ||
| output: path.join(destination, cssOutput), | ||
| postcssBefore: [ | ||
| require('postcss-cssnext') |
There was a problem hiding this comment.
I would import this right at the top rather than require it here. Also 'css-modulesify' could be imported, rather than passed as a string, for clarity and consistency.
Besides that this looks like a neat approach. Runs fine.
| @@ -35,15 +35,20 @@ | |||
| "tldjs": "^1.7.0" | |||
| }, | |||
| "devDependencies": { | |||
| "autoprefixer": "^6.7.5", | |||
There was a problem hiding this comment.
This seems to be an weird peer dependency of cssnext. Build fails without it.
package.json
Outdated
| "gulp": "^3.9.1", | ||
| "gulp-identity": "^0.1.0", | ||
| "gulp-uglify": "^2.0.1", | ||
| "loose-envify": "^1.3.0", | ||
| "postcss": "^5.2.15", | ||
| "postcss-cssnext": "^2.9.0", | ||
| "postcss-modules-values": "^1.2.2", |
There was a problem hiding this comment.
Only postcss-cssnext is used directly, can the other two be removed without breaking it?
| @@ -8,6 +8,9 @@ import watchify from 'watchify' | |||
| import babelify from 'babelify' | |||
| import envify from 'loose-envify/custom' | |||
| import uglifyify from 'uglifyify' | |||
| import path from 'path' | |||
| import modulesify from 'css-modulesify' | |||
| import cssnext from 'postcss-cssnext' | |||
There was a problem hiding this comment.
nitpicking: I'd keep the whole name and camelCase it as cssModulesify, especially since modulesify gives no hint what it does. Not sure between cssnext/postcssCssnext.
|
Apart from these details, would this be ready to merge? |
|
By the way, feel free to squash all the tiny fixes in a single commit, keeping up the appearance that everything was perfect at the first shot. ;) |
|
Yep, this is good to merge |
- Stop tracking extension/options/style.css as this is now automatically generated via css-modulesify - Covert over all the css-in-js styles in options to use css modules
[RFC] Introduce CSS modules & covert /src/options over to using them
Introduce CSS modules & covert /src/options over to using them
Why?
This approach is much less restrictive than using the css-in-js approach that we had earlier. We're simply writing css here and can therefore easily style pseudo elements and make use of css animations. It also brings in new css features (variables, nesting, etc) and follows the golden rule that all styles are local to the component unless explicitly made global. (see routeTitle in base.css)
Changes:
Future Tasks:
RFC?
This is the first time I've used css-modules through browserify, not sure if it's setup correctly. @Treora, please let me know if I need to change anything 👍