autoprefixer in css

[versh23]

Hello. i try to use autoprefixer http://symfony.com/doc/current/frontend/encore/postcss.html

I have a main.scss which import css style

@import "style.css";

style.css

body
{
	display: flex;
	transition: all .5s;
	user-select: none;
	background: linear-gradient(to bottom, white, black);
}

but after build styles are not autoprefixed

if i include this style to main.scss - styles look like

body {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-transition: all .5s;
    -o-transition: all .5s;
    transition: all .5s;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background: -webkit-gradient(linear, left top, left bottom, from(white), to(black));
    background: -webkit-linear-gradient(top, white, black);
    background: -o-linear-gradient(top, white, black);
    background: linear-gradient(to bottom, white, black);
}

webpack.config

    .addEntry('app', [
        './app/Resources/public/js/main.js'
    ])

main.js
import './../scss/app.scss';

[versh23]

with .addStyleEntry() css files work correct.

I think my problem is

@import 'style.css' in scss file.
sorry

[weaverryan]

Hmmm, this still sounds like a bug: you should be able to import CSS files and still have the autoprefixer applied. Or was there something else wrong also?

[versh23]

@weaverryan hello. thanks for answer. if i import CSS file in SCSS like

@import style.css

autoprefixer not worked

[grimpows]

same i tryed import scss in the addEntry to get a "all in one app.js" but look like only .addStyleEntry make style work with a dedicated css file outpout, look like css are skipped while import in .addEntry

[weaverryan]

Nice timing - I was just going to try to repeat this locally :).

[grimpows]

note : i didnt used autoprefixed, dunno what is it i'm less than a beginer is sass scss or css 👎 but i use import to get react-md font awesome and material-design in a app.scss, here is the scss who dont want be integered in the app.js with the addEntry :

// material design + font awesome + react md
@import '~material-design-icons/iconfont/material-icons';
@import '~font-awesome/scss/font-awesome';
@import '~react-md/src/scss/react-md';


$md-primary-color: $md-light-blue-500;
$md-secondary-color: $md-teal-a-100;

@include react-md-everything;

// Or for a subsection

.custom-theme {
  @include react-md-theme-everything($md-light-blue-500, $md-teal-a-100);
}

note that work with addStyleEntry

[weaverryan]

@grimpows can you show the code that doesn't work? And what exactly "doesn't work"? Are you getting an error? Or is the final CSS different than you'd expect?

@versh23 I actually can't repeat your error at all. Can you post your postcss.config.js? Mine looks like this:

module.exports = {
  plugins: {
    'autoprefixer': {},
  }
}

With this, I am seeing autoprefixing under all conditions: I tried adding code to a scss file that's loaded via addStyleEntry(), using @import from with a .scss file, and even importing it from a JS file.

Cheers!

[grimpows]

seem i dont get any error, just the css look like if he isnt here, i'll do an update and retry to put scss in the addEntry to check if that still not work, may update have change some things since last time i tryed

[weaverryan]

@grimpows if things don't work as expected, post as much of your config, js/css code and templates as possible and exactly what you're seeing :) - like "the css look like not used" I don't totally understand what this means.

Cheers!

[grimpows]

that mean i cant use font awesome icon like if i dont get the font awesome css ^^

[weaverryan]

Haha, @grimpows I still don't understand what you mean 😇 . Do you mean that when you try to use font awesome on your page (e.g. <span class="fa fa-star"></span>) that you simply don't see the icon? If so, can you show your webpack.config.js file, any relevant .js or .scss file and your template where you include your <script> and <link> tags

[grimpows]

there is my config who work

var path = require('path');
var Encore = require('@symfony/webpack-encore');

Encore
        // directory where all compiled assets will be stored
        .setOutputPath(path.join(__dirname, 'web/dist'))
        // Windows??? <---------------------------
        // .setManifestKeyPrefix()
        // what's the public path to this directory (relative to your project's document root dir)
        .setPublicPath('/dist')
        // empty the outputPath dir before each build
        .cleanupOutputBeforeBuild()
        // will output as web/build/app.js
        .addEntry('app', [
            'babel-polyfill',
            './src/ScriptsWeavers/ReactBundle/Resources/js/entryPoint.js'
        ])
        .addStyleEntry('css/main',[ 
            './src/ScriptsWeavers/ReactBundle/Resources/scss/app.scss' 
        ])
        // will output as web/build/app.css
        // allow sass/scss files to be processed
        .enableReactPreset()
        // allow legacy applications to use $/jQuery as a global variable
        .autoProvidejQuery()
        // create hashed filenames (e.g. app.abc123.css)
        .enableVersioning(Encore.isProduction())
        .enableSourceMaps(!Encore.isProduction())
        
        .enableSassLoader()
;
// export the final configuration
module.exports = Encore.getWebpackConfig();

and there is the config who doesn't work

var path = require('path');
var Encore = require('@symfony/webpack-encore');

