CssFileSet element 

Specifies the input, output, and processing settings for one or more CSS files. There can be multiple CssFileSet elements in a WebGrease configuration file.

Attributes and elements

The following sections describe attributes and child elements.

Attributes

Attribute Description Value

Name

Specifies a unique name for this CssFileSet element.

Any string value.

Output

Specifies the output location as a file or folder. The path can be relative or absolute.

A relative or absolute folder or file name.

Child elements

Element Description Value

Autoname element

Specifies the file rename settings.

See Autoname element.

Bundling element

Specifies the bundling settings.

See Bundling element.

ConfigSource element

Specifies a WebGrease configuration file that contains a CssFileSet element and any configured child elements.

A relative or absolute path and file name. For more information, see ConfigSource element.

Inputs element

Specifies the location of the input files.

See Inputs element.

Locales element

Specifies a locale for which there is a corresponding resource (.resx) file.

See Locales element.

Minification element

Specifies the CSS minification settings.

See Minification element.

Spriting element

Specifies the image sprite settings.

See Spriting element.

Themes element

Specifies a theme for which there is a corresponding resource (.resx) file.

See Themes element.

Autoname element

Specifies the file rename settings.

Attributes

Attribute Description Value

config

Specifies a solution configuration name.

Any configuration name defined in your solution file, such as Debug or Release. This value is case-sensitive.

Child elements

Element Description Value

RenameFiles

Specifies whether the files will be automatically renamed based on a hash of their content.

True or False.

Example

<Autoname config="Debug">
  <!-- disables renaming for the debug config type-->
  <RenameFiles>false</RenameFiles>
</Autoname>

Bundling element

Specifies the bundling settings.

Attributes 

Attribute Description Value

config

Specifies a solution configuration name.

Any configuration name defined in your solution file, such as Debug or Release. This value is case-sensitive.

Child elements

Element Description Value

AssembleFiles

Specifies whether bundling is enabled.

True or False.

MinimalOutput

Specifies whether comments are excluded from the output.

True or False.

A value of True specifies that comments are not included.

Example

<Bundling config="Release">
  <!-- enables bundling for the release config type-->
  <AssembleFiles>true</AssembleFiles>
</Bundling>

ConfigSource element

The configSource element specifies a relative or absolute path and file name of a WebGrease configuration file. This enables you to store some or all of the configuration for the CssFileSet element in an external file.

Use this to maintain various default settings in separate files. For example, you can maintain all default CSS image spriting settings in one file and all default CSS minification settings in another file.

Attributes

None.

Child elements

None.

Inputs element

Specifies the location of the input files. You can specify multiple locations by including multiple child Input elements.

Attributes

None.

Child elements

Element Description Value

Input

Specifies an input file location. This can be a single file or a folder. If a folder is specified, all files in all subfolders are processed by default; however, you can use attributes to limit which files are processed. For both files and folders, the path can be relative or absolute. If the path is relative and the command-line –in option is used, the value of the –in option is the base path.

A file or folder name. The path can be relative or absolute.

Remarks

The Input element has two attributes that can be used if the value of the Input element is a folder.

Attribute Description Value

Optional

Specifies whether the input is optional.

True or False.

A value of False specifies that the input is required.

Default = False

searchPattern

Specifies the search string to match against filenames in the folder.

See below.

searchOption

Specifies whether subfolders are included.

TopDirectoryOnly or AllDirectories. This value is case-sensitive and is converted to a SearchOption member by the XML parser.

The following wildcard specifiers are permitted in the searchPattern attribute:

Wildcard character Description

*

Match zero or more characters.

?

Match exactly one character.

Characters other than the wildcard specifiers represent themselves. For example, the searchPattern string "*.css" searches for all filenames in the folder that end with the extension ".css". The searchPattern string "s*" searches for all filenames in the folder that begin with the letter "s".

Example

<Inputs>
  <!-- specifies a single file with a relative path -->
  <Input>css\site.css</Input>

  <!-- specifies a single file with an absolute path -->
  <Input>f:\webgrease files\css\site.css</Input>

  <!-- specifies a folder with a relative path
       All file in this folder and all subfolders will be processed -->
  <Input>css\</Input>

  <!-- specifies a folder with a relative path
       The searchPattern attribute specifies that only CSS files will be processed
       And the searchOption attribute specifies that subfolders are not included -->
  <Input searchPattern="*.css" searchOption="TopDirectoryOnly">realworldcss</Input>
</Inputs>

Locales element

Specifies a locale for which there is a corresponding resource (.resx) file. Separate locales with a semicolon. A variation is built for each locale.

