Проверьте CSS в Javascript

Question

У меня есть приложение, которое принимает произвольную строку от пользователя. Я ищу, чтобы проверить, что эта строка является допустимой CSS3.

Я заинтересован в различных уровнях проверки. например, было бы неплохо указать, проверяю ли я входные данные, например:

• background-color: #FFF
• div { background-color: #FFF }

Как я могу написать такую ​​функцию:

isValidCss('background-color: red;') === true

или же

getCssErrors('background-color: foobar;') === { /* some error message */ }

---

• Мне нужно выполнить эту операцию без сетевых зависимостей. Например, https://github.com/twolfson/css-validator неприемлемо, поскольку он отправляет сетевые запросы в службу проверки CSS W3C.

• CSSLint кажется очевидным потенциальным кандидатом, чтобы помочь с этим, но он, похоже, предназначен для использования в качестве LINTer для IDE, поэтому я не уверен, как интегрировать его в приложение. Советы о том, как это сделать, могут быть правильным ответом на этот вопрос.

Answer 1

Я только что пришел с идеей, которая немного хитра, но должна выполнять свою работу в некоторых случаях. Все зависит от ваших предпочтений.

Теория для типов второй струны (background-color: #fff) назначить входную строку в element.style.cssText лайк lm.style.cssText = 'background-color: 12px' а затем получить значение с помощью lm.style.cssText, Это не возвращает никакого значения для cssText потому что он имеет проблемы с синтаксисом и не может ничего оценивать. но если вы укажете background-color: #fff это вернется background-color указано в cssText,

для типов третьей строки, вы можете использовать .matches метод тоже. .matches Метод генерирует синтаксическую ошибку, если у входной строки есть проблемы с валидностью.

Я не уверен, как проверить первое значение (#fff) потому что в CSS есть сотни вариантов значений, даже валидатор w3c не передает эти значения как отдельные элементы.

но для строк второго и третьего типов конечный код должен выглядеть примерно так:

;!( function( w, d ) {

  'use strict';
  
  var init = function( e ) {
  
        var input = prompt( 'put a string to validate' ),
            div = d.createElement( 'div' ),
            
            tmp,
            
            selectorError = false,
            body = false,
            selector = false;
        
        if ( !input )
          return false;
        
        console.log( "input is-> " + input );
        
        body = /([\s\S]+\{)?([^}]+)/gim.exec( input );
        body = ( body && body[ 2 ] ) || false;
        
        // selector specified
        if ( selector = /([\s\S]+)\{/gim.exec( input ) ) {
        
          selector = selector[ 1 ];
          console.log( 'selector-> ' + selector );
          
          try {
          
            div.matches( selector );
            
          } catch ( e ) {
          
            selectorError = true;
            
          } finally {
          
            console.log( 'selector is ' + ( selectorError ? 'not ' : '' ) + 'valid' );
          
          }
       
        }
        
        console.log( 'body-> ' + body );
        
        tmp = div.style.cssText;
        
        div.style.cssText = body;
        
        if ( tmp == div.style.cssText )
          console.log( 'body is not valid.' );
        else
          console.log( 'body is valid.' );
  
      },
      
      button = d.querySelector( 'button' );
      
  button.onclick = init;

})( this, document );

button {
  margin-bottom: 200px
}

<ul>

  <div>Some ready strings to copy/paste:</div>
  
  <li>div { background: #fff }</li>
  <li>div { background: 12px }</li>
  <li>div { background-color: 12px }</li>
  <li>background-size: #fff</li>
  <li>background-color: #fff</li>
  <li>background-color: 12px</li>


</ul>

<button>Ask me for input</button>

Приведенный выше пример демонстрирует творческую идею, с которой я столкнулся. не готовый к использованию код.

Я хотел бы обсудить и другие варианты.