Skip to content

Commit

Permalink
V4 -- Updates to support PostCSS installation
Browse files Browse the repository at this point in the history 
* 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
  • Loading branch information
@stylesuxx @sthzg
stylesuxx authored and sthzg committed Nov 22, 2016
1 parent b581e5b commit a2bd75a
Show file tree
Hide file tree
Showing 3 changed files with 48 additions and 32 deletions.
12 changes: 8 additions & 4 deletions generators/app/postcss.js
View file
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
View file
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
View file
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

0 comments on commit a2bd75a

Please sign in to comment.