Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 34b6c92

Browse files
author
vinogradov
committed
(css modules) Add css-modules. Update dependencies
1 parent dfac612 commit 34b6c92

File tree

8 files changed

+114
-189
lines changed

8 files changed

+114
-189
lines changed

‎README.md

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
[See in action](https://vinogradov.github.io/react-starter-kit)
22

3-
Includes only the latest and greatest web technologies (dependencies updated at 13 July 2017). Use it for your next heroic SPA project because you can't go wrong with it. Contains minimal viable "hello, world" code just to proof it works. Remove hello world and write your own great project.
3+
Includes only the latest and greatest web technologies (dependencies updated at 22 July 2017). Use it for your next heroic SPA project because you can't go wrong with it. Contains minimal viable "hello, world" code just to proof it works. Remove hello world and write your own great project.
44

55
# Principles
66
1. Using plain [ES2015](https://babeljs.io/docs/plugins/preset-es2015/)/[16](https://babeljs.io/docs/plugins/preset-es2016/)/[17](https://babeljs.io/docs/plugins/preset-es2017/). Minimizing use of [experimental Stage-X](https://babeljs.io/docs/plugins/#presets-stage-x-experimental-presets-) javascript features. Only [stage-3](https://babeljs.io/docs/plugins/preset-stage-3/)/4 features are supported, because they're relatively stable
@@ -28,11 +28,11 @@ Name | Library Type | Original Description | Example Config | Notes
2828
[redux-saga](https://github.com/redux-saga/redux-saga) | Data management | An alternative side effect model for Redux apps | | An alternative to [redux-thunk](https://github.com/gaearon/redux-thunk). You need to `import "regenerator-runtime/runtime";` for using generators/`yield`
2929
[redux-logger](https://github.com/evgenyrodionov/redux-logger) | Utils | Logger for Redux
3030
[jest](https://github.com/facebook/jest) | Test framework | Painless JavaScript Testing
31-
[webpack 3](https://webpack.js.org/) | Build/Bundler | A module bundler for modern javascript applications (bundling, minification, watch mode, ect.) | [webpack.config.js](https://github.com/vinogradov/react-starter-kit/blob/master/webpack.config.js) | Loaders: [babel-loader](https://github.com/babel/babel-loader), [eslint-loader](https://github.com/MoOx/eslint-loader), [sass-loader](https://github.com/webpack-contrib/sass-loader)
31+
[webpack 3](https://webpack.js.org/) | Build/Bundler | A module bundler for modern javascript applications (bundling, minification, watch mode, ect.) | [webpack.config.js](https://github.com/vinogradov/react-starter-kit/blob/master/webpack.config.js) | Loaders: [babel-loader](https://github.com/babel/babel-loader), [eslint-loader](https://github.com/MoOx/eslint-loader))
3232
[webpack-bundle-analyzer](https://github.com/th0r/webpack-bundle-analyzer) | Build/Bundler | Webpack plugin and CLI utility that represents bundle content as convenient interactive zoomable treemap | |
3333
[babel](https://babeljs.io/) | Transpiler | ES2015/2016/2017 support | [.babelrc](https://github.com/vinogradov/react-starter-kit/blob/master/.babelrc) | Plugins: [transform-object-rest-spread](http://babeljs.io/docs/plugins/transform-object-rest-spread/) (spreads are currently [at STAGE 3](https://github.com/sebmarkbage/ecmascript-rest-spread))
3434
[eslint](http://eslint.org/) | Linter | The pluggable linting utility for JavaScript and JSX | [.eslintrc.js](https://github.com/vinogradov/react-starter-kit/blob/master/.eslintrc.js)
35-
[sass](http://sass-lang.com/) | CSS Preprocessor | CSS with superpowers
35+
[css modules](https://github.com/css-modules/css-modules) | CSS methodology
3636
[isomorphic-fetch](https://github.com/matthew-andrews/isomorphic-fetch) | Polyfill | Isomorphic WHATWG Fetch API, for Node & Browserify | | [whatwg-fetch](https://github.com/github/fetch) from GitHub on client, [node-fetch](https://github.com/bitinn/node-fetch) on server
3737
[yarn](https://yarnpkg.com/) | Package management | Fast, reliable, and secure dependency management
3838

‎package.json

Lines changed: 5 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -47,23 +47,22 @@
4747
"redux-logger": "3.0.6",
4848
"redux-saga": "0.15.4",
4949
"redux-thunk": "2.2.0",
50-
"sass-loader": "6.0.6",
51-
"script-ext-html-webpack-plugin": "1.8.3",
50+
"script-ext-html-webpack-plugin": "1.8.5",
5251
"style-loader": "0.18.2",
53-
"webpack": "3.2.0",
54-
"webpack-bundle-analyzer": "2.8.2",
52+
"webpack": "3.3.0",
53+
"webpack-bundle-analyzer": "2.8.3",
5554
"webpack-chunk-hash": "0.4.0"
5655
},
5756
"devDependencies": {
5857
"husky": "0.14.3",
59-
"webpack-dev-server": "2.5.1"
58+
"webpack-dev-server": "2.6.1"
6059
},
6160
"engines": {
6261
"node": ">=7.5.0"
6362
},
6463
"jest": {
6564
"moduleNameMapper": {
66-
"\\.(scss)$": "<rootDir>/__mocks__/styleMock.js",
65+
"\\.(css)$": "<rootDir>/__mocks__/styleMock.js",
6766
"\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|ico)$": "<rootDir>/__mocks__/fileMock.js"
6867
}
6968
}

‎src/examples/react/__tests__/__snapshots__/hello.test.js.snap

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,17 @@
11
// Jest Snapshot v1, https://goo.gl/fbAQLP
22

33
exports[`renders correctly 1`] = `
4-
<div
5-
className="hello-message"
6-
>
4+
<div>
75
<div>
86
Hello
97
<span
10-
className="name"
8+
className={undefined}
119
>
1210
John
1311
</span>
1412
</div>
1513
<button
14+
className={undefined}
1615
onClick={[Function]}
1716
>
1817
toggle:

‎src/examples/react/hello.css

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
.primaryColor {
2+
background-color: yellow;
3+
}
4+
5+
.name {
6+
composes: primaryColor;
7+
padding: 0 5px;
8+
}
9+
10+
.submitButton {
11+
margin-top: 10px;
12+
}

‎src/examples/react/hello.js

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import * as React from 'react';
22
import PropTypes from 'prop-types';
3-
import './hello.scss';
3+
import stylefrom'./hello.css';
44

55
export default class Hello extends React.Component {
66
constructor(props) {
@@ -21,9 +21,9 @@ export default class Hello extends React.Component {
2121

2222
render() {
2323
return (
24-
<divclassName="hello-message">
25-
<div>Hello <span className="name">{this.props.name}</span></div>
26-
<button onClick={this.onClickHandler}>
24+
<div>
25+
<div>Hello <span className={style.name}>{this.props.name}</span></div>
26+
<button className={style.submitButton}onClick={this.onClickHandler}>
2727
toggle: {this.state.toggle ? 'ON' : 'OFF'}
2828
</button>
2929
</div>

‎src/examples/react/hello.scss

Lines changed: 0 additions & 12 deletions
This file was deleted.

‎webpack.config.js

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -113,6 +113,7 @@ module.exports = (env) => {
113113
})
114114
];
115115

116+
const CSS_MODULES_CONFIG = 'modules&importLoaders=1&localIdentName=[local]-[hash:base64:5]';
116117
const plugins = getPlugins(DEFAULT_PLUGINS, IS_PRODUCTION, IS_ANALYZE);
117118

118119

@@ -141,11 +142,11 @@ module.exports = (env) => {
141142
}
142143
}]
143144
}, {
144-
test: /\.scss$/,
145+
test: /\.css$/,
145146
include: SRC_ABSOLUTE_PATH, // other paths are ignored
146147
use: ExtractTextPlugin.extract({
147148
fallback: 'style-loader',
148-
use: `css-loader${IS_PRODUCTION ? '?minimize' : ''}!sass-loader`
149+
use: `css-loader?${IS_PRODUCTION ? 'minimize&' : ''}${CSS_MODULES_CONFIG}`
149150
})
150151
}, {
151152
test: /\.(jpe?g|png|gif|svg)$/,

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /