Member Avatar for dwlamb

I want to use regular expression to clean-up some CSS files.

I used a Friebug add-on, CSS Usage, to analyse some CSS from a jquery demo. Exporting the files, this add-on places 'UNUSED' at the front of a declaration and rule. Below is a sample of the output.

html #demo-config-menu li a:link,
UNUSED* html #demo-config-menu li a:visited {
 padding:1px 8px 2px;
}   

UNUSED#demo-config-menu li a:active,
#demo-config-menu li a:hover {
 background-color:#f6f6f6;
}

UNUSED#demo-config-menu h4 {
 font-size:13px; color:#666; font-weight:normal; border:0; padding-left:18px;
}

New to regular expressions, I have tried in vain to come up with search parameters for what I want.

  1. a way to search compound selectors for instances of UNUSED and the selector that follows, be it the first or second selector within a CSS rule (as in first two code samples);
  2. search for a complete declaration and rule as in the last code example

I have looked at tutorial on youtube and other sources. I can have success with anything up to and before ' {' but can not the search parameters to work beyond that.

Anyone have suggestions?

  • 2 Contributors
  • 2 Replies
  • 127 Views
  • 18 Hours Discussion Span
  • Latest Post Latest Post by dwlamb

Dani AI

Generated

Short summary and two safe options. wants to strip any selector prefixed with the literal string UNUSED from selector lists, and delete whole rules when the only selector(s) are UNUSED. was on the right track — a simple search for UNUSED is useful — but a two-pass regex or a small parser script avoids leaving stray commas or broken rules.

Quick regex workflow (good for simple exported files; make a backup first). Run these replacements in order; most editors accept the PCRE-style forms below. Use the global/multiline flags and enable "dot matches newline" (or use [\s\S] as shown).

# 1) remove whole single-selector rules that start with UNUSED
/^\s*UNUSED\*?[^,{]*\s*\{[\s\S]*?\}\s*/gm
(replace with empty)

# 2) remove UNUSED selectors that are followed by another selector (UNUSED...,)
UNUSED\*?[^,{]*\s*,\s*
(replace with empty)

# 3) remove UNUSED selectors that are preceded by a comma (, UNUSED...)
,\s*UNUSED\*?[^,{]*
(replace with empty)

# 4) tidy leftover commas/whitespace (if needed)
,(\s*,)+    -> ,    and    /^\s*,\s*/gm  -> empty

If the CSS is more complex (comments, @media blocks, minified files) use a parser instead. Example Node.js + PostCSS snippet that removes selectors beginning with UNUSED and drops empty rules:

const fs = require('fs');
const postcss = require('postcss');

const root = postcss.parse(fs.readFileSync('input.css', 'utf8'));

root.walkRules(rule => {
  const selectors = rule.selectors || rule.selector.split(/\s*,\s*/);
  const keep = selectors.filter(s => !s.trim().startsWith('UNUSED'));
  if (keep.length) rule.selector = keep.join(', ');
  else rule.remove();
});

fs.writeFileSync('output.css', root.toString());

Notes and cautions. Regex can fail inside nested at-rules, comments, or strings; run tests and keep backups. For background on CSS syntax and a robust parsing approach see the MDN CSS syntax reference and the PostCSS project pages (MDN CSS Syntax, PostCSS).

Recommended Answers

All 2 Replies

Member Avatar for pritaeas

Can you show what the output should be? And what tool are you using to for the replacements?

Something like /UNUSED([^,{]+)/ could work.

Member Avatar for dwlamb

By and large, I don't want replacements. I merely wish to remove the selectors prefaced with UNUSED and for the declarations that are singular, strip the entire declaration and rule from the CSS.

So, based on the code examples provided, I need search paramets that will go something like ", UNUSED [everything to next]," "UNUSED [everything to next]," "UNUSED [everything to space {] but leave the space {" "UNUSED [everything to ]}\n"
I know those are not appropriate syntax. Just My pseudo-code.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.