Encore
        // directory where all compiled assets will be stored
        .setOutputPath(path.join(__dirname, 'web/dist'))
        // Windows??? <---------------------------
        // .setManifestKeyPrefix()
        // what's the public path to this directory (relative to your project's document root dir)
        .setPublicPath('/dist')
        // empty the outputPath dir before each build
        .cleanupOutputBeforeBuild()
        // will output as web/build/app.js
        .addEntry('app', [
            'babel-polyfill',
            './src/ScriptsWeavers/ReactBundle/Resources/js/entryPoint.js',
            './src/ScriptsWeavers/ReactBundle/Resources/scss/app.scss' 
        ])
//        .addStyleEntry('css/main',[ 
//            './src/ScriptsWeavers/ReactBundle/Resources/scss/app.scss' 
//        ])
        // will output as web/build/app.css
        // allow sass/scss files to be processed
        .enableReactPreset()
        // allow legacy applications to use $/jQuery as a global variable
        .autoProvidejQuery()
        // create hashed filenames (e.g. app.abc123.css)
        .enableVersioning(Encore.isProduction())
        .enableSourceMaps(!Encore.isProduction())
        
        .enableSassLoader()
;
// export the final configuration
module.exports = Encore.getWebpackConfig();

no one css work on second

[weaverryan]

.addEntry('app', ['babel-polyfill', 'whatwg-fetch', './client/js/entryPoint.js', './client/sass/layout.scss'])

This will create an app.js file but also an app.css file - make sure you have the link tag for the app.css file in your layout.

without addStyleEntry i still get a main.css in outpout like if encore cached my old conf with .addStyleEntry('css/main', './client/sass/layout.scss') and really dont understand why --"

That also doesn't make sense to me. Just to be sure, manually deleted your entire web/build directory and then re-run webpack. Make sure it's not just "from before". The cleanupOutputBeforeBuild() should empty that directory automatically, but just in case it is not, delete it manually to see if the css/main.css` file goes away.

[grimpows]

as i say before i modified wrong config from other project before, and yes as i can see in manifest.json, an app.css is generated, thinked css would be included like a all-in-one app ...

there is the manifest.json generated when using only addEntry

{
  "dist/app.css": "http://localhost:8080/dist/app.css",
  "dist/app.js": "http://localhost:8080/dist/app.js",
  "dist/fonts/MaterialIcons-Regular.eot": "http://localhost:8080/dist/fonts/MaterialIcons-Regular.eot",
  "dist/fonts/MaterialIcons-Regular.ttf": "http://localhost:8080/dist/fonts/MaterialIcons-Regular.ttf",
  "dist/fonts/MaterialIcons-Regular.woff": "http://localhost:8080/dist/fonts/MaterialIcons-Regular.woff",
  "dist/fonts/MaterialIcons-Regular.woff2": "http://localhost:8080/dist/fonts/MaterialIcons-Regular.woff2",
  "dist/fonts/fontawesome-webfont.eot": "http://localhost:8080/dist/fonts/fontawesome-webfont.eot",
  "dist/fonts/fontawesome-webfont.ttf": "http://localhost:8080/dist/fonts/fontawesome-webfont.ttf",
  "dist/fonts/fontawesome-webfont.woff": "http://localhost:8080/dist/fonts/fontawesome-webfont.woff",
  "dist/fonts/fontawesome-webfont.woff2": "http://localhost:8080/dist/fonts/fontawesome-webfont.woff2",
  "dist/images/fontawesome-webfont.svg": "http://localhost:8080/dist/images/fontawesome-webfont.svg"
}

everything work with <link href="{{ asset('dist/app.css') }}" rel="stylesheet">

but last time i tryed only webpack, i think only app.js was required to get all css included .... there is no way to include app.css inside app.js without asset of app.css ?

[weaverryan]

So just make sure you have <link rel="stylesheet" href="{{ asset('dist/app.css') }}" /> in your layout (assuming you're using Symfony).

Often in webpack, all you need to do is include app.js, and the CSS is automatically included with that file. We don't do that in Encore: we always generate a separate CSS file. This is an opinionated thing from Encore: having CSS in a separate file is a better production setting, so we do it all the time.

[grimpows]

well you answered my question at same time i wrote it 👍 i thought get all in one app.js could be usefull for using cordova or something else ...

[weaverryan]

@grimpows It could be - but nobody has had a use-case and requested that yet. But in theory, we could easily add an option to disable this (generate all-in-one JS files instead of separate CSS files).

[grimpows]

adding the way to get the all-in-on app.js could be cool, also specifing it on doc (as far as i remember i didnt saw the fact that app.css will be generated too ... could be a good improvement for doc and encore 👍 )

[versh23]

@weaverryan hello. i create a simple repo with my issue
https://github.com/versh23/test-encore

[weaverryan]

@versh23 wow, that was maybe the best possible bug report I've ever received! The repo was beautiful and the bug was very easy to replicate. The fix is at #108 :).

Cheers!

[versh23]

@weaverryan 👍 Thank you!