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.

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

Storybook: Components: Apply style changes #18676

Merged
merged 3 commits into from Dec 3, 2019
Merged

Conversation

@ItsJonQ
Copy link
Contributor

ItsJonQ commented Nov 21, 2019

Description

This update fixes the Storybook x WP/Components workflow to enable for style changes made in .scss files to be reflected within Storybook. Previously, this was not supported due to the importing of the pre-build .css.

Storybook's webpack config was also enhanced with postcss-loader, allowing for PostCSS functions to execute on run time. This is necessary for functions like color() to work correctly.

How has this been tested?

Storybook

Screenshots

Screen Capture on 2019-11-21 at 14-32-55

Types of changes

Some things to consider would be how this may impact the build Storybook to be uploaded and served to Github pages. I don't think it would have too much of a negative impact.

Checklist:

  • My code is tested.
  • My code follows the WordPress code style.
  • My code follows the accessibility standards.
  • My code has proper inline documentation.
  • I've included developer documentation if appropriate.
  • I've updated all React Native files affected by any refactorings/renamings in this PR. .

Resolves: #18675

@ItsJonQ ItsJonQ added the Storybook label Nov 21, 2019
@ItsJonQ ItsJonQ self-assigned this Nov 21, 2019
@@ -21,8 +21,6 @@ import { registerCoreBlocks } from '@wordpress/block-library';
import '@wordpress/format-library';

/* eslint-disable no-restricted-syntax */
import '@wordpress/components/build-style/style.css';
import '@wordpress/block-editor/build-style/style.css';
import '@wordpress/block-library/build-style/style.css';

This comment has been minimized.

Copy link
@ItsJonQ

ItsJonQ Nov 21, 2019

Author Contributor

If this workflow is desired, we could apply the same technique to the editor/library styles as well.

This comment has been minimized.

Copy link
@gziolo

gziolo Nov 22, 2019

Member

I think it's perfectly fine to use sources everywhere. We do it for stories where we import JS source files directly, so we can follow the same approach for styles.

@ItsJonQ ItsJonQ force-pushed the fix/storybook-components-scss branch from 273a040 to c7b2a46 Dec 2, 2019
ItsJonQ added 3 commits Nov 21, 2019
This update fixes the Storybook x WP/Components workflow to enable for style changes made in `.scss` files to be reflected within Storybook. Previously, this was not supported because only the pre-built `.css` file was imported.

There is an interesting gotcha in this setup. The style built step leverages PostCSS for certain enhancements. For example, the `color()`. By only loading the `.scss` file, this does not work, resulting in certain styles not rendering correctly. As a work-around, I've kept one of the built `.css` files, but also loading the `.scss` file to enable the improved UI dev experience.
@ItsJonQ ItsJonQ force-pushed the fix/storybook-components-scss branch from c7b2a46 to c6c1758 Dec 2, 2019
@ItsJonQ

This comment has been minimized.

Copy link
Contributor Author

ItsJonQ commented Dec 2, 2019

Screen Shot 2019-12-02 at 10 33 23 AM

@gziolo All of the styles in the Playground should be .scss now!

cc'ing @epiqueras 😊

@import "~@wordpress/base-styles/z-index";

// @wordpress package styles
@import "../packages/components/src/style.scss";

This comment has been minimized.

Copy link
@gziolo

gziolo Dec 3, 2019

Member

I'm wondering if you could reference them the same way like base styles, but it doesn't matter after all.

@gziolo
gziolo approved these changes Dec 3, 2019
Copy link
Member

gziolo left a comment

Nice one. Thank you for bringing this in.

@gziolo gziolo merged commit 7f12830 into master Dec 3, 2019
1 of 2 checks passed
1 of 2 checks passed
pull-request-automation
Details
Travis CI - Pull Request Build Failed
Details
@gziolo gziolo deleted the fix/storybook-components-scss branch Dec 3, 2019
@youknowriad youknowriad added this to the Gutenberg 7.1 milestone Dec 9, 2019
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
3 participants
You can’t perform that action at this time.