Security News
tea.xyz Spam Plagues npm and RubyGems Package Registries
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
grunt-split-styles
Advanced tools
Readme
Split a CSS file based on selectors. Useful for building old IE stylesheets for example.
Uses the excellent PostCSS for the actual CSS post-processing.
This plugin requires Grunt ~0.4.2
If you haven't used Grunt before, be sure to check out the Getting Started guide, as it explains how to create a Gruntfile as well as install and use Grunt plugins. Once you're familiar with that process, you may install this plugin with this command:
npm install grunt-split-styles --save-dev
Once the plugin has been installed, it may be enabled inside your Gruntfile with this line of JavaScript:
grunt.loadNpmTasks('grunt-split-styles');
In your project's Gruntfile, add a section named split_styles
to the data object passed into grunt.initConfig()
.
Type: RegExp|Object
If a RegExp is specified then selectors matching this regular expression will be added to the output file.
Alternatively you can specify an object:
pattern: {
match: /\.ie8/, // Required. See option.pattern.match below.
matchParent: false // Optional. See options.pattern.matchParent below.
}
Type: RegExp
If a RegExp then selectors matching this regular expression will be added to the output file.
Type: Boolean
Default: false
If true
then a declaration's parent media node will be matched along with the declaration itself.
For example when matching a pattern such as /^\.rtl/
against the following:
@media screen and (min-width: 50em) {
.rtl .thing {
color: red;
}
.another .thing {
color: blue;
}
}
Yields:
@media screen and (min-width: 50em) {
.rtl .thing {
color: red;
}
}
Type: String
Optional new CSS file to copy the matching rulesets to.
Type: Boolean
Default value: true
Whether or not to remove the matching rulesets from the original stylesheet.
Type: RegExp
@media
rulesets matching this regular expression will be copied into the new stylesheet
Type: Boolean
Default value: false
If true
, only the child declarations of a matched @media
rule will be extracted.
For example if your options are:
options: {
output: 'media-children.css',
mediaPattern: /min-width: (\d+)em/,
mediaPatternUnwrap: true
}
And you apply it to the following:
@media screen and (min-width: 50em) {
.rtl .thing {
color: red;
}
.another .thing {
color: blue;
}
}
will extract:
.rtl .thing {
color: red;
}
.another .thing {
color: blue;
}
Here we take an input: style.css
and extract the rules whose selectors start with .ie6
, .ie7
or .ie8
into their own stylesheet styles-ie.css
.
By default, the matching rules are removed from style.css
.
grunt.initConfig({
split_styles: {
ie: {
options: {
pattern: /\.ie[6|7|8]/,
output: 'style-ie.css'
},
files: {
'<%= pkg.theme.path %>/style.css': '<%= pkg.theme.path %>/style.css'
}
}
}
});
In lieu of a formal styleguide, take care to maintain the existing coding style. Add unit tests for any new or changed functionality. Lint and test your code using Grunt.
2014-02-26 v0.3.0
2014-02-25 v0.2.0
2014-02-16 v0.1.0 Initial Release.
FAQs
Split a CSS file based on selectors. Useful for old IE stylesheets
The npm package grunt-split-styles receives a total of 3 weekly downloads. As such, grunt-split-styles popularity was classified as not popular.
We found that grunt-split-styles demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.
Security News
UnitedHealth Group disclosed that the ransomware attack on Change Healthcare compromised protected health information for millions in the U.S., with estimated costs to the company expected to reach $1 billion.