Merge pull request #687 from ckeditor/t/ckeditor5-ui/144

Docs: Migrated the snippet adapter to PostCSS (see ckeditor/ckeditor5-ui#144).
ckeditor · Nov 30, 2017 · c8a8cc7 · c8a8cc7
2 parents 8ce64fb + eaf181e
commit c8a8cc7
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 23 deletions.
diff --git a/scripts/docs/snippet-adapter/package.json b/scripts/docs/snippet-adapter/package.json
@@ -4,13 +4,11 @@
   "dependencies": {
     "@ckeditor/ckeditor5-dev-webpack-plugin": "^3.0.0",
     "babel-minify-webpack-plugin": "^0.2.0",
-    "css-loader": "^0.28.7",
     "extract-text-webpack-plugin": "^3.0.0",
-    "node-sass": "^4.5.3",
     "raw-loader": "^0.5.1",
-    "sass-loader": "^6.0.6",
+    "postcss-loader": "^2.0.8",
     "style-loader": "^0.18.2",
-    "webpack": "^3.6.0",
+    "webpack": "^3.8.1",
     "webpack-sources": "1.0.1"
   }
 }
diff --git a/scripts/docs/snippet-adapter/snippetadapter.js b/scripts/docs/snippet-adapter/snippetadapter.js
@@ -8,7 +8,7 @@
 const path = require( 'path' );
 const fs = require( 'fs' );
 const webpack = require( 'webpack' );
-const { bundler } = require( '@ckeditor/ckeditor5-dev-utils' );
+const { bundler, styles: { getPostCssConfig } } = require( '@ckeditor/ckeditor5-dev-utils' );
 const CKEditorWebpackPlugin = require( '@ckeditor/ckeditor5-dev-webpack-plugin' );
 const ExtractTextPlugin = require( 'extract-text-webpack-plugin' );
 const BabelMinifyPlugin = require( 'babel-minify-webpack-plugin' );
@@ -22,18 +22,12 @@ module.exports = function snippetAdapter( data ) {
 
 	const snippetConfig = readSnippetConfig( data.snippetSource.js );
 	const outputPath = path.join( data.outputPath, data.snippetPath );
-	let sassImportPath;
-
-	if ( snippetConfig.sassImportPath ) {
-		sassImportPath = path.join( path.dirname( data.snippetSource.js ), snippetConfig.sassImportPath );
-	}
 
 	const webpackConfig = getWebpackConfig( {
 		entry: data.snippetSource.js,
 		outputPath,
 		language: snippetConfig.language,
-		minify: data.options.production,
-		sassImportPath
+		minify: data.options.production
 	} );
 
 	let promise;
@@ -133,21 +127,18 @@ function getWebpackConfig( config ) {
 					use: [ 'raw-loader' ]
 				},
 				{
-					test: /\.scss$/,
+					test: /\.css$/,
 					use: ExtractTextPlugin.extract( {
 						fallback: 'style-loader',
 						use: [
 							{
-								loader: 'css-loader',
-								options: {
-									minimize: config.minify
-								}
-							},
-							{
-								loader: 'sass-loader',
-								options: {
-									data: config.sassImportPath ? `@import '${ config.sassImportPath }';` : ''
-								}
+								loader: 'postcss-loader',
+								options: getPostCssConfig( {
+									themeImporter: {
+										themePath: require.resolve( '@ckeditor/ckeditor5-theme-lark' )
+									},
+									minify: config.minify
+								} )
 							}
 						]
 					} )