Skip to content

Commit

Permalink
refactor(style): reswitch from postcss to sass
Browse files Browse the repository at this point in the history
Closes #14.
  • Loading branch information
balthazar committed Sep 20, 2016
1 parent ea3fd10 commit 758c874
Show file tree
Hide file tree
Showing 4 changed files with 5 additions and 13 deletions.
7 changes: 3 additions & 4 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -49,7 +49,7 @@
"redux-thunk": "^2.1.0"
},
"devDependencies": {
"autoprefixer": "^6.4.1",
"autoprefixer-loader": "^3.2.0",
"babel-cli": "^6.14.0",
"babel-core": "^6.14.0",
"babel-eslint": "^6.1.2",
Expand All @@ -69,10 +69,9 @@
"eslint-plugin-react": "^6.2.2",
"extract-text-webpack-plugin": "^2.0.0-beta",
"ignore-styles": "^5.0.1",
"postcss-import": "8.1.0",
"postcss-loader": "^0.13.0",
"precss": "^1.4.0",
"node-sass": "^3.10.0",
"progress-bar-webpack-plugin": "^1.9.0",
"sass-loader": "^4.0.2",
"style-loader": "^0.13.1",
"webpack": "^2.1.0-beta.4",
"webpack-dev-middleware": "^1.7.0",
Expand Down
4 changes: 1 addition & 3 deletions webpack/build.js
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ export default {
test: /\.scss$/,
loader: ExtractTextPlugin.extract({
fallbackLoader: 'style',
loader: 'css!postcss',
loader: 'css!sass!autoprefixer',

This comment has been minimized.

Copy link
@meriadec

meriadec Sep 20, 2016

Member

I think we should adopt the same format as webpack/dev.js

        loaders: ['css', 'sass', 'autoprefixer'],

I find it less cryptic than the ! notation.

This comment has been minimized.

Copy link
@balthazar

balthazar Sep 20, 2016

Author Member

True, I tested it unsuccessfully with a loaders parameter and assumed an array wouldn't work in loader, but was wrong. Commit inc 😉

}),
exclude: /node_modules/,
}],
Expand All @@ -48,8 +48,6 @@ export default {

],

progress: true,

stats: {
colors: true,
reasons: false,
Expand Down
5 changes: 0 additions & 5 deletions webpack/config.js
Original file line number Diff line number Diff line change
@@ -1,8 +1,5 @@
import webpack from 'webpack'
import path from 'path'
import precss from 'precss'
import autoprefixer from 'autoprefixer'
import postcssImport from 'postcss-import'

const env = process.env.NODE_ENV || 'development'
const dist = path.resolve(__dirname, '../dist')
Expand All @@ -17,8 +14,6 @@ export default {
publicPath: '/dist/',
},

postcss: wp => [postcssImport({ addDependencyTo: wp }), precss, autoprefixer],

plugins: [

new webpack.DefinePlugin({
Expand Down
2 changes: 1 addition & 1 deletion webpack/dev.js
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ export default {
query: { presets: ['react-hmre'] },
}, {
test: /\.scss$/,
loaders: ['style', 'css', 'postcss'],
loaders: ['style', 'css', 'sass', 'autoprefixer'],
include: src,
}],
},
Expand Down

3 comments on commit 758c874

@elebescond
Copy link

Choose a reason for hiding this comment

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

autoprefixer-loader module recommends using postcss-loader + autoprefixer modules

@meriadec
Copy link
Member

Choose a reason for hiding this comment

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

Yes :/ but we have taken the decision to remove PostCSS (see this comment by MoOx which explain a lot), so it is not an option anymore. Sadly, PostCSS doesn't allow to transform real Sass (only "Sass-like" with precss), and the Sass language is much more mature.

@elebescond
Copy link

Choose a reason for hiding this comment

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

Very interesting comments... now I understand this choice :-)

C'est le farwest tout ça !

Please sign in to comment.