extjs/examples/classic/responsive-app/.sencha/app/sass-impl.xml

   1 <project name="x-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-app-js-files">
  10         <local name="app.out.scss.tmp"/>
  11         <local name="sass.name.filter"/>
  12                 <property name="app.out.scss.tmp" value="${app.out.scss}.tmp"/>
  13         <x-normalize-path
  14             path="${build.out.resources.dir}"
  15             property="image.search.path"/>
  16
  17         <if>
  18             <x-is-true value="${build.include.all.scss}"/>
  19             <then>
  20                 <property name="sass.name.filter">
  21                     include
  22                         -all
  23                 </property>
  24             </then>
  25         </if>
  26         <property name="sass.name.filter">
  27             restore
  28                 page
  29         </property>
  30
  31         <local name="var.begin"/>
  32         <local name="var.end"/>
  33         <local name="resource.map.base"/>
  34
  35         <condition property="var.begin" value="dynamic(">
  36             <isset property="framework.isV6"/>
  37         </condition>
  38         <condition property="var.end" value=")">
  39             <isset property="framework.isV6"/>
  40         </condition>
  41
  42         <property name="var.begin" value=""/>
  43         <property name="var.end" value="!default"/>
  44
  45         <condition property="resource.map.base" value="${css.output.rel.path}">
  46             <x-is-true value="${app.sass.dynamic}"/>
  47         </condition>
  48         <property name="resource.map.base" value=""/>
  49
  50         <if>
  51             <x-is-true value="${app.sass.dynamic}"/>
  52             <then>
  53                 <x-get-relative-path
  54                         from="${build.out.css.dir}"
  55                         to="${build.out.base.path}"
  56                         property="css.output.rel.path"/>
  57             </then>
  58         </if>
  59
  60         <property name="css.output.rel.path" value=""/>
  61
  62         <x-compile refid="${compiler.ref.id}">
  63             <![CDATA[
  64                 ${sass.name.filter}
  65                 and
  66                 #only set variables for used classes eg. $include-class-name
  67                 sass
  68                     +class-name-vars
  69                     -variable=$app-name: ${var.begin} '${app.name}' ${var.end}
  70                     -variable=$image-search-path:'${image.search.path}'
  71                     -variable=$theme-name: ${var.begin} '${theme.name}' ${var.end}
  72                     -resourceMapBase=${css.output.rel.path}
  73                     -output=${app.out.scss.tmp}
  74                     -forward=${app.sass.dynamic}
  75                 and
  76                 include
  77                     -all
  78                 and
  79                 # include etc and vars from all classes
  80                 sass
  81                     +etc
  82                     +vars
  83                     +append
  84                     -output=${app.out.scss.tmp}
  85                     -forward=${app.sass.dynamic}
  86                 and
  87                 ${sass.name.filter}
  88                 and
  89                 #only include rules from used classes
  90                 sass
  91                     +rules
  92                     +append
  93                     -output=${app.out.scss.tmp}
  94                 and
  95                 sass
  96                     +ruby
  97                     -sassCacheDir=${compass.cache.dir}
  98                     -output=${app.out.ruby}
  99             ]]>
 100         </x-compile>
 101
 102                 <if>
 103                         <not>
 104                                 <filesmatch file1="${app.out.scss.tmp}" file2="${app.out.scss}"/>
 105                         </not>
 106                         <then>
 107                                 <copy file="${app.out.scss.tmp}" tofile="${app.out.scss}" overwrite="true"/>
 108                         </then>
 109                 </if>
 110
 111         <!--
 112         app.out.css.path is relative to the app output index.html file
 113         -->
 114         <x-get-relative-path
 115             from="${app.dir}"
 116             to="${app.out.css}"
 117             property="app.out.css.path"
 118         />
 119
 120 <!--update the application's bootstrap.css file to point to the build output-->
 121 <echo file="${build.bootstrap.css.path}">
 122 <![CDATA[
 123 /*
 124  * This file is generated by Sencha Cmd and should NOT be edited. It redirects
 125  * to the most recently built CSS file for the application to allow index.html
 126  * in the development directory to load properly (i.e., "dev mode").
 127  */
 128 @import '${app.out.css.path}';
 129 ]]>
 130 </echo>
 131     </target>
 132
 133     <!--
 134     This macrodef is used for post-processing Ext JS 4.2+ style theme css files
 135     and will split based on selector thresholds, as well as run the css preprocessor
 136     and compressor
 137     -->
 138     <macrodef name="x-compress-css-files">
 139         <attribute name="dir"/>
 140         <attribute name="prefix"/>
 141         <attribute name="outprefix"/>
 142         <attribute name="compress"/>
 143         <attribute name="preprocess"/>
 144         <sequential>
 145             <x-split-css file="@{dir}/@{prefix}.css"
 146                          outdir="${build.resources.dir}"
 147                          limit="${build.css.selector.limit}"
 148                          compilerRefId="${compiler.ref.id}"/>
 149
 150             <for param="cssfile">
 151                 <fileset dir="@{dir}" includes="@{prefix}*.css"/>
 152                 <sequential>
 153                     <local name="css.output.name"/>
 154                     <local name="pattern"/>
 155                     <property name="pattern" value="(.*?)(@{prefix})(_\d{1,2})*\.css"/>
 156                     <propertyregex property="css.output.name"
 157                                    input="@{cssfile}"
 158                                    regexp="${pattern}"
 159                                    select="\1@{outprefix}\3.css"
 160                                    override="true"/>
 161                     <if>
 162                         <equals arg1="@{preprocess}" arg2="true"/>
 163                         <then>
 164                             <x-echo>Preprocessing @{cssfile} to ${css.output.name}</x-echo>
 165                             <x-css-preprocess
 166                                 file="@{cssfile}"
 167                                 tofile="${css.output.name}"
 168                                 options="${build.css.preprocessor.opts}"/>
 169                         </then>
 170                     </if>
 171                     <if>
 172                         <equals arg1="@{compress}" arg2="true"/>
 173                         <then>
 174                             <x-echo>Compressing @{cssfile} to ${css.output.name}</x-echo>
 175                             <x-compress-css srcfile="@{cssfile}"
 176                                             outfile="${css.output.name}"/>
 177                         </then>
 178                     </if>
 179                 </sequential>
 180             </for>
 181         </sequential>
 182     </macrodef>
 183
 184     <!--
 185     This target builds Ext JS 4.2+ style themes, first generating the top-level
 186     scss file, then running compass with the css, sass, and config options set
 187     -->
 188     <target name="-compass-compile-theme-package" depends="-load-sass-page">
 189         <x-run-if-true value="${enable.ext42.themes}">
 190             <local name="compress.uptodate"/>
 191
 192             <x-ant-call target="-compile-sass"/>
 193
 194             <if>
 195                 <x-is-true value="${app.sass.fashion}"/>
 196                 <then>
 197                     <if>
 198                         <x-is-true value="${app.sass.rhino}"/>
 199                         <then>
 200                             <x-fashion-compile
 201                                     file="${app.out.scss}"
 202                                     toFile="${app.out.css}"/>
 203                         </then>
 204                         <else>
 205                             <x-sass-build input="${app.out.scss}"
 206                                           output="${app.out.css}"
 207                                           refId="app.web.server"
 208                                           split="${build.css.selector.limit}"
 209                                           compress="${build.css.compress}"
 210                                           updateSplitFiles="true"
 211                                           compilerRefId="${compiler.ref.id}"/>
 212                         </else>
 213                     </if>
 214                 </then>
 215                 <else>
 216                     <x-compass-compile
 217                             rubyPath="${build.ruby.path}"
 218                             dir="${compass.working.dir}"
 219                             trace="${compass.compile.trace}"
 220                             boring="${compass.compile.boring}"
 221                             force="${compass.compile.force}"
 222                             sassdir="${compass.sass.dir}"
 223                             cssdir="${compass.css.dir}"
 224                             config="${compass.config.file}"/>
 225
 226                     <uptodate property="compress.uptodate"
 227                               value="true"
 228                               srcfile="${app.out.scss}.tmp"
 229                               targetfile="${app.out.css}"/>
 230
 231                     <if>
 232                         <x-is-true value="${compress.uptodate}"/>
 233                         <!--<x-is-true value="true"/>-->
 234                         <then>
 235                             <x-compress-css-files dir="${build.out.css.dir}"
 236                                                   prefix="${app.out.base.debug}"
 237                                                   outprefix="${app.out.base}"
 238                                                   preprocess="${build.css.preprocess}"
 239                                                   compress="${build.css.compress}"/>
 240                         </then>
 241                     </if>
 242                 </else>
 243             </if>
 244         </x-run-if-true>
 245     </target>
 246
 247     <!--
 248     This is a legacy macrodef to support building Ext JS 4.1 themes, which have been
 249     deprecated in favor of Ext JS 4.2 theme packages
 250     -->
 251     <macrodef name="x-build-sass">
 252         <attribute name="theme"/>
 253         <sequential>
 254             <local name="sass.name"/>
 255             <local name="use.shell"/>
 256
 257             <!--
 258             convert abspath to just the leaf path name
 259             -->
 260             <basename property="sass.name" file="@{theme}"/>
 261             <local name="sass.base.name"/>
 262             <property name="sass.base.name" value="${sass.name}"/>
 263
 264             <echo>Compiling sass directory : @{theme}/sass</echo>
 265             <x-compass-compile
 266                     rubyPath="${build.ruby.path}"
 267                     boring="${compass.compile.boring}"
 268                     force="${compass.compile.force}"
 269                     trace="${compass.compile.trace}"
 270                     dir="@{theme}/sass"/>
 271
 272             <x-compress-css srcfile="${app.dir}/resources/${sass.base.name}/*.css"
 273                             outdir="${app.dir}/resources/${sass.base.name}"/>
 274         </sequential>
 275     </macrodef>
 276
 277     <!--
 278     This target builds Ext JS 4.1 style themes, iterating over each directory
 279     under the specified ${app.theme.dir} directory and compiling the sass
 280     located there
 281     -->
 282     <target name="-compass-compile-theme-folders">
 283         <x-run-if-true value="${enable.ext41.themes}">
 284             <!-- run sass compilation over the various themes -->
 285             <for param="sass">
 286                 <dirset dir="${app.theme.dir}" includes="*"/>
 287                 <sequential>
 288                     <x-build-sass theme="@{sass}"/>
 289                 </sequential>
 290             </for>
 291         </x-run-if-true>
 292     </target>
 293
 294     <!--
 295     This target builds Touch style themes, by running compass
 296     over the directory containing the manually maintined scss files
 297     -->
 298     <target name="-compass-compile-sass-dir">
 299         <x-run-if-true value="${enable.touch.themes}">
 300             <x-compass-compile
 301                     rubyPath="${build.ruby.path}"
 302                     trace="${compass.compile.trace}"
 303                     boring="${compass.compile.boring}"
 304                     force="${compass.compile.force}"
 305                     dir="${compass.sass.dir}"/>
 306         </x-run-if-true>
 307     </target>
 308
 309     <!--
 310     This is a summation target triggering the three different supported
 311     sass modes (ext 41, ext 42+, and touch).
 312     -->
 313     <target name="-compass-compile"
 314             depends="-compass-compile-theme-package,
 315                      -compass-compile-theme-folders,
 316                      -compass-compile-sass-dir"/>
 317
 318     <!--
 319     Build SASS
 320     -->
 321     <target name="-before-sass"/>
 322     <target name="-sass" depends="-compass-compile"/>
 323     <target name="-after-sass"/>
 324 </project>