Skip to content

Commit 650fd49

Browse files
committed
feat: support SCSS imports
1 parent c2472e6 commit 650fd49

File tree

4 files changed

+16
-6
lines changed

4 files changed

+16
-6
lines changed

README.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -153,7 +153,7 @@ NODE_ENV=production ./test
153153

154154
## How does it work?
155155

156-
1. Builds index of all stylesheet imports per file.
156+
1. Builds index of all stylesheet imports per file (imports of files with `.css` or `.scss` extension).
157157
1. Uses [postcss](https://github.com/postcss/postcss) to parse the matching CSS files.
158158
1. Iterates through all [JSX](https://facebook.github.io/react/docs/jsx-in-depth.html) element declarations.
159159
1. Parses the `styleName` attribute value into anonymous and named CSS module references.

package.json

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,8 @@
1414
"postcss-modules-local-by-default": "^1.1.1",
1515
"postcss-modules-parser": "^1.1.0",
1616
"postcss-modules-scope": "^1.0.2",
17-
"postcss-modules-values": "^1.2.2"
17+
"postcss-modules-values": "^1.2.2",
18+
"postcss-scss": "^0.4.0"
1819
},
1920
"description": "Transforms styleName to className using compile time CSS module resolution.",
2021
"devDependencies": {

src/index.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -61,7 +61,7 @@ export default ({
6161
inherits: babelPluginJsxSyntax,
6262
visitor: {
6363
ImportDeclaration (path: Object, stats: Object): void {
64-
if (!path.node.source.value.endsWith('.css')) {
64+
if (!path.node.source.value.endsWith('.css') && !path.node.source.value.endsWith('.scss')) {
6565
return;
6666
}
6767

src/requireCssModule.js

Lines changed: 12 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -14,15 +14,24 @@ import LocalByDefault from 'postcss-modules-local-by-default';
1414
import Parser from 'postcss-modules-parser';
1515
import Scope from 'postcss-modules-scope';
1616
import Values from 'postcss-modules-values';
17+
import ScssSyntax from 'postcss-scss';
1718
import type {
1819
StyleModuleMapType
1920
} from './types';
2021

2122
const getTokens = (runner, cssSourceFilePath: string): StyleModuleMapType => {
23+
const sourceFilePathIsScss = cssSourceFilePath.endsWith('.scss');
24+
25+
const options: Object = {
26+
from: cssSourceFilePath
27+
};
28+
29+
if (sourceFilePathIsScss) {
30+
options.syntax = ScssSyntax;
31+
}
32+
2233
const lazyResult = runner
23-
.process(readFileSync(cssSourceFilePath, 'utf-8'), {
24-
from: cssSourceFilePath
25-
});
34+
.process(readFileSync(cssSourceFilePath, 'utf-8'), options);
2635

2736
lazyResult
2837
.warnings()

0 commit comments

Comments
 (0)