From ecce90718b18204d14a33128db91b42e01c96de3 Mon Sep 17 00:00:00 2001
From: Peter Bacon Darwin <pete@bacondarwin.com>
Date: Fri, 17 Nov 2017 13:37:15 +0000
Subject: [PATCH] build(aio): better parsing of selectors as aliases for
 directives/components (#20512)

PR Close #20512
---
 aio/package.json                                   |  1 +
 .../processors/addMetadataAliases.js               | 14 +++++++++-----
 .../processors/addMetadataAliases.spec.js          |  2 +-
 aio/yarn.lock                                      |  4 ++++
 4 files changed, 15 insertions(+), 6 deletions(-)

diff --git a/aio/package.json b/aio/package.json
index 1c09b5b010..413dbe15b2 100644
--- a/aio/package.json
+++ b/aio/package.json
@@ -98,6 +98,7 @@
     "codelyzer": "~2.0.0",
     "concurrently": "^3.4.0",
     "cross-spawn": "^5.1.0",
+    "css-selector-parser": "^1.3.0",
     "dgeni": "^0.4.7",
     "dgeni-packages": "0.22.0",
     "entities": "^1.1.1",
diff --git a/aio/tools/transforms/angular-api-package/processors/addMetadataAliases.js b/aio/tools/transforms/angular-api-package/processors/addMetadataAliases.js
index ef3dff8511..04a5e56334 100644
--- a/aio/tools/transforms/angular-api-package/processors/addMetadataAliases.js
+++ b/aio/tools/transforms/angular-api-package/processors/addMetadataAliases.js
@@ -1,3 +1,5 @@
+const  CssSelectorParser = require('css-selector-parser').CssSelectorParser;
+const cssParser = new CssSelectorParser();
 /**
  * @dgProcessor addMetadataAliases
  *
@@ -28,11 +30,13 @@ module.exports = function addMetadataAliasesProcessor() {
 };
 
 function extractSelectors(selectors) {
-  if (selectors) {
-    return stripQuotes(selectors).split(',').map(selector => selector.replace(/^\W*([\w-]+)\W*$/, '$1'));
-  } else {
-    return [];
-  }
+  const selectorAST = cssParser.parse(stripQuotes(selectors));
+  const rules = selectorAST.selectors ? selectorAST.selectors.map(ruleSet => ruleSet.rule) : [selectorAST.rule];
+  return rules.reduce((aliases, rule) => {
+    const tagAliases = rule.tagName? [rule.tagName] : [];
+    const attrRulesAliases = (rule.attrs || []).map(attr => attr.name);
+    return aliases.concat(tagAliases, attrRulesAliases);
+  }, []);
 }
 
 function stripQuotes(value) {
diff --git a/aio/tools/transforms/angular-api-package/processors/addMetadataAliases.spec.js b/aio/tools/transforms/angular-api-package/processors/addMetadataAliases.spec.js
index d1fe015e66..0ce28eb2e3 100644
--- a/aio/tools/transforms/angular-api-package/processors/addMetadataAliases.spec.js
+++ b/aio/tools/transforms/angular-api-package/processors/addMetadataAliases.spec.js
@@ -46,7 +46,7 @@ describe('addSelectorsAsAliases processor', () => {
     expect(docs[3].aliases).toEqual([docs[3].name]);
     expect(docs[4].aliases).toEqual([docs[4].name, 'myPipe']);
     expect(docs[5].aliases).toEqual([docs[5].name, 'my-directive', 'myDirective', 'my-directive']);
-    expect(docs[6].aliases).toEqual([docs[6].name, '[ngModel]:not([formControlName]):not([formControl])']);
+    expect(docs[6].aliases).toEqual([docs[6].name, 'ngModel']);
     expect(docs[7].aliases).toEqual([docs[7].name, 'my-component']);
     expect(docs[8].aliases).toEqual([docs[8].name]);
     expect(docs[9].aliases).toEqual([docs[9].name]);
diff --git a/aio/yarn.lock b/aio/yarn.lock
index cdeea17743..65116915a5 100644
--- a/aio/yarn.lock
+++ b/aio/yarn.lock
@@ -2007,6 +2007,10 @@ css-select@^1.1.0:
     domutils "1.5.1"
     nth-check "~1.0.1"
 
+css-selector-parser@^1.3.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/css-selector-parser/-/css-selector-parser-1.3.0.tgz#5f1ad43e2d8eefbfdc304fcd39a521664943e3eb"
+
 css-selector-tokenizer@^0.7.0:
   version "0.7.0"
   resolved "https://registry.yarnpkg.com/css-selector-tokenizer/-/css-selector-tokenizer-0.7.0.tgz#e6988474ae8c953477bf5e7efecfceccd9cf4c86"