Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Use postcss.config.js when present #4411

Closed
wants to merge 13 commits into from
Closed

Use postcss.config.js when present #4411

Show file tree
Hide file tree
Changes from 5 commits
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
b205946
Add find-up to dependencies
kylemh Oct 13, 2018
4dd6269
Use postcss config in webpack if config file present
kylemh Oct 13, 2018
92538a7
Merge branch 'master' of github.com:storybooks/storybook
kylemh Oct 13, 2018
5ea6161
Fix lockfile discrepancy
kylemh Oct 13, 2018
9ab0c20
Merge branch 'master' into feature/use-custom-postcss-config
ndelangen Oct 14, 2018
8703d83
Merge branch 'master' of github.com:storybooks/storybook into feature…
kylemh Oct 25, 2018
3337585
Simplify and spread logic into separate file
kylemh Oct 25, 2018
9250f1e
Restructure to include logging statement
kylemh Oct 25, 2018
6f22d66
Fix config object
kylemh Oct 25, 2018
d413841
Asyncify findUp
kylemh Oct 25, 2018
d785ab3
Temporarily commit example
kylemh Oct 25, 2018
7bac401
Merge branch 'master' of github.com:storybooks/storybook into feature…
kylemh Oct 25, 2018
dfa78c3
Actually use async
kylemh Oct 25, 2018
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
1 change: 1 addition & 0 deletions lib/core/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -54,6 +54,7 @@
"file-loader": "^2.0.0",
"file-system-cache": "^1.0.5",
"find-cache-dir": "^2.0.0",
"find-up": "^3.0.0",
"global": "^4.3.2",
"html-webpack-plugin": "^4.0.0-beta.1",
"inquirer": "^6.2.0",
Expand Down
27 changes: 17 additions & 10 deletions lib/core/src/server/config/webpack.config.default.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,11 @@
import autoprefixer from 'autoprefixer';
import findUp from 'find-up';

export function createDefaultWebpackConfig(storybookBaseConfig) {
const postcssConfig = findUp.sync('postcss.config.js', {
cwd: storybookBaseConfig.context,
});

return {
...storybookBaseConfig,
module: {
Expand All @@ -19,16 +24,18 @@ export function createDefaultWebpackConfig(storybookBaseConfig) {
},
{
loader: require.resolve('postcss-loader'),
options: {
ident: 'postcss', // https://webpack.js.org/guides/migrating/#complex-options
postcss: {},
plugins: () => [
require('postcss-flexbugs-fixes'), // eslint-disable-line
autoprefixer({
flexbox: 'no-2009',
}),
],
},
options: postcssConfig
? {
postcssConfig,
Copy link
Member

Choose a reason for hiding this comment

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

should it be { ...postcssConfig } ?

I think will be better something like this:

postcssConfig || {
   // flexbug blah blah
}

Copy link
Member Author

@kylemh kylemh Oct 14, 2018 •
edited
Loading

Choose a reason for hiding this comment

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

I think the config would work without a spread operator, but adding it doesn't hurt anything, so I will 👍

I'm totally fine with that! I do my best to not subscribe to lint beliefs and simply adhere to the linting of the code base. I have seen @ndelangen express a favor towards ternaries when discussing short-circuits, so I did it that way; perhaps a lint rule is in order to prevent further confusion?

Copy link
Member

Choose a reason for hiding this comment

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

I was more about to simplify the readability. Maybe even worth to extract it to a func

Copy link
Member Author

@kylemh kylemh Oct 15, 2018 •
edited
Loading

Choose a reason for hiding this comment

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

simplify the readability

is subjective.

I think ternaries read fine, but most importantly this discussion shouldn't even happen. We should just have a lint rule to prevent bike-shedding. I want to do whatever the team wants to do here.

Doesn't look like ESLint has a rule to prevent this discussion aside from preventing ternaries at all. It'd be cool to see a prefer-short-circuit lint rule which favors && or || instead of ternaries where one option is null or undefined

Anywho... I'll go ahead and make both of those changes.

}
: {
plugins: () => [
require('postcss-flexbugs-fixes'), // eslint-disable-line global-require
Copy link
Member

Choose a reason for hiding this comment

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

I understand that something won't work if this plugin will be missing?

Copy link
Member Author

Choose a reason for hiding this comment

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

The plugins are currently available, correct? I didn't remove dependencies for that reason.

Copy link
Member

Choose a reason for hiding this comment

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

I mean, should we somehow merge it to the user's config?

Copy link
Member Author

Choose a reason for hiding this comment

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

Oh, I wouldn't do that. Either we give them a set of defaults, or they have full control. I'm not a fan of doing obscure things like providing a pair of plugins the user may or may not want if they have their own postcss config.

autoprefixer({
flexbox: 'no-2009',
}),
],
},
},
],
},
Expand Down