postcss-bem-linter - npm Package Compare versions

Comparing version 2.0.0 to 2.1.0

CHANGELOG.md

@@ -0,1 +1,7 @@
+=== Head
+
+=== 2.1.0 (October 31, 2015)
+
+* Support string patterns for everything: `componentName`, `componentSelectors` (with one description, and with `initial` and `combined`), `utilitySelectors`, and `ignoreSelectors` (with a single value or an array).
+
 === 2.0.0 (October 17, 2015)
@@ -2,0 +8,0 @@

index.js

@@ -6,2 +6,3 @@ var postcss = require('postcss');
 var generateConfig = require('./lib/generate-config');
+var toRegexp = require('./lib/to-regexp');
 
@@ -55,4 +56,4 @@ var DEFINE_VALUE = '([-_a-zA-Z0-9]+)\\s*(?:;\\s*(weak))?';
           rule: rule,
-          utilityPattern: config.patterns.utilitySelectors,
-          ignorePattern: config.patterns.ignoreSelectors,
+          utilityPattern: toRegexp(config.patterns.utilitySelectors),
+          ignorePattern: toRegexp(config.patterns.ignoreSelectors),
           result: result,
@@ -76,3 +77,3 @@ });
         selectorPatternOptions: config.presetOptions,
-        ignorePattern: config.patterns.ignoreSelectors,
+        ignorePattern: toRegexp(config.patterns.ignoreSelectors),
         result: result,
@@ -95,3 +96,3 @@ });
         var defined = (directiveMatch[1] || directiveMatch[3]).trim();
