What I'm trying to achieve
Set up automated autoprefixer on npm run build of an Astro project on all global stylesheets and component scoped styling to support other browsers and older browsers (up to about 2016).
My build
Astro v1.9.1
CSS compiled via SCSS
A few Astro integrations (imagetools, prefetch, compress, NetlifyCMS are the only ones I think could have any relevance to this issue)
Steps I've taken
Built out an Astro project that uses both global styles in the /src/styles folder as well as scoped styling in Astro components
Ran npm install autoprefixer
Created a .postcss.config.cjs with the following code based on the docs:
module.exports = {
plugins: [
require('autoprefixer'),
],
};
Ran npm run build
What I expected
For my CSS to be compiled with different vendor prefixes for browser support
My main test of adding text-size-adjust: 100%; in src/styles/global.css to cause a -webkit-text-size-adjust: 100%; to be added to my compiled CSS in dist/assets (the build folder)
What else I have tried
Creating a .postcssrc.json which contains
{
"map": true,
"plugins": {
"autoprefixer": {}
}
}
Adding extra Vite configuration to my astro.config.mjs:
import autoprefixer from "autoprefixer";
export default defineConfig({
vite: {
postcss: {
plugins: [
autoprefixer({}), // add options if needed
],
},
},
})
Adding some browserslist conditions to my package.json to set conditions for the autoprefixing
{
"browserslist": [
"last 2 versions",
"not dead",
"> 0.2%"
]
}
Result & Conclusion
However I am still not getting autoprefixing to occur in my project
I'm also struggling to find answers online or in the Astro Discord server - which is making me wonder: Are people not really using autoprefixer anymore? How are people supporting other vendors and older browsers?
Thanks so much for the help, and I'm loving Astro!
googling i've pass through this post, and then i found this in Astro's doc.
have you seen this? https://docs.astro.build/en/guides/styling/#postcss
Related
I have some nested css in one of my component's css files. When I do 'ng serve' the css does not work and I get this error:
(11:5) Nested CSS was detected, but CSS nesting has not been configured correctly. Please enable a CSS nesting plugin *before* Tailwind in your configuration. See how here: https://tailwindcss.com/docs/using-with-preprocessors#nesting
This is a fresh project created with angular CLI 14, with tailwind installed according to instructions here: https://tailwindcss.com/docs/guides/angular
I have tried adding the postcss.config.js file to my project as specified in the link provided by the error, but nothing appears to happen:
module.exports = {
plugins: {
'postcss-import': {},
'tailwindcss/nesting': {},
tailwindcss: {},
autoprefixer: {},
}
}
The goal is to configure a development environment for Tailwindcss v3 that supports #import and the removal of unused custom CSS classes.
I am not using a bundler. The project depends on just HTML, CSS, and JS i.e. no frameworks. If it's important, I use VS Code.
This is what I've tried.
Project's configuration:
// tailwind.config.js
const defaultTheme = require('tailwindcss/defaultTheme');
module.exports = {
content: [
'./src/**/*.{html,js}',
],
darkMode: 'media',
theme: {
extend: {
fontFamily: {
primary: '"Inter", sans-serif',
mono: ['"DM Mono"', ...defaultTheme.fontFamily.mono]
}
},
},
variants: {
extend: {}
},
plugins: [
// ...
]
};
// postcss.config.js
module.exports = {
plugins: [
require('postcss-import'),
require('tailwindcss'),
require('autoprefixer'),
require('cssnano')
]
/* styles.css*/
#import "tailwindcss/base";
#import "./custom-base-styles.css";
#import "tailwindcss/components";
#import "./custom-components.css";
#import "tailwindcss/utilities";
#import "./custom-utilities.css";
And this is my commend line:
$ npx tailwindcss -i ./src/css/styles.css -o ./css/styles.css --watch
Running just the above command, the setup does not inline the custom*.css files.
To achieve inlining, I also have to execute below, which on the surface, seems as if it should not be necessary.
$ npx postcss-cli './src/css/styles.css' -o './css/styles.css' -w
The end result is, Tailwindcss is not removing my unused custom styles, even when wrapped in the required #layer {}.
Step 5 here (Using PostCSS) just says to start your build process and does not offer any details.
Step 4 here (Tailwind CLI) only says to start the Tailwind CLI process.
So, what am I missing?
Do I need to use a bundler? If so, my preferred one is Rollup.
Other details:
autoprefixer:^10.4.0
cssnano:^5.0.10
postcss-cli:^9.0.2
postcss-import:^14.0.2
tailwindcss: "^3.0.7
Your intuition is correct. You do not need to run post-cli. PostCSS will execute once you update your Tailwind command.
You are missing the --postcss parameter.
Assuming that postcss.config.js is in your project's root, copy this to the script section of your package.json:
"tw": "tailwindcss -i ./src/css/styles.css -o ./css/styles.css --postcss postcss.config.js --watch"
Then from the command line at the project's root, run:
npm run tw
Note: with the above command, Tailwind will not rebuild the output file after the HTML file has been saved. You'll need to edit and save one of the CSS source files to initiate a rebuild. (Perhaps I still have a configuration problem?)
One other item, how are you testing for the removal of unused custom classes?
The mistake I made was just commenting out the HTML utilizing the custom class and then looking at the CSS output to see if the class was removed. But Tailwind (as documented somewhere) won't remove a class if the class appears anywhere in the markup, even in a commented line. If you're testing your build process, rename the class in the markup to anything, and then Tailwind will drop the custom class from the CSS output.
According to the docs, tailwind states it supports ie11.
...yet it uses custom properties that are not supported by ie11.
We're attempting to use this in a minimal nextjs project with the following postcss.config.js:
module.exports = {
plugins: [
'postcss-import',
'tailwindcss',
'autoprefixer',
['postcss-custom-properties', { preserve: false }]
]
};
The only css file we're importing:
#import 'tailwindcss/base';
#import 'tailwindcss/components';
#import 'tailwindcss/utilities';
The line ['postcss-custom-properties', { preserve: false }] appears to not be doing anything. Both with the defaults and that one.
Obviously, since ie 11 doesn't support custom properties, stuff like the transform utility are completely ignored.
Anyone have any suggestions for this? I've been spending way too much time on trying to get this to work :|
I'm still experimenting which is the best value but the target attribute in your postcss.config.js is the responsible, set it to ie11 and all the custom css properties will be removed.
The target property isn't documented but I've found this issue explaining the situation. If you are using browserlist, try using
module.exports = {
target: 'browserslist',
}
I was setting the Webpack loaders config for .css and .scss files, I noticed that when using --mode production I'm getting minimized CSS as the final output without even using a minimizer explicitly, here's my loaders config:
{
// Match .css or .scss
test: /\.s?css$/,
use: [
isProd
// In production extract the CSS into separate files
? {
loader: MiniCssExtractPlugin.loader,
options: {
hmr: !isProd
}
}
// In development inject the styles into the DOM
: 'style-loader',
{
loader: 'css-loader'
},
{
loader: 'sass-loader',
options: {
sourceMap: false
}
}
]
}
I'm using sass-loader with node-sass and mini-css-extract-plugin to extract the CSS into separate files, which suggests using optimize-css-assets-webpack-plugin for minimizing the CSS by overriding optimization.minimizer, but I'm already getting minimized output without installing this plugin.
To find what's causing this behavior I tried processing CSS files with and without sass-loader and I found out that sass-loader might be causing this behavior but it doesn't have any option for minimizing the CSS.
So what's causing this behavior? And do I even still need optimize-css-assets-webpack-plugin if my CSS files are minimized?
Option outputStyle in sass-loader options determines the output format of the final CSS style. Default: nested.
For more detailed https://github.com/sass/node-sass#outputstyle
To disable minification, set this option to expanded:
{
loader: 'sass-loader',
options: {
sassOptions: {
outputStyle: 'expanded'
}
}
}
For minify css i reccomend plugin css-nano. It is flexible in settings. It's good work with postcss-loader.
According to the webpack docs,
webpack v4+ will minify your code by default in production mode.
So it's not sass-loader doing the minification, it's just that removing that means webpack isn't processing your SCSS into CSS and therefore not creating a file to be minified.
I'd say if you're happy with simple minification the default is probably fine for production. Other tools might give you more control over the final output including things like source maps, removing duplicate rules, dumping old prefixes, etc.
Can someone please tell me if it is worth using Sass/SCSS with React?
I finally set up SCSS to work with Create-React-App without ejecting, but it doesn't seem to work well since it is recommended to use CSS modules with each component.
How would I go about sharing variables, mixins, etc. Is it better just to use CSS?
Any help would be greatly appreciated.
The 2. version of create-react-app supports Sass now. Install node-sass (e.g. npm install node-sass) to enable it. For further instructions, check out the documentation. If you need an example, check out this application's Navigation component.
I highly recommend using scss, as you can still use CSS-Modules with SCSS.
I'm not familiar with the create react app setup, but usually you'd configure webpack with style-loaders like so:
{
test: /\.scss$/,
loaders: [
'style-loader',
{ loader: 'css-loader', options: { modules: true } },
'sass-loader',
],
exclude: [srcDir + '/assets/scss/']
},
The loaders will execute backwards, starting with the sass-loader which will transpile your scss to normal css, then with the css-loader and the option "modules: true" these styles will be made available to use as modules.
Of course it could look a bit different but that would be the basic approach to use css modules with scss.
To share variables and mixins I always use a global scss file, which will be required in the app (e.g. in the app.js). However you'll still have to import that file/s in every component-scss where you need the variables and mixins.
// GLOBAL STYLES
{
test: /\.scss$/,
loaders: [
'style-loader',
'css-loader',
'sass-loader',
],
include: [srcDir + '/assets/scss/']
},
Alternatively you could use PostCSS-Properties to make your components even more flexible (e.g. to provide different themes for your app, without explicitly importing the files in your component styles) but afaik those are not supported by IE and would require you to add specific postcss loaders.
see http://cssnext.io/features/#custom-properties-var
The flexibility and maintainability that SASS provides is very useful for big projects especially with react.
However, don't let yourself be influenced by my or the opinion of others - you're free to use the things you're most comfortable with and should always question the way things are done.
create-react-app V2 corresponding section doc: (support out of the box)
https://facebook.github.io/create-react-app/docs/adding-a-sass-stylesheet#docsNav
Using Sass/SCSS is pretty much completely unlinked to React. Sass is compiled to regular CSS, and then you use it as such within your HTML or React.
As for sharing variables, when you use #import it basically just takes everything from the file your importing and pastes it in, so you could just make a _variables.sccs file and import it into each file where you want to use your global variables.
//variables.scss
$primary: red;
$secondary: blue;
//main.scss
#import 'variables';
body {
background-color: $primary;
color: $secondary;
}