-
Notifications
You must be signed in to change notification settings - Fork 920
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 Sass partial changes not triggering recompiles in Dev #2792
Changes from all commits
6f797f6
21c0951
1e04f20
714f3d8
aba0477
00eb784
e43847a
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -3,14 +3,37 @@ const path = require('path'); | |
const execa = require('execa'); | ||
const npmRunPath = require('npm-run-path'); | ||
|
||
const IMPORT_REGEX = /\@(use|import)\s*['"](.*?)['"]/g; | ||
const IMPORT_REGEX = /\@(use|import|forward)\s*['"](.*?)['"]/g; | ||
const PARTIAL_REGEX = /([\/\\])_(.+)(?![\/\\])/; | ||
|
||
function stripFileExtension(filename) { | ||
return filename.split('.').slice(0, -1).join('.'); | ||
} | ||
|
||
function scanSassImports(fileContents, filePath, fileExt) { | ||
function findChildPartials(pathName, fileName, fileExt) { | ||
const dirPath = path.parse(pathName).dir; | ||
|
||
// Prepend a "_" to signify a partial. | ||
if (!fileName.startsWith('_')) { | ||
fileName = '_' + fileName; | ||
} | ||
|
||
// Add on the file extension if it is not already used. | ||
if (!fileName.endsWith('.scss') || !fileName.endsWith('.sass')) { | ||
fileName += fileExt; | ||
} | ||
|
||
const filePath = path.resolve(dirPath, fileName); | ||
|
||
let contents = ''; | ||
try { | ||
contents = fs.readFileSync(filePath, 'utf8'); | ||
} catch (err) {} | ||
|
||
return contents; | ||
} | ||
|
||
function scanSassImports(fileContents, filePath, fileExt, partials = new Set()) { | ||
// TODO: Replace with matchAll once Node v10 is out of TLS. | ||
// const allMatches = [...result.matchAll(new RegExp(HTML_JS_REGEX))]; | ||
const allMatches = []; | ||
|
@@ -20,12 +43,38 @@ function scanSassImports(fileContents, filePath, fileExt) { | |
allMatches.push(match); | ||
} | ||
// return all imports, resolved to true files on disk. | ||
return allMatches | ||
allMatches | ||
.map((match) => match[2]) | ||
.filter((s) => s.trim()) | ||
.map((s) => { | ||
return path.resolve(path.dirname(filePath), s); | ||
// Avoid node packages and core sass libraries. | ||
.filter((s) => !s.includes('node_modules') && !s.includes('sass:')) | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Nice check for Sass builtins |
||
.forEach((fileName) => { | ||
let pathName = path.resolve(path.dirname(filePath), fileName); | ||
|
||
if (partials.has(pathName)) { | ||
return; | ||
} | ||
|
||
// Add this partial to the main list being passed to avoid duplicates. | ||
partials.add(pathName); | ||
|
||
// If it is a directory then look for an _index file. | ||
try { | ||
if (fs.lstatSync(pathName).isDirectory()) { | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. 👍🏻 |
||
fileName = 'index'; | ||
pathName += '/' + fileName; | ||
} | ||
} catch (err) {} | ||
|
||
// Recursively find any child partials that have not already been added. | ||
const partialsContent = findChildPartials(pathName, fileName, fileExt); | ||
if (partialsContent) { | ||
const childPartials = scanSassImports(partialsContent, pathName, fileExt, partials); | ||
partials.add(...childPartials); | ||
} | ||
}); | ||
|
||
return partials; | ||
} | ||
|
||
module.exports = function sassPlugin(_, {native, compilerOptions = {}} = {}) { | ||
|
@@ -94,7 +143,7 @@ module.exports = function sassPlugin(_, {native, compilerOptions = {}} = {}) { | |
// During development, we need to track changes to Sass dependencies. | ||
if (isDev) { | ||
const sassImports = scanSassImports(contents, filePath, fileExt); | ||
sassImports.forEach((imp) => addImportsToMap(filePath, imp)); | ||
[...sassImports].forEach((imp) => addImportsToMap(filePath, imp)); | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Is a new array ( |
||
} | ||
|
||
// If file is `.sass`, use YAML-style. Otherwise, use default. | ||
|
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,2 @@ | ||
.child | ||
text-align: left |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,2 +1,4 @@ | ||
// folder/_index.sass | ||
@use 'child-partial' | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. 👍🏻 |
||
|
||
$font-stack: Helvetica, sans-serif |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Good addition!