FlymakeCSS

Using the Java-based W3C Validator

Get http://www.w3.org/QA/Tools/css-validator/css-validator.jar create a directory named ‘lib’ in the same directory. Copy to the ‘lib’ dir the following jars:

From:

Test validating some CSS file by running:

    java -jar css-validator.jar file:somecssfile.css

If it works, add this to a suitable place loaded by emacs:

;; Edit this
(defconst css-validator "java -jar ~/bin/css-validator.jar")

(defun flymake-css-init ()
  (let* ((temp-file   (flymake-init-create-temp-buffer-copy
                       'flymake-create-temp-inplace))
         (local-file  (file-relative-name
                       temp-file
                       (file-name-directory buffer-file-name))))
    (list css-validator (list "-output gnu" (concat "file:" local-file)))))

(push '(".+\\.css$" flymake-css-init) flymake-allowed-file-name-masks)

(push '("^file:\\([^:]+\\):\\([^:]+\\):\\(.*\\)" 1 2 nil 3) flymake-err-line-patterns)

Hope it worked out for you —AntonJohansson


Thanks for this concise and complete tutorial on installing the W3 CSS Validator. It took me about 10 minutes to install it, following these instructions :)

One note though: on Windows, I had trouble with

   (defconst css-validator "java -jar ~/path/to/css-validator.jar")

It appears that perhaps Java does not like all the arguments being passed as a single string[1]. Maybe this is a Windows-specific thing?

Anyway I wound up leaving out the line above. Instead, I changed the last line of the first stanza of the config as follows:

    (defun flymake-css-init ()
      (let* ((temp-file   (flymake-init-create-temp-buffer-copy
                           'flymake-create-temp-inplace))
             (local-file  (file-relative-name
                           temp-file
                           (file-name-directory buffer-file-name))))
        ;; Edit this line
        (list "java" (list "-jar" "c:/path/to/css-validator.jar" "-output" "gnu" (concat "file:" local-file)))))

Otherwise everything worked perfectly, thanks again. —NoahSussman


Using the Python module, cssutils

cssutils

If you don’t want to use the W3C validator (maybe you just don’t want to install Java on your 4GB netbook), you can use a Python module named cssutils.

Install cssutils with pip or easy_install and add this to your config:

    (defun flymake-css-init ()
      (let* ((temp-file (flymake-init-create-temp-buffer-copy
                         'flymake-create-temp-inplace))
             (local-file (file-relative-name
                          temp-file
                          (file-name-directory buffer-file-name))))
        (list "cssparse" (list local-file))))
    (add-to-list 'flymake-allowed-file-name-masks
                 '("\\.css$" flymake-css-init))
    (add-to-list 'flymake-err-line-patterns
                 '("\\(.*\\) \\[\\([0-9]+\\):\\([0-9]+\\): \\(.*\\)\\]"
                   nil 2 3 1))
    (add-hook 'css-mode-hook
              (lambda () (flymake-mode t)))

Using the Javascript program, CSSLint

There’s a CSSLint project on github that seems to work nicely. It’s a Javascript program, doesn’t require installing Java and servlet jars and all the other stuff required by the W3C validator. It can be used on any platform.

I needed to modify it slightly to get it to work on Windows with WSH. csslint-wsh.js With those mods, it works nicely for a flymake-for-css.

    (defun dino-flymake-css-init ()
      "the initialization fn for flymake for CSS"
      (let* ((temp-file (flymake-init-create-temp-buffer-copy
                           'dino-flymake-create-temp-intemp))
             (local-file (file-relative-name
                          temp-file
                          (file-name-directory buffer-file-name))))
        (list (concat (getenv "windir") "\\system32\\cscript.exe")
              (list "c:\\users\\dino\\bin\\csslint-wsh.js" "--format=compiler" local-file))))
    (defvar css-csslint-error-pattern
      ;;"^[ \t]*\\([A-Za-z.0-9_: \\-]+\\)(\\([0-9]+\\)[,]\\( *[0-9]+\\)) CSSLINT: ?\\(error\\|warning\\) ?: +\\(.+\\)$"
      "^[ \t]*\\([\._A-Za-z0-9][^(\n]+\\.css\\)(\\([0-9]+\\)[,]\\([0-9]+\\)) CSSLINT: ?\\(\\(error\\|warning\\) ?: +\\(.+\\)\\)$"
      "The regex pattern for CSSLint error or warning messages. Follows
    the same form as an entry in `flymake-err-line-patterns'. The
    value is a STRING, a regex.")
    (defun dino-css-flymake-install ()
      "install flymake stuff for CSS files."
      (add-to-list
       'flymake-err-line-patterns
       (list css-csslint-error-pattern 1 2 3 4))
      (let* ((key "\\.css\\'")
             (cssentry (assoc key flymake-allowed-file-name-masks)))
        (if cssentry
            (setcdr cssentry '(dino-flymake-css-init))
          (add-to-list
           'flymake-allowed-file-name-masks
           (list key 'dino-flymake-css-init)))))
    (eval-after-load "compile"
      '(progn
         (if (boundp 'compilation-error-regexp-alist-alist)
          (progn
            (add-to-list
             'compilation-error-regexp-alist-alist
             (list 'csslint-wsh css-csslint-error-pattern 1 2 3))
            (add-to-list
             'compilation-error-regexp-alist
             'csslint-wsh)))))
    (eval-after-load "flymake"
      '(progn
         (dino-css-flymake-install)))

CategoryWThirtyTwo FlyMake