closes #119

package.json

@@ -59,6 +59,7 @@
     "@riotjs/parser": "^4.0.3",
     "acorn": "^6.2.0",
     "acorn-dynamic-import": "^4.0.0",
+    "cssesc": "^3.0.0",
     "cumpa": "^1.0.1",
     "curri": "^1.0.1",
     "dom-nodes": "^1.0.0",

src/generators/css/index.js

@@ -1,5 +1,6 @@
 import {builders, types} from '../../utils/build-types'
 import {TAG_CSS_PROPERTY} from '../../constants'
+import cssEscape from 'cssesc'
 import getPreprocessorTypeByAttribute from '../../utils/get-preprocessor-type-by-attribute'
 import preprocess from '../../utils/preprocess-node'
 
@@ -95,8 +96,12 @@ export default function css(sourceNode, source, meta, ast) {
   const { options } = meta
   const cssNode = compactCss(sourceNode.text)
   const preprocessorOutput = preprocess('css', preprocessorName, meta, cssNode)
+  const escapedCssIdentifier = cssEscape(meta.tagName, {
+    isIdentifier: true
+  })
+
   const cssCode = (options.scopedCss ?
-    scopedCSS(meta.tagName, preprocessorOutput.code) :
+    scopedCSS(escapedCssIdentifier, preprocessorOutput.code) :
     preprocessorOutput.code
   ).trim()
 

test/core.spec.js

@@ -37,6 +37,12 @@ describe('Core specs', () => {
       expect(output.default.template).to.be.ok
     })
 
+    it('Tags with weird namespaces can output properly css names', async function() {
+      const result = compile(getFixture('weird-namespace.riot'))
+
+      expect(result.code).to.match(/weird\\:namespace/)
+    })
+
     it('Tags without html and javascript can be properly compiled', async function() {
       const result = compile(getFixture('only-css.riot'))
       const output = evaluateScript(result.code)

test/fixtures/weird-namespace.riot

@@ -0,0 +1,5 @@
+<weird:namespace>
+  <style>
+    :host { color: red; }
+  </style>
+</weird:namespace>