fix: Fix problems with JSX and Webpack integrations.

 - Parse any imported css file as a block file, not just those ending in .block.css.
 - Rewrite to 'className' attribute, not 'class'.
 - Add '.js' to list of Analyzable file extensions.

Author: amiller-gh

package.json

@@ -19,7 +19,6 @@
     "@types/chai": "^3.5.2",
     "@types/debug": "0.0.29",
     "@types/loader-utils": "^1.1.3",
-    "@types/minimatch": "^2.0.29",
     "@types/mocha": "^2.2.41",
     "@types/node": "^8.0.0",
     "@types/prettier": "^1.8.0",

packages/@css-blocks/jsx/package.json

@@ -60,7 +60,6 @@
     "babel-types": "7.0.0-beta.3",
     "babylon": "7.0.0-beta.46",
     "debug": "^2.6.8",
-    "minimatch": "^3.0.4",
     "object.values": "^1.0.4",
     "opticss": "^0.3.0"
   }

packages/@css-blocks/jsx/src/transformer/babel.ts

@@ -52,6 +52,7 @@ export interface CssBlocksVisitor {
 }
 
 const CAN_PARSE_EXTENSIONS = {
+  ".js": true,
   ".tsx": true,
   ".jsx": true,
 };
@@ -166,7 +167,7 @@ export function makePlugin(transformOpts: { rewriter: Rewriter }): () => PluginO
               attributeValue = stringLiteral(classMapping.staticClasses.join(" "));
             }
             if (attributeValue) {
-              newClassAttr = jSXAttribute(jSXIdentifier("class"), attributeValue);
+              newClassAttr = jSXAttribute(jSXIdentifier("className"), attributeValue);
             }
 
             let classAttrs = this.elementAnalyzer.classAttributePaths(path);

packages/@css-blocks/jsx/src/utils/isBlockFilename.ts

@@ -1,5 +1,4 @@
-import * as minimatch from "minimatch";
-const BLOCK_PATTERN = new minimatch.Minimatch("*.block.*", { matchBase: true });
+import * as path from "path";
 export function isBlockFilename(filename: string): boolean {
-    return BLOCK_PATTERN.match(filename);
+    return path.parse(filename).ext === ".css";
 }

packages/@css-blocks/jsx/test/analyzer/typed-file-analysis.ts

@@ -12,9 +12,39 @@ export class Test {
     mock.restore();
   }
 
+  @test "Is able to parse vanilla without a `jsx` extension."() {
+    mock({
+      "bar.css": `
+        :scope { color: blue; }
+        .pretty { color: red; }
+        .pretty[state|color=yellow] {
+          color: yellow;
+        }
+      `,
+    });
+
+    return parse(`
+      import bar from 'bar.css';
+      import objstr from 'obj-str';
+
+      let style = objstr({
+        [bar.pretty]: true,
+        [bar.pretty.color("yellow")]: true
+      });
+
+      <div class={style}></div>;`,
+                 "test-file.js",
+                 { types: "none" },
+    ).then((analyzer: Analyzer) => {
+      let result = analyzer.serialize();
+      let analysis = result.analyses[0];
+      assert.deepEqual(analysis.stylesFound, ["bar.pretty", "bar.pretty[state|color=yellow]"]);
+    });
+  }
+
   @test "Is able to parse typescript"() {
     mock({
-      "bar.block.css": `
+      "bar.css": `
         :scope { color: blue; }
         .pretty { color: red; }
         .pretty[state|color=yellow] {
@@ -24,7 +54,7 @@ export class Test {
     });
 
     return parse(`
-      import bar from 'bar.block.css';
+      import bar from 'bar.css';
       import objstr from 'obj-str';
 
       function fooGood<T extends { x: number }>(obj: T): T {
@@ -54,7 +84,7 @@ export class Test {
 
   @test "Is able to parse flow"() {
     mock({
-      "bar.block.css": `
+      "bar.css": `
         :scope { color: blue; }
         .pretty { color: red; }
         .pretty[state|color=yellow] {
@@ -64,7 +94,7 @@ export class Test {
     });
 
     return parse(`
-      import bar from 'bar.block.css';
+      import bar from 'bar.css';
       import objstr from 'obj-str';
 
       let color: string = "yellow";

yarn.lock

@@ -1070,10 +1070,6 @@
   version "3.0.3"
   resolved "https://registry.npmjs.org/@types/minimatch/-/minimatch-3.0.3.tgz#3dca0e3f33b200fc7d1139c0cd96c1268cadfd9d"
 
-"@types/minimatch@^2.0.29":
-  version "2.0.29"
-  resolved "https://registry.npmjs.org/@types/minimatch/-/minimatch-2.0.29.tgz#5002e14f75e2d71e564281df0431c8c1b4a2a36a"
-
 "@types/mocha@^2.2.41":
   version "2.2.48"
   resolved "https://registry.npmjs.org/@types/mocha/-/mocha-2.2.48.tgz#3523b126a0b049482e1c3c11877460f76622ffab"