Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 8 additions & 4 deletions generators/app/postcss.js
Original file line number Diff line number Diff line change
Expand Up @@ -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);
}

Expand All @@ -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);
Expand Down
4 changes: 2 additions & 2 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down
64 changes: 38 additions & 26 deletions test/generators/app/indexTest.js
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand Down Expand Up @@ -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', () => {
Expand All @@ -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',
Expand Down