kylefang/create-react-app
1
0
Fork 0
mirror of https://github.com/zhigang1992/create-react-app.git synced 2026-01-12 22:46:30 +08:00
Code Issues Packages Projects Releases Wiki Activity

Update getCSSModuleLocalIdent to support Sass (#4391)

Browse Source 
* Update getCSSModuleLocalIdent to support Sass

* Fix Sass/SCSS index module tests

Also make them more consistent with the non-index variants.
This commit is contained in:
arianon
2018-05-08 13:07:41 -04:00
committed by Joe Haddad
parent 7b2eae1745
commit e5e9f59a4e
6 changed files with 36 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
packages/react-dev-utils/getCSSModuleLocalIdent.js vendored
View File

@@ -15,8 +15,10 @@ module.exports = function getLocalIdent(
localName,
options
) {
// Use the filename or folder name, based on some uses the index.js / index.module.css project style
const fileNameOrFolder = context.resourcePath.endsWith('index.module.css')
// Use the filename or folder name, based on some uses the index.js / index.module.(css|scss|sass) project style
const fileNameOrFolder = context.resourcePath.match(
/index\.module\.(css|scss|sass)$/
)
? '[folder]'
: '[name]';
// Create a hash based on a the file location and class name. Will be unique across a project, and close to globally unique.

10
packages/react-scripts/fixtures/kitchensink/integration/webpack.test.js
View File

@@ -50,6 +50,11 @@ describe('Integration', () => {
).to.match(
/.+scss-styles_scssModulesInclusion.+\{background:.+;color:.+}/
);
expect(
doc.getElementsByTagName('style')[1].textContent.replace(/\s/g, '')
).to.match(
/.+assets_scssModulesIndexInclusion.+\{background:.+;color:.+}/
);
});
it('sass inclusion', async () => {
@@ -68,6 +73,11 @@ describe('Integration', () => {
).to.match(
/.+sass-styles_sassModulesInclusion.+\{background:.+;color:.+}/
);
expect(
doc.getElementsByTagName('style')[1].textContent.replace(/\s/g, '')
).to.match(
/.+assets_sassModulesIndexInclusion.+\{background:.+;color:.+}/
);
});
it('graphql files inclusion', async () => {

8
packages/react-scripts/fixtures/kitchensink/src/features/webpack/SassModulesInclusion.js vendored
View File

@@ -7,7 +7,13 @@
import React from 'react';
import styles from './assets/sass-styles.module.sass';
import indexStyles from './assets/index.module.sass';
export default () => (
<p className={styles.sassModulesInclusion}>SASS Modules are working!</p>
<div>
<p className={styles.sassModulesInclusion}>SASS Modules are working!</p>
<p className={indexStyles.sassModulesIndexInclusion}>
SASS Modules with index are working!
</p>
</div>
);

8
packages/react-scripts/fixtures/kitchensink/src/features/webpack/ScssModulesInclusion.js vendored
View File

@@ -7,7 +7,13 @@
import React from 'react';
import styles from './assets/scss-styles.module.scss';
import indexStyles from './assets/index.module.scss';
export default () => (
<p className={styles.scssModulesInclusion}>SCSS Modules are working!</p>
<div>
<p className={styles.scssModulesInclusion}>SCSS Modules are working!</p>
<p className={indexStyles.scssModulesIndexInclusion}>
SCSS Modules with index are working!
</p>
</div>
);

4
packages/react-scripts/fixtures/kitchensink/src/features/webpack/assets/index.module.sass Normal file
View File

@@ -0,0 +1,4 @@
.sassModulesIndexInclusion
background: darkblue
color: lightblue

4
packages/react-scripts/fixtures/kitchensink/src/features/webpack/assets/index.module.scss Normal file
View File

@@ -0,0 +1,4 @@
.scssModulesIndexInclusion {
background: darkblue;
color: lightblue;
}