Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Include processed CSS #12

Closed
koddsson opened this issue Jun 9, 2015 · 5 comments
Closed

Include processed CSS #12

koddsson opened this issue Jun 9, 2015 · 5 comments
Labels
bug enhancement

Comments

@koddsson
Copy link

koddsson commented Jun 9, 2015

I'm not sure if I'm messing up or what but I really want to be able to show the CSS before all the postCSS formatting takes place and then include the compiled CSS on the page to show how it looks.

Would adding a option of including a extra CSS file be the correct solution to this problem?

I've made some changes locally that work well enough for my use case.

postcss-style-guide

diff --git a/index.js b/index.js
index dbbe8aa..cbd024e 100644
--- a/index.js
+++ b/index.js
@@ -64,7 +64,8 @@ function generate (maps, css, options) {
         css: nano(css),
         tmplStyle: nano(options.style),
         codeStyle: nano(codeStyle),
-        maps: maps
+        maps: maps,
+        extraCSS: options.extraCSS
     }

     var html = ejs.render(options.template, assign)

psg-theme-default

diff --git a/template.ejs b/template.ejs
index 653b0a0..4cde434 100644
--- a/template.ejs
+++ b/template.ejs
@@ -4,6 +4,9 @@
         <meta charset="UTF-8">
         <title><%= projectName %></title>
         <link rel="stylesheet" href="./default.css">
+        <% if (extraCSS) { %>
+        <link rel="stylesheet" href="<%= extraCSS %>">
+        <% } %>
         <style><%- codeStyle %><%- tmplStyle %><%- css %></style>
     </head>
     <body>

Then I have two gulp tasks, one that builds the CSS with all the postCSS transformations

  gulp.task('css', ['clean:css'], function() {
    return gulp.src(paths.css)
      .pipe(sourcemaps.init())
      .pipe(concat('index.css'))
      .pipe(postcss([
        require('cssnext')(),
        require('postcss-nested')(),
        require('autoprefixer-core')(),
        require('postcss-import')(),
      ]))
      .pipe(sourcemaps.write('.'))
      .pipe(gulp.dest('dist/'))
      .pipe(connect.reload());
  });

and one for the guide where it passes the built CSS filename in as a option.

gulp.task('guide', function() {
  return gulp.src(paths.css)
    .pipe(postcss([
      require('postcss-style-guide')({
        name: 'Bókun', extraCSS: "http://localhost:8001/index.css"
      })
    ]));
});
@sotayamashita
Copy link

@koddsson I'm sorry. I cannot understand so please tell me a example when you use extraCSS and then how style will be change?

Thanks in advance.

@koddsson
Copy link
Author

Hey @sotayamashita! Sorry I'm probably bad at explaining my problem. I've made a simple gist that I think illustrates my problem better that I can do in words.

Because of the order of the postCSS plugins in my sample project, postcss-style-guide will generate a guide from the CSS before it's transpiled from CSS4 to CSS3 using cssnext. This is what I want to do but it also means that postcss-style-guide will inject the CSS4 code into a style tag on the guide page and since my browser cannot parse it yet will result in my examples not having the styles that they should.

By adding a feature that will allow me to inject arbitrary CSS into the guide I can generate it from the original source and still applied the styles once they have gone through all the postcss plugin.

Does that make sense?

@sotayamashita
Copy link

@koddsson Thank you for giving me more details 👍 It make sense.

@matype
Copy link
Owner

matype commented Jun 11, 2015

@koddsson
Thanks for your proposal :D
I'm sorry, I had to include processd CSS by PostCSS. I will fix this in the next version.

@matype matype changed the title Ability to add extra CSS. Include processed CSS Jun 11, 2015
@sotayamashita
Copy link

@morishitter It should have a bug as labels

@matype matype added the bug label Jun 12, 2015
matype pushed a commit that referenced this issue Jun 12, 2015
introduce processed CSS as first parameter #12
c588560
@matype matype closed this as completed Jun 14, 2015
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
bug enhancement
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@koddsson @matype @sotayamashita