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

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
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.

None yet

1 participant