-
Notifications
You must be signed in to change notification settings - Fork 6.8k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
refactor(material/core): sass module migration preparation
- Loading branch information
Showing
15 changed files
with
310 additions
and
145 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
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,262 @@ | ||
| const childProcess = require('child_process'); | ||
| const path = require('path'); | ||
| const fs = require('fs'); | ||
| const {sync: glob} = require('glob'); | ||
|
|
||
| // Script that migrates the library source to the Sass module system while maintaining | ||
| // backwards-compatibility. The script assumes that `sass-migrator` is installed | ||
| // globally and that the results will be committed. Works by migrating the .scss files | ||
| // based on their position in the dependency tree, starting with the files that are depended | ||
| // upon the most and working downwards. Furthermore, because the `sass-migrator` isn't able to | ||
| // pick up imports from the `node_modules`, there is a workaround that comments out all of the | ||
| // imports from `@material/*`, runs the migration and re-adds the imports back. The script also | ||
| // sorts all remaining `@import` statements lower than `@use` statements to avoid compilation | ||
| // errors and auto-fixes some linting failures that are generated by the migrator. | ||
|
|
||
| const directory = path.join(__dirname, '../src'); | ||
| const migratedFiles = new Set(); | ||
| const ignorePatterns = [ | ||
| '**/*.import.scss', | ||
| '**/test-theming-bundle.scss', | ||
| 'material/_theming.scss' | ||
| ]; | ||
| const materialPrefixes = [ | ||
| ...getPrefixes('material', 'mat'), | ||
| ...getPrefixes('material/core', 'mat'), | ||
| // Outliers that don't have a directory of their own. | ||
| 'mat-pseudo-checkbox-', | ||
| 'mat-elevation-', | ||
| 'mat-optgroup-', | ||
| 'mat-private-' | ||
| ]; | ||
| const mdcPrefixes = [ | ||
| ...getPrefixes('material-experimental', 'mat'), | ||
| ...getPrefixes('material-experimental/mdc-core', 'mat'), | ||
| // Outliers that don't have a directory of their own. | ||
| 'mat-mdc-optgroup-' | ||
| ].map(prefix => prefix === 'mat-' ? 'mat-mdc-' : prefix); | ||
| const cdkPrefixes = getPrefixes('cdk', 'cdk'); | ||
| const cdkExperimentalPrefixes = getPrefixes('cdk-experimental', 'cdk'); | ||
|
|
||
| // Restore the source directory to a clean state. | ||
| run('git', ['clean', '-f', '-d'], false, true); | ||
| run('git', ['checkout', '--', directory], false, true); | ||
|
|
||
| // --reset is a utility to easily restore the repo to its initial state. | ||
| if (process.argv.indexOf('--reset') > -1) { | ||
| process.exit(0); | ||
| } | ||
|
|
||
| // Generate this after the repo has been reset. | ||
| const importsToAdd = extractImports(); | ||
|
|
||
| // Run the migrations. | ||
|
|
||
| // Clean up any existing import files, because they interfere with the migration. | ||
| clearImportFiles(); | ||
|
|
||
| // Migrate all the partials and forward any export symbols. | ||
| migrate('cdk/**/_*.scss', cdkPrefixes, true); | ||
| migrate('cdk-experimental/**/_*.scss', cdkExperimentalPrefixes, true); | ||
| migrate('material/core/**/_*.scss', materialPrefixes, true, ['**/_all-*.scss', '**/_core.scss']); | ||
| migrate('material/!(core)/**/_*.scss', materialPrefixes, true); | ||
| migrate('material/core/**/_*.scss', materialPrefixes, true); | ||
|
|
||
| // Comment out all MDC imports since the migrator script doesn't know how to find them. | ||
| commentOutMdc('material-experimental/**/*.scss'); | ||
|
|
||
| // Migrate all of the MDC partials. | ||
| migrate('material-experimental/mdc-helpers/**/_*.scss', mdcPrefixes, true); | ||
| migrate('material-experimental/mdc-core/**/_*.scss', mdcPrefixes, true, ['**/_core.scss']); | ||
| migrate('material-experimental/**/_*.scss', mdcPrefixes, true); | ||
|
|
||
| // Migrate everything else without forwarding. | ||
| migrate('cdk/**/*.scss', cdkPrefixes); | ||
| migrate('cdk-experimental/**/*.scss', cdkExperimentalPrefixes); | ||
| migrate('material/**/*.scss', materialPrefixes); | ||
| migrate('material-experimental/**/*.scss', mdcPrefixes); | ||
|
|
||
| // Migrate whatever is left in the source files, assuming that it's not a public API. | ||
| migrate('**/*.scss'); | ||
|
|
||
| // Restore the commented out MDC imports and sort `@use` above `@import`. | ||
| restoreAndSortMdc('material-experimental/**/*.scss'); | ||
|
|
||
| // Clear the files that we don't want. | ||
| clearUnwantedFiles(); | ||
|
|
||
| // Re-add all the imports for backwards compatibility. | ||
| reAddImports(importsToAdd); | ||
|
|
||
| // Try to auto-fix some of the lint issues using Stylelint. | ||
| run('yarn', ['stylelint', '--fix'], true, true); | ||
|
|
||
| // At this point most of the lint failures are going to be from long `@forward` statements inside | ||
| // .import.scss files. Try to auto-resolve them and then fix everything else manually. | ||
| fixSomeLongLines('**/*.import.scss', 100); | ||
|
|
||
| console.log(`Finished migrating ${migratedFiles.size} files.`); | ||
|
|
||
| function migrate(pattern, prefixes = [], forward = false, ignore = []) { | ||
| const args = ['module']; | ||
| forward && args.push('--forward=import-only'); | ||
| prefixes.length && args.push(`--remove-prefix=${prefixes.join(',')}`); | ||
|
|
||
| // Note that while the migrator allows for multiple files to be passed in, we start getting | ||
| // some assertion errors along the way. Running it on a file-by-file basis works fine. | ||
| const files = glob(pattern, {cwd: directory, ignore: [...ignore, ...ignorePatterns]}) | ||
| .filter(file => !migratedFiles.has(file)); | ||
| const message = `Migrating ${files.length} unmigrated files matching ${pattern}.`; | ||
| console.log(ignore.length ? message + ` Ignoring ${ignore.join(', ')}.` : message); | ||
| run('sass-migrator', [...args, ...files]); | ||
| files.forEach(file => migratedFiles.add(file)); | ||
| } | ||
|
|
||
| function run(name, args, canFail = false, silent = false) { | ||
| const result = childProcess.spawnSync(name, args, {shell: true, cwd: directory}); | ||
| const output = result.stdout.toString(); | ||
| !silent && output.length && console.log(output); | ||
|
|
||
| if (result.status !== 0 && !canFail) { | ||
| console.error(`Script error: ${(result.stderr || result.stdout)}`); | ||
| process.exit(1); | ||
| } | ||
| } | ||
|
|
||
| function getPrefixes(package, prefix) { | ||
| return fs.readdirSync(path.join(directory, package), {withFileTypes: true}) | ||
| .filter(current => current.isDirectory()) | ||
| .map(current => current.name) | ||
| .reduce((output, current) => [`${prefix}-${current}-`, ...output], [`${prefix}-`]); | ||
| } | ||
|
|
||
| function commentOutMdc(pattern) { | ||
| const files = glob(pattern, {cwd: directory, absolute: true}); | ||
| console.log(`Commenting out @material imports from ${files.length} files matching ${pattern}.`); | ||
| files.forEach(file => { | ||
| const content = fs.readFileSync(file, 'utf8'); | ||
| // Prefix the content with a marker so we know what to restore later. | ||
| fs.writeFileSync(file, content.replace(/(@use|@import) '@material/g, m => '//🚀 ' + m)); | ||
| }); | ||
| } | ||
|
|
||
| function restoreAndSortMdc(pattern) { | ||
| const files = glob(pattern, {cwd: directory, absolute: true}); | ||
| console.log(`Re-adding and sorting @material imports from ${files.length} ` + | ||
| `files matching ${pattern}.`); | ||
|
|
||
| files.forEach(file => { | ||
| // Remove the commented out lines with the marker from `commentOutMdc`. | ||
| const content = fs.readFileSync(file, 'utf8').replace(/\/\/🚀 /g, ''); | ||
| const lines = content.split('\n'); | ||
| let headerStartIndex = -1; | ||
| let headerEndIndex = -1; | ||
|
|
||
| // Find where the comments start and end. | ||
| for (let i = lines.length - 1; i > -1; i--) { | ||
| if (lines[i].startsWith('@use') || lines[i].startsWith('@import')) { | ||
| headerStartIndex = i; | ||
|
|
||
| if (headerEndIndex === -1) { | ||
| headerEndIndex = i + 1; | ||
| } | ||
| } | ||
| } | ||
|
|
||
| // Sort the imports so that `@use` comes before `@import`. Otherwise Sass will throw an error. | ||
| if (headerStartIndex > -1 && headerEndIndex > -1) { | ||
| const headers = lines | ||
| .splice(headerStartIndex, headerEndIndex - headerStartIndex) | ||
| .sort((a, b) => a.startsWith('@use') && !b.startsWith('@use') ? -1 : 0); | ||
| lines.splice(headerStartIndex, 0, ...headers); | ||
| } | ||
|
|
||
| fs.writeFileSync(file, lines.join('\n')); | ||
| }); | ||
| } | ||
|
|
||
| function clearImportFiles() { | ||
| const files = glob('**/*.import.scss', {cwd: directory, absolute: true}); | ||
| console.log(`Clearing ${files.length} import files.`); | ||
| files.forEach(file => fs.unlinkSync(file)); | ||
| } | ||
|
|
||
| function clearUnwantedFiles() { | ||
| // The migration script generates .import files even if we don't pass in the `--forward` when | ||
| // a file has top-level variables matching a prefix. Since we still want such files to be | ||
| // migrated, we clear the unwanted files afterwards. | ||
| const files = glob('**/*.import.scss', {cwd: directory, absolute: true, ignore: ['**/_*.scss']}); | ||
| console.log(`Clearing ${files.length} unwanted files.`); | ||
| files.forEach(file => fs.unlinkSync(file)); | ||
| } | ||
|
|
||
| function extractImports() { | ||
| return glob('**/*.scss', {cwd: directory, absolute: true}).reduce((result, file) => { | ||
| const content = fs.readFileSync(file, 'utf8'); | ||
| const match = content.match(/@import '(.*)';/g); | ||
| const imports = match ? match.filter(dep => !dep.includes(` '@material/`)) : []; | ||
| if (imports.length) { | ||
| result[file] = imports; | ||
| } | ||
| return result; | ||
| }, {}); | ||
| } | ||
|
|
||
|
|
||
| function reAddImports(mapping) { | ||
| Object.keys(mapping).forEach(fileName => { | ||
| const importEquivalentName = fileName.replace('.scss', '.import.scss'); | ||
|
|
||
| if (fs.existsSync(importEquivalentName)) { | ||
| let content = fs.readFileSync(importEquivalentName, 'utf8'); | ||
| mapping[fileName].forEach(importedFile => content += `\n${importedFile}`); | ||
| fs.writeFileSync(importEquivalentName, content); | ||
| } | ||
| }); | ||
| } | ||
|
|
||
|
|
||
| function fixSomeLongLines(pattern, limit) { | ||
| const files = glob(pattern, {cwd: directory, absolute: true}); | ||
| let count = 0; | ||
|
|
||
| files.forEach(file => { | ||
| const content = fs.readFileSync(file, 'utf8'); | ||
| let lines = content.split('\n'); | ||
| let fileChanged = false; | ||
|
|
||
| (function fixLines() { | ||
| const newLines = []; | ||
| let hasFixed = false; | ||
|
|
||
| lines.forEach(line => { | ||
| if (line.length > limit) { | ||
| const breakAt = line.lastIndexOf(' ', limit); | ||
| if (breakAt > -1) { | ||
| // Split the line in two at the limit. | ||
| newLines.push(line.slice(0, breakAt), line.slice(breakAt + 1)); | ||
| fileChanged = hasFixed = true; | ||
| } else { | ||
| newLines.push(line); | ||
| } | ||
| } else { | ||
| newLines.push(line); | ||
| } | ||
| }); | ||
|
|
||
| lines = newLines; | ||
|
|
||
| // Keep fixing until there's nothing left. Not particularly efficient... | ||
| if (hasFixed) { | ||
| fixLines(); | ||
| } | ||
| })(); | ||
|
|
||
| if (fileChanged) { | ||
| count++; | ||
| fs.writeFileSync(file, lines.join('\n')); | ||
| } | ||
| }); | ||
|
|
||
| console.log(`Fixed long lines in ${count} files.`); | ||
| } |
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
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,8 @@ | ||
| // Forwards all public API mixins so they can be imported from a single entry point. | ||
| // Note that we have to forward the `.import` files for backwards-compatibility with | ||
| // projects that don't use Sass modules and include the `mat-`-prefixed mixins. | ||
|
|
||
| @forward './core/color/all-color.import'; | ||
| @forward './core/density/private/all-density.import'; | ||
| @forward './core/theming/all-theme.import'; | ||
| @forward './core/typography/all-typography.import'; |
Oops, something went wrong.