jotform/css.js

A lightweight, battle tested, fast, CSS parser in JavaScript

css.js's Issues

Does css.js care about specificity?

https://github.com/closingtag/calc-polyfill#specificity

If not, what are the chances of getting it integrated? Is there a technical limitation?

Stringify

I would love to be able to edit the parsed object and then stringify it back to CSS.

Comments are marked as "defective" by default

Would be good to change the way comments are handled instead of going down the current route: https://github.com/jotform/css.js/blob/master/css.js#L179-188

Not sure what overall strategy would be

@media print Bug

Hello there, we encountered a bug with @media print queries:
This works perfectly:
@media (max-width:360px){ .test{ top : 230px; } } @media print{ }

This breaks:
@media (max-width:360px){ } @media print{ .test{ top : 230px; } }

With this rigged output:
[ { "selector": "@media (max-width:360px)", "type": "media", "subStyles": [ { "selector": "}\n@media print", "type": "media", "subStyles": [] } ] } ]

breaks on semicolon after data:image

Hi.
I just observed an issue where background: url('data:image/svg+xml;charset=utf-8,<svg%20version%... becomes invalid CSS due to a linebreak after semicolon:

 background: url('data:image/svg+xml;
    charset=utf-8,<svg%20version%...

(This is in the "funky" theme of Prism.js)

I have a very limited scope in my project so I will "fix" the problem using a simple string operation, but I wanted to report the case here.

I don't believe I'll have time for an actual fix and PR, but will report if I do.

In case somebody stumbles across this and needs a naive but simple solution, the workaround for my particular example goes something like this:

  const prefixedCss = parser
    .getCSSForEditor(namespaced)
    // see https://github.com/jotform/css.js/issues/28
    .replace(/svg\+xml;\n    /, 'svg+xml;');

ES6 import

Could you provide an export of the library to import it with es6 module?

comments are not being parsed as comment

comment for example /* height:10px;*/ is getting parsed as a css directive.

Remove bower and fetch dependencies via npm only

Parser breaks on common templating syntax

We use Liquid to render our HTML for various media contexts. Part of our workflow has our design teams trying to provide common logic assignments to various parts of the HTML, including css. So they sometimes tend to use a placeholder variable in CSS.

Something like the following is a common use case:

.someClass { color: {{ some_placeholder }} }

In these cases, the parsing regex chokes on encountering unexpected {{ }} since they're not valid CSS syntax. I've looked through the code and produced the following regex adjustment and test case. This regex goes out of its way to maintain the existing behavior and not require code changes in css.js and fix the underlying problem of {{ }}.

https://regex101.com/r/t99mX4/1/

In addition, I've created a fork and am assembling a PR with more unit tests to cover this case. It doesn't cover some of the other issues filed here, like an empty @media query, but certainly could be expanded to do so with a bit of further refinement.

A test-example that fails with comments

Hello!

Happy and Thanks!! Just wanted to provide an example where parse does not handle the comments, but put them into the 'object.directive' instead.

<style> 
:root 
{
--col-bg:               #ffffff;         /* Background */
--col-fg:               #003344;         /* Foreground */
--col-bg-main:         rgba(255,255,255,0.8);  /* background of content-area */ 
}
</style> 

Bug with brackets ( } { ) in `content`

Using } in a content property breaks the parsing:

.someSelector:after { content: '} broken :) @media (screen) { lol }'; }

how to modify parsed css?

hi,
i have a requirement where i want to modify the parsed css and then replace it in style tag,
for example:

<style id="customCss">
.someClass {
  margin : 20px;  
}
@media (max-width: 600px) {
  .someClass {
  margin : 5px;  
}
}
</style>

i want to parse rule without media query, and modify it and then replace it back in style tag, how to achieve that?

basically i want this to turn into following output:

<style id="customCss">
.someClass {
  margin : 10px;  
  padding:5px;
}
@media (max-width: 600px) {
  .someClass {
  margin : 5px;  
  padding:0;
}
}
</style>

Bug with base64 hack

Hi, tested 3 css parsing libraries before this one. Brilliant and thanks!

Found small bug regarding css parse removing a semicolon..

This css:
"background-image: url('data:image/jpeg;base64,/9j/4AAQSkZ.."

Becomes:
"background-image: url('data:image/jpegbase64,/9j/4AAQSkZ.."

The fix:

Line 181 was:

ret[ret.length - 1].value += line.trim();


Should be: (note line is trimmed already above)

ret[ret.length - 1].value += ';'+line;//.trim();


bug with comments

Try to parse this:

.someSelector 
{ 
  margin:40px 10px; 
  padding:5px; /* This is { blue } */
}

You will get this:

[
  {
    "selector": ".someSelector",
    "rules": [
      {
        "directive": "margin",
        "value": "40px 10px"
      },
      {
        "directive": "padding",
        "value": "5px"
      },
      {
        "directive": "",
        "value": "/* This is { blue",
        "defective": true
      }
    ]
  }
]

Similar to reworkcss/css#24

For client side, any reason why not use CSSOM?

For client side, any specific reason not to just use CSSOM?
http://jsfiddle.net/v2JsZ/

Possible references to domain-specific selector names in applyNamespacing

In css.js, there appears to be logic for special behavior for selectors such as '.form-all', '#stage', and '.supernova'. Am I right in assuming that these are specific to the use case that this tool was first developed for and are not related to general CSS rules?

The section with these selector names is here:

css.js/css.js

Lines 568 to 582 in f970443

	if(obj.selector.indexOf('@font-face') > -1 || obj.selector.indexOf('keyframes') > -1 || obj.selector.indexOf('@import') > -1 || obj.selector.indexOf('.form-all') > -1 || obj.selector.indexOf('#stage') > -1){
	continue;
	}
	if (obj.type !== 'media') {
	var selector = obj.selector.split(',');
	var newSelector = [];
	for (var j = 0; j < selector.length; j++) {
	if (selector[j].indexOf('.supernova') === -1) { //do not apply namespacing to selectors including supernova
	newSelector.push(namespaceClass + ' ' + selector[j]);
	} else {
	newSelector.push(selector[j]);
	}
	}
	obj.selector = newSelector.join(',');

Demo is broken

I wanted to try out the demo when I noticed that it was broken.

 Refused to execute script from 'https://raw.githubusercontent.com/jotform/css.js/master/css.min.js' because its MIME type ('text/plain') is not executable, and strict MIME type checking is enabled.

Uncaught ReferenceError: cssjs is not defined

Why this is happening is described here

Ditch bower

It is better to use just npm for simplicity

add npm support