Attributes

Attribute Description Value

config

Specifies a solution configuration name.

Any configuration name defined in your solution file, such as Debug or Release. This value is case-sensitive.

Child elements

None.

Example

<Locales>en-us;fr-ca</Locales>

Minification element

Specifies the CSS minification settings (conditions for minimizing CSS files).

Attributes

Attribute Description Value

config

Specifies a solution configuration name.

Any configuration name defined in your solution file, such as Debug or Release. This value is case-sensitive.

Child elements

Element Description Value

ExcludeProperties

Specifies CSS properties that will be removed. These properties will not appear in the output. Separate properties with a semicolon.

Any CSS property.

MergeMediaQueries

Specifies whether to optimize and merge CSS inside media queries.

True or False.

When set to True, file size is slightly reduced and, more importantly, browser rendering time is reduced due to fewer CSS selectors.

Minify

Specifies whether minification is enabled.

True or False.

Optimize

 

True or False.

ProhibitedSelectors

Specifies the CSS selectors that are prohibited. Separate selectors with a semicolon. An error is raised if any of these selectors are found in the CSS file(s).

Any CSS selector.

RemoveSelectors

Specifies the CSS selectors that are ignored. These selectors will not appear in the output file.

Any CSS selector.

ValidateLowerCase

Specifies whether to validate that all CSS selectors and properties are lowercase.

True or False.

Example

<!--Minification Settings-->
<Minification config="Debug">
  <!-- disables minification for the debug config type-->
  <Minify>False</Minify>
  <!--Selectors that should be considered invalid and have an error raised if used-->
  <ProhibitedSelectors>*>html,html>body</ProhibitedSelectors>
</Minification>

Spriting element

Specifies the image sprite settings.

Attributes

Attribute Description Value

config

Specifies a solution configuration name.

Any configuration name defined in your solution file, such as Debug or Release. This value is case-sensitive.

Child elements

Element Description Value

AutoVersionBackgroundImages

Not currently used.

True or False.

ErrorOnInvalidSprite

Specifies whether errors are thrown for images that are not sprited.

True or False. If set to True, you can handle any errors by adding the following to the selector in CSS: -wg-spriting: ignore;

ForceImageType

Specifies a single type of sprite file in which all sprited images are saved. For more information, see ForceImageType element.

One of the following values:

  • Photo
  • NonphotoIndexed
  • NonphotoNonindexed

IgnoreImagesWithNonDefaultBackgroundSize

Specifies whether to skip processing of images that have their background-size property set to a value other than the default value (“auto” or “auto auto”).

True or False.

When set to True, images that do not use the default value for the background-size property are not processed.

ImagePadding

Specifies a value in pixels to be used as a buffer between images.

An integer.

ImagesToIgnore

Specifies images that are not included in the sprite.

The full name and path of an image file. Separate image files with a comma.

OutputUnit

Specifies the output units.

One of the following values:

  • px
  • rem
  • em

Default = px

OutputUnitFactor

Specifies the factor by which to multiply the units in px to get the units in the specified OutputUnit.

A double. For example, 1 px = 0.0625 rem.

Default = 1

SpriteImages

Specifies whether images are combined into a sprite.

True or False.

WriteLogFile

Specifies whether to write log files to the reports folder.

True or False.

ForceImageType element

The ForceImageType element is used by the internal spriting algorithm. The recommended configuration is to use the default setting.

The ForceImageType element specifies a single type of sprite file in which all images are sprited. If this value is not specified, WebGrease creates up to three sprite files: one for each of the possible image sprite types. The possible image sprite types are:

  • Photo: used for JPEG and EXIF images
  • Non-photo, indexed: used for all other image types that can be indexed
  • Non-photo, non-indexed: used for all image types that can not be indexed

When a value is specified for the ForceImageType element, WebGrease puts all sprited images in the file for the specified sprite type (regardless of whether the images match the sprite type).

Example

<!-- Spriting Settings -->
<Spriting config="Debug">
  <!-- disables combining images into a sprite for the debug config type-->
  <SpriteImages>false</SpriteImages>
</Spriting>

Themes element

Specifies a theme for which there is a corresponding resource (.resx) file. Separate themes with a semicolon. A variation is built for each theme.

Attributes

Attribute Description Value

config

Specifies a solution configuration name.

Any configuration name defined in your solution file, such as Debug or Release. This value is case-sensitive.

Child elements

None.

Example

<Themes>green;blue</Themes>

See Also

Last edited Sep 4, 2013 at 7:57 PM by JeffRob, version 3

Comments

No comments yet.