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 regression where webpack doesn't permit importing scss/css #1193

Merged
merged 1 commit into from
Sep 2, 2024

Conversation

tagliala
Copy link
Contributor

@tagliala tagliala commented Sep 1, 2024

Add some entries to package.json to improve compatibility with webpack

  • Add default style and sass exports as per webpack requirements
  • Add public/assets/styles/* exports for CSS files
  • Add src/styles/* exports for Scss files. Extension can be omitted to prevent linting issues with stylelint
  • Add *.scss and *.css to "side effects" to prevent issues with tree-shaking

With this commit, it is possible to import styles with the same syntax of v10 to prevent a breaking change in webpack based applications

Refs:

Close #1184

Description

Screenshots (if appropriate)

Types of changes

  • Chore (tooling change or documentation change)
  • Refactor (non-breaking change which maintains existing functionality)
  • 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 not work as expected)

Checklist

  • My code follows the code style of this project.
  • I have added new tests for the bug I fixed/the new feature I added.
  • I have modified existing tests for the bug I fixed/the new feature I added.
  • My change requires a change to the documentation.
  • I have updated the documentation accordingly.

Add some entries to `package.json` to improve compatibility with webpack

- Add default `style` and `sass` exports as per webpack requirements
- Add `public/assets/styles/*` exports for CSS files
- Add `src/styles/*` exports for Scss files. Extension can be omitted
  to prevent linting issues with `stylelint`
- Add `*.scss` and `*.css` to "side effects" to prevent issues with
  tree-shaking

With this commit, it is possible to import styles with the same syntax
of v10 to prevent a breaking change in webpack based applications

Refs:
- https://webpack.js.org/guides/package-exports/
- https://github.com/stylelint-scss/stylelint-scss/blob/master/src/rules/at-import-partial-extension/README.md

Close Choices-js#1184
@tagliala
Copy link
Contributor Author

tagliala commented Sep 1, 2024

@Xon here it is my attempt to fix this issue. I'm using the forked branch at the moment and it works.

Sorry, but I really struggle a lot with all this webpack / node / exports things. I've tried hard at the best of my knowledge

What allows to make the import work like before are just the three extra exports:

    "./public/assets/styles/*.css": "./public/assets/styles/*.css",
    "./src/styles/*.scss": "./src/styles/*.scss",
    "./src/styles/*": "./src/styles/*.scss"

I've added also style and sass for completeness, but in example including choices.js in a scss file pre-processed by sass-loader and css-loader, will result in including the style instead of the sass export, so I'm not sure what they are about

About sideEffects, I'm seeing that often they include .css, so maybe it is good to have. This matches your PR to fix the issue

@Xon Xon changed the title Add missing webpack exports Fix regression where webpack doesn't permit importing scss/css Sep 2, 2024
@Xon Xon self-assigned this Sep 2, 2024
@Xon Xon added breaking change Pull request that introduces a breaking change bugfix Pull request that fixes an existing bug labels Sep 2, 2024
Copy link
Collaborator

@Xon Xon left a comment

Choose a reason for hiding this comment

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

Looks good, I'll update the documentation around this

@Xon Xon merged commit 438b16b into Choices-js:main Sep 2, 2024
@Xon Xon removed the breaking change Pull request that introduces a breaking change label Sep 2, 2024
@tagliala tagliala deleted the bugfix/style-export branch September 2, 2024 06:48
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bugfix Pull request that fixes an existing bug
Projects
None yet
Development

Successfully merging this pull request may close these issues.

[v11] missing style package export for webpack based asset pipelines
2 participants