fix css properties check in bem mod files

Author: andieelmes

index.js

@@ -7,6 +7,7 @@ const generateConfig = require('./lib/generate-config');
 const toRegexp = require('./lib/to-regexp');
 const path = require('path');
 const checkImplicit = require('./lib/check-implicit');
+const getComponentNameFromFilename = require('./lib/get-component-name-from-filename');
 
 const DEFINE_VALUE = '([-_a-zA-Z0-9]+)\\s*(?:;\\s*(weak))?';
 const DEFINE_DIRECTIVE = new RegExp(
@@ -120,16 +121,19 @@ const plugin = (primaryOptions, secondaryOptions) => {
             );
             if (defined === 'index') {
               defined = path.basename(path.join(filename, '..'));
+            } else {
+              defined = getComponentNameFromFilename(defined, config);
             }
 
             if (
               defined !== UTILITIES_IDENT &&
               !toRegexp(config.componentNamePattern).test(defined)
             ) {
               result.warn(
-                `Invalid component name from implicit conversion from filename ${filename}`
+                `Invalid component name ${defined} from implicit conversion from filename ${filename}`
               );
             }
+
             ranges.push({
               defined,
               start: 0,

lib/get-component-name-from-filename.js

@@ -0,0 +1,19 @@
+'use strict';
+
+/**
+ * @param {String} filename
+ * @param {Object} config
+ * @param {String} config.componentNamePattern
+ */
+module.exports = (filename, config) => {
+  const {componentNamePattern} = config;
+
+  if (componentNamePattern.test(filename)) return filename;
+
+  for (let i = 0; i < filename.length; i++) {
+    const part = filename.slice(0, -i);
+    if (componentNamePattern.test(part)) return part;
+  }
+
+  return filename;
+};

test/fixtures/implicit-component-element-properties-valid.css

@@ -0,0 +1,4 @@
+.component-name__element {
+  --component-name--color: red;
+}
+

test/fixtures/implicit-component-mod-properties-valid.css

@@ -0,0 +1,7 @@
+.component-name_boolean-mod {
+  --component-name--color: green;
+}
+
+.component-name_mod_value {
+  --component-name--color: red;
+}

test/fixtures/implicit-component-properties-valid.css

@@ -0,0 +1,3 @@
+.component-name {
+  --component-name--color: green;
+}

test/fixtures/properties-bem-valid.css

@@ -0,0 +1,17 @@
+/** @define component-name */
+
+.component-name {
+  --component-name--color: green;
+}
+
+.component-name_boolean-mod {
+  --component-name--color: red;
+}
+
+.component-name_mod_value {
+  --component-name--color: red;
+}
+
+.component-name__element {
+  --component-name--color: red;
+}

test/property-validation.js

@@ -2,11 +2,67 @@ const util = require('./test-util');
 
 const assertSuccess = util.assertSuccess;
 const assertSingleFailure = util.assertSingleFailure;
+const assertFailure = util.assertFailure;
 const fixture = util.fixture;
 
 describe('property validation', () => {
   it('accepts custom properties that begin with the component name', () => {
     assertSuccess(fixture('properties-valid'));
+    assertSuccess(fixture('properties-bem-valid'), {preset: 'bem'});
+  });
+
+  it('accepts custom properties that implicitly begin with the component name', () => {
+    const filenameBlock = `${process.cwd()}/component-name.css`;
+    assertSuccess(
+      fixture('implicit-component-properties-valid'),
+      {preset: 'bem', implicitComponents: true},
+      null,
+      filenameBlock
+    );
+  });
+
+  it('accepts custom properties that implicitly begin with the component name in bem files', () => {
+    const filenameMod = `${process.cwd()}/component-name_mod.css`;
+    assertSuccess(
+      fixture('implicit-component-mod-properties-valid'),
+      {preset: 'bem', implicitComponents: true},
+      null,
+      filenameMod
+    );
+
+    const filenameElement = `${process.cwd()}/component-name__element.css`;
+    assertSuccess(
+      fixture('implicit-component-element-properties-valid'),
+      {preset: 'bem', implicitComponents: true},
+      null,
+      filenameElement
+    );
+  });
+
+  it('rejects custom properties that do not begin with the implicit component name in bem files', () => {
+    const filenameBlock = `${process.cwd()}/component-name-invalid.css`;
+    assertFailure(
+      fixture('implicit-component-properties-valid'),
+      {preset: 'bem', implicitComponents: true},
+      null,
+      filenameBlock
+    );
+
+    const filenameMod = `${process.cwd()}/component-name-invalid_mod.css`;
+    assertFailure(
+      fixture('implicit-component-mod-properties-valid'),
+      {preset: 'bem', implicitComponents: true},
+      null,
+      filenameMod
+    );
+
+    const filenameElement = `${process.cwd()}/component-name-invalid__element.css`;
+    assertFailure(
+      fixture('implicit-component-element-properties-valid'),
+      {preset: 'bem', implicitComponents: true},
+      null,
+      filenameElement
+    );
   });
 
   const invDef = '/** @define InvalidRootVars */';