Check string for valid CSS using Regex

Question

I need to check a user's input to be valid CSS syntax (the input string is basically a CSS file). It can contain classes, selectors, !important etc.

I didn't start working on it, because I was hoping there is already some regex syntax out there, so I don't have to start from scratch.

I tried googling but all I've found is partial css matching strings, not a regex that validates all possible css.

Yes I did, but all the results let me to finding particular properties inside a css file, not validating a whole style sheet. — Shimmy Weitzhandler
– Shimmy Weitzhandler, Commented Jan 19, 2014 at 22:24
You'd be better off with a CSS parser, like: github.com/reworkcss/css-parse — steveax
– steveax, Commented Jan 19, 2014 at 22:25
First of all what language are you using ? Second, do you plan to support advanced CSS features, think about media queries, animation, transition etc ... ? Is .test{ fail:red;} valid ? — HamZa
– HamZa, Commented Jan 20, 2014 at 0:45
I think it's probably possible, but geesh! It would be a quite seriously complicated regex with many variations.. I think one would start with referencing this.. w3.org/TR/css3-syntax/#detailed-grammar. I would be quite impress to see someone put in the work to make a sufficient regex to validate a valid css syntax yet return false on the correct false css syntax.. — Bryan Elliott
– Bryan Elliott, Commented Jan 20, 2014 at 2:40

Bryan Elliott · Accepted Answer · 2014-01-20 04:40:07Z

10

Ok, so I came up with a regex that matches valid css styles..

([#.@]?[\w.:> ]+)[\s]{[\r\n]?([A-Za-z\- \r\n\t]+[:][\s]*[\w .\/()\-!]+;[\r\n]*(?:[A-Za-z\- \r\n\t]+[:][\s]*[\w .\/()\-!]+;[\r\n]*(?2)*)*)}

Working example here:

http://regex101.com/r/fK9mY3

Keep in mind.. After examining my example link above, you see this regex works for common, basic CSS2 styling, however, to match ALL CSS3 styling variations, pertaining to http://www.w3.org/TR/css3-syntax/#detailed-grammar, this regex would need some tweaking... The above regex IS a starting point however..

edited Jan 20, 2014 at 4:40

answered Jan 20, 2014 at 3:35

Bryan Elliott

4,0852 gold badges24 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Dalin Over a year ago

Doesn't allow for full URLs within url()

John Over a year ago

That is the trap of regular expressions: their complexity is great though unless you can account for all conditions...and worse yet since standards are still evolving the older this answer gets the less valid it becomes. Great effort though this should have been written as a full function with easy-to-update if conditions.

Bryan Elliott Over a year ago

@John, yes completely agree. The regex was meant as a starting point and because CSS standards are constantly evolving, the a better solution would be to incorporate this regex along with some some other regex matches for edge cases and wrapped up into a JS library of sorts. It would need to be constantly maintained, of course.

Danny Over a year ago

@BryanElliott using the changes to this by duality in his answer below, I also made some changes in a comment under his answer, I have one final issue to solve to be happy with my use case for this, any chance you know how to solve it please? Thanks

duality · Accepted Answer · 2020-01-31 19:56:32Z

3

Adding to Bryan's answer. And adding a note

javascript support: there was an error with the (?2)
multiple classes: .class, .class2 {...}
class delimeters: .class-name, .class_name
empty class: .class {}
percentages: width: 100%;
quoted urls: background: url("/img.jpg");

const multi = /((?:^\s*)([\w#.@*,:\-.:>,*\s]+)\s*{(?:[\s]*)((?:[A-Za-z\- \s]+[:]\s*['"0-9\w .,\/()\-!%]+;?)*)*\s*}(?:\s*))/mi

const example = `
div.css-class-10_9::hover, .active {
  width: 100%;
  background: rgba(1.0,0,1,1); 
  background-url: url("http://img.jpg");   
}

div.css-class-10_9::hover,
.active {
  width: 100%;
  background: rgba(1.0,0,1,1);
  background-url: url("http://img.jpg");
}

html {
  background: white;
}
`

let out = example.replace(multi, '')
// "
// div.css-class-... {...}
// html {...}
// "

out = out.replace(multi, '')
// "html {...}"

out = out.replace(multi, '')
// ""

You can also add global to replace all at once

const global_re = /((?:^\s*)([\w#.@*,:\-.:>,*\s]+)\s*{(?:[\s]*)((?:[A-Za-z\- \s]+[:]\s*['"0-9\w .,\/()\-!%]+;?)*)*\s*}(?:\s*))/gmi


example.replace(global_re, '');
// ""


example.replace(global_re,'$1') // group 1 all css
//
// div.css-class-...{
//   width...
//   rest_css...
// }
//
// ...
//
// html {
//   ...
// }

Class Names

example.replace(global_re,'$2\n\n') // group 1 all class names
// "
// div.css-class-10_9::hover, .active 
// 
// div.css-class-10_9::hover,
// .active 
// 
// html  
// "

Class bodies (replace everything but class bodies)

example.replace(global_re,'$3\n')
// "
// width: 100%;
// background: rgba(1.0,0,1,1); 
// background-url: url("http://img.jpg");   
// 
// 
// width: 100%;
// background: rgba(1.0,0,1,1);
// background-url: url("http://img.jpg");
// 
// 
// background: white;
// 
// "

https://regex101.com/r/fK9mY3/55

(Disclaimer: this definitely doesn't validate css)

ex: '............a {}' comes out true

edited Jan 31, 2020 at 19:56

answered Jan 31, 2020 at 16:21

duality

1,2339 silver badges12 bronze badges

1 Comment

Danny Over a year ago

To "improve" on this, I added some more selector options (+ and ~) and removed the ^ for the start of the line before a selector, which allows any minified css, with no whitespace between, can still be selected. I'm not very knowledgeable with regex at all, so there may be problems with this, however I thought I would share. ((?:\s*)([\w#.@*,:\-.:>+~\[\]\"=(),*\s]+)\s*{(?:[\s]*)((?:[A-Za-z\- \s]+[:]\s*['"0-9\w .,\/\()\-!#%]+;?)*)*\s*}(?:\s*)) The only issue I have now is with base64 data inside url's. It fails at ";" within the style value. After adding this character, it times out.

Collectives™ on Stack Overflow

Check string for valid CSS using Regex

2 Answers 2

4 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related