Skip to content

Instantly share code, notes, and snippets.

@composite

composite/PostCSS.targets

Last active December 21, 2023 22:00
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save composite/6f5e8fa1a8fbc434648675508b291961 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save composite/6f5e8fa1a8fbc434648675508b291961 to your computer and use it in GitHub Desktop.
Download ZIP
PostCSS build tool for asp.net core or blazor
Raw
readme.md

PostCSS Runner for MSBuild

Blazor + tailwindcss = ❤ (for me)

Inspired by Delegate.SassBuilder.

Requirements

  • your asp.net core or blazor project
  • node and NPM (or yarn)
  • npm i or yarn i

Usage

  1. Prepare your asp.net core or blazor project.
  2. download package.json and PostCSS.targets and move it in your project
  3. create .pcss file intead of .css file in your project and write it your own. (optional: sugarss also will detect on build) Your.razor -> Your.razor.pcss
  4. edit your [PROJECT].csproj and append text below in <Project>: 
    <Import Project="PostCSS.targets" />
  5. dotnet build or dotnet run and see tranformed css files in your project.
  6. You can ignore file that starts with _. (for import usage)

Features

  1. You can use almost feature of postcss.
    • postcss.config.js, tailwind.config.js(for tailwindcss) and any postcss configs are supported by postcss or other plugins.
  3. you can use gulp, webpack, other build tool intead of postcss-cli for advenced usage.

Known Issues

  • PostCSS with SASS or LESS support: Delegate.SassBuilder not recommended. use node's preprocessor instead.
Raw
package.json
{
"name": "pcssrunner",
"version": "1.0.0",
"description": "postcss runner example",
"private": true,
"scripts": {
"postcss": "postcss",
},
"devDependencies": {
"postcss": "^8.1.6",
"postcss-cli": "^8.2.0",
"postcss-import": "^13.0.0",
"tailwindcss": "^1.9.6"
}
}
Raw
PostCSS.targets
<?xml version="1.0" encoding="utf-8" ?>
<Project ToolsVersion="12.0" xmlns="http://schemas.microsoft.com/developer/msbuild/2003">
<PropertyGroup>
<NodeCli Condition=" '$(NodeCli)'=='' ">npm</NodeCli>
<PostCssRunner Condition=" '$(PostCssRunner)'=='' ">run postcss --</PostCssRunner>
<PostCssCli Condition="('$(PostCssCli)'=='' Or '$(PostCssCli)'=='true')">-o</PostCssCli>
</PropertyGroup>
<ItemGroup>
<PostCssFiles Include="$(MSBuildProjectDirectory)\**\*.pcss" Condition="!($([System.String]::Copy(%(Filename)).StartsWith('_')))" >
<InProject>false</InProject>
</PostCssFiles>
<PostCssFiles Include="$(MSBuildProjectDirectory)\**\*.sss" Condition="!($([System.String]::Copy(%(Filename)).StartsWith('_')))" >
<InProject>false</InProject>
</PostCssFiles>
</ItemGroup>
<!-- For old school inclusion -->
<PropertyGroup>
<BuildDependsOn>
PostCssCompile;
$(BuildDependsOn);
</BuildDependsOn>
<CleanDependsOn>
PostCssClean;
$(CleanDependsOn);
</CleanDependsOn>
</PropertyGroup>
<Target Name="PostCssCompile" Inputs="@(PostCssFiles)" Outputs="@(PostCssFiles->'%(relativedir)%(Filename).css')" BeforeTargets="Build" >
<ItemGroup>
<PostCssFilesInProject Include="@(None);@(Content)" Condition="('%(Extension)' == '.pcss' Or '%(Extension)' == '.sss') And !($([System.String]::Copy(%(Filename)).StartsWith('_')))" />
</ItemGroup>
<Message Text="PostCssCompile: Compiling %(PostCssFilesInProject.Identity)" Importance="high" />
<Exec
Command="&quot;$(NodeCli)&quot; $(PostCssRunner) &quot;%(PostCssFilesInProject.Identity)&quot; $(PostCssCli) &quot;%(PostCssFilesInProject.relativedir)%(PostCssFilesInProject.Filename).css&quot; "
WorkingDirectory="$(MSBuildProjectDirectory)" />
</Target>
<Target Name="PostCssClean" BeforeTargets="Clean">
<ItemGroup>
<PostCssFilesInProject Include="@(None);@(Content)" Condition="('%(Extension)' == '.pcss' Or '%(Extension)' == '.sss') And !($([System.String]::Copy(%(Filename)).StartsWith('_')))" />
</ItemGroup>
<Message Text="PostCssCompile: Cleaning @(PostCssFilesInProject->'%(relativedir)%(Filename).css')" Importance="high" />
<Delete Files="@(PostCssFilesInProject->'%(relativedir)%(Filename).css')" />
</Target>
</Project>
@ksherman
Copy link

ksherman commented Jun 4, 2021

This is really neat and helpful, thanks for sharing!

Curious if you've tried any of this with the JIT mode? Might make the re-builds real quick

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment