@diesdasdigital/csslint - npm Package Compare versions

Comparing version 3.1.0 to 4.0.0

bin/index.js

@@ -253,14 +253,6 @@ #!/usr/bin/env node
 */
-function checkIfUsesTypeSelector(nodeContext, node, item) {
-  if (
-    node.type === "TypeSelector" &&
-    nodeContext.atrule === null &&
-    (!item.prev ||
-      (item.prev &&
-        !(item.prev.data.type === "Combinator" && item.prev.data.name === ">")))
-  ) {
+function checkIfUsesTypeSelector(nodeContext, node) {
+  if (node.type === "TypeSelector" && nodeContext.atrule === null) {
     return `  ${colors.underline(`on line ${node.loc.start.line}:`)}
-  There is a type selector ${colors.red(node.name)}
-  Type selectors are only allowed if they appear on the right hand side of a child combinator.
-  For example, like ${colors.green(`... > ${node.name}`)}`;
+  There is a type selector ${colors.red(node.name)}`;
   }
@@ -267,0 +259,0 @@

package.json

 {
   "name": "@diesdasdigital/csslint",
-  "version": "3.1.0",
+  "version": "4.0.0",
   "description": "Linter for our CSS architecture",
@@ -5,0 +5,0 @@ "main": "./bin/index.js",

README.md

@@ -5,21 +5,52 @@ # csslint [![npm badge](https://badgen.net/npm/v/@diesdasdigital/csslint)](https://www.npmjs.com/package/@diesdasdigital/csslint)
 
-### CSS rules it checks:
+### Why this architecture/a linter?
 
-- [x] component name is used on every class as a prefix
+Most CSS bugs are caused by classes **unintentionally** overriding other classes. When building websites/interfaces with components this can happen for example if component styles are overwritten by a parent component. The component looks different because of where it’s placed (its context).
+
+In any software system relying on context creates complexity. If one needs to know what the context of a specific piece of code is, one also has to understand all of that context.
+
+CSS in JS tools solve that problem by using inline styles and/or generating class names automatically during a build step. This way developers cannot unintentionally override other components classes, because they don’t even know what the class name will be.
+
+The downsides if CSS in JS solutions are:
+
+- one needs a build step to generate CSS
+- some tools require writing CSS in a non-standard way (as objects for example)
+- while debugging class names have no meaningful names anymore
+
+Therefore we came up with a CSS architecture which has one major and a few minor rules to get the same benefit of local reasoning for components without the drawbacks of CSS in JS tools.
+
+### Rules it checks:
+
+- [x] **every class name is prefixed by the component/file name**
+- [x] also animation names should start with the component name, eg `@keyframes component__my-animation`
 - [x] no multiple nesting in class names, eg `.component__one__two` is ill-formed
-- [x] animation names should start with the component name: `@keyframes my-component__my-animation { ...`
-- [x] no type selectors (with the only exception `> tag`)
+- [x] no type selectors
 - [x] no id selectors
 
-![Screen shot of error messages](diesdas-css-linter-screenshot.png)
+### Advantages
 
+1️⃣ Generic knowledge
+
+CSS syntax is a standard. Learn it once.
+
+2️⃣ Meaningful class names
+
+Even in production we have meaningful class names which helps when we need to debug.
+
+3️⃣ No build step
+
+Every browser knows how to load CSS.
+
+![Screenshot of error messages](diesdas-css-linter-screenshot.png)
+
 ## Installation
 
-To install all dependencies run:
+To add it to your project use `npm` or `yarn`:
 
 ```
 yarn add @diesdasdigital/csslint --dev
+npm install @diesdasdigital/csslint --save-dev
 ```
 
-Then you can run use the linter in `package.json` or via `npx`.
+Then you can use the linter via `npx` or in `package.json` scripts:
 
@@ -29,3 +60,3 @@ ```json
   "scripts": {
-    "lint": "csslint 'src/**/*.css'"
+    "lint": "csslint 'src/**/*.css' --all"
   }
@@ -35,18 +66,17 @@ }
 
-## Collaboration
+## Flags
 
-If you want to make changes to `csslint` you need to have the following tools:
+`--all`
 
-or you can use a glob pattern like
+doesn’t stop on the first invalid file and shows a summary of how many errors it found
 
-```
-yarn start '**/*.css'
-```
+`--verbose`
 
+also logs all valid files it has checked
+
 ## Ignoring errors
 
-In your projects root folder, create a file named `.csslintignore`.
-The files in there will be ignored.
+In your projects root folder, create `.csslintignore` file, which includes new line separate file paths which should be ignored.
 
-Alternatively you can ignore a single line by writing the following comment in the previous line:
+Alternatively you can ignore a single line inside of a file by writing the following comment in the previous line:
 
@@ -57,5 +87,5 @@ ```
 
-# For Development
+## Collaboration
 
-### Requirements
+If you want to create PR, we test and develop this tool using these as a baseline:
 
@@ -66,2 +96,4 @@ - macOS
 
-**_Note:_** _all of the following commands should be run in the project’s folder._
+---
+
+Created by [diesdas.digital](https://diesdas.digital)

No alert changes

Improved metrics

Total package byte prevSize

970432

increased by0.24%

Number of package files

20

increased by5.26%

Number of lines in readme file

95

increased by50.79%

Worsened metrics

Lines of code

812

decreased by-0.98%

No dependency changes