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

fix: create playground to evaluate self-contained styles #1436

Merged
merged 14 commits into from
May 8, 2019

Conversation

jbadan
Copy link
Contributor

@jbadan jbadan commented May 1, 2019

This pr leverages the existing playground to create a secondary one to be used to evaluate if styles are self contained and what would need to be done to have each component's scss file be self contained.

The playgrounds can be run at the same time in order to compare with npm run start:playground and npm run start:playground:selfContained. << That needs a new name 🤷‍♀

Regular playground

Note: this has not changed from the original implementation

Self contained playground

  • uses only components/componentName.scss
  • only includes components, no layouts, templates, content pages, etc

Other notable changes:

  • added titles to playground page to help differentiate between the two
  • added "Back to index" link
  • moved styles from layout to resources/layout.css to prevent confusion with inline styles
  • cleaned up layout for continuity
  • removed unused files in resources directory

Screen Shot 2019-05-01 at 8 40 52 AM
Screen Shot 2019-05-01 at 8 59 30 AM
Screen Shot 2019-05-01 at 8 41 40 AM
Screen Shot 2019-05-01 at 8 41 47 AM

@netlify
Copy link

netlify bot commented May 1, 2019

Deploy preview for fundamental ready!

Built with commit e85395e

https://deploy-preview-1436--fundamental.netlify.com

@jbadan jbadan requested a review from a team May 1, 2019 16:11
@jbadan
Copy link
Contributor Author

jbadan commented May 2, 2019

Failing tests will be solved by #1438

@@ -213,65 +217,28 @@ router.get('/:key', (req, res) => {
} finally {

}
signale.info(`Requested http://localhost:3030/${key}`);
res.render(`${key}/index`, Object.assign(GLOBALS, { id: key, component: getStarterData(), data, libs: getLibs(req.query.lib) }));
Copy link
Contributor

Choose a reason for hiding this comment

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

Is the libs no longer needed?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

It was never being used - it should have been living on a branch as it wasn't a fully developed feature.

@@ -79,8 +78,6 @@ module.exports = {
"--disable-dev-shm-usage"
]
},
"asyncCaptureLimit": 1,
"asyncCompareLimit": 1,
Copy link
Contributor Author

Choose a reason for hiding this comment

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

This is what was making the tests run so slowly

Copy link
Contributor

@greg-a-smith greg-a-smith left a comment

Choose a reason for hiding this comment

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

I think this PR accomplishes what we set out to accomplish. It gives us a nice way to see if styles are packaged together properly for standalone components. 🚢

@jbadan jbadan merged commit 960fb66 into master May 8, 2019
@jbadan jbadan deleted the fix/playground-selfcontained branch May 8, 2019 15:32
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants