You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 

180 lines
4.6 KiB

const postcss = require('postcss')
const topologicalSort = require('./topologicalSort')
const declWhitelist = ['composes']
const declFilter = new RegExp(`^(${declWhitelist.join('|')})$`)
const matchImports = /^(.+?)\s+from\s+(?:"([^"]+)"|'([^']+)'|(global))$/
const icssImport = /^:import\((?:"([^"]+)"|'([^']+)')\)/
const VISITED_MARKER = 1
function createParentName(rule, root) {
return `__${root.index(rule.parent)}_${rule.selector}`
}
function serializeImports(imports) {
return imports.map(importPath => '`' + importPath + '`').join(', ')
}
/**
* :import('G') {}
*
* Rule
* composes: ... from 'A'
* composes: ... from 'B'
* Rule
* composes: ... from 'A'
* composes: ... from 'A'
* composes: ... from 'C'
*
* Results in:
*
* graph: {
* G: [],
* A: [],
* B: ['A'],
* C: ['A'],
* }
*/
function addImportToGraph(importId, parentId, graph, visited) {
const siblingsId = parentId + '_' + 'siblings'
const visitedId = parentId + '_' + importId
if (visited[visitedId] !== VISITED_MARKER) {
if (!Array.isArray(visited[siblingsId])) visited[siblingsId] = []
const siblings = visited[siblingsId]
if (Array.isArray(graph[importId]))
graph[importId] = graph[importId].concat(siblings)
else graph[importId] = siblings.slice()
visited[visitedId] = VISITED_MARKER
siblings.push(importId)
}
}
module.exports = postcss.plugin('modules-extract-imports', function(
options = {}
) {
const failOnWrongOrder = options.failOnWrongOrder
return css => {
const graph = {}
const visited = {}
const existingImports = {}
const importDecls = {}
const imports = {}
let importIndex = 0
const createImportedName = typeof options.createImportedName !== 'function'
? (importName /*, path*/) =>
`i__imported_${importName.replace(/\W/g, '_')}_${importIndex++}`
: options.createImportedName
// Check the existing imports order and save refs
css.walkRules(rule => {
const matches = icssImport.exec(rule.selector)
if (matches) {
const [, /*match*/ doubleQuotePath, singleQuotePath] = matches
const importPath = doubleQuotePath || singleQuotePath
addImportToGraph(importPath, 'root', graph, visited)
existingImports[importPath] = rule
}
})
// Find any declaration that supports imports
css.walkDecls(declFilter, decl => {
let matches = decl.value.match(matchImports)
let tmpSymbols
if (matches) {
let [
,
/*match*/ symbols,
doubleQuotePath,
singleQuotePath,
global
] = matches
if (global) {
// Composing globals simply means changing these classes to wrap them in global(name)
tmpSymbols = symbols.split(/\s+/).map(s => `global(${s})`)
} else {
const importPath = doubleQuotePath || singleQuotePath
const parentRule = createParentName(decl.parent, css)
addImportToGraph(importPath, parentRule, graph, visited)
importDecls[importPath] = decl
imports[importPath] = imports[importPath] || {}
tmpSymbols = symbols.split(/\s+/).map(s => {
if (!imports[importPath][s]) {
imports[importPath][s] = createImportedName(s, importPath)
}
return imports[importPath][s]
})
}
decl.value = tmpSymbols.join(' ')
}
})
const importsOrder = topologicalSort(graph, failOnWrongOrder)
if (importsOrder instanceof Error) {
const importPath = importsOrder.nodes.find(importPath =>
importDecls.hasOwnProperty(importPath)
)
const decl = importDecls[importPath]
const errMsg =
'Failed to resolve order of composed modules ' +
serializeImports(importsOrder.nodes) +
'.'
throw decl.error(errMsg, {
plugin: 'modules-extract-imports',
word: 'composes'
})
}
let lastImportRule
importsOrder.forEach(path => {
const importedSymbols = imports[path]
let rule = existingImports[path]
if (!rule && importedSymbols) {
rule = postcss.rule({
selector: `:import("${path}")`,
raws: { after: '\n' }
})
if (lastImportRule) css.insertAfter(lastImportRule, rule)
else css.prepend(rule)
}
lastImportRule = rule
if (!importedSymbols) return
Object.keys(importedSymbols).forEach(importedSymbol => {
rule.append(
postcss.decl({
value: importedSymbol,
prop: importedSymbols[importedSymbol],
raws: { before: '\n ' }
})
)
})
})
}
})