Skip to content

Commit d2b89a1

Browse files
committed
YES IT IS PASSING OMG
1 parent 2b19528 commit d2b89a1

File tree

6 files changed

+42
-30
lines changed

6 files changed

+42
-30
lines changed

src/parser.js

Lines changed: 2 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
const importRegexp = /^:import\((.+)\)$/
2+
import replaceSymbols from './replace-symbols'
23

34
export default class Parser {
45
constructor( pathFetcher, trace ) {
@@ -26,11 +27,7 @@ export default class Parser {
2627
}
2728

2829
linkImportedSymbols( css ) {
29-
css.eachDecl( decl => {
30-
Object.keys(this.translations).forEach( translation => {
31-
decl.value = decl.value.replace(translation, this.translations[translation])
32-
} )
33-
})
30+
replaceSymbols(css, this.translations)
3431
}
3532

3633
extractExports( css ) {

src/replace-symbols.js

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
const matchConstName = /[\w-]+/g
2+
3+
const replace = (declarations, object, propName) => {
4+
let matches
5+
while (matches = matchConstName.exec(object[propName])) {
6+
let replacement = declarations[matches[0]]
7+
if (replacement) {
8+
object[propName] = object[propName].slice(0, matches.index) + replacement + object[propName].slice(matchConstName.lastIndex)
9+
matchConstName.lastIndex -= matches[0].length - replacement.length
10+
}
11+
}
12+
}
13+
14+
export default (css, translations) => {
15+
css.eachDecl(decl => replace(translations, decl, 'value'))
16+
css.eachAtRule('media', atRule => replace(translations, atRule, 'params'))
17+
}

src/wip.js

Lines changed: 14 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,40 +1,29 @@
1-
import postcss from 'postcss';
1+
import postcss from 'postcss'
2+
import replaceSymbols from './replace-symbols'
23

3-
const matchImports = /^(.+?)\s+from\s+("[^"]*"|'[^']*')$/
4+
const matchImports = /^(.+?)\s+from\s+("[^"]*"|'[^']*'|[\w-]+)$/
45
const matchLet = /(?:,\s+|^)([\w-]+):?\s+("[^"]*"|'[^']*'|[^,]+)\s?/g
5-
const matchConstName = /[\w-]+/g
66
const matchImport = /^([\w-]+)(?:\s+as\s+([\w-]+))?/
77
let options = {}
88
let importIndex = 0
99
let createImportedName = options && options.createImportedName || ((importName/*, path*/) => `i__const_${importName.replace(/\W/g, '_')}_${importIndex++}`)
1010

11-
const replace = (declarations, object, propName) => {
12-
let matches
13-
while (matches = matchConstName.exec(object[propName])) {
14-
let replacement = declarations[matches[0]]
15-
if (replacement) {
16-
object[propName] = object[propName].slice(0, matches.index) + replacement + object[propName].slice(matchConstName.lastIndex)
17-
matchConstName.lastIndex -= matches[0].length - replacement.length
18-
}
19-
}
20-
}
21-
2211
export default css => {
2312
/* Find any local let rules and store them*/
24-
let declarations = {}
13+
let translations = {}
2514
css.eachAtRule(/^-?let$/, atRule => {
2615
let matches
2716
while (matches = matchLet.exec(atRule.params)) {
2817
let [/*match*/, key, value] = matches
29-
declarations[key] = value
18+
translations[key] = value
19+
atRule.removeSelf()
3020
}
3121
})
3222

33-
console.log(declarations)
3423
/* We want to export anything defined by now, but don't add it to the CSS yet or
3524
it well get picked up by the replacement stuff */
36-
let exportDeclarations = Object.keys(declarations).map(key => postcss.decl({
37-
value: declarations[key],
25+
let exportDeclarations = Object.keys(translations).map(key => postcss.decl({
26+
value: translations[key],
3827
prop: key,
3928
before: "\n ",
4029
_autoprefixerDisabled: true
@@ -46,23 +35,27 @@ export default css => {
4635
let matches = matchImports.exec(atRule.params)
4736
if (matches) {
4837
let [/*match*/, aliases, path] = matches
38+
// We can use constants for path names
39+
if (translations[path]) path = translations[path]
4940
let imports = aliases.split(/\s*,\s*/).map(alias => {
5041
let tokens = matchImport.exec(alias)
5142
if (tokens) {
5243
let [/*match*/, theirName, myName = theirName] = tokens
5344
let importedName = createImportedName(myName)
54-
declarations[myName] = importedName
45+
translations[myName] = importedName
5546
return {theirName, importedName}
5647
} else {
5748
throw new Error(`@import statement "${alias}" is invalid!`)
5849
}
5950
})
6051
importAliases.push({path, imports})
52+
atRule.removeSelf()
6153
}
6254
})
6355

56+
console.log(translations)
6457
/* Perform replacements */
65-
css.eachDecl(decl => replace(declarations, decl, 'value'))
58+
replaceSymbols(css, translations)
6659

6760
/* Add import rules */
6861
importAliases.forEach(({path, imports}) => {

test/test-cases/aliases/expected.css

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,13 @@
1-
._aliases_borders__bar {
2-
color: red;
1+
._aliases_borders__dashed {
2+
border: 4px dashed;
33
}
4+
5+
46
._aliases_source__foo {
57
background: aquamarine;
68
border-color: red;
79
}
10+
811
@media (max-width: 599px) {
912
._aliases_source__foo {
1013
background: white;

test/test-cases/aliases/expected.json

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
11
{
2-
"foo": "_aliases_borders__bar _aliases_source__foo"
2+
"borders": "\"./borders.css\"",
3+
"breakpoints": "\"./breakpoints.css\"",
4+
"foo": "_aliases_source__foo _aliases_borders__dashed"
35
}

test/test-cases/aliases/source.css

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
@let borders: "./borders.css", breakpoints: "./breakpoints";
1+
@let borders: "./borders.css", breakpoints: "./breakpoints.css";
22
@import small from breakpoints;
33
@import secondary, primary as blue from "./colors.css";
44

0 commit comments

Comments
 (0)