PostCSS build tool for asp.net core or blazor

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.
2. • 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.

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"
  }
}

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>

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