Comments (6)
I definitely want this to be super simple out of the box! In this case I think it might be because Microsite uses "type": "module"
in a project's package.json
file. PostCSS only picks up on CJS, so try postcss.config.cjs
?
Microsite automatically uses the official Snowpack plugin if it picks up on a PostCSS configuration file (via cosmiconfig
). Custom snowpack.config.js
files is something I want to add for the next release, though.
from microsite.
I added a working Tailwind example in cadd0a5
. Since Tailwind doesn't currently support a tailwind.config.cjs
file (I'm planning to make a PR to fix this), you need to actually require the config from postcss.config.cjs
and then pass it to the tailwindcss
plugin. Not ideal, but it works for now. Once Tailwind supports a .cjs
config file this should be much easier.
from microsite.
I'll definitely update the docs to mention this! Certainly on the bleeding edge of ESM in Node here.
As for Tailwind and PurgeCSS, I'll see if I can get it working and add an example to the project. I have a suspicion it's a hidden side-effect of the multi-stage build that happens in the background.
from microsite.
I can confirm that PostCSS works completely fine if someone renames the default postcss.config.js
file to postcss.config.cjs
- actually the same goes to tailwind.config.js
as well.
There's one thing I haven't found a solution yet. Tailwind CSS provides a way to remove unused CSS classes from the final built CSS using purge-css
under the hood. Even if providing NODE_ENV=production
option for the npm run build
command for some reason PostCSS/Tailwind does not pick up this config thus at the end of the process the CSS file emitted is not "tree-shaked" and not even minified - which should be the default behaviour for Tailwind if NODE_ENV is set to production as far as I know.
This is how my postcss.config.cjs
file looks like:
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
};
And here is what's in the tailwind.config.cjs
file:
module.exports = {
// This should instruct Tailwind to purge CSS based on these files
purge: ['./src/**/*.tsx'],
darkMode: false, // or 'media' or 'class'
theme: {
extend: {},
},
variants: {
extend: {},
},
plugins: [],
};
Will take another look later, my guess is that NODE_ENV=production
does not propagate correctly from the command line to Tailwind through @snowpack/plugin-postcss
- but again, this is just a guess.
from microsite.
I can confirm, using postcss.config.cjs
instead of postcss.config.js
works as expected. I think this should be mentioned inside the doc because using .cjs
it's not so popular yet.
from microsite.
Added a note about PostCSS using .cjs
in f369f5e.
from microsite.
Related Issues (20)
- Remove defer from inline scripts HOT 3
- Move `microsite-templates` into this repo HOT 1
- Doesn't do the thing π HOT 3
- Partial hydration causes Preact to be fetched twice HOT 10
- production build fails when CSS module is imported on multiple pages HOT 2
- getStaticProps + node builtins + dev server fails HOT 1
- Preact import regex matches too much HOT 2
- Preact CDN lookup fails for non-hardcoded submodules HOT 1
- Enhancement: Support SSR-able components as props for hydrated components HOT 7
- getStaticPaths uses moduleβs path when returning params object HOT 1
- [RFC] Built-in Markdown/MDX Support HOT 2
- Dynamic routes won't work in dev mode HOT 4
- Hydrated component isn't initialized in prod builds when it is exported/imported under a name different from the name of the component it decorates HOT 6
- Make withHydrate a no-op when nested rather than an error
- Hydration fails with nested props arrays/objects HOT 7
- Build fails with "Error: You must supply options.input to rollup"
- import.meta.env.SSR is true on the client HOT 1
- Preact modules are loaded with `modulepreload` even if they're not used
- dev server fails to load fetch HOT 1
- Add SCSS/SASS support?
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
π Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. πππ
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google β€οΈ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from microsite.