src/examples/tabs/.sencha/app/sass-impl.xml

   1 <project name="sass-impl">
   2
   3     <!--
   4     Uses the compiler to generate the top-level scss file for the app
   5     by using the current set of js files to determine the Components
   6     used by the app, then including the corresponding scss files into the
   7     app's style
   8     -->
   9     <target name="-compile-sass" depends="-init-compiler">
  10         <x-normalize-path
  11             path="${build.dir}/resources"
  12             property="image.search.path"/>
  13
  14         <x-compile refid="${compiler.ref.id}">
  15             <![CDATA[
  16                 restore
  17                     page
  18                 and
  19                 #only set variables for used classes eg. $include-class-name
  20                 sass
  21                     +class-name-vars
  22                     -variable=$image-search-path:'${image.search.path}'
  23                     -variable=$theme-name: '${app.theme}' !default
  24                     -output=${app.out.scss}
  25                 and
  26                 include
  27                     -all
  28                 and
  29                 # include etc and vars from all classes
  30                 sass
  31                     +etc
  32                     +vars
  33                     +append
  34                     -output=${app.out.scss}
  35                 and
  36                 restore
  37                     page
  38                 and
  39                 #only include rules from used classes
  40                 sass
  41                     +rules
  42                     +append
  43                     -output=${app.out.scss}
  44                 and
  45                 sass
  46                     +ruby
  47                     -output=${app.out.ruby}
  48             ]]>
  49         </x-compile>
  50         <!--
  51         app.out.css.path is relative to the app output index.html file
  52         -->
  53         <x-get-relative-path
  54             from="${app.dir}"
  55             to="${app.out.css}"
  56             property="app.out.css.path"
  57         />
  58
  59 <!--update the application's bootstrap.css file to point to the build output-->
  60 <echo file="${app.bootstrap.css}">
  61 <![CDATA[
  62 /*
  63  * This file is generated by Sencha Cmd and should NOT be edited. It redirects
  64  * to the most recently built CSS file for the application to allow index.html
  65  * in the development directory to load properly (i.e., "dev mode").
  66  */
  67 @import '${app.out.css.path}';
  68 ]]>
  69 </echo>
  70     </target>
  71
  72     <!--
  73     This macrodef is used for post-processing Ext JS 4.2+ style theme css files
  74     and will split based on selector thresholds, as well as run the css preprocessor
  75     and compressor
  76     -->
  77     <macrodef name="x-compress-css-files">
  78         <attribute name="dir"/>
  79         <attribute name="prefix"/>
  80         <attribute name="outprefix"/>
  81         <attribute name="compress"/>
  82         <attribute name="preprocess"/>
  83         <sequential>
  84             <x-split-css file="@{dir}/@{prefix}.css"
  85                          outdir="${build.resources.dir}"
  86                          limit="${build.css.selector.limit}"/>
  87
  88             <for param="cssfile">
  89                 <fileset dir="@{dir}" includes="@{prefix}*.css"/>
  90                 <sequential>
  91                     <local name="css.output.name"/>
  92                     <local name="pattern"/>
  93                     <property name="pattern" value="(.*?)(@{prefix})(_\d{1,2})*\.css"/>
  94                     <propertyregex property="css.output.name"
  95                                    input="@{cssfile}"
  96                                    regexp="${pattern}"
  97                                    select="\1@{outprefix}\3.css"
  98                                    override="true"/>
  99                     <if>
 100                         <equals arg1="@{preprocess}" arg2="true"/>
 101                         <then>
 102                             <echo>Preprocessing @{cssfile} to ${css.output.name}</echo>
 103                             <x-css-preprocess
 104                                 file="@{cssfile}"
 105                                 tofile="${css.output.name}"
 106                                 options="${build.css.preprocessor.opts}"/>
 107                         </then>
 108                     </if>
 109                     <if>
 110                         <equals arg1="@{compress}" arg2="true"/>
 111                         <then>
 112                             <echo>Compressing @{cssfile} to ${css.output.name}</echo>
 113                             <x-compress-css srcfile="@{cssfile}"
 114                                             outfile="${css.output.name}"/>
 115                         </then>
 116                     </if>
 117                 </sequential>
 118             </for>
 119         </sequential>
 120     </macrodef>
 121
 122     <!--
 123     This target builds Ext JS 4.2+ style themes, first generating the top-level
 124     scss file, then running compass with the css, sass, and config options set
 125     -->
 126     <target name="-compass-compile-theme-package">
 127         <x-run-if-true value="${enable.ext42.themes}">
 128             <x-ant-call target="-compile-sass"/>
 129
 130             <x-compass-compile
 131                 rubyPath="${build.ruby.path}"
 132                 dir="${compass.working.dir}"
 133                 trace="${compass.compile.trace}"
 134                 boring="${compass.compile.boring}"
 135                 force="${compass.compile.force}"
 136                 sassdir="${compass.sass.dir}"
 137                 cssdir="${compass.css.dir}"
 138                 config="${compass.config.file}"/>
 139
 140             <x-compress-css-files dir="${build.dir}/resources"
 141                                   prefix="${app.out.base.debug}"
 142                                   outprefix="${app.out.base}"
 143                                   preprocess="${build.css.preprocess}"
 144                                   compress="${build.css.compress}"/>
 145         </x-run-if-true>
 146     </target>
 147
 148     <!--
 149     This is a legacy macrodef to support building Ext JS 4.1 themes, which have been
 150     deprecated in favor of Ext JS 4.2 theme packages
 151     -->
 152     <macrodef name="x-build-sass">
 153         <attribute name="theme"/>
 154         <sequential>
 155             <local name="sass.name"/>
 156             <local name="use.shell"/>
 157
 158             <!--
 159             convert abspath to just the leaf path name
 160             -->
 161             <basename property="sass.name" file="@{theme}"/>
 162             <local name="sass.base.name"/>
 163             <property name="sass.base.name" value="${sass.name}"/>
 164
 165             <echo>Compiling sass directory : @{theme}/sass</echo>
 166             <x-compass-compile
 167                 rubyPath="${build.ruby.path}"
 168                 boring="${compass.compile.boring}"
 169                 force="${compass.compile.force}"
 170                 trace="${compass.compile.trace}"
 171                 dir="@{theme}/sass"/>
 172
 173             <x-compress-css srcfile="${app.dir}/resources/${sass.base.name}/*.css"
 174                             outdir="${app.dir}/resources/${sass.base.name}"/>
 175         </sequential>
 176     </macrodef>
 177
 178     <!--
 179     This target builds Ext JS 4.1 style themes, iterating over each directory
 180     under the specified ${app.theme.dir} directory and compiling the sass
 181     located there
 182     -->
 183     <target name="-compass-compile-theme-folders">
 184         <x-run-if-true value="${enable.ext41.themes}">
 185             <!-- run sass compilation over the various themes -->
 186             <for param="sass">
 187                 <dirset dir="${app.theme.dir}" includes="*"/>
 188                 <sequential>
 189                     <x-build-sass theme="@{sass}"/>
 190                 </sequential>
 191             </for>
 192         </x-run-if-true>
 193     </target>
 194
 195     <!--
 196     This target builds Touch style themes, by running compass
 197     over the directory containing the manually maintined scss files
 198     -->
 199     <target name="-compass-compile-sass-dir">
 200         <x-run-if-true value="${enable.touch.themes}">
 201             <x-compass-compile
 202                 rubyPath="${build.ruby.path}"
 203                 trace="${compass.compile.trace}"
 204                 boring="${compass.compile.boring}"
 205                 force="${compass.compile.force}"
 206                 dir="${compass.sass.dir}"/>
 207         </x-run-if-true>
 208     </target>
 209
 210     <!--
 211     This is a summation target triggering the three different supported
 212     sass modes (ext 41, ext 42+, and touch).
 213     -->
 214     <target name="-compass-compile"
 215             depends="-compass-compile-theme-package,
 216                      -compass-compile-theme-folders,
 217                      -compass-compile-sass-dir"/>
 218
 219     <!--
 220     Build SASS
 221     -->
 222     <target name="-before-sass"/>
 223     <target name="-sass" depends="-compass-compile"/>
 224     <target name="-after-sass"/>
 225 </project>