trying to delete the following entries in a .css file
UNUSEDbody.sticky-menu-active {
padding-top: 26px;
}
all the css entries I want to remove are prefixed with UNUSED followed by characters { }
so I want to delete everything starting with UNUSED and including the declaration
in javascript:
var text = "...";
var regex = /^UNUSED[^{]*?{[^}]*}[\r\n ]*/gm;
console.log(text.replace(regex, ''));
You should be more specific about regex and css. Are you trying to run some command in cmd/sh to remove these entries from file, or you are trying to do that from you code?
Related
Is there a way that I can disable some minifying rules when launching the ember-cli build?
I have this CSS selector
[attribute*="value" i]
And the minified version returns
[attribute*=valuei]
Which is kind of a problem because the framework is based on that way of selecting classes through combined parts that join in a single camelCase class name within the HTML, which is the reason why I need the "i" (case-insensitive). So unless I change all camelCase classes with its hyphen separated version and remove the "i" from everywhere, nothing is going to work
Ideally I'd like to prevent the minifier from removing spaces or from removing quotes.
Any idea?! maybe some other options to pass here:
const EmberApp = require('ember-cli/lib/broccoli/ember-app');
module.exports = function(defaults) {
let app = new EmberApp(defaults, {
minifyCSS: {
options: { processImport: true }
}
});
//...
return app.toTree();
};
Thanks in advance
it is possible to clean the contents of a CSS file, leaving only the class names and #medias with search and replace tool?
for example:
this:
#id .class {
width: 100%;
display: block;
}
leave it:
#id .class {
}
Thanks to all
Sure. You want to replace everything between { and } with a single empty line. The regular expression for this is
\{([^\}])+\}
^ ^ ^
{ | }
|
anything that's not a `}`
The replacement is {\n\n}.
Screenshot
If you have Emmet installed you can use Control + D. That will "Select Between Container" (You might have to press it multiple times depending on where your cursor starts).
There's also Control + Shift + Space that will do it all in one shot no matter where the cursor is.
I listed Control + D first because I find it a lot more useful.
I found an awesome article with a lot of nice shortcuts here:
https://viget.com/extend/my-overused-sublime-text-keyboard-shortcuts
It is necessary to perform a search and replace strings in css file. And found only the title picture with.
While the search is done so with the exception of
/:(\s*)url\(((.(?!.*https:|.*http:|.*base64|.*data:image))*)\)/ig
and replace
:$1url(\'../dist/img/vendor/$2\')
In this case, I replace the path in a similar way. And I get this result
background-image: url('../dist/img/vendor/"../images/preloader.gif"');
A need of a string
background-image: url("../images/preloader.gif");
get
background-image: url('../dist/img/vendor/preloader.gif');
Find
/(url\(\s*[\"\'])(?:[^\"\']+\/)?([^\/\"\']+[\"\']\s*\))/ig
Replace
$1../dist/img/vendor/$2
Demo https://regex101.com/r/kU7cC9/3
Using a css parser is a better way if you want among other things to avoid quotes problems (single quotes, double quotes, no quotes).
As an aside, the background-image CSS property isn't the only one that can contain a path to an image file, since the background property can compile all the data from other background- properties.
An example with sabberworm PHP CSS Parser that automatically encloses paths between double quotes:
require __DIR__ . '/vendor/autoload.php';
define('NEW_PATH', '../dist/img/vendor/');
$oCssParser = new Sabberworm\CSS\Parser($css);
$oCssDocument = $oCssParser->parse();
$properties = ['background-image', 'background'];
foreach($oCssDocument->getAllRuleSets() as $oRuleSet) {
foreach($properties as $property) {
$oCssRules = $oRuleSet->getRules($property);
foreach ($oCssRules as $oCssRule) {
$value = $oCssRule->getValue()->__toString();
if (!preg_match('~https?:|base64|data:image~S', $value)) {
$value = preg_replace('~url\("\K(?:[^"/]*/)*~', NEW_PATH, $value);
$oCssRule->setValue($value);
}
}
}
}
echo $oCssDocument->render(Sabberworm\CSS\OutputFormat::createPretty());
I'm trying to write regexp to find all rules in CSS filest that don't have semicolon at the end:
.abc {
height: 100%;
margin: auto;
text-align: center /* <-- like this one */
width: 100%;
}
i've tried this [^;\{\}]\n but it not excluding { and } from search. Any ideas?
What you need is a CSS parser.
However, if this is a one-off job, and your regex engine supports lookbehinds, you can use this regex:
^.*(?<![;{}])$
Visualization:
(?<![;{}]) is a negative lookbehind that asserts that the line should end with a character that's not ;, { or }.
Note that the regex is far from perfect and fails to match properly if a CSS block is used by more than one class/id or if every class/id is separated by a line break.
RegEx Demo
In perl you can easily do this,
e.g:
#!/usr/bin/perl
# open your file
open(FILE,"filename.css");
my #fileLines = <FILE>;
close FILE;
my $lineCount=1;
# check all lines of your file
foreach my $line(#fileLines){
# erase endline spaces
$line=~ s/\s+$//;
# erase begin of line
$line=~ s/^\s+//;
# simple perl regex, it doesn't watch for comments
if($line !~ /\;$/ && $line !~ /{$/ && $line !~/}$/){
print $lineCount.':'.$line.'\n';
}
$lineCount++;
}
This small program will show you lines which not finnish by ';'.
You could just run the file through http://csslint.net
UPDATE:
This question has been modified to reflect the very helpful comments and answer below. I've accepted the answer, but the full functionality is not working to-date.
Contents of .ctags (in ~/)
-R
--exclude=.git
--exclude=log
--verbose=yes
--langdef=scss
--langmap=scss:.scss
--regex-scss=/^[ \t]*([^\t {][^{]{1,100})(\t| )*\{/| \1/d,definition/
--regex-scss=/^[#]mixin ([^ (]+).*/\1/m,mixing/
When I place my cursor under the target, vim says E426 tag not found: tag_name
Consider the following pattern:
footer{
.wrapper{
.general-info{
.footer-links{
a{#include ticker($bg, $white);}
}
}
}
}
In a separate file (modules.scss) in the directory, I have the definition for ticker:
#mixin ticker($color, $bg-color) {
color: $color;
background-color: $bg-color;
}
When I place my cursor under the target, vim still says E426 tag not found: tag_name
ctags does not index the ticker mixin. However I can use ctags to find methods from SCSS gem directly (e.g. darken).
adding a \ before the last { gives no warning when using ctags.
I don't know if the tags produced give the desired result since I don't know the language.
The result would be:
--langdef=scss
--langmap=scss:.scss
--regex-scss=/^[ \t]*([^\t {][^{]{1,100})(\t| )*\{/| \1/d,definition/
Update: like I mentioned above, I don't know the language, so it is hard to check the actual definition of the tags.
I looked online and the following code is listed as scss in some webpage.
Suppose the tags you want to get are the words following mixing.
#mixin table-scaffolding {
th {
text-align: center;
font-weight: bold;
}
td, th { padding: 2px; }
}
#mixin left($dist) {
float: left;
margin-left: $dist;
}
#data {
#include left(10px);
#include table-scaffolding;
}
then with the following:
--langdef=scss
--langmap=scss:.scss
--regex-scss=/^[ \t]*([^\t {][^{]{1,100})(\t| )*\{/| \1/d,definition/
--regex-scss=/^[#]mixin ([^ (]+).*/\1/m,mixin/
--regex-scss=/^[#]function ([^ (]+).*/\1/f,function/
you get the two new tags left and table-scaffolding.
So if I am in the word left inside data hit ctrl+] it jumps to the line where data is defined.
You have to be careful for the other keyword because it has a - in the word. So if you are on table and press ctrl+] you will get the same error tag not found. For this to work you have to add the following in your .vimrc
set iskeyword+=-
You should be able to generalize the above for other tags you need, or even build a general regular expression to handle all the tags, as you initially meant.
If you post a specific example of how the file you are trying to work with looks like, and what are the tags you are trying to obtain I am sure I or other people would be able to help figure out a expression for that.