archive-gh-me/generator-react-webpack
1
0
Fork 0
mirror of https://github.com/react-webpack-generators/generator-react-webpack.git synced 2025-12-08 18:01:59 +00:00
Code Issues Projects Releases Wiki Activity

V4 -- Updates to support PostCSS installation

Browse Source 
* Updated tessts to successfully run against current master of the template
* Updated postcss attachement to new webpack config. Adjusted tests.
* Updated dependencies
* Use newest template
* Updated Esprima
This commit is contained in:
Chris 2016-11-22 12:35:31 +01:00 committed by Stephan Herzog
parent b581e5bd02
commit a2bd75a83b
3 changed files with 48 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
generators/app/postcss.js
View File

@ -39,17 +39,22 @@ module.exports = {
const postcss = postcssAst.body[0].declarations[0].init.properties[0];
// The postcss loader item to add
const postcssLoader = { type: 'Literal', value: 'postcss', raw: '\'postcss\'' };
const postcssLoaderObject = 'var postcss = [{ loader: \'postcss-loader\'}]';
const postcssLoaderAst = esprima.parse(postcssLoaderObject);
const postcssLoader = postcssLoaderAst.body[0].declarations[0].init.elements[0];
// Add postcss to the loaders array
walk.walkAddParent(ast, (node) => {
// Add the postcss key to the global configuration
if(
node.type === 'MethodDefinition' &&
node.key.name === 'defaultSettings'
) {
const returnStatement = node.value.body.body[0];
const returnStatement = node.value.body.body[1];
returnStatement.argument.properties.push(postcss);
}
@ -64,13 +69,12 @@ module.exports = {
// Regular css usage
if(cssDialects.indexOf(node.value.regex.pattern) !== -1) {
const loaderData = node.parent.properties[1];
loaderData.value.elements.push(postcssLoader);
}
if(preprocessorDialects.indexOf(node.value.regex.pattern) !== -1) {
if(preprocessorDialects.indexOf(node.value.regex.pattern) !== -1) {
const loaderData = node.parent.properties[1];
const lastElm = loaderData.value.elements.pop();
loaderData.value.elements.push(postcssLoader);

4
package.json
View File

@ -48,9 +48,9 @@
},
"dependencies": {
"escodegen": "^1.7.0",
"esprima": "^2.7.0",
"esprima": "^3.1.1",
"esprima-walk": "^0.1.0",
"react-webpack-template": "^2.0.1-0",
"react-webpack-template": "^2.0.1-5",
"underscore.string": "^3.2.2",
"yeoman-generator": "^0.24.0",
"yeoman-welcome": "^1.0.1"

64
test/generators/app/indexTest.js
View File

@ -101,10 +101,10 @@ describe('react-webpack:app', () => {
assert.file([
'src/actions/README.md',
'src/index.js',
'src/client.js',
'src/components/App.js',
'src/components/app.css',
'src/favicon.ico',
'src/static/favicon.ico',
'src/images/yeoman.png',
'src/index.html',
'src/sources/README.md',
@ -226,28 +226,40 @@ describe('react-webpack:app with PostCSS support', () => {
});
it('should insert the postcss loader into the style pipes', () => {
assert.fileContent('conf/webpack/Base.js', `'css?modules&importLoaders=1&localIdentName=[name]-[local]-[hash:base64:5]',
'postcss'`);
assert.fileContent('conf/webpack/Base.js', `'css',
'postcss'`);
assert.fileContent('conf/webpack/Base.js', `'css?modules&importLoaders=1&localIdentName=[name]-[local]-[hash:base64:5]',
'postcss',
'sass'`);
assert.fileContent('conf/webpack/Base.js', `'css',
'postcss',
'sass'`);
assert.fileContent('conf/webpack/Base.js', `'css?modules&importLoaders=1&localIdentName=[name]-[local]-[hash:base64:5]',
'postcss',
'less'`);
assert.fileContent('conf/webpack/Base.js', `'css',
'postcss',
'less'`);
assert.fileContent('conf/webpack/Base.js', `'css?modules&importLoaders=1&localIdentName=[name]-[local]-[hash:base64:5]',
'postcss',
'stylus'`);
assert.fileContent('conf/webpack/Base.js', `'css',
'postcss',
'stylus'`);
assert.fileContent('conf/webpack/Base.js', `{
loader: 'css-loader',
query: cssModulesQuery
},
{ loader: 'postcss-loader' }`);
assert.fileContent('conf/webpack/Base.js', `{ loader: 'css-loader' },
{ loader: 'postcss-loader' }`);
assert.fileContent('conf/webpack/Base.js', `{
loader: 'css-loader',
query: cssModulesQuery
},
{ loader: 'postcss-loader' },
{ loader: 'sass-loader' }`);
assert.fileContent('conf/webpack/Base.js', `{ loader: 'css-loader' },
{ loader: 'postcss-loader' },
{ loader: 'sass-loader' }`);
assert.fileContent('conf/webpack/Base.js', `{
loader: 'css-loader',
query: cssModulesQuery
},
{ loader: 'postcss-loader' },
{ loader: 'less-loader' }`);
assert.fileContent('conf/webpack/Base.js', `{ loader: 'css-loader' },
{ loader: 'postcss-loader' },
{ loader: 'less-loader' }`);
assert.fileContent('conf/webpack/Base.js', `{
loader: 'css-loader',
query: cssModulesQuery
},
{ loader: 'postcss-loader' },
{ loader: 'stylus-loader' }`);
assert.fileContent('conf/webpack/Base.js', `{ loader: 'css-loader' },
{ loader: 'postcss-loader' },
{ loader: 'stylus-loader' }`);
});
it('should append the postcss function to the base config', () => {
@ -259,10 +271,10 @@ describe('react-webpack:app with PostCSS support', () => {
assert.file([
'src/actions/README.md',
'src/index.js',
'src/client.js',
'src/components/App.js',
'src/components/app.css',
'src/favicon.ico',
'src/static/favicon.ico',
'src/images/yeoman.png',
'src/index.html',
'src/sources/README.md',