-        if (defined !== UTILITIES_IDENT && !defined.match(config.componentNamePattern)) {
+        if (defined !== UTILITIES_IDENT && !defined.match(toRegexp(config.componentNamePattern))) {
           result.warn(
@@ -98,0 +99,0 @@ 'Invalid component name in definition /*' + comment + '*/',

lib/validate-selectors.js

 var listSequences = require('./list-sequences');
 var shouldIgnoreRule = require('./should-ignore-rule');
 var shouldIgnoreSelector = require('./should-ignore-selector');
+var toInterpoloatedRegexp = require('./to-interpolated-regexp');
 
@@ -20,7 +21,7 @@ /**
   var initialPattern = (config.selectorPattern.initial)
-    ? config.selectorPattern.initial(config.componentName, config.selectorPatternOptions)
-    : config.selectorPattern(config.componentName, config.selectorPatternOptions);
+    ? toInterpoloatedRegexp(config.selectorPattern.initial)(config.componentName, config.selectorPatternOptions)
+    : toInterpoloatedRegexp(config.selectorPattern)(config.componentName, config.selectorPatternOptions);
   var combinedPattern = (config.selectorPattern.combined)
-    ? config.selectorPattern.combined(config.componentName, config.selectorPatternOptions)
-    : initialPattern;
+    ? toInterpoloatedRegexp(config.selectorPattern.combined)(config.componentName, config.selectorPatternOptions)
+    : toInterpoloatedRegexp(initialPattern);
   var selectors = config.rule.selectors;
@@ -27,0 +28,0 @@

package.json

 {
   "name": "postcss-bem-linter",
-  "version": "2.0.0",
+  "version": "2.1.0",
   "description": "A BEM linter for postcss",
@@ -13,9 +13,9 @@ "files": [
   "devDependencies": {
-    "eslint": "1.7.1",
+    "eslint": "1.7.3",
     "mocha": "2.3.3"
   },
   "scripts": {
-    "checkstyle": "eslint .",
+    "lint": "eslint .",
     "start": "mocha --reporter spec --watch",
-    "test": "npm run checkstyle && mocha --no-colors"
+    "test": "npm run lint && mocha --no-colors"
   },
@@ -22,0 +22,0 @@ "license": "MIT",

README.md

@@ -28,6 +28,6 @@ # postcss-bem-linter
 
+**Throughout this document, terms like "selector", "selector sequence", and "simple selector" are used according to the definitions in the [Selectors Level 3 spec](http://www.w3.org/TR/css3-selectors/#selector-syntax).**  
+
 ## Conformance tests
 
-**Throughout this document, terms like "selector", "selector sequence", and "simple selector" are used according to the definitions in the [Selectors Level 3 spec](http://www.w3.org/TR/css3-selectors/#selector-syntax).**  
-
 **Default mode**:
@@ -54,3 +54,3 @@
 Patterns consist of regular expressions, and functions that return regular expressions,
-which describe valid selector sequences.
+or strings, which describe valid selector sequences.
 
@@ -60,6 +60,6 @@ Keep in mind:
 you would like to be able to chain state classes to your component classes, as in
-`.Component.is-open`, your regular expression needs to allow for this chaining.
+`.Component.is-open`, your pattern needs to allow for this chaining.
 - **Pseudo-classes and pseudo-elements will be ignored if they occur at the end of the sequence.**
 Instead of `.Component:first-child.is-open`, you should use `.Component.is-open:first-child`.
-The former will trigger a warning unless you've written a silly complicated regular expression.
+The former will trigger a warning unless you've written a silly complicated pattern.
 
@@ -91,21 +91,64 @@ #### Preset Patterns
 
-- `componentName` (optional): A regular expression describing valid component names.
-  Default is `/[-_a-zA-Z0-9]+/`.
-- `componentSelectors`: Either of the following:
-  - A *single function* that accepts a component name and returns a regular expression describing
-    all valid selector sequences for the stylesheet.
-  - An *object consisting of two methods*, `initial` and `combined`. Both methods accept a
-    component name and return a regular expression. `initial` returns a description of valid
-    initial selector sequences — those occurring at the beginning of a selector, before any
-    combinators. `combined` returns a description of valid selector sequences allowed *after* combinators.
-      - If you do not specify a combined pattern, it is assumed that combined sequences must match the same pattern as initial sequences.
-      - In weak mode, *any* combined sequences are accepted.
-- `utilitySelectors`: A regular expression describing valid utility selector sequences. This will be used
-  if the stylesheet defines a group of utilities, as explained below.
-- `ignoreSelectors`: A regular expression or an array of regular expressions describing selector sequences to ignore. You can use this to
-  systematically ignore selectors matching certain patterns, instead of having to add a
-  `/* postcss-bem-linter: ignore */` comment above each one (see below).
+##### `componentName`
 
-*You can also choose a preset to start with and override specific patterns.*
-For example, if you want to use SUIT's `componentSelectors` pattern but write your own `utilitySelectors` pattern,
+default: `/[-_a-zA-Z0-9]+/`
+
+Describes valid component names in one of the following forms:
+
+- A regular expression.
+- A string that provides a valid pattern for the `RegExp()` constructor.
+
+##### `componentSelectors`
+
+Describes all valid selector sequences for the stylesheet in one of the following forms:
+
+- A *single function* that accepts a component name and returns a regular expression, e.g.
+  ```js
+  componentSelectors: function(componentName) {
+    return new RegExp('\\.ns-' + componentName + '(?:-[a-zA-Z]+)?');
+  }
+  ```
+- A *single string* that provides a valid pattern for the `RegExp()` constructor *when
+  `{componentName}` is interpolated with the defined component's name*, e.g.
+  ```js
+  componentSelectors: '\\.ns-{componentName}(?:-[a-zA-Z]+)?'
+  ```
+- An *object consisting of two properties*, `initial` and `combined`. Both properties accept the
+  same two forms described above: a function accepting a component name and returning a regular
+  expression; or a string, interpolating the component name with `{componentName}`, that will
+  provide a valid pattern for the `RegExp()` constructor.
+
+  `initial` describes valid initial selector sequences — those occurring at the beginning of
+  a selector, before any combinators.
+
+  `combined` describes valid selector sequences allowed *after* combinators.
+  Two important notes about `combined`:
+    - If you do not specify a `combined` pattern, it is assumed that combined sequences must match the same pattern as initial sequences.
+    - In weak mode, *any* combined sequences are accepted, even if you have a `combined` pattern.
+
+##### `utilitySelectors`
+
+Describes valid utility selector sequences. This will be used if the stylesheet defines a
+group of utilities, as explained below. Can take one of the following forms:
+
+- A regular expression.
+- A string that provides a valid pattern for the `RegExp()` constructor.
+
+##### `ignoreSelectors`
+
+Describes selector sequences to ignore. You can use this to
+systematically ignore selectors matching certain patterns, instead of having to add a
+`/* postcss-bem-linter: ignore */` comment above each one (see below).
+Can take one of the following forms:
+
+- A regular expression.
+- An array of regular expressions.
+- A string that provides a valid pattern for the `RegExp()` constructor.
+- An array of such string patterns.
+
+### Overriding Presets
+
+*You can also choose a preset to start with and override specific parts of it, specific patterns.*
+
+For example, if you want to use SUIT's preset generally but write your own `utilitySelectors` pattern,
 you can do that with a config object like this:
@@ -120,2 +163,4 @@
 
+### Examples
+
 Given all of the above, you might call the plugin in any of the following ways:
@@ -135,8 +180,11 @@
 
-// define a RegExp for component names
+// define a pattern for component names
 bemLinter({
   componentName: /[A-Z]+/
 });
+bemLinter({
+  componentName: '[A-Z]+'
+});
 
-// define a single RegExp for all selector sequences, initial or combined
+// define a single pattern for all selector sequences, initial or combined
 bemLinter({
@@ -147,4 +195,7 @@ componentSelectors: function(componentName) {
 });
+bemLinter({
+  componentSelectors: '^\\.{componentName}(?:-[a-z]+)?$'
+});
 
-// define separate `componentName`, `initial`, `combined`, and `utilities` RegExps
+// define separate `componentName`, `initial`, `combined`, and `utilities` patterns
 bemLinter({
@@ -162,2 +213,10 @@ componentName: /[A-Z]+/,
 });
+bemLinter({
+  componentName: '[A-Z]+',
+  componentSelectors: {
+    initial: '^\\.{componentName}(?:-[a-z]+)?$',
+    combined: '^\\.combined-{componentName}-[a-z]+$'
+  },
+  utilitySelectors: '^\.util-[a-z]+$'
+});
 
@@ -171,4 +230,9 @@ // start with the `bem` preset but include a special `componentName` pattern
 });
+bemLinter({
+  preset: 'bem',
+  componentName: 'cmpnt_[a-zA-Z]+',
+  ignoreSelectors: '\.no-.+'
+});
 
-// using an array for `ignoreSelectors`
+// ... using an array for `ignoreSelectors`
 bemLinter({
@@ -182,2 +246,10 @@ preset: 'bem',
 });
+bemLinter({
+  preset: 'bem',
+  componentName: 'cmpnt_[a-zA-Z]+',
+  ignoreSelectors: [
+    '\.no-.+',
+    '\.isok-.+'
+  ]
+});
 ```
@@ -184,0 +256,0 @@

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

29727

increased by11.09%

Number of package files

15

increased by15.38%

Lines of code

361

increased by11.42%

Number of lines in readme file

420

increased by20.69%

No dependency changes