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

Include Style String in Webpack Loader Output #567

merged 2 commits into from Mar 4, 2019


Copy link

@cpinnix cpinnix commented Mar 4, 2019


Added the ability to use the style string like so:

import { styles } from "./styles.css";

This feature is present in the rollup plugin (

out.push(`export var styles = ${JSON.stringify(details.result.css)};`);
), but not in webpack.

Motivation and Context

We want the ability to use the style string directly so we can insert it into the DOM wherever we want. We use ShadowDOM from time to time, so we want the ability to insert styles inside ShadowDOM.

How Has This Been Tested?

Types of changes

  • Bug fix (non-breaking change which fixes an issue)
  • New feature (non-breaking change which adds functionality)
  • Breaking change (fix or feature that would cause existing functionality to change)


  • My code follows the code style of this project.
  • My change requires a change to the documentation.
  • I have updated the documentation accordingly.
  • I have read the CONTRIBUTING document.
  • I have added tests to cover my changes.
  • All new and existing tests passed.
Copy link

@codecov codecov bot commented Mar 4, 2019

Codecov Report

Merging #567 into master will increase coverage by <.01%.
The diff coverage is 100%.

Impacted file tree graph

@@            Coverage Diff             @@
##           master     #567      +/-   ##
+ Coverage   98.97%   98.98%   +<.01%     
  Files          49       49              
  Lines        1176     1177       +1     
  Branches      183      183              
+ Hits         1164     1165       +1     
  Misses         12       12
Impacted Files Coverage Δ
packages/webpack/loader.js 92% <100%> (+0.33%) ⬆️

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 1a84b5d...92982cf. Read the comment docs.


@tivac tivac merged commit 6d883ac into tivac:master Mar 4, 2019
3 of 8 checks passed
Copy link

@tivac tivac commented Mar 4, 2019



Copy link

@tivac tivac commented Mar 7, 2019

This is published in @modular-css/webpack@22.2.0


Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
None yet
None yet
Linked issues

Successfully merging this pull request may close these issues.

None yet

2 participants