Skip to content
New issue

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

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

Already on GitHub? # to your account

Feat export stylesheet #1368

Merged
merged 20 commits into from
Sep 18, 2021
Merged

Feat export stylesheet #1368

merged 20 commits into from
Sep 18, 2021

Conversation

alexander-akait
Copy link
Member

@alexander-akait alexander-akait commented Sep 3, 2021

This PR contains a:

  • bugfix
  • new feature
  • code refactor
  • test update
  • typo fix
  • metadata update

Motivation / Use-Case

webpack/webpack#14063

Example usage:

import sheet from './styles.css' assert { type: 'css' };

document.adoptedStyleSheets = [sheet];
shadowRoot.adoptedStyleSheets = [sheet];

Breaking Changes

No

Additional Info

Here some questions/notes:

  1. Should we resolve and handle @import? We can do it (because we bundle), but chrome doesn't support yet, let's keep them as is and emit an error
  2. Enabled exportType: 'css-style-sheet' will enable modules.namedExport: true by default, otherwise we need modify CSSStyleSheet interface, it is bad, so we emit error
  3. Source maps are broken due https://bugs.chromium.org/p/chromium/issues/detail?id=1174094&q=CSSStyleSheet%20source%20maps&can=2
  4. Found artifacts in render for emoji (maybe bug in chrome, I will investigate)
  5. Due 2 point, CSS modules and exportType: 'css-style-sheet' can be used only for ECMA modules, without CSS modules you can use commonjs format (i.e. esModule: false), but I recommend migrate on esModule (true by default)
  6. HMR should be written on application side, because we can't control order of document.adoptedStyleSheets, related Progress on Hot Module Replacement support? lit/lit#2007 (more links inside)
  7. mini-css-extract-plugin requires more work, we will improve this in near future
  8. After migrate on exportType: 'css-steel-sheet' you don't need style-loader anymore

Migration usage:

module.rules: [ {
  test: /\.css$/,
  oneOf: [
    { assert: { type: "css" }, loader: "css-loader", options: { exportStylesheet: true } },
    { loader: "css-loader", options: { exportStylesheet: false } }
  ]
} ]
  1. Any questions?

Example: https://web.dev/css-module-scripts/
Additional: https://developers.google.com/web/updates/2019/02/constructable-stylesheets

@codecov
Copy link

codecov bot commented Sep 3, 2021

Codecov Report

Merging #1368 (8019824) into master (bce2c17) will increase coverage by 0.02%.
The diff coverage is 100.00%.

Impacted file tree graph

@@            Coverage Diff             @@
##           master    #1368      +/-   ##
==========================================
+ Coverage   98.48%   98.51%   +0.02%     
==========================================
  Files          12       12              
  Lines        1058     1074      +16     
  Branches      361      371      +10     
==========================================
+ Hits         1042     1058      +16     
  Misses         13       13              
  Partials        3        3              
Impacted Files Coverage Δ
src/Warning.js 100.00% <ø> (ø)
src/index.js 100.00% <ø> (ø)
src/plugins/postcss-icss-parser.js 100.00% <100.00%> (ø)
src/plugins/postcss-import-parser.js 100.00% <100.00%> (ø)
src/utils.js 97.78% <100.00%> (+0.05%) ⬆️

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 bce2c17...8019824. Read the comment docs.

@alexander-akait alexander-akait merged commit c6d2066 into master Sep 18, 2021
@alexander-akait alexander-akait deleted the feat-exportStylesheet branch September 18, 2021 18:07
# for free to join this conversation on GitHub. Already have an account? # to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

1 participant