-
-
Notifications
You must be signed in to change notification settings - Fork 377
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
refactor: Determine CSS module by filename, not directory (#1714)
* refactor: Determine CSS module by filename, not directory * docs: Adding changeset * refactor: Project creation pull from templates 'main' branch * test: Updating tests * revert: Accidentally removed log message
- Loading branch information
1 parent
cc65fcb
commit 7c31f6a
Showing
23 changed files
with
123 additions
and
117 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,11 @@ | ||
| --- | ||
| 'preact-cli': major | ||
| --- | ||
|
|
||
| Alters CSS Module detection to instead rely upon file names, rather than directory names. | ||
|
|
||
| Treating all CSS files found within `routes/` and `components/` as CSS Modules was not obvious, nor did it offer an easy way to opt out (or in) without editing the Webpack config itself. | ||
|
|
||
| This change makes is so that users can opt into CSS Modules from anywhere in their app by instead naming their CSS files according to the pattern `*.module.css`. | ||
|
|
||
| Anyone using CSS Modules within `routes/` or `components/` will need to alter their CSS files to be `x.module.css`. If you've disabled CSS Modules in your `preact.config.js`, you can remove that bit of configuration and use file names to instead determine behavior. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,11 +1,21 @@ | ||
| declare global { | ||
| const __webpack_public_path__: string; | ||
| namespace jest { | ||
| interface Matchers<R> { | ||
| toBeCloseInSize(receivedSize: number, expectedSize: number): R; | ||
| toFindMatchingKey(receivedKey: string): R; | ||
| } | ||
| declare const __webpack_public_path__: string; | ||
|
|
||
| declare namespace jest { | ||
| interface Matchers<R> { | ||
| toBeCloseInSize(receivedSize: number, expectedSize: number): R; | ||
| toFindMatchingKey(receivedKey: string): R; | ||
| } | ||
| } | ||
|
|
||
| export {}; | ||
| declare module '*.module.css' { | ||
| const classes: { [key: string]: string }; | ||
| export default classes; | ||
| } | ||
| declare module '*.module.sass' { | ||
| const classes: { [key: string]: string }; | ||
| export default classes; | ||
| } | ||
| declare module '*.module.scss' { | ||
| const classes: { [key: string]: string }; | ||
| export default classes; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
4 changes: 0 additions & 4 deletions
4
packages/cli/tests/subjects/css-auto-modules/components/index.js
This file was deleted.
Oops, something went wrong.
3 changes: 0 additions & 3 deletions
3
packages/cli/tests/subjects/css-auto-modules/components/style.css
This file was deleted.
Oops, something went wrong.
This file was deleted.
Oops, something went wrong.
3 changes: 0 additions & 3 deletions
3
packages/cli/tests/subjects/css-auto-modules/routes/style.css
This file was deleted.
Oops, something went wrong.
9 changes: 4 additions & 5 deletions
9
.../tests/subjects/css-auto-modules/index.js → ...s/cli/tests/subjects/css-modules/index.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,14 +1,13 @@ | ||
| import { h } from 'preact'; | ||
| import Component from './components'; | ||
| import Route from './routes'; | ||
| import './global.css'; | ||
|
|
||
| import './style.css'; | ||
| import styles from './style.module.css'; | ||
|
|
||
| export default () => { | ||
| return ( | ||
| <div> | ||
| <h1>This is an app with some fancy styles!</h1> | ||
| <Route /> | ||
| <Component /> | ||
| <h2 class={styles.text}>We can even use CSS Modules!</h2> | ||
| </div> | ||
| ); | ||
| }; |
File renamed without changes.
File renamed without changes.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,3 @@ | ||
| .text { | ||
| color: blue; | ||
| } |
11 changes: 0 additions & 11 deletions
11
packages/cli/tests/subjects/css-sass/components/app/index.js
This file was deleted.
Oops, something went wrong.
3 changes: 0 additions & 3 deletions
3
packages/cli/tests/subjects/css-sass/components/app/style.scss
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,4 +1,17 @@ | ||
| import { h } from 'preact'; | ||
| import App from './components/app'; | ||
|
|
||
| export default () => <App />; | ||
| import './style.sass'; | ||
| import './style.scss'; | ||
| import sassStyles from './style.module.sass'; | ||
| import scssStyles from './style.module.scss'; | ||
|
|
||
| export default () => { | ||
| return ( | ||
| <div> | ||
| <h1>This is an app with some fancy styles!</h1> | ||
| <h2 class={`${sassStyles.text} ${scssStyles.text}`}> | ||
| We can even use CSS Modules! | ||
| </h2> | ||
| </div> | ||
| ); | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,2 @@ | ||
| .text | ||
| color: blue |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,3 @@ | ||
| .text { | ||
| background: red; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,2 @@ | ||
| h1 | ||
| color: red |
Oops, something went wrong.