Skip to main content

Minify css selectors in css, html, js files.

Project description

Github page: https://github.com/0x1618/CSS-Selector-Minifier

CSS-Selector-Minifier

CSS-Selector-Minifier is a Python package that minifies CSS class and id names in CSS, HTML and JavaScript files. It's a custom made project and it may not meet your requirements. I decided to share my code with you because I also couldn't find a working minifer selector.

Installation

You can install the package using pip:

pip install css-selector-minifier

Usage

** Important note **

You have to prepare your code to make my code work.

CSS-Selector-Minifier uses a regex pattern to find your CSS selectors, and that regex pattern needs an unique prefix.

By default, CSS-Selector-Minifier uses the prefix '-s-' for the beginning of the CSS selector and '-e-' for the end.

Example for preparation

If you want to use default prefix:

CSS that won't work

.main {
  background: yellow;
  font-size: 10px;
  opacity: 0.5;
}

#child {
  background: grey;
  font-size: 21px;
  opacity: 0.51;
}

.bettermain, .betterchild {
  background: yellow;
  font-size: 10px;
  opacity: 0.5;
}

.child .main {
  color: grey;
}

CSS that will work

.-s-main-e- {
  background: yellow;
  font-size: 10px;
  opacity: 0.5;
}

#-s-child-e- {
  background: grey;
  font-size: 21px;
  opacity: 0.51;
}

.-s-bettermain-e-, .-s-betterchild-e- {
  background: yellow;
  font-size: 10px;
  opacity: 0.5;
}

.-s-child-e- .-s-main-e- {
  color: grey;
}

CSS-Selector-Minifier arguments

  • css: a list of paths to CSS files. (optional)
  • html: a list of paths to HTML files. (optional)
  • js: a list of paths to JavaScript files. (optional)
  • start_prefix: a string to prefix the start of the class or id to be minified (default: -s-).
  • end_prefix: a string to prefix the end of the class or id to be minified (default: -e-).
  • min_letters: an integer representing the minimum length of the minified class or id name (default: 1).

CSS-Selector-Minifier methods

  • Get_All_CSS_Selectors(): returns a set of all CSS selectors in the specified CSS files.
  • Generate_Minifed_Selectors(): returns a generator object containing smart generated minified CSS selectors.
  • Generate_Map_For_CSS_Selectors(): returns a dictionary mapping original CSS selectors to their minified counterparts.
  • Replace_CSS_Selectors_With_Minifed(backup=True): replaces all CSS selectors in the specified CSS, HTML, and JavaScript files with their minified counterparts. If backup is set to True, a backup copy of each file will be created with a .bak extension.
  • Minify(backup=True): perform minification. If backup is set to True, a backup copy of each file will be created with a .bak extension.

Example

Before CSS-Selector-Minifier

style.css

.-s-main-e- {
  background: yellow;
  font-size: 10px;
  opacity: 0.5;
}

#-s-child-e- {
  background: grey;
  font-size: 21px;
  opacity: 0.51;
}

.-s-bettermain-e-, .-s-betterchild-e- {
  background: yellow;
  font-size: 10px;
  opacity: 0.5;
}

.-s-child-e- .-s-main-e- {
  color: grey;
}

index.html

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Test</title>
</head>
<body>
	<div class="-s-main-e-">
		<p id="-s-child-e-">Lorem ipsum. child</p>
		<form id="main">
			<input>
		</form>
	</div>
	<div class="-s-bettermain-e-">
		<p class="-s-betterchild-e-">Lorem ipsum. betterchild</p>
	</div>
</body>
</html>

main.js

$(document).ready(function() {
	$('.-s-child-e-').text('jquery is working')
	$('#-s-child-e-').attr('message', 'child')
});

After CSS-Selector-Minifier

style.css

.ae {
  background: yellow;
  font-size: 10px;
  opacity: 0.5;
}

#ad {
  background: grey;
  font-size: 21px;
  opacity: 0.51;
}

.ac, .aa {
  background: yellow;
  font-size: 10px;
  opacity: 0.5;
}

.ab .ae {
  color: grey;
}

index.html

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Test</title>
</head>
<body>
	<div class="ae">
		<p id="ab">Lorem ipsum. child</p>
		<form id="main">
			<input>
		</form>
	</div>
	<div class="ac">
		<p class="aa">Lorem ipsum. betterchild</p>
	</div>
</body>
</html>

main.js

$(document).ready(function() {
	$('.ab').text('jquery is working')
	$('#ab').attr('message', 'child')
});

main.py

from css_selector_minifier import Minify_CSS_Names

m = Minify_CSS_Names(
  css=['src/style.css'],
  html=['src/index.html'],
  js=['src/main.js'],
  start_prefix='-s-',
  end_prefix='-e-',
  min_letters=2
)

m.Minify()

src folder after running Minify_CSS_Names with default backup arg in m.Replace_CSS_Selectors_With_Minifed()

image

This will replace the CSS selectors in your files with minified selectors.

By default, the package will back up your files before replacing the selectors. You can disable this by passing backup=False to the Replace_CSS_Selectors_With_Minifed method.

Note

You can use glob for paths to files

from css_selector_minifier import Minify_CSS_Names
import glob

m = Minify_CSS_Names(
  css=glob.glob('src/*.css'),
  html=glob.glob('src/*.html'),
  js=glob.glob('src/*.js'),
  start_prefix='-s-',
  end_prefix='-e-',
  min_letters=2
)

m.Minify()

Project details


Download files

Download the file for your platform. If you're not sure which to choose, learn more about installing packages.

Source Distribution

css_selector_minifier-2.0.tar.gz (5.8 kB view details)

Uploaded Source

Built Distribution

css_selector_minifier-2.0-py3-none-any.whl (6.2 kB view details)

Uploaded Python 3

File details

Details for the file css_selector_minifier-2.0.tar.gz.

File metadata

  • Download URL: css_selector_minifier-2.0.tar.gz
  • Upload date:
  • Size: 5.8 kB
  • Tags: Source
  • Uploaded using Trusted Publishing? No
  • Uploaded via: twine/4.0.2 CPython/3.9.17

File hashes

Hashes for css_selector_minifier-2.0.tar.gz
Algorithm Hash digest
SHA256 7c0130ec2fca92e8649d7bb1f3090da7beb46f0080798aec9a88146f8373e9dd
MD5 c930eec1588ed718885dfc7f193d7535
BLAKE2b-256 1f5a7d2d69b2fe30771631962df3974d7118f7f7f8c071ce35b5210b1142c85c

See more details on using hashes here.

File details

Details for the file css_selector_minifier-2.0-py3-none-any.whl.

File metadata

File hashes

Hashes for css_selector_minifier-2.0-py3-none-any.whl
Algorithm Hash digest
SHA256 bd6882cb98dec587f1521523b608b8f4715ec54b5bc394ca50825f87bde20db5
MD5 73cbc9ea12b74f587190daf4870f573e
BLAKE2b-256 328cd8d7502dfbba4d7db8fd0987164dfceaead6930f5151056ef977eec133dd

See more details on using hashes here.

Supported by

AWS AWS Cloud computing and Security Sponsor Datadog Datadog Monitoring Fastly Fastly CDN Google Google Download Analytics Microsoft Microsoft PSF Sponsor Pingdom Pingdom Monitoring Sentry Sentry Error logging StatusPage StatusPage Status page